/* Wndrfalk, statische Seiten. Kein JavaScript, keine Fremdressourcen, keine Inline-Styles.
   Farben: Nachtblau und Sonnengelb aus der App, Neutrale vom Nachtblau abgeleitet. */
@font-face{font-family:"Onest";src:url("/assets/fonts/onest-latin-wght.052df745.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  color-scheme:light dark;
  /* Werte der App (tokens.css): bg, group, raised, float, on-surface, primary, secondary-container, accent */
  --bg:#F5F3F7; --surface:#FFFFFF; --raised:#EAE7EC; --float:#FFFFFF; --ink:#1B1B1F; --ink-2:#45464F; --line:#C6C6D0; --line-soft:rgba(198,198,208,.6);
  --primary:#374572; --on-primary:#FFFFFF; --sec:#DEE1F9; --on-sec:#161B2C;
  --band:#2E3A62; --on-band:#FFFFFF; --on-band-2:#D0D6EE; --band-line:rgba(255,255,255,.22);
  --stage-band:#2E3A62; --stage-soft:#DEE1F9; --shot-line:rgba(22,27,51,.14);
  --sun:#E7B42E; --sun-hover:#F0BE3A; --on-sun:#251A00;
  --link:#374572; --focus:#374572;
  --shadow-float:0 6px 20px rgb(0 0 0 / .14);
  --r-l:1rem; --r-sheet:1.75rem; --r-full:999px;
  --gutter:1rem;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#131316; --surface:#1F1F23; --raised:#292A2D; --float:#292A2D; --ink:#E4E2E6; --ink-2:#C6C6D0; --line:#45464F; --line-soft:rgba(69,70,79,.6);
    --primary:#B7C5FA; --on-primary:#202E5A; --sec:#414659; --on-sec:#DEE1F9;
    --band:#374572; --link:#B7C5FA; --focus:#B7C5FA;
    --stage-band:#374572; --stage-soft:#414659; --shot-line:rgba(255,255,255,.16);
    --sun:#F4BF39; --sun-hover:#F8CB5A; --on-sun:#251A00;
    --shadow-float:0 6px 20px rgb(0 0 0 / .4);
  }
}
@media (min-width:45rem){:root{--gutter:1.5rem}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:1.0625rem;line-height:1.6;overflow-wrap:break-word}
@media (min-width:45rem){body{font-size:1.125rem}}
img{max-width:100%;height:auto}
a{color:var(--link);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:3px}

.wrap{width:min(100% - 2*var(--gutter),70rem);margin-inline:auto}
.skip{position:absolute;left:var(--gutter);top:-4rem;z-index:40;background:var(--sun);color:var(--on-sun);padding:.6rem 1rem;border-radius:.5rem;font-weight:650;text-decoration:none}
.skip:focus{top:.75rem}

/* Kopf: schwebende Kapsel wie die Navigation der App, nur das Logo, keine Wortmarke */
.top{position:sticky;top:.5rem;z-index:30;padding:.5rem 0 0;pointer-events:none}
.top__in{pointer-events:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;background:var(--float);border:1px solid var(--line-soft);border-radius:var(--r-full);box-shadow:var(--shadow-float);padding:.4rem .5rem .4rem .9rem;min-height:3.75rem}
.top nav ul{display:flex;flex-wrap:wrap;gap:.25rem .5rem;list-style:none;margin:0;padding:0;align-items:center}
.top a{color:inherit}
.mark{display:inline-flex;align-items:center;min-height:2.75rem;min-width:2.75rem;text-decoration:none}
.mark img{display:block;width:2.75rem;height:2.75rem}
.top nav a{font-size:1rem;font-weight:550;min-height:2.75rem;padding:.4rem .95rem;border-radius:var(--r-full);display:inline-flex;align-items:center;text-decoration:none}
.top nav a:hover{background:var(--raised)}

