/* =========================================================
   WIRKRAUM — Landingpage
   Farbwelt: Leinen, Sand, Petrol, Terracotta
   ========================================================= */

/* ---------------------------------------------------------
   SCHRIFTEN — lokal eingebunden, keine Anfrage an Google.
   Die Dateien liegen in assets/fonts/ und müssen beim Upload
   mit hochgeladen werden, sonst fällt die Seite auf Georgia
   bzw. die Systemschrift zurück.

   Newsreader normal ist eine Variable Font: eine Datei deckt
   alle Strichstärken 300–700 ab und ist kleiner als drei
   feste Schnitte. Kursiv kommt nur in kurzen Hervorhebungen
   vor — dafür reicht ein fester 400er-Schnitt.

   latin-ext lädt der Browser nur nach, wenn ein Zeichen
   daraus wirklich vorkommt. Deutsche Umlaute stecken bereits
   in latin, für uns bleibt es also bei den latin-Dateien.
   --------------------------------------------------------- */

@font-face{
  font-family:'Newsreader'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url(assets/fonts/Newsreader-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:'Newsreader'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url(assets/fonts/Newsreader-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:'Newsreader'; font-style:italic; font-weight:400; font-display:swap;
  src:url(assets/fonts/Newsreader-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:'Newsreader'; font-style:italic; font-weight:400; font-display:swap;
  src:url(assets/fonts/Newsreader-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:'Manrope'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url(assets/fonts/Manrope-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:'Manrope'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url(assets/fonts/Manrope-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{
  --linen:        #FAF7F2;
  --linen-deep:   #F2ECE3;
  --paper:        #FFFDFA;
  --ink:          #241F1B;
  --ink-soft:     #4A423B;
  /* 11.09.2026 von #7A7168 abgedunkelt: der alte Ton lag auf getoentem
     Leinen bei 4.07 und damit unter dem WCAG-AA-Grenzwert von 4.5 —
     betroffen waren 18 Stellen Fliesstext. Jetzt 4.51 bis 5.21. */
  --muted:        #736A62;
  --line:         #E4DBCF;
  /* Petrol statt Salbei. Petrol liegt zwischen Blau und Grün und gehört damit
     weder in die Naturheilpraxis-Ecke noch in den Technik-Look. Es ist die
     Komplementärfarbe zu Terracotta — daraus entsteht Spannung mit nur zwei
     Farben, ohne dass die Seite bunt wird. */
  --petrol:         #2C555C;
  --petrol-deep:    #1F3F45;
  --petrol-tint:    #E6EFEF;
  --terra:        #BC6B45;
  --terra-tint:   #F8EEE7;
  /* Dunklere Variante ausschließlich für kleine Schrift. Das helle Terracotta
     erreicht auf Leinen nur einen Kontrast von 3,7 — genug für große
     Überschriften (dort sind 3,0 gefordert), aber zu wenig für Fließtext und
     kleine Auszeichnungen, wo 4,5 nötig sind. Dieser Ton schafft 5,2. */
  --terra-text:   #9E5434;
  /* Nochmals dunkler, ausschließlich als Flächenfarbe mit weißer Schrift
     (Hebel 2). Das helle Terracotta käme dort nur auf 3,9 Kontrast — knapp
     unter den geforderten 4,5. Dieser Ton schafft 5,3. */
  --terra-solid:  #A85434;

  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1140px;
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;

  /* Ankerflächen: dunkles Petrol, gewachsen aus derselben Farbe wie die
     Akzente. Wird für die beiden dunklen Abschnitte „Warum wir" und Kontakt
     benutzt. Der helle Gegenton ist Sand — kein Gold, das würde Richtung
     Kanzlei kippen. */
  --anchor:      #1C3B41;
  --anchor-deep: #0F2226;
  --anchor-lift: #CFC3A4;
  --anchor-text: #E9EDEB;

  /* Schatten mit Braunanteil statt neutralem Grau (Hebel 3). Auf warmen
     Leinenflächen wirkt ein grauer Schatten schmutzig, ein warmer wirkt wie
     Licht. Drei Ebenen: Kontaktkante, Nahfeld, weiter Abwurf. */
  --shadow-soft: 0 1px 2px rgba(74,48,30,.05), 0 8px 24px rgba(74,48,30,.06);
  --shadow-lift: 0 2px 4px rgba(74,48,30,.06), 0 18px 48px rgba(74,48,30,.11);
  --shadow-deep: 0 1px 2px rgba(74,48,30,.07), 0 12px 28px rgba(74,48,30,.10),
                 0 34px 70px rgba(74,48,30,.13);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:90px; }
/* Auf Touch-Geräten KEIN scroll-behavior:smooth: Android/Chromium (auch
   Brave) mischt beim Finger-Scrollen die Fling-Berechnung mit der
   Smooth-Scroll-Interpolation — bei Richtungswechsel springt die Seite
   dadurch ein Stück zurück ("wie betrunken", User-Feedback). Anker-Links
   springen auf Mobile dann direkt, das ist dort Standard. */
@media (hover:none), (pointer:coarse){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--linen);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{ max-width:100%; height:auto; display:block; }

/* Rasterkinder dürfen nie breiter werden als ihre Spur. Ohne min-width:0 zieht
   ein Bild mit großer Eigenbreite das gesamte Raster auseinander. */
.mock-grid > *, .price-grid > *, .ref-grid > *,
.aud-grid > *, .pain-grid > *, .addon-grid > *, .step-grid > *,
.about-grid > *{ min-width:0; }

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.12;
  letter-spacing:-.015em;
  margin:0;
}

/* Newsreader baut deutlich breiter als die vorherige Schrift. Die H1 hat feste
   Zeilenumbrüche im HTML — wird sie zu groß, brechen die beiden Zeilen ein
   zweites Mal um und die Aussage zerfällt in vier Fetzen. Die Werte hier sind
   die größten, bei denen es über alle Breiten bei zwei Zeilen bleibt. */
h1{ font-size:clamp(1.9rem,4.8vw,3.5rem); }
h2{ font-size:clamp(1.6rem,4.2vw,3.1rem); }

/* Sehr schmale Geräte: hier passt selbst die Mindestgröße nicht mehr in eine
   Zeile der fest umbrochenen Überschriften. Die H2 kippt schon knapp unter
   375 px, die H1 hält länger durch — deshalb zwei getrennte Schwellen. */
@media (max-width:374px){ h2{ font-size:1.42rem; } }
@media (max-width:350px){ h1{ font-size:1.6rem; } }
h3{ font-size:1.28rem; line-height:1.25; }

p{ margin:0 0 1em; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }

.section{ padding:clamp(72px,10vw,132px) 0; position:relative; }

/* Hebel 4 — weiche Übergänge. Statt einer harten Kante zwischen zwei
   Abschnitten blenden die getönten Flächen oben und unten in die Leinenfarbe
   des body aus. Das nimmt der Seite das Streifige, ohne dass man den Verlauf
   bewusst bemerkt. */
.section-tint{
  background:linear-gradient(180deg,
    var(--linen) 0%, var(--linen-deep) 7%,
    var(--linen-deep) 93%, var(--linen) 100%);
}
.section-paper{
  background:linear-gradient(180deg,
    var(--linen) 0%, var(--paper) 7%,
    var(--paper) 93%, var(--linen) 100%);
}

.eyebrow{
  font-size:.74rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--petrol-deep);
  margin:0 0 18px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--petrol); flex:none;
}
.section-head{ max-width:720px; margin-bottom:clamp(38px,5vw,64px); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head.center .eyebrow{ justify-content:center; }
.section-sub{
  font-size:1.075rem; color:var(--ink-soft); margin-top:20px; max-width:60ch;
}
.section-head.center .section-sub{ margin-inline:auto; }

.hl{ color:var(--terra); font-style:italic; font-variation-settings:"SOFT" 40,"WONK" 1; }

/* ---------- Grain ---------- */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.42;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-weight:700; font-size:.95rem;
  padding:15px 28px; border-radius:999px; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:transform .35s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .35s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn-solid{ background:var(--ink); color:var(--linen); box-shadow:var(--shadow-soft); }
.btn-solid:hover{ background:var(--petrol-deep); box-shadow:var(--shadow-lift); }
.btn-line{ border-color:var(--line); color:var(--ink); background:transparent; }
.btn-line:hover{ border-color:var(--ink); background:rgba(255,255,255,.6); }
/* Hebel 2.1 — Primärbutton in Terracotta statt Petrol. Der Button kommt auf
   jedem Abschnitt vor, dadurch bekommt die Farbe mehr Präsenz als durch jede
   große Fläche, und als Gegenpol zu Petrol springt er heraus statt sich
   einzureihen. */
.btn-wa{ background:var(--terra-solid); color:#fff; box-shadow:var(--shadow-soft); }
.btn-wa:hover{ background:#943F26; box-shadow:var(--shadow-lift); }
.btn-tg{ background:transparent; border-color:var(--petrol); color:var(--petrol-deep); }
.btn-tg:hover{ background:var(--petrol-tint); }
.btn-text{
  background:none; padding:15px 4px; color:var(--ink-soft); text-decoration:none;
  font-weight:600;
}
.btn-text:hover{ color:var(--terra); }
.btn .arrow{ transition:transform .3s var(--ease); }
.btn-text:hover .arrow{ transform:translateX(5px); }
.btn svg{ flex:none; }

.skip-link{
  position:absolute; left:-9999px; top:12px; background:var(--ink); color:var(--linen);
  padding:10px 18px; border-radius:var(--r-sm); z-index:10000;
}
.skip-link:focus{ left:16px; }

:focus-visible{ outline:2px solid var(--terra); outline-offset:3px; border-radius:4px; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:900;
  background:rgba(250,247,242,.82);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.site-header.is-stuck{ border-bottom-color:var(--line); background:rgba(250,247,242,.94); }
.header-inner{ display:flex; align-items:center; gap:22px; height:74px; }

.logo{ display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto; }
.logo-mark{ width:34px; height:34px; flex:none; display:block; }
.logo-text{ font-family:var(--serif); font-size:1.22rem; font-weight:600; letter-spacing:-.02em; }
.logo-text em{ font-style:normal; color:var(--muted); font-weight:400; }

.main-nav{ display:flex; gap:28px; }
.main-nav a{
  text-decoration:none; font-size:.93rem; font-weight:600; color:var(--ink-soft);
  position:relative; padding:4px 0;
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px;
  background:var(--terra); transition:width .3s var(--ease);
}
.main-nav a:hover{ color:var(--ink); }
.main-nav a:hover::after{ width:100%; }
.header-cta{ padding:11px 22px; font-size:.88rem; }

.nav-toggle{
  display:none; width:42px; height:42px; border:1px solid var(--line);
  background:transparent; border-radius:50%; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.nav-toggle span{ width:16px; height:1.5px; background:var(--ink); transition:.3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

/* ---------- Hero — Ego-Fahrt ----------
   Scroll-gesteuertes Video (assets/video/hero-fahrt-*.mp4). Aufbau:
   .hero-fahrt (415vh hoch = Scrollstrecke = Tempo; 560 war zu gemächlich,
   280 zu hastig — 415 ist die vom Team abgenommene Geschwindigkeit) enthält
   die sticky .hero-buehne (100vh). Darin .hero-film als 16:9-Fläche, die den
   Viewport immer voll deckt; bei schmalen Viewports schiebt script.js sie so,
   dass am Ende der Laptop mittig steht (Fokuspunkt 50 → 54 %).
   Ebenen von unten: Video → scharfes Endbild (blendet ein, wenn die Kamera
   steht) → Lichtstimmung (Petrol-Vignette gegen Ende) → Filmkorn → Veil
   (Abdunklung für die Headline, verschwindet beim Losscrollen) → Copy.
   Alle Opazitäten setzt script.js nach Scrollfortschritt. */
.hero-fahrt{ position:relative; height:415vh; height:415svh; background:#1A1612; color:#EDEDF3; margin-top:-75px; }   /* unter den sticky Header ziehen (75px = 74px Inhalt + 1px Rahmen — bei -74px blieb eine 1px-Zeile Leinen sichtbar). Höhe = Scrolltempo: 415vh, abgenommenes Tempo für das 13s-POV-Video (pov-fahrt-screen). svh-Fallback: plain vh ist auf vielen Mobilbrowsern dynamisch (ändert sich, wenn die Adressleiste ein-/ausblendet) — das verschob beim Scrollen laufend die Gesamtseitenhöhe und damit ALLE Sektionen unter dem Hero nach oben/unten ("springt beim Scrollen", User-Feedback). svh bleibt stabil. */
.hero-buehne{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; background:#1A1612; }
.hero-film{
  position:absolute; left:0; top:50%; translate:0 -50%;
  aspect-ratio:16/9; width:max(100vw, calc(100svh * 16 / 9));
  will-change:transform;   /* Schwenk läuft über transform (GPU), nicht über left (Layout) — script.js */
}
.hero-film video, .hero-ende, .hero-frame, .hero-canvas, .hero-stimmung, .hero-korn, .hero-petrol{
  position:absolute; inset:0; width:100%; height:100%; display:block;
}
.hero-film video, .hero-ende, .hero-frame, .hero-canvas{ object-fit:cover; }
.hero-ende{ opacity:0; max-width:none; }
.hero-petrol{ background:var(--petrol); opacity:.08; mix-blend-mode:multiply; pointer-events:none; }   /* dezenter Markenfarb-Schleier übers Startbild, blendet beim Losscrollen aus (script.js) */
.hero-frame{ max-width:none; }   /* Startbild der Mobile-Sequenz (LCP), liegt unter dem Canvas */
.hero-canvas{ visibility:hidden; }   /* deckendes Canvas wäre vor dem ersten Malen schwarz — script.js setzt .bereit */
.hero-canvas.bereit{ visibility:visible; }
/* Nur Mobile: Bildsequenz statt Video (script.js lädt das Video erst ab
   900px). 86 Einzelbilder (AVIF, WebP als Rückfall), gemalt in ein einziges
   .hero-canvas (seit 27.09.2026 — vorher 86 gestapelte <img> mit Opacity-
   Umschaltung, die bei langsamem Netz schwarz aufblitzten). .hero-frame ist
   nur noch das Startbild darunter. .hero-ende ist das letzte, schärfere
   Standbild, das am Ende einblendet. Die Bühne verliert hier ihre
   16:9-Sonderbreite (die war nur fürs Video-Schwenken nötig) und füllt
   einfach den Viewport — object-fit:cover schneidet zentriert zu, wie im
   bestätigten Prototyp. */
@media (max-width:899px){
  .hero-film video{ display:none; }
  .hero-film{ position:absolute; inset:0; translate:none; width:100%; height:100%; aspect-ratio:auto; }
  .hero-ende{ opacity:1; }   /* Basiswert ohne JS/bei reduced-motion — script.js übernimmt danach per Inline-Style */
  .hero-ende-desktop{ display:none; }   /* eigenes Desktop-Standbild; die Quelle setzt script.js nur ab 900px (display:none allein verhindert das Laden NICHT) */
}
.hero-stimmung{
  opacity:0; pointer-events:none;
  background:
    radial-gradient(ellipse 50% 56% at 54% 44%, rgba(18,44,50,0) 0%, rgba(18,44,50,.16) 45%, rgba(18,44,50,.62) 100%),
    linear-gradient(0deg, rgba(14,30,34,.55), rgba(14,30,34,0) 42%);
}
/* Filmkorn: nimmt dem KI-Bild das Glatte und kaschiert die Skalierung des
   1080p-Videos auf große Monitore. Läuft in 4 Schritten, damit es lebt. */
.hero-korn{
  pointer-events:none; opacity:.075; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:220px 220px; animation:kornlauf .5s steps(1) infinite;
}
@keyframes kornlauf{ 0%{background-position:0 0} 25%{background-position:-70px 40px} 50%{background-position:40px -90px} 75%{background-position:-30px -30px} }
/* Veil: warm-dunkel statt Petrol, damit das Holz warm bleibt */
.hero-veil{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(30,24,18,.78) 0%, rgba(30,24,18,.34) 52%, rgba(30,24,18,0) 100%),
    linear-gradient(0deg, rgba(30,24,18,.66), transparent 48%);
}
.hero-copy{
  position:absolute; z-index:5; left:clamp(20px,5vw,72px); right:24px; bottom:11vh; bottom:11svh;
}
.hero-copy > *{ max-width:620px; }
/* Ab Desktop wieder auf einer Linie mit Logo/Footer (User-Entscheidung
   17.09.2026, nachdem die freistehende Variante zwischenzeitlich probiert
   wurde) — gleiche zentrierte Breite wie .wrap, statt fester Nahtabstand. */
@media (min-width:900px){
  .hero-copy{ left:0; right:0; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }
}
.hero-fahrt h1{ color:#F4F1EA; margin:0 0 22px; text-shadow:0 2px 20px rgba(20,14,8,.55), 0 1px 3px rgba(20,14,8,.4); }
@media (min-width:900px){ .hero-fahrt h1{ font-size:clamp(2.4rem,5.4vw,4.6rem); } }
.hero-fahrt h1 .hl{ color:var(--anchor-lift); }
.eyebrow--hell{ color:var(--anchor-lift); text-shadow:0 1px 10px rgba(20,14,8,.5); }
.eyebrow--hell::before{ background:var(--anchor-lift); }
/* Mehr Präsenz für "Für Coaches, Therapeuten & Begleiter": größer, kräftiger
   und heller als der übrige, gedeckte Sand-Ton — mit leichtem Leuchten, damit
   es sich vom dunklen Hero-Bild abhebt. User-Entscheidung nach A/B-Vorschau
   (18.09.2026): Variante "Strich davor", nicht die Chip-Variante. */
.hero-copy .eyebrow--hell{
  font-size:.9375rem; font-weight:800; letter-spacing:.1em;
  color:#F0DFAE; text-shadow:0 1px 12px rgba(20,14,8,.6), 0 0 22px rgba(240,223,174,.25);
}
.hero-copy .eyebrow--hell::before{
  width:30px; height:2px; background:#F0DFAE;
  box-shadow:0 0 8px rgba(240,223,174,.5);
}
.hero-lede{ font-size:1.12rem; color:#EDEDF3; max-width:50ch; margin:0 0 28px; text-shadow:0 1px 16px rgba(20,14,8,.55), 0 1px 2px rgba(20,14,8,.35); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:28px; }
.btn-ghost{ border-color:rgba(237,237,243,.38); color:#EDEDF3; background:transparent; }
.btn-ghost:hover{ border-color:#F4F1EA; background:rgba(255,255,255,.08); }
.hero-scrollhint{
  position:absolute; z-index:6; left:50%; bottom:6vh; bottom:6svh; translate:-50% 0;
  font-size:.74rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(244,241,234,.83); text-shadow:0 0 16px rgba(244,241,234,.65), 0 1px 10px rgba(20,14,8,.5);
  display:flex; align-items:center; gap:10px;
}
.hero-scrollhint i{ width:1px; height:34px; background:linear-gradient(var(--anchor-lift),transparent); display:block; animation:scrollhint 1.6s ease-in-out infinite; box-shadow:0 0 8px 1px rgba(207,195,164,.7); }
/* Lade-Punkt: erscheint nur, solange das Video noch nicht spielbereit ist (script.js
   entfernt .is-ready wieder). Verhindert, dass die Bühne beim Losscrollen auf
   langsamen Verbindungen "kaputt" wirkt, weil noch nichts scrubbt. */
.hero-fahrt:not(.is-ready) .hero-lade{
  position:absolute; z-index:7; left:50%; bottom:6vh; bottom:6svh; translate:-50% 0;
  display:flex; align-items:center; gap:9px; font-size:.74rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:rgba(237,237,243,.75);
}
.hero-lade::before{ content:"Lädt"; }
.hero-lade i{
  width:14px; height:14px; border-radius:50%; border:1.5px solid rgba(237,237,243,.3);
  border-top-color:var(--anchor-lift); animation:lade-dreh .8s linear infinite;
}
.hero-fahrt.is-ready .hero-lade{ display:none; }
@keyframes lade-dreh{ to{ transform:rotate(360deg); } }
@keyframes scrollhint{ 50%{ translate:0 6px; opacity:.4; } }
/* Schluss links unten — gleiche Kante wie die Headline am Anfang; dort ist
   es nach der Abdunklung am ruhigsten. */
.hero-schluss{ position:absolute; z-index:6; left:0; right:0; bottom:11vh; bottom:11svh; opacity:0; }
.hero-schluss > *{ max-width:460px; }
.hero-schluss h2{ color:#F4F1EA; font-size:clamp(1.5rem,2.8vw,2.2rem); margin:0 0 18px; text-shadow:0 2px 18px rgba(0,0,0,.45); }

/* Header über dem dunklen Video: transparent, helle Schrift. script.js setzt
   .over-hero, solange die Bühne im Bild ist; danach der normale helle Header. */
.site-header.over-hero{ background:transparent; backdrop-filter:none; border-bottom-color:transparent; }
.site-header.over-hero .logo-text, .site-header.over-hero .main-nav a{ color:#F4F1EA; }
.site-header.over-hero .logo-text em{ color:rgba(244,241,234,.6); }
.site-header.over-hero .nav-toggle{ border-color:rgba(244,241,234,.35); }
.site-header.over-hero .nav-toggle span{ background:#F4F1EA; }
.site-header.over-hero .header-cta{ background:var(--anchor-lift); color:var(--anchor-deep); }
.site-header.over-hero .header-cta:hover{ background:#E2D7BE; }

/* Mobile: kein <video> mehr (script.js) — selbst reine, nicht gesprungene
   Wiedergabe ruckelte auf echter Handy-Hardware trotz aller Optimierungen
   (Sync-Fix, Sprung-Drosselung, GPU-Transform, abgeschaltetes Blending), und
   ein statisches Bild allein wirkte "nichts Halbes, nichts Ganzes". Jetzt
   eine 24-Bild-Sequenz, per Scroll umgeschaltet — läuft im Test spürbar
   flüssiger als jedes Video, weil keine Dekodierung mehr stattfindet.
   Scrollstrecke an den bestätigten Prototyp angeglichen (180vh). Gleiche
   Bruchstelle wie die Bildquelle in script.js (<900px). */
@media (max-width:899px){
  .hero-fahrt{ height:211vh; height:211svh; }   /* Scrollstrecke = Tempo: 180vh war mit einem Wisch durch, 300vh → 260vh (je ~20% zu langsam). Ab hier abschnittsweise statt pauschal: Start (Bild 1-4) und Ende (Bild 18-36) behalten ihr Tempo aus 228vh, nur der Schwenk-Teil (Bild 4-18) läuft 40% schneller — Breakpoints B1/B2/B3 in script.js. Ergebnis real ~14% kürzere Strecke, aber konzentriert in der Mitte. svh-Fallback gegen das Scroll-Spring-Problem, siehe Basisregel oben. */
  /* Mobile-Compositing: jede mix-blend-mode-Ebene über dem Bild zwingt den
     Handy-Chip zum Software-Blending statt direktem Durchreichen — bei
     3-facher Pixeldichte spürbar. Filmkorn und seitenweites Grain hier aus. */
  .hero-korn{ display:none; }
  .grain{ display:none; }
  /* "Sticky" hier bewusst per Hand nachgebaut statt CSS position:sticky:
     Safari/Chrome auf dem Handy verschlucken bei schneller Scroll-
     Richtungsumkehr innerhalb der sehr hohen (211%) Sticky-Sektion kurz das
     Repaint — sichtbarer Sprung + kurzer weißer Rand (User-Feedback,
     reproduzierbar). fixed+absolute statt sticky umgeht diese Browser-Klasse
     von Bugs komplett, script.js schaltet per scrollLesen() zwischen beiden
     um (Klasse .hero-buehne--ende ab dem Punkt, wo die Sektion "loslässt"). */
  /* Höhe bewusst NICHT gesetzt (weder vh/svh noch JS-Pixel): bottom:0 auf
     einem position:fixed-Element folgt dem echten sichtbaren Viewport ohne
     JS-Umweg, während sich die Adressleiste ein-/ausblendet. Im --ende-
     Zustand (Bühne hat sich vom Fixed gelöst) setzt script.js dagegen eine
     feste Pixelhöhe: dort ist sie nur einmalig relevant, und ohne Höhe würde
     die absolut positionierte Bühne mangels eigenem Inhaltsfluss auf 0
     zusammenfallen. */
  .hero-buehne{ position:fixed; top:0; left:0; right:0; bottom:0; height:auto; }
  .hero-buehne.hero-buehne--ende{ position:absolute; top:auto; bottom:0; }
  /* Weißer Streifen unten beim Ein-/Ausblenden der Browser-Leiste: der
     Browser füllt ihn mit der Dokument-Grundfarbe — script.js führt die
     deshalb pro Sektion mit (data-grundfarbe in index.html, Abschnitt
     „Dokument-Grundfarbe"). Ein 160px-Überstand per box-shadow war
     wirkungslos: die Seite darf in diesem Frame dort gar nichts malen. */
  /* Höhe der Fahrt setzt script.js auf Mobile in Pixeln (Toolbar-Resizes
     ändern sonst die Seitenhöhe, siehe dort). Innere Positionen deshalb
     in % der Bühne statt in Viewport-Einheiten — die schwankten mit. */
  .hero-schluss{ bottom:11%; }
  .hero-scrollhint, .hero-fahrt:not(.is-ready) .hero-lade{ bottom:6%; }
  /* Startbild-Text höher gesetzt (User-Feedback: großer leerer, nur
     abgedunkelter Bildraum über dem Titel) — 24% statt 11% vom unteren Rand,
     lässt oben mehr vom Bild frei UND unten noch sichtbar. */
  /* Kurze Bildschirme (dauerhaft sichtbare Android-Tastenleiste + Browser-
     Leiste unten, User-Feedback 27.09.2026): unten verankert wuchs der Text
     nach oben in den Header. Jetzt füllt .hero-copy die Fläche zwischen
     Header (75px) und Unterkante; der Abstand unten (::after, 24%) schrumpft
     zuerst, bevor der Text je unter den Header rutschen kann. min-height
     hält die Buttons über dem „Scrollen"-Hinweis (6% + ~34px). */
  .hero-copy{ top:88px; bottom:0; display:flex; flex-direction:column; }
  .hero-copy::before{ content:""; flex:1 1 0; }
  .hero-copy::after{ content:""; flex:0 1 24%; min-height:calc(6% + 16px); }
  /* KEIN backdrop-filter auf Mobile. Der 14px-Blur auf dem klebenden Header
     zwingt den Handy-Chip, bei jedem Scroll-Frame den Inhalt dahinter neu zu
     weichzeichnen. Bei Scroll-Richtungsumkehr fällt dadurch ein Frame aus:
     kurz weißer (ungezeichneter) Rand, dann Scroll-Korrektur = "Sprung".
     Über dem Hero ist der Blur ohnehin aus (.over-hero) — deshalb trat der
     Fehler NUR in den Sektionen darunter auf (User-Feedback, reproduzierbar).
     Ersatz: etwas deckenderer Hintergrund, damit der Header lesbar bleibt. */
  .site-header{ backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(250,247,242,.95); }
  .site-header.over-hero{ background:transparent; }
  .ref-thumb-inner, .ref-thumb--sv .ref-thumb-inner{ backdrop-filter:none; -webkit-backdrop-filter:none; }
}

/* Sehr kurze Handy-Höhen: Text etwas kompakter, damit alles über dem
   Scroll-Hinweis und unter dem Header Platz hat. */
@media (max-width:899px) and (max-height:700px){
  .hero-copy .eyebrow--hell{ margin-bottom:12px; }
  .hero-fahrt h1{ margin-bottom:14px; }
  .hero-lede{ font-size:1rem; margin-bottom:20px; }
  .hero-actions{ gap:10px; margin-bottom:20px; }
}
@media (max-width:899px) and (max-height:580px){ .hero-scrollhint{ display:none; } }

@media (max-width:680px){
  .hero-veil{
    background:
      linear-gradient(180deg, rgba(24,19,14,.72) 0%, rgba(24,19,14,.4) 46%, rgba(24,19,14,.66) 100%),
      linear-gradient(90deg, rgba(30,24,18,.5), rgba(30,24,18,.5));
  }
}

@media (prefers-reduced-motion:reduce){
  .hero-fahrt{ height:auto; }
  .hero-buehne{ position:relative; }
  .hero-korn, .hero-scrollhint i{ animation:none; }
  .hero-scrollhint, .hero-schluss{ display:none; }
}

/* ---------- Marquee ---------- */
.marquee{
  overflow:hidden; border-block:1px solid var(--line); padding:15px 0;
  background:var(--paper);
}
.marquee-track{
  display:flex; gap:26px; white-space:nowrap; width:max-content;
  animation:slide 42s linear infinite;
  font-size:.85rem; font-weight:600; color:var(--muted); letter-spacing:.03em;
}
.marquee-track span:nth-child(even){ color:var(--petrol); }
/* Die Liste steht vier Mal im HTML — verschoben wird deshalb um ein Viertel,
   also um genau einen Durchgang. Bei -50% würde die Spur zwei Durchgänge weit
   laufen und am Rücksprung eine Lücke zeigen. Die 42s ergeben zusammen mit
   dem Viertel dasselbe Tempo wie zuvor. */
@keyframes slide{ to{ transform:translateX(-25%); } }

/* ---------- Schmerzpunkte ---------- */
.pain-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media (max-width:680px){ .pain-grid{ grid-template-columns:1fr; } }
/* Leicht versetzt und minimal gedreht statt im starren 2x2-Raster. transform
   ist hier frei verfuegbar, weil die Einblendanimation ueber die eigenstaendige
   translate-Eigenschaft laeuft — genau deshalb wurde sie damals umgestellt. */
.pain-grid{ align-items:start; }
.pain-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  padding:30px 28px; position:relative;
  transition:transform .4s var(--ease);
}
.pain-card:nth-child(1){ transform:rotate(-.45deg); }
.pain-card:nth-child(2){ transform:translateY(26px) rotate(.5deg); }
.pain-card:nth-child(3){ transform:rotate(.35deg); }
.pain-card:nth-child(4){ transform:translateY(26px) rotate(-.4deg); }

/* Die vierte Karte — Impressum und Datenschutz — als einzige in Petrol.
   Die Textfarben stehen weiter unten, NACH .pain-card .quote: beide Regeln
   haben dieselbe Spezifitaet, also entscheidet die Reihenfolge. Stehen sie
   hier oben, gewinnt das dunkle var(--ink) und das Zitat faellt auf
   Kontrast 1.4 — unlesbar auf dem dunklen Grund. */
.pain-card--akzent{ background:var(--anchor); border-color:var(--anchor); }
/* Wasserzeichen-Versuch (Kalenderblock, Smartphone, Blatt+Stift, Paragraph) am
   10.09.2026 wieder entfernt: bei der nötigen blassen Deckkraft war auf den
   ersten Blick nicht erkennbar, was die Motive zeigen sollen. Die vier
   fertigen Grafiken liegen weiter unter assets/icons/wm-*.webp bereit, falls
   sich später ein anderer Ansatz dafür findet (z.B. deutlich größer/klarer,
   oder als Aufmacher statt Verzierung). Siehe [[wirkraum-icon-stil]]. */
/* Groesser gesetzt als die uebrigen Kartentexte der Seite (Add-ons .85rem,
   Zielgruppen .93rem, USP .99rem). Diese vier Karten sind der emotionale
   Einstieg, stehen weit oben und tragen nur zwei kurze Zeilen — hier darf
   der Text die Flaeche auch fuellen. */
.pain-card p{ margin:0; color:var(--ink-soft); font-size:1.06rem; line-height:1.6; }
.pain-card .quote{
  font-family:var(--serif); font-size:clamp(1.2rem,1.55vw,1.34rem); color:var(--ink);
  line-height:1.34; margin-bottom:14px;
  font-variation-settings:"SOFT" 40,"WONK" 1; font-style:italic;
  display:flow-root;
}
/* Handgezeichnetes Zitatzeichen. Bewusst GEFLOATET statt absolut positioniert:
   so fliesst der Zitattext darum herum und kann nie damit kollidieren, egal
   wie lang er wird — und kurze Zitate buessen keine Zeilenbreite ein, wie es
   bei einem reservierten Abstand der Fall waere. Das flow-root oben haelt den
   Float im Zitat, damit er nicht in die Antwort darunter laeuft. */
.pain-card .quote::before{
  content:""; float:right; width:52px; height:44px;
  margin:-2px -14px 6px 16px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 46'%3E%3Cg fill='none' stroke='%232C555C' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M14.2 15.6c4.4-.3 7.6 2.6 7.8 6.9.2 4.3-2.8 7.5-7 7.6-4.1.1-7.2-2.9-7.3-7 0-4 3-7.3 6.5-7.5Z'/%3E%3Cpath d='M21.8 23.4c.6 7.2-2.6 12.9-8.8 15.8'/%3E%3Cpath d='M40.1 15.4c4.4-.2 7.6 2.7 7.7 7 .1 4.3-2.9 7.4-7.1 7.5-4.1.1-7.1-3-7.2-7 0-4 3.1-7.3 6.6-7.5Z'/%3E%3Cpath d='M47.7 23.3c.5 7.2-2.7 12.8-8.9 15.7'/%3E%3C/g%3E%3C/svg%3E");
  opacity:.17;
}
/* Auf der dunklen vierten Karte waere Petrol auf Petrol unsichtbar. */
.pain-card--akzent .quote::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 46'%3E%3Cg fill='none' stroke='%23CFC3A4' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M14.2 15.6c4.4-.3 7.6 2.6 7.8 6.9.2 4.3-2.8 7.5-7 7.6-4.1.1-7.2-2.9-7.3-7 0-4 3-7.3 6.5-7.5Z'/%3E%3Cpath d='M21.8 23.4c.6 7.2-2.6 12.9-8.8 15.8'/%3E%3Cpath d='M40.1 15.4c4.4-.2 7.6 2.7 7.7 7 .1 4.3-2.9 7.4-7.1 7.5-4.1.1-7.1-3-7.2-7 0-4 3.1-7.3 6.6-7.5Z'/%3E%3Cpath d='M47.7 23.3c.5 7.2-2.7 12.8-8.9 15.7'/%3E%3C/g%3E%3C/svg%3E"); opacity:.34;
}

/* Textfarben der Akzentkarte — bewusst hier unten, siehe Hinweis oben.
   Gemessen auf rgb(28,59,65): Zitat 11.9, Antwort 6.2 (Grenzwert 4.5). */
.pain-card--akzent .quote{ color:var(--anchor-text); }
.pain-card--akzent p:not(.quote){ color:rgba(240,239,226,.72); }
/* Groesser gesetzt und mit gezeichneter Linie darueber — die Zeile ist der
   Ruhepunkt nach vier Problemsaetzen und darf das auch zeigen. Die 26px im
   margin-top gleichen den Versatz der zweiten Kartenreihe aus. */
.pain-note{
  margin-top:calc(clamp(34px,4vw,52px) + 26px); text-align:center;
  font-family:var(--serif); font-size:clamp(1.5rem,3.2vw,2.15rem); line-height:1.35;
  max-width:30ch; margin-inline:auto; color:var(--ink);
  padding-top:44px; position:relative;
}
.pain-note::before{
  content:""; position:absolute; left:50%; translate:-50% 0; top:0;
  width:150px; height:6px;
  background:no-repeat center/100% 6px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 6' preserveAspectRatio='none'%3E%3Cpath d='M2 3.4C30 1.7 58 4.5 86 3.0c26-1.4 48 1.9 72 .4' fill='none' stroke='%23BC6B45' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

@media (max-width:680px){
  /* Einspaltig ergaebe der Versatz nur Luecken — die leichte Drehung bleibt. */
  .pain-card:nth-child(2){ transform:rotate(.5deg); }
  .pain-card:nth-child(4){ transform:rotate(-.4deg); }
  .pain-note{ margin-top:clamp(34px,4vw,52px); }
}

/* ---------- Zielgruppen ---------- */
.aud-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); gap:18px; }
.aud-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  padding:28px 26px; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.aud-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:var(--petrol); }
/* Handgezeichnete Icons statt Unicode-Zeichen (bis 10.09.2026: ◐ ∿ ✶ ◇ —
   Schriftglyphen, die auf jedem System anders aussehen und mit dem übrigen
   Bildstil nichts zu tun hatten). Kein Farbkästchen mehr darunter, die Linie
   steht frei — passend zu den Icons in „Warum wir". Auf gleiche optische
   Fläche gebracht (44x44), nicht auf gleiche Höhe, siehe [[wirkraum-icon-stil]]. */
.aud-icon{
  display:block; object-fit:contain; object-position:left bottom;
  height:44px; margin-bottom:16px;
}
/* Bewusst gleiche Höhe statt gleicher Fläche — anders als bei den USP-Icons
   (die stehen einzeln untereinander), stehen diese vier nebeneinander in
   einer Zeile. Da vergleicht das Auge direkt, gleiche Höhe zählt mehr als
   gleiche Fläche. (Erster Versuch nahm gleiche Fläche bei falscher
   Zielhöhe an — dadurch schrumpfte object-fit:contain die breite Sonne
   zusätzlich auf 71% ihrer Box, während die anderen ~100% füllten.) */
.aud-icon--coach{ width:47px; }
.aud-icon--blatt{ width:29px; }
.aud-icon--sonne{ width:87px; }
.aud-icon--pfeil{ width:45px; }
.aud-card h3{ margin-bottom:9px; }
.aud-card p{ margin:0; font-size:.93rem; color:var(--muted); }

/* ---------- USPs ---------- */
/* ---------- Anker: dunkler Abschnitt (Hebel B) ----------
   Volle Breite in dunklem Waldgrün. Alles darin muss umgefärbt werden —
   Überschriften, Fließtext, Trennlinien, Ziffern und die kleinen Marker.
   Die Klasse ersetzt .section-tint, nicht .section. */
.section-anchor{
  background:
    radial-gradient(780px 420px at 88% 4%, rgba(207,195,164,.14), transparent 58%),
    linear-gradient(162deg, var(--anchor) 0%, var(--anchor-deep) 100%);
  color:var(--anchor-text);
}
.section-anchor h2,
.section-anchor h3{ color:var(--anchor-text); }
.section-anchor .eyebrow{ color:var(--anchor-lift); }
.section-anchor .eyebrow::before{ background:var(--anchor-lift); opacity:.6; }
.section-anchor .section-sub{ color:rgba(240,239,226,.66); }
.section-anchor .usp-list{ border-top-color:rgba(240,239,226,.16); }
.section-anchor .usp-row{ border-bottom-color:rgba(240,239,226,.16); }
.section-anchor .usp-row p{ color:rgba(240,239,226,.66); }
/* Terracotta verschwindet auf Dunkelgrün fast — die Ziffern bekommen den
   hellen Anker-Ton, damit sie noch lesbar sind. */
.section-anchor .usp-num{ color:var(--anchor-lift); }
.section-anchor .usp-tag{
  color:var(--anchor-deep); background:var(--anchor-lift);
}

.usp-list{ display:grid; gap:0; border-top:1px solid var(--line); }
.usp-row{
  display:grid; grid-template-columns:76px 1fr 1.15fr; gap:clamp(16px,3vw,40px);
  padding:30px 0; border-bottom:1px solid var(--line); align-items:start;
}
/* line-height:1 entfernt die unsichtbare Zeilendurchschuss-Fläche über/unter
   dem Ziffern-Glyphen — sonst wirkt der Abstand zum Icon darunter optisch
   viel größer als der gesetzte margin-top, weil die Zahl sonst in einer
   ~28px hohen Zeilenbox mit viel Luft steht, obwohl der sichtbare Glyph nur
   ~17px hoch ist. */
.usp-num{
  font-family:var(--serif); font-size:1.05rem; color:var(--terra);
  padding-top:3px; line-height:1;
}
/* Icon unter der Ziffer, mit Flächen- statt Höhenangleich: gleiche Höhe
   allein würde ein breites Icon (zwei Personen) massiver wirken lassen als
   ein schmales (Schild) — deshalb hat jedes Icon eine eigene, so berechnete
   Breite, dass Breite × Höhe überall etwa gleich ist. object-fit:contain mit
   object-position:left top hält jedes Icon dabei linksbündig zur Ziffer und
   im selben senkrechten Band, unabhängig von seinem Seitenverhältnis. */
.usp-icon{
  height:40px; margin-top:13px;
  display:block; object-fit:contain; object-position:left top;
}
.usp-row:nth-of-type(1) .usp-icon{ width:37px; }
.usp-row:nth-of-type(2) .usp-icon{ width:30px; }
.usp-row:nth-of-type(3) .usp-icon{ width:34px; }
.usp-row:nth-of-type(4) .usp-icon{ width:33px; }
.usp-row:nth-of-type(5) .usp-icon{ width:40px; }
.usp-row:nth-of-type(6) .usp-icon{ width:33px; }
.usp-row:nth-of-type(7) .usp-icon{ width:33px; }
.usp-row h3{ font-size:1.24rem; }
.usp-row p{ margin:0; color:var(--ink-soft); font-size:.99rem; }
.usp-tag{
  display:inline-block; margin-top:12px; font-size:.73rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--petrol-deep);
  background:var(--petrol-tint); padding:5px 12px; border-radius:999px;
}

/* ---------- Referenzen ---------- */
.ref-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr)); gap:22px; }
.ref-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.ref-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); }
.ref-thumb{
  aspect-ratio:16/10; position:relative; display:grid; place-items:center; padding:22px;
  background:linear-gradient(160deg,var(--petrol-tint),var(--linen-deep));
  border-bottom:1px solid var(--line); overflow:hidden;
}
.ref-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.ref-thumb::after{           /* leichter Schleier, damit die Textkarte lesbar bleibt */
  content:""; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(250,247,242,.35), rgba(36,31,27,.22));
}
.ref-thumb-inner{
  position:relative; z-index:2;
  background:rgba(255,253,250,.93); backdrop-filter:blur(3px);
  border-radius:12px; width:100%; padding:22px 20px;
  box-shadow:var(--shadow-lift); text-align:center;
}
.ref-thumb-inner .t{ font-family:var(--serif); font-size:1.08rem; line-height:1.2; margin-bottom:8px; }
.ref-thumb-inner .s{ font-size:.72rem; color:var(--muted); }
.ref-thumb-inner .b{
  margin-top:14px; height:7px; border-radius:999px; background:var(--petrol); width:46%; margin-inline:auto;
}

/* Karte 1: in den echten Farben von sensitiv-verbunden.de (Navy/Gold).
   Kann später durch einen echten Screenshot ersetzt werden. */
.ref-thumb--sv{ background:linear-gradient(158deg,#1E2747,#0E1324); }
.ref-thumb--sv::after{ background:none; }
.ref-thumb--sv .ref-thumb-inner{
  background:rgba(16,21,40,.82); border:1px solid rgba(212,175,110,.28); backdrop-filter:blur(2px);
}
.ref-thumb--sv .t{ color:#EFE3C8; }
.ref-thumb--sv .s{ color:rgba(239,227,200,.62); }
.ref-thumb--sv .b{ background:#D4AF6E; }
.ref-body{ padding:22px 24px 26px; flex:1; display:flex; flex-direction:column; }
.ref-body h3{ font-size:1.1rem; margin-bottom:6px; }
.ref-body p{ font-size:.9rem; color:var(--muted); margin:0 0 16px; }
.ref-flag{
  align-self:flex-start; font-size:.68rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; padding:5px 11px; border-radius:999px; margin-bottom:12px;
}
.flag-live{ background:var(--petrol-tint); color:var(--petrol-deep); }
.flag-demo{ background:var(--linen-deep); color:var(--muted); border:1px solid var(--line); }
.ref-link{
  margin-top:auto; font-size:.86rem; font-weight:700; color:var(--terra-text); text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
}
.ref-link:hover{ text-decoration:underline; }
.ref-meta{ font-size:.78rem; color:var(--muted); margin:-4px 0 10px; }
.ref-link--sub{ margin-top:6px; font-weight:600; font-size:.8rem; color:var(--muted); }

/* Scroll-Vorschau: Screenshot in einem schlichten Browser-Rahmen, der
   ruhig auf und ab scrollt (wie eine langsam durchgeblätterte Seite). */
.ref-browser{
  display:block; background:var(--paper); border:1px solid var(--line); border-radius:0;
  border-bottom:1px solid var(--line); overflow:hidden; position:relative;
}
.ref-browser-bar{
  display:flex; align-items:center; gap:6px; height:28px; padding:0 12px;
  background:var(--linen-deep); border-bottom:1px solid var(--line);
}
.ref-browser-bar i{
  width:8px; height:8px; border-radius:50%; background:var(--line); flex:none;
}
.ref-browser-bar i:nth-child(1){ background:var(--terra-tint); border:1px solid var(--terra); opacity:.55; }
.ref-browser-bar i:nth-child(2){ background:var(--petrol-tint); border:1px solid var(--petrol); opacity:.5; }
.ref-browser-bar i:nth-child(3){ background:var(--line); }
.ref-url{
  margin-left:8px; font-size:.7rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ref-screen{
  display:block; aspect-ratio:16/10; overflow:hidden; position:relative; container-type:size;
}
.ref-scroll{ width:100%; height:auto; display:block; will-change:transform; }
.ref-screen::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:40px; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.06));
}
@keyframes ref-durchblaettern{
  0%, 8%    { transform:translateY(0); }
  46%, 58%  { transform:translateY(calc(-100% + 100cqh)); }
  96%, 100% { transform:translateY(0); }
}
.ref-card--scroll.is-playing .ref-scroll{
  animation:ref-durchblaettern 22s cubic-bezier(.45,.05,.35,1) infinite;
}
.ref-card--scroll:nth-child(2).is-playing .ref-scroll{ animation-delay:-7s; }
.ref-card--scroll:nth-child(3).is-playing .ref-scroll{ animation-delay:-14s; }
.ref-browser:hover .ref-scroll{ animation-play-state:paused; }
.ref-browser:focus-visible{ outline:2px solid var(--petrol); outline-offset:-2px; }
@media (prefers-reduced-motion:reduce){
  .ref-card--scroll.is-playing .ref-scroll{ animation:none; transform:none; }
}
@media (max-width:640px){
  .ref-grid{ grid-template-columns:1fr; }
}

/* ---------- Testimonial Louisa ---------- */
.stimme{
  margin:clamp(56px,8vw,104px) 0 0; padding-top:clamp(40px,6vw,64px);
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:.38fr .62fr; gap:clamp(28px,5vw,56px); align-items:center;
}
.stimme-portrait-wrap{ position:relative; }
.stimme-portrait{
  aspect-ratio:1; width:100%; max-width:300px; margin-inline:auto;
  border-radius:58% 42% 50% 50% / 50% 55% 45% 50%;
  overflow:hidden; box-shadow:var(--shadow-deep); position:relative; z-index:2;
}
.stimme-portrait img{ width:100%; height:100%; object-fit:cover; display:block; }
.stimme-lineart{
  position:absolute; z-index:1; left:-16%; top:-12%; width:78%; aspect-ratio:1;
  transform:rotate(-14deg); pointer-events:none;
}
.stimme-wave{
  display:block; width:min(180px,60%); height:auto; margin:22px auto 0;
  overflow:visible;
}
.stimme-wave path{
  stroke-dasharray:260; stroke-dashoffset:260;
}
.js .reveal.in .stimme-wave path{
  animation:stimme-wave-draw 1.6s var(--ease) forwards;
}
@keyframes stimme-wave-draw{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion:reduce){
  .stimme-wave path{ stroke-dashoffset:0; animation:none; }
}
.stimme-body{ position:relative; }
.stimme-quote-mark{
  display:block; font-family:var(--serif); font-size:4.5rem; line-height:.6; color:var(--terra);
  margin-bottom:.9rem;
}
.stimme-zitat{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.35rem,2.4vw,1.85rem); line-height:1.35;
  max-width:34ch; color:var(--ink);
}
.stimme-body blockquote{ margin:0; }
.stimme-body figcaption{ margin-top:24px; display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.stimme-name{ font-weight:700; font-size:1.15rem; color:var(--ink); }
.stimme-rolle{ font-size:1rem; line-height:1.45; color:var(--ink); opacity:.8; }
.stimme-body .ref-link{
  margin-top:12px; font-size:1rem; text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:4px;
}
.stimme-body .ref-link:hover{ color:var(--terra); }
@media (max-width:900px){
  .stimme{ grid-template-columns:1fr; text-align:left; }
  .stimme-portrait{ max-width:160px; margin-inline:0; }
  .stimme-lineart{ left:-10%; top:-10%; width:70%; }
  .stimme-wave{ margin:16px 0 0; }
}

/* ---------- Pakete ---------- */
/* Handgezeichnete Collage in der freien Flaeche neben der zentrierten
   Ueberschrift. Wie bei den Add-ons liegt sie hinter dem Inhalt und endet
   oberhalb des Kartenrasters — die Preiskarten haben einen deckenden
   Hintergrund und wuerden sie sonst anschneiden. */
#pakete{ overflow:hidden; }
#pakete .wrap{ position:relative; z-index:1; }
.deko-pakete{ top:52px; right:-40px; width:min(330px,30vw); opacity:.15; }
@media (max-width:900px){
  .deko-pakete{ width:42vw; right:-10vw; opacity:.10; }
}

.price-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));
  gap:20px; align-items:start;
}
.price-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:34px 30px 32px; display:flex; flex-direction:column; position:relative;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.price-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); }
/* Hebel 1 — die mittlere Karte hebt sich ab, ohne zu drängen. Bewusst über
   Höhe statt über Farbe: ein spürbar tieferer Schatten und ein kleiner Versatz
   nach oben. Der Farbschleier bleibt so blass, dass er nur als Wärme wirkt.
   Kein knalliger Block, der nach Verkaufsdruck aussieht. */
.price-card--featured{
  border-color:rgba(44,85,92,.38);
  background:linear-gradient(180deg,var(--petrol-tint),var(--paper) 22%);
  box-shadow:var(--shadow-deep);
  transform:translateY(-10px);
}
.price-card--featured:hover{ transform:translateY(-15px); }
/* Der Versatz ergibt nur Sinn, wenn alle drei Karten nebeneinander stehen.
   Bei zwei Spalten sitzt die mittlere Karte oben rechts und der Versatz sähe
   willkürlich aus, einspaltig erzeugt er nur eine schiefe Lücke. Drei Spalten
   greifen ab rund 960 px. */
@media (max-width:959px){
  .price-card--featured,
  .price-card--featured:hover{ transform:none; }
}
/* Hebel 2.2 — Badge in Terracotta statt Petrol. Kleine Fläche, hohe
   Aufmerksamkeit genau dort, wo entschieden wird. */
.price-badge{
  position:absolute; top:-13px; left:30px;
  background:var(--terra-solid); color:#fff; font-size:.68rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:6px 14px; border-radius:999px;
}
.price-card h3{ font-size:1.5rem; margin-bottom:6px; }
.price-tag{ display:flex; align-items:baseline; gap:8px; margin:16px 0 4px; }
.price-tag .amount{ font-family:var(--serif); font-size:2.6rem; line-height:1; }
.price-tag .unit{ font-size:.85rem; color:var(--muted); font-weight:600; }
.price-rate{ font-size:.82rem; color:var(--terra-text); font-weight:700; margin-bottom:20px; }
.price-desc{ font-size:.93rem; color:var(--muted); margin-bottom:0; }
.price-list{ list-style:none; margin:0 0 26px; padding:0; display:grid; gap:11px; }
.price-list li{
  font-size:.93rem; color:var(--ink-soft); padding-left:26px; position:relative; line-height:1.5;
}
.price-list li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:12px; height:6px; border-left:1.8px solid var(--petrol); border-bottom:1.8px solid var(--petrol);
  transform:rotate(-45deg);
}
.price-list li.lead{
  padding-left:0; font-weight:700; color:var(--ink); font-size:.86rem;
  letter-spacing:.02em; padding-top:6px;
}
.price-list li.lead::before{ display:none; }
.price-cta{ margin-top:auto; width:100%; }

.price-foot{
  margin-top:26px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:16px;
}
.foot-card{
  background:var(--paper); border:1px dashed var(--line); border-radius:var(--r-md); padding:22px 24px;
}
.foot-card h4{ font-family:var(--serif); font-size:1.05rem; margin:0 0 6px; }
.foot-card p{ margin:0; font-size:.88rem; color:var(--muted); }

/* ---------- Add-ons ---------- */
/* Zwei handgezeichnete Collagen als Dekoration. Sie liegen HINTER dem Inhalt
   (z-index 0 gegen 1 auf .wrap) und werden an der Sektionskante beschnitten.

   Die Sektion hat nur zwei wirklich freie Zonen: oben rechts neben dem auf
   720px begrenzten Abschnittskopf, und einen Streifen über dem Kartenraster.
   Alles was tiefer als die Rasteroberkante reicht, verschwindet hinter den
   Karten — die haben einen deckenden Hintergrund. Beide Collagen enden
   deshalb oberhalb davon.

   Dass der Ring links den Überschriftentext berührt, ist gewollt; bei 16 %
   bleibt der Text klar lesbar (gemessen). */
#erweiterungen{ overflow:hidden; }
#erweiterungen .wrap{ position:relative; z-index:1; }
.deko{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  height:auto;
}
.deko-tisch{ top:10px; right:-9%; width:min(640px,56vw); opacity:.15; }
/* Der Ring sitzt vollstaendig innerhalb der Sektion — kein Anschnitt an
   irgendeiner Kante, damit alle Objekte des Kranzes zu sehen sind.
   Dass er den Ueberschriftentext ueberlagert, ist gewollt; bei 16 %
   bleibt der Text klar lesbar (gemessen). */
.deko-ring{ top:56px; left:8px; width:min(290px,30vw); opacity:.16; }

@media (max-width:900px){
  /* Schmal wird der Abschnittskopf breiter und das Raster einspaltig — beide
     Collagen zurücknehmen, damit sie dem Text nicht in die Quere kommen. */
  .deko-tisch{ width:74vw; right:-22%; opacity:.10; }
  .deko-ring{ width:42vw; left:6px; top:38px; opacity:.10; }
}

.addon-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); gap:14px; }
.addon{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  padding:20px 22px;
}
.addon h3{ font-family:var(--sans); font-size:.97rem; font-weight:700; margin:0 0 6px; }
.addon p{ margin:0; font-size:.85rem; color:var(--muted); line-height:1.55; }

/* ---------- Ablauf ---------- */
.step-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); gap:26px; }
.step{ position:relative; padding-top:34px; }
.step::before{
  content:""; position:absolute; top:12px; left:0; right:-26px; height:1px;
  background:linear-gradient(90deg,var(--terra-solid),transparent);
}
.step:last-child::before{ right:0; }
/* Hebel 2.3 — gefüllte Ziffernfelder in Terracotta statt blasser Kästchen.
   Die Wiederholung derselben Farbe über vier Schritte erzeugt eine Linie,
   der das Auge folgt, und bringt Rhythmus in einen sonst flachen Abschnitt. */
