/* =====================================================================
   Mind & Core Coaching – Manuel Zant
   EINE durchgängige dunkle Farbe (Graphit/Anthrazit), warme helle Flächen,
   Champagner-Gold nur als Akzent + feine Trennlinien. Kein Tiefblau,
   kein hartes Schwarz, kein kaltes Weiß. Loft-Türen mit warmem Milchglas.
   Motion subtil, reduced-motion-safe.
   PERFORMANCE: Bilder final als WebP/AVIF + responsive srcset/sizes.
   ===================================================================== */

/* ---- Self-hosted Fonts (DSGVO-konform – KEIN Google-CDN) ---- */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:local("Cormorant Garamond Medium"),url("assets/fonts/CormorantGaramond-Medium.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:local("Cormorant Garamond SemiBold"),url("assets/fonts/CormorantGaramond-SemiBold.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:local("Cormorant Garamond Medium Italic"),url("assets/fonts/CormorantGaramond-MediumItalic.woff2") format("woff2")}
/* Echter 700er aus der Variable Font (wght-Achse 300–700) – für Headline-Neukalibrierung, kein Faux-Bold */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/CormorantGaramond-SemiBold.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:local("Inter"),url("assets/fonts/Inter-Regular.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:local("Inter SemiBold"),url("assets/fonts/Inter-SemiBold.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:local("Inter Bold"),url("assets/fonts/Inter-Bold.woff2") format("woff2")}

:root{
  /* === KANONISCHES SYSTEM: ein Graphit, ein Gold, ein Beige === */
  --graphite:#171817;        /* die eine dunkle Hauptfarbe */
  --graphite-soft:#20211f;   /* nur für abgesetzte Objekte (Türrahmen) */
  --gold-rgb:198,164,93;     /* der EINE Goldton – Varianten nur über Transparenz */
  --gold:#c6a45d;
  --paper:#f4efe5;           /* Beige-Basis */
  --paper-soft:#faf6ed;      /* helleres Off-White (Karten / .white) */
  --text-dark:#24211d;
  --text-light:#f6f0e7;
  --stone:#7a756c;
  --ink-soft:rgba(36,33,29,.72);
  --muted-d:rgba(246,240,231,.72);
  /* Linien – immer aus dem einen Gold, nur Transparenz variiert */
  --line:rgba(var(--gold-rgb),.22);   /* feine Content-Linie (hell) */
  --line-d:rgba(var(--gold-rgb),.30); /* Linie auf dunkel */
  --rule:rgba(var(--gold-rgb),.35);   /* Satzspiegel-Trennlinie */
  --radius:18px;
  --shadow:0 24px 60px rgba(20,20,18,.12);
  --ease:cubic-bezier(.22,.61,.36,1);
  --serif:"Cormorant Garamond",Georgia,serif;

  /* === Legacy-Aliasse -> auf die kanonischen Tokens gemappt === */
  --bg:var(--paper);
  --dark:var(--graphite);
  --dark-elev:var(--graphite-soft);
  --ink:var(--text-dark);
  --cream:var(--text-light);
  --soft:var(--paper);
  --champagne:var(--gold);
  --champ-d:var(--gold);
  --gold-onlight:var(--gold);
  --champagne-soft:rgba(var(--gold-rgb),.18);
  --gold-line-c:var(--rule);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.62;font-size:17px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--gold-onlight);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--champagne);color:#1b1810;padding:12px 18px;font-weight:600}
.skip:focus{left:12px;top:12px}

h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.04;letter-spacing:-.02em;margin:0;color:var(--ink)}
.eyebrow{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-onlight);font-weight:700;margin-bottom:16px}
.gold-line{width:56px;height:1px;background:var(--gold);opacity:.85;margin:0 0 26px}
/* EINZIGE dekorative Linien-Komponente – immer innerhalb .wrap (Satzspiegel), nie full-width.
   Eleganter Verlauf: transparent -> Gold -> Gold -> transparent, weich auslaufend. */
.gold-divider,.section-rule{width:100%;max-width:none;height:2px;border:0;margin:0;
  background:linear-gradient(90deg,transparent 0%,rgba(var(--gold-rgb),.18) 8%,rgba(var(--gold-rgb),.75) 50%,rgba(var(--gold-rgb),.18) 92%,transparent 100%)}
/* Dekorative Abschluss-Linie INNERHALB bestehender Content-Container (Satzspiegel).
   grid-column:1/-1 lässt sie in Grid-Containern (z. B. .contact-grid) die volle Breite spannen;
   in Block-/Flex-Containern wird es ignoriert, dort trägt width:100%. */
.gold-divider.section-divider{display:block;width:100%;height:2px;margin-left:0;margin-right:0;grid-column:1/-1;
  background:linear-gradient(90deg,transparent 0%,rgba(var(--gold-rgb),.18) 8%,rgba(var(--gold-rgb),.75) 50%,rgba(var(--gold-rgb),.18) 92%,transparent 100%)}
.section-divider{margin-top:clamp(32px,4vw,56px);margin-bottom:0}
/* Bereichsspezifische Feinjustierung – nur margin-top; der Abstand nach unten kommt vom nächsten Section-Padding. */
.statement .section-divider{margin-top:clamp(56px,6.2vw,80px);margin-bottom:0}
#ueber-mich .section-divider{margin-top:clamp(64px,8vw,100px);margin-bottom:0}
.legal-note .section-divider{margin-top:0;margin-bottom:clamp(42px,5vw,68px)}
.statement .wrap{display:flex;flex-direction:column;align-items:center}
.legal-note .wrap{text-align:center}
/* Folge-Abschnitte näher an die jeweilige Divider-Linie (nur padding-top). */
#ankommen{padding-top:clamp(60px,7vw,96px)}
#faq{padding-top:clamp(76px,9vw,122px)}
#ueber-mich{padding-bottom:clamp(56px,7vw,88px)}
#kontakt{padding-bottom:clamp(48px,5.6vw,72px)}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(22px,5vw,64px)}

