/* ============================================================
   Breathwork Retreat 07./08.11.2026 · Landingpage
   Geschwister der Mutterlinien-Seite, gleiches Stylesheet.
   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);
  /* Seit der Retreat-Seite ein Link zu Trustpilot (voice.md §7). */
  display:block; text-decoration:none; color:inherit;
  transition:box-shadow .28s var(--ease), transform .28s var(--ease);
}
a.badge:hover{box-shadow:var(--shadow); transform:translateY(-2px)}
a.badge:focus-visible{border-radius:14px}
.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);
}
/* Ein Schritt über die volle Breite, wenn er sich vom Rest absetzen soll.
   Auf der Retreat-Seite ungenutzt (sechs Schritte, drei pro Tag). */
.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}
/* Retreat: kein Preis auf der Seite. Der Platz von .price trägt eine
   Serif-Zeile, darunter ein Sans-Label, damit die Karte ihren Ticket-
   Charakter behält. Werte aus h3/Eyebrow im Designsystem. */
.book-title{
  font-family:var(--serif); font-weight:500; font-size:var(--step-3);
  line-height:var(--lh-snug); letter-spacing:var(--ls-h2); color:var(--ink); margin:0 0 10px;
}
.book-meta{
  font-size:var(--step--1); font-weight:600; letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--clay-deep); 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}
}