.step-num{
  position:absolute; top:0; left:0; width:24px; height:24px; border-radius:50%;
  background:var(--terra-solid); color:#fff; display:grid; place-items:center;
  font-size:.72rem; font-weight:700;
}
.step h3{ font-size:1.14rem; margin-bottom:8px; }
.step p{ margin:0; font-size:.92rem; color:var(--muted); }

/* ---------- FAQ ---------- */
/* ---------- Gezeichnete Trennlinie ----------
   Eine leicht schwankende Linie statt eines geraden 1px-Rahmens — dieselbe
   Handschrift wie die Icons. Als Hintergrundbild, weil ein border das nicht
   kann; preserveAspectRatio="none" lässt sie auf jede Breite mitwachsen,
   ohne dass die Strichstärke mitskaliert (vector-effect wäre hier wirkungslos,
   da das SVG als Bild und nicht als Dokument geladen wird — deshalb ist die
   Höhe mit 6px fix und nur die Breite dehnt sich). */
.faq{ max-width:820px; margin-inline:auto; position:relative; padding-top:6px; }
.faq::before{ content:""; position:absolute; left:0; right:0; top:0; }
.faq-item{ position:relative; padding-bottom:6px; }
.faq-item::after{ content:""; position:absolute; left:0; right:0; bottom:0; }
.faq::before, .faq-item::after, .footer-top::after{
  height:6px;
  background:no-repeat center/100% 6px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 6' preserveAspectRatio='none'%3E%3Cpath d='M2 3.4C60 1.6 118 4.6 176 3.1c58-1.4 116 1.7 174 .4 58-1.3 116 2 174 .7 26-.6 50 .3 74-.8' fill='none' stroke='%23E4DBCF' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.faq-q{
  width:100%; background:none; border:0; text-align:left; cursor:pointer;
  padding:24px 44px 24px 0; font-family:var(--serif); font-size:1.1rem; color:var(--ink);
  position:relative; line-height:1.3;
}
/* Der Aufklapp-Haken ist bewusst KEIN gedrehtes Rechteck mehr, sondern eine
   leicht schwankende gezeichnete Linie — dieselbe Handschrift wie die Icons.
   Als Hintergrundbild statt Rahmenlinien, damit die Unregelmäßigkeit erhalten
   bleibt; gedreht wird weiterhin per transform. */