/* Reveal-System – nur bei aktivem JS. Kompatibel: .reveal == .reveal-up */
.js .reveal,.js .reveal-up{opacity:0;transform:translateY(20px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.js .reveal-soft{opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal-image{opacity:0;transform:scale(1.04);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal-line{transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.js .reveal-stagger>*{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.visible,.js .reveal-up.visible,.js .reveal-soft.visible,.js .reveal-image.visible{opacity:1;transform:none}
.js .reveal-line.visible{transform:scaleX(1)}
.js .reveal-stagger.visible>*{opacity:1;transform:none}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:1px solid var(--dark);
  background:var(--dark);color:var(--cream);padding:15px 26px;border-radius:12px;font-weight:600;font-size:15px;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.btn:hover{background:var(--champagne);border-color:var(--champagne);color:#1b1810;transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--cream);border-color:rgba(var(--gold-rgb),.85)}
.btn.ghost:hover{background:var(--champagne);color:#1b1810;border-color:var(--champagne)}
.btn.block{width:100%;margin-top:auto}
.btn-text{display:inline-flex;align-items:center;gap:7px;color:var(--gold-onlight);font-weight:600;font-size:14px}
.btn-text:hover{text-decoration:underline}

/* ---- Nav ---- */
.nav{position:fixed;z-index:100;top:0;left:0;right:0;height:80px;display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(22px,4vw,64px);transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.nav.scrolled{background:rgba(251,247,239,.95);backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(20,20,18,.06)}
.brand{display:flex;align-items:center;line-height:1}
/* Header-Logo in BEIDEN Zuständen; gleiche Höhe (kein Scroll-Sprung).
   Top über dunklem Hero: dunkles SVG sauber hell invertiert. Gescrollt (heller Grund): original. */
.brand-logo{display:block;height:clamp(42px,4.2vw,52px);width:auto;filter:brightness(0) invert(1);transition:filter .3s var(--ease)}
.nav.scrolled .brand-logo{filter:none}
.links{display:flex;align-items:center;gap:28px;font-size:14.5px}
.links a:not(.btn){color:rgba(247,242,232,.9)}
.nav.scrolled .links a:not(.btn){color:var(--ink-soft)}
.links a:not(.btn):hover,.links a:not(.btn).active{color:var(--champagne)}
.nav.scrolled .links a:not(.btn):hover,.nav.scrolled .links a:not(.btn).active{color:var(--gold-onlight)}

/* CTA "Erstgespräch" – eigene, spezifische Regeln (Bug-Schutz in allen Zuständen) */
.nav .links a.btn,.nav .links a.btn:visited,
.nav.scrolled .links a.btn,.nav.scrolled .links a.btn:visited{background:var(--dark);color:var(--cream);border-color:var(--dark)}
.nav .links a.btn:hover,.nav.scrolled .links a.btn:hover{background:var(--champagne);color:#1b1810;border-color:var(--champagne)}
.nav .links a.btn:focus-visible,.nav.scrolled .links a.btn:focus-visible{outline:2px solid var(--champagne);outline-offset:3px}
/* Header-CTA im Top-Zustand (über Hero) – NUR Desktop: transparent, helle Kontur, Hover Gold.
   Mobile bleibt der dunkle Button (Links liegen dort im hellen Dropdown). */
@media(min-width:981px){
  .nav:not(.scrolled) .links a.btn,.nav:not(.scrolled) .links a.btn:visited{background:transparent;color:var(--cream);border-color:rgba(247,242,232,.6)}
  .nav:not(.scrolled) .links a.btn:hover{background:var(--champagne);color:#1b1810;border-color:var(--champagne)}
}

.nav-toggle{display:none;background:none;border:1px solid rgba(247,242,232,.5);color:var(--cream);width:46px;height:46px;border-radius:8px;cursor:pointer;align-items:center;justify-content:center}
.nav.scrolled .nav-toggle{border-color:var(--line);color:var(--ink)}
.nav-toggle span,.nav-toggle span:before,.nav-toggle span:after{content:"";display:block;width:22px;height:2px;background:currentColor;position:relative;transition:.25s}
.nav-toggle span:before{position:absolute;top:-7px}.nav-toggle span:after{position:absolute;top:7px}
.nav.open .nav-toggle span{background:transparent}
.nav.open .nav-toggle span:before{top:0;transform:rotate(45deg)}
.nav.open .nav-toggle span:after{top:0;transform:rotate(-45deg)}

/* ---- Hero (dunkel, echtes Foto). Umbrüche: mobil vs. desktop ---- */
.hero{--hero-focus:30%;min-height:100vh;position:relative;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:var(--dark)}
.hero:before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(31,32,32,.30) 0%,rgba(31,32,32,.22) 42%,rgba(31,32,32,.54) 74%,rgba(31,32,32,.90) 100%)}
.hero-img{position:absolute;inset:0;background:url('assets/hero_image.jpg') center var(--hero-focus,30%)/cover no-repeat;filter:saturate(1.04) brightness(.94)}
.hero-content{position:relative;z-index:2;padding:128px clamp(22px,6vw,64px) 96px;max-width:840px;margin:0 auto;color:var(--cream)}
.kicker{font-size:16px;color:rgba(247,242,232,.86);max-width:560px;margin:0 auto 30px}
.hero h1{font-size:clamp(57px,8.12vw,112px);color:#fff;margin:0 auto;font-weight:700;line-height:.96}
.hero h1 .br-m{display:inline}
.hero h1 .br-d{display:none}
.claim{font-size:clamp(20px,1.9vw,28px);font-weight:600;line-height:1.32;margin:26px auto 18px;color:#fff;font-family:Inter,sans-serif;max-width:640px}
.hero .sub{color:var(--muted-d);max-width:560px;margin:0 auto 30px}
.hero .sub .sub-d{display:none}
.scroll{position:absolute;z-index:2;bottom:26px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.2em;color:var(--muted-d);text-transform:uppercase}

section{padding:clamp(66px,8vw,120px) 0}
.white{background:var(--paper-soft)}
/* Dunkle emotionale Zäsur – bewusste Pause (var(--dark), Cremeweiß, Cormorant Italic, zentriert) */
.pause{background:var(--dark);color:var(--cream);padding:clamp(82px,10vw,132px) 0;text-align:center}
.pause p{color:rgba(244,239,228,.86);font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(23px,2.75vw,34px);line-height:1.48;letter-spacing:-.01em;max-width:720px;margin:0 auto}
.pause p + p{margin-top:1.15em}
.soft{background:var(--soft)}
section h2{font-size:clamp(37px,5.05vw,70px);margin-bottom:18px;font-weight:700;line-height:.98}
.lead{font-size:clamp(18px,1.6vw,20px);color:var(--ink-soft);max-width:660px}

/* ---- Media (echte Fotos) ---- */
.media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.media img{width:100%;height:100%;object-fit:cover;display:block;min-height:480px}

/* ---- Split ---- */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(30px,5vw,72px)}
.split-text p{color:var(--ink-soft);max-width:560px;margin:0 0 16px}
.signature{font-family:var(--serif);font-style:italic;font-weight:400;font-size:31px;color:var(--gold-onlight);margin-top:20px}

/* ---- Statement band (Haltung – ruhig, kursiv, light) ---- */
.statement{background:var(--dark);text-align:center;padding:clamp(68px,8vw,108px) 0 clamp(24px,3vw,42px)}
.statement p{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(27px,3.4vw,45px);line-height:1.24;letter-spacing:-.01em;color:rgba(247,242,232,.9);max-width:760px;margin:0 auto}
.statement .quiet{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(21px,2.1vw,27px);letter-spacing:-.01em;color:rgba(var(--gold-rgb),.88);margin:18px auto 0;max-width:640px}
/* Logo-Siegel: ruhiger Markenabschluss des ersten emotionalen Abschnitts – dezent, ~70 % der Footer-Logo-Größe, keine Animation/Schatten */
.statement-seal{margin-top:clamp(52px,6.4vw,88px)}
.statement-seal img{display:block;width:auto;height:clamp(178px,21vw,258px)}

/* ---- Prinzip band (gleiche dunkle Farbe, Trennung via Goldlinie) ---- */
.principle{background:var(--dark);color:var(--cream);position:relative;padding-top:clamp(28px,3.6vw,46px)}
/* Trennlinien der dunklen Bereiche liegen jetzt als .gold-divider IM .wrap (siehe HTML), nicht mehr als ::before-Full-Bleed. */
.principle .grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(40px,7vw,96px);align-items:center}
.principle h2{color:#fff}
.principle .eyebrow{color:var(--champagne)}
.principle p{color:rgba(247,242,232,.8);max-width:560px}
.p-steps{display:grid;gap:16px}
.p-step{display:grid;grid-template-columns:56px 1fr;gap:18px;border-top:1px solid rgba(247,242,232,.14);padding-top:20px}
.p-step .n{font-family:var(--serif);font-size:40px;color:var(--champagne);line-height:1}
.p-step h3{font-family:Inter,sans-serif;font-size:19px;color:#fff;margin-bottom:5px;letter-spacing:0}
.p-step p{margin:0;font-size:15.5px;color:rgba(247,242,232,.72)}

/* ---- Methode ---- */
.approach{color:var(--ink-soft);max-width:660px;margin:14px 0 0;font-size:clamp(18px,1.6vw,20px)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:12px}
/* Methode-Karten – Variante C: helle Karte, Goldrand + Goldnummer, Graphit-Text */
.step{background:var(--paper-soft);border:1px solid rgba(var(--gold-rgb),.55);border-radius:var(--radius);padding:30px 26px;color:var(--text-dark);
  box-shadow:var(--shadow)}
.step .n{font-family:var(--serif);font-size:36px;color:var(--gold);line-height:1;margin-bottom:12px}
.step h3{font-size:26px;font-weight:700;line-height:1.08;margin-bottom:5px;color:var(--text-dark)}
.step p{color:var(--ink-soft);font-size:15.5px;line-height:1.5;margin:0;text-wrap:balance}

/* ---- Drei Wege / LOFT-TÜREN (gleiche dunkle Farbe) ---- */
.doors{position:relative;background:var(--dark);overflow:hidden;isolation:isolate}
/* Fertig bearbeitetes Bild – unverändert zeigen (kein Filter, kein Zoom). Karten & Text darüber. */
.doors::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url(assets/der-weg-bg.jpg?v=9) center 50%/cover no-repeat}
/* Obere Lese-Vignette (nur Desktop): über dem Bild, unter dem Content. Stark für Lesbarkeit,
   blendet vor der leuchtenden Milchglastür weich auf 0 aus. */
@media(min-width:981px){
  .doors::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(9,13,22,.85) 0%,rgba(9,13,22,.62) 22%,rgba(9,13,22,.3) 38%,rgba(9,13,22,0) 53%)}
}
.doors>.wrap{position:relative;z-index:1}
.doors .eyebrow{color:var(--champagne)}
.doors-head{display:grid;grid-template-columns:1fr 1fr;gap:30px 50px;align-items:end;margin-bottom:46px}
.doors-head h2{color:#fff}
.glass-note{font-family:var(--serif);font-style:italic;font-weight:400;font-size:27px;color:var(--champagne);margin:8px 0 0}
.lead-d{font-size:clamp(17px,1.5vw,19px);color:rgba(247,242,232,.8);max-width:560px;margin:0 0 16px}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-d);color:var(--cream);border-radius:20px;padding:8px 16px;font-size:13.5px}
.pill:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--champagne)}

.door-grid{display:flex;flex-direction:column;gap:26px}
/* Loft-Türrahmen (leicht abgesetzt von der Sektion) */
/* Ruhige Orientierungskarte vor dem Raum – nicht mehr als Tür gezeichnet.
   Kein Rahmen, kein Türgriff, keine Rail; sehr feiner Schatten. */
.door{position:relative;border-radius:14px;background:transparent;border:none;padding:0;
  box-shadow:0 14px 40px rgba(8,8,7,.4);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.door:hover{box-shadow:0 18px 46px rgba(8,8,7,.46)}
/* Einheitliche, ruhige Milchglas-Cremefläche – keine Struktur, kein Muster, leicht transparent */
.door-glass{position:relative;height:100%;display:flex;flex-direction:column;border-radius:14px;
  padding:clamp(38px,3vw,52px) clamp(30px,2.4vw,40px) clamp(32px,2.6vw,42px);overflow:hidden;
  background:rgba(250,247,240,.62);
  backdrop-filter:blur(7px);transition:background .45s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease);will-change:transform}
.door:hover .door-glass{background:rgba(252,250,246,.7)}

/* Kopfzeile: Nummer + Thema. Mobile/Tablet = einzeilig „TÜR 1 · KLARHEIT & STABILITÄT"
   (Trennzeichen per CSS, damit die Aufteilung Mobile unverändert lässt). Desktop 2-zeilig (siehe ≥981). */
.door-kicker{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--graphite);margin:0 0 26px}
.dk-nr::after{content:"·";margin:0 .34em}
.door h3{font-size:clamp(24px,2.4vw,30px);line-height:1.1;margin:0 0 18px;color:var(--ink)}
.door-desc{color:var(--ink-soft);font-size:15.5px;line-height:1.55;margin:0 0 26px}
/* Abschlussaktion der geöffneten Karte: ruhiger Gold-Textlink (gleiche Sprache wie „Mehr erfahren").
   Keine Buttonfläche, keine Box/Pill, kein Hintergrund. Feine Linie darüber + Weißraum davor. */
.more-cta-link{display:inline-flex;align-items:center;gap:8px;width:100%;text-decoration:none;
  color:var(--gold-onlight);font-weight:600;font-size:15px;letter-spacing:.01em;
  margin-top:clamp(18px,2.2vw,28px);padding-top:clamp(18px,2vw,26px);
  border-top:1px solid rgba(var(--gold-rgb),.3)}
.more-cta-link .arw{transition:transform .3s var(--ease)}
.more-cta-link:hover .arw{transform:translateX(4px)}

.door-more{margin:8px 0 16px;border-top:1px solid rgba(36,33,29,.1)}
.door-more summary{cursor:pointer;list-style:none;padding:12px 40px 12px 0;position:relative;font-weight:600;font-size:14.5px;color:var(--gold-onlight)}
/* === Einheitliches Accordion-Marker-System (FAQ · Qualifikation · Türen-Details) === */
.door-more summary::-webkit-details-marker,details.qi summary::-webkit-details-marker,details.qa summary::-webkit-details-marker{display:none}
.door-more summary::marker,details.qi summary::marker,details.qa summary::marker{content:""}
.door-more summary::after,details.qi summary::after,details.qa summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-family:Inter,sans-serif;font-weight:300;font-size:20px;line-height:1;color:var(--gold);transition:color .3s var(--ease)}
.door-more[open] summary::after,details.qi[open] summary::after,details.qa[open] summary::after{content:"–"}
.door-more .more-inner{padding-bottom:12px}
.door-more[open] .more-inner{animation:faqIn .35s var(--ease)}
.door-more ul{list-style:none;padding:0;margin:0 0 10px}
.door-more li{padding:6px 0 6px 20px;position:relative;font-size:14.5px;color:var(--ink-soft)}
.door-more li:before{content:"";position:absolute;left:2px;top:13px;width:6px;height:6px;border-radius:50%;background:var(--champagne)}
.vip{margin-top:10px;padding:14px 16px;border-radius:10px;background:var(--champagne-soft);border:1px solid rgba(var(--gold-rgb),.4)}
.vip strong{color:var(--gold-onlight)}
.vip p{margin:6px 0 0;font-size:14px;color:var(--ink-soft)}
/* Offene Tür: strukturierte Blöcke (Label + Inhalt) statt Fließtext */
.s-close{display:none}
.more-block{margin:0 0 clamp(16px,1.8vw,22px)}
.more-label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--gold-onlight);margin:0 0 7px}
.more-block ul{margin:0}
.more-block p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-soft)}
.more-block p strong{color:var(--ink)}
.more-block p.more-format{font-size:14px;font-weight:600;color:var(--ink)}
.more-block p.door-note{font-size:13px;color:var(--stone);font-style:italic}
/* Facts Card: Format/Dauer/Ort/Preis als ruhige Karte — einheitlich für alle drei Türen.
   Gruppen durch feine Goldlinien getrennt (kanonisches Liniensystem), Label über Wert.
   Preis-/Kostengruppe ist überall die letzte Gruppe: Trennlinie einen Hauch präsenter
   (--rule statt --line), Wert minimal größer/stärker — Betonung ohne Badge-Optik. */
