/* ============================================================
   Mutterlinien · Workshop-Landingpage
   Designsystem 1:1 aus emi-atmet.de (brand/design-system.md).
   Keine neuen Farben, keine neuen Schriften, keine CDNs.
   ============================================================ */

:root{
  /* Grounds */
  --paper:#F5EFE7;
  --paper-2:#EFE7DB;
  --sand:#E8DCCB;
  --white:#FBF8F3;

  /* Dark grounds */
  --espresso:#2A2521;
  --espresso-2:#211D19;

  /* Text */
  --ink:#2C2824;
  --ink-soft:#5C534A;
  --ink-faint:#726757;

  /* Clay — die Handlungsfarbe */
  --clay:#B4694E;
  --clay-deep:#9A5238;
  --clay-soft:#EBD7CC;

  /* Sage — die Sicherheitsfarbe */
  --sage:#8A9A82;
  --sage-deep:#54654C;
  --sage-soft:#E1E7DC;

  /* Mocha */
  --mocha:#A47864;
  --mocha-soft:#EADFD3;

  /* Hairlines */
  --line:rgba(44,40,36,.12);
  --line-2:rgba(44,40,36,.20);
  --line-d:rgba(245,239,231,.14);

  /* Type */
  --serif:"Newsreader","Newsreader Fallback",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans","Instrument Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;

  --step--1:clamp(13px,.3vw + 12.3px,14px);
  --step-0: clamp(16px,.35vw + 15.1px,17.5px);
  --step-1: clamp(18px,.7vw + 16.2px,21px);
  --step-2: clamp(21px,1.2vw + 18px,26px);
  --step-3: clamp(25px,2.1vw + 19px,34px);
  --step-4: clamp(30px,3.4vw + 18.5px,46px);
  --step-5: clamp(34px,5vw + 16px,62px);

  --lh-tight:1.06; --lh-snug:1.17; --lh-body:1.68; --lh-relaxed:1.78;
  --ls-display:-.018em; --ls-h2:-.012em; --ls-label:.15em;

  /* Space */
  --sp-2:clamp(14px,1.6vw,18px);
  --sp-3:clamp(20px,2.4vw,28px);
  --sp-4:clamp(30px,3.6vw,42px);
  --sp-5:clamp(44px,5.5vw,66px);
  --sp-6:clamp(62px,9vw,120px);

  /* Radii, shadow, motion */
  --nav-h:66px;

  --radius-sm:11px;
  --radius:16px;
  --radius-lg:24px;
  --pill:999px;
  --shadow:0 2px 6px -3px rgba(44,36,28,.14), 0 26px 52px -30px rgba(44,36,28,.30);
  --shadow-soft:0 1px 3px -1px rgba(44,36,28,.10), 0 18px 40px -26px rgba(44,36,28,.24);
  --ease:cubic-bezier(.22,.61,.36,1);
  --focus:0 0 0 3px rgba(180,105,78,.45);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%; overflow-x:clip;
  /* sonst verschwindet das Sprungziel unter der klebenden Navigation */
  scroll-padding-top:calc(var(--nav-h) + 14px);
}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--step-0); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{max-width:100%; display:block}
p{margin:0 0 1em; text-wrap:pretty}
p:last-child{margin-bottom:0}
h1,h2,h3,h4{
  font-family:var(--serif); font-weight:600; color:var(--ink);
  line-height:var(--lh-snug); letter-spacing:var(--ls-h2);
  text-wrap:balance; margin:0 0 .45em;
}
h2{font-weight:500; font-size:var(--step-4)}
h3{font-size:var(--step-2)}
h1 em, h2 em, h3 em{font-style:italic; color:var(--clay-deep); font-weight:500}
ul,ol{margin:0; padding:0; list-style:none}
a{color:inherit}
::selection{background:rgba(180,105,78,.20)}

:focus-visible{outline:none; box-shadow:var(--focus); border-radius:6px}