.faq-q::after{
  content:""; position:absolute; right:4px; top:50%; width:19px; height:19px;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M8.6 12.7c2.6 2.1 5.1 4.5 7.3 7.4 2.5-2.7 4.9-5.2 7.6-7.2' fill='none' stroke='%232C555C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transform:translateY(-50%); transition:transform .35s var(--ease);
}
.faq-item.open .faq-q::after{ transform:translateY(-50%) rotate(180deg); }
.faq-a{ overflow:hidden; transition:max-height .45s var(--ease); }
.js .faq-a{ max-height:0; }
.faq-a p{ padding:0 40px 24px 0; margin:0; color:var(--ink-soft); font-size:.97rem; }

/* ---------- Über uns ---------- */
/* Das Linienmotiv ragt absichtlich über die Bildkante hinaus (siehe
   .about-lineart) und braucht dafür einen ungeclippten Wrapper — dadurch kann
   es aber auch über den rechten Seitenrand hinausragen. overflow:hidden auf
   dem gesamten Abschnitt fängt das ab, genau wie beim Hero. */
#ueber-uns{ overflow:hidden; }
.about-grid{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,64px); align-items:center;
}
/* Wrapper ohne overflow:hidden — trägt das Linienmotiv, das bewusst über den
   Bildrand hinausragen soll. .about-portrait darunter clippt weiterhin Bild,
   Korn und Farbton auf den 4:5-Rahmen; wären beide Aufgaben (Bild zuschneiden
   UND Motiv überlappen lassen) am selben Element, würde overflow:hidden das
   Motiv exakt an der Kante abschneiden, an der es sichtbar sein soll. */