.more-facts{display:flex;flex-direction:column;gap:0;background:rgba(22,20,14,.028);border:1px solid rgba(22,20,14,.06);border-radius:14px;padding:clamp(15px,1.5vw,21px) clamp(18px,1.8vw,24px)}
.fact{display:flex;flex-direction:column;gap:4px;padding:clamp(11px,1.1vw,14px) 0}
.fact:first-child{padding-top:0}
.fact:last-child{padding-bottom:0}
.fact + .fact{border-top:1px solid var(--line)}
.fact-k{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--stone)}
/* Kategorien-Marker: kleiner vertikaler Gold-Balken vor dem Label — ruhig, kein Pfeil, keine Badge */
.fact-k::before{content:"";flex:none;width:3px;height:9px;border-radius:1px;background:rgba(var(--gold-rgb),.9)}
.fact-v{font-size:14.5px;line-height:1.45;color:var(--ink);font-weight:600}
/* Aufzählung innerhalb der Facts-Card: kleine, ruhige Punkte im bestehenden Champagne-Ton
   (analog zu .door-more li, nur kompakter); überschreibt bewusst die allgemeine Listenregel */
.more-facts .fact-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.more-facts .fact-list li{position:relative;padding:2px 0 2px 15px;font-size:14.5px;line-height:1.45;color:var(--ink);font-weight:600}
.more-facts .fact-list li::before{content:"";position:absolute;left:1px;top:.5em;width:5px;height:5px;border-radius:50%;background:var(--champagne)}
.more-facts .fact + .fact:last-child{border-top-color:var(--rule)}
.more-facts .fact:last-child .fact-v{font-size:15.5px;font-weight:700;color:var(--text-dark)}
/* gemeinsamer, kompakter CTA unter dem Türen-Grid */
.doors-cta{margin-top:clamp(30px,4vw,46px);text-align:center}
.doors-cta-btn{padding:12px 26px;font-size:14.5px;border-radius:10px}
/* Aufblätternde Tür – nur ab Desktop (≥981px) */
@media(min-width:981px){
  /* Mehr Bühne: höheres Padding (~+17 %) → mehr Boden/Decke/seitliche Dunkelheit; CTA tiefer im Raum */
  /* Textblock höher in die Vignette ziehen (Top-Padding kleiner); Karten rücken dadurch leicht mit nach oben. Unten unverändert. */
  .doors{padding:clamp(96px,10vw,150px) 0 clamp(140px,14vw,216px)}
  /* CTA sitzt freier im Raum – mehr Abstand zu den Karten */
  .doors-cta{margin-top:clamp(72px,8.5vw,116px)}
  /* Moment des Innehaltens: deutlich mehr Abstand zwischen oberem Textblock und den Türen */
  /* Mehr Luft zwischen Textblock und Karten – der Moment der Entscheidung atmet */
  .doors-head{margin-bottom:clamp(100px,11.5vw,168px)}
  .door-grid{flex-direction:row;align-items:stretch;perspective:1200px;perspective-origin:center center}
  /* Karten etwas niedriger (schweben, geben mehr Boden/Licht/Perspektive frei) + feinerer, tieferer Ruheschatten */
  .door{flex:1 1 0;min-width:0;min-height:480px;box-shadow:0 24px 60px rgba(6,7,9,.44);transition:flex-grow .5s var(--ease),filter .5s var(--ease),transform .45s var(--ease),box-shadow .5s var(--ease)}
  /* Minimal mehr Hintergrundunschärfe → stärkere räumliche Trennung, sehr dezent */
  .door-glass{backdrop-filter:blur(9px)}
  /* Sehr dezente Verdichtung im unteren Kartenbereich (hinter Trennlinie + „Mehr erfahren"):
     lokaler Verlauf über der Glasfläche, unter dem Text (z-index:-1 im backdrop-filter-Stacking).
     Kein Balken, kein Footer, keine sichtbare Kante; obere ~54 % der Karte bleiben unverändert transparent.
     Ändert weder die Kartentransparenz insgesamt noch den Hover (eigene Ebene, keine Background-Änderung). */
  .door-glass::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;z-index:-1;pointer-events:none;
    background:linear-gradient(to bottom,rgba(250,247,240,0),rgba(250,247,240,.17))}
  /* Mehr erfahren am Kartenfuß verankern (geschlossen) – Karten atmen ruhig */
  .door:not(:has(.door-more[open])) .door-more{margin-top:auto}
  /* Kartenkopf 2-zeilig & hochwertige Hierarchie (nur Desktop). Feste Reservehöhe → Headlines
     aller drei Karten auf gleicher Zeile (Thema Tür 3 darf 2-zeilig umbrechen). */
  .door-kicker{min-height:64px;letter-spacing:normal;margin-bottom:clamp(24px,2.2vw,32px)}
  .dk-nr{display:block;color:var(--gold-onlight);font-size:11px;letter-spacing:.2em;line-height:1.2;margin-bottom:9px}
  .dk-nr::after{content:none}
  .dk-theme{display:block;color:var(--graphite);text-transform:none;font-size:clamp(15px,1.25vw,17px);font-weight:600;letter-spacing:.005em;line-height:1.24}
  /* Mehr Weißraum zwischen den Ebenen → Headline wirkt stärker */
  .door h3{min-height:2.2em;margin-bottom:clamp(20px,1.8vw,26px)}
  .door-desc{font-size:15px;line-height:1.62;margin-bottom:clamp(26px,2.4vw,34px)}
  /* „Mehr erfahren" präsenter: kräftigere goldgetönte Linie, mehr Abstand oben, größer, typografischer Pfeil */
  .door-more{border-top:1px solid rgba(var(--gold-rgb),.42)}
  .door-more summary{font-size:16px;font-weight:700;letter-spacing:.01em;padding-top:18px}
  .door-more summary::after{content:"→";font-size:17px;font-weight:400}
  /* Hover-Perspektive auf .door-glass (nicht .door – dort liegen Flex/Accordion-Zustände).
     perspective() als Funktion → selbsttragend, unabhängig vom Eltern-3D-Kontext. Kein scale().
     Invertiert: linke obere Ecke kommt dem Betrachter entgegen (rotateX -1.5, rotateY +3). */
  .door:hover{box-shadow:0 34px 74px rgba(6,6,5,.56)}
  .door:hover .door-glass{transform:perspective(1100px) translateY(-5px) translateZ(18px) rotateX(-2deg) rotateY(4deg)}
  /* ===== Geöffnete Tür = 3D-Ebenen (JS: is-open / is-open-N / is-active). Passive Karten behalten
     Originalgröße (kein Flex-Shrink), treten nur per Transform zurück. ===== */
  .door-grid.is-open{position:relative;perspective:2200px;perspective-origin:50% 42%;align-items:flex-start}
  /* Aktive Karte: nahezu volle Bühne (~96 %), weiß, vorne, flach/horizontal. Ruhig – kein Hover-Kippen. */
  .door-grid.is-open .door.is-active{flex:0 0 96%;z-index:6;position:relative;filter:none;box-shadow:0 30px 72px rgba(6,7,9,.4)}
  .door-grid.is-open .door.is-active .door-glass{background:rgba(255,255,255,.94)}
  .door-grid.is-open .door.is-active .door-glass::after{display:none}
  .door-grid.is-open .door.is-active:hover .door-glass{transform:none}
  /* Passive Karten: absolut aus dem Fluss, Originalmaße, nur transformiert. Sauber & ruhig:
     kein Schatten, kein Bottom-Verlauf, kein Backdrop-Filter → keine Masken/Schatten-Artefakte. */
  .door-grid.is-open .door:not(.is-active){
    position:absolute;top:0;width:31%;min-height:480px;z-index:1;cursor:pointer;margin:0;
    box-shadow:none;transform-origin:center center;
    transition:transform .55s var(--ease),opacity .55s var(--ease)}
  .door-grid.is-open .door:not(.is-active) .door-glass{backdrop-filter:none;box-shadow:none}
  .door-grid.is-open .door:not(.is-active) .door-glass::after{display:none}
  .door-grid.is-open .door:not(.is-active):hover .door-glass{transform:none}
  /* Staffelung: alle passiven Karten auf EINER Führungsschiene – identische Größe/Neigung/Perspektive,
     nur unterschiedliche Tiefenposition (Versatz + Opacity + z-index). Tür 1 und Tür 3 exakt gespiegelt. */
  .door-grid.is-open-1 .door:nth-child(2){right:-6%;transform:scale(.66) rotateY(-13deg);opacity:.42;z-index:3}
  .door-grid.is-open-1 .door:nth-child(3){right:-11%;transform:translateY(24px) scale(.66) rotateY(-13deg);opacity:.24;z-index:2}
  .door-grid.is-open-2 .door.is-active{margin-left:2%}
  .door-grid.is-open-2 .door:nth-child(1){left:-8%;transform:scale(.66) rotateY(13deg);opacity:.36;z-index:2}
  .door-grid.is-open-2 .door:nth-child(3){right:-8%;transform:scale(.66) rotateY(-13deg);opacity:.36;z-index:2}
  .door-grid.is-open-3 .door.is-active{margin-left:4%}
  .door-grid.is-open-3 .door:nth-child(2){left:-6%;transform:scale(.66) rotateY(13deg);opacity:.42;z-index:3}
  .door-grid.is-open-3 .door:nth-child(1){left:-11%;transform:translateY(24px) scale(.66) rotateY(13deg);opacity:.24;z-index:2}
  /* ===== Innenlayout = Magazinseite: Header links mit Rhythmus, Fakten-Tafel als top-ausgerichtete
     Sidebar rechts. Weißräume typografisch gesetzt, nicht gleichmäßig. ===== */
  /* Header-Rhythmus: großer Atem nach TÜR/Untertitel, dann Headline + Einleitung nah beieinander */
  .door.is-active .door-kicker{min-height:0;margin-bottom:clamp(26px,3vw,44px)}
  .door.is-active h3{min-height:0;margin-bottom:clamp(10px,1vw,15px)}
  .door.is-active .door-desc{margin-bottom:0;max-width:52ch}
  /* Intro-Linie entfernt – großer Atem in den Inhalt */
  .door.is-active .door-more{margin-top:clamp(34px,3.6vw,54px);border-top:0}
  /* „Schließen" dezent oben rechts */
  .door.is-active .door-more summary{position:absolute;top:clamp(28px,2.6vw,42px);right:clamp(32px,2.8vw,46px);padding:0;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--gold-onlight);border:0}
  /* Inhalt fließt links; rechts ist Platz für die schmale Info-Spalte reserviert */
  .door.is-active .door-glass{padding-right:34%;padding-bottom:clamp(22px,1.9vw,32px);min-height:clamp(280px,22vw,340px)}
  /* Kein faqIn auf der offenen Desktop-Karte: dessen transform macht .more-inner zum Containing
     Block und würde die absolute .more-side (rechts) während der Animation an die falsche Position
     (Kartenmitte) binden → Sprung. Die Karten-Expansion liefert die Bewegung; Mobile behält faqIn. */
  .door.is-active .more-inner{display:block;padding-bottom:0;animation:none}
  .door.is-active .more-main{display:block}
  /* Linke Spalten enger zusammen + sehr feine vertikale Goldlinie dazwischen */
  .door.is-active .more-cols{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(26px,2.2vw,36px);max-width:600px;margin-bottom:clamp(24px,2.6vw,36px);position:relative}
  .door.is-active .more-cols::before{content:"";position:absolute;top:3px;bottom:3px;left:calc(50% - .5px);width:1px;background:rgba(var(--gold-rgb),.22)}
  .door.is-active .more-block{margin:0}
  /* Rechte Info-Spalte: schmal, rechte Kante an der „Schließen"-Achse, oben auf Headline-Höhe */
  .door.is-active .more-side{position:absolute;top:clamp(66px,6.2vw,86px);right:clamp(32px,2.8vw,46px);width:27%;max-width:300px;display:flex;flex-direction:column;gap:clamp(18px,1.8vw,24px)}
  /* Fakten-Box: Card-Anmutung kommt jetzt aus dem Basis-System (.more-facts) —
     gilt damit einheitlich für alle Türen und Viewports; hier keine Overrides mehr. */
  /* Zusatz/Hinweis: direkt unter der Box, gleiche Breite, ohne Box, ruhig & zurückhaltend */
  .door.is-active .more-extra{margin:0;max-width:none}
  .door.is-active .more-extra p{font-size:13.5px;line-height:1.62;hyphens:auto;-webkit-hyphens:auto;text-wrap:pretty}
  /* Abschlusslink: kurze Goldlinie (linke Satzspalte), nah am Inhalt – wie der letzte Satz eines Artikels */
  .door.is-active .more-cta-link{display:inline-flex;width:auto;border-top:0;margin-top:clamp(8px,1vw,14px);padding-top:clamp(12px,1.2vw,16px);position:relative}
  .door.is-active .more-cta-link::before{content:"";position:absolute;top:0;left:0;width:52px;height:1px;background:rgba(var(--gold-rgb),.5)}
  /* „Mehr erfahren" → „Schließen" (nur Typografie, kein Marker) */
  .door-more[open] summary .s-more{display:none}
  .door-more[open] summary .s-close{display:inline}
  .door-more[open] summary::after{content:none}
}

