/* =========================================================================
   Hypno-Coaching-Institut – Stylesheet v5
   Aufbau: @layer reset → tokens → base → layout → components → sections → utilities
   Regeln: nur Tokens verwenden, keine Rohwerte in Komponenten. Siehe DESIGN.md.
   ========================================================================= */
@layer reset, tokens, base, layout, components, sections, utilities;

/* ---------- Schriften (selbst gehostet, kein Google-CDN → DSGVO) ---------- */
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-opsz.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-opsz-italic.woff2") format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"Manrope";src:url("../fonts/manrope.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}

@layer reset{
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body,h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0}
  ul[role=list],ol[role=list]{list-style:none;padding:0}
  img,svg,canvas{display:block;max-width:100%}
  input,button,textarea,select{font:inherit;color:inherit}
  button{cursor:pointer}
}

@layer tokens{
  :root{
    /* Farbe – Rollen siehe DESIGN.md */
    --c-night:#0B1624; --c-night-2:#102035; --c-night-3:#1A3050;
    --c-brown:#251A14;
    --c-sand:#D8C4A0; --c-sand-2:#E9DCC4; --c-sand-ink:#8A6F45;
    --c-paper:#EEE9DF; --c-paper-2:#E4DED1; --c-card:#F6F2EA;
    --c-moss:#3E5A4E; --c-sage:#7F9C8C;
    --c-ink:#1E1915; --c-ink-2:#4F463E;
    --c-on-dark:#EDE6DA; --c-on-dark-2:#B9B2A7;
    --c-line:rgb(30 25 21 / .14); --c-line-dark:rgb(237 230 218 / .14);
    --c-error:#9B2C1F;

    /* Schrift */
    --f-serif:"Newsreader",Georgia,"Times New Roman",serif;
    --f-sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
    /* Typo-Skala (7 Stufen, Verhältnis ~1,33) */
    --t--2:.75rem; --t--1:.875rem; --t-0:1rem; --t-1:1.25rem; --t-2:clamp(1.4rem,1.2rem + .8vw,1.7rem);
    --t-3:clamp(1.8rem,1.4rem + 1.8vw,2.5rem); --t-4:clamp(2.2rem,1.6rem + 3vw,3.4rem); --t-5:clamp(2.6rem,1.6rem + 4.6vw,5rem);

    /* Abstand – 8er-Raster */
    --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2rem; --s-5:3rem; --s-6:4rem; --s-7:6rem; --s-8:8rem;
    --section:clamp(var(--s-7),12vw,10.5rem);
    --gutter:clamp(1.25rem,4vw,3rem);
    --wrap:74rem; --measure:64ch;

    /* Form */
    --r-1:.5rem; --r-2:.875rem; --r-3:1.25rem; --r-pill:999px;
    --shadow-cta:0 .75rem 2rem -.75rem rgb(216 196 160 / .55);
    --shadow-panel:0 2.5rem 5rem -2.5rem rgb(0 0 0 / .6);
    /* Bewegung: nur transform/opacity, Dauer nur 100/150/200/300 ms */
    --motion-100:100ms; --motion-150:150ms; --motion-200:200ms; --motion-300:300ms;
    --ease-out:cubic-bezier(.16,1,.3,1); --ease-in:cubic-bezier(.7,0,.84,0);
  }
}