.about-portrait-wrap{ position:relative; }
/* Ohne Rand, dafür tieferer Schatten und Farbangleichung — ein Stockfoto mit
   neutralem Weißabgleich wirkt sonst wie ein Fremdkörper neben dem warmen
   Leinen. ::after zieht das Bild leicht ins Terracotta/Petrol, ::before legt
   dasselbe Filmkorn wie im Hero darüber, damit das Foto zur Seite gehört
   statt nur auf ihr zu liegen. */
.about-portrait{
  aspect-ratio:4/5; border-radius:var(--r-lg); position:relative;
  background:linear-gradient(160deg,var(--petrol-tint),var(--terra-tint));
  display:grid; place-items:center; text-align:center; padding:30px;
  color:var(--muted); font-size:.85rem; box-shadow:var(--shadow-deep);
  overflow:hidden;
}
.about-portrait::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:
    radial-gradient(ellipse 85% 78% at 50% 42%, rgba(0,0,0,0) 45%, rgba(20,14,8,.4) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  opacity:.55; mix-blend-mode:multiply;
}
.about-portrait::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(165deg, rgba(188,107,69,.22), rgba(44,85,92,.16));
  mix-blend-mode:soft-light;
}
/* Sobald ein echtes Bild drinsteckt, entfällt das Innenpadding — das war
   nur für den zentrierten Platzhaltertext gedacht. Das Bild füllt den
   4:5-Rahmen randlos, wie bei den Referenzkarten. */
