/* ============================================================
   Birgit Kappes — Führungskräfte Coaching Hamburg (Website 2)
   Farben/Fonts: Styleguide v2.1 (Signalrot #D7263D).
   Layout/Signature: Referenz peacemind-wbs — schwebende Cards
   auf warmem Verlauf, Pill-Header, große Headline, Blush-Karten,
   Foto-Stimmen, Glas-Formular auf Foto, nummerierte FAQ, Schluss-CTA,
   dunkle Footer-Card. Feedbackrunde 08/2026: dunkle Inhaltsflaechen und die
   Ablauf-Sektion sind raus, Preise stehen nirgends mehr.
   ============================================================ */

/* === Lokale Schriften (selbst gehostet, kein Request an Google) === */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/inter-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/inter-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/inter-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/inter-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/inter-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/inter-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/inter-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/inter-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Spectral';font-style:italic;font-weight:500;font-display:swap;src:url(assets/fonts/spectral-500-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Spectral';font-style:italic;font-weight:500;font-display:swap;src:url(assets/fonts/spectral-500-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Spectral';font-style:italic;font-weight:600;font-display:swap;src:url(assets/fonts/spectral-600-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Spectral';font-style:italic;font-weight:600;font-display:swap;src:url(assets/fonts/spectral-600-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/spectral-500-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/spectral-500-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/spectral-600-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/spectral-600-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root {
  --porzellan: #f7f7f7;
  --weiss: #ffffff;
  --nebelgrau: #f0f1f2;
  --anthrazit: #1a2430;
  --schwarz: #1a1a1a;
  --rot: #d7263d;
  --rot-600: #b91c30;
  --rot-soft: #ff8a97;
  --blush: #fbeeec;
  --blush-2: #f8e6e3;

  --text: #384049;
  /* Um 8 % abgedunkelt (#6a747d -> #626b73): der alte Ton lag auf allen warmen
     Flaechen und auf Blush bei 3,9 bis 4,3:1 und damit unter WCAG AA. Faellt
     optisch kaum auf, haelt aber ueberall >= 4,5:1. */
  --text-muted: #626b73;
  --line: rgba(26, 36, 48, .1);
  --line-strong: rgba(26, 36, 48, .2);

  --font-head: "Spectral", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --h-hero: clamp(2.5rem, 1.7rem + 3.6vw, 4.25rem);
  --h-xl: clamp(3rem, 1.6rem + 6vw, 6rem);      /* Riesenwort (About/CTA) */
  --h1: clamp(2.2rem, 1.6rem + 2.6vw, 3.25rem);
  --h2: clamp(1.9rem, 1.4rem + 2.1vw, 2.75rem);
  --h3: clamp(1.35rem, 1.15rem + 1vw, 1.6rem);
  --body-lg: 1.2rem;
  --body: 1.0625rem;
  --body-sm: 1rem;
  --caption: .9rem;

  --r-sm: 12px;
  --r-md: 22px;
  --r-lg: 32px;
  --r-card: 30px;
  --r-pill: 100px;

  --section: clamp(4.5rem, 3rem + 6vw, 8rem);
  --gutter: clamp(1.25rem, .8rem + 1.6vw, 2.5rem);
  --edge: clamp(10px, 1.2vw, 18px);   /* Rand der schwebenden Cards */
  --container: 1240px;
  --container-sm: 900px;
  --inner: 760px;

  --shadow-sm: 0 4px 18px rgba(26, 36, 48, .06);
  --shadow-md: 0 20px 50px rgba(26, 36, 48, .1), 0 6px 16px rgba(26, 36, 48, .05);
  --shadow-card: 0 30px 70px rgba(26, 36, 48, .13);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Kein globales scroll-behavior:smooth — bricht den Programm-Scroll von shot2 (leere Reveal-Sektionen). Nav-Anker scrollen per JS smooth. */
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: 1.65;
  color: var(--text);
  background:
    radial-gradient(90% 40% at 10% 2%, rgba(215, 38, 61, .12), transparent 60%),
    radial-gradient(90% 40% at 100% 6%, rgba(215, 38, 61, .09), transparent 55%),
    radial-gradient(80% 40% at 50% 100%, rgba(215, 38, 61, .1), transparent 60%),
    linear-gradient(180deg, #fbf1ef 0%, #f5f0ee 45%, #f6eeec 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--anthrazit); font-weight: 600; line-height: 1.08; margin: 0 0 .5em; letter-spacing: -.015em; }
h2 { font-size: var(--h2); line-height: 1.1; }
h3 { font-size: var(--h3); line-height: 1.2; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container.small { max-width: var(--container-sm); }
.section { padding-block: var(--section); }
.section.tight { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
/* Zwei gleichfarbige Sektionen hintereinander addieren sonst beide Polster
   und reissen ein Loch von ~250px in die Seite (Kundenwunsch: weniger Laenge). */
.bg-white + .section.bg-white { padding-top: calc(var(--section) * .3); }
.bg-warm { background: transparent; }                 /* zeigt den warmen Body-Verlauf */
.bg-white { background: var(--weiss); }
/* Blush statt Anthrazit: Kundenwunsch aus der Feedbackrunde 08/2026 ("zu dunkel,
   das bin ich nicht"). Die dunklen Inhaltsflaechen sind komplett raus, nur der
   Footer bleibt dunkel. .bg-dark bleibt definiert, falls es wieder gebraucht wird. */
.bg-blush { background: linear-gradient(180deg, var(--blush) 0%, var(--blush-2) 100%); }
.bg-dark { background: var(--anthrazit); color: #d7dee4; }
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4 { color: #fff; }

/* Schwebende Card-Sektionen (Hero, Kontakt, Footer) */
.card-section { max-width: 1680px; margin: var(--edge) auto; border-radius: var(--r-card); overflow: hidden; position: relative; box-shadow: var(--shadow-card); }

.eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-body); font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rot); margin-bottom: 1.1rem; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--rot); border-radius: 2px; }
.eyebrow.pill { border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); padding: .45rem 1.1rem; color: var(--anthrazit); text-transform: none; letter-spacing: .02em; font-size: .85rem; }
.eyebrow.pill::before { display: none; }
.bg-dark .eyebrow { color: var(--rot-soft); }

.section-head { max-width: 720px; margin-bottom: clamp(2.5rem, 4vw, 3.75rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head p { color: var(--text-muted); font-size: var(--body-lg); }
.bg-dark .section-head p { color: #aeb9c2; }
.lead { font-size: var(--body-lg); color: var(--text-muted); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--font-body); font-weight: 600; font-size: 1rem; line-height: 1; padding: 1.05rem 1.9rem; border-radius: var(--r-pill); border: 1.5px solid transparent; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s, transform .2s; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--rot); color: #fff; }
.btn-primary:hover { background: var(--rot-600); }
.btn-ghost { background: transparent; color: var(--anthrazit); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--anthrazit); }
.bg-dark .btn-ghost, .on-photo .btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.bg-dark .btn-ghost:hover, .on-photo .btn-ghost:hover { border-color: #fff; }
.btn-lg { padding: 1.15rem 2.15rem; font-size: 1.0625rem; }

/* ============================================================
   Header (Glas-Pill)
   ============================================================ */
.site-header { position: absolute; top: clamp(14px, 1.6vw, 26px); left: 0; right: 0; z-index: 40; }
.header-pill { max-width: calc(var(--container) + 40px); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; background: rgba(255,255,255,.72); backdrop-filter: saturate(1.5) blur(14px); border: 1px solid rgba(255,255,255,.6); border-radius: var(--r-pill); padding: .55rem .7rem .55rem 1.4rem; box-shadow: 0 8px 30px rgba(26,36,48,.1); }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-head); font-weight: 600; font-size: 1.35rem; color: var(--anthrazit); letter-spacing: -.01em; }
/* Name einheitlich, der Nachname wird NICHT mehr rot hervorgehoben (Kundenwunsch).
   Darunter die Rolle, weil beides auf den ersten Blick zusammengehoert. */
/* nowrap, sonst quetschen die fuenf Menuepunkte den Namen auf drei Zeilen
   und der Header waechst knapp oberhalb des Mobile-Breakpoints auf 94px. */
.brand-text { display: flex; flex-direction: column; line-height: 1.1; white-space: nowrap; }
.brand-text small { font-family: var(--font-body); font-weight: 500; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rot); margin-top: .18rem; }
/* Logo-Emblem: eine SVG, Farbe folgt currentColor (Anthrazit auf hell, Weiß auf dunkel) */
.brand-mark { flex: none; width: 34px; height: 25px; background: currentColor;
  -webkit-mask: url("images/logo.svg") center/contain no-repeat; mask: url("images/logo.svg") center/contain no-repeat; }
.header-nav { display: flex; align-items: center; gap: 1.75rem; }
/* nowrap: mit fuenf Punkten brechen die zweiwortigen Labels (Warum ich,
   Ueber mich) sonst knapp oberhalb des Mobile-Breakpoints auf zwei Zeilen
   um und der Header wird doppelt so hoch. */
.header-nav a { font-size: .95rem; color: var(--anthrazit); font-weight: 500; white-space: nowrap; transition: color .2s; }
.header-nav a:hover { color: var(--rot); }
.header-actions { display: flex; align-items: center; gap: .75rem; }
.mobile-toggle { display: none; background: none; border: 0; padding: .55rem; cursor: pointer; }
.mobile-toggle span { display: block; width: 24px; height: 2px; background: var(--anthrazit); margin: 5px 0; border-radius: 2px; transition: .25s; }

/* ============================================================
   Hero (Card)
   ============================================================ */
.hero { position: relative; min-height: clamp(600px, 88vh, 880px); display: flex; align-items: center; padding-top: clamp(104px, 14vh, 160px); padding-bottom: clamp(48px, 7vh, 90px); }
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(95deg, rgba(20,28,38,.8) 0%, rgba(20,28,38,.46) 32%, rgba(20,28,38,.1) 54%, rgba(20,28,38,0) 70%); }
.hero-inner { position: relative; z-index: 2; width: 100%; }
.hero-content { max-width: 620px; color: #fff; }
.hero-content .eyebrow { color: #fff; }
/* SEO (Workflow 08): das <h1> enthaelt NUR das Keyword (.h1-kicker), die grosse Zeile ist ein <p>.
   .hero-title traegt die frueheren h1-Werte, damit Optik und Abstaende gleich bleiben. */
.hero-content .hero-title { font-family: var(--font-head); font-weight: 600; font-size: var(--h-hero); color: #fff; line-height: 1.02; margin: 0 0 .35em; letter-spacing: -.02em; }
.hero-title .h1-main { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }
/* Keyword-Zeile sitzt IM H1 (klein ueber der grossen Aussage): Birgit wollte
   "In Beziehung statt Reibung" gross, das Keyword bleibt trotzdem in der H1. */
.hero-title .h1-kicker { margin-top: 0; display: block; font-family: var(--font-body); font-size: clamp(.78rem, .7rem + .3vw, .92rem); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fff; opacity: .92; margin-bottom: .9rem; line-height: 1.4; }
.hero-text { font-size: var(--body); color: #eef2f5; max-width: 30rem; margin-bottom: 1.75rem; }
.hero-list { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: .7rem; }
.hero-list li { display: flex; align-items: flex-start; gap: .65rem; color: #f4f7f9; }
.hero-list li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: .15rem; border-radius: 50%; background: var(--rot) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.hero-cta .note { font-size: var(--caption); color: #d6dee4; max-width: 220px; }

/* ============================================================
   Feature-Spalten (Warum / Problem / Ergebnis)
   ============================================================ */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 3vw, 3rem); }
.feature-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.feature .ico { width: 42px; height: 42px; color: var(--rot); margin-bottom: 1.1rem; }
.feature .ico svg { width: 100%; height: 100%; }
/* Ueberschriften tragen jetzt die Aussage, damit man die Seite scannen kann,
   ohne den Flisstext zu lesen (Kundenwunsch: "prägnanter, zum Überfliegen"). */
.feature h3 { font-size: clamp(1.4rem, 1.2rem + .6vw, 1.65rem); margin-bottom: .6rem; }
/* Zweite Auspraegung aus der Referenz (.feature-item als Flex): Icon links,
   Text rechts. Anderer Rhythmus als die Icon-oben-Spalten weiter oben, damit
   sich die Sektionen nicht wiederholen. */
/* Grid statt Flex: bei Flex wuerden Icon, H3 und Absatz alle drei nebeneinander
   liegen. So sitzt das Icon in Spalte 1 ueber beide Zeilen, Text in Spalte 2. */
/* Sektionstext links, die drei Punkte rechts uebereinander (Kundenwunsch).
   Der Kopf darf hier nicht zentriert laufen, er sitzt in der linken Spalte. */
.split-cols { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.split-cols .section-head { margin-bottom: 0; text-align: left; max-width: none; }
.feature-stack { display: grid; gap: clamp(1.5rem, 2.5vw, 2.1rem); }
/* Punkt 3 Runde 6: die drei Punkte standen im Laptop-Format oben buendig neben der
   deutlich laengeren Textspalte, darunter klaffte Leerraum -> mittig ausrichten.
   align-self schlaegt das align-items:start des Grids nur fuer dieses Item. */
.split-cols .feature-stack { align-self: center; }
.feature-row .feature { display: grid; grid-template-columns: 38px 1fr; column-gap: 1.1rem; align-items: start; }
.feature-row .ico { grid-column: 1; grid-row: 1 / 3; width: 38px; height: 38px; margin: .1rem 0 0; }
.feature-row h3, .feature-row p { grid-column: 2; }
.feature p { color: var(--text-muted); font-size: var(--body-sm); margin: 0; }
/* Die drei Punkte aus dem frueheren Band, jetzt direkt im Einleitungstext.
   Neutraler Strich statt Haken: hier wird nichts erfuellt, hier tut es weh. */
.lead-list { list-style: none; padding: 0; margin: 1.4rem 0 1.3rem; display: grid; gap: .8rem; }
.lead-list li { display: flex; align-items: flex-start; gap: .8rem; font-family: var(--font-head); font-size: clamp(1rem, .95rem + .35vw, 1.18rem); line-height: 1.35; color: var(--text); font-weight: 500; }
.lead-list li::before { content: ""; flex: none; width: 15px; height: 2px; margin-top: .72em; border-radius: 2px; background: rgba(26,36,48,.3); }
/* Schlusssatz sieht aus wie der Einleitungsabsatz (Birgit, Feedback 2026-10-01): Schrift und Farbe
   kommen aus .section-head p, hier bleibt nur der Abstand. */
.section-head .lead-punch { margin: 0; }
.bg-dark .feature p { color: #aeb9c2; }
.bg-dark .feature .ico { color: var(--rot-soft); }

.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2vw, 1.75rem); }
.result-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
/* Aus der Referenz uebernommen (.service-item + .service-icon-round): Karte mit
   rundem Icon-Badge OBEN, Rahmen faerbt sich beim Hover. Das Icon sass frueher
   als Leiste links; auf Wunsch steht es jetzt ueber der Ueberschrift, wie in den
   beiden Icon-Sektionen davor. */
.result-item { display: block; padding: clamp(1.4rem, 2vw, 1.9rem); border: 1px solid rgba(215,38,61,.14); border-radius: var(--r-md); background: var(--blush); transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.result-item:hover { border-color: var(--rot); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.result-rail { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--rot); color: #fff; margin-bottom: 1.15rem; }
.result-rail svg { width: 26px; height: 26px; }
.result-info { padding: 0; }
.result-info h3 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.45rem); margin-bottom: .5rem; }
.result-info p { color: var(--text-muted); font-size: var(--body-sm); margin: 0; }

/* ============================================================
   Empathie-Band
   ============================================================ */

/* ============================================================
   About (dunkel, Riesenwort, Werte-Chips, überlappende Fotos)
   ============================================================ */
/* align-items:start statt center, sonst hat .about-media keinen Spielraum im
   Grid-Track und position:sticky bliebe wirkungslos. */
.about { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.about-body .kicker { color: var(--text-muted); font-size: var(--body); margin-bottom: .25rem; }
.about-body h2 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 3.75rem); margin-bottom: .3rem; }
/* Rolle direkt unter dem Namen: Birgit ist beides, Psychologin UND Coach. */
.about-role { font-family: var(--font-body); font-weight: 600; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rot-600); margin-bottom: 1.4rem; }
/* Auf Blush faellt --text-muted (#6a747d) auf 4,2:1 und damit unter WCAG AA.
   Auf der hellen Flaeche laeuft der Fliesstext deshalb im dunkleren --text. */
.about-body p { color: var(--text); font-size: var(--body); }
.about-quote { margin: 1.5rem 0; padding-left: 1.25rem; border-left: 3px solid var(--rot); font-family: var(--font-head); font-style: italic; font-size: 1.2rem; color: var(--anthrazit); }
.values-head { font-family: var(--font-body); font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text); margin: 2rem 0 .9rem; }
/* Die Punkte, wie Birgit arbeitet. Als Liste untereinander statt als Chips:
   nebeneinander gesetzt lasen sie sich wie Tags, untereinander wie Aussagen. */
.values { list-style: none; padding: 0; display: grid; gap: .65rem; margin: 0 0 1.75rem; }
.values li { position: relative; padding-left: 1.7rem; font-family: var(--font-body); font-weight: 600; font-size: 1.02rem; line-height: 1.35; color: var(--text); }
.values li::before { content: ""; position: absolute; left: 0; top: .58em; width: 15px; height: 2px; border-radius: 2px; background: var(--rot); }
/* Foto laeuft mit, wenn die Textspalte links laenger wird (Kundenwunsch). */
.about-media { position: sticky; top: 90px; }
/* Rahmen folgt dem Seitenverhaeltnis des Fotos (2:3), damit nichts weggeschnitten wird. */
.about-media .img-main { width: 100%; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 2 / 3; max-height: 640px; }
.about-media .img-main img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.about-media .badge { position: absolute; left: 1.25rem; bottom: 1.25rem; background: var(--rot); color: #fff; border-radius: var(--r-pill); padding: .6rem 1.15rem; font-weight: 600; font-size: .9rem; box-shadow: var(--shadow-sm); z-index: 3; }

/* ============================================================
   Angebot (EIN Angebot gross, Formate klein darunter, keine Preise)
   Kundenwunsch 08/2026: die alte Drei-Karten-Preistabelle wirkte wie eine
   Tarifwahl. Der Preis ist kein Verkaufsargument und steht nirgends mehr.
   ============================================================ */
.grid { display: grid; gap: clamp(1.25rem, 2vw, 1.75rem); }
.offer { max-width: var(--inner); margin-inline: auto; text-align: center; }
.offer-head { font-size: clamp(2.6rem, 1.6rem + 4vw, 4.25rem); margin-bottom: .5rem; }
/* Keyword sitzt IM H2, aber als kleine ruhige Zeile, damit die grosse Aussage
   "1:1 Coaching" praegnant bleibt (gleiche Loesung wie im H1). */
.h2-kw { display: block; font-family: var(--font-body); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .8rem; line-height: 1.4; }
.h2-main { display: block; }
.offer-lead { color: var(--text-muted); font-size: var(--body-lg); margin-bottom: 2.5rem; }
.offer-ways { list-style: none; padding: 0; margin: 0 0 2.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; text-align: left; }
.offer-ways li { padding: 1.1rem 1.25rem; background: var(--blush); border: 1px solid rgba(215,38,61,.12); border-radius: var(--r-sm); }
.offer-ways strong { display: block; font-family: var(--font-head); font-size: 1.12rem; color: var(--anthrazit); margin-bottom: .2rem; }
.offer-ways span { color: var(--text-muted); font-size: .95rem; line-height: 1.45; }

/* ============================================================
   Testimonial-Slider (warmer Verlauf, EIN zentriertes Zitat)
   ============================================================ */
.tsection { background: radial-gradient(90% 120% at 50% 0%, #fdeae2, #fbdcd6 50%, #f6d2cd 100%); text-align: center; }
.tslider { max-width: 820px; margin-inline: auto; position: relative; min-height: 320px; }
.tslide { display: none; }
.tslide.active { display: block; animation: fade .5s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tslide .avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--rot); color: #fff; display: grid; place-items: center; font-family: var(--font-head); font-weight: 600; font-size: 1.5rem; margin: 0 auto .9rem; }
.tslide .name { font-family: var(--font-head); font-weight: 600; font-size: 1.2rem; color: var(--anthrazit); }
.tslide .role { color: var(--text-muted); font-size: .9rem; margin-bottom: 1.5rem; }
.tslide blockquote { margin: 0; font-family: var(--font-head); font-size: clamp(1.25rem, .9rem + 1.4vw, 1.85rem); line-height: 1.45; color: var(--anthrazit); }
.tnav { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; }
.tnav button { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: rgba(255,255,255,.5); color: var(--anthrazit); cursor: pointer; font-size: 1.1rem; transition: background .2s, border-color .2s; display: grid; place-items: center; }
.tnav button:hover { background: #fff; border-color: var(--rot); color: var(--rot); }
/* Stimmen als Karten mit Foto. Kundenwunsch 08/2026: "die müssen voll präsent
   sein" — nicht das Zitat wirkt, sondern wer da war. Deshalb steht die Person
   oben und gross, das Zitat darunter. */
/* grid-auto-rows: 1fr zieht ALLE Karten auf dieselbe Hoehe, nicht nur die einer
   Zeile (Kundenwunsch: alle Rezensionen gleich hoch). */
.tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2vw, 1.75rem); text-align: left; align-items: start; }
.tq { display: flex; flex-direction: column; background: #fff; border-radius: var(--r-md); padding: clamp(1.5rem, 2.2vw, 2.1rem); box-shadow: var(--shadow-sm); }
.tq .who { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.tq .tphoto { flex: none; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: center 22%; box-shadow: 0 6px 18px rgba(26,36,48,.16); }
.tq .avatar { flex: none; width: 96px; height: 96px; border-radius: 50%; background: var(--rot); color: #fff; display: grid; place-items: center; font-family: var(--font-head); font-weight: 600; font-size: 1.9rem; }
.tq .who strong { display: block; font-family: var(--font-head); color: var(--anthrazit); font-size: 1.15rem; line-height: 1.2; margin-bottom: .15rem; }
.tq .who > div span { display: block; color: var(--text-muted); font-size: .85rem; line-height: 1.35; }
.stars { display: flex; gap: .18rem; color: #f2b705; margin-bottom: .7rem; }
.stars svg { width: 17px; height: 17px; }
.tq-head { font-size: 1.12rem; line-height: 1.3; margin: 0; min-height: 2.6em; }
/* Die Ueberschrift ist die Schaltflaeche. Der Button steckt IM h3, nicht
   umgekehrt: eine Ueberschrift in einem Button waere ungueltiges Markup. */
.tq-q { width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; display: flex; align-items: flex-start; gap: 1rem; font: inherit; color: inherit; }
.tq-q .chev { margin-left: auto; flex: none; width: 10px; height: 10px; margin-top: .3em; border-right: 2px solid var(--rot); border-bottom: 2px solid var(--rot); transform: rotate(45deg); transition: transform .25s; }
.tq.open .chev { transform: rotate(-135deg); }
.tq-q:focus-visible { outline: 2px solid var(--rot); outline-offset: 4px; border-radius: 4px; }
.tq-a { max-height: 0; overflow: hidden; transition: max-height .32s ease; }
.tq .tq-a blockquote { margin: .85rem 0 0; }
.tq blockquote { margin: 0; font-size: var(--body-sm); line-height: 1.6; color: var(--text); }

/* ============================================================
   Kontakt (Card, warmes Foto, Glas-Formular)
   ============================================================ */
.contact-card { position: relative; padding: clamp(2rem, 4vw, 4rem); color: var(--text); }
.contact-card .cbg { position: absolute; inset: 0; z-index: 0; }
.contact-card .cbg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Helles Foto (Kundenwunsch): statt dunklem Overlay ein warmer Weissschleier,
   Text laeuft deshalb in Anthrazit statt Weiss. */
.contact-card .cbg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.78) 42%, rgba(251,238,236,.72) 100%); }
.contact-grid { position: relative; z-index: 2; display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.contact-intro h2 { color: var(--anthrazit); }
.contact-intro p { color: var(--text); }
.contact-intro > .btn { margin-top: 1.9rem; }
.contact-intro .phone { margin-top: 1.75rem; }
/* Auf dem hellen Foto reicht --text-muted nicht (3,2:1 gemessen), das Label
   ist Kleinschrift und braucht 4,5:1. */
.contact-intro .phone span { display: block; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text); margin-bottom: .3rem; }
.contact-intro .phone a { font-family: var(--font-head); font-size: 1.6rem; color: var(--rot-600); }
/* Glas wie das Header-Menü: frostiges Weiß */
.form-head { font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; color: var(--anthrazit); margin: 0 0 1.15rem; }
.field label .hint { font-weight: 500; color: var(--text-muted); }
.glass-form { background: rgba(255,255,255,.88); backdrop-filter: saturate(1.5) blur(14px); border: 1px solid rgba(255,255,255,.6); border-radius: var(--r-md); padding: clamp(1.5rem, 2.5vw, 2.25rem); box-shadow: 0 12px 40px rgba(26,36,48,.2); }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .82rem; font-weight: 600; color: var(--anthrazit); margin-bottom: .4rem; }
.glass-form input, .glass-form textarea, .glass-form select { width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--anthrazit); padding: .8rem 1rem; border: 1.5px solid rgba(26,36,48,.14); border-radius: var(--r-sm); background: rgba(255,255,255,.85); transition: border-color .2s, box-shadow .2s, background .2s; }
.glass-form input::placeholder, .glass-form textarea::placeholder { color: #8a949c; }
.glass-form input:focus, .glass-form textarea:focus, .glass-form select:focus { outline: none; border-color: var(--rot); background: #fff; box-shadow: 0 0 0 3px rgba(215,38,61,.14); }
.glass-form textarea { min-height: 110px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ============================================================
   FAQ (nummeriert, Chevron)
   ============================================================ */
.faq-list { max-width: var(--inner); margin-inline: auto; display: grid; gap: .85rem; counter-reset: faq; }
.faq-item { background: var(--blush); border-radius: var(--r-sm); overflow: hidden; }
.faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 1.3rem 1.5rem; display: flex; align-items: center; gap: 1rem; font-family: var(--font-head); font-weight: 600; font-size: 1.12rem; color: var(--anthrazit); }
.faq-q::before { counter-increment: faq; content: counter(faq, decimal-leading-zero); font-family: var(--font-body); font-weight: 700; font-size: .95rem; color: var(--rot); }
.faq-q .chev { margin-left: auto; flex: none; width: 11px; height: 11px; border-right: 2px solid var(--rot); border-bottom: 2px solid var(--rot); transform: rotate(45deg); transition: transform .25s; }
.faq-item.open .chev { transform: rotate(-135deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a-inner { padding: 0 1.5rem 1.35rem 3.1rem; color: var(--text-muted); font-size: var(--body-sm); }

/* ============================================================
   Schluss-CTA (vollflächiges Foto)
   ============================================================ */
/* Heller Abschluss statt Anthrazit-Block, und deutlich kompakter: der Block
   nahm der Kundin zu viel Raum ein ("zu viel Länge, zu viel schwarzer Block").
   Das Foto laeuft jetzt in den warmen Seitenhintergrund aus. */
/* Der Abschluss laeuft bewusst ins Dunkle, damit er ohne Kante in den Footer
   uebergeht. Der Block bleibt dabei kompakt: Birgits Kritik im Call galt der
   LAENGE des alten Anthrazit-Blocks, nicht der dunklen Farbe an sich. */
.cta-band { position: relative; text-align: center; overflow: hidden; padding-block: 0; background: var(--anthrazit); }
/* overflow:hidden ist hier PFLICHT: das Bild wird beim Reveal mit scale(1.14)
   eingeblendet und ragt damit rund 45px unter den Container. Der Abschluss-
   Verlauf liegt aber nur ueber dem Container (inset:0), also stand der
   herausragende, helle Bildrand ungedeckt unter dem Verlauf: die sichtbare
   Kante. Sie war waehrend der Animation am groessten, weil der Zoom da am
   staerksten ist. .cta-band allein reicht nicht, das Band ist viel hoeher
   als das Foto. */
.cta-photo { position: relative; width: 100%; height: clamp(480px, 72vh, 900px); overflow: hidden; }
/* Etwas nach rechts und tiefer angesetzt, damit mehr von Birgit im Bild steht. */
.cta-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 56% 22%; }
/* Voll deckend schon bei 97%, damit die letzten Pixel garantiert satt sind
   und an der Unterkante kein Rest Foto gegen den Sektionsgrund stoesst. */
.cta-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,36,48,0) 46%, rgba(26,36,48,.4) 66%, rgba(26,36,48,.78) 82%, rgba(26,36,48,.97) 92%, var(--anthrazit) 97%); }
.cta-inner { position: relative; z-index: 2; max-width: 720px; margin: -3rem auto 0; padding: 0 var(--gutter) clamp(3rem, 5vw, 5rem); }
.cta-inner h2 { color: #fff; font-size: clamp(2.4rem, 1.5rem + 3.4vw, 3.9rem); line-height: 1.02; margin-bottom: .3em; }
/* Auf dem dunklen Verlauf: #ccd4db ergibt 10,3:1 gegen --anthrazit. */
.cta-inner p { color: #ccd4db; font-size: var(--body-lg); margin-bottom: 2rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* ============================================================
   Footer (dunkle Card)
   ============================================================ */
.site-footer { background: var(--anthrazit); color: #a7b2bb; }
.footer-pad { padding: clamp(3rem, 5vw, 4.5rem) var(--gutter) 2rem; max-width: var(--container); margin-inline: auto; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr auto; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-brand .brand { color: #fff; }
/* Auf dem dunklen Footer braucht das kleine Label den hellen Rotton (WCAG AA). */
.footer-brand .brand-text small { color: var(--rot-soft); }
.footer-brand p { margin: .9rem 0 1.25rem; max-width: 320px; font-size: var(--body-sm); color: #8b96a0; }
/* Spaltentitel sind <p>, keine <h4>: sonst springt die Ueberschriften-Hierarchie von h2 auf h4 */
.footer-col .footer-h { font-weight: 600; line-height: 1.08; margin: 0 0 .5em; color: #fff; font-family: var(--font-body); font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem; }
.footer-col a { display: block; padding: .3rem 0; color: #a7b2bb; font-size: .95rem; transition: color .2s; }
.footer-col a:hover { color: var(--rot-soft); }
.footer-social { display: flex; gap: .6rem; }
.footer-social a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); display: grid; place-items: center; color: #cbd3da; transition: background .2s, color .2s, border-color .2s; }
.footer-social a:hover { background: var(--rot); color: #fff; border-color: var(--rot); }
.footer-social svg { width: 18px; height: 18px; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; padding-top: 1.75rem; font-size: .875rem; color: #8b96a0; } /* 5,2:1 statt 3,99:1 (WCAG AA) */
.footer-bottom a { color: #a7b2bb; }
.footer-bottom a:hover { color: var(--rot-soft); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(.16,.7,.2,1), transform 1s cubic-bezier(.16,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .12s; }
.reveal.d2 { transition-delay: .24s; }
.reveal.d3 { transition-delay: .36s; }
.reveal.d4 { transition-delay: .48s; }

/* Button-Pfeil, wandert bei Hover */
.btn::after { content: ""; flex: none; width: 1.05em; height: 1.05em; background: currentColor; transition: transform .25s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; }
.btn:hover::after { transform: translateX(5px); }

/* Bild-Reveal mit sanftem Zoom */
.about-media img { transition: transform 1.5s cubic-bezier(.16,.7,.2,1); will-change: transform; }
.cta-photo img { transition: transform 1.5s cubic-bezier(.16,.7,.2,1), opacity 1s cubic-bezier(.16,.7,.2,1); will-change: transform, opacity; }
/* Schluss-CTA: der Container selbst darf WEDER faden NOCH sich verschieben.
   Der Abschluss-Verlauf sitzt als ::after auf .cta-photo. Faedet der Container,
   deckt auch der Verlauf nicht voll, das Foto scheint bis zur Unterkante durch
   und trifft dort hart auf den Sektionsgrund. Das ist der sichtbare Spalt, und
   er ist waehrend der Animation am groessten, weil die Deckkraft dann am
   niedrigsten ist. Einblenden tut deshalb nur noch das Bild INNERHALB des
   Containers, der Verlauf darueber bleibt jederzeit voll deckend. */
.cta-photo.reveal { opacity: 1; transform: none; }
.cta-photo.reveal img { opacity: 0; transform: scale(1.14); }
.cta-photo.is-visible img { opacity: 1; transform: scale(1); }
.about-media.reveal img { transform: scale(1.14); }
.about-media.is-visible img { transform: scale(1); }
/* Hero: langsamer Ken-Burns beim Laden */
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.11); } }
.hero-bg img { animation: kenburns 22s ease-out both; }


@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-bg img { animation: none; }
  .about-media img, .cta-photo img { transition: none; transform: none !important; opacity: 1 !important; }
  .btn::after { transition: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .feature-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .tgrid, .result-grid, .result-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
/* Eigener Breakpoint NUR fuer die Navigation: mit fuenf Menuepunkten passt die
   Leiste erst ab rund 960px neben Logo und Button in die Pill. Darunter greift
   das Klappmenue. Die uebrigen Layout-Umbrueche bleiben bei 860px, damit sich
   an den Sektionen nichts verschiebt. */
@media (max-width: 959px) {
  .header-nav { position: absolute; top: calc(100% + 10px); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: rgba(255,255,255,.96); backdrop-filter: blur(14px); border-radius: var(--r-md); padding: .5rem 0; display: none; box-shadow: var(--shadow-md); }
  .header-nav.mobile-open { display: flex; }
  .header-nav a { padding: .9rem 1.4rem; }
  .header-actions .btn { display: none; }
  .mobile-toggle { display: block; }
}

@media (max-width: 860px) {
  /* Achtung Spezifitaet: .grid[data-count="3"] und .feature-grid.cols-4 haben
     0,2,0 bzw. 0,2,0 — die Mobile-Regel muss das spiegeln, sonst gewinnt die
     Basisregel und die Spalten bleiben am Handy gequetscht. */
  .feature-grid, .feature-grid.cols-4, .grid[data-count="3"], .tgrid, .offer-ways, .result-grid, .result-grid.cols-4, .split-cols { grid-template-columns: 1fr; }
  .about, .contact-grid, .values { grid-template-columns: 1fr; }
    /* Punkt 17 Runde 6: auf dem Smartphone stand das Foto hinter der kompletten
     Textwand. Als Grid-Item per order nach oben, Markup bleibt unveraendert. */
  .about-media { max-width: 460px; position: relative; order: -1; margin-bottom: .5rem; }

  /* Punkt 16 Runde 6: auf dem Smartphone lagen Headline und Text quer ueber
     Birgits Portrait ("mein Antrittsbild ist beschriftet"). Der Hero wird hier
     zweigeteilt: Foto oben als eigener Block, Text darunter auf weissem Grund.
     Kein Text mehr im Bild. Desktop bleibt unveraendert. */
  .hero { display: block; min-height: 0; padding-top: clamp(88px, 24vw, 108px); padding-bottom: clamp(2rem, 6vw, 2.75rem); background: var(--weiss); }
  /* aus dem absoluten Hintergrund wird ein normaler Bildblock im Fluss */
  .hero-bg { position: relative; inset: auto; height: clamp(330px, 82vw, 440px); }
  .hero-bg img { object-position: 66% center; }
  /* Die Pill sitzt jetzt ueber dem Foto auf Weiss, der Abdunkler entfaellt */
  .hero-bg::after { background: none; }
  .hero-inner { padding-top: clamp(1.5rem, 5vw, 2rem); }
  .hero-content { max-width: none; color: var(--text); }
  .hero-content .hero-title { color: var(--anthrazit); }
  .hero-title .h1-kicker { color: var(--rot-600); opacity: 1; }
  .hero-text { color: var(--text); max-width: none; }
}
@media (max-width: 560px) {
  /* Gefunden in Runde 6 (nicht aus Birgits Liste): .brand-text hatte seit
     Runde 4 white-space:nowrap, mit der laengeren Rolle aus Runde 5 war die
     Pill-Zeile breiter als der Schirm. Der Hamburger stand dadurch bei JEDER
     Handybreite bis 430px ausserhalb des Viewports (gemessen: left 401px bei
     390px Schirm) und wurde von .card-section{overflow:hidden} abgeschnitten,
     das Menue war am Handy nicht erreichbar. Rolle darf hier umbrechen. */
  .header-pill .brand, .header-pill .brand-text { min-width: 0; }
  .header-pill .brand-text { white-space: normal; }
  .header-pill .brand-text small { font-size: .58rem; letter-spacing: .06em; }
  .footer-top { grid-template-columns: 1fr; gap: 1.75rem; }
  .form-row { grid-template-columns: 1fr; }
  .pstep { grid-template-columns: auto 1fr; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .hero-cta .note { max-width: none; text-align: center; }
}

/* ============================================================
   Go-Live-Standards (2026-10-01): Formular, Cookiebox
   ============================================================ */

/* Kontaktformular: Datenschutz-Zustimmung, Honeypot, Rueckmeldung */
.glass-form .consent { display: flex; gap: .65rem; align-items: flex-start; font-size: .82rem; line-height: 1.5; color: var(--text); margin: .25rem 0 1.15rem; cursor: pointer; }
.glass-form .consent input[type="checkbox"] { width: 1.1rem; height: 1.1rem; flex: none; margin: .15rem 0 0; padding: 0; accent-color: var(--rot); }
.glass-form .consent a { color: var(--rot-600); text-decoration: underline; }
.glass-form .honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.form-status { margin: 0; padding: 1.5rem 0; text-align: center; font-weight: 600; color: var(--anthrazit); }
.form-error { margin: .85rem 0 0; font-size: .85rem; color: var(--rot-600); }

/* Klaro Cookie-Box: Signalrot, weisser Text >= 4,5:1 (WCAG AA) */
.klaro { --green1: #d7263d; --green2: #b91c30; --green3: #ffffff; font-family: var(--font-body); }
.klaro .cookie-notice:not(.cookie-modal-notice) {
  left: 50% !important; right: auto !important; transform: translateX(-50%) !important;
  bottom: 24px !important; width: 50% !important; max-width: 720px !important; border-radius: 14px !important;
}
@media (max-width: 1024px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    left: 0 !important; transform: none !important; bottom: 0 !important;
    width: 100% !important; max-width: none !important; border-radius: 0 !important;
  }
}
.klaro .cm-btn.cm-btn-success, .klaro .cm-btn.cm-btn-accept-all, .klaro .cm-btn.cm-btn-accept { background-color: #d7263d !important; color: #fff !important; }
.klaro .cm-btn.cm-btn-success:hover, .klaro .cm-btn.cm-btn-accept:hover { background-color: #b91c30 !important; }
.klaro .cm-btn.cm-btn-danger, .klaro .cm-btn.cn-decline { background-color: #6f6f6f !important; color: #fff !important; }
.klaro .cm-btn.cm-btn-danger:hover, .klaro .cm-btn.cn-decline:hover { background-color: #5c5c5c !important; }
.klaro .cookie-notice a, .klaro .cookie-modal a, .klaro .cm-link { color: #b91c30 !important; }

/* Schwebendes Schloss: Cookie-Einstellungen jederzeit aufrufen/widerrufen */
.cookie-revoke {
  position: fixed; left: 18px; bottom: 18px; z-index: 1000;
  width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
  background: #d7263d; color: #fff; box-shadow: 0 6px 20px rgba(215, 38, 61, .4);
  display: flex; align-items: center; justify-content: center; transition: transform .2s ease;
}
.cookie-revoke:hover { transform: scale(1.08); }
/* Offenes Banner liegt UEBER dem Schloss, sonst verdeckt es am Handy den Link Einstellungen */
.klaro .cookie-notice:not(.cookie-modal-notice), .klaro .cookie-modal { z-index: 1001 !important; }
.cookie-revoke svg { width: 22px; height: 22px; }

/* Rechtsseiten (Impressum, Datenschutz) */
.legal-page { background: var(--porzellan); }
.legal-head { background: #fff; border-bottom: 1px solid rgba(26,36,48,.08); padding: 1rem 0; }
.legal-head .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.legal-back { font-size: .92rem; font-weight: 600; color: var(--rot-600); }
.legal { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.legal h1 { font-size: var(--h2); margin-bottom: 1.2rem; overflow-wrap: break-word; hyphens: auto; }
.legal h2 { font-size: 1.35rem; margin: 2.2rem 0 .6rem; }
.legal h3 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
.legal p, .legal li { color: var(--text); line-height: 1.65; }
.legal p { margin: 0 0 .9rem; }
.legal ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.legal a { color: var(--rot-600); text-decoration: underline; overflow-wrap: anywhere; }
.legal-foot { background: var(--anthrazit); color: #c9cfd5; font-size: .9rem; padding: 1.4rem 0 4.5rem; }
.legal-foot .container { display: flex; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.legal-foot a { color: #fff; }
@media (max-width: 560px) { .legal-head .brand-text { white-space: normal; } }