/* Startseite: Flächen, Kapseln und Radien wie in der App */
.hero__grid{display:grid;gap:2.5rem;padding-top:clamp(1.5rem,1rem + 3vw,3.5rem)}
.hero__text{max-width:38rem;align-self:center}
.hero__mark{display:block;width:clamp(7rem,4.5rem + 9vw,11rem);height:auto;margin:0 0 1.5rem}
.hero h1{margin:0 0 1.25rem;font-size:clamp(2.25rem,1.1rem + 5.4vw,4.5rem);line-height:1.04;font-weight:660;letter-spacing:-.03em;text-wrap:balance}
.hero .lede{max-width:33rem;font-size:clamp(1.125rem,1.02rem + .5vw,1.3125rem);line-height:1.5;color:var(--ink-2)}
.hero .lede p{margin:0;text-wrap:pretty}
.chips{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;list-style:none;margin:1.5rem 0 0;padding:0}
.hero__data{text-wrap:pretty;max-width:33rem;margin:.75rem 0 0;font-size:1rem;line-height:1.55;color:var(--ink-2)}
.chips li{display:inline-flex;align-items:center;gap:.5rem;font-size:1rem;font-weight:650;color:var(--ink)}
.chips li::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--primary);flex:none}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin:2rem 0 0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:3.25rem;padding:.7rem 1.75rem;border-radius:var(--r-full);background:var(--sun);color:var(--on-sun);font-weight:650;text-decoration:none;box-shadow:0 2px 6px rgb(0 0 0 / .18),0 6px 16px rgb(0 0 0 / .14);transition:background-color .15s ease,transform .15s ease}
.btn:hover{background:var(--sun-hover);text-decoration:none}
.btn:active{transform:scale(.97)}
.btn--tonal{background:var(--sec);color:var(--on-sec);box-shadow:none}
.btn--tonal:hover{background:var(--sec);filter:brightness(.97);text-decoration:none}
.top nav a.btn--sm{min-height:2.75rem;padding:.4rem 1.2rem;font-size:1rem;box-shadow:none;color:var(--on-sun);background:var(--sun)}
.top nav a.btn--sm:hover{background:var(--sun-hover)}
.top--home .nav__cta{display:none}
@media (min-width:38rem){.top--home .nav__cta{display:block}}

/* Bildflächen: Telefon unten angeschnitten auf ruhiger Fläche */
.stage{margin:0;display:flex;justify-content:center;align-items:flex-end;overflow:hidden;border-radius:var(--r-sheet);padding:clamp(1.75rem,1rem + 4vw,3rem) clamp(1.25rem,.5rem + 4vw,3rem) 0}
.stage--band{background:var(--stage-band)}
.stage--soft{background:var(--stage-soft);border-radius:1.25rem}
.stage picture{display:block;width:min(100%,21rem)}
.stage img{display:block;width:100%;height:auto;border-radius:1.9rem 1.9rem 0 0;border:1px solid var(--shot-line);border-bottom:0;box-shadow:0 18px 50px -12px rgba(12,18,48,.45),0 2px 6px rgba(12,18,48,.12)}
.hero__shot{align-self:end}
.hero__shot picture{width:min(100%,22.5rem)}
@media (min-width:56rem){
  .hero__grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:4rem;align-items:end}
  .hero__text{padding-bottom:clamp(2rem,4vw,4.5rem)}
}

/* Abschnitte der Startseite: je eine Gruppenfläche wie in der App */
.sec{padding-top:clamp(2.5rem,1.5rem + 4vw,5rem)}
.sec__grid{display:grid;gap:1.75rem;background:var(--surface);border-radius:var(--r-sheet);padding:min(clamp(.75rem,.4rem + 1.6vw,1.5rem),3vw)}
.sec__body{max-width:31rem;align-self:center;padding:clamp(.75rem,.4rem + 1.5vw,1.75rem) min(clamp(.5rem,.2rem + 1.5vw,1.5rem),2.5vw) 0}
.sec h2{margin:0 0 .9rem;font-size:clamp(1.625rem,1.2rem + 2vw,2.5rem);line-height:1.12;font-weight:660;letter-spacing:-.022em;text-wrap:balance}
.sec__body p{margin:0;font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.55;color:var(--ink-2)}
@media (min-width:56rem){
  .sec--fig .sec__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.5rem}
  .sec--fig-left .sec__fig{order:-1}
  .sec__body{padding-top:0}
  .sec__fig{height:100%;min-height:30rem}
}
.sec__fig figcaption{display:none}
.sec--plain .sec__body{max-width:44rem;padding-bottom:clamp(.75rem,.4rem + 1.5vw,1.75rem)}

/* Kopfleiste auf der Startseite: ganz oben nur die Links ohne Kapsel und ohne Marke (die große Marke steht im Kopfbereich).
   Beim Scrollen füllt sich die Kapsel und die kleine Marke blendet ein. Ohne Unterstützung für scrollgebundene Animation
   bleibt die Kapsel mit Marke dauerhaft sichtbar. */