.about-portrait img{
  width:100%; height:100%; object-fit:cover; border-radius:inherit;
  filter:sepia(.26) saturate(1.12) brightness(.95) contrast(1.08);
}
.about-portrait:has(img){ padding:0; }
/* Wiederkehrendes Linienmotiv aus dem Hero, überlappt die untere Ecke. Baut
   ein eigenes Wiedererkennungszeichen auf, statt eines generischen Rahmens. */
.about-lineart{
  position:absolute; z-index:3; right:-19%; bottom:-15%; width:80%; aspect-ratio:1;
  pointer-events:none;
}
/* Hebel 2.4 — Terracotta punktuell statt als Fläche. Bei fünf Absätzen
   Fließtext verwässert ein Hintergrundschleier zu stark, um noch aufzufallen;
   die Zitatzeile und die Signatur sind kurz genug, dass die Farbe dort
   sichtbar bleibt. */
.about-quote{
  font-family:var(--serif); font-size:clamp(1.3rem,2.6vw,1.85rem); line-height:1.38;
  margin-bottom:22px;
}
.about-grid p{ color:var(--ink-soft); }
/* .about-grid p (Klasse+Typ) ist spezifischer als .about-quote/.about-sign
   (nur Klasse) und würde die Terracotta-Farbe sonst überschreiben — deshalb
   hier mit demselben Klasse+Typ-Muster erneut gesetzt. */