.wrap{width:min(1140px,92vw); margin-inline:auto}
.wrap-n{width:min(920px,92vw); margin-inline:auto}
section{padding:var(--sp-6) 0}
.band-2{background:var(--paper-2)}
.band-dark{background:var(--espresso); color:#fff}
.band-dark h2,.band-dark h3{color:#fff}
.band-dark h2 em,.band-dark h3 em{color:#EAC08E}
.band-dark p{color:rgba(245,239,231,.72)}
.band-dark .lead{color:rgba(245,239,231,.72)}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--clay-deep); color:#fff; padding:12px 18px;
  border-radius:0 0 var(--radius-sm) 0; font-weight:600;
}
.skip:focus{left:0}

.sec-head{margin-bottom:var(--sp-5)}
.eyebrow{
  font-family:var(--sans); font-size:var(--step--1); font-weight:600;
  letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--clay-deep);
  display:flex; align-items:center; gap:10px; margin:0 0 var(--sp-2);
}
.eyebrow::before{
  content:""; width:22px; height:1.5px; background:var(--sage-deep); flex:none;
}
.band-dark .eyebrow{color:#D9A88F}
.band-dark .eyebrow::before{background:var(--sage)}
.lead{
  font-size:var(--step-1); color:var(--ink-soft);
  line-height:var(--lh-relaxed); max-width:56ch;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sans); font-size:15.5px; font-weight:600; line-height:1;
  padding:14px 26px; border-radius:var(--pill); border:0;
  background:var(--clay-deep); color:#fff; text-decoration:none; cursor:pointer;
  box-shadow:0 14px 26px -14px rgba(154,82,56,.7);
  transition:background .28s var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease);
  min-height:44px;
}
.btn:hover{background:#8a482f; transform:translateY(-2px); box-shadow:0 20px 34px -16px rgba(154,82,56,.75)}
.btn-lg{font-size:16.5px; padding:16px 30px}
.btn-ghost{
  background:transparent; color:var(--ink); border:1.5px solid var(--line-2);
  font-weight:500; box-shadow:none;
}
.btn-ghost:hover{background:transparent; border-color:var(--clay); color:var(--clay-deep); box-shadow:none}
.arr{transition:transform .28s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.cta-row{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.cta-note{
  font-size:var(--step--1); color:var(--ink-faint); margin-top:var(--sp-2);
}

/* ---------- Nav ---------- */
/* 1:1 aus style-index.css ihrer Seite übernommen, nur die Klassennamen
   heißen hier anders. Die Welle liegt absolut auf der Unterkante und ist
   unsichtbar, bis gescrollt wird. Der Trenner ist das mittlere von drei
   Flex-Kindern, deshalb schiebt space-between ihn frei in die Lücke. */
.nav{
  position:sticky; top:0; z-index:100; height:var(--nav-h);
  background:rgba(245,239,231,.82); backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.nav.scrolled{border-bottom-color:transparent; background:rgba(245,239,231,.92)}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:100%}
.nav-divider{width:1px; height:22px; background:var(--line-2); flex:none; margin:0 2px}
.brand{display:flex; align-items:center; gap:9px; text-decoration:none}
.lotus{width:32px; height:32px; transition:transform .35s var(--ease)}
.brand:hover .lotus{transform:rotate(-8deg) scale(1.07)}
.wordmark{
  font-family:var(--serif); font-weight:600; font-size:21px;
  letter-spacing:-.01em; color:var(--ink);
}
.wordmark .dot{color:var(--clay)}
.nav-right{display:flex; align-items:center; gap:28px}
.nav-link{
  font-size:15px; letter-spacing:.01em; font-weight:500; color:var(--ink-soft);
  text-decoration:none; position:relative; padding:5px 0; transition:color .25s;
}
.nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1.5px;
  background:var(--clay-deep); transform:scaleX(0); transform-origin:center;
  transition:transform .35s var(--ease);
}
.nav-link:hover{color:var(--ink)}
.nav-link:hover::after{transform:scaleX(1)}
.nav-btn{padding:10px 20px; font-size:14.5px}
.nav-wave{
  position:absolute; left:0; bottom:-1px; width:100%; height:6px;
  color:var(--clay); opacity:0; transition:opacity .5s var(--ease);
  pointer-events:none;
}
.nav.scrolled .nav-wave{opacity:.6}

/* ---------- Hero ---------- */
.hero{
  padding:var(--sp-6) 0 var(--sp-6);
  background:
    radial-gradient(46vmax 40vmax at 90% 4%, rgba(138,154,130,.16), transparent 60%),
    radial-gradient(50vmax 44vmax at 4% 98%, rgba(180,105,78,.10), transparent 62%),
    linear-gradient(180deg, var(--white), var(--paper));
}
.hero-grid{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(28px,4.5vw,72px); align-items:center;
}
.hero h1{
  font-size:var(--step-5); line-height:var(--lh-tight);
  letter-spacing:var(--ls-display); max-width:20ch; margin-bottom:.18em;
}
.hero-sub-serif{
  font-family:var(--serif); font-weight:500; font-size:var(--step-3);
  color:var(--clay-deep); line-height:1.25; margin:0 0 var(--sp-3);
  letter-spacing:var(--ls-h2);
}
.hero-lead{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(19px,1vw + 16.5px,24px); line-height:1.4; color:var(--ink-soft);
  padding-left:18px; border-left:2px solid var(--mocha);
  max-width:32ch; margin:0 0 var(--sp-3);
}
.hero-note{max-width:46ch; color:var(--ink-soft); margin-bottom:var(--sp-4)}

.figure-wrap{position:relative; isolation:isolate}
.frame{
  aspect-ratio:4/5; border-radius:210px 210px 20px 20px;
  background:var(--sage-soft); box-shadow:var(--shadow);
  outline:1px solid rgba(44,40,36,.06); overflow:hidden;
  display:grid; place-items:center;
}
.frame picture,.person-fig picture{display:block; width:100%; height:100%}
.frame img{width:100%; height:100%; object-fit:cover; object-position:50% 26%}
.frame-empty{
  font-family:var(--sans); font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--sage-deep); text-align:center; padding:0 24px; line-height:1.7;
}
.leaf{
  position:absolute; left:-30px; top:-14px; width:78px; height:78px;
  color:var(--sage); opacity:.6; z-index:0; transform:rotate(-14deg);
}
.frame{position:relative; z-index:1}
.badge{
  position:absolute; right:-10px; bottom:26px; z-index:2; background:var(--white);
  border-radius:14px; box-shadow:var(--shadow-soft); padding:12px 16px;
  border:1px solid var(--line);
}
.badge-stars{color:var(--clay); font-size:13px; letter-spacing:.06em}
.badge-txt{font-size:12.5px; color:var(--ink-faint); margin-top:2px}
.badge-txt b{color:var(--ink); font-weight:600}

/* ---------- Fakten-Leiste (espresso) ---------- */
.facts{padding:var(--sp-5) 0}
.facts-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3);
}
.fact{display:flex; gap:12px; align-items:flex-start}
.fact svg{width:22px; height:22px; color:var(--sage); flex:none; margin-top:2px}
.fact-k{
  font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(245,239,231,.5); margin:0 0 3px;
}
.fact-v{font-size:15.5px; color:#fff; font-weight:500; margin:0; line-height:1.45}

/* ---------- Erkennen ---------- */
.recog{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(28px,4.5vw,72px)}
.recog-list li{
  position:relative; padding-left:26px; margin-bottom:var(--sp-2);
  color:var(--ink-soft); max-width:52ch;
}
.recog-list li::before{
  content:""; position:absolute; left:0; top:.62em; width:7px; height:7px;
  border-radius:50%; background:var(--clay);
}
.recog-close{
  font-family:var(--serif); font-style:italic; font-size:var(--step-1);
  color:var(--ink); margin-top:var(--sp-4); max-width:44ch;
}

/* ---------- Rahmen (nicht / sondern) ---------- */
.frame-cols{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4)}
.frame-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(24px,3vw,32px); box-shadow:var(--shadow-soft);
}
.frame-card h3{font-size:var(--step-2); margin-bottom:.5em}
.frame-card.is-not h3{color:var(--ink-faint)}
.frame-card.is-not{background:transparent; box-shadow:none; border-style:dashed}
.frame-card p{color:var(--ink-soft)}