/* ---- Über mich ---- */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,64px);align-items:start}
.about-head{max-width:760px;margin-bottom:clamp(28px,4vw,42px)}
.about-text{padding-top:4px}
.about-text p{color:var(--ink-soft);margin:0 0 16px;max-width:560px}
.about-text p:first-child{margin-top:0}
.about-text p:last-child{margin-bottom:0}
/* Qualifikationsblock als hochwertiges, kompaktes Accordion */
.quali{margin-top:clamp(42px,6vw,74px)}
.quali-title{font-size:clamp(23px,2.3vw,30px);margin-bottom:4px}
.quali-sub{color:var(--ink-soft);font-size:15px;margin:0 0 12px}
.quali-list{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,4vw,60px);margin-top:8px;border-bottom:1px solid var(--line)}
details.qi{border-top:1px solid var(--line)}
details.qi summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative}
.qcat{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-onlight);font-weight:700;margin-bottom:5px}
.qname{font-size:17px;font-weight:600;color:var(--ink);line-height:1.25}
details.qi[open] .qname{color:var(--gold-onlight)}
details.qi .qd{margin:-4px 0 18px;color:var(--ink-soft);font-size:14px;line-height:1.55}
details.qi[open] .qd{animation:faqIn .35s var(--ease)}
.ph{display:inline-block;color:#8a6410;background:#F6EAC9;border:1px dashed #CDAE6A;border-radius:4px;padding:0 6px;font-size:.92em}
.about-note{margin-top:clamp(28px,3.5vw,44px);font-size:13px;color:var(--stone);font-style:italic}
/* Vertrauensbereich „Was meine Arbeit trägt." – drei ruhige Säulen (paper auf paper, feiner Goldrahmen, editorial) */
.pillars{margin-top:clamp(42px,6vw,74px)}
.pillars-title{font-size:clamp(27px,3vw,38px);margin-bottom:clamp(30px,4vw,46px)}
.pillars-title::after{content:"";display:block;width:48px;height:1px;background:var(--gold);opacity:.85;margin-top:18px}
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,1.8vw,28px);align-items:stretch}
.pillar{display:flex;flex-direction:column;background:rgba(255,255,255,.42);border:1px solid rgba(var(--gold-rgb),.34);border-radius:8px;padding:clamp(30px,3vw,44px)}
.pillar-cat{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--gold-onlight);margin-bottom:14px}
.pillar h4{font-family:var(--serif);font-weight:600;font-size:clamp(23px,2.2vw,30px);line-height:1.08;letter-spacing:-.01em;color:var(--ink);margin:0 0 22px}
.pillar ul{list-style:none;padding:0;margin:0 0 22px}
.pillar li{position:relative;padding:7px 0 7px 20px;font-size:15px;color:var(--ink-soft)}
.pillar li:before{content:"";position:absolute;left:2px;top:15px;width:6px;height:6px;border-radius:50%;background:var(--champagne)}
.pillar-note{margin-top:auto;font-family:var(--serif);font-style:italic;font-weight:400;font-size:17px;line-height:1.42;color:var(--ink-soft);border-top:1px solid rgba(var(--gold-rgb),.22);padding-top:18px}