.about-grid .about-quote,
.about-grid .about-sign{ color:var(--terra-text); }
.about-sign{ font-family:var(--serif); font-size:1.05rem; margin-top:22px; }

/* ---------- Empfehlung ---------- */
.empfehlung-section{ padding:clamp(8px,2vw,24px) 0 clamp(40px,5vw,72px); }
.empfehlung{
  display:grid; grid-template-columns:1fr auto; gap:clamp(24px,4vw,56px); align-items:center;
  background:var(--terra-tint); border:1px solid #EFD9CB; border-radius:var(--r-lg);
  padding:clamp(28px,4vw,44px) clamp(24px,4.5vw,52px);
  position:relative; overflow:hidden;
}
.empfehlung::after{
  content:""; position:absolute; right:-90px; top:-90px; width:280px; aspect-ratio:1; border-radius:50%;
  border:2px solid var(--terra); opacity:.14; pointer-events:none;
}
.empfehlung .eyebrow{ color:var(--terra-text); margin-bottom:12px; }
.empfehlung .eyebrow::before{ background:var(--terra); }
.empfehlung h3{ font-size:clamp(1.35rem,2.4vw,1.75rem); margin-bottom:12px; }
.empf-text p{ color:var(--ink-soft); max-width:56ch; margin-bottom:.6em; }
.empf-text .empf-beispiel{ font-size:.9rem; color:var(--terra-text); margin:0; }
.empf-aktion{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; position:relative; z-index:1; }
.empf-zahl{ font-family:var(--serif); color:var(--terra-text); line-height:.9; font-weight:500; }
.empf-zahl span{ font-size:clamp(3.6rem,7vw,5.2rem); letter-spacing:-.03em; }
.empf-zahl small{ font-size:clamp(1.6rem,3vw,2.2rem); margin-left:2px; }
.empf-note{ margin:0; font-size:.82rem; color:var(--muted); }
.empf-toggle{ line-height:1.2; }
.empf-pfeil{ width:7px; height:7px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg); transition:transform .3s var(--ease); margin-left:4px; }
.empf-toggle[aria-expanded="true"] .empf-pfeil{ transform:translateY(2px) rotate(-135deg); }
/* Aufklappen über grid-template-rows 0fr → 1fr: weich animiert, ohne feste Höhe */
.empf-wege{ display:grid; grid-template-rows:0fr; width:100%; min-width:250px;
  transition:grid-template-rows .4s var(--ease), opacity .3s var(--ease); opacity:0; }