@layer base{
  html{scroll-behavior:smooth;color-scheme:light}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{background:var(--c-paper);color:var(--c-ink);font:400 var(--t-0)/1.6 var(--f-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  h1,h2,h3{font-family:var(--f-serif);font-weight:400;line-height:1.14;letter-spacing:-.014em;text-wrap:balance}
  h1{font-size:var(--t-5);font-variation-settings:"opsz" 72}
  h2{font-size:var(--t-4);font-variation-settings:"opsz" 60}
  h3{font-size:var(--t-2);line-height:1.25;font-variation-settings:"opsz" 30}
  p{text-wrap:pretty}
  p+p{margin-top:1em}
  a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
  :focus-visible{outline:2px solid var(--c-sand);outline-offset:3px;border-radius:4px}
  .on-light :focus-visible{outline-color:var(--c-moss)}
  ::selection{background:var(--c-sand);color:var(--c-night)}
}

@layer layout{
  .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
  .section{padding-block:var(--section)}
  [id]{scroll-margin-top:5.5rem}
  .split{display:grid;grid-template-columns:5fr 7fr;gap:clamp(var(--s-4),6vw,var(--s-8));align-items:start}
  .split>*{min-inline-size:0}
  a[href^="mailto:"]{overflow-wrap:anywhere}
  .split--end{align-items:end}
  .split--center{align-items:center}
  @media (max-width:56rem){.split{grid-template-columns:1fr}}
  .measure{max-width:var(--measure)}
  .on-dark{background:var(--c-night);color:var(--c-on-dark)}
  .on-dark-2{background:var(--c-night-2);color:var(--c-on-dark)}
  .on-brown{background:var(--c-brown);color:var(--c-on-dark)}
  .on-light{background:var(--c-paper);color:var(--c-ink)}
  .on-light-2{background:var(--c-paper-2);color:var(--c-ink)}
}

@layer components{
  /* Einleitungstext */
  .lead{font-size:var(--t-1);line-height:1.6;color:var(--c-ink-2);max-width:56ch}
  :is(.on-dark,.on-dark-2,.on-brown) .lead{color:var(--c-on-dark-2)}

  /* Knöpfe: primär / sekundär / Textlink */
  .btn{display:inline-flex;align-items:center;gap:var(--s-1);font:600 var(--t-0)/1 var(--f-sans);letter-spacing:.01em;text-decoration:none;padding:1.05rem 1.5rem;border-radius:var(--r-pill);border:1px solid transparent;min-block-size:2.75rem}
  .btn small{font-weight:500;opacity:.72;font-size:.85em}
  .btn--primary{background:var(--c-sand);color:var(--c-night);box-shadow:var(--shadow-cta)}
  .btn--primary:hover{background:var(--c-sand-2)}
  .btn--dark{background:var(--c-night);color:var(--c-paper)}
  .btn--dark:hover{background:var(--c-night-3)}
  .btn--outline{border-color:rgb(237 230 218 / .35);color:var(--c-on-dark)}
  .btn--outline:hover{border-color:var(--c-sand);color:var(--c-sand)}
  .btn{text-align:center;justify-content:center}
  .btn--wa{background:transparent;color:var(--c-on-dark);border-color:rgb(159 195 173 / .45)}
  .btn--wa svg{inline-size:1.25rem;block-size:1.25rem;flex:none;color:#9FC3AD}
  .btn--wa:hover{border-color:#9FC3AD;background:rgb(127 156 140 / .14)}
  .btn--primary small{opacity:.7;font-weight:500;padding-left:.5rem;border-left:1px solid rgb(11 22 36 / .25)}
  .link{font-weight:600;text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:.3em}
  .link:hover{text-decoration-thickness:2px}

  /* Logo */
  .logo{display:flex;align-items:center;gap:.85rem;text-decoration:none;line-height:1.05}
  .logo .logo__hc{block-size:2.1rem;inline-size:auto;flex:none}
  .logo__txt{padding-left:.85rem;border-left:1px solid currentColor;border-color:rgb(237 230 218 / .3)}
  .logo b{display:block;font:500 .95rem/1.1 var(--f-sans);letter-spacing:.04em}
  .logo__txt span{display:block;margin-top:.25rem;font-size:var(--t--2);letter-spacing:.06em;opacity:.75}

  /* Kopfzeile */
  .hdr{position:fixed;inset:0 0 auto;z-index:50;color:var(--c-on-dark);padding-block:.9rem}
  .hdr::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--c-night);box-shadow:0 1px 0 var(--c-line-dark);opacity:0;transition:opacity var(--motion-200) var(--ease-out)}
  .hdr.is-solid::before{opacity:1}
  .hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
  .nav{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.9rem)}
  .nav>a,.dd>button{font:500 var(--t--1)/1 var(--f-sans);text-decoration:none;background:none;border:0;padding:.5rem 0;opacity:.88;position:relative}
  .nav>a:hover,.dd>button:hover,.nav>a[aria-current=page]{opacity:1}
  .nav>a[aria-current=page]::after{content:"";position:absolute;inset:auto 0 0;block-size:1px;background:var(--c-sand)}
  .dd{position:relative}
  .dd>button::after{content:"";display:inline-block;inline-size:6px;block-size:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-3px);margin-left:.5rem}
  .dd__menu{position:absolute;top:calc(100% + .75rem);left:-1.25rem;min-inline-size:15.5rem;background:var(--c-night-2);border:1px solid var(--c-line-dark);border-radius:var(--r-2);padding:.6rem;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--motion-150) var(--ease-in),transform var(--motion-150) var(--ease-in),visibility var(--motion-150);box-shadow:var(--shadow-panel)}
  .dd:hover .dd__menu,.dd:focus-within .dd__menu,.dd.is-open .dd__menu{opacity:1;visibility:visible;transform:none;transition-timing-function:var(--ease-out);transition-duration:var(--motion-200)}
  .dd__menu a{display:block;padding:.6rem .9rem;border-radius:.55rem;text-decoration:none;font-size:var(--t--1)}
  .dd__menu a:hover{background:rgb(216 196 160 / .1);color:var(--c-sand)}
  .hdr .btn{padding:.8rem 1.15rem;font-size:var(--t--1)}
  .burger{display:none;background:none;border:0;inline-size:2.75rem;block-size:2.75rem;padding:.6rem}
  .burger span{display:block;block-size:1.5px;background:currentColor;margin-block:6px}
  @media (max-width:61rem){.nav,.hdr .btn{display:none}.burger{display:block}}

  /* Mobile Navigation */
  .mnav{position:fixed;inset:0;z-index:60;background:var(--c-night);color:var(--c-on-dark);padding:6rem var(--gutter) 2.5rem;display:flex;flex-direction:column;overflow:auto;opacity:0;visibility:hidden;transition:opacity var(--motion-150) var(--ease-in),visibility var(--motion-150)}
  .mnav.is-open{opacity:1;visibility:visible;transition-timing-function:var(--ease-out);transition-duration:var(--motion-200)}
  .mnav a{font:400 1.7rem/1.25 var(--f-serif);text-decoration:none;padding-block:.5rem;border-bottom:1px solid var(--c-line-dark)}
  .mnav a.mnav__sub{font:500 1rem/1.5 var(--f-sans);padding:.55rem 0 .55rem 1.1rem;border:0;opacity:.82}
  .mnav .btn{margin-top:var(--s-4);justify-content:center;font:600 1rem/1 var(--f-sans);border:0}
  .mnav__close{position:absolute;top:1.35rem;right:var(--gutter);inline-size:2.75rem;block-size:2.75rem;background:none;border:0;font-size:1.9rem;line-height:1}

  /* Häkchen-Liste in Ortwins Text */
  .ticks{list-style:none;padding:0;margin:.3em 0 1.2em;display:grid}
  .ticks li{padding:.45rem 0 .45rem 1.9rem;position:relative;color:var(--c-ink)}
    .ticks li::before{content:"";position:absolute;left:.1rem;top:1.1rem;inline-size:.9rem;block-size:1px;background:var(--c-sand-ink)}
  .ticks--two{grid-template-columns:1fr 1fr;column-gap:var(--s-4)}
  @media (max-width:35rem){.ticks--two{grid-template-columns:1fr}}

  /* Aufklapp-Fragen */
  .faq details{border-bottom:1px solid var(--c-line)}
  .faq details:first-child{border-top:1px solid var(--c-line)}
  .faq summary{list-style:none;cursor:pointer;padding:1.6rem 3rem 1.6rem 0;position:relative;font:400 var(--t-2)/1.25 var(--f-serif)}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"";position:absolute;right:.5rem;top:50%;inline-size:14px;block-size:14px;margin-top:-7px;background:linear-gradient(currentColor,currentColor) center/14px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 14px no-repeat;transition:transform var(--motion-200) var(--ease-out)}
  .faq details[open] summary::after{transform:rotate(45deg)}
  .faq .faq__a{padding:0 3rem 1.75rem 0;color:var(--c-ink-2);max-width:var(--measure)}

  /* Formular */
  .panel{background:var(--c-card);color:var(--c-ink);border-radius:var(--r-3);padding:clamp(1.75rem,4vw,3rem);box-shadow:var(--shadow-panel)}
  .panel h3{font-size:var(--t-3);margin-bottom:.25rem}
  .panel__sub{color:var(--c-ink-2);font-size:var(--t--1);margin-bottom:var(--s-3)}
  .row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
  @media (max-width:35rem){.row{grid-template-columns:1fr}}
  .field{display:flex;flex-direction:column;gap:.45rem;margin:0 0 var(--s-2);border:0;padding:0}
  .field label,.field legend{font-size:var(--t--1);font-weight:600;padding:0}
  .field .opt{font-weight:400;color:var(--c-ink-2)}
  .field :is(input,textarea){font:500 1rem/1.4 var(--f-sans);background:#fff;border:1px solid rgb(30 25 21 / .2);border-radius:.625rem;padding:.85rem .95rem;inline-size:100%;}
  .field textarea{min-block-size:7rem;resize:vertical}
  .field :is(input,textarea):focus{outline:0;border-color:var(--c-moss);box-shadow:0 0 0 3px rgb(62 90 78 / .16)}
  .field__msg{display:none;font-size:var(--t--1);font-weight:600;color:var(--c-error)}
  .field.is-error :is(input,textarea){border-color:var(--c-error);box-shadow:0 0 0 3px rgb(155 44 31 / .12)}
  .field.is-error .field__msg{display:block}
  .chips{display:flex;flex-wrap:wrap;gap:.5rem}
  .chips label{position:relative;font-weight:500}
  .chips input{position:absolute;opacity:0;pointer-events:none}
  .chips span{display:inline-flex;align-items:center;min-block-size:2.75rem;padding:.6rem 1.05rem;border-radius:var(--r-pill);border:1px solid rgb(30 25 21 / .2);background:#fff;font-size:var(--t--1);cursor:pointer}
  .chips input:checked+span{background:var(--c-night);border-color:var(--c-night);color:var(--c-paper)}
  .chips input:focus-visible+span{outline:2px solid var(--c-moss);outline-offset:2px}
  .consent{display:block;overflow-wrap:anywhere;font-size:var(--t--1);color:var(--c-ink-2);margin:.4rem 0 1.4rem}
  .consent input{margin-top:.25rem;accent-color:var(--c-night);inline-size:1rem;block-size:1rem;flex:none}
  .consent.is-error{color:var(--c-error)}
  .form__msg{display:none;margin:-.75rem 0 1.1rem;font-size:var(--t--1);font-weight:600;color:var(--c-error)}
  .form__msg.is-shown{display:block}
  .panel .btn{inline-size:100%;justify-content:center}
  .panel__done{display:none;text-align:center;padding-block:var(--s-4)}
  .panel.is-sent form{display:none}
  .panel.is-sent .panel__done{display:block}

  /* Zitat */
  .quote{margin:0}
  .quote blockquote{font:400 var(--t-1)/1.6 var(--f-serif)}
  .quote figcaption{margin-top:var(--s-2);font-size:var(--t--1);color:var(--c-on-dark-2)}
}

@layer sections{
  /* --- Hero --- */
  .hero{position:relative;isolation:isolate;overflow:hidden;min-block-size:clamp(40rem,100svh,62rem);display:flex;align-items:flex-end;background:var(--c-night);color:var(--c-on-dark)}
  .hero canvas,.subhero canvas{position:absolute;inset:0;inline-size:100%;block-size:100%;z-index:-2}
  .hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(6 13 23 / .9),rgb(6 13 23 / .7) 36%,rgb(6 13 23 / .42) 52%,rgb(6 13 23 / .12) 64%,rgb(6 13 23 / 0) 74%),linear-gradient(180deg,rgb(6 13 23 / .45),rgb(6 13 23 / 0) 20%),radial-gradient(60% 50% at 18% 82%,rgb(6 13 23 / .5),rgb(6 13 23 / 0))}
  .hero__window{display:none}
  .hero .btn--wa{display:none}
  @media (max-width:48rem){
    /* Handy: oben Überschrift über dem Nachthimmel, darunter ein freies Fenster auf die Küste, dann Text über dem dunklen Meer */
    .hero{--w0:42%;--w1:58%;align-items:flex-start}
    .hero::after{background:linear-gradient(180deg,rgb(6 13 23 / .5) 0,rgb(6 13 23 / .32) calc(var(--w0) - 1.5rem),rgb(6 13 23 / 0) calc(var(--w0) + 1rem),rgb(6 13 23 / 0) var(--w1),rgb(6 13 23 / .74) calc(var(--w1) + 4.5rem),rgb(6 13 23 / .9) 100%)}
    .hero .wrap{padding-block:6.5rem var(--s-6)}
    .hero h1{font-size:clamp(2.3rem,1.5rem + 4.2vw,3.4rem)}
    .hero__window{display:block;block-size:clamp(8.5rem,24svh,14rem)}
    .hero .lead{margin-block:var(--s-2) var(--s-3);font-size:var(--t-0)}
    .hero__actions{flex-direction:column;align-items:stretch;gap:.75rem;max-inline-size:28rem}
    .hero__actions .btn{inline-size:100%;padding:1rem;min-block-size:3.5rem;font-size:.95rem}
    .hero__actions .btn small{display:none}
    .hero .btn--wa{display:inline-flex;background:rgb(6 13 23 / .55)}
    .hero__actions .link{display:none}
    .hero__note{text-align:center;max-inline-size:28rem}
  }
  @media (max-width:48rem) and (max-height:44rem){.hero h1{font-size:2.15rem}.hero__window{block-size:6.5rem}.hero .wrap{padding-top:5.5rem}}
  .js .hero canvas,.js .subhero canvas{opacity:0;transition:opacity var(--motion-300) var(--ease-out)}
  .js .hero canvas.is-drawn,.js .subhero canvas.is-drawn{opacity:1}
  .hero .wrap{inline-size:100%;padding-block:9rem clamp(3.5rem,9vh,7rem)}
  .hero h1 span{display:block}
  .hero .lead{margin-block:var(--s-3) var(--s-4);color:var(--c-on-dark);max-width:46ch}
  .hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4)}
  .hero__actions .link{color:var(--c-on-dark)}
  .hero__note{margin-top:var(--s-2);font-size:var(--t--1);color:var(--c-on-dark)}
  .hero__proof{margin-top:var(--s-4);max-width:40ch;padding-left:var(--s-3);border-left:1px solid var(--c-sand)}
  .hero__proof blockquote{font:italic 400 var(--t-1)/1.5 var(--f-serif);color:var(--c-on-dark)}
  .hero__proof figcaption{margin-top:.5rem;font-size:var(--t--1);color:var(--c-on-dark-2)}
  .hero__proof figcaption a{display:inline-flex;align-items:center;min-block-size:2.75rem;text-underline-offset:.25em}
  .hero__proof figcaption a:hover{color:var(--c-sand)}
  .hero__creds{margin-top:clamp(var(--s-4),5vh,var(--s-5));padding-top:var(--s-3);border-top:1px solid var(--c-line-dark);display:flex;flex-wrap:wrap;gap:.5rem var(--s-4);font-size:var(--t--1);color:var(--c-on-dark-2)}
  @media (min-width:38rem) and (max-width:64rem) and (orientation:portrait){.hero{min-block-size:82svh}}
  /* Hero-Auftritt: die eine orchestrierte Bewegung der Seite */
  @media (prefers-reduced-motion:no-preference){
    .js .hero .wrap>*{opacity:0;transform:translateY(8px);transition:opacity var(--motion-300) var(--ease-out),transform var(--motion-300) var(--ease-out)}
    .js .hero.is-in .wrap>*{opacity:1;transform:none}
    .js .hero.is-in .wrap>:nth-child(2){transition-delay:30ms}
    .js .hero.is-in .wrap>:nth-child(3){transition-delay:60ms}
    .js .hero.is-in .wrap>:nth-child(n+4){transition-delay:90ms}
  }

  /* --- Unterseiten-Kopf --- */
  .subhero{position:relative;isolation:isolate;overflow:hidden;background:var(--c-night);color:var(--c-on-dark);padding-block:clamp(9rem,20vw,13.5rem) clamp(4rem,9vw,7rem)}
  .subhero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(6 13 23 / .88),rgb(6 13 23 / .55) 50%,rgb(6 13 23 / .1) 80%)}
  @media (max-width:48rem){
    .subhero{padding-bottom:clamp(9rem,30vw,12rem)}
    .subhero::after{background:linear-gradient(180deg,rgb(6 13 23 / .6),rgb(6 13 23 / .82) 40%,rgb(6 13 23 / .8) calc(100% - 10rem),rgb(6 13 23 / 0) calc(100% - 5rem))}
  }
  .subhero:has(+ .theme--photo){padding-bottom:clamp(8rem,14vw,12rem)}
  .subhero--long h1{font-size:clamp(2rem,1.4rem + 2.6vw,3.4rem);max-width:24ch}
  .subhero h1{font-size:var(--t-4);max-width:18ch}
  .subhero .lead{margin-top:var(--s-3);color:var(--c-on-dark)}
  .crumbs{font-size:var(--t--1);color:var(--c-on-dark-2);margin-bottom:var(--s-3)}
  .crumbs a{text-decoration:none}
  .crumbs a:hover{color:var(--c-sand)}

  /* --- Themen-Index (Liste statt Kachel-Raster) --- */
  .topics{margin-top:clamp(var(--s-5),6vw,var(--s-7));border-top:1px solid var(--c-line)}
  .topic{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) auto;gap:var(--s-2) var(--s-4);align-items:baseline;padding-block:clamp(1.25rem,2.4vw,1.9rem);border-bottom:1px solid var(--c-line);text-decoration:none}
  .topic__name{transition:transform var(--motion-200) var(--ease-out)}
  .topic__name{font:400 var(--t-3)/1.1 var(--f-serif);letter-spacing:-.015em}
  .topic__desc{color:var(--c-ink-2)}
  .topic__more{font-size:var(--t--1);font-weight:600;white-space:nowrap;color:var(--c-moss)}
  .topic:hover .topic__name{transform:translateX(.6rem)}
  .topic:hover .topic__name{color:var(--c-moss)}
  .topic--main .topic__more{color:var(--c-ink)}
  @media (max-width:48rem){.topic{grid-template-columns:1fr}.topic__more{display:none}}

  /* --- Ansatz: Ortwins Text als Kapitel --- */
  .approach__intro p{font:400 var(--t-2)/1.5 var(--f-serif);color:var(--c-ink)}
  .approach__intro p+p{color:var(--c-moss);font-style:italic}
  .chapters{margin-top:clamp(var(--s-5),7vw,var(--s-7));border-top:1px solid var(--c-line)}
  .chapter{display:grid;grid-template-columns:5fr 7fr;gap:var(--s-2) clamp(var(--s-4),5vw,var(--s-6));padding-block:clamp(var(--s-4),5vw,var(--s-5));border-bottom:1px solid var(--c-line)}
  .chapter__body{color:var(--c-ink-2);max-width:var(--measure)}
  .chapter__body .k{color:var(--c-ink);font-weight:600;margin-bottom:-.4em}
  @media (max-width:56rem){.chapter{grid-template-columns:1fr}}
  .summary{margin-top:clamp(var(--s-5),7vw,var(--s-7));background:var(--c-night);color:var(--c-on-dark);border-radius:var(--r-3);padding:clamp(var(--s-4),5vw,var(--s-6));display:grid;grid-template-columns:5fr 7fr;gap:var(--s-4)}
  .summary h3{font-size:var(--t-3)}
  .summary p{color:var(--c-on-dark-2);margin-top:var(--s-2)}
  .summary ul{list-style:none;padding:0}
  .summary li{display:flex;gap:var(--s-2);align-items:baseline;padding-block:.85rem;border-bottom:1px solid var(--c-line-dark)}
  .summary li:last-child{border-bottom:0}
  .summary li::before{content:"";inline-size:1rem;block-size:1px;background:var(--c-sand);flex:none;translate:0 -.3em}
  @media (max-width:56rem){.summary{grid-template-columns:1fr}}

  /* --- Weg in wenigen Terminen (statt Zahlen-Kacheln) --- */
  .way__quote{font:400 var(--t-4)/1.15 var(--f-serif);letter-spacing:-.015em;max-width:22ch}
  .way__sig{margin-top:var(--s-3);color:var(--c-on-dark-2);max-width:52ch}
  .path{list-style:none;padding:0;margin-top:clamp(var(--s-5),7vw,var(--s-7));display:grid;grid-template-columns:repeat(4,1fr);position:relative}
  .path::before{content:"";position:absolute;inset-inline:0;top:1.4rem;block-size:1px;background:linear-gradient(90deg,var(--c-sand) 0 75%,transparent 75%),repeating-linear-gradient(90deg,var(--c-sand) 0 6px,transparent 6px 12px);background-size:100% 1px;opacity:.6}
  .path li{position:relative;padding-top:3.6rem;padding-right:var(--s-3)}
  .path li::before{content:"";position:absolute;top:.95rem;left:0;inline-size:.95rem;block-size:.95rem;border-radius:50%;background:var(--c-brown);border:1px solid var(--c-sand)}
  .path li.is-opt::before{border-style:dashed}
  .path b{display:block;font:400 var(--t-2)/1.25 var(--f-serif);color:var(--c-on-dark)}
  .path span{display:block;margin-top:.4rem;font-size:var(--t--1);color:var(--c-on-dark-2);max-width:24ch}
  .path em{font-style:normal;display:inline-block;margin-top:.7rem;font-size:var(--t--1);font-weight:600;color:var(--c-sand)}
  @media (max-width:56rem){
    .path{grid-template-columns:1fr;row-gap:var(--s-3)}
    .path::before{inset-block:0;inset-inline:auto;left:.45rem;top:0;inline-size:1px;block-size:auto;background:var(--c-sand)}
    .path li{padding:0 0 0 2.4rem}
    .path li::before{top:.35rem}
  }
  .places{margin-top:clamp(var(--s-5),6vw,var(--s-6));display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);font-size:var(--t--1)}
  .places p{margin:0;padding:var(--s-3);border:1px solid var(--c-line-dark);border-radius:var(--r-2);color:var(--c-on-dark-2)}
  .places strong{display:block;font:400 var(--t-1)/1.25 var(--f-serif);color:var(--c-on-dark);margin-bottom:.3rem}
  @media (max-width:40rem){.places{grid-template-columns:1fr}}

  /* --- Drei Sorgen --- */
  .worries{border-top:1px solid var(--c-line)}
  .worry{padding-block:clamp(var(--s-3),3vw,var(--s-4));border-bottom:1px solid var(--c-line)}
  .worry h3{font-size:var(--t-2)}
  .worry p{margin-top:.6rem;color:var(--c-ink-2);max-width:var(--measure)}

  /* --- Gehirn-Animation (Platzhalter für das KI-Video) --- */
  .brain__stage{position:relative;aspect-ratio:16/10;border-radius:var(--r-3);overflow:hidden;background:radial-gradient(120% 90% at 50% 40%,#13253D 0%,#0A1422 70%);border:1px solid var(--c-line-dark)}
  .brain__stage canvas{position:absolute;inset:0;inline-size:100%;block-size:100%}
  .brain__tag{position:absolute;left:1rem;top:.9rem;font-size:var(--t--2);color:var(--c-on-dark-2)}
  .brain__steps{list-style:none;padding:0;margin-top:var(--s-4);counter-reset:b}
  .brain__steps li{counter-increment:b;display:grid;grid-template-columns:2.2rem 1fr;padding-block:.85rem;border-top:1px solid var(--c-line-dark);color:var(--c-on-dark-2)}
  .brain__steps li::before{content:counter(b);font:italic 400 1.05rem/1.6 var(--f-serif)}
  .brain__steps li.is-on{color:var(--c-on-dark)}
  .brain__steps li.is-on::before{color:var(--c-sand)}

  /* --- Stimmen (redaktionell statt Karten) --- */
  .voices{margin-top:clamp(var(--s-5),6vw,var(--s-6));display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5) clamp(var(--s-4),5vw,var(--s-6))}
  .voice{margin:0;padding-top:var(--s-3);border-top:1px solid var(--c-line-dark)}
  .voice blockquote{font:400 var(--t-1)/1.6 var(--f-serif);color:var(--c-on-dark)}
  .voice blockquote p+p{margin-top:.8em}
  .voice figcaption{margin-top:var(--s-3);font-size:var(--t--1);color:var(--c-on-dark-2)}
  .voice--lead{grid-column:1/-1;border-top:0;padding-top:0}
  .voice--lead blockquote{font-size:var(--t-2);line-height:1.5;max-width:58ch}
  .voice--lead{padding-left:var(--s-4);border-left:2px solid var(--c-sand)}
  .voices--flush{margin-top:0}
  @media (max-width:50rem){.voices{grid-template-columns:1fr}}

  /* --- Kontakt --- */
  .wa{display:flex;gap:var(--s-2);align-items:center;margin-top:var(--s-4);padding:1.35rem 1.5rem;border-radius:var(--r-2);background:rgb(127 156 140 / .12);border:1px solid rgb(127 156 140 / .3);text-decoration:none}
  .wa:hover{background:rgb(127 156 140 / .2)}
  .wa svg{inline-size:2.1rem;block-size:2.1rem;flex:none;color:#9FC3AD}
  .wa b{display:block;font:400 1.2rem/1.25 var(--f-serif)}
  .wa span{font-size:var(--t--1);color:var(--c-on-dark-2)}
  .addr{margin-top:var(--s-4);font-size:var(--t--1);color:var(--c-on-dark-2);line-height:1.6;font-style:normal}
  .addr a{text-decoration:none;border-bottom:1px solid var(--c-line-dark)}
  .addr a:hover{color:var(--c-sand);border-color:var(--c-sand)}

  /* --- Rauchfrei-Seite --- */
  .facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);margin-top:clamp(var(--s-5),6vw,var(--s-6))}
  .fact{background:var(--c-card);border-radius:var(--r-2);padding:var(--s-4) var(--s-4) var(--s-3)}
  .fact__fig{display:block;font:400 var(--t-4)/1 var(--f-serif);color:var(--c-moss);letter-spacing:-.03em;margin-bottom:var(--s-2)}
  .fact p{color:var(--c-ink-2);font-size:var(--t--1)}
  .fact--wide{grid-column:1/-1;background:var(--c-night);color:var(--c-on-dark)}
  .fact--wide p{color:var(--c-on-dark-2)}
  .fact--wide .fact__fig{color:var(--c-sand)}
  @media (max-width:48rem){.facts{grid-template-columns:1fr}}
  .compare{display:grid;gap:var(--s-4)}
  .compare p{margin-bottom:.6rem}
  .bar{block-size:.9rem;border-radius:var(--r-pill);background:rgb(237 230 218 / .08);overflow:hidden}
  .bar i{display:block;block-size:100%;border-radius:var(--r-pill);inline-size:var(--to);background:rgb(237 230 218 / .35);transform-origin:left}
  .bar--hyp i{background:linear-gradient(90deg,var(--c-sage),var(--c-sand))}
  .bar--7{--to:7%}.bar--50{--to:50%}
  .bar__scale{display:flex;justify-content:space-between;font-size:var(--t--2);color:var(--c-on-dark-2);margin-top:.5rem}
  @media (prefers-reduced-motion:no-preference){.js .compare .bar i{transform:scaleX(0);transition:transform var(--motion-300) var(--ease-out)}.js .compare.is-in .bar i{transform:scaleX(1)}}
  .prose{max-width:var(--measure)}
  .prose h2{font-size:var(--t-3);margin:2.2em 0 .7em}
  .prose h2:first-child{margin-top:0}
  .prose p{color:var(--c-ink-2)}
  .prose .prose__open{font:400 var(--t-1)/1.5 var(--f-serif);color:var(--c-ink)}
  .aside-line{border-left:2px solid var(--c-sand-ink);padding:.3rem 0 .3rem var(--s-3);margin-block:1.8em;font:400 var(--t-1)/1.5 var(--f-serif);color:var(--c-ink)!important}
  .traps{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4) var(--s-5);margin-block:var(--s-4) var(--s-2);max-width:62rem}
  .traps li{display:grid;grid-template-columns:2.5rem 1fr;gap:var(--s-2);color:var(--c-ink-2)}
  .traps svg{inline-size:2.5rem;block-size:2.5rem;color:var(--c-moss)}
  .traps strong{color:var(--c-ink)}
  @media (max-width:44rem){.traps{grid-template-columns:1fr}}
  .traps+.prose{margin-top:clamp(var(--s-5),6vw,var(--s-6))}
  .cta-band{margin-top:clamp(var(--s-5),7vw,var(--s-7));background:var(--c-night);color:var(--c-on-dark);border-radius:var(--r-3);padding:clamp(var(--s-4),5vw,var(--s-6));display:grid;grid-template-columns:1.4fr 1fr;gap:var(--s-4);align-items:center}
  .cta-band__q{font:400 var(--t-3)/1.25 var(--f-serif);margin:0}
  .cta-band__acts{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2)}
  .cta-band .link{color:var(--c-on-dark)}
  .cta-band--text{align-items:start;grid-template-columns:1.25fr 1fr}
  .cta-band--text h2.cta-band__q{font-size:var(--t-3)}
  .cta-band__txt{margin-top:var(--s-3);color:var(--c-on-dark-2);max-width:58ch}
  .cta-band__acts .btn{inline-size:100%}
  .cta-band__end{margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--c-line-dark);font:italic 400 var(--t-1)/1.45 var(--f-serif);color:var(--c-sand)}
  @media (max-width:48rem){.cta-band{grid-template-columns:1fr}.cta-band__acts{align-items:stretch}}

  /* --- Bilder auf Themenseiten --- */
  .tphoto{margin:0;border-radius:var(--r-3);overflow:hidden;background:var(--c-night-2)}
  .tphoto img{display:block;inline-size:100%;block-size:100%;object-fit:cover}
  .tphoto--top{aspect-ratio:21/9;margin-top:calc(-1 * clamp(4.5rem,10vw,8.5rem));margin-bottom:clamp(var(--s-5),7vw,var(--s-7));position:relative;box-shadow:var(--shadow-panel)}
  .theme--photo{padding-top:0}
  .theme--photo>.wrap{padding-top:1px}
  .tphoto--wide{aspect-ratio:21/9}
  .pair{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(var(--s-4),5vw,var(--s-6));align-items:start}
  .tphoto--side{aspect-ratio:4/5;position:sticky;top:6rem}
  @media (max-width:56rem){.pair{grid-template-columns:1fr}.tphoto--side{position:static;aspect-ratio:4/3}}
  @media (max-width:48rem){.tphoto--top{aspect-ratio:4/3;margin-top:calc(-1 * var(--s-6))}.tphoto--wide{aspect-ratio:3/2}}
  .tvoice{background:var(--c-night-2);color:var(--c-on-dark);border-radius:var(--r-3);padding:clamp(var(--s-4),5vw,var(--s-6))}
  .tvoice .voice{border-top:0;padding:0 0 0 var(--s-4);border-left:2px solid var(--c-sand)}
  .tvoice .voice blockquote{max-width:62ch}
  .theme .tvoice+*,.theme *+.tvoice,.theme .tphoto--wide+*,.theme *+.tphoto--wide,.theme .pair+*,.theme *+.pair{margin-top:clamp(var(--s-5),7vw,var(--s-7))}
  .prose+.tvoice{margin-top:clamp(var(--s-5),7vw,var(--s-7))}
  .tvoice+.cta-band{margin-top:clamp(var(--s-4),5vw,var(--s-5))}

  /* --- Themenseiten --- */
  .theme .prose+*,.theme *+.prose,.theme .figs+*,.theme .points+*,.theme .note+*{margin-top:clamp(var(--s-5),7vw,var(--s-7))}
  .theme .prose .ticks{margin-block:1em}
  .figs{background:var(--c-night);color:var(--c-on-dark);border-radius:var(--r-3);padding:clamp(var(--s-4),5vw,var(--s-6))}
  .figs h2{font-size:var(--t-3)}
  .figs ul{list-style:none;padding:0;margin-top:var(--s-5);display:grid;grid-template-columns:repeat(3,1fr)}
  .figs li{padding:0 clamp(var(--s-3),3vw,var(--s-4));border-left:1px solid var(--c-line-dark)}
  .figs li:first-child{padding-left:0;border-left:0}
  .figs h3{font-size:var(--t-1);margin-top:var(--s-2);color:var(--c-on-dark)}
  .figs li>p:last-child{margin-top:.6rem;font-size:var(--t--1);color:var(--c-on-dark-2)}
  .figs__num{font:400 var(--t-4)/1 var(--f-serif);letter-spacing:-.02em;color:var(--c-sand);margin:0}
  @media (max-width:56rem){.figs ul{grid-template-columns:1fr}.figs li{padding:var(--s-3) 0;border-left:0;border-top:1px solid var(--c-line-dark)}.figs li:first-child{padding-top:0;border-top:0}}
  .points{display:grid;grid-template-columns:5fr 7fr;gap:var(--s-4) clamp(var(--s-4),6vw,var(--s-8));align-items:start}
  .points__intro h2{font-size:var(--t-3)}
  .points__intro p{color:var(--c-ink-2);max-width:var(--measure)}
  .points__intro h2+p{margin-top:var(--s-3)}
  .points__list{list-style:none;padding:0;border-top:1px solid var(--c-line)}
  .points__list li{padding:var(--s-3) 0 var(--s-3) var(--s-4);border-bottom:1px solid var(--c-line);position:relative}
  .points__list li::before{content:"";position:absolute;left:0;top:2.15rem;inline-size:1rem;block-size:1px;background:var(--c-sand-ink)}
  .points__list h3{font-size:var(--t-1)}
  .points__list p{margin-top:.4rem;color:var(--c-ink-2)}
  @media (max-width:56rem){.points{grid-template-columns:1fr}}
  .note{max-width:var(--measure);padding:var(--s-3) var(--s-4);border-left:2px solid var(--c-moss);background:var(--c-card);border-radius:0 var(--r-2) var(--r-2) 0;color:var(--c-ink-2)}
  .teaser{background:var(--c-night-2);color:var(--c-on-dark);border-radius:var(--r-3);padding:clamp(var(--s-4),5vw,var(--s-6));display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2) var(--s-5)}
  .teaser h2{font-size:var(--t-3);grid-row:span 2}
  .teaser__fig{font:400 var(--t-2)/1.3 var(--f-serif);color:var(--c-sand)}
  .teaser p:last-child{color:var(--c-on-dark-2)}
  @media (max-width:48rem){.teaser{grid-template-columns:1fr}.teaser h2{grid-row:auto}}
  .hint{max-width:var(--measure);padding-top:var(--s-3);border-top:1px solid var(--c-line);font-size:var(--t--1);color:var(--c-ink-2)}
  .theme .cta-band+.hint{margin-top:var(--s-5)}
  .part__head{padding-bottom:clamp(var(--s-4),5vw,var(--s-5));margin-bottom:clamp(var(--s-4),5vw,var(--s-5));border-bottom:1px solid var(--c-line)}
  .part__head h2{max-width:22ch}
  .part__head .lead{margin-top:var(--s-3)}
  .sources{margin-top:clamp(var(--s-5),6vw,var(--s-6));font-size:var(--t--1);color:var(--c-ink-2);max-width:var(--measure)}
  .sources h2{font:600 var(--t--1)/1.4 var(--f-sans);letter-spacing:0;color:var(--c-ink)}
  .sources ul{list-style:none;padding:0;margin-top:.4rem}
  .sources li{display:flex;align-items:center;min-block-size:2.75rem}
  .opener{display:grid;grid-template-columns:7fr 5fr;gap:var(--s-4) clamp(var(--s-4),6vw,var(--s-8));align-items:end}
  .opener h2{font-size:var(--t-4);max-width:18ch}
  .opener__fig{border-left:2px solid var(--c-sand-ink);padding-left:var(--s-4);color:var(--c-ink-2)}
  .opener__fig .figs__num{color:var(--c-moss)}
  .opener__label{font:400 var(--t-1)/1.35 var(--f-serif);color:var(--c-ink);margin-top:.5rem}
  .opener+.cta-band{margin-top:clamp(var(--s-5),6vw,var(--s-6))}
  @media (max-width:56rem){.opener{grid-template-columns:1fr}}
  .todo{border:1px dashed var(--c-sand-ink);border-radius:var(--r-2);padding:var(--s-3) var(--s-4);background:rgb(216 196 160 / .15);color:var(--c-ink-2)}
  .todo b{color:var(--c-ink)}
  .imprint{font-size:1.05rem;line-height:1.6;font-style:normal}
  .credit{margin-top:var(--s-5);font-size:var(--t--1);color:var(--c-ink-2)}
  .credit a{display:inline-flex;align-items:center;min-block-size:2.75rem}

  /* --- Fußzeile --- */
  .ftr{background:#070E18;color:var(--c-on-dark-2);padding-block:clamp(var(--s-6),8vw,var(--s-7)) var(--s-4);font-size:var(--t--1)}
  .ftr__top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s-5);padding-bottom:var(--s-5);border-bottom:1px solid var(--c-line-dark)}
  .ftr h2{font:400 1.12rem/1 var(--f-serif);color:var(--c-on-dark);margin-bottom:var(--s-2)}
  .ftr ul{list-style:none;padding:0}
  .ftr li a{display:inline-flex;align-items:center;min-block-size:2.75rem;text-decoration:none}
  .ftr a:hover{color:var(--c-sand)}
  .ftr .logo{color:var(--c-on-dark);margin-bottom:var(--s-2)}
  .ftr__bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s-2);padding-top:var(--s-3);font-size:var(--t--1)}
  .ftr__bot nav{display:flex;gap:var(--s-3)}
  .ftr__bot a{display:inline-flex;align-items:center;min-block-size:2.75rem;text-decoration:none}
  @media (max-width:56rem){.ftr__top{grid-template-columns:1fr 1fr}}
  @media (max-width:32rem){.ftr__top{grid-template-columns:1fr}}

  /* --- Handy-Leiste --- */
  .mbar{position:fixed;inset:auto .75rem .75rem;z-index:40;display:none;gap:.5rem;padding:.5rem;border-radius:var(--r-pill);background:var(--c-night);box-shadow:var(--shadow-panel);transform:translateY(140%);transition:transform var(--motion-200) var(--ease-out)}
  .mbar.is-shown{transform:none}
  .mbar .btn{flex:1;justify-content:center;padding:.9rem 1rem;font-size:var(--t--1)}
  .mbar__wa{flex:0 0 2.75rem;display:grid;place-items:center;border-radius:var(--r-pill);background:#25332C;color:#9FC3AD}
  .mbar__wa svg{inline-size:1.4rem;block-size:1.4rem}
  @media (max-width:61rem){.mbar{display:flex}}
}