/* ---------- Die drei Fragen (Signature) ---------- */
.questions{background:var(--paper-2)}
.q-grid{
  display:grid; grid-template-columns:60px 1fr; gap:clamp(20px,3vw,44px);
  align-items:stretch; max-width:820px; margin-inline:auto;
}
.q-line{display:flex; justify-content:center}
.q-line svg{height:100%; width:44px; color:var(--clay); opacity:.72}
.q-line path{
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 1.9s var(--ease);
}
.q-line.in path{stroke-dashoffset:0}
.q-list{display:flex; flex-direction:column; justify-content:space-between; gap:var(--sp-5)}
.q-item p{
  font-family:var(--serif); font-weight:500; font-size:var(--step-3);
  line-height:1.3; letter-spacing:var(--ls-h2); color:var(--ink); margin:0;
}
.q-item span{
  display:block; font-family:var(--sans); font-size:var(--step--1);
  letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--sage-deep); font-weight:600; margin-bottom:10px;
}

/* ---------- Ablauf (espresso, nummeriert) ---------- */
.steps{counter-reset:step; display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.step{
  background:rgba(245,239,231,.05); border:1px solid rgba(245,239,231,.16);
  border-radius:var(--radius-lg); padding:clamp(24px,3vw,30px);
}
/* Der Schritt nach dem Workshop-Tag. Volle Breite, weil er außerhalb
   der vier Stunden liegt und sich optisch absetzen soll. */
.step-wide{grid-column:1 / -1}
.step::before{
  counter-increment:step; content:"0" counter(step);
  font-family:var(--serif); font-size:34px; font-weight:500; color:var(--sage);
  display:block; line-height:1; margin-bottom:14px;
}
.step h3{font-size:var(--step-2); margin-bottom:.4em}
.step .t{
  font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(245,239,231,.5); margin-bottom:8px;
}

/* ---------- Zitatband (cinematic) ---------- */
.quoteband{
  position:relative; overflow:hidden;
  background:var(--espresso-2); color:#fff; text-align:center;
  padding:var(--sp-6) 0;
  /* Height grows with the viewport so the band's aspect stays near the
     image's 2.37:1. With a fixed height the crop window tightens on wide
     screens and slices the faces off. */
  min-height:clamp(380px, 36vw, 900px);
  display:grid; align-content:center;
}
.quoteband .cine-wrap{position:absolute; inset:0}
.quoteband .cine{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 30%;
}
.quoteband::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 105% at 50% 45%, rgba(26,22,19,.44), rgba(26,22,19,.82) 78%),
    linear-gradient(180deg, rgba(26,22,19,.52), rgba(26,22,19,.64));
}
.quoteband > .wrap-n{position:relative; z-index:1}
.quoteband .mark{
  font-family:var(--serif); font-size:56px; color:#EAC08E; opacity:.92;
  line-height:1; display:block; margin-bottom:6px;
}
.quoteband blockquote{
  margin:0 auto; max-width:24ch; font-family:var(--serif); font-weight:500;
  font-size:var(--step-3); line-height:1.3; color:#fff;
}
.quoteband blockquote em{font-style:italic; color:#EAC08E}
.quoteband cite{
  display:block; margin-top:var(--sp-3); font-family:var(--sans); font-style:normal;
  font-size:var(--step--1); letter-spacing:var(--ls-label); text-transform:uppercase;
  color:rgba(245,239,231,.6);
}

/* ---------- Begleitung ---------- */
.people{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-4)}
.person{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft); padding:clamp(20px,2.4vw,26px);
  display:grid; grid-template-columns:auto 1fr; gap:var(--sp-3); align-items:start;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.person:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.person-fig{
  width:150px; aspect-ratio:4/5; border-radius:14px; overflow:hidden;
  background:var(--sage-soft); display:grid; place-items:center;
}
.person-fig img{width:100%; height:100%; object-fit:cover; object-position:50% 20%}
.person-body h3{margin-bottom:.15em}
.person-role{
  font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--clay-deep); margin:0 0 12px;
}
.person-body p{color:var(--ink-soft); font-size:15.5px}