.empf-wege.offen{ grid-template-rows:1fr; opacity:1; }
.empf-wege-innen{ overflow:hidden; display:flex; flex-direction:column; gap:8px; }
.empf-wege-titel{ margin:4px 0 2px; font-size:.8rem; font-weight:600; color:var(--ink-soft); }
.empf-weg{ display:flex; align-items:center; gap:10px; padding:11px 16px; border-radius:999px;
  background:var(--paper); border:1px solid #EAD3C4; color:var(--ink); text-decoration:none;
  font-size:.92rem; font-weight:600; transition:border-color .2s, background .2s, transform .2s var(--ease); }
.empf-weg:hover{ border-color:var(--terra); transform:translateX(3px); }
.empf-weg svg{ flex:none; color:var(--terra-text); }
@media (max-width:760px){
  .empfehlung{ grid-template-columns:1fr; }
  .empf-aktion{ align-items:flex-start; text-align:left; }
  .empf-zahl{ display:none; }
  .empf-toggle{ width:100%; justify-content:center; }
  .empf-wege{ min-width:0; }
}

/* ---------- CTA ---------- */
/* Kontakt-Anker: vorher fast schwarz (--ink), jetzt im selben Waldgrün wie
   „Warum wir". Beide dunklen Flächen der Seite sprechen damit dieselbe
   Sprache, statt wie zwei zufällige Ausreißer zu wirken. */