/* ---- Stimmen ---- */
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:12px}
.voice{background:var(--paper-soft);border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;box-shadow:var(--shadow)}
.voice .m{font-family:var(--serif);color:var(--champagne);font-size:46px;line-height:.5}
.voice p{font-family:var(--serif);font-size:20px;line-height:1.35;color:var(--ink);margin:8px 0 16px}
.voice .who{font-size:14px;color:var(--stone)}

/* ---- FAQ ---- */
.faq{max-width:860px;margin:0 auto}
details.qa{border-bottom:1px solid var(--line)}
details.qa summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-family:var(--serif);font-size:24px;color:var(--ink);position:relative}
details.qa[open] summary{color:var(--gold-onlight)}
details.qa[open] .a{animation:faqIn .35s var(--ease)}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
details.qa .a{color:var(--ink-soft);margin:0 0 20px;max-width:780px}
/* FAQ: E-Mail dezent als Inline-Pill mit Gold-Akzent hervorheben (kein Button/CTA). Bewusst auf .faq gescoped → wirkt nur hier auf hellem Grund. */
.faq .mail-highlight{display:inline-block;margin-left:.2em;padding:.12em .45em;border:1px solid rgba(var(--gold-rgb),.45);border-radius:999px;color:var(--text-dark);background:rgba(var(--gold-rgb),.10);text-decoration:none;font-weight:600;white-space:nowrap}
.faq .mail-highlight:hover,.faq .mail-highlight:focus-visible{border-color:rgba(var(--gold-rgb),.75);background:rgba(var(--gold-rgb),.16)}

