/* ElternKI & Medien Krefeld — Stylesheet
   Aufbau: Grundlagen · Kapitelfarben und -formen · Kopf und Fuß ·
   Inhalt · Kapitel-Eigenheiten · Startseite · Interaktionen · Krefeld ·
   Seitenwechsel · Bewegung.

   Jedes Kapitel hat eine Farbe, eine Form und eine eigene Bewegung:
   Verstehen  Sprechblase   (Gespräch mit einer Maschine)
   Chancen    Kreis         (Öffnen, Wachsen, Lernkurve)
   Risiken    gekappte Ecke (Warnschild, aber ruhig)
   Alltag     Bogen         (Fenster, Zuhause, Tagesrhythmus)
   Recht      Blatt mit Eselsohr (Akte, Gesetzestext)
   Krefeld    Naht          (Samt- und Seidenstadt) */

@font-face{font-family:"Newsreader";src:url(/assets/fonts/newsreader.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url(/assets/fonts/geist.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* ══ Grundlagen ═══════════════════════════════════════════════════ */
:root{
  --ink:#171C2B;
  --ink-2:#343B4D;
  --grey:#4A5163;
  --line:rgba(23,28,43,.14);
  --paper:#FFFFFF;
  --ground:#F2F3F8;
  --mark:#FFE7A3;
  --night:#141927;

  --c-verstehen:#3B55D9; --c-verstehen-tint:#E5E9FB; --c-verstehen-deep:#24359A; --c-verstehen-glow:#8EA2FF;
  --c-chancen:#EE7F22;   --c-chancen-tint:#FDEBDB;   --c-chancen-deep:#8C430C;   --c-chancen-glow:#FFB067;
  --c-risiken:#B0397C;   --c-risiken-tint:#F7E3EE;   --c-risiken-deep:#73204F;   --c-risiken-glow:#F27BBD;
  --c-alltag:#108F99;    --c-alltag-tint:#DCF2F3;    --c-alltag-deep:#0B5A61;    --c-alltag-glow:#4FD6DF;
  --c-recht:#6B4CC4;     --c-recht-tint:#ECE6F9;     --c-recht-deep:#43307F;     --c-recht-glow:#B39BFF;
  --c-krefeld:#17805C;   --c-krefeld-tint:#DDF0E8;   --c-krefeld-deep:#0F4D38;   --c-krefeld-glow:#5DDCA8;
  --help:#C81E1E; --help-tint:#FDE3E3; --help-ink:#8E1414;

  --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Geist","Helvetica Neue",Arial,system-ui,sans-serif;

  --gutter:clamp(18px,4vw,48px);
  --measure:68ch;
  --wide:1280px;
  --bar:64px;

  --step--1:clamp(15px,.9rem + .1vw,16px);
  --step-0:clamp(17.5px,1rem + .25vw,19px);
  --step-1:clamp(20px,1.1rem + .5vw,24px);
  --step-2:clamp(24px,1.2rem + 1vw,32px);
  --step-3:clamp(29px,1.25rem + 2vw,46px);
  --step-4:clamp(36px,1.3rem + 3.6vw,74px);
  --step-5:clamp(42px,1.1rem + 5.4vw,104px);

  /* Startseite und Seiten ohne Kapitel */
  --a:var(--c-verstehen);--a-tint:var(--c-verstehen-tint);--a-deep:var(--c-verstehen-deep);--a-glow:var(--c-verstehen-glow);
  --b:#F0A85C;--b-tint:#FDEEDD;--on-a:#fff;
  --g1:#6E7BFF;--g2:#FF9F5A;--g3:#C77DFF;--g4:#4FD1C5;
  --r:22px;
  /* Kopf- und Fußleiste: neutrale Töne, aber derselbe Aufbau wie die Kapitel-
     Hintergründe (.ambient): ein Grundverlauf unter 155°, darüber weiche Flächen
     an denselben Stellen, die ineinanderlaufen. Leiste weiß-grau, Fuß schwarz-grau. */
  --bar-bg:
    radial-gradient(60% 180% at 4% -40%,#FFFFFF 0%,rgba(255,255,255,0) 70%),
    radial-gradient(50% 160% at 78% -30%,#E2E5EB 0%,rgba(226,229,235,0) 70%),
    radial-gradient(45% 170% at 46% 140%,#D9DDE4 0%,rgba(217,221,228,0) 70%),
    radial-gradient(40% 200% at 100% 120%,#F4F5F8 0%,rgba(244,245,248,0) 70%),
    linear-gradient(155deg,#F7F8FA 0%,#E8EBF0 48%,#EFF1F4 100%);
  --foot-bg:
    radial-gradient(55% 60% at 0% 0%,#3B404A 0%,rgba(59,64,74,0) 72%),
    radial-gradient(50% 55% at 100% 8%,#2B2F37 0%,rgba(43,47,55,0) 72%),
    radial-gradient(45% 60% at 40% 100%,#262A31 0%,rgba(38,42,49,0) 72%),
    radial-gradient(40% 50% at 0% 100%,#1A1C21 0%,rgba(26,28,33,0) 72%),
    linear-gradient(155deg,#16181C 0%,#24272D 48%,#111316 100%);
  color-scheme:light;
}
[data-section="verstehen"],.t-verstehen{--a:var(--c-verstehen);--a-tint:var(--c-verstehen-tint);--a-deep:var(--c-verstehen-deep);--a-glow:var(--c-verstehen-glow);--b:#55B6F2;--b-tint:#E1F2FD;--on-a:#fff;--r:24px 24px 24px 6px}
[data-section="chancen"],.t-chancen{--a:var(--c-chancen);--a-tint:var(--c-chancen-tint);--a-deep:var(--c-chancen-deep);--a-glow:var(--c-chancen-glow);--b:#F2C230;--b-tint:#FDF4D6;--on-a:#1A1408;--r:40px}
[data-section="risiken"],.t-risiken{--a:var(--c-risiken);--a-tint:var(--c-risiken-tint);--a-deep:var(--c-risiken-deep);--a-glow:var(--c-risiken-glow);--b:#41AEB8;--b-tint:#DFF2F3;--on-a:#fff;--r:0}
[data-section="alltag"],.t-alltag{--a:var(--c-alltag);--a-tint:var(--c-alltag-tint);--a-deep:var(--c-alltag-deep);--a-glow:var(--c-alltag-glow);--b:#F2A65A;--b-tint:#FDEEDD;--on-a:#fff;--r:999px 999px 18px 18px}
[data-section="recht"],.t-recht{--a:var(--c-recht);--a-tint:var(--c-recht-tint);--a-deep:var(--c-recht-deep);--a-glow:var(--c-recht-glow);--b:#E07AA8;--b-tint:#F9E6EF;--on-a:#fff;--r:4px}
[data-section="krefeld"],.t-krefeld{--a:var(--c-krefeld);--a-tint:var(--c-krefeld-tint);--a-deep:var(--c-krefeld-deep);--a-glow:var(--c-krefeld-glow);--b:#E9A93C;--b-tint:#FCF0D9;--on-a:#fff;--r:16px}

/* Wandernde Farbflächen im Hintergrund, je Kapitel eigene Töne */
[data-section="verstehen"],.nav-item.t-verstehen{--g1:#4F68FF;--g2:#7FB6FF;--g3:#8C7CFF;--g4:#5FD0F5}
[data-section="chancen"],.nav-item.t-chancen{--g1:#FF8F3A;--g2:#FFC94A;--g3:#FF7A6B;--g4:#8C9CFF}
[data-section="risiken"],.nav-item.t-risiken{--g1:#E0569B;--g2:#A77BFF;--g3:#FF9A9A;--g4:#4FC3CC}
[data-section="alltag"],.nav-item.t-alltag{--g1:#22B0B6;--g2:#FFB066;--g3:#4FD08E;--g4:#6F9BFF}
[data-section="recht"],.nav-item.t-recht{--g1:#8A6CFF;--g2:#F27BB5;--g3:#5A82FF;--g4:#C49BFF}
[data-section="krefeld"],.nav-item.t-krefeld{--g1:#2A9E70;--g2:#FFB55C;--g3:#5FD3A6;--g4:#A9D35E}

*,*::before,*::after{box-sizing:border-box}
html{overscroll-behavior-y:none;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--bar) + 24px);background:var(--ground)}
body{margin:0;background:transparent;color:var(--ink);font-family:var(--sans);font-size:var(--step-0);line-height:1.62;
  font-feature-settings:"kern","liga";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--a-deep);outline-offset:3px;border-radius:3px}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px}
.skip:focus{top:12px}
a,button,summary,label,select,input{touch-action:manipulation}

h1,h2,h3,h4{margin:0;font-weight:600;text-wrap:balance}
h1,h2,.h1{font-family:var(--serif);letter-spacing:-.015em;line-height:1.06}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3);line-height:1.1}
h3{font-family:var(--sans);font-size:var(--step-1);line-height:1.3;letter-spacing:-.01em}
h4{font-size:var(--step-0)}
p{margin:0}
.lead{font-size:var(--step-1);line-height:1.45;color:var(--ink-2);max-width:42ch;margin-top:20px;text-wrap:pretty}
.small{font-size:var(--step--1);line-height:1.5}
.muted{color:var(--grey)}
strong,b{font-weight:600}
.num{font-variant-numeric:tabular-nums lining-nums}
h1,h2{hyphens:manual;overflow-wrap:break-word}
@media (max-width:560px){h1,h2,.h1{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:14 6 6}}
.is-doc h1,.is-doc h2{hyphens:auto;-webkit-hyphens:auto}

/* ══ Raster ═══════════════════════════════════════════════════════ */
.wrap{max-width:var(--wide);margin-inline:auto;padding-inline:var(--gutter)}
.prose{max-width:calc(var(--measure) + 2 * var(--gutter));padding-inline:var(--gutter);margin-inline:auto}
.section{padding-block:clamp(40px,6vw,80px)}
.cols{display:grid;gap:clamp(24px,4vw,56px)}
@media (min-width:860px){.cols--2{grid-template-columns:1fr 1fr}}
.cols > * > * + *{margin-top:.8em}

/* Fließtext */
.prose > * + *{margin-top:1em}
.prose h2{margin-top:clamp(56px,7vw,88px)}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:2em}
.prose h2 + *{margin-top:.8em}
.prose h3 + *{margin-top:.5em}
.prose ul,.prose ol{padding-left:1.2em}
.prose li + li{margin-top:.45em}
.prose li::marker{color:var(--a)}
.prose a:not([class]){text-decoration-color:var(--a)}
.prose blockquote{margin:1.6em 0;padding:4px 0 4px 24px;border-left:4px solid var(--a);font-family:var(--serif);font-size:var(--step-2);line-height:1.3}
.prose blockquote footer{font-family:var(--sans);font-size:var(--step--1);color:var(--a-deep);margin-top:12px}
.quote{font-family:var(--serif);font-size:var(--step-2);line-height:1.3;font-weight:500}
.source{font-size:var(--step--1);color:var(--grey);line-height:1.5}
.source a{color:inherit}
.prose .source{margin-top:1.4em}
mark{background:var(--mark);padding:0 .15em}
.keyline{font-family:var(--serif);font-size:var(--step-2);line-height:1.28;font-weight:500;color:var(--a-deep);max-width:30ch}

/* Überschriften der zweiten Ebene tragen das Kapitelzeichen */
.prose h2::before{content:"";display:block;margin-bottom:18px;width:44px;height:14px;background:var(--a)}
[data-section="verstehen"] .prose h2::before{width:44px;height:30px;border-radius:15px 15px 15px 4px;background:
  radial-gradient(circle at 12px 15px,#fff 3px,transparent 3.5px),radial-gradient(circle at 22px 15px,#fff 3px,transparent 3.5px),radial-gradient(circle at 32px 15px,#fff 3px,transparent 3.5px),var(--a)}
[data-section="chancen"] .prose h2::before{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle,var(--b) 0 34%,var(--a) 36%)}
[data-section="risiken"] .prose h2::before{width:40px;height:22px;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
[data-section="alltag"] .prose h2::before{width:28px;height:34px;border-radius:999px 999px 4px 4px}
[data-section="recht"] .prose h2::before{width:28px;height:34px;border-radius:2px;background:linear-gradient(225deg,transparent 0 8px,var(--a-deep) 8px 11px,var(--a) 11px)}
[data-section="krefeld"] .prose h2::before{width:64px;height:6px;border-radius:3px;background:repeating-linear-gradient(90deg,var(--a) 0 10px,transparent 10px 16px)}

/* Kästen */
.note{background:linear-gradient(90deg,color-mix(in srgb,var(--a-tint) 80%,transparent),transparent 85%);border-radius:0;padding:clamp(14px,2vw,22px) clamp(16px,2.4vw,26px);border:0;border-left:5px solid var(--a)}
.note > * + *{margin-top:.7em}
.note h3,.note .note-t{font-size:var(--step-0);font-weight:600;font-family:var(--sans);color:var(--a-deep)}
.note--velvet{background:var(--a-tint);border-left:0;border-radius:var(--r);padding:clamp(18px,2.4vw,28px)}
.note--line{background:none;border:0;border-left:3px solid var(--a);border-radius:0;padding:4px 0 4px 20px}
[data-section="risiken"] .note--velvet{clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}
[data-section="alltag"] .note--velvet{border-radius:26px}
[data-section="krefeld"] .note{border-left-style:dashed}

/* Eigener Tipp des Autors: deutlich als persönliche Erfahrung gekennzeichnet */
.tip{position:relative;margin-top:1.6em!important;padding:clamp(22px,3vw,34px);background:#fff;border-radius:22px;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--a)}
.tip-k{display:inline-flex;align-items:center;gap:8px;font-size:var(--step--1);font-weight:600;color:var(--ink);background:var(--mark);padding:4px 12px;border-radius:999px}
.tip h3{font-family:var(--serif);font-size:var(--step-2);font-weight:600;margin-top:14px}
.tip > * + *{margin-top:.8em}
.tip .tip-basis{font-size:var(--step--1);color:var(--ink-2);border-top:1px solid var(--line);padding-top:14px;margin-top:1.2em}
.tip .tip-basis ul{margin:.5em 0 0;padding-left:1.1em}

/* Listen */
.steps{list-style:none;padding:0!important;counter-reset:s}
.steps > li{counter-increment:s;position:relative;padding-left:2.6em;margin-top:1em!important}
.steps > li::before{content:counter(s);position:absolute;left:0;top:.02em;width:1.75em;height:1.75em;border-radius:50%;background:var(--a);color:var(--on-a);
  font-size:.8em;font-weight:600;display:grid;place-items:center;line-height:1}
[data-section="risiken"] .steps > li::before{border-radius:0;clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px))}
[data-section="recht"] .steps > li::before{border-radius:3px}
[data-section="alltag"] .steps > li::before{border-radius:999px 999px 4px 4px}
.steps > li > b:first-child,.steps > li > strong:first-child{display:block}
.ticks{list-style:none;padding:0!important}
.ticks > li{position:relative;padding-left:1.7em}
.ticks > li::before{content:"";position:absolute;left:.15em;top:.55em;width:.72em;height:.38em;border-left:2.5px solid var(--a);border-bottom:2.5px solid var(--a);transform:rotate(-45deg)}
.dashes{list-style:none;padding:0!important}
.dashes > li{position:relative;padding-left:1.4em}
.dashes > li::before{content:"";position:absolute;left:0;top:.78em;width:.7em;border-top:2.5px solid var(--a)}

/* Tabellen */
.table-wrap{overflow-x:auto;margin-top:1.4em;max-width:100%}
table{border-collapse:collapse;width:100%;font-size:var(--step--1);line-height:1.5}
th,td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-bottom:1px solid var(--line)}
th{font-weight:600}
thead th{border-bottom:2px solid var(--a)}
td:first-child{font-weight:600;min-width:9em}

/* Aufklapper */
details.acc{border-top:1px solid var(--line)}
details.acc:last-of-type{border-bottom:1px solid var(--line)}
details.acc > summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;position:relative;font-weight:600}
details.acc > summary::-webkit-details-marker{display:none}
details.acc > summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;margin-top:-7px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);transition:transform .2s}
details.acc[open] > summary::after{transform:rotate(-135deg);margin-top:-2px}
details.acc > div{padding:0 0 22px}
details.acc > div > * + *{margin-top:.8em}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:10px 20px;border-radius:999px;border:1.5px solid var(--ink);background:var(--ink);color:#fff;
  font-weight:600;font-size:var(--step--1);text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.btn:hover{background:var(--a-deep);border-color:var(--a-deep)}
.btn--ghost{background:rgba(255,255,255,.6);color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--small{min-height:44px;padding:6px 16px}
.textlink{font-weight:600;color:var(--a-deep);text-decoration:underline;text-underline-offset:.2em}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.4em}

/* ══ Kopfzeile ═════════════════════════════════════════════════════
   Dunkler Grund, damit die Kapitelfarben leuchten. Verschwindet beim
   Lesen nach unten und kommt beim Zurückscrollen wieder. */
.site-header{position:sticky;top:0;z-index:50;color:var(--ink);padding-top:env(safe-area-inset-top,0px);
  background:var(--bar-bg);box-shadow:inset 0 -3px 0 var(--a),0 1px 0 rgba(23,28,43,.06);transition:transform .32s cubic-bezier(.3,.7,.2,1)}
body:not([data-section]) .site-header,body[data-section=""] .site-header{box-shadow:0 1px 0 rgba(23,28,43,.1)}
.site-header.is-hidden{transform:translateY(-100%)}
.bar{max-width:var(--wide);margin-inline:auto;padding-inline:var(--gutter);height:var(--bar);display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:baseline;gap:10px;padding-top:10px;text-decoration:none;white-space:nowrap;margin-right:auto;min-height:44px}
/* Logo-Menü: gleiches Mega-Panel wie die Kapitel, Klick aufs Logo führt zur Startseite */
.brand-wrap{margin-right:auto}
.brand{margin-right:0}
.brand-wrap > .panel{border-top-color:var(--ink)}
.brand-wrap .panel-title{color:var(--ink)}
.brand-wrap .panel-list a:hover,.brand-wrap .panel-list a:focus-visible{background:var(--ground)}
html.nav-compact .brand-wrap > .panel{display:none}
@media (max-width:1119px){html:not(.js) .brand-wrap > .panel{display:none}}
.brand-name{font-family:var(--serif);font-weight:600;font-size:23px;letter-spacing:-.01em}
.brand-place{font-size:13px;color:var(--grey);font-weight:500;padding-top:4px}
.primary > ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.nav-top{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;border-radius:999px;text-decoration:none;font-size:15px;font-weight:500;color:var(--ink-2);white-space:nowrap;transition:background-color .15s,color .15s}
.nav-top::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--a);flex:none}
.nav-item:hover > .nav-top,.nav-item:focus-within > .nav-top{color:var(--ink);background:rgba(255,255,255,.75)}
.nav-item.is-current > .nav-top{color:#fff;background:var(--a-deep);font-weight:600}
.nav-item.is-current > .nav-top::before{background:currentColor}
.bar-end{display:flex;align-items:center;gap:10px}
.help-link{display:inline-flex;align-items:center;min-height:44px;padding:6px 18px;border-radius:999px;background:var(--help-tint);color:var(--help-ink);border:1.5px solid #F4B5B5;text-decoration:none;font-weight:700;font-size:15px;transition:background-color .15s,color .15s,border-color .15s}
.help-link:hover,.help-link:focus-visible{background:var(--help);border-color:var(--help);color:#fff}
.age-chip{display:inline-flex;align-items:center;min-height:44px;padding:6px 14px;border-radius:999px;border:1px solid rgba(23,28,43,.25);background:rgba(255,255,255,.6);color:var(--ink);font-size:14px;cursor:pointer;white-space:nowrap}
.age-chip:hover{border-color:var(--ink)}
.site-header :focus-visible{outline-color:var(--ink)}

/* Mega-Dropdown: hell, mit Kapitelfarbe */
.panel{position:absolute;left:0;right:0;top:100%;background:#fff;color:var(--ink);box-shadow:0 30px 60px -30px rgba(20,25,39,.45);
  border-top:4px solid var(--a);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;transition-delay:.08s}
.nav-item:hover > .panel,.nav-item:focus-within > .panel,.nav-item.is-open > .panel{opacity:1;visibility:visible;transform:none;transition-delay:.06s,.06s,0s}
.nav-item.is-closed > .panel{opacity:0!important;visibility:hidden!important}
.panel-inner{max-width:var(--wide);margin-inline:auto;padding:28px var(--gutter) 36px;display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:48px}
.panel-title{font-family:var(--serif);font-size:32px;font-weight:600;line-height:1.1;margin-bottom:10px;color:var(--a-deep)}
.panel-intro p:not(.panel-title){color:var(--ink-2);font-size:15px;line-height:1.5}
.panel-all{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;font-weight:600;font-size:15px;color:var(--a-deep)}
.panel-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 24px}
.panel-list a{display:block;padding:10px 14px;border-radius:12px;text-decoration:none}
.panel-list a:hover,.panel-list a:focus-visible{background:var(--a-tint)}
.pl-t{display:block;font-weight:600;font-size:16px}
.pl-d{display:block;font-size:14px;color:var(--grey);line-height:1.45;margin-top:2px}

/* Burger links und Menü */
.burger{display:none;width:44px;height:44px;margin-left:-10px;border:0;background:none;cursor:pointer;border-radius:10px}
.burger-lines{display:grid;gap:5px;width:22px;margin:auto}
.burger-lines i{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] .burger-lines i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] .burger-lines i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger-lines i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer{position:fixed;inset:calc(var(--bar) + env(safe-area-inset-top,0px)) 0 0 0;background:var(--ground);color:var(--ink);overflow-y:auto;overscroll-behavior:contain}
.drawer-inner{padding:8px var(--gutter) calc(40px + env(safe-area-inset-bottom,0px));max-width:640px}
.dr-sec{border-bottom:1px solid var(--line)}
.dr-sec > summary{list-style:none;cursor:pointer;padding:16px 0;font-family:var(--serif);font-size:26px;font-weight:600;display:flex;align-items:center;gap:14px}
.dr-sec > summary::-webkit-details-marker{display:none}
.dr-sec > summary::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--a);flex:none}
.dr-sec > summary::after{content:"";margin-left:auto;width:10px;height:10px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);margin-right:6px;transition:transform .2s}
.dr-sec[open] > summary::after{transform:rotate(-135deg)}
.dr-sec ul,.dr-extra{list-style:none;margin:0;padding:0 0 14px}
.dr-sec a,.dr-extra a{display:block;padding:10px 0 10px 28px;text-decoration:none;font-size:17px}
.dr-extra{padding-top:16px}
.dr-extra a{font-weight:600;padding-left:0}
/* Ohne JavaScript: Burger unter 1120 px. Mit JavaScript entscheidet die Messung
   in site.js (html.nav-compact), ob die Kapitel in eine Zeile passen. */
html:not(.js) .primary{display:none}
@media (min-width:1120px){html:not(.js) .primary{display:block}}
@media (max-width:1119px){html:not(.js) .burger{display:block}}
html.js.nav-compact .primary{display:none}
html.js.nav-compact .burger{display:block}
html.js:not(.nav-compact) .drawer{display:none!important}
html.js .primary > ul{flex-wrap:nowrap}
@media (max-width:440px){.brand-place{display:none}.age-chip{padding:6px 10px;font-size:13px}.help-link{padding:6px 14px}}
body.drawer-open{overflow:hidden}

/* ══ Seitenkopf ═══════════════════════════════════════════════════ */
.head-inner{display:grid;gap:20px 48px;align-items:center;padding-top:clamp(26px,4vw,56px);padding-bottom:clamp(32px,5vw,64px)}
@media (min-width:900px){.head--motif .head-inner{grid-template-columns:minmax(0,1.3fr) minmax(240px,.7fr)}}
.head h1{max-width:20ch}
.head--hub h1{font-size:var(--step-5);letter-spacing:-.03em;line-height:.98}
.head--hub .lead{font-size:var(--step-1)}
.crumbs ol{list-style:none;margin:0 0 clamp(18px,3vw,30px);padding:0;display:flex;flex-wrap:wrap;gap:4px 0;font-size:14px;color:var(--a-deep)}
.crumbs li + li::before{content:"/";margin:0 8px;color:var(--a)}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.head-motif .motif{display:block;width:100%;max-width:380px;height:auto;margin-left:auto}
.head--hub .head-motif .motif{max-width:470px}
.motif{--paper:#fff;--ink:#171C2B}
@media (max-width:899px){.head-motif .motif{max-width:220px;margin:0}.head--hub .head-motif .motif{max-width:290px}}

/* ══ Inhaltsfläche ═════════════════════════════════════════════════ */
.sheet{position:relative;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.75);border-radius:32px;margin:0 clamp(6px,1.4vw,20px);
  padding:clamp(32px,4.5vw,64px) 0 clamp(44px,5vw,80px)}
@supports not (background:color-mix(in srgb,red,blue)){.sheet{background:rgba(255,255,255,.8)}}
.sheet > .prose:first-child > *:first-child{margin-top:0}
.wrap + .prose,.wrap + .wrap{margin-top:clamp(32px,4vw,52px)}
main{--grey:#3B4252}

/* Breite Bildschirme: Inhaltsverzeichnis links, Lesespalte daneben,
   Grafiken und Übungen dürfen die ganze Breite nutzen */
.toc{display:none}
@media (min-width:1180px){
  .sheet-grid{max-width:var(--wide);margin-inline:auto;padding-inline:var(--gutter);display:grid;grid-template-columns:230px minmax(0,1fr);gap:56px;align-items:start}
  .toc{display:block;position:sticky;top:calc(var(--bar) + 28px);padding-top:6px}
  .sheet-body{min-width:0}
  .sheet-body .prose{margin-inline:0;max-width:calc(var(--measure) + 0px);padding-inline:0}
  .sheet-body .wrap{padding-inline:0;margin-inline:0;max-width:none}
  .sheet-body .band{margin-inline:0}
  .sheet-body .band .wrap{padding-inline:clamp(28px,3vw,52px)}
  [data-section="verstehen"] .sheet-body .band .wrap,[data-section="chancen"] .sheet-body .band .wrap{padding-right:min(40%,340px)}
}
.toc-h{font-size:13px;font-weight:600;color:var(--a-deep);margin-bottom:10px}
.toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.toc a{display:block;padding:7px 0 7px 16px;margin-left:-2px;border-left:2px solid transparent;text-decoration:none;font-size:15px;line-height:1.35;color:var(--ink-2)}
.toc a:hover{color:var(--ink);border-left-color:var(--a)}
.toc a.is-active{color:var(--a-deep);font-weight:600;border-left-color:var(--a)}

/* ══ Kennzahlen ════════════════════════════════════════════════════
   Grundform; die Kapitel geben ihnen unten jeweils ihre Gestalt. */
.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:18px;margin:1.6em 0!important;padding:0!important;list-style:none}
.figures li{margin:0!important;position:relative;padding:22px 22px 24px;background:var(--a-tint);border-radius:var(--r)}
.figures b{display:block;font-family:var(--serif);font-size:clamp(28px,1.1rem + 1.7vw,46px);line-height:1;color:var(--a-deep);font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.figures li > span{display:block;margin-top:10px;overflow-wrap:break-word;font-size:var(--step--1);color:var(--ink-2)}
.figures li:nth-child(2){background:var(--a)}
.figures li:nth-child(2) b,.figures li:nth-child(2) > span{color:var(--on-a)}
.figures li:nth-child(3){background:var(--b-tint)}
.figures li:only-child{max-width:520px;display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:center}
.figures li:only-child > span{margin-top:0}

@media (max-width:899px){.figures li > span{hyphens:auto;-webkit-hyphens:auto}}
/* Verstehen: Kennzahlen ohne Kästen. Vor jeder Zahl tippt es kurz, wie im Chat */
[data-section="verstehen"] .figures{gap:0}
[data-section="verstehen"] .figures li,[data-section="verstehen"] .figures li:nth-child(n){background:none;border-radius:0;padding:4px clamp(16px,2.4vw,28px) 6px;border-left:2px solid color-mix(in srgb,var(--a) 30%,transparent)}
[data-section="verstehen"] .figures li:first-child{border-left:0;padding-left:0}
[data-section="verstehen"] .figures li b,[data-section="verstehen"] .figures li:nth-child(n) b{color:var(--a-deep)}
[data-section="verstehen"] .figures li > span,[data-section="verstehen"] .figures li:nth-child(n) > span{color:var(--ink-2)}
[data-section="verstehen"] .figures li::before{content:"";display:block;width:44px;height:24px;margin-bottom:12px;border-radius:12px 12px 12px 4px;
  background:radial-gradient(circle at 12px 12px,var(--a) 3px,transparent 3.5px),radial-gradient(circle at 22px 12px,var(--a) 3px,transparent 3.5px),radial-gradient(circle at 32px 12px,var(--a) 3px,transparent 3.5px),var(--a-tint)}
@media (max-width:640px){[data-section="verstehen"] .figures li,[data-section="verstehen"] .figures li:nth-child(n){border-left:0;padding:0 0 18px;border-bottom:1px solid var(--line)}}
/* Chancen: Kreise, die wachsen */
@media (min-width:640px){
  [data-section="chancen"] .figures{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
  [data-section="chancen"] .figures li:not(:only-child){aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:14%}
}
[data-section="chancen"] .figures li:nth-child(2){background:var(--a)}
[data-section="chancen"] .figures li:nth-child(3){background:var(--b)}
[data-section="chancen"] .figures li:nth-child(3) b,[data-section="chancen"] .figures li:nth-child(3) > span{color:#1A1408}
/* Risiken: gekappte Ecken, ein Faden zieht sich durch */
[data-section="risiken"] .figures li{clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));border-radius:0}
[data-section="risiken"] .figures li::before{content:"";position:absolute;left:22px;right:22px;top:0;height:4px;background:var(--b);transform-origin:left;transform:scaleX(var(--thread,1))}
/* Alltag: Bögen wie Fenster */
[data-section="alltag"] .figures li{border-radius:140px 140px 18px 18px;padding-top:44px;text-align:center}
[data-section="alltag"] .figures li:only-child{border-radius:999px 24px 24px 999px;text-align:left;padding:22px 30px}
/* Recht: Blätter mit Eselsohr und Stempelzahl */
[data-section="recht"] .figures li{border-radius:3px;background:#fff;box-shadow:0 1px 0 var(--line),0 18px 30px -24px rgba(67,48,127,.45);
  background-image:linear-gradient(225deg,transparent 0 18px,var(--a-tint) 18px 20px,transparent 20px),repeating-linear-gradient(transparent 0 27px,rgba(107,76,196,.08) 27px 28px)}
[data-section="recht"] .figures li::after{content:"";position:absolute;top:0;right:0;width:26px;height:26px;background:linear-gradient(225deg,var(--ground) 50%,var(--a-tint) 50%)}
[data-section="recht"] .figures b{display:inline-block;border:3px solid currentColor;padding:6px 10px 4px;border-radius:6px;transform:rotate(-3deg)}
/* Krefeld: genähte Kanten */
[data-section="krefeld"] .figures li{background:var(--a-tint);outline:2px dashed color-mix(in srgb,var(--a) 50%,transparent);outline-offset:-8px}

/* ══ Kernaussage-Band ══════════════════════════════════════════════
   Hell und farbig statt dunkel; jede Form gehört zu ihrem Kapitel. */
.band{position:relative;margin:clamp(40px,6vw,72px) clamp(10px,2vw,28px);padding:clamp(32px,4.5vw,60px) 0;color:var(--ink);overflow:hidden;
  background:linear-gradient(120deg,var(--a-tint) 0%,color-mix(in srgb,var(--a-tint) 55%,var(--b-tint)) 55%,var(--b-tint) 100%);border-radius:var(--r)}
.band .wrap{position:relative;z-index:1}
.band .wrap > p:first-child{font-family:var(--serif);font-size:var(--step-3);line-height:1.18;font-weight:600;max-width:26ch;text-wrap:balance;color:var(--a-deep)}
.band .wrap > p + p{font-size:var(--step-0);line-height:1.6;max-width:62ch;margin-top:16px;color:var(--ink-2)}
.band a{color:var(--a-deep);font-weight:600}
@media (min-width:900px){.band .wrap{padding-right:min(34%,380px)}}
.band::after{content:"";position:absolute;pointer-events:none}
/* Verstehen: Sprechblase */
[data-section="verstehen"] .band{border-radius:40px 40px 40px 8px}
[data-section="verstehen"] .band::after{right:clamp(20px,4vw,56px);top:50%;width:min(20vw,230px);aspect-ratio:1.5;translate:0 -50%;border-radius:999px 999px 999px 18px;background:
  radial-gradient(circle at 30% 50%,#fff 0 7%,transparent 7.5%),radial-gradient(circle at 50% 50%,#fff 0 7%,transparent 7.5%),radial-gradient(circle at 70% 50%,#fff 0 7%,transparent 7.5%),var(--a);opacity:.95}
/* Chancen: aufgehende Kreise */
[data-section="chancen"] .band{border-radius:48px;background:linear-gradient(120deg,#FFF6EC 0%,var(--a-tint) 50%,var(--b-tint) 100%)}
[data-section="chancen"] .band::after{right:-80px;bottom:-140px;width:min(36vw,400px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--b) 0 30%,transparent 30.5% 42%,color-mix(in srgb,var(--a) 70%,transparent) 42.5% 52%,transparent 52.5% 64%,color-mix(in srgb,var(--a) 30%,transparent) 64.5% 74%,transparent 74.5%)}
@media (max-width:639px){[data-section="chancen"] .band::after{width:200px;right:-90px;bottom:-110px;opacity:.7}}
/* Risiken: Warnwinkel, darunter der rote Faden */
[data-section="risiken"] .band{border-radius:0;clip-path:polygon(0 0,calc(100% - 40px) 0,100% 40px,100% 100%,40px 100%,0 calc(100% - 40px))}
[data-section="risiken"] .band{padding-bottom:calc(clamp(32px,4.5vw,60px) + 44px)}
[data-section="risiken"] .band::after{left:0;right:0;bottom:16px;height:44px;background:var(--a);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C 200 40 260 10 420 18 S 700 52 860 34 S 1100 12 1200 22' fill='none' stroke='black' stroke-width='4'/%3E%3C/svg%3E") no-repeat center/100% 100%;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C 200 40 260 10 420 18 S 700 52 860 34 S 1100 12 1200 22' fill='none' stroke='black' stroke-width='4'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  clip-path:inset(0 calc(100% - 100% * var(--thread,1)) 0 0)}
/* Alltag: Fensterbogen mit Lampenschein */
[data-section="alltag"] .band{border-radius:min(32vw,200px) min(32vw,200px) 24px 24px;padding-top:clamp(72px,12vw,104px)}
[data-section="alltag"] .band .wrap{padding-left:clamp(24px,6vw,56px)}
[data-section="alltag"] .band::after{right:clamp(30px,8vw,120px);top:0;width:4px;height:clamp(60px,9vw,110px);background:var(--a-deep)}
[data-section="alltag"] .band::before{content:"";position:absolute;right:calc(clamp(30px,8vw,120px) - 38px);top:clamp(60px,9vw,110px);width:80px;height:40px;border-radius:80px 80px 6px 6px;background:var(--b);pointer-events:none}
@media (max-width:899px){[data-section="alltag"] .band::before,[data-section="alltag"] .band::after{display:none}}
/* Recht: Aktenblatt */
[data-section="recht"] .band{border-radius:4px;background:#fff;background-image:repeating-linear-gradient(transparent 0 35px,rgba(107,76,196,.1) 35px 36px);
  box-shadow:0 30px 50px -40px rgba(67,48,127,.6);border-left:10px solid var(--a)}
[data-section="recht"] .band::after{top:0;right:0;width:clamp(48px,6vw,80px);aspect-ratio:1;background:linear-gradient(225deg,var(--ground) 50%,var(--a-tint) 50%)}
/* Krefeld: Naht */
[data-section="krefeld"] .band{outline:3px dashed color-mix(in srgb,var(--a) 55%,transparent);outline-offset:-14px}

/* ══ Übersichtsseiten: Unterseiten in Kapitelform ═══════════════════ */
.prose + .tiles{margin-top:clamp(32px,4vw,52px)}
.tiles{list-style:none;margin:0 auto;padding:0 var(--gutter);max-width:var(--wide);display:grid;gap:18px;grid-template-columns:1fr;counter-reset:t}
@media (min-width:700px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){
  .tiles[data-n="3"],.tiles[data-n="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tiles[data-n="5"]{grid-template-columns:repeat(6,minmax(0,1fr))}
  .tiles[data-n="5"] li{grid-column:span 2}
  .tiles[data-n="5"] li:nth-child(-n+2){grid-column:span 3}
}
.tiles li{counter-increment:t;display:flex}
.tiles a{position:relative;flex:1;display:flex;flex-direction:column;min-height:220px;padding:30px 28px 26px;border-radius:var(--r);background:rgba(255,255,255,.72);text-decoration:none;color:var(--ink);
  transition:transform .25s cubic-bezier(.3,.7,.2,1),background-color .2s}
.tiles a::before{content:counter(t);font-family:var(--serif);font-weight:600;font-size:15px;color:var(--a-deep);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:2px solid var(--a);margin-bottom:22px}
.tiles a:hover{background:#fff;transform:translateY(-4px)}
.tl-t{font-family:var(--serif);font-size:var(--step-2);font-weight:600;line-height:1.15}
.tl-d{margin-top:10px;font-size:var(--step--1);color:var(--ink-2);max-width:42ch}
.tl-go{margin-top:auto;padding-top:20px;font-weight:600;font-size:var(--step--1);color:var(--a-deep)}
.tiles li:nth-child(3n+2) a{background:var(--a-tint)}

/* Verstehen: ein Gesprächsverlauf, Blasen abwechselnd links und rechts */
[data-section="verstehen"] .tiles{display:flex;flex-direction:column;gap:14px;max-width:980px}
[data-section="verstehen"] .tiles li{width:min(100%,640px)}
[data-section="verstehen"] .tiles li:nth-child(even){align-self:flex-end}
[data-section="verstehen"] .tiles a{min-height:0;border-radius:30px 30px 30px 8px;padding:24px 28px}
[data-section="verstehen"] .tiles li:nth-child(even) a{border-radius:30px 30px 8px 30px;background:var(--a);color:#fff}
[data-section="verstehen"] .tiles li:nth-child(even) a .tl-d,[data-section="verstehen"] .tiles li:nth-child(even) a .tl-go{color:#fff}
[data-section="verstehen"] .tiles li:nth-child(even) a::before{color:#fff;border-color:#fff}
[data-section="verstehen"] .tiles a::before{position:absolute;right:24px;top:22px;margin:0}
[data-section="verstehen"] .tl-t{padding-right:48px}
/* Chancen: weite Rundungen, Zahl im Kreis, Kreis wächst beim Darüberfahren */
[data-section="chancen"] .tiles a{border-radius:40px;overflow:hidden}
[data-section="chancen"] .tiles a::after{content:"";position:absolute;right:-60px;bottom:-60px;width:160px;height:160px;border-radius:50%;background:var(--b);opacity:.55;transition:transform .5s cubic-bezier(.3,.7,.2,1)}
[data-section="chancen"] .tiles li:nth-child(odd) a::after{background:var(--a);opacity:.35}
[data-section="chancen"] .tiles a:hover::after{transform:scale(1.5)}
[data-section="chancen"] .tiles a > *{position:relative;z-index:1}
[data-section="chancen"] .tiles a::before{background:var(--a);color:#1A1408;border:0}
/* Risiken: Kacheln mit gekappter Ecke an einem Faden */
[data-section="risiken"] .tiles a{border-radius:0;clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,28px 100%,0 calc(100% - 28px));border-top:4px solid var(--a)}
[data-section="risiken"] .tiles a::before{border-radius:0;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));border:0;background:var(--a);color:#fff}
/* Alltag: Fensterbögen nebeneinander */
@media (min-width:1100px){[data-section="alltag"] .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
[data-section="alltag"] .tiles a{border-radius:220px 220px 22px 22px;padding-top:56px;text-align:center;align-items:center;min-height:300px}
[data-section="alltag"] .tiles a::before{border-radius:999px 999px 4px 4px;background:var(--a);color:#fff;border:0;width:34px;height:40px}
/* Recht: zwei Aktenblätter */
[data-section="recht"] .tiles a{border-radius:3px;background:#fff;min-height:280px;padding:40px 36px 30px;box-shadow:0 30px 50px -36px rgba(67,48,127,.55);
  background-image:repeating-linear-gradient(transparent 0 31px,rgba(107,76,196,.09) 31px 32px);border-left:8px solid var(--a)}
[data-section="recht"] .tiles a::after{content:"";position:absolute;top:0;right:0;width:44px;height:44px;background:linear-gradient(225deg,var(--ground) 50%,var(--a-tint) 50%)}
[data-section="recht"] .tiles li:nth-child(odd) a{transform:rotate(-.6deg)}
[data-section="recht"] .tiles li:nth-child(even) a{transform:rotate(.5deg)}
[data-section="recht"] .tiles a:hover{transform:rotate(0) translateY(-4px)}
[data-section="recht"] .tiles a::before{border-radius:4px}
/* Krefeld: genähte Felder wie Stoffmuster */
[data-section="krefeld"] .tiles a{border-radius:18px;outline:2px dashed color-mix(in srgb,var(--a) 55%,transparent);outline-offset:-10px}
[data-section="krefeld"] .tiles li:nth-child(odd) a{background:var(--a-tint)}
[data-section="krefeld"] .tiles li:nth-child(even) a{background:rgba(255,255,255,.75)}

/* ══ Fuß ═══════════════════════════════════════════════════════════
   Groß nur einmal pro Kapitel, sonst eine schmale Zeile. */
.site-footer{margin:clamp(20px,3vw,36px) clamp(6px,1.4vw,20px) 0;border-radius:32px 32px 0 0;overflow:hidden;color:#C9CED8;font-size:15px;line-height:1.55;
  background:var(--foot-bg);padding:0 0 calc(32px + env(safe-area-inset-bottom,0px))}
.site-footer:not(.site-footer--slim)::before{content:"";display:block;height:6px;margin-bottom:clamp(44px,6vw,72px);
  background:linear-gradient(90deg,var(--c-verstehen-glow) 0 16.66%,var(--c-chancen-glow) 0 33.33%,var(--c-risiken-glow) 0 50%,var(--c-alltag-glow) 0 66.66%,var(--c-recht-glow) 0 83.33%,var(--c-krefeld-glow) 0)}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.ft-top{display:grid;gap:40px}
@media (min-width:980px){.ft-top{grid-template-columns:minmax(240px,330px) 1fr;gap:64px}}
.ft-name{font-family:var(--serif);font-size:28px;font-weight:600;color:#fff;margin-bottom:10px}
.ft-name span{font-family:var(--sans);font-size:14px;font-weight:500;color:rgba(255,255,255,.75);margin-left:6px}
.ft-sos{margin-top:16px;color:#fff}
.ft-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:28px 24px}
.ft-h{font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.ft-h::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--a-glow)}
.ft-cols ul{list-style:none;margin:0;padding:0}
.ft-cols li{margin-top:2px}
.ft-cols li a{color:rgba(255,255,255,.82);display:inline-block;padding:3px 0}
.ft-bottom{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.22);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;color:rgba(255,255,255,.78);font-size:14px}
.ft-legal{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 22px}
.ft-legal a{display:inline-block;padding:8px 0}
.site-footer--slim{background:transparent!important;color:var(--grey);border-radius:0;margin-top:0;padding:18px 0 calc(18px + env(safe-area-inset-bottom,0px));font-size:14px}
.site-footer--slim a{color:var(--ink-2)}
.site-footer--slim .ft-legal{justify-content:center}

/* ══ Weiter zur nächsten Seite ═════════════════════════════════════
   Erst der Hinweis, darunter der Anfang der nächsten Seite. */
.next-panel{position:relative;display:flex;flex-direction:column}
.next-hit{position:absolute;inset:0;z-index:2}
.next-hit:focus-visible{outline-offset:-6px}
.next-cue{display:flex;flex-direction:column;align-items:center;gap:12px;padding:clamp(48px,9vh,96px) var(--gutter) clamp(28px,5vh,48px);text-align:center;font-weight:600;font-size:var(--step-0);color:var(--a-deep)}
.next-cue::after{content:"";width:2px;height:44px;border-radius:2px;background:currentColor;transform-origin:top;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(.2);opacity:.2}50%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.2) translateY(44px);opacity:0}}
.next-head{min-height:calc(100svh - var(--bar));border-top:4px solid var(--a);background:linear-gradient(180deg,color-mix(in srgb,var(--a-tint) 70%,transparent),transparent 70%)}
.next-head .head-inner{min-height:inherit;align-items:start}
@media (max-width:899px){.next-head .head-motif{padding-top:24px}}

/* Zurück zur vorherigen Seite: Hinweis oben, füllt sich beim Weiterziehen */
.prev-cue{position:fixed;left:50%;top:calc(var(--bar) + env(safe-area-inset-top,0px) + 14px);z-index:40;translate:-50% -12px;opacity:0;pointer-events:none;
  background:#fff;color:var(--a-deep);font-weight:600;font-size:14px;padding:10px 18px;border-radius:999px;box-shadow:0 14px 30px -16px rgba(20,25,39,.5);
  background-image:linear-gradient(90deg,var(--a-tint) calc(var(--p,0) * 100%),#fff 0);transition:opacity .2s,translate .2s;white-space:nowrap}
.prev-cue.is-on{opacity:1;translate:-50% 0}
html.vt-back .page-head .head-motif{view-transition-name:none}
html.vt-back::view-transition-old(root){animation:vt-out-back .3s ease both}
html.vt-back::view-transition-new(root){animation:vt-in-back .5s cubic-bezier(.22,.8,.24,1) both}
@keyframes vt-out-back{to{opacity:0;transform:translateY(24px)}}
@keyframes vt-in-back{from{opacity:0;transform:translateY(-32px)}}

/* Feedback-Formular */
.fb{display:grid;gap:18px;margin-top:0!important}
.fb > *{margin:0!important}
.fb textarea,.fb input[type="text"],.fb input[type="email"],.fb select{font:inherit;font-weight:400;width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);min-height:48px}
.fb textarea{resize:vertical;line-height:1.5}
.fb textarea:focus,.fb input:focus,.fb select:focus{border-color:var(--a-deep);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--a) 30%,transparent)}
.fb .field{font-size:var(--step--1)}
.fb .muted{font-weight:400}
.fb-row{display:grid;gap:18px}
@media (min-width:640px){.fb-row{grid-template-columns:1fr 1fr}}
.fb-rate{border:0;padding:0;margin:0}
.fb-rate legend{font-weight:600;font-size:var(--step--1);margin-bottom:10px;padding:0}
.fb-scale{display:flex;gap:8px;flex-wrap:wrap}
.fb-scale label{position:relative}
.fb-scale input{position:absolute;opacity:0;inset:0}
.fb-scale span{display:grid;place-items:center;min-width:56px;min-height:56px;padding:6px;border-radius:50%;border:1.5px solid var(--line);background:#fff;font-family:var(--serif);font-size:22px;font-weight:600;cursor:pointer;line-height:1}
.fb-scale small{display:block;font-family:var(--sans);font-size:11px;font-weight:500;color:var(--grey)}
.fb-scale input:checked + span{background:var(--a-deep);border-color:var(--a-deep);color:#fff}
.fb-scale input:checked + span small{color:#fff}
.fb-scale input:focus-visible + span{outline:3px solid var(--a-deep);outline-offset:3px}
.fb-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.fb-status{font-weight:600;color:var(--a-deep);min-height:1.5em}

/* ══ Startseite ═══════════════════════════════════════════════════ */
.hero{padding:clamp(32px,5vw,72px) 0 clamp(40px,6vw,80px)}
.hero-grid{display:grid;gap:32px;align-items:center}
@media (min-width:960px){.hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr)}}
.hero h1{font-size:var(--step-5);line-height:.98;letter-spacing:-.03em;max-width:14ch}
.hero .lead{max-width:36ch;font-size:var(--step-1);line-height:1.45;font-family:var(--serif);color:var(--ink-2);margin-top:clamp(20px,2.4vw,30px)}
.hero-art .motif--start{width:100%;max-width:580px;height:auto;display:block;margin-left:auto}
@media (max-width:959px){.hero-art .motif--start{max-width:400px;margin:0}}
.agesentence{margin-top:clamp(30px,4vw,52px);font-family:var(--serif);font-size:var(--step-2);line-height:1.25;font-weight:500;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.agesentence .as-pre{margin-right:4px}
.agebtn{font-family:var(--sans);font-size:var(--step--1);font-weight:600;min-height:46px;padding:8px 18px;border-radius:999px;border:1.5px solid var(--ink);background:rgba(255,255,255,.6);cursor:pointer;transition:background-color .15s,color .15s}
.agebtn:hover{background:#fff}
.agebtn[aria-pressed="true"]{background:var(--ink);color:#fff}
.age-effect{margin-top:16px;font-size:var(--step--1);color:var(--grey);max-width:60ch;min-height:1.5em}
.age-effect button{background:none;border:0;padding:0;min-height:44px;text-decoration:underline;text-underline-offset:.2em;cursor:pointer;color:var(--ink)}

.sheet--home{padding-top:clamp(28px,4vw,56px)}
.home-block{padding:clamp(28px,4vw,56px) 0}
.home-h{margin-bottom:clamp(22px,3vw,36px)}

/* Sechs Kapitel, jedes in seiner eigenen Form */
.bento{display:grid;gap:18px}
@media (min-width:760px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.bento{grid-template-columns:repeat(6,minmax(0,1fr))}
  .bt{grid-column:span 2}
  .bt--big{grid-column:span 4;grid-row:span 2}
  .bt--wide{grid-column:span 6}
  .bt.t-alltag,.bt.t-recht{grid-column:span 3}}
.bt{position:relative;display:flex;flex-direction:column;min-height:250px;padding:clamp(22px,2.6vw,34px);background:var(--a);color:var(--on-a);text-decoration:none;overflow:hidden;
  transition:transform .3s cubic-bezier(.3,.7,.2,1)}
.bt:hover{transform:translateY(-5px)}
.bt h3{font-family:var(--serif);font-size:var(--step-3);font-weight:600;line-height:1.05;margin-top:auto;position:relative;z-index:1}
.bt p{margin-top:10px;font-size:var(--step--1);opacity:.94;position:relative;z-index:1;max-width:42ch}
.bt-art{align-self:flex-end;margin:-8px -8px 14px auto}
.bt-art .motif{width:clamp(170px,18vw,240px);display:block}
.bt--big .bt-art{align-self:center;margin:0 auto 22px}
.bt--big .bt-art .motif{width:clamp(240px,32vw,460px)}
.bt--big h3{font-size:var(--step-4)}
.bt--big p{font-size:var(--step-0)}
.bt .motif{--a-tint:rgba(255,255,255,.2);--paper:#fff;--ink:#171C2B;--a:var(--b);--a-deep:#fff}
.t-verstehen.bt{border-radius:36px 36px 36px 8px}
.t-chancen.bt{border-radius:48px}
.t-chancen.bt .motif{--a:#fff;--a-deep:var(--c-chancen-deep);--a-tint:rgba(255,255,255,.45);--b:var(--c-verstehen)}
.t-risiken.bt{clip-path:polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,34px 100%,0 calc(100% - 34px))}
.t-risiken.bt .motif{--a-tint:var(--c-risiken-tint)}
.t-alltag.bt{border-radius:999px 999px 24px 24px;padding-top:44px;text-align:center;align-items:center}
.t-alltag.bt .bt-art{align-self:center;margin:0 auto 10px}
.t-alltag.bt .motif{--a:var(--b);--a-deep:#fff;--a-tint:var(--c-alltag-tint)}
.t-recht.bt{border-radius:4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.t-recht.bt::after{content:"";position:absolute;top:0;right:0;width:48px;height:48px;background:linear-gradient(225deg,var(--ground) 50%,var(--c-recht-glow) 50%)}
.t-recht.bt .motif{--a:var(--b);--a-deep:#fff;--a-tint:var(--c-recht-tint)}
.t-krefeld.bt{border-radius:22px;outline:2px dashed rgba(255,255,255,.55);outline-offset:-12px}
.t-krefeld.bt .motif{--a-tint:#3E8A6F}
@media (min-width:1080px){
  .bt--wide{flex-direction:row;align-items:center;gap:32px;min-height:200px}
  .bt--wide .bt-art{order:2;margin:0 0 0 auto}
  .bt--wide h3{margin-top:0}
  .bt--wide > div{order:1}
}
@media (prefers-reduced-motion:reduce){.bt:hover,.tiles a:hover{transform:none}}

.numbers{display:grid;gap:18px}
@media (min-width:860px){.numbers{grid-template-columns:repeat(3,minmax(0,1fr))}}
.nb{display:flex;flex-direction:column;gap:12px;padding:clamp(24px,3vw,36px);background:var(--a);color:var(--on-a);text-decoration:none;transition:transform .25s ease}
.nb:hover{transform:translateY(-4px)}
.nb b{font-family:var(--serif);font-size:clamp(34px,1rem + 2.4vw,58px);line-height:1;font-weight:600;letter-spacing:-.03em;white-space:nowrap}
.nb > span{font-size:var(--step--1);line-height:1.5;opacity:.94;max-width:32ch}
.nb.t-verstehen{border-radius:30px 30px 30px 8px}
.nb.t-chancen{border-radius:48px}
.nb.t-alltag{border-radius:200px 200px 22px 22px;text-align:center;align-items:center;justify-content:center;padding:clamp(56px,6vw,76px) clamp(28px,3vw,40px) clamp(28px,3vw,36px)}

.try{padding:clamp(28px,4vw,56px) 0}
.try-grid{display:grid;gap:40px;align-items:center;background:var(--a-tint);border-radius:36px 36px 36px 8px;padding:clamp(28px,4vw,56px)}
@media (min-width:900px){.try-grid{grid-template-columns:minmax(280px,380px) 1fr;gap:72px}}
.try .phone{height:auto;max-height:none;transform:rotate(-3deg);box-shadow:0 30px 60px -30px rgba(36,53,154,.45)}
.try .msgs{overflow:visible}
.try-lead{margin-top:16px;font-size:var(--step-1);line-height:1.5;color:var(--ink-2);max-width:46ch}
@media (prefers-reduced-motion:reduce){.try .phone{transform:none}}

.homegrid{display:grid;gap:clamp(32px,5vw,72px)}
@media (min-width:900px){.homegrid--2{grid-template-columns:5fr 7fr}}
.home-block--silk .homegrid{background:rgba(255,255,255,.55);border-radius:32px;padding:clamp(28px,4vw,56px)}
.five{list-style:none;margin:0;padding:0;counter-reset:f}
.five li{counter-increment:f;display:grid;grid-template-columns:3.2rem 1fr;gap:4px 16px;padding:22px 0;border-top:1px solid var(--line)}
.five li::before{content:counter(f);font-family:var(--serif);font-size:var(--step-3);line-height:1;font-weight:600;color:var(--a)}
.five h3{font-family:var(--serif);font-size:var(--step-2);font-weight:600}
.five p{grid-column:2;color:var(--ink-2)}
.five .five-k{grid-column:2;justify-self:start;font-size:13px;font-weight:600;background:var(--mark);padding:3px 10px;border-radius:999px;margin-top:6px}
.five .source{grid-column:2;margin-top:4px}

.krefeld-band{padding:clamp(28px,4vw,56px) 0 0}
.krefeld-band .wrap > div:first-child{color:#fff}
.krefeld-band .wrap{display:grid;gap:28px;align-items:center;background:var(--c-krefeld);border-radius:24px;padding:clamp(28px,4vw,56px);outline:2px dashed rgba(255,255,255,.5);outline-offset:-14px}
@media (min-width:900px){.krefeld-band .wrap{grid-template-columns:1fr minmax(260px,380px)}}
.krefeld-band h2{color:#fff}
.krefeld-band p{color:#fff;max-width:56ch;margin-top:14px}
.krefeld-band .motif{--a:#7FD1AF;--a-tint:#2E8C69;--a-deep:#C9EEDD;--paper:#17805C;--ink:#E3F3EB;width:100%;height:auto}
.krefeld-band .btn{background:#fff;color:var(--c-krefeld-deep);border-color:#fff}
.krefeld-band .btn--ghost{background:transparent;color:#fff}
.krefeld-band .btn:hover{background:var(--c-krefeld-tint);color:var(--c-krefeld-deep)}
.krefeld-band :focus-visible{outline-color:#fff}

/* ══ Altersfilter ══════════════════════════════════════════════════ */
html[data-alter="u10"] .nur-ab10,html[data-alter="u10"] .nur-ab14,html[data-alter="1013"] .nur-ab14,
html[data-alter="14p"] .nur-bis13,html[data-alter="14p"] .nur-u10,html[data-alter="1013"] .nur-u10{display:none!important}
.wenn-u10,.wenn-ab10{display:none}
html[data-alter="u10"] .wenn-u10,html[data-alter="1013"] .wenn-ab10,html[data-alter="14p"] .wenn-ab10{display:block}
.age-hint{font-size:var(--step--1);color:var(--grey);border-left:3px solid var(--line);padding-left:14px;margin-top:1.2em}
html:not([data-alter]) .age-hint{display:none}

/* ══ Tabs ══════════════════════════════════════════════════════════ */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:1.4em 0 1.2em}
.tab{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;border-radius:999px;border:1.5px solid var(--line);background:rgba(255,255,255,.6);cursor:pointer;font-weight:600;font-size:var(--step--1);text-decoration:none}
.tab:hover{border-color:var(--a)}
.tab[aria-selected="true"]{background:var(--a-deep);border-color:var(--a-deep);color:#fff}
.tabpanel > * + *{margin-top:.9em}
.tabpanel{background:rgba(255,255,255,.6);border-radius:var(--r);padding:clamp(18px,2.6vw,30px)}
[data-section="alltag"] .tabpanel{border-radius:28px}
.agefacts{display:flex;flex-wrap:wrap;gap:12px 28px;margin:0 0 .4em!important}
.agefacts div{display:flex;flex-direction:column}
.agefacts b{font-family:var(--serif);font-size:var(--step-3);line-height:1;color:var(--a-deep)}
.agefacts span{font-size:var(--step--1);color:var(--ink-2);max-width:22ch}

/* ══ Checkliste ════════════════════════════════════════════════════ */
.checklist{list-style:none;padding:0!important;margin-top:1.4em!important;border-top:1px solid var(--line)}
.checklist li{border-bottom:1px solid var(--line);margin:0!important}
.checklist label{display:grid;grid-template-columns:28px 1fr;gap:4px 16px;padding:18px 0;cursor:pointer}
.checklist input{width:24px;height:24px;margin:3px 0 0;accent-color:var(--a-deep)}
.checklist .ck-t{font-weight:600}
.checklist .ck-m{color:var(--grey);font-size:var(--step--1);font-weight:400;margin-left:8px}
.checklist .ck-d{grid-column:2;color:var(--ink-2)}
.checklist input:checked ~ .ck-t{text-decoration:line-through;text-decoration-color:var(--grey)}
.progress{display:flex;align-items:center;gap:16px;margin-top:1em}
.progress-bar{flex:1;max-width:320px;height:8px;background:rgba(23,28,43,.1);border-radius:999px 999px 4px 4px;overflow:hidden}
.progress-bar i{display:block;height:100%;background:var(--a);width:0;transition:width .3s}

/* ══ Nachbildungen ═════════════════════════════════════════════════ */
.sim{display:grid;gap:clamp(20px,3vw,40px);margin-top:1.6em}
@media (min-width:900px){.sim{grid-template-columns:minmax(300px,410px) 1fr}}
.phone{background:#fff;border:2px solid var(--a);border-radius:30px;padding:14px;display:flex;flex-direction:column;height:580px;max-height:80vh;box-shadow:0 30px 60px -36px rgba(30,35,80,.4)}
.phone-top{display:flex;align-items:center;gap:10px;padding:6px 6px 12px;border-bottom:1px solid var(--line)}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--a);color:#fff;display:grid;place-items:center;font-weight:600;font-size:15px;flex:none}
.phone-name{font-weight:600;line-height:1.2}
.phone-sub{font-size:13px;color:var(--grey)}
.msgs{flex:1;overflow-y:auto;padding:14px 4px;display:flex;flex-direction:column;gap:8px;font-size:15.5px;line-height:1.45}
.msg{max-width:84%;padding:9px 13px;border-radius:18px;animation:msg .28s ease;white-space:pre-line}
.msg--in{background:var(--a-tint);align-self:flex-start;border-bottom-left-radius:4px}
.msg--out{background:var(--a-deep);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.msg--typing{color:var(--grey);background:none;padding-left:4px;display:flex;gap:4px;align-items:center}
.msg--long{max-width:94%;padding:14px 16px}
.msg--long p + p{margin-top:.7em}
.dots{display:inline-flex;gap:4px;padding:10px 12px;background:var(--a-tint);border-radius:18px;border-bottom-left-radius:4px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--a-deep);opacity:.5;animation:dot 1s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:none;opacity:.35}30%{transform:translateY(-4px);opacity:1}}
@keyframes msg{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.choices{display:flex;flex-direction:column;gap:8px;padding-top:10px;border-top:1px solid var(--line)}
.choice{text-align:left;min-height:44px;padding:9px 14px;border-radius:16px;border:1.5px solid var(--a-deep);background:#fff;cursor:pointer;font-size:15px;line-height:1.35}
.choice:hover{background:var(--a-tint)}
.composer{display:flex;gap:8px;align-items:center;padding-top:10px;border-top:1px solid var(--line)}
.composer .choice{flex:1}
.log{background:rgba(255,255,255,.7);border-radius:var(--r);padding:clamp(18px,2.4vw,28px);align-self:start}
.log-title{font-weight:600;margin-bottom:10px;color:var(--a-deep)}
.log ol{margin:0;padding-left:1.2em}
.log li + li{margin-top:.8em}
.log .ph{color:var(--grey)}
.sim-controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.sim-k{display:inline-block;font-size:13px;font-weight:600;color:var(--a-deep);background:var(--a-tint);border-radius:999px;padding:3px 10px;margin-bottom:8px}

/* Feed: groß genug, um tatsächlich darin zu versinken */
.feedbox{display:grid;gap:24px;margin-top:1.6em;justify-content:center}
@media (min-width:900px){.feedbox{grid-template-columns:minmax(320px,440px) minmax(0,1fr);justify-content:start}}
.feed-frame{position:relative;background:#000;border-radius:34px;overflow:hidden;display:flex;flex-direction:column;height:min(860px,86svh);width:min(100%,440px);border:6px solid #0B0D12;box-shadow:0 40px 80px -40px rgba(20,25,39,.6)}
.feed-meter{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;font-size:13px;font-variant-numeric:tabular-nums;color:#fff;background:#0B0D12}
.feed-meter .btn{color:#fff;border-color:rgba(255,255,255,.5);background:transparent;min-height:44px;padding:4px 12px;font-size:13px}
.feed{flex:1;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y mandatory;scrollbar-width:none}
.feed::-webkit-scrollbar{display:none}
.feed:focus-visible{outline:3px solid #fff;outline-offset:-3px}
.reel{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;color:#fff}
.reel svg.scene{position:absolute;inset:0;width:100%;height:100%}
.reel .drift{animation:drift 7s ease-in-out infinite alternate;transform-box:fill-box}
@keyframes drift{from{transform:translateY(0)}to{transform:translateY(-14px)}}
.reel-shade{position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(transparent,rgba(0,0,0,.65))}
.reel-meta{position:absolute;left:14px;right:72px;bottom:18px;font-size:14px;line-height:1.35;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.reel-user{display:flex;align-items:center;gap:8px;font-weight:600}
.reel-user i{width:30px;height:30px;border-radius:50%;border:2px solid #fff;flex:none}
.reel-follow{border:1px solid rgba(255,255,255,.8);border-radius:6px;padding:0 8px;font-size:12px;font-weight:600}
.reel-cap{margin-top:6px}
.reel-music{margin-top:6px;font-size:12.5px;opacity:.9}
.reel-ad{display:inline-block;margin-top:6px;font-size:11.5px;font-weight:600;background:rgba(255,255,255,.22);padding:2px 7px;border-radius:4px}
.reel-cta{display:block;margin-top:8px;background:#fff;color:#111;border-radius:6px;padding:7px 10px;font-weight:600;font-size:13px;text-align:center}
.reel-side{position:absolute;right:10px;bottom:24px;display:flex;flex-direction:column;align-items:center;gap:16px;font-size:12px;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.reel-side span{display:flex;flex-direction:column;align-items:center;gap:3px}
.reel-side svg{width:30px;height:30px;fill:#fff}
.reel-over{position:absolute;left:18px;right:18px;top:26%;font-weight:800;font-size:22px;line-height:1.2;text-align:center;letter-spacing:-.01em}
.reel-over span{background:#fff;color:#111;box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:2px 8px;border-radius:6px}
.feed-toast{position:absolute;left:12px;right:12px;top:62px;z-index:3;background:#fff;color:var(--ink);border-radius:16px;padding:14px 16px;font-size:14.5px;line-height:1.4;box-shadow:0 18px 40px -16px rgba(0,0,0,.6);border-left:6px solid var(--a)}
.feed-toast b{display:block;margin-bottom:2px}
.feed-notes{align-self:start}
.feed-notes > * + *{margin-top:1em}
.feed-note-list{list-style:none;padding:0!important;margin:0}
.feed-note-list li{background:rgba(255,255,255,.75);border-radius:24px 24px 24px 6px;padding:14px 18px;animation:msg .4s ease}
.feed-note-list li + li{margin-top:10px}
.feed-note-list b{color:var(--a-deep)}

/* Phasen */
.phases{display:grid;gap:20px;margin-top:1.4em}
@media (min-width:860px){.phases{grid-template-columns:minmax(220px,300px) 1fr}}
.phase-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.phase-btn{width:100%;text-align:left;min-height:48px;padding:10px 14px;border:1px solid var(--line);background:rgba(255,255,255,.8);cursor:pointer;display:flex;gap:12px;align-items:baseline;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
.phase-btn b{font-family:var(--serif);font-size:20px;color:var(--a)}
.phase-btn[aria-selected="true"]{background:var(--a-deep);color:#fff;border-color:var(--a-deep)}
.phase-btn[aria-selected="true"] b{color:#fff}
.phase-pane{background:var(--a-tint);padding:clamp(20px,3vw,32px);clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px))}
.phase-pane > * + *{margin-top:.8em}

/* Phishing: echte Oberflächen nachgebaut */
.phish-intro{margin-top:1.2em}
.phish-wrap{display:grid;gap:24px;margin-top:1.4em;align-items:start}
@media (min-width:980px){.phish-wrap{grid-template-columns:minmax(300px,380px) 1fr}}
.tell{background:none;border:0;padding:0 1px;font:inherit;color:inherit;cursor:pointer;border-radius:3px;text-align:inherit;text-decoration:underline dotted transparent}
.tell:hover{background:rgba(255,231,163,.6)}
.tell.found{background:var(--mark);box-shadow:0 0 0 2px var(--mark)}
.sms{background:#fff;border-radius:34px;border:6px solid #0B0D12;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",var(--sans);color:#000;box-shadow:0 30px 60px -36px rgba(20,25,39,.55)}
.sms-top{background:#F6F6F8;border-bottom:1px solid #DADADF;padding:10px 14px 12px;text-align:center}
.sms-status{display:flex;justify-content:space-between;font-size:12px;font-weight:600;padding:0 6px 8px}
.sms-av{width:46px;height:46px;border-radius:50%;margin:0 auto 4px;background:linear-gradient(#A5A9B4,#858A96);color:#fff;display:grid;place-items:center;font-weight:600;font-size:18px}
.sms-name{font-size:12.5px}
.sms-body{padding:12px 12px 20px;min-height:340px;font-size:15.5px;line-height:1.38}
.sms-meta{text-align:center;font-size:11.5px;color:#8A8A8E;margin:4px 0 10px}
.sms-bubble{background:#E9E9EB;border-radius:18px;border-bottom-left-radius:5px;padding:9px 13px;max-width:86%}
.sms-bubble a,.sms-link{color:#0A64D8;text-decoration:underline}
.sms-bar{display:flex;gap:8px;align-items:center;padding:8px 12px 14px;border-top:1px solid #EEE}
.sms-bar span{flex:1;border:1px solid #D6D6DA;border-radius:999px;padding:5px 12px;font-size:13px;color:#A0A0A5}
.mail{background:#fff;border-radius:14px;border:1px solid #D4D8E0;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",var(--sans);color:#1F2328;box-shadow:0 30px 60px -36px rgba(20,25,39,.45)}
.mail-chrome{display:flex;gap:6px;padding:10px 14px;background:#EEF0F4;border-bottom:1px solid #D4D8E0}
.mail-chrome i{width:11px;height:11px;border-radius:50%;background:#C9CDD5}
.mail-head{padding:16px 20px;border-bottom:1px solid #E5E7EC;font-size:14px;line-height:1.5}
.mail-subj{font-size:18px;font-weight:600;margin-bottom:10px;line-height:1.3}
.mail-from{display:flex;gap:10px;align-items:center}
.mail-av{width:36px;height:36px;border-radius:50%;background:#C8102E;color:#fff;display:grid;place-items:center;font-weight:700;flex:none}
.mail-muted{color:#646B78;font-size:13px}
.mail-body{padding:22px 24px 26px;font-size:15px;line-height:1.55}
.mail-body > * + *{margin-top:12px}
.mail-logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:20px;letter-spacing:-.02em;color:#C8102E}
.mail-logo i{width:22px;height:22px;border-radius:6px;background:#C8102E}
.phish-btn{display:inline-block;padding:11px 20px;border-radius:6px;background:#C8102E;color:#fff!important;font-weight:600;text-decoration:none}
.mail-foot{border-top:1px solid #E5E7EC;padding:14px 24px;font-size:12px;color:#7A808C}
.phish-score{display:flex;align-items:center;gap:14px;margin-top:1.2em;flex-wrap:wrap}
.phish-score b{font-family:var(--serif);font-size:var(--step-3);line-height:1;color:var(--a-deep)}
.phish-dots{display:flex;gap:5px}
.phish-dots i{width:14px;height:14px;background:rgba(23,28,43,.12);clip-path:polygon(0 0,calc(100% - 4px) 0,100% 4px,100% 100%,4px 100%,0 calc(100% - 4px))}
.phish-dots i.on{background:var(--a)}
.tell-log{margin-top:1em;min-height:3em}
.tell-log p{background:rgba(255,255,255,.75);padding:14px 18px;border-left:4px solid var(--a)}

/* Tagesbilanz */
.daybars{margin-top:1.4em;display:grid;gap:18px}
.dayrow{display:grid;grid-template-columns:minmax(120px,170px) 1fr;gap:6px 18px;align-items:center}
@media (max-width:560px){.dayrow{grid-template-columns:1fr}}
.dayrow-l{font-weight:600}
.dayrow-l small{display:block;font-weight:400;color:var(--grey);font-size:var(--step--1)}
.daytrack{display:grid;gap:6px}
.daybar-i{display:flex;align-items:center;gap:10px;font-size:var(--step--1)}
.daybar-i i{display:block;height:26px;border-radius:24px 24px 24px 6px;background:var(--a);width:calc(var(--v) / 210 * 100%);min-width:8px;transform-origin:left}
.daybar-i.we i{background:var(--b);height:18px;border-radius:18px 18px 18px 4px}
.daybar-i span{white-space:nowrap;font-variant-numeric:tabular-nums}
.daylegend{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:var(--step--1);margin-top:4px}
.daylegend span{display:inline-flex;align-items:center;gap:8px}
.daylegend i{width:22px;height:12px;border-radius:8px 8px 8px 3px;background:var(--a)}
.daylegend i.we{background:var(--b)}

/* ══ Krefeld ═══════════════════════════════════════════════════════ */
.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:1.2em 0 1.6em}
.field{display:flex;flex-direction:column;gap:6px;font-size:var(--step--1);font-weight:600}
.field input,.field select{font:inherit;font-weight:400;min-height:46px;padding:8px 14px;border:1.5px solid var(--line);border-radius:12px;background:#fff;min-width:min(100%,220px);color:var(--ink)}
.field input:focus,.field select:focus{border-color:var(--a-deep);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--a) 30%,transparent)}
.result-count{font-size:var(--step--1);color:var(--grey);margin-bottom:8px}
.dir{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.dir > li{border-bottom:1px solid var(--line);padding:22px 0;display:grid;gap:8px 40px}
@media (min-width:860px){.dir > li{grid-template-columns:minmax(0,5fr) minmax(0,5fr)}}
.dir h3{font-family:var(--serif);font-size:var(--step-1);font-weight:600;line-height:1.25}
.dir .d-meta{color:var(--grey);font-size:var(--step--1)}
.dir .d-contact{font-size:var(--step--1)}
.dir .d-contact > * + *{margin-top:4px}
.dir .d-src{font-size:13px;color:var(--grey)}
.dir .h-app{font-family:var(--serif);font-size:var(--step-2);font-weight:600;line-height:1.15}
.badge{display:inline-block;font-size:13px;font-weight:600;padding:2px 10px;border-radius:999px;background:var(--a-tint);color:var(--a-deep);margin-right:6px}
.tel{font-weight:600;white-space:nowrap}

/* Beratungsstellen: je Anliegen ein eigener Abschnitt mit Karten */
.jump{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;margin:0 0 8px;scrollbar-width:thin}
.jump a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.75);border:1.5px solid color-mix(in srgb,var(--a) 35%,transparent);text-decoration:none;font-weight:600;font-size:var(--step--1);white-space:nowrap}
.jump a:hover{background:var(--a-tint)}
.dir-group{margin-top:clamp(36px,5vw,64px)}
.dir-h{font-size:var(--step-2);display:flex;align-items:center;gap:14px;margin-bottom:18px}
.dir-h::before{content:"";width:46px;height:6px;border-radius:3px;background:repeating-linear-gradient(90deg,var(--a) 0 10px,transparent 10px 16px);flex:none}
.cards{list-style:none;margin:0;padding:0;display:grid;gap:16px}
@media (min-width:860px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cards > li{display:flex;flex-direction:column;gap:12px;background:rgba(255,255,255,.78);border-radius:18px;padding:clamp(20px,2.4vw,28px);outline:2px dashed color-mix(in srgb,var(--a) 30%,transparent);outline-offset:-8px}
.cards h3{font-family:var(--serif);font-size:var(--step-1);font-weight:600;line-height:1.25}
.cards .d-meta{color:var(--grey);font-size:var(--step--1);margin-top:2px}
.cards .d-what{font-size:var(--step--1);color:var(--ink-2)}
.cards .d-contact{font-size:var(--step--1);margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.cards .d-contact > * + *{margin-top:4px}
.cards .d-src{font-size:13px;color:var(--grey)}

/* Materialien */
.mat-nav{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 8px}
.mat-group{margin-top:clamp(40px,5vw,64px)}
.mat-group > h2{display:flex;align-items:center;gap:14px}
.mat-group > p{color:var(--ink-2);margin-top:10px;max-width:62ch}
.mat{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px}
@media (min-width:860px){.mat{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mat li{display:flex;flex-direction:column;gap:10px;background:rgba(255,255,255,.78);border-radius:16px;padding:20px 22px}
.mat a.mat-t{font-family:var(--serif);font-size:var(--step-1);font-weight:600;text-decoration:none;line-height:1.25}
.mat a.mat-t:hover{text-decoration:underline}
.mat p{color:var(--grey);font-size:var(--step--1)}
.mat .mat-dl{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.mat-group--jugendliche .mat li{border-radius:26px 26px 26px 6px;background:var(--c-verstehen-tint)}
.mat-group--lehrkraefte .mat li{border-radius:4px;border-left:6px solid var(--c-recht)}

/* Dokumentseite */
.doc{max-width:820px}
.doc .draft{font-size:var(--step--1);background:var(--mark);padding:10px 14px;border-radius:10px}
.doc .fill{display:inline-block;min-width:min(12em,60vw);max-width:100%;border-bottom:1px solid var(--ink);height:1.2em;vertical-align:baseline}
.doc .fill-line{border-bottom:1px solid var(--ink);height:2em}
.doc ul.boxes{list-style:none;padding-left:0}
.doc ul.boxes li{position:relative;padding-left:2em}
.doc ul.boxes li::before{content:"";position:absolute;left:0;top:.25em;width:1.05em;height:1.05em;border:1.5px solid var(--ink);border-radius:3px}
.doc .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.doc .cutcard{border:1.5px dashed var(--grey);border-radius:10px;padding:18px}
.doc pre,.doc .prompt{white-space:pre-wrap;font-family:var(--sans);background:#fff;border:1.5px solid var(--line);border-left:5px solid var(--a);border-radius:10px;padding:14px 16px;font-size:var(--step--1)}
.doc hr.pagebreak{border:0;border-top:2px dashed var(--line);margin:2em 0}
.doc-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.doc,.doc > *{min-width:0;max-width:100%}

/* Hilfe */
.sos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:14px;margin-top:1.4em}
.sos > div{background:rgba(255,255,255,.78);border-radius:18px;padding:18px 20px}
.sos a{display:block;font-family:var(--serif);font-size:var(--step-3);font-weight:600;text-decoration:none;line-height:1.1;margin-top:6px;font-variant-numeric:lining-nums;color:var(--help-ink)}
.sos a:hover{text-decoration:underline}
.sos p{color:var(--grey);font-size:var(--step--1)}

/* Quellen */
.sources{list-style:none;padding:0!important;border-top:1px solid var(--line)}
.sources li{display:grid;grid-template-columns:2.4rem 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);margin:0!important;font-size:var(--step--1);line-height:1.55}
.sources .q-n{font-family:var(--serif);font-weight:600;font-size:var(--step-1);line-height:1.1;color:var(--a-deep)}
.sources li:target{background:var(--mark)}

/* Prompt-Beispiel */
.prompt-demo{margin-top:1.4em!important;display:grid;gap:14px}
.prompt-box{background:#fff;border-radius:20px;border:1.5px solid var(--line);padding:18px 20px;box-shadow:0 20px 40px -32px rgba(140,67,12,.6)}
.prompt-box p.k{font-size:13px;font-weight:600;color:var(--a-deep);margin-bottom:8px}
.prompt-box p.t{font-size:var(--step--1);line-height:1.55}

/* ══ Seitenwechsel ═════════════════════════════════════════════════
   Header bleibt stehen, das Motiv der Vorschau wandert an seinen Platz
   im neuen Kopf, der Rest blendet weich über. */
@view-transition{navigation:auto}
.site-header{view-transition-name:kopf}
::view-transition-old(kopf),::view-transition-new(kopf){animation:none}
.page-head .head-motif{view-transition-name:kopfmotiv}
::view-transition-group(kopfmotiv){animation-duration:.6s;animation-timing-function:cubic-bezier(.22,.8,.24,1)}
::view-transition-old(root){animation:vt-out .3s ease both}
::view-transition-new(root){animation:vt-in .5s cubic-bezier(.22,.8,.24,1) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-24px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(32px)}}

/* ══ Hintergrund: Farbflächen, die langsam wandern ════════════════ */
.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:linear-gradient(155deg,color-mix(in srgb,var(--g1) 34%,#fff) 0%,color-mix(in srgb,var(--g2) 30%,#fff) 48%,color-mix(in srgb,var(--g4) 34%,#fff) 100%)}
.ambient i{position:absolute;display:block;width:72vmax;height:72vmax;border-radius:50%;opacity:.8;
  background:radial-gradient(closest-side,var(--c) 0%,color-mix(in srgb,var(--c) 55%,transparent) 42%,transparent 100%);
  animation:ambient-move var(--d) ease-in-out infinite alternate}
.ambient i::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(closest-side,var(--c2) 0%,color-mix(in srgb,var(--c2) 55%,transparent) 42%,transparent 100%);
  animation:ambient-swap 30s ease-in-out infinite alternate;animation-delay:inherit}
.ambient i:nth-child(1){--c:var(--g1);--c2:var(--g3);--d:30s;left:-20vmax;top:-26vmax;translate:calc(var(--px,0) * 8vw) calc(var(--py,0) * 10vh)}
.ambient i:nth-child(2){--c:var(--g2);--c2:var(--g1);--d:27s;right:-24vmax;top:-8vmax;animation-delay:-8s;translate:calc(var(--py,0) * -10vw) calc(var(--px,0) * 12vh)}
.ambient i:nth-child(3){--c:var(--g3);--c2:var(--g4);--d:33s;left:22vw;top:34vh;animation-delay:-15s;translate:calc(var(--px,0) * -12vw) calc(var(--py,0) * -14vh)}
.ambient i:nth-child(4){--c:var(--g4);--c2:var(--g2);--d:29s;left:-26vmax;bottom:-34vmax;animation-delay:-21s;translate:calc(var(--py,0) * 9vw) calc(var(--px,0) * -10vh)}
@keyframes ambient-move{
  0%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
  25%{transform:translate3d(14vw,8vh,0) scale(1.18) rotate(20deg)}
  50%{transform:translate3d(4vw,-10vh,0) scale(.9) rotate(-10deg)}
  75%{transform:translate3d(-12vw,6vh,0) scale(1.1) rotate(14deg)}
  100%{transform:translate3d(8vw,12vh,0) scale(1.22) rotate(-6deg)}
}
@keyframes ambient-swap{0%,15%{opacity:0}85%,100%{opacity:1}}

/* ══ Bewegung beim Erscheinen, je Kapitel eine eigene ══════════════
   Nur mit JavaScript (html.js) und ohne Wunsch nach reduzierter Bewegung.
   Elemente mit [data-in] werden sichtbar, sobald sie ins Bild kommen. */
@media (prefers-reduced-motion:no-preference){
  html.js [data-in]{transition:opacity .6s ease,transform .7s cubic-bezier(.22,.8,.24,1),clip-path .8s cubic-bezier(.22,.8,.24,1)}
  html.js [data-in]:not(.is-in){opacity:0}
  /* Verstehen: Nachrichten tippen sich ein, nacheinander */
  html.js [data-section="verstehen"] [data-in]:not(.is-in){transform:translateY(16px) scale(.96);transform-origin:0 100%}
  html.js [data-section="verstehen"] .figures li[data-in]::before{animation:typing .9s steps(3) 2}
  html.js [data-section="verstehen"] .figures li[data-in]:not(.is-in) b,html.js [data-section="verstehen"] .figures li[data-in]:not(.is-in) > span{opacity:0}
  html.js [data-section="verstehen"] .figures li[data-in] b,html.js [data-section="verstehen"] .figures li[data-in] > span{transition:opacity .5s ease .6s}
  /* Vergleich: links fährt von links ein, rechts von rechts */
  html.js .vs-row[data-in]:not(.is-in) .vs-a{transform:translateX(-28px);opacity:0}
  html.js .vs-row[data-in]:not(.is-in) .vs-b{transform:translateX(28px);opacity:0}
  html.js .vs-row[data-in] .vs-a,html.js .vs-row[data-in] .vs-b{transition:transform .7s cubic-bezier(.22,.8,.24,1),opacity .6s ease}
  html.js .vs-row[data-in]:not(.is-in){opacity:1;transform:none}
  /* Chancen: Kreise wachsen aus der Mitte */
  html.js [data-section="chancen"] [data-in]:not(.is-in){transform:scale(.82)}
  html.js [data-section="chancen"] .figures li.is-in{animation:float 7s ease-in-out infinite alternate}
  html.js [data-section="chancen"] .figures li:nth-child(2).is-in{animation-delay:-2.3s}
  html.js [data-section="chancen"] .figures li:nth-child(3).is-in{animation-delay:-4.6s}
  /* Risiken: von links eingeblendet, der Faden zieht sich danach */
  html.js [data-section="risiken"] [data-in]:not(.is-in){transform:translateX(-18px)}
  html.js [data-section="risiken"] [data-in]{--thread:0}
  html.js [data-section="risiken"] [data-in].is-in{--thread:1;transition:opacity .6s ease,transform .7s cubic-bezier(.22,.8,.24,1),--thread 1.2s .3s ease}
  /* Alltag: steigt auf wie ein Sonnenaufgang im Fenster */
  html.js [data-section="alltag"] [data-in]:not(.is-in){clip-path:inset(100% 0 0 0 round 200px 200px 0 0);opacity:1}
  html.js [data-section="alltag"] [data-in].is-in{clip-path:inset(0 0 0 0 round 0)}
  /* Recht: Blätter werden abgelegt, Zahlen gestempelt */
  html.js [data-section="recht"] [data-in]:not(.is-in){transform:translateY(-14px) rotate(-1.5deg)}
  html.js [data-section="recht"] .figures li.is-in b{animation:stamp .45s .25s cubic-bezier(.3,1.6,.5,1) both}
  /* Krefeld: Naht wird gezogen */
  html.js [data-section="krefeld"] [data-in]:not(.is-in){transform:translateY(12px);outline-color:transparent}
  /* Startseite */
  html.js .is-home [data-in]:not(.is-in){transform:translateY(20px)}
  /* Balken wachsen von links */
  html.js .daybar-i i[data-in]:not(.is-in){transform:scaleX(0);opacity:1;clip-path:none}
  html.js .daybar-i i[data-in]{transition:transform 1s cubic-bezier(.22,.8,.24,1)}
}
@property --thread{syntax:"<number>";inherits:true;initial-value:1}
@keyframes typing{0%{background-position:0 0}33%{background-position:0 -3px}66%{background-position:0 0}}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(-10px)}}
@keyframes stamp{from{transform:rotate(-3deg) scale(1.6);opacity:0}to{transform:rotate(-3deg) scale(1);opacity:1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .ambient i{translate:none}
}

/* Druck: siehe print.css */

/* ══ Vergleich: Assistent oder Begleiter ══════════════════════════ */
.vs{margin-top:1.4em!important;display:grid;gap:0}
.vs-head,.vs-row{display:grid;grid-template-columns:minmax(110px,150px) 1fr 1fr;gap:0 clamp(16px,2.4vw,32px);align-items:start}
.vs-head{padding-bottom:14px;border-bottom:3px solid var(--a)}
.vs-head p{font-weight:700;font-size:var(--step-0);line-height:1.3;display:flex;flex-direction:column;gap:2px}
.vs-head small{font-weight:400;font-size:var(--step--1);color:var(--grey)}
.vs-head p:nth-of-type(1){grid-column:2}
.vs-row{padding:16px 0;border-bottom:1px solid var(--line)}
.vs-l{font-size:var(--step--1);font-weight:600;color:var(--a-deep);padding-top:2px}
.vs-row p{font-size:var(--step--1);line-height:1.55}
.vs-row .vs-b{padding-left:clamp(14px,2vw,22px);border-left:3px solid var(--b)}
.vs-row .vs-a{padding-left:clamp(14px,2vw,22px);border-left:3px solid var(--a)}
.vs-ico{display:inline-block;width:30px;height:22px;margin-bottom:6px}
.vs-ico--a{background:var(--a);border-radius:4px;clip-path:polygon(0 0,100% 0,100% 72%,30% 72%,14% 100%,14% 72%,0 72%)}
.vs-ico--b{background:var(--b);border-radius:50%/60%;clip-path:polygon(0 0,100% 0,100% 74%,86% 74%,86% 100%,68% 74%,0 74%)}
@media (max-width:700px){
  .vs-head,.vs-row{grid-template-columns:1fr 1fr}
  .vs-head p:nth-of-type(1){grid-column:auto}
  .vs-l{grid-column:1 / -1;margin-bottom:6px}
}

/* ══ Warnhinweis Endlos-Feed ══════════════════════════════════════ */
.warn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#5C3A00;background:#FFE08A;border:1px solid #E7B52C;padding:3px 10px 3px 8px;border-radius:999px;margin-right:8px;white-space:nowrap}
.warn svg{width:16px;height:15px;color:#B42318}

/* ══ Startseite: Slideshow der Selbsttests ═════════════════════════ */
.showcase{display:grid;gap:22px;background:linear-gradient(120deg,var(--c-verstehen-tint),color-mix(in srgb,var(--c-verstehen-tint) 50%,#fff) 60%,var(--c-chancen-tint));border-radius:36px 36px 36px 8px;padding:clamp(22px,3.5vw,48px)}
@media (min-width:1000px){.showcase{grid-template-columns:230px 1fr;grid-template-rows:1fr auto;column-gap:clamp(28px,3vw,48px)}}
.sc-tabs{list-style:none;margin:0;padding:0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.sc-tabs::-webkit-scrollbar{display:none}
@media (min-width:1000px){.sc-tabs{flex-direction:column;grid-row:1 / span 2;overflow:visible}}
.sc-tabs button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 14px;border-radius:999px;border:1.5px solid transparent;background:rgba(255,255,255,.55);cursor:pointer;text-align:left;font-weight:600;font-size:15px;white-space:nowrap;color:var(--ink-2)}
.sc-tabs button::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--a);flex:none}
.sc-tabs button[aria-selected="true"]{background:#fff;border-color:var(--a);color:var(--ink)}
.sc-stage{position:relative;min-height:440px;display:grid;overflow:hidden;padding:18px 12px;margin:-18px -12px}
.sc-slide{grid-area:1 / 1}
.sc-slide{display:grid;gap:clamp(24px,4vw,56px);align-items:center}
@media (min-width:760px){.sc-slide{grid-template-columns:minmax(260px,360px) 1fr}}
/* Alle Folien liegen übereinander, die Bühne hat dadurch immer die Höhe der größten:
   kein Springen beim Wechsel. Neue Folie gleitet von rechts herein, die alte
   blendet nach links aus, beide mit derselben weichen Kurve. */
html.js .sc-slide{visibility:hidden;opacity:0;transform:translateX(56px);
  transition:opacity .75s cubic-bezier(.65,0,.35,1),transform .9s cubic-bezier(.65,0,.35,1),visibility 0s linear .9s}
html.js .sc-slide.is-active{visibility:visible;opacity:1;transform:none;transition:opacity .75s cubic-bezier(.65,0,.35,1) .1s,transform .9s cubic-bezier(.65,0,.35,1),visibility 0s}
html.js .sc-slide.is-leaving{visibility:visible;opacity:0;transform:translateX(-56px);transition:opacity .45s ease,transform .9s cubic-bezier(.65,0,.35,1),visibility 0s linear .9s;pointer-events:none}
html.js .sc-slide .sc-text{transition:transform .9s cubic-bezier(.65,0,.35,1) .08s}
html.js .sc-slide:not(.is-active) .sc-text{transform:translateX(24px)}
html.js .sc-slide.is-leaving .sc-text{transform:translateX(-12px)}
html.js .sc-slide[hidden]{display:grid!important}
.sc-preview{display:flex;justify-content:center}
.sc-preview .phone{height:auto;max-height:none;width:100%;max-width:340px;transform:rotate(-2.5deg);box-shadow:0 30px 60px -30px rgba(36,53,154,.45)}
.sc-preview .msgs{overflow:visible}
.sc-k{font-size:14px;font-weight:700;color:var(--a-deep)}
.sc-text h3{font-family:var(--serif);font-size:var(--step-3);font-weight:600;line-height:1.1;margin-top:6px}
.sc-text > p:not(.sc-k):not(.actions){margin-top:14px;color:var(--ink-2);max-width:46ch}
.sc-controls{display:flex;align-items:center;gap:14px}
.sc-pause{min-height:44px;padding:6px 16px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;cursor:pointer;font-weight:600;font-size:14px}
.sc-progress{flex:1;max-width:260px;height:4px;border-radius:2px;background:rgba(23,28,43,.12);overflow:hidden}
.sc-progress i{display:block;height:100%;width:100%;background:var(--c-verstehen);transform-origin:left;transform:scaleX(0)}
.sc-progress i.run{animation:sc-bar 5s linear forwards}
@keyframes sc-bar{to{transform:scaleX(1)}}
html:not(.js) .sc-controls{display:none}
html:not(.js) .sc-slide[hidden]{display:grid!important}
html:not(.js) .sc-stage{display:block}
html:not(.js) .sc-slide + .sc-slide{margin-top:40px}
/* Mini-Vorschauen */
.phone--reel{padding:0;overflow:hidden;background:#000;border:6px solid #0B0D12}
.mini-reel{position:relative;aspect-ratio:9/14;background:#000;color:#fff;overflow:hidden}
.mini-reel .mini-scene{position:absolute;inset:0;width:100%;height:100%}
.mini-reel::after{content:"";position:absolute;inset:auto 0 0 0;height:50%;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.mini-reel .reel-side,.mini-reel .reel-meta{z-index:1}
.mini-reel .reel-side svg{width:26px;height:26px;fill:#fff}
.mini-reel .reel-side span{display:flex;flex-direction:column;align-items:center;gap:3px}
.sms--mini{width:100%;max-width:330px;transform:rotate(2deg)}
.sms--mini .sms-body{min-height:0}
.sms--mini mark{background:#FFE08A}
.mini-phases,.mini-check,.mini-quiz{width:100%;max-width:330px;background:#fff;border-radius:22px;padding:18px;box-shadow:0 30px 60px -30px rgba(20,25,39,.4);transform:rotate(-2deg)}
.mini-phases p{display:flex;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);margin-top:6px;font-weight:600;font-size:15px;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.mini-phases p:first-child{margin-top:0}
.mini-phases b{font-family:var(--serif);color:var(--c-risiken);font-size:18px}
.mini-phases p.on{background:var(--c-risiken-deep);color:#fff;border-color:var(--c-risiken-deep)}
.mini-phases p.on b{color:#fff}
.mini-check p{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.mini-check i{width:20px;height:20px;border:2px solid var(--c-alltag);border-radius:5px;flex:none}
.mini-check .done i{background:var(--c-alltag) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10l3 3 7-7' fill='none' stroke='white' stroke-width='2.5'/%3E%3C/svg%3E") center/16px no-repeat}
.mini-check .done{text-decoration:line-through;color:var(--grey)}
.mini-check .mini-bar{border:0;padding-top:14px}
.mini-check .mini-bar span{display:block;height:8px;width:100%;border-radius:999px 999px 4px 4px;background:linear-gradient(90deg,var(--c-alltag) 18%,rgba(23,28,43,.1) 0)}
.mini-quiz{border-radius:40px}
.mq-k{font-size:13px;color:var(--grey);font-weight:600}
.mq-q{font-family:var(--serif);font-size:26px;font-weight:600;margin:6px 0 12px}
.mq-a{padding:10px 14px;border-radius:999px;border:1.5px solid var(--line);margin-top:8px;font-weight:600}
.mq-ok{background:var(--c-chancen-tint);border-color:var(--c-chancen);color:var(--c-chancen-deep)}
.fb-row--one{grid-template-columns:1fr!important;max-width:420px}

/* Startseite: Hinweis zur Bedienung */
.home-howto{padding-bottom:0!important}
.howto{display:flex;gap:18px;align-items:flex-start;max-width:900px;padding:18px 22px;border-left:5px solid var(--c-verstehen);background:linear-gradient(90deg,color-mix(in srgb,var(--c-verstehen-tint) 85%,transparent),transparent 90%)}
.howto-t{font-weight:700;margin-bottom:4px}
.howto p:not(.howto-t){color:var(--ink-2);font-size:var(--step--1);line-height:1.6}
.howto-ico{flex:none;width:26px;height:40px;border:2.5px solid var(--c-verstehen-deep);border-radius:14px;position:relative;margin-top:4px}
.howto-ico i{position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--c-verstehen-deep);animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}
@media (max-width:759px){.sc-preview .phone,.sc-preview .sms--mini,.sc-preview .mini-phases,.sc-preview .mini-check,.sc-preview .mini-quiz{max-width:280px}}

/* ══ Kapitelnamen in der Leiste: Hauptfarbe des Kapitel-Hintergrunds ══
   Jeder Name trägt klar die Hauptfarbe seines Kapitels (--nav-a), durch die
   langsam ein verwandter Ton wandert (--nav-b). Beide Töne sind so dunkel
   gewählt, dass sie mindestens 4,5:1 Kontrast zur Leiste haben (WCAG AA). */
.t-verstehen{--nav-a:#2E4CFF;--nav-b:#096B8B}
.t-chancen{--nav-a:#A84900;--nav-b:#855D00}
.t-risiken{--nav-a:#B9226E;--nav-b:#8E1F86}
.t-alltag{--nav-a:#167074;--nav-b:#1E7146}
.t-recht{--nav-a:#6138FF;--nav-b:#8E2FB0}
.t-krefeld{--nav-a:#1E7150;--nav-b:#506C1E}
.nav-label{color:var(--nav-a,var(--ink));font-weight:600}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .nav-label{
    background-image:linear-gradient(100deg,var(--nav-a) 0%,var(--nav-a) 38%,var(--nav-b) 50%,var(--nav-a) 62%,var(--nav-a) 100%);
    background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
    animation:nav-flow 9s linear infinite}
  :is(.primary .nav-item,.chapter-strip li,.dr-sec):nth-child(2) .nav-label{animation-delay:-1.5s}
  :is(.primary .nav-item,.chapter-strip li,.dr-sec):nth-child(3) .nav-label{animation-delay:-3s}
  :is(.primary .nav-item,.chapter-strip li,.dr-sec):nth-child(4) .nav-label{animation-delay:-4.5s}
  :is(.primary .nav-item,.chapter-strip li,.dr-sec):nth-child(5) .nav-label{animation-delay:-6s}
  :is(.primary .nav-item,.chapter-strip li,.dr-sec):nth-child(6) .nav-label{animation-delay:-7.5s}
  :is(.primary .nav-item,.chapter-strip li).is-current .nav-label{background:none;color:#fff;-webkit-text-fill-color:#fff;animation:none}
}
.primary .nav-item.is-current > .nav-top{background:var(--nav-a)}
@keyframes nav-flow{to{background-position:300% 0}}
@media (prefers-reduced-motion:reduce){.nav-label{animation:none}}

/* Feedback-Seite: ruhige Hintergrundtöne statt Lila */
.is-feedback{--g1:#5FB0F5;--g2:#FFB066;--g3:#4FD1C5;--g4:#8EA2FF}
.fb-intro{color:var(--ink-2);margin-bottom:1.6em!important}

/* Kapitelnamen in der Leiste ohne Punkt davor (Wunsch des Nutzers) */
.primary .nav-top::before{content:none}

/* Kapitelzeile für iPad und Handy: dieselben Kapitelfarben wie die Leiste am Mac */
.chapter-strip{display:none}
@media (max-width:1119px){
  .chapter-strip{display:block;border-top:1px solid rgba(23,28,43,.08)}
  .chapter-strip ul{list-style:none;margin:0 auto;padding:4px var(--gutter) 6px;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;max-width:var(--wide);-webkit-overflow-scrolling:touch}
  .chapter-strip ul::-webkit-scrollbar{display:none}
  .chapter-strip li{flex:none}
  .chapter-strip a{display:flex;align-items:center;min-height:40px;padding:6px 12px;border-radius:999px;text-decoration:none;font-size:15px}
  .chapter-strip li.is-current a{background:var(--nav-a)}
  html{scroll-padding-top:calc(var(--bar) + 70px)}
}
@media (min-width:700px) and (max-width:1119px){.chapter-strip ul{justify-content:center}}
/* Menü auf iPad und Handy: Kapitelnamen in ihrer Farbe, ohne Punkt */
.dr-sec > summary::before{content:none}
.dr-sec > summary .nav-label{font-family:var(--serif);font-size:26px}

/* Handy: keine Kapitelzeile, die Kapitel stehen im Menü */
@media (max-width:699px){.chapter-strip{display:none!important}html{scroll-padding-top:calc(var(--bar) + 24px)}}

/* Förderhinweis unter dem Einleitungstext der Startseite */
.hero .funding{margin-top:14px;font-size:13px;color:var(--grey);max-width:60ch}
/* App-Empfehlungen im Tipp, mit Store-Links */
.appchips{list-style:none;padding:0!important;display:grid;gap:10px;margin-top:.8em!important}
.appchips li{display:grid;grid-template-columns:1fr auto auto;gap:4px 10px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--ground);margin:0!important}
.appchips b{grid-column:1 / -1;font-size:var(--step-0)}
.appchips span{grid-column:1;font-size:var(--step--1);color:var(--ink-2)}
.appchips a{display:inline-flex;align-items:center;min-height:40px;padding:4px 14px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap}
.appchips a:hover{background:var(--a-deep)}
@media (max-width:560px){.appchips li{grid-template-columns:auto auto 1fr}.appchips span{grid-column:1 / -1}}
/* Verstehen: einzelne Kennzahl wieder in eine Form */
[data-section="verstehen"] .figures li:only-child{background:var(--a-tint);border:0;border-radius:26px 26px 26px 6px;padding:22px 26px}
[data-section="verstehen"] .figures li:only-child::before{grid-column:1 / -1}
/* Codewort-Karte auf der Website: eine schöne Karte statt zwei Schnittvorlagen */
@media screen{
  .doc .card-grid--copies{grid-template-columns:minmax(0,420px)}
  .doc .card-grid--copies .cutcard + .cutcard{display:none}
  .doc .card-grid--copies .cutcard{border:0;border-radius:24px;background:#fff;box-shadow:0 24px 48px -28px rgba(20,25,39,.45);border-top:8px solid var(--a);padding:26px 28px}
}
@media screen{.doc .card-grid--copies .cutcard > h3:first-child{margin-top:0}}
@media (max-width:479px){.age-chip{display:none!important}}