.cta{
  background:linear-gradient(162deg, var(--anchor) 0%, var(--anchor-deep) 100%);
  color:var(--anchor-text); border-radius:var(--r-lg);
  padding:clamp(46px,6vw,76px) clamp(28px,5vw,64px); text-align:center; position:relative; overflow:hidden;
  box-shadow:var(--shadow-deep);
}
/* Hier lag bis 12.09.2026 ein Waldfoto bei 20 % Deckkraft (cta-wald.webp,
   213 KB — die schwerste Datei der Seite). Entfernt aus zwei Gruenden: Es war
   das einzige Fotomaterial in einer sonst durchgehend gezeichneten Bildsprache,
   und es las sich als Naturfoto — der Look, der beim Farbkonzept ausdruecklich
   verworfen wurde. Verlauf und Lichtschein tragen die Flaeche allein.
   Die Datei liegt in _archiv-wirkraum/ ausserhalb des Seitenordners. */
/* Lichtschein von oben. Der alte Salbeiton war auf dem dunklen Grün nicht mehr
   sichtbar — jetzt der helle Anker-Ton mit niedriger Deckkraft. */
.cta::before{
  content:""; position:absolute; z-index:1; width:620px; aspect-ratio:1; border-radius:50%;
  left:50%; top:-58%; transform:translateX(-50%);
  background:radial-gradient(circle,rgba(207,195,164,.18),transparent 66%);
}
.cta > *{ position:relative; z-index:2; }
.cta h2{ color:var(--anchor-text); margin-bottom:18px; }
.cta p{ color:rgba(240,239,226,.72); max-width:52ch; margin-inline:auto; margin-bottom:32px; font-size:1.05rem; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.cta .btn-tg{ border-color:rgba(240,239,226,.32); color:var(--anchor-text); }
.cta .btn-tg:hover{ background:rgba(240,239,226,.11); }
.cta-note{ margin-top:26px; font-size:.84rem; color:rgba(240,239,226,.5); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--linen-deep); border-top:1px solid var(--line); padding:56px 0 34px; }
.footer-top{
  display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between; align-items:flex-start;
  padding-bottom:38px; position:relative;
}
.footer-top::after{ content:""; position:absolute; left:0; right:0; bottom:0; }
.footer-blurb{ max-width:40ch; font-size:.9rem; color:var(--muted); margin:14px 0 0; }
.footer-links{ display:flex; flex-wrap:wrap; gap:14px 30px; }
.footer-links a{ font-size:.89rem; color:var(--ink-soft); text-decoration:none; font-weight:600; }
.footer-links a:hover{ color:var(--terra); }
.footer-bottom{
  padding-top:24px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  font-size:.8rem; color:var(--muted);
}

/* ---------- Reveal (nur mit aktivem JS — sonst bleibt alles sichtbar) ----------
   Bewegt wird über die eigenständige translate-Eigenschaft, nicht über
   transform. Grund: fast alle Karten tragen gleichzeitig .reveal und einen
   :hover-Effekt mit transform. Da `.js .reveal.in` (drei Klassen) spezifischer
   ist als `.price-card:hover` (Klasse + Pseudoklasse), hat die Einblendung den
   Hover-Effekt vorher überschrieben — sichtbar hoben sich die Karten nie an.
   translate und transform sind getrennte Eigenschaften und überlagern sich
   sauber, statt sich gegenseitig auszuschalten. */
.js .reveal{ opacity:0; translate:0 22px; transition:opacity .7s var(--ease), translate .7s var(--ease); }
.js .reveal.in{ opacity:1; translate:0 0; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .js .reveal{ opacity:1; translate:0 0; }
  html{ scroll-behavior:auto; }
}

/* ---------- Responsive ---------- */
/* Collage: Versatz zurücknehmen, bevor die gedrehten Karten seitlich anecken */

@media (max-width:980px){
  .about-grid{ grid-template-columns:1fr; }
  .about-portrait{ max-width:340px; }
  .usp-row{ grid-template-columns:64px 1fr; }
  .usp-row > p{ grid-column:2; }
  .usp-icon{ height:34px; margin-top:12px; }
  .usp-row:nth-of-type(1) .usp-icon{ width:30px; }
  .usp-row:nth-of-type(2) .usp-icon{ width:24px; }
  .usp-row:nth-of-type(3) .usp-icon{ width:28px; }
  .usp-row:nth-of-type(4) .usp-icon{ width:27px; }
  .usp-row:nth-of-type(5) .usp-icon{ width:33px; }
  .usp-row:nth-of-type(6) .usp-icon{ width:27px; }
  .usp-row:nth-of-type(7) .usp-icon{ width:27px; }
}

@media (max-width:820px){
  .nav-toggle{ display:flex; }
  .header-cta{ display:none; }
  .main-nav{
    position:absolute; top:74px; left:0; right:0;
    background:var(--linen); border-bottom:1px solid var(--line);
    flex-direction:column; gap:0; padding:8px 24px 22px;
    display:none;
  }
  .main-nav.open{ display:flex; }
  .main-nav a{ padding:14px 0; border-bottom:1px solid var(--line); font-size:1rem; }
  .main-nav a:last-child{ border-bottom:0; }
  /* Aufgeklapptes Menü über dem Hero: Das Panel ist hell (Leinen), die
     helle .over-hero-Schrift wäre darauf unsichtbar. Links deshalb immer
     dunkel, und der ganze Header wird beim Öffnen zum normalen hellen
     Header, damit Kopfzeile und Panel eine Fläche bilden. */
  .site-header.over-hero .main-nav a{ color:var(--ink-soft); }
  .site-header.over-hero:has(.main-nav.open){ background:var(--linen); border-bottom-color:var(--line); }
  .site-header.over-hero:has(.main-nav.open) .logo-text{ color:var(--ink); }
  .site-header.over-hero:has(.main-nav.open) .logo-text em{ color:var(--muted); }
  .site-header.over-hero:has(.main-nav.open) .nav-toggle{ border-color:var(--line); }
  .site-header.over-hero:has(.main-nav.open) .nav-toggle span{ background:var(--ink); }
  .step::before{ display:none; }
}

@media (max-width:560px){
  body{ font-size:16px; }
  .hero-actions .btn{ width:100%; }
  .price-card{ padding:30px 24px; }
}