/* ---- Kontakt (gleiche dunkle Farbe wie Statement/Prinzip) ---- */
.contact{background:var(--dark);color:var(--cream)}
.contact .eyebrow{color:var(--champagne)}
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,6vw,80px);align-items:center}
.contact-lead h2{color:#fff;margin-bottom:14px}
.contact-lead .lead{color:rgba(247,242,232,.82);margin:0 0 20px;max-width:440px}
.contact-lead .pill{margin:0}
.contact-do{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.contact-do .btn.primary{width:100%;max-width:400px;padding:18px 30px;font-size:16px;background:var(--champagne);color:#211a0c;border-color:var(--champagne)}
.contact-do .btn.primary:hover{background:rgba(var(--gold-rgb),.92);border-color:rgba(var(--gold-rgb),.92);color:#211a0c;transform:translateY(-2px)}
/* Sekundärer, invertierter Button (E-Mail) – gleicher Rhythmus wie Primary, aber dezent */
.contact-do .btn.btn-invert{width:100%;max-width:400px;padding:16px 30px;font-size:15px;background:transparent;color:var(--cream);border:1px solid rgba(var(--gold-rgb),.7)}
.contact-do .btn.btn-invert:hover{background:rgba(var(--gold-rgb),.14);border-color:var(--champagne);color:#fff;transform:translateY(-2px)}
.contact-do .btn.btn-invert:focus-visible{outline:2px solid var(--champagne);outline-offset:3px}
.disclaimer{max-width:720px;margin:clamp(36px,5vw,60px) 0 0;background:transparent;border:0;border-left:2px solid rgba(var(--gold-rgb),.55);
  border-radius:0;padding:6px 0 6px 18px;font-size:13px;line-height:1.6;color:rgba(247,242,232,.6);text-align:left}

/* ---- Footer (gleiche dunkle Farbe, Trennung via Goldlinie) ---- */
/* ---- Rechtlicher Hinweis: Teil des durchgehenden Graphit-Abschlusses ---- */
.legal-note{background:var(--dark);text-align:center;padding:clamp(58px,7vw,92px) 0 clamp(70px,8vw,104px);position:relative}
.legal-note p{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(19px,1.9vw,23px);line-height:1.5;color:rgba(var(--gold-rgb),.88);max-width:640px;margin:0 auto}

/* ---- Footer (Graphit, Markenabschluss mit Logo) ---- */
.footer{background:var(--dark);color:var(--muted-d);padding:clamp(52px,6.5vw,84px) 0 28px;font-size:14px;position:relative}
.footer-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(40px,6.5vw,80px)}
.footer-foot{display:flex;flex-direction:column;align-items:center;gap:8px}
.footer-brand{line-height:1.75;font-size:13px}
.footer-links{font-size:12.5px}
.footer-logo img{width:auto;height:clamp(220px,30vw,320px);display:block;margin:0 auto}
.footer strong{color:#fff}
.footer a{color:var(--champagne);text-decoration:none}
.footer a:hover{text-decoration:underline}
.footer a[href^="tel:"],.footer a[href^="mailto:"]{white-space:nowrap}
.footer-legal{line-height:1.7;font-size:11.5px;color:rgba(244,239,228,.5);max-width:720px}
.footer-note{font-size:11.5px;color:rgba(244,239,228,.5);max-width:640px;font-style:italic;line-height:1.6}

/* ---- Motion (subtil) ---- */
.hero-img{animation:heroZoom 1.8s var(--ease) both}
@keyframes heroZoom{from{transform:scale(1.06)}to{transform:scale(1)}}
.hero-content .kicker,.hero-content h1,.hero-content .claim,.hero-content .sub,.hero-content .btn{opacity:0;animation:heroIn .9s var(--ease) forwards}
.hero-content .kicker{animation-delay:.15s}
.hero-content h1{animation-delay:.28s}
.hero-content .claim{animation-delay:.42s}
.hero-content .sub{animation-delay:.54s}
.hero-content .btn{animation-delay:.66s}
@keyframes heroIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.scroll{animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}
.arw{display:inline-block;transition:transform .28s var(--ease)}
.btn:hover .arw,.btn:focus-visible .arw,.btn-text:hover .arw,.btn-text:focus-visible .arw{transform:translateX(4px)}
/* Scroll-Progress-Leiste entfernt (war eine full-width Gold-Linie am oberen Rand). */

/* ---- Desktop: Hero ruhiger, Manuel sichtbar, weniger Umbrüche ---- */
@media(min-width:900px){
  /* HERO-FOKUS DESKTOP (Zwischenlösung): kleiner = Kopf weiter oben, größer = Bild wandert nach unten */
  .hero{align-items:flex-end;--hero-focus:5%}
  .hero-content{padding:120px clamp(22px,6vw,64px) 120px;max-width:900px}
  .hero h1{font-size:clamp(44px,4.72vw,68px);line-height:.98;max-width:840px}
  .hero h1 .br-m{display:none}
  .hero h1 .br-d{display:inline}
  .claim{font-size:clamp(16px,1.3vw,21px);line-height:1.35;margin-top:16px;max-width:720px}
  .hero .sub{font-size:15px;line-height:1.5;max-width:760px;margin-bottom:24px}
  .hero .sub .sub-d{display:inline}
  .kicker{margin-bottom:16px}
}

@media(max-width:980px){
  .nav-toggle{display:inline-flex}
  .links{position:fixed;top:80px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:rgba(251,247,239,.98);backdrop-filter:blur(10px);padding:10px 24px 26px;border-top:1px solid var(--line);transform:translateY(-160%);transition:transform .3s var(--ease);box-shadow:var(--shadow)}
  .nav.open .links{transform:translateY(0)}
  .links a:not(.btn){padding:15px 4px;border-bottom:1px solid var(--line);font-size:17px;color:var(--ink-soft)}
  .nav.scrolled .links a:not(.btn){color:var(--ink-soft)}
  .links a.btn{margin-top:14px;justify-content:center;width:100%}
  .split,.doors-head,.about,.principle .grid,.contact-grid,.pillar-grid{grid-template-columns:1fr}
  .pillar-grid{gap:clamp(20px,4vw,28px)}
  .contact-do{align-items:stretch}
  .contact-do .btn{max-width:none}
  .steps{grid-template-columns:1fr 1fr}
  .door-grid,.voices{grid-template-columns:1fr}
  .media img{min-height:340px}
  /* ===== #dein-weg Mobile/Tablet: gleiche Atmosphäre wie Desktop ===== */
  /* Hintergrundbild AKTIV, horizontal zentriert auf die Milchglastür, leicht nach unten */
  .doors::before{display:block;background-position:center 56%}
  /* Mobile Lese-Vignette: oben (Headline) + Ränder/unten dunkel, Zentrum/Tür bleibt sichtbar,
     ruhig hinter den weißen Karten. Über dem Bild, unter dem Content. */
  .doors::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(9,13,22,.84) 0%,rgba(9,13,22,.52) 20%,rgba(9,13,22,.29) 44%,rgba(9,13,22,.42) 74%,rgba(9,13,22,.66) 100%)}
  /* Karten wie Desktop-Weiß (nicht grau-beige); feine Frosted-Transparenz bleibt erhalten */
  .doors .door-glass{background:rgba(255,255,255,.87)}
  /* Ruhig untereinander gestapelt, kompakter – keine 3D-Staffelung, kein Kippen/Hover */
  .doors .door-grid{gap:20px}
  .doors .door-glass{padding:clamp(28px,6.5vw,36px) clamp(22px,5.5vw,28px)}
  .doors .door{box-shadow:0 12px 32px rgba(8,8,7,.34)}
  .doors .door:hover{box-shadow:0 12px 32px rgba(8,8,7,.34)}
  .doors .door:hover .door-glass{background:rgba(255,255,255,.87)}
  .doors .door-kicker{margin-bottom:16px;letter-spacing:normal}
  /* Kicker exakt wie Desktop: „TÜR N" gold in eigener Zeile (kein · Trenner), Thema dunkel darunter */
  .doors .dk-nr{display:block;color:var(--gold-onlight);font-size:11px;letter-spacing:.2em;line-height:1.2;margin-bottom:8px}
  .doors .dk-nr::after{content:none}
  .doors .dk-theme{display:block;color:var(--graphite);text-transform:none;font-size:15px;font-weight:600;letter-spacing:.005em;line-height:1.24}
  .doors .door h3{margin-bottom:13px}
  .doors .door-desc{margin-bottom:20px}
  /* Offene Karte: „Mehr erfahren –" → nur „Schließen" (gleiche Gold-Typografie/Position, kein Marker).
     Geschlossen bleibt „Mehr erfahren +". */
  .doors .door-more[open] summary .s-more{display:none}
  .doors .door-more[open] summary .s-close{display:inline}
  .doors .door-more[open] summary::after{content:none}
}
@media(max-width:560px){
  .steps{grid-template-columns:1fr}
  .hero-img{background-position:center 28%;animation:none}
  /* Mobile: Hero-Scrim in der Mitte etwas stärker (heller Shirt-Bereich) – subtil, läuft nicht schwarz zu. */
  .hero:before{background:linear-gradient(180deg,rgba(31,32,32,.24) 0%,rgba(31,32,32,.26) 42%,rgba(31,32,32,.52) 72%,rgba(31,32,32,.84) 100%)}
  /* Inhalt nach unten (Manuel/Gesicht oben sichtbar), Headline/Claim/Sub/CTA kompakter */
  .hero{align-items:flex-end}
  .hero-content{padding-top:0;padding-bottom:clamp(84px,13vh,116px)}
  .hero h1{font-size:clamp(38px,11.8vw,46px);line-height:1.0}
  .claim{font-size:clamp(15px,4.1vw,17px);line-height:1.3;margin:14px auto 12px}
  .hero .sub{font-size:14px;line-height:1.5;margin:0 auto 22px}
  .hero .btn{padding:13px 22px;font-size:14px}
}
/* Kleine Mobile-Viewports (schmal UND niedrig sichtbar): Hero-Block kompakter.
   Greift nur bei max-width:430px UND max-height:760px – größere/höhere Mobiles + Desktop unberührt. */
@media (max-width:430px) and (max-height:760px){
  .hero-content{padding-bottom:clamp(56px,8.5vh,76px)}
  .hero h1{font-size:clamp(35px,10.5vw,41px);line-height:1}
  .claim{font-size:14px;line-height:1.24;margin:10px auto 8px}
  .hero .sub{font-size:12.5px;line-height:1.36;margin:0 auto 14px}
  .hero .btn{padding:10px 17px;font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .reveal,.js .reveal-up,.js .reveal-soft,.js .reveal-image,.js .reveal-line,.js .reveal-stagger>*{opacity:1!important;transform:none!important}
  .hero-content .kicker,.hero-content h1,.hero-content .claim,.hero-content .sub,.hero-content .btn{opacity:1!important;animation:none!important}
  .hero-img,.scroll{animation:none!important}
}