/* ---------- Sicherheit ---------- */
.safety{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4.5vw,72px)}
.note-sage{
  background:var(--sage-soft); border-radius:var(--radius); color:var(--sage-deep);
  font-size:14.5px; line-height:1.65; padding:16px 18px;
}
.note-dashed{
  border:1px dashed var(--line-2); border-radius:var(--radius); color:var(--ink-soft);
  font-size:14px; line-height:1.65; padding:16px 18px; margin-top:var(--sp-3);
}
.contra{
  columns:2; column-gap:var(--sp-4); margin-top:var(--sp-3);
  font-size:14.5px; color:var(--ink-soft);
}
.contra li{break-inside:avoid; padding-left:18px; position:relative; margin-bottom:7px}
.contra li::before{
  content:""; position:absolute; left:0; top:.6em; width:6px; height:1.5px;
  background:var(--clay);
}

/* ---------- Anmeldung ---------- */
.book-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); padding:clamp(28px,4vw,48px);
  /* Feste Proportionen statt `auto`. Mit `auto` bestimmt der längste
     Satz rechts die Spaltenbreite und quetscht die Leistungsliste links
     auf ein Drittel zusammen. */
  display:grid; grid-template-columns:1.1fr .9fr; gap:var(--sp-4); align-items:center;
}
.price{
  font-family:var(--serif); font-weight:600; font-size:var(--step-4);
  color:var(--ink); line-height:1; margin:0 0 6px;
}
.price-note{font-size:var(--step--1); color:var(--ink-faint); margin:0}
.incl{margin:var(--sp-3) 0 0; display:grid; gap:8px}
.incl li{
  position:relative; padding-left:24px; font-size:15.5px; color:var(--ink-soft);
}
.incl li::before{
  content:""; position:absolute; left:0; top:.52em; width:9px; height:5px;
  border-left:1.6px solid var(--sage-deep); border-bottom:1.6px solid var(--sage-deep);
  transform:rotate(-45deg);
}
.book-side{text-align:right}
.book-side .cta-note{max-width:32ch; margin-left:auto}
.pay-methods{
  font-size:13px; letter-spacing:.02em; color:var(--ink-faint);
  margin:var(--sp-2) 0 0; line-height:1.6;
}
.seats{
  display:inline-block; background:var(--sage-soft); color:var(--sage-deep);
  font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 11px; border-radius:var(--pill); margin-bottom:var(--sp-3);
}