@keyframes mark-in{from{opacity:0;transform:translateY(.6rem) scale(.8)}to{opacity:1;transform:none}}
@keyframes cap-in{to{background-color:var(--float);border-color:var(--line-soft);box-shadow:var(--shadow-float)}}
@supports (animation-timeline:scroll()){
  .top--home .top__in{background-color:transparent;border-color:transparent;box-shadow:none;animation:cap-in linear both;animation-timeline:scroll(root block);animation-range:20px 100px}
  .top--home .mark img{opacity:0;animation:mark-in linear both;animation-timeline:scroll(root block);animation-range:100px 280px}
  .top--home .mark:focus-visible img{opacity:1!important;transform:none!important}
}
@media (prefers-reduced-motion:reduce){
  @supports (animation-timeline:scroll()){
    .top--home .top__in{animation:none;background-color:var(--float);border-color:var(--line-soft);box-shadow:var(--shadow-float)}
    .top--home .mark img{animation:none;opacity:1}
  }
}

/* Schlussaufruf */
.close{padding-top:clamp(2.5rem,1.5rem + 4vw,5rem)}
.close__panel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 2.5rem;background:var(--band);color:var(--on-band);border-radius:var(--r-sheet);padding:clamp(2rem,1rem + 5vw,4rem)}
.close h2{margin:0;font-size:clamp(1.75rem,1.2rem + 2.4vw,2.5rem);line-height:1.1;font-weight:660;letter-spacing:-.022em;max-width:20ch;text-wrap:balance}
.close p{margin:0}
.close .btn{min-height:3.5rem}
.close :focus-visible{outline-color:#fff}

/* Fließtext (Startseite und Unterseiten) */
.prose p,.prose ul,.prose ol,.prose dl,.prose blockquote,.prose pre,.prose .tablewrap,.prose figure,.sec__body>p,.sec__body>ul,.sec__body>ol,.sec__body>dl,.sec__body>.note{margin:0 0 1rem}
.prose ul,.prose ol,.sec__body ul,.sec__body ol{padding-left:1.35rem}
.prose li,.sec__body li{margin:.3rem 0}
.prose li>ul,.prose li>ol{margin:.3rem 0}
.prose h1{margin:0 0 1.25rem;font-size:clamp(1.9rem,1.3rem + 3vw,2.75rem);line-height:1.12;font-weight:650;letter-spacing:-.02em;text-wrap:balance}
.prose h2{margin:2.75rem 0 .75rem;font-size:1.625rem;line-height:1.25;font-weight:650;letter-spacing:-.01em}
.prose h3{margin:2rem 0 .5rem;font-size:1.25rem;line-height:1.3;font-weight:650}
.prose h4{margin:1.5rem 0 .4rem;font-size:1.0625rem;font-weight:650}
.prose{max-width:42rem}
.prose .lede{font-size:1.1875rem;color:var(--ink-2)}
code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;background:var(--surface);border:1px solid var(--line);border-radius:.375rem;padding:.08em .35em}
pre{background:var(--surface);border:1px solid var(--line);border-radius:.75rem;padding:1rem;overflow-x:auto;font-size:.9rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
pre code{background:none;border:0;padding:0}
blockquote{margin-left:0;padding-left:1rem;border-left:2px solid var(--line);color:var(--ink-2)}
hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.9375rem}
th,td{text-align:left;vertical-align:top;padding:.55rem .75rem;border-bottom:1px solid var(--line)}
th{font-weight:650;border-bottom:2px solid var(--line)}
.note{background:var(--surface);border:1px solid var(--line);border-radius:.75rem;padding:.9rem 1.1rem}
.note p:last-child{margin-bottom:0}
.prose figure{max-width:19rem}
.prose figure img{display:block;width:100%;border:1px solid var(--line);border-radius:1.25rem}

/* Liste mit Begriff und Erklärung */
.dl{display:grid;border-top:1px solid var(--line);margin:1.5rem 0 1.25rem}
.dl>div{display:grid;gap:.1rem;padding:.8rem 0;border-bottom:1px solid var(--line)}
.dl dt{font-weight:650}
.dl dd{margin:0;color:var(--ink-2)}
@media (min-width:40rem){.dl>div{grid-template-columns:13rem minmax(0,1fr);gap:1.5rem}}

/* Unterseiten */
.page{padding-block:1.5rem 1rem}
.crumbs{margin:0 0 1.25rem;font-size:.9375rem}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.25rem .5rem;list-style:none;margin:0;padding:0}
.crumbs li+li::before{content:"/";margin-right:.5rem;color:var(--ink-2)}
.children{list-style:none;padding:0!important;margin:1.25rem 0}
.children li{padding:.85rem 0;margin:0;border-bottom:1px solid var(--line)}
.children li:first-child{border-top:1px solid var(--line)}
.children a{font-weight:650}
.children span{display:block;color:var(--ink-2);font-size:.9375rem}

