/* ==========================================================================
Ceylan Umzüge & Transporte — Designsystem
Positionierung: "Sie wissen vorher, was drin ist — und was nicht."
Gestaltungsidee: Die Seite liest sich wie eine gut geführte Ladeliste.
Daten, Mengen und Listen stehen in Monospace, Fließtext in Grotesk.
========================================================================== */
/* --------------------------------------------------------------------------
1. TOKENS
Palette abgeleitet aus dem realen Material: Firmenkleidung und Logo (Ink),
Umzugskarton (Kraft), Umzugsdecke (Filz), Packpapier (Paper),
Spanngurt (Signal). Signal ist ausschliesslich Aktionsfarbe.
-------------------------------------------------------------------------- */
:root {
/* Flaechen — warmes Papier statt kaltem Weiss. Helle und dunkle
Abschnitte wechseln sich weiterhin ab; neu ist, dass die hellen warm
sind und die dunklen tief in Navy stehen. */
--paper: #FAF7F0; /* Grundfläche, warmes Creme */
--paper-alt: #F2EADC; /* Ebene 2: Informationsflaechen, minimal tiefer */
--surface: #FFFDF9; /* Karten, fast weiss */
/* Navy traegt die dunklen Abschnitte und zugleich die Schrift. */
--ink: #10233A; /* Firmen-Navy, Überschriften, dunkle Flaechen */
--ink-soft: #4B5768; /* Fließtext */
--ink-faint: #616976; /* Meta, Captions */
--night: #0C1B2E; /* tiefstes Navy: Hero, Fusszeile */
--night-alt: #13273D; /* dunkle Flaeche eine Spur heller */
/* Akzente — Sand loest das Spanngurt-Orange ab. Auf dunklem Grund und als
Knopffuellung steht der helle Ton, als Schrift auf Creme der tiefe:
der helle Sand waere dort nicht lesbar. */
--kraft: #A9885C; /* warme Sekundärfarbe, Holz */
--felt: #8A8378; /* warmes Grau — sekundaere Struktur */
--signal: #8A6229; /* Sand tief — Schrift und Zeichen auf Creme */
--signal-dark: #6F4E1F;
--amber: #D9B77F; /* Sand hell — auf Navy und als Knopffuellung */
--amber-dark: #C9A469;
/* Linien — warm, passend zum Papier */
--line: #E7E0D2;
--line-strong: #D3C9B6;
/* Zustände */
--ok: #3F6B4A; /* enthalten */
--off: #96908A; /* nicht enthalten */
--error: #B3402A; /* Formularfehler — bleibt rot, Signal ist jetzt Sand */
--error-dark: #93321F;
/* Typografie */
/* Die Ueberschriften stehen jetzt in einer Serife: sie traegt den ruhigen,
handwerklichen Ton. Fliesstext bleibt Grotesk, Daten bleiben Mono. */
--font-display: "Playfair Display", Georgia, "Times New Roman", serif;
--font-body: "Archivo", system-ui, sans-serif;
--font-data: "IBM Plex Mono", ui-monospace, monospace;
/* Typo-Skala — 1.25 auf Mobile, wächst über clamp */
--t-hero: clamp(2.1rem, 1.3rem + 3.6vw, 3.9rem);
--t-h2: clamp(1.55rem, 1.2rem + 1.5vw, 2.35rem);
--t-h3: clamp(1.08rem, 1rem + 0.35vw, 1.25rem);
--t-body: 1.02rem;
--t-small: 0.9rem;
--t-label: 0.72rem;
/* Raster */
--wrap: 1140px;
--wrap-narrow: 760px;
--gutter: clamp(20px, 5vw, 40px);
--section: clamp(56px, 9vw, 104px);
/* Form */
--radius: 10px;
--radius-lg: 16px;
--radius-pill: 999px;
/* Kaum sichtbar. Die Karten sollen auf dem Papier liegen, nicht darueber
schweben — der Rand traegt die Abgrenzung, nicht der Schatten. */
--shadow-sm: 0 1px 2px rgba(16,35,58,.04), 0 2px 8px rgba(16,35,58,.05);
--shadow-md: 0 4px 18px rgba(16,35,58,.07);
--shadow-lg: 0 16px 44px rgba(16,35,58,.12);
--ease: cubic-bezier(.2,.7,.3,1);
--dur: .22s;
--tap: 48px; /* Mindestgröße Touch-Ziel */
/* --- Zeichen ---------------------------------------------------------
Ein Vokabular, zwei Praesentationsformen: nackt oder im Navy-Kreis.
Strichstaerke 1.5 gilt fuer JEDES Inline-SVG der Seite. Wer ein neues
Zeichen einsetzt, nimmt diese Werte und erfindet keine eigenen. */
--icon-sm: 18px; /* Pfeile in Knoepfen und Verweisen */
--icon: 22px; /* Standard: neben Text und in Listen */
--icon-lg: 24px; /* im Kreis und in Kartenkoepfen */
--icon-badge: 50px; /* Durchmesser des Navy-Kreises */
/* --- Kontextfarben --------------------------------------------------
Diese vier Tokens sagen, welche Schrift- und Linienfarbe an dieser
Stelle gilt. Voreinstellung ist der dunkle Grund. Jede helle Flaeche
kehrt sie weiter unten in EINEM Block wieder um. Wer eine neue
Komponente baut, benutzt --text / --text-soft / --rule / --accent und
muss dann nie wieder ueberlegen, ob sie hell oder dunkel steht. */
--text: var(--ink);
--text-soft: var(--ink-soft);
--text-faint: var(--ink-faint);
--rule: var(--line);
--rule-strong: var(--line-strong);
--accent: var(--signal);
--accent-dark: var(--signal-dark);
}
/* Dunkle Flaechen kehren die Kontextfarben um. Wer einen neuen dunklen
Abschnitt baut, traegt ihn hier ein — sonst steht dunkler Text auf
dunklem Grund. */
.site-header,
.hero,
.case,
.case-cta,
.trust__note,
.team,
.region,
.contact__card,
.site-footer,
.section--ink {
--text: var(--paper);
--text-soft: rgba(250,247,240,.76);
--text-faint: rgba(250,247,240,.52);
--rule: rgba(250,247,240,.16);
--rule-strong: rgba(250,247,240,.30);
--accent: var(--amber);
--accent-dark: var(--amber-dark);
}
/* --------------------------------------------------------------------------
2. BASIS
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
/* Sprungziele nicht unter die klebende Kopfzeile schieben */
scroll-padding-top: clamp(88px, 7vw, 108px);
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}
body {
margin: 0;
background: var(--paper);
color: var(--text-soft);
font-family: var(--font-body);
font-size: var(--t-body);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
::selection { background: var(--amber); color: var(--ink); }
/* --------------------------------------------------------------------------
3. TYPOGRAFIE
-------------------------------------------------------------------------- */
h1, h2, h3, h4 {
margin: 0 0 .5em;
font-family: var(--font-display);
color: var(--text);
font-weight: 600;
line-height: 1.14;
letter-spacing: -0.01em;
/* Deutsche Komposita sollen nicht zerreissen */
hyphens: auto;
overflow-wrap: break-word;
}
h1 { font-size: var(--t-hero); letter-spacing: -0.03em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0 0 1.1em; max-width: 62ch; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
strong { color: var(--ink); font-weight: 600; }
/* Das Label ist ein Datenpunkt, kein Schmuck: es benennt den Abschnitt. */
.label {
display: inline-block;
margin: 0 0 14px;
font-family: var(--font-data);
font-size: var(--t-label);
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
/* Kontextfarbe: auf Creme der tiefe Sand, auf Navy der helle. --kraft war
hier zu blass, die Marke ist Mono in 11,5 px und braucht 4,5:1. */
color: var(--accent);
}
.label--felt { color: var(--felt); }
.label--signal { color: var(--signal); }
.label--paper { color: rgba(250,247,240,.62); }
/* Kurzer Strich unter der Abschnittsmarke. Steht bewusst nicht in jedem
Abschnittskopf — er setzt einen Auftakt und verliert seine Wirkung, wenn
er ueberall auftaucht. Klasse ist da, wer ihn woanders braucht. */
.label__rule {
width: 46px; height: 1px; border: 0;
margin: 2px auto clamp(20px, 2.2vw, 28px);
background: var(--accent);
opacity: .6;
}
.section-head .label { margin-bottom: 10px; }
.label__rule--links { margin-left: 0; margin-right: 0; }
/* Fliesstext-Grösse für Einleitungen */
.lead {
font-size: clamp(1.06rem, 1rem + .35vw, 1.2rem);
line-height: 1.6;
}
/* Zahlen, Masse, Mengen — immer in Mono, tabellarisch */
.data {
font-family: var(--font-data);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
/* --------------------------------------------------------------------------
4. LAYOUT
-------------------------------------------------------------------------- */
.wrap {
width: 100%;
max-width: var(--wrap);
margin-inline: auto;
padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }
.section { padding-block: var(--section); background: var(--paper); }
.section--alt { background: var(--paper-alt); }
.section--ink { background: var(--night); }
.section--ink h2, .section--ink h3 { color: var(--text); }
.section--ink strong { color: var(--text); }
.section-head { margin-bottom: clamp(32px, 5vw, 56px); }
/* Abschnittsueberschriften stehen in der Serife und in grossem Grad. Dort
zerlegt die automatische Silbentrennung das Wortbild — sie bleibt den
Fliesstexten vorbehalten, die sie in deutschen Komposita wirklich
brauchen. */
.section-head h2 { hyphens: none; }
/* Die Abschnittsmarke ist ebenfalls ein . Ohne das :not() gewinnt diese
Regel gegen .label--signal — sie ist spezifischer — und die Marke stuende
in Fliesstextgrau statt in der Akzentfarbe. */
.section-head > p:not(.label) { color: var(--text-soft); }
/* Einleitung, deren Zeilenfall von Hand gesetzt ist (
). Die uebliche
Deckelung auf 62 Zeichen wuerde zusaetzlich umbrechen und den gesetzten
Fall zerlegen. Breiter, dafuer traegt hier der
die Gliederung. */
.section-head__lines { max-width: min(100%, 68rem); }
/* Hairline als Struktur, nicht als Deko */
.rule {
height: 1px;
background: var(--rule);
border: 0;
margin: 0;
}
/* --------------------------------------------------------------------------
5. BUTTONS
Nur EIN Signal-Button pro Bildschirm. Alles andere ist sekundär.
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: var(--tap);
padding: 13px 26px;
border: 1.5px solid transparent;
border-radius: var(--radius-pill);
font-family: var(--font-body);
font-size: .96rem;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background var(--dur) var(--ease),
border-color var(--dur) var(--ease),
color var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: var(--icon-sm); height: var(--icon-sm); flex: none; }
.btn--primary {
background: var(--amber);
color: var(--ink);
box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--amber-dark); }
.btn--secondary {
background: transparent;
color: var(--text);
border-color: var(--rule-strong);
}
.btn--secondary:hover { border-color: var(--text); background: rgba(16,35,58,.05); }
.btn--amber {
background: var(--amber);
color: var(--ink);
box-shadow: 0 10px 26px rgba(0,0,0,.32);
}
.btn--amber:hover { background: var(--amber-dark); }
.btn--onink {
background: transparent;
color: var(--paper);
border-color: rgba(250,247,240,.34);
}
.btn--onink:hover { border-color: var(--paper); background: rgba(250,247,240,.09); }
/* Umriss in Signal — fuer den zweiten Weg, der gleichwertig ist, aber nicht
die Hauptaktion sein soll. */
.btn--outline {
background: transparent;
color: var(--accent);
border-color: var(--accent);
}
.btn--outline:hover {
background: rgba(168,123,60,.09);
color: var(--accent-dark);
border-color: var(--accent-dark);
}
.btn--lg { padding: 17px 34px; font-size: 1.02rem; }
.btn--sm { min-height: 40px; padding: 9px 18px; font-size: .86rem; }
.btn--block { width: 100%; }
/* --------------------------------------------------------------------------
6. KARTEN
Pfeil oben rechts signalisiert Klickbarkeit ohne Button-Optik.
-------------------------------------------------------------------------- */
.card {
position: relative;
display: block;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
border-radius: var(--radius-lg);
padding: 28px 26px;
text-decoration: none;
transition: border-color var(--dur) var(--ease),
box-shadow var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
a.card:hover {
border-color: var(--line-strong);
box-shadow: var(--shadow-md);
}
.card h3 { margin-bottom: 8px; }
.card p { font-size: var(--t-small); margin: 0; max-width: 30ch; }
.card__arrow {
position: absolute;
top: 24px;
right: 24px;
width: 32px;
height: 32px;
border: 1px solid var(--line);
border-radius: 50%;
display: grid;
place-items: center;
color: var(--kraft);
transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
a.card:hover .card__arrow { background: var(--kraft); color: #fff; border-color: var(--kraft); }
.card__arrow svg { width: 15px; height: 15px; }
/* Karte mit vorangestelltem Datenpunkt (z. B. "2. OG · kein Aufzug") */
.card__meta {
font-family: var(--font-data);
font-size: var(--t-label);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--felt);
margin-bottom: 10px;
}
.grid {
display: grid;
gap: 18px;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
/* --------------------------------------------------------------------------
7. SIGNATURE: DIE LISTE
Das ist der Kern der Marke. Enthalten / nicht enthalten,
nebeneinander, gleichwertig, in Ladelisten-Optik.
-------------------------------------------------------------------------- */
.ledger {
display: grid;
gap: 0;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
}
@media (min-width: 720px) {
.ledger { grid-template-columns: 1fr 1fr; }
.ledger__col + .ledger__col { border-left: 1px solid var(--line); }
}
.ledger__col { padding: 26px 24px; }
.ledger__col + .ledger__col { border-top: 1px solid var(--line); }
@media (min-width: 720px) {
.ledger__col + .ledger__col { border-top: 0; }
}
.ledger__head {
display: flex;
align-items: center;
gap: 9px;
font-family: var(--font-data);
font-size: var(--t-label);
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
padding-bottom: 14px;
margin-bottom: 16px;
border-bottom: 1px solid var(--line);
}
.ledger__head--in { color: var(--ok); }
.ledger__head--out { color: var(--off); }
.ledger ul { list-style: none; margin: 0; padding: 0; }
.ledger li {
display: grid;
grid-template-columns: 20px 1fr;
gap: 11px;
align-items: start;
padding: 9px 0;
font-size: var(--t-small);
line-height: 1.5;
}
.ledger li + li { border-top: 1px dotted var(--line); }
.ledger li::before {
font-family: var(--font-data);
font-size: .95rem;
line-height: 1.5;
}
.ledger__col--in li { color: var(--ink); }
.ledger__col--in li::before { content: "✓"; color: var(--ok); font-weight: 600; }
.ledger__col--out li { color: var(--ink-soft); }
.ledger__col--out li::before { content: "–"; color: var(--off); }
.ledger__note {
padding: 16px 24px;
background: var(--paper-alt);
border-top: 1px solid var(--line);
font-size: var(--t-small);
grid-column: 1 / -1;
}
/* --------------------------------------------------------------------------
8. FAKTOREN-LISTE (Rechenweg statt Preis)
-------------------------------------------------------------------------- */
.factors { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.factors li {
display: grid;
grid-template-columns: auto 1fr;
gap: 14px;
align-items: baseline;
padding: 14px 0;
border-bottom: 1px solid var(--line);
}
.factors .factors__no {
font-family: var(--font-data);
font-size: var(--t-label);
color: var(--signal-dark);
letter-spacing: .08em;
}
.factors strong { display: block; margin-bottom: 2px; }
.factors span { font-size: var(--t-small); }
/* --------------------------------------------------------------------------
8b. PREIS — vier Karten statt nummerierter Liste
-------------------------------------------------------------------------- */
.reckon {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: clamp(14px, 1.6vw, 20px);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.reckon > li {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: clamp(22px, 2.6vw, 32px);
}
.reckon__icon { margin-bottom: 16px; }
.reckon h3 {
margin: 0 0 8px;
font-size: 1.08rem;
line-height: 1.3;
hyphens: none;
color: var(--text);
}
.reckon p {
margin: 0;
font-size: var(--t-small);
line-height: 1.6;
color: var(--text-soft);
max-width: 42ch;
}
.reckon__note {
margin: clamp(22px, 2.8vw, 36px) auto 0;
max-width: 62ch;
text-align: center;
font-size: var(--t-small);
color: var(--text-soft);
}
@media (max-width: 720px) {
.reckon { grid-template-columns: minmax(0, 1fr); }
}
/* --------------------------------------------------------------------------
9. FORMULAR (Umzugscheck)
Grosse Touch-Ziele, Auswahl als Kacheln statt als Radio-Punkte.
-------------------------------------------------------------------------- */
.field { margin-bottom: 22px; }
.field > label,
.fieldset__legend {
display: block;
margin-bottom: 9px;
font-size: var(--t-small);
font-weight: 600;
color: var(--ink);
}
.field__hint {
margin: 6px 0 0;
font-size: .82rem;
color: var(--ink-faint);
}
.input, .select, .textarea {
width: 100%;
min-height: var(--tap);
padding: 12px 14px;
background: var(--surface);
border: 1.5px solid var(--line-strong);
border-radius: var(--radius);
font-family: inherit;
font-size: 16px; /* verhindert iOS-Zoom */
color: var(--ink);
transition: border-color var(--dur) var(--ease);
}
.input:focus, .select:focus, .textarea:focus {
border-color: var(--ink);
outline: none;
box-shadow: 0 0 0 3px rgba(16,35,58,.12);
}
.input[aria-invalid="true"] { border-color: var(--error); }
/* Einwilligung: das Haekchen war 18 px gross und damit auf dem Handy kaum
zu treffen. Die ganze Zeile ist jetzt das Ziel. */
.field__consent {
display: flex; gap: 12px; align-items: flex-start;
min-height: var(--tap);
padding: 6px 0;
font-weight: 400; font-size: .86rem; line-height: 1.5;
cursor: pointer;
}
.field__consent input {
flex: none;
width: 24px; height: 24px;
margin: 0;
accent-color: var(--ink);
}
.field__consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.field__error {
display: flex;
gap: 6px;
margin: 7px 0 0;
font-size: .82rem;
color: var(--error-dark);
font-weight: 500;
}
/* Auswahl-Kacheln */
.choices { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%,140px), 1fr)); }
.choice { position: relative; display: flex; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice span {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: var(--tap);
padding: 12px 14px;
background: var(--surface);
border: 1.5px solid var(--line-strong);
border-radius: var(--radius);
font-size: .93rem;
font-weight: 500;
color: var(--ink);
text-align: center;
cursor: pointer;
transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.choice input:hover + span { border-color: var(--felt); }
.choice input:checked + span {
border-color: var(--ink);
background: var(--ink);
color: var(--paper);
}
.choice input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 3px; }
/* Fortschritt */
.progress { margin-bottom: 28px; }
.progress__meta {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
margin-bottom: 9px;
font-family: var(--font-data);
font-size: var(--t-label);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--felt);
}
.progress__track {
height: 4px;
background: var(--line);
border-radius: 2px;
overflow: hidden;
}
.progress__bar {
height: 100%;
background: var(--ink);
border-radius: 2px;
transition: width .35s var(--ease);
}
/* Vollständigkeit — immer mit Klartext, nie nur Prozent */
.completeness {
background: var(--surface);
border: 1px solid var(--line);
border-left: 3px solid var(--kraft);
border-radius: var(--radius);
padding: 18px 20px;
}
.completeness__value {
font-family: var(--font-data);
font-size: 1.5rem;
font-weight: 600;
color: var(--ink);
line-height: 1;
}
.completeness ul { margin: 10px 0 0; padding-left: 18px; font-size: var(--t-small); }
.completeness li { margin-bottom: 3px; }
/* --------------------------------------------------------------------------
10. BILDER
Echte Einsatzfotos sind Beweis, nicht Dekoration.
-------------------------------------------------------------------------- */
.photo {
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--paper-alt);
}
.photo img { width: 100%; height: auto; object-fit: cover; }
.photo--portrait img { aspect-ratio: 4/5; }
.photo--landscape img { aspect-ratio: 3/2; }
.photo figcaption {
font-family: var(--font-data);
font-size: var(--t-label);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-faint);
padding: 10px 2px 0;
}
/* Badges für Orte */
.badges { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; margin: 0; padding: 0; }
.badges li {
padding: 8px 16px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-pill);
font-size: .88rem;
font-weight: 500;
color: var(--ink);
}
/* --------------------------------------------------------------------------
11. HILFSKLASSEN
-------------------------------------------------------------------------- */
.stack > * + * { margin-top: var(--stack-gap, 18px); }
.cluster { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.center { text-align: center; }
.center p { margin-inline: auto; }
.visually-hidden {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 999;
background: var(--ink); color: var(--paper);
padding: 12px 20px; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }
/* ==========================================================================
12. SEITENBAUSTEINE
Struktur orientiert an der Referenz ruempelbruedergau.de:
Foto-Hero mit Glaspanel, konkrete Vertrauensleiste, Icon-Karten,
Bildergalerie mit Zähler, FAQ-Akkordeon, geteilter Kontaktblock.
========================================================================== */
/* --- Bild-Platzhalter -----------------------------------------------------
Markiert reservierte Flächen, bis die echten Fotos da sind.
Klasse entfernen, sobald ein Bild eingesetzt wurde.
-------------------------------------------------------------------------- */
.ph {
position: relative;
display: grid;
place-items: center;
padding: 24px;
text-align: center;
background:
repeating-linear-gradient(45deg, #F3EDE1 0 12px, #E9E1D0 12px 24px);
border: 2px dashed var(--line-strong);
border-radius: var(--radius-lg);
color: var(--ink-soft);
}
.ph__label {
font-family: var(--font-data);
font-size: .74rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--kraft);
margin-bottom: 6px;
}
.ph__what { font-size: .92rem; font-weight: 600; color: var(--ink); max-width: 30ch; }
.ph__spec {
font-family: var(--font-data);
font-size: .74rem;
color: var(--ink-faint);
margin-top: 8px;
}
.ph--wide { aspect-ratio: 16/9; }
.ph--land { aspect-ratio: 3/2; }
.ph--port { aspect-ratio: 4/5; }
.ph--square { aspect-ratio: 1/1; }
/* --- Header --------------------------------------------------------------- */
.site-header {
position: sticky; top: 0; z-index: 100;
background: rgba(12,27,46,.88);
backdrop-filter: saturate(1.4) blur(12px);
border-bottom: 1px solid transparent;
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--rule); box-shadow: 0 8px 26px rgba(6,14,25,.34); }
.site-header__inner {
display: flex; align-items: center; gap: clamp(18px, 2.6vw, 44px);
min-height: clamp(74px, 6.4vw, 100px);
}
.brand {
display: flex; align-items: center;
gap: clamp(14px, 1.5vw, 24px);
text-decoration: none; margin-right: auto;
}
.brand img {
height: clamp(36px, 3.1vw, 50px); width: auto;
padding-right: clamp(14px, 1.5vw, 24px);
border-right: 1px solid var(--rule);
}
.brand__name {
display: block; font-family: var(--font-display); font-weight: 700;
font-size: clamp(1rem, 1.1vw, 1.22rem); color: var(--text);
line-height: 1.2; white-space: nowrap; letter-spacing: -0.01em;
}
/* Dritte Zeile: wo wir fahren. Steht im Kopf, damit es jeder sofort sieht,
ohne scrollen zu muessen. */
.brand__region {
display: flex; align-items: center; gap: 6px;
margin-top: 6px;
font-size: clamp(.72rem, .74vw, .82rem);
color: var(--text-faint); white-space: nowrap;
}
.brand__region svg { width: 16px; height: 16px; flex: none; color: var(--text-faint); }
.nav__list { display: flex; gap: clamp(16px, 1.9vw, 30px); list-style: none; margin: 0; padding: 0; }
.nav__list a {
text-decoration: none; font-size: clamp(.9rem, .95vw, 1rem); font-weight: 500; color: var(--text-soft);
padding: 6px 0; position: relative; white-space: nowrap;
transition: color var(--dur) var(--ease);
}
.nav__list a:hover, .nav__list a[aria-current="page"] { color: var(--text); }
.nav__list a[aria-current="page"]::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0;
height: 2px; background: var(--accent); border-radius: 2px;
}
.header__actions { display: flex; align-items: center; gap: 12px; }
.burger {
display: none; width: 46px; height: 46px; padding: 0;
background: transparent; border: 1.5px solid var(--rule-strong);
border-radius: var(--radius); cursor: pointer;
}
.burger span { display: block; width: 19px; height: 2px; margin: 4px auto; background: var(--text); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 900px) {
.brand__region { display: none; }
}
@media (max-width: 1080px) {
.burger { display: block; }
.nav {
position: fixed; inset: 72px 0 auto 0;
background: var(--night-alt); border-bottom: 1px solid var(--rule);
box-shadow: 0 18px 40px rgba(6,14,25,.44);
opacity: 0; visibility: hidden; transform: translateY(-8px);
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.nav.is-open { opacity: 1; visibility: visible; transform: none; }
.nav__list { flex-direction: column; gap: 0; padding: 8px 24px 20px; }
.nav__list a { display: block; padding: 15px 0; border-bottom: 1px solid var(--rule); font-size: 1rem; }
.header__cta-text { display: none; }
}
.header__cta-short { display: none; }
/* Schmal: Kopfzeilen-Knopf und Logo auf volle Daumengroesse bringen. */
@media (max-width: 760px) {
.header__actions .btn--sm { min-height: 44px; }
.brand { min-height: 44px; }
}
/* Sehr schmal: der lange Knopftext drueckt sonst das Logo zusammen —
bei 360 px blieben davon 39 px uebrig. */
@media (max-width: 620px) {
.header__cta-long { display: none; }
.header__cta-short { display: inline; }
.brand img { flex: none; }
.header__actions .btn--sm { padding-inline: 16px; }
}
/* --- Hero mit Foto --------------------------------------------------------
Bildausschnitt liegt rechts, damit der Mitarbeiter mit Firmenlogo frei
neben der Karte steht. Der Verlauf dunkelt links stark ab und laeuft nach
rechts aus, statt das ganze Bild gleichmaessig zu ueberdecken.
-------------------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: -2; background: var(--night); }
/* picture darf keinen eigenen Kasten aufmachen, sonst verliert das Bild
seinen Bezug zu .hero__media. */
.hero__media picture { display: contents; }
/* Das Motiv sitzt in der Quelle mittig. Ohne Textkarte soll es wie im
Entwurf rechts stehen, damit die beiden frei neben dem Text bleiben und
nicht halb im dunklen Verlauf haengen. Der Rahmen wird dafuer breiter
als die Section gezogen; was rechts hinauslaeuft, schneidet .hero ab.
Die linke Kante liegt ohnehin unter der dichtesten Stelle des Verlaufs. */
.hero__media img, .hero__media .ph {
width: 100%; height: 100%;
object-fit: cover; object-position: center center;
border: 0; border-radius: 0;
}
@media (min-width: 1000px) {
/* Das Motiv nach rechts schieben, damit die vordere Gruppe frei neben dem
Text steht und die hintere unter der dichtesten Stelle des Verlaufs
verschwindet. Der Streifen, der links frei wird, zeigt den Grund von
.hero__media — dasselbe Navy wie der Verlauf, er faellt nicht auf.
Erst ab 1000 px: darunter steht neben dem Text kein Bild mehr frei,
und der Versatz wuerde nur eine leere Flaeche erzeugen. */
.hero__media img { transform: translateX(13%); }
}
.hero::after {
content: ""; position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(97deg,
rgba(10,22,37,.95) 0%,
rgba(10,22,37,.92) 25%,
rgba(10,22,37,.74) 43%,
rgba(10,22,37,.38) 60%,
rgba(10,22,37,.16) 77%,
rgba(10,22,37,.12) 100%);
}
.hero__inner {
display: flex; align-items: center;
max-width: 1480px;
min-height: clamp(540px, 72vh, 820px);
padding-block: clamp(48px, 6vw, 80px);
}
.hero__panel {
width: 100%;
max-width: 620px;
}
@media (min-width: 1200px) { .hero__panel { max-width: min(660px, 46vw); } }
.hero__badge {
display: flex; align-items: flex-start; gap: clamp(12px, 1.2vw, 17px);
margin: 0 0 clamp(30px, 3.4vw, 46px);
font-size: clamp(.86rem, .9vw, 1rem); font-weight: 400;
color: rgba(250,247,240,.92);
}
.hero__badge svg {
width: var(--icon-lg); height: var(--icon-lg);
flex: none; color: var(--accent); margin-top: 0;
}
/* Der kurze Strich sitzt unter dem Text, nicht unter dem Zeichen — deshalb
haengt er am span und nicht am Absatz. */
.hero__badge span { display: block; }
.hero__badge span::after {
content: ""; display: block;
width: 48px; height: 1px; margin-top: 11px;
background: var(--amber); opacity: .55;
}
.hero h1 {
color: var(--paper);
font-size: clamp(2.1rem, 4.7vw, 4.1rem);
line-height: 1.05;
letter-spacing: -0.035em;
hyphens: none;
margin: 0;
}
.hero h1 span { display: block; }
/* Akzentwort in Ueberschriften. Kursiv nur dort, wo es ein Markensatz ist
— im Hero und in der Vertrauens-Section. Sonst aufrecht, nur in Gold. */
.is-accent { color: var(--accent); }
.hero h1 .is-accent { font-style: italic; }
/* Kurzer Akzentstrich unter der Headline */
.hero__rule {
width: clamp(84px, 7.6vw, 112px); height: 2px;
margin: clamp(24px, 2.6vw, 34px) 0 clamp(26px, 2.8vw, 38px);
background: var(--amber); border: 0; border-radius: 2px; opacity: .7;
}
.hero__sub {
color: rgba(250,247,240,.74);
font-size: clamp(.98rem, 1.02vw, 1.1rem);
line-height: 1.68;
max-width: 44ch;
margin: 0 0 clamp(22px, 2.4vw, 30px);
}
/* Regions- und Leistungszeile */
.hero__region {
display: flex; align-items: flex-start; gap: 12px;
margin: 0 0 clamp(26px, 2.8vw, 36px);
font-size: clamp(.95rem, 1vw, 1.06rem); line-height: 1.5;
}
.hero__region svg { width: var(--icon); height: var(--icon); flex: none; color: var(--text-faint); margin-top: 1px; }
.hero__region span { color: rgba(250,247,240,.72); }
.hero__region strong { display: block; color: var(--paper); font-weight: 600; }
.hero .cluster { gap: 14px; }
.hero .btn { min-height: 56px; }
/* Hero: Tablet und Mobile */
@media (max-width: 1199px) and (min-width: 721px) {
/* Karte schmaler halten, damit der Mitarbeiter rechts sichtbar bleibt */
.hero__panel { max-width: min(600px, 76vw); }
.hero__media img, .hero__media .ph { object-position: 84% center; }
.hero::after {
background: linear-gradient(100deg,
rgba(10,22,37,.94) 0%, rgba(10,22,37,.86) 38%,
rgba(10,22,37,.60) 58%, rgba(10,22,37,.28) 80%,
rgba(10,22,37,.20) 100%);
}
}
@media (max-width: 560px) {
/* Der Wortlaut steckt bereits im Logo — Textblock waere doppelt und
sprengt die Kopfzeile. */
.brand > span { display: none; }
.brand img { padding-right: 0; border-right: 0; }
.site-header__inner { gap: 12px; }
.header__actions { gap: 9px; }
}
@media (max-width: 720px) {
/* Hochkant: Motiv nach oben ruecken, Karte darunter, Verlauf vertikal */
.hero__media img, .hero__media .ph { object-position: 76% 34%; }
/* Ohne Textkarte muss der Verlauf oben aufmachen, sonst steht der ganze
Hero als leere dunkle Flaeche da. Bis etwa einem Drittel bleibt das
Foto sichtbar, darunter deckt er zu — dort beginnt der Text. */
.hero::after {
background: linear-gradient(178deg,
rgba(10,22,37,.20) 0%,
rgba(10,22,37,.27) 18%,
rgba(10,22,37,.93) 34%,
rgba(10,22,37,.98) 52%,
rgba(10,22,37,.99) 100%);
}
.hero__inner {
align-items: flex-end;
min-height: min(700px, 92svh);
padding-block: 130px 40px;
}
.hero__panel { max-width: none; }
.hero__sub { max-width: none; }
.hero .cluster { flex-direction: column; align-items: stretch; }
.hero .cluster .btn { width: 100%; }
}
/* --- Waldsaum als Uebergangsmotiv ----------------------------------------
Der Schwarzwald ist ein Markenmotiv, kein Tapetenmuster. Deshalb liegt
die Silhouette NICHT flaechig hinter ganzen Abschnitten, sondern als
schmales Band am FUSS eines Abschnitts — als Uebergang in den naechsten.
Erlaubt sind zwei bis drei Stellen auf der ganzen Startseite; aktuell:
Leistungen → Vertrauen und Vertrauen → Angebotsweg.
Anwenden: `.wald` an die Section, als erstes Kind ein leeres
`
`.
Die Grafik ist eine WAAGERECHT nahtlose Kachel: jeder Baum ist
zusaetzlich eine Kachelbreite links und rechts gesetzt, deshalb ist an
der Wiederholung keine senkrechte Kante zu sehen. Sie ist in Navy
gefuellt — `currentColor` greift bei einem Hintergrundbild nicht.
-------------------------------------------------------------------------- */
.wald {
position: relative;
isolation: isolate;
overflow: hidden;
/* Bewusst OHNE Hintergrund: welche Ebene der Abschnitt traegt, entscheidet
seine eigene Klasse (.section, .section--alt). Sonst liesse sich der
Rhythmus der Hintergruende nicht mehr staffeln. */
}
.wald__media {
position: absolute; inset: 0; z-index: -2;
}
.wald__media::before {
content: "";
position: absolute; left: 0; right: 0; bottom: 0;
height: clamp(88px, 10vw, 148px);
background: url("img/tannen.svg") left bottom / auto 100% repeat-x;
opacity: .16;
pointer-events: none;
}
/* Der Inhalt muss ueber dem Band liegen. */
.wald > .wrap { position: relative; }
/* --- Vertrauensleiste unter dem Hero -------------------------------------
Vier Belege in einer Zeile, direkt unter dem Banner: die Bewertung in
Zahlen und drei Zusagen. Bewusst als eine durchgehende Karte und nicht
als vier einzelne — vier Kaesten nebeneinander waeren wieder
zusammengesetzte UI. Die feinen Striche gliedern, der Rand haelt zusammen.
Kein Google-Logo: die Wortmarke reicht, und ein farbiges Fremdlogo waere
der einzige bunte Fleck der ganzen Seite.
-------------------------------------------------------------------------- */
.proof { background: var(--paper); padding-block: clamp(28px, 3.4vw, 44px); }
.proof__bar {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
/* stretch, nicht center: sonst sind die Zellen unterschiedlich hoch und
die Trennstriche laufen nicht durch. Der Inhalt wird in der Zelle
zentriert, nicht die Zelle im Raster. */
align-items: stretch;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
/* Damit die Hover-Flaeche der Randfelder an der Rundung abschneidet und
nicht ueber die Ecke hinauslaeuft. */
overflow: hidden;
}
.proof__bar > li {
display: flex; align-items: center; gap: clamp(12px, 1.3vw, 18px);
padding: clamp(22px, 2.4vw, 30px) clamp(18px, 2vw, 28px);
font-size: clamp(.9rem, .92vw, 1rem);
line-height: 1.45;
color: var(--text);
transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* Hover: eine Spur waermer, das Zeichen wechselt nach Gold. Keine
Verschiebung, kein Schatten, kein Schein — die Leiste soll ruhig
bleiben. Beruehrungsgeraete lassen den Zustand aus, dort wuerde er
nach dem Tippen haengen bleiben. */
@media (hover: hover) {
.proof__bar > li:hover {
background: var(--paper);
/* Innen gesetzt, damit die Linie nichts verschiebt. */
box-shadow: inset 0 -2px 0 var(--accent);
}
.proof__bar > li > svg { transition: color var(--dur) var(--ease); }
.proof__bar > li:hover > svg { color: var(--accent); }
}
.proof__bar > li + li { border-left: 1px solid var(--rule); }
.proof__bar > li > svg { width: var(--icon-lg); height: var(--icon-lg); flex: none; color: var(--ink); }
/* Die Bewertung traegt die Zahl, nicht ein Logo. */
.proof__rating { gap: clamp(14px, 1.5vw, 20px); }
.proof__score {
margin: 0;
font-family: var(--font-display);
font-size: clamp(1.9rem, 2.4vw, 2.5rem);
line-height: .95; letter-spacing: -0.02em;
color: var(--ink);
}
.proof__stars { display: flex; gap: 2px; margin: 0 0 4px; color: var(--amber); }
.proof__stars svg { width: 14px; height: 14px; }
.proof__label {
margin: 0;
font-family: var(--font-data);
font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase;
color: var(--text-faint);
}
/* Vier nebeneinander brauchen Platz. Darunter zwei mal zwei, ganz schmal
untereinander — die Striche wechseln dabei die Richtung. */
@media (max-width: 1000px) {
.proof__bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.proof__bar > li + li { border-left: 0; }
.proof__bar > li:nth-child(even) { border-left: 1px solid var(--rule); }
.proof__bar > li:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 600px) {
.proof__bar { grid-template-columns: minmax(0, 1fr); }
.proof__bar > li:nth-child(even) { border-left: 0; }
.proof__bar > li + li { border-top: 1px solid var(--rule); }
}
/* --- Vertrauens-Section (hell, mit Waldsaum) ------------------------------
Zentrierter Kopf, darunter drei helle Karten mit Foto am Fuss, darunter
ein dunkler Balken mit Hinweis und Knopf. Den Hintergrund bringt `.wald`
mit.
ACHTUNG: Diese Section ist hell. Sie steht deshalb NICHT im Umkehr-Block
der Kontextfarben. Nur der Hinweisbalken ist dunkel und steht dort.
-------------------------------------------------------------------------- */
.trust {
padding-block: clamp(52px, 6.2vw, 88px);
background: var(--paper);
color: var(--text-soft);
text-align: center;
}
.trust__inner { position: relative; }
/* Kopf des Abschnitts: Zeichen, Marke, Ueberschrift. Der Schlusspunkt der
Ueberschrift steht in Amber — dieselbe Setzung wie im Hero. */
.trust__mark {
display: block;
margin: 0 auto clamp(14px, 1.6vw, 20px);
color: var(--accent);
}
.trust__mark svg {
width: clamp(52px, 4.6vw, 68px);
height: auto;
margin: 0 auto;
}
.trust .label--amber {
color: var(--accent);
margin-bottom: clamp(8px, 1vw, 12px);
}
.trust h2 {
color: var(--text);
font-size: clamp(1.75rem, 3.2vw, 2.85rem);
line-height: 1.14;
letter-spacing: -0.03em;
hyphens: none;
margin: 0 0 clamp(30px, 3.8vw, 54px);
}
.trust h2 .is-accent { font-style: italic; }
/* Drei Karten, Foto buendig am Fuss. Wie bei den Leistungen sorgt flex:1
im Textteil dafuer, dass die Fotos aller drei auf einer Linie stehen. */
.trust__cols {
list-style: none; margin: 0 0 clamp(24px, 2.8vw, 36px); padding: 0;
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(16px, 1.8vw, 24px);
align-items: stretch;
}
.trust__cols li {
display: flex; flex-direction: column;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.trust__card {
flex: 1;
padding: clamp(26px, 2.8vw, 34px) clamp(22px, 2.4vw, 30px) clamp(20px, 2.2vw, 26px);
text-align: left;
}
.trust__head { display: flex; align-items: center; gap: clamp(14px, 1.5vw, 18px); }
/* Kurzer Strich unter der Ueberschrift, buendig mit ihr — nicht unter dem
Zeichen. Deshalb haengt er nicht am Kopf, sondern steht fuer sich und
wird links um Zeichenbreite plus Abstand eingerueckt. */
.trust__rule {
width: 42px; height: 2px; border: 0;
margin: clamp(14px, 1.6vw, 18px) 0 clamp(16px, 1.8vw, 22px);
margin-left: calc(var(--icon-badge) + clamp(14px, 1.5vw, 18px));
background: var(--accent);
}
/* Zeichen im dunklen Kreis — der Kreis traegt den Kontrast, das Zeichen
steht darin in Sand. */
.trust__icon { margin: 0; }
.trust__cols h3 {
color: var(--text);
font-size: clamp(1.12rem, 1.3vw, 1.34rem);
letter-spacing: -0.01em;
hyphens: none;
margin: 0;
}
.trust__cols p {
margin: 0; max-width: 34ch;
font-size: .93rem; line-height: 1.62;
color: var(--text-soft);
}
/* Foto am Fuss der Karte */
.trust__shot {
position: relative; aspect-ratio: 16 / 11;
margin: 0 clamp(14px, 1.5vw, 18px) clamp(14px, 1.5vw, 18px);
border-radius: 12px; overflow: hidden;
}
.trust__shot img,
.trust__shot .ph {
position: absolute; inset: 0;
width: 100%; height: 100%;
border: 0; border-radius: 0;
}
.trust__shot img { object-fit: cover; object-position: center; }
.trust__shot .ph { font-size: .7rem; border-width: 0; border-top: 2px dashed var(--line-strong); }
/* Hinweisbalken — traegt jetzt auch den Knopf. Als einzige dunkle Flaeche
in einer hellen Section steht er im Umkehr-Block der Kontextfarben. */
.trust__note {
display: flex; align-items: center; gap: clamp(16px, 2vw, 28px);
margin: 0;
padding: clamp(16px, 1.8vw, 24px) clamp(20px, 2.2vw, 28px);
background: var(--ink);
border-radius: var(--radius-lg);
text-align: left;
}
.trust__note > svg { width: var(--icon-lg); height: var(--icon-lg); flex: none; color: var(--amber); }
.trust__note span {
flex: 1;
padding-left: clamp(16px, 2vw, 28px);
border-left: 1px solid var(--rule);
font-size: .92rem; line-height: 1.5; color: var(--text-soft);
max-width: 56ch;
}
.trust__note strong {
display: block; margin-bottom: 5px;
font-size: 1.02rem; font-weight: 600; color: var(--text);
}
.trust__note .btn { flex: none; }
@media (max-width: 980px) {
.trust__cols { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; }
/* Text und Knopf nebeneinander sprengen hier die Breite. */
.trust__note { flex-direction: column; text-align: center; gap: 18px; }
.trust__note span { max-width: none; padding-left: 0; border-left: 0; }
.trust__note .btn { width: 100%; }
}
/* --- Team-Section (zweigeteilt: Text links, Foto rechts) -------------------
Die alte Vollbild-Ueberlagerung hat den Text nach unten links geschoben
und dasselbe Motiv wie der Hero benutzt. Jetzt steht der Text auf Navy,
das Foto daneben als eigene Flaeche.
-------------------------------------------------------------------------- */
.team {
position: relative;
isolation: isolate;
overflow: hidden;
display: grid;
grid-template-columns: minmax(280px, 42%) minmax(0, 1fr);
min-height: clamp(520px, 54vw, 680px);
background: var(--night);
color: rgba(250,247,240,.76);
}
.team__copy {
display: flex;
align-items: center;
padding: clamp(52px, 7vw, 96px) clamp(28px, 4.5vw, 72px);
}
.team__text-col { width: 100%; max-width: 38rem; }
.team__media {
position: relative;
min-height: 100%;
background: var(--night);
}
.team__media picture { display: contents; }
.team__media img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: 52% 8%;
}
.team .label--amber { color: var(--amber); margin-bottom: clamp(14px, 1.6vw, 20px); }
.team h2 {
color: var(--paper);
font-size: clamp(1.75rem, 2.6vw, 2.55rem);
line-height: 1.16;
letter-spacing: -0.03em;
hyphens: none;
margin: 0 0 clamp(18px, 2.2vw, 28px);
}
.team h2 span { display: block; }
.team__text + .team__text { margin-top: 1.15em; }
.team__text {
margin: 0;
max-width: 44ch;
font-size: clamp(1rem, 1.02vw, 1.1rem);
line-height: 1.75;
color: rgba(250,247,240,.76);
}
.team__sign {
margin: clamp(26px, 3vw, 38px) 0 0;
max-width: 260px;
}
.team__sign img {
display: block;
width: 100%;
height: auto;
border-radius: 8px;
background: var(--paper);
}
.team__sign figcaption {
margin: 10px 0 0;
font-family: var(--font-data);
font-size: var(--t-label);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--text-faint);
}
@media (max-width: 900px) {
.team { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.team__media {
order: -1;
width: 100%;
height: min(62vh, 520px);
min-height: 240px;
aspect-ratio: auto;
max-height: none;
}
.team__media img { object-position: 50% 18%; }
.team__media::after {
content: "";
position: absolute; left: 0; right: 0; bottom: -1px;
height: 28%;
background: linear-gradient(180deg, rgba(12,27,46,0) 0%, var(--night) 100%);
pointer-events: none;
}
.team__copy {
padding: clamp(12px, 4vw, 28px) var(--gutter) clamp(40px, 8vw, 64px);
}
.team__text-col { max-width: none; }
.team h2 { font-size: clamp(1.95rem, 7.6vw, 2.5rem); margin-bottom: 22px; }
.team__text { font-size: 1.02rem; line-height: 1.72; max-width: none; }
}
/* --- Icon in Karte -------------------------------------------------------- */
/* --- Zeichen im Navy-Kreis -----------------------------------------------
Die zweite und einzige weitere Praesentationsform neben dem nackten
Zeichen. Frueher gab es hier vier Behaelter nebeneinander: ein
cremefarbenes Quadrat, zwei goldgetoente Kreise und einen Navy-Kreis.
Wer ein neues Vertrauenszeichen setzt, benutzt diese Klassen mit.
-------------------------------------------------------------------------- */
.card__icon,
.svc__icon,
.trust__icon,
.offer__aside-icon,
.reckon__icon {
display: grid; place-items: center;
width: var(--icon-badge); height: var(--icon-badge);
flex: none;
background: var(--ink);
border-radius: 50%;
color: var(--amber);
}
.card__icon svg,
.svc__icon svg,
.trust__icon svg,
.offer__aside-icon svg,
.reckon__icon svg { width: var(--icon-lg); height: var(--icon-lg); }
.card__icon { margin-bottom: 16px; }
/* --- Einsaetze: drei Fallkarten -------------------------------------------
Foto mit dunklem Verlauf, Text darauf. Die Karte ist damit eine dunkle
Flaeche und steht deshalb im Umkehr-Block der Kontextfarben.
-------------------------------------------------------------------------- */
.cases {
display: grid;
gap: clamp(14px, 1.6vw, 20px);
grid-template-columns: minmax(0, 1fr);
}
.case {
position: relative;
isolation: isolate;
display: flex;
/* Kein festes Seitenverhaeltnis: mit aspect-ratio bekam die Karte eine
feste Hoehe und der Text lief unten heraus. Die Mindesthoehe haelt das
Format breit, im Raster ziehen sich alle drei auf dieselbe Hoehe. */
min-height: clamp(210px, 17vw, 262px);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.case img {
position: absolute; inset: 0; z-index: -2;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
}
/* Der Verlauf laeuft waagerecht: links deckt er zu, damit der Text traegt,
rechts laeuft er aus und gibt das Foto frei. */
.case::after {
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(94deg,
rgba(10,22,37,.94) 0%,
rgba(10,22,37,.90) 30%,
rgba(10,22,37,.62) 46%,
rgba(10,22,37,.18) 62%,
rgba(10,22,37,.10) 100%);
}
.case__body {
/* Text steht oben links, das Foto bleibt rechts sichtbar. */
display: flex; flex-direction: column; justify-content: center;
padding: clamp(24px, 2.6vw, 34px) clamp(22px, 2.4vw, 34px);
width: 100%;
max-width: 44%;
}
/* Die Einordnung steht als Marke im Textfluss, nicht als Pille. Dieselbe
Form wie .svc__cat und .label auf der ganzen Seite — die Seite kennt fuer
solche Einordnungen keinen eigenen Behaelter. Nebenbei loest das die
Kollision: als absolut gesetzte Pille stiess sie bei schmalen Karten
gegen die Ueberschrift. */
.case__tag {
display: inline-flex; align-items: center;
align-self: flex-start;
margin: 0 0 clamp(12px, 1.4vw, 16px);
padding: 7px 15px;
border: 1px solid var(--accent);
border-radius: var(--radius-pill);
font-family: var(--font-data);
font-size: var(--t-label); font-weight: 600;
letter-spacing: .14em; text-transform: uppercase;
color: var(--accent);
}
.case h3 {
margin: 0 0 10px;
font-size: clamp(1.3rem, 1.55vw, 1.72rem);
line-height: 1.25; letter-spacing: -0.01em; hyphens: none;
color: var(--text);
}
.case__text {
margin: 0; max-width: 38ch;
font-size: .92rem; line-height: 1.55;
color: var(--text-soft);
}
.case__more { margin: clamp(14px, 1.6vw, 18px) 0 0; max-width: none; }
.case__more a {
display: inline-flex; align-items: center; gap: 8px;
min-height: var(--tap);
font-size: .88rem; font-weight: 600;
color: var(--accent); text-decoration: none;
}
.case__more svg { width: var(--icon-sm); height: var(--icon-sm); transition: transform var(--dur) var(--ease); }
.case__more a:hover { text-decoration: underline; text-underline-offset: 4px; }
.case__more a:hover svg { transform: translateX(3px); }
/* Verweis unter den Karten */
.cases__more { margin: clamp(22px, 2.6vw, 32px) 0 0; max-width: none; text-align: center; }
.cases__more a {
display: inline-flex; align-items: center; gap: 9px;
min-height: var(--tap);
font-size: .95rem; font-weight: 600;
color: var(--text); text-decoration: none;
}
.cases__more svg { width: var(--icon-sm); height: var(--icon-sm); transition: transform var(--dur) var(--ease); }
.cases__more a:hover { text-decoration: underline; text-underline-offset: 4px; }
.cases__more a:hover svg { transform: translateX(3px); }
@media (max-width: 820px) {
.case__body { max-width: 58%; }
}
@media (max-width: 620px) {
.case { min-height: 240px; }
/* Auf schmalen Breiten reicht die halbe Karte fuer den Text nicht mehr;
dort deckt der Verlauf senkrecht zu. */
.case__body { max-width: none; }
.case::after {
background: linear-gradient(178deg,
rgba(10,22,37,.42) 0%,
rgba(10,22,37,.78) 45%,
rgba(10,22,37,.92) 100%);
}
}
/* --- Aufnahmen-Raster ------------------------------------------------------
Benutzt auf der Uebersichtsseite einsaetze.html.
-------------------------------------------------------------------------- */
.shots {
display: grid;
gap: clamp(12px, 1.4vw, 18px);
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.shots figure { margin: 0; }
.shots img {
width: 100%; aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 12px;
}
.shots figcaption {
margin-top: 8px;
font-family: var(--font-data);
font-size: var(--t-label);
letter-spacing: .06em; text-transform: uppercase;
color: var(--text-faint);
}
.shots--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) {
.shots--pair { grid-template-columns: minmax(0, 1fr); }
}
/* --- Einsatz-Detailseite ---------------------------------------------------
Eigene Seite je Einsatz. Kopf zweigeteilt, darunter Auftrag, Aufnahmen,
Herausforderung, Ablauf, Ergebnis, Bewertung, Fragen, Abschluss.
-------------------------------------------------------------------------- */
/* Kopf: Text links, Foto rechts bis an den Rand. */
.case-hero { background: var(--paper); overflow: hidden; }
.case-hero__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(28px, 4vw, 64px);
align-items: center;
padding-block: clamp(36px, 5vw, 72px);
}
.case-hero__crumbs {
margin: 0 0 clamp(8px, 1.2vw, 14px); max-width: none;
font-family: var(--font-data);
font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase;
color: var(--accent);
}
/* Als reiner Textverweis war die Brotkrume 15 px hoch und auf dem Handy
kaum zu treffen. Der Innenabstand vergroessert nur die Trefferflaeche. */
.case-hero__crumbs a { display: inline-block; padding-block: 13px; color: inherit; text-decoration: none; }
.case-hero__crumbs a:hover { text-decoration: underline; text-underline-offset: 4px; }
.case-hero__crumbs span { margin: 0 6px; opacity: .6; }
.case-hero h1 {
margin: 0 0 clamp(16px, 2vw, 22px);
font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);
line-height: 1.1; hyphens: none;
}
.case-hero__lead {
margin: 0 0 clamp(24px, 3vw, 34px);
font-size: clamp(1rem, .95rem + .3vw, 1.1rem); line-height: 1.65;
color: var(--text-soft); max-width: 46ch;
}
/* Vier Eckdaten als kleine Kacheln */
.case-hero__facts {
list-style: none; margin: 0 0 clamp(24px, 3vw, 34px); padding: 0;
display: grid; gap: clamp(10px, 1.2vw, 14px);
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.case-hero__facts li {
display: flex; flex-direction: column; gap: 10px;
padding: clamp(14px, 1.6vw, 18px) clamp(12px, 1.4vw, 16px);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
font-size: .82rem; line-height: 1.35; color: var(--text-soft);
}
.case-hero__facts strong { display: block; color: var(--text); font-weight: 600; }
.case-hero__icon { color: var(--accent); }
.case-hero__icon svg { width: var(--icon); height: var(--icon); }
.case-hero__media { border-radius: var(--radius-lg); overflow: hidden; }
/* Die Aufnahme ist hochkant, das Fenster quer. Der Ausschnitt zeigt damit
nur ein Band aus der Bildmitte — dort stehen die Kartons. */
.case-hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 62%; }
/* Fuenf Aufnahmen nebeneinander */
.shots--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Text und Bild nebeneinander */
.case-split {
display: grid;
/* Die Textspalte ist bewusst die breitere: die drei Zustands-Pillen der
Herausforderung brauchen zusammen rund 460 px und sollen nebeneinander
stehen. Wer den Wortlaut verlaengert, muss das nachmessen. */
grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
gap: clamp(20px, 2.6vw, 36px);
align-items: center;
}
.case-split__text h2 {
margin: 0 0 clamp(18px, 2.2vw, 26px);
font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.3rem);
hyphens: none;
}
/* Die Karte traegt nur noch den Inhalt, nicht mehr die Ueberschrift. */
.challenge__card {
padding: clamp(22px, 2.6vw, 34px);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.challenge__card p { font-size: .96rem; line-height: 1.68; margin: 0; }
/* Die Ausgangslage als Umriss-Pillen. */
.challenge__tags {
list-style: none; margin: 0 0 clamp(18px, 2.2vw, 26px); padding: 0;
display: flex; flex-wrap: wrap; gap: 9px;
}
.challenge__tags li {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-pill);
font-size: .84rem; font-weight: 500; color: var(--text);
white-space: nowrap;
}
.challenge__tags svg { width: var(--icon-sm); height: var(--icon-sm); color: var(--accent); flex: none; }
.challenge__rule {
width: 34px; height: 1px; border: 0;
margin: clamp(16px, 2vw, 22px) 0;
background: var(--accent); opacity: .55;
}
/* Drei Belege am Fuss, durch feine Striche getrennt. */
.challenge__points {
list-style: none; margin: clamp(22px, 2.6vw, 30px) 0 0; padding: 0;
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.challenge__points li {
display: flex; flex-direction: column; align-items: center; gap: 10px;
padding: 0 clamp(8px, 1.2vw, 14px);
text-align: center;
font-size: .86rem; font-weight: 600; line-height: 1.35; color: var(--text);
}
.challenge__points li + li { border-left: 1px solid var(--line); }
/* Getoenter Kreis statt Navy: der Navy-Kreis waere an dieser Stelle und in
dieser Groesse zu schwer fuer eine helle Karte. Das Zeichen selbst bleibt
unveraendert — Umriss, 1.5, --icon. */
.challenge__icon {
display: grid; place-items: center;
width: 42px; height: 42px;
background: rgba(168,123,60,.12);
border-radius: 50%;
color: var(--accent);
}
.challenge__icon svg { width: var(--icon); height: var(--icon); }
/* Foto mit schwebendem Schild */
.case-split__media { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; }
.case-split__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.case-split__badge {
position: absolute; right: clamp(14px, 1.8vw, 22px); bottom: clamp(14px, 1.8vw, 22px);
display: inline-flex; align-items: center; gap: 10px;
padding: 11px 18px;
background: var(--surface);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-md);
font-size: .88rem; font-weight: 600; color: var(--text);
}
.case-split__badge svg { width: var(--icon-sm); height: var(--icon-sm); color: var(--accent); flex: none; }
/* Fuenf Schritte */
.case-steps {
list-style: none; margin: 0; padding: 0;
display: grid; gap: clamp(14px, 1.6vw, 20px);
grid-template-columns: repeat(5, minmax(0, 1fr));
counter-reset: schritt;
}
.case-steps li {
padding: clamp(20px, 2.2vw, 26px) clamp(16px, 1.8vw, 20px);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
text-align: center;
}
.case-steps__icon {
display: grid; place-items: center;
width: var(--icon-badge); height: var(--icon-badge);
margin: 0 auto clamp(12px, 1.4vw, 16px);
background: var(--ink); border-radius: 50%; color: var(--amber);
}
.case-steps__icon svg { width: var(--icon-lg); height: var(--icon-lg); }
.case-steps__no {
margin: 0 0 6px;
font-family: var(--font-data); font-size: var(--t-label); font-weight: 600;
letter-spacing: .14em; color: var(--accent);
}
.case-steps h3 { margin: 0 0 8px; font-size: 1rem; line-height: 1.3; hyphens: none; }
.case-steps p { margin: 0; max-width: none; font-size: .84rem; line-height: 1.55; color: var(--text-soft); }
/* Ergebnis: vier Belege als Kacheln */
.case-result {
list-style: none; margin: 0 0 clamp(20px, 2.4vw, 28px); padding: 0;
display: grid; gap: clamp(12px, 1.4vw, 18px);
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.case-result li {
display: flex; align-items: center; gap: 12px;
padding: clamp(16px, 1.8vw, 22px) clamp(14px, 1.6vw, 20px);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
font-size: .9rem; line-height: 1.35; color: var(--text);
}
.case-result svg { width: var(--icon); height: var(--icon); color: var(--accent); flex: none; }
/* Bewertung als eine Karte: Zahl links, Stimme rechts, feiner Strich
dazwischen. */
.result-review {
display: grid;
grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
align-items: center;
gap: clamp(24px, 3.2vw, 48px);
padding: clamp(26px, 3.2vw, 44px);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.result-review__score { text-align: center; }
.result-review__score .reviews__score { font-size: clamp(3rem, 4.4vw, 4.2rem); }
.result-review__score .reviews__stars { justify-content: center; }
.result-review__score .reviews__source { margin-top: 12px; }
.result-review__quote {
margin: 0;
padding-left: clamp(24px, 3.2vw, 48px);
border-left: 1px solid var(--line);
}
/* Das Anfuehrungszeichen ist Zierde und traegt keine Aussage — deshalb
gedaempft und aria-hidden im Markup. */
.result-review__mark {
margin: 0 0 4px; max-width: none;
font-family: var(--font-display); font-weight: 700;
font-size: 3.2rem; line-height: .7;
color: var(--accent); opacity: .5;
user-select: none;
}
.result-review blockquote {
margin: 0 0 clamp(16px, 2vw, 22px);
font-family: var(--font-display);
font-size: clamp(1.02rem, .95rem + .4vw, 1.22rem);
line-height: 1.55; color: var(--text);
max-width: 54ch;
}
.result-review figcaption {
display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px;
font-size: .88rem; color: var(--text-faint);
}
.result-review figcaption strong { color: var(--text); font-weight: 600; }
.result-review__source { display: inline-flex; align-items: center; gap: 8px; }
.result-review__source svg { width: var(--icon-sm); height: var(--icon-sm); color: var(--accent); }
/* Verwandte Leistungen als Umriss-Pillen */
.chips {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; justify-content: center;
gap: clamp(10px, 1.2vw, 14px);
}
.chips a {
display: inline-flex; align-items: center; gap: 8px;
min-height: var(--tap);
padding: 10px 20px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-pill);
font-size: .9rem; font-weight: 600;
color: var(--text); text-decoration: none;
transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.chips svg { width: var(--icon-sm); height: var(--icon-sm); color: var(--accent); }
.chips a:hover { border-color: var(--ink); background: var(--paper-alt); }
/* Abschlussband */
.case-cta {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: clamp(20px, 3vw, 44px);
align-items: center;
padding: clamp(26px, 3.4vw, 44px);
background: var(--ink);
border-radius: var(--radius-lg);
}
.case-cta h2 { margin: 0 0 10px; font-size: clamp(1.35rem, 1.15rem + .9vw, 1.85rem); hyphens: none; }
.case-cta p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--text-soft); }
.case-cta__actions { display: grid; gap: 12px; }
.case-page__back--end { margin-top: clamp(24px, 3vw, 36px); text-align: center; }
/* Rueckweg oben auf den Unterseiten */
.case-page__back { margin: 0 0 clamp(24px, 3vw, 36px); max-width: none; }
.case-page__back a {
display: inline-flex; align-items: center; gap: 9px;
min-height: var(--tap);
font-size: .92rem; font-weight: 600;
color: var(--text-soft); text-decoration: none;
}
.case-page__back svg { width: var(--icon-sm); height: var(--icon-sm); transition: transform var(--dur) var(--ease); }
.case-page__back a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.case-page__back a:hover svg { transform: translateX(-3px); }
.case-page h1 {
font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.7rem);
hyphens: none;
margin: 0 0 clamp(14px, 1.6vw, 20px);
}
.case-page__lead {
margin: 0 0 clamp(28px, 3.2vw, 40px);
font-size: clamp(1.02rem, .96rem + .35vw, 1.16rem);
line-height: 1.6; color: var(--text-soft);
}
.case-page__shot { margin: 0 0 clamp(28px, 3.2vw, 40px); }
.case-page__shot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg); }
.case-page__facts {
display: grid; gap: 0;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin: 0 0 clamp(28px, 3.2vw, 40px);
border-top: 1px solid var(--rule);
}
.case-page__facts > div { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.case-page__facts > div:nth-child(odd) { padding-right: 20px; }
.case-page__facts dt {
font-family: var(--font-data); font-size: var(--t-label); font-weight: 600;
letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint);
margin-bottom: 5px;
}
.case-page__facts dd { margin: 0; font-size: .98rem; color: var(--text); }
.case-page__text p { font-size: 1rem; line-height: 1.7; }
.case-page__cta { margin: clamp(30px, 3.6vw, 44px) 0 0; max-width: none; text-align: center; }
@media (max-width: 1000px) {
.case-hero__inner { grid-template-columns: minmax(0, 1fr); }
.case-hero__media { order: -1; }
.case-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shots--five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.case-cta { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
.case-result { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.result-review { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 28px); }
.result-review__quote { padding-left: 0; padding-top: clamp(20px, 3vw, 28px); border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
.shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-split { grid-template-columns: minmax(0, 1fr); }
.challenge__points { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.challenge__points li { flex-direction: row; text-align: left; padding: 0; }
.challenge__points li + li { border-left: 0; }
.challenge__points br { display: none; }
.case-split__media { order: -1; }
.case-hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-page__cta .btn, .case-cta__actions .btn { width: 100%; }
.case-hero .cluster { flex-direction: column; align-items: stretch; }
.case-hero .cluster .btn { width: 100%; }
}
@media (max-width: 460px) {
.case-result { grid-template-columns: minmax(0, 1fr); }
.shots, .shots--five { grid-template-columns: minmax(0, 1fr); }
.case-steps { grid-template-columns: minmax(0, 1fr); }
.case-page__facts { grid-template-columns: minmax(0, 1fr); }
.case-page__facts > div:nth-child(odd) { padding-right: 0; }
}
/* --- Angebotsweg: Fotos senden oder besichtigen lassen --------------------
Zwei Wege zum selben Ziel in einer Karte. Links der Ablauf in drei
Schritten, rechts das Bild — darin liegt das Angebot fuer den, dem eine
Besichtigung lieber ist als Fotos zu schicken.
-------------------------------------------------------------------------- */
.offer {
display: grid;
grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
}
.offer__body {
display: flex; flex-direction: column;
padding: clamp(28px, 3.4vw, 54px);
}
/* Die Schrittnummern stehen in Mono — sie sind Daten, keine Zierde. */
.offer__steps { list-style: none; margin: 0 0 clamp(26px, 3vw, 38px); padding: 0; }
.offer__steps li {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0 clamp(14px, 1.6vw, 22px);
padding: clamp(18px, 2.1vw, 26px) 0;
}
.offer__steps li:first-child { padding-top: 0; }
.offer__steps li + li { border-top: 1px solid var(--line); }
.offer__num {
font-family: var(--font-data); font-weight: 600;
font-size: 1.04rem; line-height: 1.35;
color: var(--signal);
font-variant-numeric: tabular-nums;
}
.offer__steps h3 { margin: 0 0 7px; font-size: 1.08rem; line-height: 1.35; hyphens: none; }
.offer__steps p { margin: 0; font-size: var(--t-small); color: var(--ink-soft); max-width: 42ch; }
.offer__cta { margin: auto 0 0; }
/* Bildseite */
.offer__media { position: relative; min-height: 340px; }
.offer__media img, .offer__media .ph {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
/* Hochkantaufnahme in einem fast quadratischen Fenster: zentriert zeigte
der Ausschnitt vor allem Himmel und Hauswand. Der Wert holt die beiden
Personen im unteren Bilddrittel ins Bild. */
object-position: center 78%;
border-radius: 0; border-width: 0;
}
/* Das Nebenangebot liegt auf dem Bild, damit beide Wege gleichzeitig
sichtbar sind — nicht einer unter dem anderen. */
.offer__aside {
position: absolute;
left: clamp(14px, 1.8vw, 26px);
right: clamp(14px, 1.8vw, 26px);
bottom: clamp(14px, 1.8vw, 26px);
max-width: 390px;
padding: clamp(18px, 2vw, 24px);
background: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.offer__aside-head { display: flex; align-items: center; gap: 13px; margin-bottom: 9px; }
.offer__aside h3 { margin: 0; font-size: 1.06rem; hyphens: none; }
.offer__aside p { margin: 0 0 16px; font-size: var(--t-small); color: var(--ink-soft); }
@media (max-width: 900px) {
.offer { grid-template-columns: minmax(0, 1fr); }
.offer__media { min-height: 0; display: flex; flex-direction: column; }
.offer__media img, .offer__media .ph {
position: static; height: auto; aspect-ratio: 4 / 3;
}
/* Die Karte rutscht unter das Bild und ueberlappt es leicht. */
.offer__aside {
position: static;
max-width: none;
margin: -46px clamp(14px, 3vw, 22px) clamp(14px, 3vw, 22px);
}
}
@media (max-width: 560px) {
.offer__aside { margin-top: -28px; }
.offer__cta .btn, .offer__aside .btn { width: 100%; }
}
/* --- Bewertungen ----------------------------------------------------------
Asymmetrisch: links die Bewertung in Zahlen, rechts die Stimmen selbst.
Bewusst ruhig gehalten — eine einzelne Bewertung soll tatsaechlich
gelesen werden. Kein Google-Logo, keine Markenfarben, kein Karussell.
Gold traegt hier ausschliesslich die Sterne.
-------------------------------------------------------------------------- */
.reviews {
display: grid;
gap: clamp(28px, 4vw, 64px);
grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
align-items: start;
}
/* Linke Spalte — die Zahl traegt den Abschnitt, nicht ein Logo. */
.reviews__summary { position: sticky; top: clamp(96px, 8vw, 116px); }
.reviews__score {
margin: 0;
font-family: var(--font-display);
font-size: clamp(3.6rem, 6vw, 5.4rem);
line-height: .9;
letter-spacing: -0.03em;
color: var(--ink);
}
.reviews__stars {
display: flex; gap: 5px; margin: clamp(14px, 1.6vw, 20px) 0 0;
color: var(--amber);
}
.reviews__stars svg { width: 20px; height: 20px; }
.reviews__source {
margin: 10px 0 0;
font-family: var(--font-data);
font-size: var(--t-label);
letter-spacing: .12em; text-transform: uppercase;
color: var(--text-faint);
}
.reviews__rule {
height: 1px; border: 0; background: var(--rule);
margin: clamp(22px, 2.6vw, 32px) 0;
}
.reviews__often {
margin: 0 0 12px;
font-size: var(--t-small); font-weight: 600; color: var(--text);
}
.reviews__tags {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 8px;
}
/* Bewusst keine Kaesten: das sind Stichworte aus den Bewertungen, keine
eigenen Inhalte. Der feine Strich reicht als Gliederung. */
.reviews__tags li {
position: relative; padding-left: 20px;
font-size: var(--t-small); color: var(--text-soft);
}
.reviews__tags li::before {
content: ""; position: absolute; left: 0; top: .62em;
width: 10px; height: 1px; background: var(--accent);
}
.reviews__link {
display: inline-flex; align-items: center; gap: 9px;
min-height: var(--tap);
margin-top: clamp(18px, 2vw, 26px);
font-size: .92rem; font-weight: 600;
color: var(--accent); text-decoration: none;
}
.reviews__link svg { width: var(--icon-sm); height: var(--icon-sm); transition: transform var(--dur) var(--ease); }
.reviews__link:hover { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 4px; }
.reviews__link:hover svg { transform: translateX(3px); }
/* Rechte Spalte — die Stimmen. */
.reviews__voices { display: grid; gap: clamp(16px, 1.8vw, 22px); }
.quote {
margin: 0;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: clamp(26px, 3vw, 40px) clamp(24px, 2.8vw, 38px);
}
.quote__stars { display: flex; gap: 4px; margin: 0 0 clamp(16px, 1.8vw, 22px); color: var(--amber); }
.quote__stars svg { width: 16px; height: 16px; }
.quote blockquote {
margin: 0 0 clamp(18px, 2vw, 24px);
font-size: .98rem; line-height: 1.68;
color: var(--text);
max-width: 58ch;
}
/* Die erste Stimme ist die ausfuehrlichste und bekommt mehr Gewicht. */
.reviews__voices .quote:first-child blockquote {
font-family: var(--font-display);
font-size: clamp(1.08rem, .98rem + .5vw, 1.32rem);
line-height: 1.5;
letter-spacing: -0.01em;
}
.quote figcaption {
display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
font-size: .86rem;
}
.quote figcaption strong { color: var(--text); font-weight: 600; }
.quote figcaption span { color: var(--text-faint); font-size: .8rem; }
.quote__note { flex-basis: 100%; margin: 0; font-size: .74rem; color: var(--text-faint); }
@media (max-width: 900px) {
.reviews { grid-template-columns: minmax(0, 1fr); }
.reviews__summary { position: static; }
.reviews__rule { margin: 20px 0; }
}
/* --- Einsatzgebiet (dunkel, Vollbild-Karte) -------------------------------
Gleiche Bauart wie Vertrauen und Team: Foto im Hintergrund, Text links.
Die Karte bringt Boegen, Punkte und Beschriftungen schon mit und laesst
links bewusst Flaeche frei — der Text muss also innerhalb der ersten
47 % bleiben, sonst laeuft er ins Gelaende.
-------------------------------------------------------------------------- */
.region {
position: relative;
isolation: isolate;
overflow: hidden;
display: flex;
align-items: center;
min-height: clamp(420px, 46vw, 620px);
padding-block: clamp(52px, 6vw, 88px);
background: var(--ink);
color: rgba(250,247,240,.76);
}
.region__media { position: absolute; inset: 0; z-index: -2; background: var(--ink); }
/* Nach oben ausgerichtet: die Section ist breiter als die Karte, beschnitten
wird in der Hoehe. Zentriert rutschte Pforzheim aus dem Bild — unten ist
unterhalb von Reutlingen ohnehin nur leeres Gelaende. */
.region__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
/* Die Karte ist links ohnehin fast schwarz — es braucht nur wenig Deckung,
damit der Text sicher traegt. */
.region::after {
content: ""; position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(94deg,
rgba(9,20,34,.82) 0%,
rgba(9,20,34,.70) 34%,
rgba(9,20,34,.28) 52%,
rgba(9,20,34,.06) 70%,
rgba(9,20,34,.14) 100%);
}
.region__inner { position: relative; width: 100%; }
.region__text { max-width: min(490px, 46%); }
.region .label--amber { color: var(--amber); }
.region h2 {
color: var(--paper);
font-size: clamp(1.65rem, 2.6vw, 2.3rem);
line-height: 1.16;
letter-spacing: -0.03em;
hyphens: none;
margin: 0 0 clamp(16px, 1.8vw, 24px);
}
.region h2 span { display: block; }
.region__lead {
margin: 0 0 clamp(14px, 1.6vw, 20px);
font-size: clamp(.98rem, 1vw, 1.06rem);
line-height: 1.72;
color: rgba(250,247,240,.78);
}
.region__note {
margin: 0 0 clamp(22px, 2.4vw, 30px);
font-size: var(--t-small);
color: rgba(250,247,240,.54);
}
/* Schmal: die Karte traegt keinen Text mehr, sie wird zum Hintergrund.
Rechts ausgerichtet, damit das Gebiet und nicht die leere Flaeche zu
sehen ist. */
@media (max-width: 900px) {
.region { min-height: clamp(400px, 78vw, 520px); }
.region__media img { object-position: 78% center; }
/* Kraeftiger als am Desktop: die Beschriftungen der Karte sind hier zu
klein zum Lesen und wuerden nur halb hinter dem Text hervorlugen. */
.region::after {
background:
linear-gradient(180deg, rgba(9,20,34,.74) 0%, rgba(9,20,34,.88) 45%, rgba(9,20,34,.96) 100%);
}
.region__text { max-width: none; }
}
@media (max-width: 560px) {
.region .btn { width: 100%; }
}
/* --- FAQ ------------------------------------------------------------------ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
display: flex; justify-content: space-between; align-items: center; gap: 16px;
padding: 19px 2px; cursor: pointer; list-style: none;
font-weight: 600; color: var(--ink); font-size: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: ""; flex: none; width: 11px; height: 11px;
border-right: 2px solid var(--felt); border-bottom: 2px solid var(--felt);
transform: rotate(45deg) translate(-2px,-2px);
transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px,-2px); }
.faq__body { padding: 0 2px 20px; font-size: var(--t-small); }
.faq__body p { margin-bottom: .7em; }
/* --- Kontaktblock --------------------------------------------------------- */
.contact { display: grid; gap: 20px; }
@media (min-width: 900px) { .contact { grid-template-columns: 0.85fr 1.15fr; align-items: start; } }
.contact__card {
background: var(--ink); color: rgba(250,247,240,.8);
border-radius: var(--radius-lg); padding: clamp(26px,4vw,36px);
}
.contact__card h2 { color: var(--paper); font-size: var(--t-h2); }
.contact__list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 13px; }
.contact__list a { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--paper); font-size: .94rem; }
.contact__list svg { width: var(--icon); height: var(--icon); flex: none; color: var(--text-faint); }
.contact__list a:hover { text-decoration: underline; }
@media (max-width: 760px) {
.contact__list { gap: 4px; }
.contact__list a { min-height: 44px; }
}
.contact__form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px,4vw,32px); }
.form-row { display: grid; gap: 16px; }
@media (min-width: 620px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }
/* --- Sticky WhatsApp ------------------------------------------------------ */
.wa-float {
position: fixed; right: 18px; bottom: 18px; z-index: 90;
display: inline-flex; align-items: center; gap: 9px;
min-height: var(--tap); padding: 12px 20px;
background: #1FA855; color: #fff; text-decoration: none;
border-radius: var(--radius-pill); font-weight: 600; font-size: .93rem;
box-shadow: var(--shadow-md);
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.wa-float svg { width: var(--icon-sm); height: var(--icon-sm); }
/* Schmal: nur noch das Zeichen. Die Beschriftung machte den Knopf 136 px
breit, und weil er fest unten rechts klebt, lag er dort auf dem
Telefonknopf im Hero, auf dem Terminfeld im Formular und auf der
Fusszeile. Als Kreis bleibt davon ein Eck uebrig. */
@media (max-width: 760px) {
.wa-float {
right: 14px;
bottom: calc(14px + env(safe-area-inset-bottom));
width: 56px; height: 56px; padding: 0;
border-radius: 50%;
justify-content: center;
}
.wa-float__text {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
.wa-float svg { width: 24px; height: 24px; }
}
/* Im Kontaktabschnitt ist der Knopf ueberfluessig — dort stehen Telefon,
E-Mail und WhatsApp ohnehin nebeneinander. Er weicht dem Formular. */
.wa-float.is-away {
opacity: 0;
transform: translateY(12px) scale(.9);
pointer-events: none;
}
/* --- Rechtstexte (Impressum, Datenschutz, AGB) ----------------------------
Reine Lesetexte in schmaler Spalte. Jede Zwischenueberschrift bekommt eine
Haarlinie darueber, damit sich der Text wie ein gegliedertes Dokument liest
und nicht wie eine Textwueste. Angaben — Anschrift, Nummern, Kontakt —
stehen in Mono: es sind Daten, kein Fliesstext.
Geteilt von impressum.html, datenschutz.html und agb.html. */
.legal__head { margin-bottom: clamp(30px, 4.5vw, 48px); }
.legal__head h1 { margin-bottom: .35em; }
.legal__head p { color: var(--ink-soft); margin: 0; }
.legal h2 {
font-size: var(--t-h3);
margin: clamp(34px, 4.5vw, 52px) 0 .6em;
padding-top: clamp(20px, 3vw, 28px);
border-top: 1px solid var(--line);
}
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 { font-size: 1rem; margin: 26px 0 .5em; }
.legal p, .legal li { max-width: 68ch; }
/* Hostnamen und technische Bezeichner im Fliesstext */
.legal code {
font-family: var(--font-data);
font-size: .88em;
padding: 1px 5px;
background: var(--paper-alt);
border: 1px solid var(--line);
border-radius: 4px;
color: var(--ink);
overflow-wrap: anywhere;
}
.legal ul, .legal ol { margin: 0 0 1.1em; padding-left: 20px; }
.legal li { margin-bottom: .35em; }
.legal p a, .legal li a {
color: var(--ink);
text-decoration: underline;
text-underline-offset: 3px;
}
.legal p a:hover, .legal li a:hover { color: var(--ink); }
/* Adress- und Kontaktbloecke */
.legal__data {
font-family: var(--font-data);
font-size: var(--t-small);
line-height: 1.85;
color: var(--ink);
}
.legal__data a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal__data a:hover { color: var(--ink); }
.legal .legal__foot {
max-width: none; /* die Linie soll die volle Spalte fassen, nicht nur den Text */
}
.legal__foot {
margin-top: clamp(40px, 5vw, 60px);
padding-top: 22px;
border-top: 1px solid var(--line);
font-family: var(--font-data);
font-size: var(--t-label);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-faint);
}
/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--ink); color: rgba(250,247,240,.62); padding-block: 52px 0; }
.site-footer h4 { color: var(--paper); font-size: .92rem; margin-bottom: 13px; }
.site-footer a { color: rgba(250,247,240,.78); text-decoration: none; }
.site-footer a:hover { color: var(--paper); text-decoration: underline; }
.footer__grid { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(min(100%,200px),1fr)); padding-bottom: 40px; }
.footer__grid p { font-size: .88rem; margin-bottom: .5em; }
.footer__bottom { border-top: 1px solid rgba(250,247,240,.12); padding: 18px 0; font-size: .8rem; text-align: center; }
/* Schmal: die Fusszeilen-Verweise waren 15 px hoch und lagen 30 px
auseinander — mit dem Daumen kaum zu treffen. Padding macht daraus
Ziele von 44 px, ohne die Schrift zu vergroessern. */
@media (max-width: 760px) {
.footer__grid p { margin-bottom: 0; }
.footer__grid p a {
display: inline-block;
padding: 14px 0;
line-height: 1.2;
}
/* Die Anschrift ist kein Verweis und braucht ihren Abstand zurueck. */
.footer__grid p:not(:has(a)) { margin-bottom: .5em; padding: 2px 0; }
.footer__bottom { padding-bottom: calc(18px + 68px + env(safe-area-inset-bottom)); }
}
/* --- Sanftes Einblenden --------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }
/* --- Leistungsmodule ------------------------------------------------------
Drei gleichwertige Karten nebeneinander. Aufbau je Karte von oben nach
unten: Zeichen, Marke, Titel, Text, kurzer Strich, Punkte, Verweis —
darunter buendig am Fuss das Bild. Der Textteil ist ein Flex-Kasten mit
flex:1, dadurch stehen die Bilder aller drei Karten auf einer Linie,
auch wenn die Texte unterschiedlich lang sind.
-------------------------------------------------------------------------- */
.svc__list {
display: grid;
gap: clamp(16px, 1.8vw, 24px);
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: stretch;
}
.svc {
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.svc__body {
display: flex; flex-direction: column;
flex: 1; /* schiebt das Bild an den Fuss der Karte */
padding: clamp(22px, 2.2vw, 30px);
}
/* Zeichen in getoenter Flaeche */
.svc__icon { margin-bottom: clamp(16px, 1.8vw, 22px); }
.svc__cat {
margin: 0 0 6px;
font-family: var(--font-data); font-size: var(--t-label); font-weight: 600;
letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.svc__body h3 {
margin: 0 0 clamp(12px, 1.3vw, 16px);
font-size: clamp(1.3rem, 1.55vw, 1.62rem);
line-height: 1.15; letter-spacing: -0.01em; hyphens: none;
}
.svc__text {
margin: 0;
font-size: .93rem; line-height: 1.62; color: var(--text-soft);
max-width: none;
}
/* Kurzer Strich zwischen Text und Punkten */
.svc__rule {
width: 34px; height: 1px; border: 0;
margin: clamp(18px, 2vw, 24px) 0;
background: var(--line-strong); opacity: 1;
}
.svc__points {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 12px;
}
.svc__points li {
display: grid; grid-template-columns: var(--icon) 1fr; gap: 11px;
align-items: start;
font-size: .88rem; line-height: 1.45; color: var(--text-soft);
}
.svc__points svg { width: var(--icon); height: var(--icon); color: var(--ink); opacity: .55; margin-top: 0; }
/* Verweis statt Knopf: die Hauptaktion steht einmal unter den Karten.
margin-top:auto schiebt ihn an den Fuss des Textteils — sonst haengt er
an der Laenge der Punkteliste und die drei Verweise stehen versetzt. */
.svc__more { margin: auto 0 0; padding-top: clamp(12px, 1.4vw, 18px); }
.svc__more a {
display: inline-flex; align-items: center; gap: 9px;
/* Tippziel: als reiner Textverweis war er 24 px hoch und auf dem Handy
kaum zu treffen. Die Hoehe wirkt nur auf die Trefferflaeche. */
min-height: var(--tap);
font-size: .92rem; font-weight: 600;
color: var(--accent); text-decoration: none;
}
.svc__more svg { width: var(--icon-sm); height: var(--icon-sm); transition: transform var(--dur) var(--ease); }
.svc__more a:hover { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 4px; }
.svc__more a:hover svg { transform: translateX(3px); }
/* Bild sitzt buendig am Fuss der Karte */
.svc__media { position: relative; aspect-ratio: 16 / 10; }
.svc__media img,
.svc__media .ph {
position: absolute; inset: 0;
width: 100%; height: 100%;
border-radius: 0; border-width: 0;
}
.svc__media img { object-fit: cover; object-position: center; }
.svc__media .ph { border-top: 1px dashed var(--line-strong); }
/* Ein Knopf fuer den ganzen Abschnitt, mittig unter den Karten */
.svc__action {
margin: clamp(28px, 3.4vw, 44px) 0 0;
/* Ohne das greift die Grundregel p { max-width: 62ch }: der Absatz waere
schmal und der Knopf stuende links statt in der Mitte. */
max-width: none;
text-align: center;
}
.svc__action .btn { min-height: 60px; padding-inline: clamp(28px, 3.4vw, 46px); }
.svc__action .btn svg:first-child { width: 22px; height: 22px; }
/* Drei Karten nebeneinander brauchen Platz. Darunter gestapelt und in der
Breite begrenzt — eine Karte ueber die volle Zeile liest sich schlecht. */
@media (max-width: 980px) {
.svc__list {
grid-template-columns: minmax(0, 1fr);
max-width: 560px; margin-inline: auto;
}
.svc__action .btn { width: 100%; }
}
/* --- Vorher / Nachher -----------------------------------------------------
Zwei Aufnahmen desselben Raums nebeneinander, getrennt durch eine Fuge.
Bewusst NICHT als fertig beschriftetes Composite-Bild: so passt sich der
Vergleich jeder Slotbreite an, beide Haelften werden identisch
beschnitten, und die Beschriftung kommt aus dem Designsystem statt aus
Photoshop. Fuellt den Elternslot, laeuft daher in .svc__media wie in
der Galerie.
-------------------------------------------------------------------------- */
.ba {
position: absolute; inset: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2px;
background: var(--line-strong); /* die Fuge */
}
.ba__pane { position: relative; overflow: hidden; }
/* Griff in der Fuge — macht lesbar, dass hier zwei Aufnahmen desselben
Raums aneinanderstossen. Beide Pseudo-Elemente sind absolut gesetzt und
damit keine Rasterzellen von .ba. */
.ba::before,
.ba::after {
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
.ba::before {
content: "";
width: 34px; height: 34px; border-radius: 50%;
background: var(--surface);
box-shadow: 0 2px 10px rgba(16,35,58,.30);
}
.ba::after {
content: "‹ ›";
font-family: var(--font-body); font-size: .82rem; font-weight: 600;
letter-spacing: .04em; color: var(--ink);
line-height: 1;
}
@media (max-width: 400px) {
.ba::before { width: 28px; height: 28px; }
.ba::after { font-size: .72rem; }
}
/* Die Marke ist ein Datenpunkt, kein Bildtitel — daher Mono wie die Labels. */
.ba__tag {
position: absolute; left: 12px; bottom: 12px;
padding: 5px 11px;
background: var(--ink); color: var(--paper);
font-family: var(--font-data);
font-size: var(--t-label); font-weight: 600;
letter-spacing: .14em; text-transform: uppercase;
border-radius: 5px;
}
@media (max-width: 400px) {
.ba__tag { left: 8px; bottom: 8px; padding: 4px 8px; letter-spacing: .1em; }
}
/* --- Formular: Spamschutz und Rueckmeldung -------------------------------- */
/* Honeypot: unsichtbar, aber nicht display:none — manche Bots erkennen das. */
.hp {
position: absolute !important;
left: -9999px !important;
width: 1px; height: 1px;
overflow: hidden;
}
.form-note {
margin-top: 18px;
padding: 18px 20px;
border-radius: var(--radius);
font-size: var(--t-small);
line-height: 1.6;
}
.form-note p { margin: 0 0 .6em; max-width: none; }
.form-note p:last-child { margin-bottom: 0; }
.form-note--ok {
background: rgba(63,107,74,.08);
border: 1px solid rgba(63,107,74,.30);
border-left: 3px solid var(--ok);
color: var(--ink-soft);
margin-top: 0;
}
.form-note--ok strong { color: var(--ok); }
.form-note--err {
background: rgba(179,64,42,.07);
border: 1px solid rgba(179,64,42,.28);
border-left: 3px solid var(--error);
color: var(--ink-soft);
}
.form-note--err strong { color: var(--error-dark); }
.btn[disabled] { opacity: .6; cursor: progress; }