/* ---------- Stimme ---------- */
.stimme{
  max-width:660px; margin-inline:auto; text-align:center;
}
.stimme .mark{
  font-family:var(--serif); font-size:52px; line-height:1; color:var(--clay);
  opacity:.75; display:block; margin-bottom:2px;
}
.stimme blockquote{
  margin:0; font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:var(--step-2); line-height:1.5; color:var(--ink);
}
/* Emoji haben keinen kursiven Schnitt, der Browser schert sie sonst
   künstlich schräg. In einem kursiven Zitat sieht das schief aus. */
.emoji{font-style:normal; display:inline-block; font-synthesis:none}
.stimme cite{
  display:block; margin-top:var(--sp-3); font-family:var(--sans); font-style:normal;
  font-size:var(--step--1); font-weight:600; letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--sage-deep);
}

/* ---------- FAQ ---------- */
.faq{max-width:760px; margin-inline:auto}
.faq details{border-top:1px solid var(--line); padding:var(--sp-3) 0}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{
  font-family:var(--serif); font-weight:600; font-size:var(--step-1);
  color:var(--ink); cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:flex-start; gap:20px;
  min-height:44px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; flex:none; width:9px; height:9px; margin-top:9px;
  border-right:2px solid var(--clay); border-bottom:2px solid var(--clay);
  transform:rotate(45deg); transition:transform .28s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .a{max-width:62ch; color:var(--ink-soft); padding-top:var(--sp-2)}

/* ---------- Breath divider ---------- */
.breath-wrap{display:flex; justify-content:center; padding:0 0 var(--sp-2)}
.breath{width:min(760px,86vw); height:40px; color:var(--clay); opacity:.72}
.breath path{stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.9s var(--ease)}
.breath.in path{stroke-dashoffset:0}

/* ---------- Footer ---------- */
.foot{background:var(--espresso-2); color:rgba(245,239,231,.72); padding:var(--sp-5) 0}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--sp-4)}
.foot h4{
  font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--sage); margin:0 0 14px;
}
.foot a{color:rgba(245,239,231,.72); text-decoration:none; font-size:15px}
.foot a:hover{color:#fff; text-decoration:underline; text-underline-offset:2px}
.foot li{margin-bottom:9px}
.foot .wordmark{color:#fff; font-size:19px}
.foot-bottom{
  border-top:1px solid var(--line-d); margin-top:var(--sp-4); padding-top:var(--sp-3);
  display:flex; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap;
  font-size:13px; color:rgba(245,239,231,.5);
}

/* ---------- Einwilligungs-Banner ---------- */
/* Bodenständige Karte, kein Wall. Die Seite bleibt lesbar und scrollbar.
   Rechtlich trägt nicht die Modalität, sondern dass vor der Einwilligung
   nichts geladen wird und Ablehnen genau ein gleichwertiger Klick ist. */
.cc{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  display:none; padding:var(--sp-3);
  animation:cc-in .3s var(--ease);
}
.cc-open{display:block}
@keyframes cc-in{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
.cc-card{
  width:min(680px, 100%); margin-inline:auto;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow);
  padding:clamp(20px,2.6vw,28px);
}
.cc-title{
  font-family:var(--serif); font-weight:600; font-size:var(--step-2);
  color:var(--ink); margin:0 0 .3em; line-height:var(--lh-snug);
}
.cc-text{
  font-size:15px; line-height:1.62; color:var(--ink-soft); margin:0 0 var(--sp-3);
  max-width:62ch;
}
.cc-text a{color:var(--clay-deep); text-decoration:underline; text-underline-offset:2px}
.cc-row{display:flex; flex-wrap:wrap; gap:12px}
.cc-row .btn{flex:0 0 auto}
@media (max-width:600px){
  .cc-row .btn{flex:1 1 auto; justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .cc{animation:none}
}

/* ---------- Scroll reveal ---------- */
.js .reveal{opacity:0; transform:translateY(22px)}
.js .reveal.in{opacity:1; transform:none; transition:opacity .6s var(--ease), transform .6s var(--ease)}
.js .reveal.d1.in{transition-delay:80ms}
.js .reveal.d2.in{transition-delay:160ms}
.js .reveal.d3.in{transition-delay:240ms}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero-grid,.recog,.safety,.frame-cols,.people,.steps,.foot-grid{grid-template-columns:1fr}
  .facts-grid{grid-template-columns:repeat(2,1fr)}
  .figure-wrap{width:100%; max-width:420px; margin-inline:auto; order:-1}
  .book-card{grid-template-columns:1fr}
  .book-side{text-align:left}
  .book-side .cta-note{margin-left:0}
  .nav-link{display:none}
  .nav-divider{display:none}
}
@media (max-width:600px){
  .facts-grid{grid-template-columns:1fr}
  .frame{border-radius:160px 160px 18px 18px}
  .contra{columns:1}
  /* Welle weg, dafür eine echte Kante, genau wie auf ihrer Seite */
  .nav.scrolled{border-bottom-color:var(--line)}
  .leaf{left:-8px; top:-8px; width:60px; height:60px}
  .badge{right:0; bottom:16px; padding:10px 13px}
  .person{grid-template-columns:1fr}
  .person-fig{width:132px}
  .quoteband{min-height:360px}
  .quoteband .cine{object-position:50% 38%}
  .quoteband::after{background:linear-gradient(180deg, rgba(26,22,19,.58), rgba(26,22,19,.78))}
  .nav-wave{display:none}
  .q-grid{grid-template-columns:28px 1fr}
  .q-line svg{width:28px}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .js .reveal{opacity:1 !important; transform:none !important}
  .breath path,.q-line path{stroke-dashoffset:0 !important}
}

/* ---------- Print ---------- */
@media print{
  .nav,.btn,.breath-wrap,.leaf,.badge,.quoteband{display:none !important}
  body{background:#fff; color:#000; font-size:11pt}
  section{padding:14pt 0; break-inside:avoid}
  .band-dark,.foot{background:#fff !important; color:#000 !important}
  .band-dark p,.fact-v,.foot a{color:#000 !important}
  .frame,.person-fig{display:none}
  .faq details{border-color:#999}
  .faq .a{display:block !important}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:9pt; color:#555}
}