/* Fuß */
.foot{margin-top:clamp(3rem,2rem + 5vw,6rem);border-top:1px solid var(--line);padding:2rem 0 3rem;color:var(--ink-2);font-size:.9375rem}
.foot ul{display:flex;flex-wrap:wrap;gap:.5rem .5rem;list-style:none;margin:0 0 1.25rem -.75rem;padding:0}
.foot li a{display:inline-flex;align-items:center;min-height:2.75rem;padding:.3rem .75rem;border-radius:var(--r-full);text-decoration:none}
.foot li a:hover{background:var(--raised)}
.foot a{color:var(--ink)}
.foot p{margin:0 0 .5rem;max-width:42rem}
.foot .lang{margin-top:1rem}

@media print{.skip,.top nav{display:none}.close__panel{background:none;color:#000}}

/* Handbuch: Kapitelliste links, Text rechts; am Telefon einklappbar */
.hb{display:grid;gap:1.25rem;padding-block:1rem 1rem}
.hb__side{min-width:0}
.hb__wide{display:none}
.hb__side ul{list-style:none;margin:0;padding:0}
.hb__side a{display:block;padding:.35rem .7rem;border-radius:.6rem;text-decoration:none;font-size:.98rem;line-height:1.35;color:var(--ink-2)}
.hb__side a:hover{background:var(--raised)}
.hb__side a[aria-current="page"]{background:var(--sec);color:var(--on-sec);font-weight:600}
.hb__fold{border:1px solid var(--line-soft);border-radius:var(--r-l);background:var(--surface);padding:.2rem .6rem}
.hb__fold>summary{cursor:pointer;min-height:2.75rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-weight:600;list-style:none}
.hb__fold>summary::-webkit-details-marker{display:none}
.hb__fold>summary::after{content:"";flex:none;width:.45rem;height:.45rem;margin-right:.4rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-.1rem)}
.hb__fold[open]>summary::after{transform:rotate(-135deg)}
.hb__fold a{min-height:2.75rem;display:flex;align-items:center}
@media (min-width:56rem){
  .hb{grid-template-columns:15rem minmax(0,42rem);gap:3.5rem}
  .hb__side{position:sticky;top:5.75rem;align-self:start}
  .hb__wide{display:block}
  .hb__fold{display:none}
}
.hb__main h2{scroll-margin-top:6rem}
.toc{margin:0 0 1.5rem}.toc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.toc a{display:inline-block;padding:.3rem .8rem;border:1px solid var(--line);border-radius:var(--r-full);text-decoration:none;font-size:.93rem;color:var(--ink-2)}
.toc a:hover{background:var(--raised)}
kbd{font:inherit;font-size:.9em;border:1px solid var(--line);border-bottom-width:2px;border-radius:.35rem;padding:.05rem .4rem;background:var(--surface)}

/* Sprachmenü im Kopf, ohne Skript (details) */
.nav__lang{position:relative}
.langmenu>summary{list-style:none;cursor:pointer;font-size:1rem;font-weight:550;min-height:2.75rem;padding:.4rem .95rem;border-radius:var(--r-full);display:inline-flex;align-items:center;gap:.4rem}
.langmenu>summary::-webkit-details-marker{display:none}
.langmenu>summary::after{content:"";width:.45rem;height:.45rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-.1rem)}
.langmenu>summary:hover{background:var(--raised)}
.langmenu[open]>summary::after{transform:rotate(-135deg)}
.top nav .langmenu>ul{position:absolute;right:0;top:calc(100% + .35rem);z-index:5;min-width:11rem;flex-direction:column;align-items:stretch;gap:.1rem;background:var(--float);border:1px solid var(--line-soft);border-radius:var(--r-l);box-shadow:var(--shadow-float);padding:.35rem}
.langmenu[open]>ul{display:flex}
.top nav .langmenu a{display:flex}
.top nav .langmenu a[aria-current="true"]{background:var(--sec);color:var(--on-sec)}
@media print{.hb__side{display:none}}

/* Sehr schmale Telefone (bis 360 px): Kopfleiste bleibt einzeilig, auch mit „Português“ */
@media (max-width:22.5rem){.top nav a,.langmenu>summary{padding-inline:.7rem}.top__in{column-gap:.5rem}th,td{padding-inline:.5rem}}
/* Vor und zurück am Kapitelende */
.pager{display:flex;flex-wrap:wrap;gap:.75rem;margin:3rem 0 0;padding-top:1.5rem;border-top:1px solid var(--line-soft)}
.pager a{flex:1 1 14rem;display:flex;flex-direction:column;gap:.15rem;min-height:2.75rem;padding:.75rem 1rem;border:1px solid var(--line);border-radius:var(--r-l);text-decoration:none;color:inherit}
.pager a:hover{background:var(--raised)}
.pager span{font-size:.875rem;color:var(--ink-2)}
.pager__next{text-align:right;margin-left:auto}