@layer components{
  .tip{position:relative}
  .tip::after{content:attr(data-tip);position:absolute;top:calc(100% + .4rem);right:0;white-space:nowrap;font:500 var(--t--1)/1.4 var(--f-sans);color:var(--c-night);background:var(--c-sand-2);padding:.35rem .6rem;border-radius:.4rem;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity var(--motion-150) var(--ease-in),transform var(--motion-150) var(--ease-in)}
  .tip:hover::after,.tip:focus-visible::after{opacity:1;transform:none;transition-timing-function:var(--ease-out)}
  .tip--up::after{top:auto;bottom:calc(100% + .4rem)}
  .burger,.mnav__close,.mbar__wa,.brain__play{inline-size:2.75rem;block-size:2.75rem;min-inline-size:2.75rem}
  .brain__play{position:absolute;right:.9rem;bottom:.9rem;display:grid;place-items:center;border-radius:50%;border:1px solid var(--c-line-dark);background:var(--c-night);color:var(--c-on-dark)}
  .brain__play:hover{border-color:var(--c-sand);color:var(--c-sand)}
  .brain__play svg{inline-size:1.1rem;block-size:1.1rem}
}
@layer utilities{
  @media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important}}
  .skip{position:absolute;left:-999px;top:.5rem;z-index:100;background:var(--c-sand);color:var(--c-night);padding:.5rem .9rem;border-radius:.5rem}
  .skip:focus{left:.5rem}
  .visually-hidden{position:absolute!important;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .mt-3{margin-top:var(--s-3)}
}