/* Schriften selbst gehostet (Fontsource, SIL Open Font License) – keine Verbindung zu Google */
@font-face{font-family:'Newsreader';font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/fonts/newsreader-latin-opsz-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/fonts/newsreader-latin-ext-opsz-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:italic;font-display:swap;font-weight:200 800;src:url(/assets/fonts/newsreader-latin-opsz-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:italic;font-display:swap;font-weight:200 800;src:url(/assets/fonts/newsreader-latin-ext-opsz-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-display:swap;font-weight:300 900;src:url(/assets/fonts/figtree-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-display:swap;font-weight:300 900;src:url(/assets/fonts/figtree-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --paper: oklch(0.975 0.012 80);
  --paper-2: oklch(0.945 0.02 78);
  --paper-warm: color-mix(in oklch, var(--sun) 13%, var(--paper)); /* warme Fläche: Hero-Textspalte */
  --ink: oklch(0.22 0.015 60);
  --ink-soft: oklch(0.45 0.015 60);
  --line: color-mix(in oklch, var(--ink) 14%, var(--paper));
  --sun: oklch(0.70 0.165 48);       /* Orange aus Finns Spielzeug */
  --sun-deep: oklch(0.58 0.16 42);   /* Orange-Schrift ab 24 px / 19 px fett */
  --sun-text: oklch(0.54 0.15 42);   /* Orange-Schrift klein — Setzung 2026-10-09, 5,0 : 1 auf --paper */
  --sun-light: oklch(0.85 0.12 60);  /* Orange auf Dunkel und auf Foto-Verlauf */
  --paper-on-dark: oklch(0.95 0.01 90);
  --shade: oklch(0.18 0.02 60);      /* Verlauf über Fotos */
  --grass: oklch(0.52 0.07 140);     /* Wiese im Shooting */
  --night: oklch(0.25 0.03 150);
  --r-s: 4px; --r-m: 10px; --r-l: 22px;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Figtree", system-ui, sans-serif;
  --ease-out: cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-padding-top:84px}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
body{margin:0; background:var(--paper); color:var(--ink); font:400 17px/1.6 var(--sans); -webkit-font-smoothing:antialiased}
img{display:block; max-width:100%}
h1,h2,h3{font-family:var(--serif); font-weight:300; line-height:1.05; letter-spacing:-0.01em; text-wrap:balance; margin:0; font-optical-sizing:auto}
p{text-wrap:pretty; margin:0 0 1em}
a{color:inherit}
.wrap{width:min(1180px, 100% - 32px); margin-inline:auto}
.eyebrow{font:700 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--sun-text)}
.num{font-variant-numeric:tabular-nums lining-nums}

/* Foto-Platzhalter, solange die Datei fehlt */
.ph{position:relative; background:
   repeating-linear-gradient(135deg, var(--paper-2) 0 12px, color-mix(in oklch,var(--paper-2) 80%, var(--sun)) 12px 13px);
   display:flex; align-items:flex-end; color:var(--ink-soft); font:500 13px/1.3 var(--sans); padding:14px}
.ph b{display:block; font-weight:800; color:var(--ink)}
figure{margin:0}
.photo{width:100%; height:100%; object-fit:cover}

/* Header */
header{position:sticky; top:0; z-index:20; background:color-mix(in oklch, var(--paper) 94%, transparent); border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; gap:28px; height:68px}
.brand{font:500 24px/1 var(--serif); text-decoration:none; white-space:nowrap}
.brand i{color:var(--sun-deep)}
nav.main{display:flex; gap:22px; margin-left:auto}
nav.main a{text-decoration:none; font-weight:500; font-size:15px; padding:6px 0; border-bottom:2px solid transparent; transition:border-color .2s}
nav.main a:hover,nav.main a:focus-visible{border-color:var(--sun)}
.lang{display:flex; border:1px solid var(--line); border-radius:var(--r-s); overflow:hidden; font:700 12px/1 var(--sans)}
.lang a{padding:7px 9px; text-decoration:none}
.lang a[aria-current]{background:var(--ink); color:var(--paper)}
.lang a:not([aria-current]):hover{background:var(--paper-2)}
.btn{display:inline-flex; align-items:center; gap:8px; background:var(--sun); color:var(--ink); font:800 15px/1 var(--sans); padding:14px 20px; border-radius:var(--r-s); text-decoration:none; transition:background .18s var(--ease-out), transform .12s}
.btn:hover{background:color-mix(in oklch,var(--sun) 85%, white)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--grass); outline-offset:3px}
.btn.ghost{background:transparent; border:1.5px solid currentColor}
.burger{all:unset; display:none; cursor:pointer; font-weight:700; font-size:14px}
.burger:focus-visible{outline:3px solid var(--grass)}
html,body{overflow-x:clip}

/* Hero */
.progress{background:color-mix(in oklch, var(--paper) 96%, transparent); color:var(--ink); padding:22px; border-radius:var(--r-m)}
.progress .sum{font:300 44px/1 var(--serif)}
.progress .of{color:var(--ink-soft); font-size:14px}
.meter{height:8px; background:var(--paper-2); border-radius:8px; margin:14px 0 8px; overflow:hidden}
.meter span{display:block; height:100%; width:8.04%; background:var(--sun); border-radius:8px}
.progress small{display:block; color:var(--ink-soft); font-size:12px; margin-bottom:16px}
.progress .ctas{display:flex; gap:10px; flex-wrap:wrap}

/* Das ist Finn */
.finn{padding:120px 0 90px}
.finn .grid{display:grid; grid-template-columns:5fr 3fr 4fr; gap:28px; align-items:start}
.finn h2{font-size:clamp(38px,5vw,64px); margin:14px 0 28px}
.finn .big{font:300 24px/1.45 var(--serif)}
.finn .f1{aspect-ratio:3/4; border-radius:var(--r-l); overflow:hidden; margin-top:60px}
.finn .f2{aspect-ratio:3/2; border-radius:var(--r-m); overflow:hidden; margin-top:220px}
.finn .f2 + figcaption, .cap{font-size:13px; color:var(--ink-soft); margin-top:10px}

/* SLC6A1 */
.slc{background:var(--paper-2); padding:100px 0}
.slc .head{display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-bottom:56px}
.slc h2{font-size:clamp(34px,4.4vw,56px)}
.slc ol{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1.2fr 1fr 1fr; border-top:1px solid var(--line)}
.slc li{padding:28px 28px 0 0; border-right:1px solid var(--line); margin-right:28px}
.slc li:last-child{border:0}
.slc li .n{font:300 64px/1 var(--serif); color:var(--sun-deep)}
.slc li h3{font-size:26px; margin:10px 0 10px}
.slc .strip{display:grid; grid-template-columns:2fr 1fr; gap:16px; margin-top:56px}
.slc .strip figure{border-radius:var(--r-m); overflow:hidden; height:300px}

/* Weg */
.weg{padding:110px 0}
.weg .grid{display:grid; grid-template-columns:1fr 1.1fr; gap:64px}
.weg h2{font-size:clamp(34px,4.4vw,56px); margin:14px 0 36px}
.tl{list-style:none; margin:0; padding:0; border-left:2px solid var(--line)}
.tl li{position:relative; padding:0 0 30px 28px}
.tl li::before{content:""; position:absolute; left:-7px; top:6px; width:12px; height:12px; border-radius:50%; background:var(--paper); border:2px solid var(--sun)}
.tl li:last-child::before{background:var(--sun)}
.tl time{font:800 13px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--grass)}
.tl p{margin:6px 0 0}
.weg .pics{display:grid; grid-template-rows:auto auto; gap:16px}
.weg .pics figure:first-child{aspect-ratio:3/2; border-radius:var(--r-l); overflow:hidden; margin-right:-6vw}
.weg .pics figure:last-child{aspect-ratio:16/10; border-radius:var(--r-m); overflow:hidden; width:72%; margin-left:auto}

/* Gentherapie */
.gene{background:var(--night); color:var(--paper-on-dark); padding:0}
.gene .grid{display:grid; grid-template-columns:1fr 1fr; min-height:640px}
.gene figure{position:relative; min-height:420px}
.gene figure img,.gene figure .ph{position:absolute; inset:0; height:100%}
.gene .txt{padding:90px 56px}
.gene h2{font-size:clamp(34px,4.4vw,58px); margin:14px 0 28px}
.gene .eyebrow{color:var(--sun-light)}
.facts{display:grid; grid-template-columns:repeat(3,auto); gap:28px; margin:34px 0; border-top:1px solid color-mix(in oklch, var(--paper-on-dark) 15%, transparent); padding-top:24px}
.facts strong{display:block; font:300 clamp(26px,2.6vw,38px)/1 var(--serif); white-space:nowrap; margin-bottom:6px}
.gene figure img{object-position:72% 40%}
.facts span{font-size:13px; opacity:.75}
.promise{border-left:3px solid var(--sun); padding:4px 0 4px 18px; font-size:15px; opacity:.92}

/* Kunst */
.art{padding:120px 0 100px}
.art .grid{display:grid; grid-template-columns:1.15fr 1fr; gap:64px; align-items:center}
.art figure{aspect-ratio:4/3; border-radius:var(--r-l); overflow:hidden; margin-left:-4vw}
.art h2{font-size:clamp(34px,4.4vw,58px); margin:14px 0 24px}
.sets{list-style:none; padding:0; margin:28px 0; border-top:1px solid var(--line)}
.sets li{display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--line)}
.sets li span{color:var(--ink-soft)}
.sets li b{font-variant-numeric:tabular-nums}
.artists{font-size:14px; color:var(--ink-soft)}

/* Presse */
.press{padding:90px 0; border-top:1px solid var(--line)}
.press .grid{display:grid; grid-template-columns:1fr 2fr; gap:48px}
.press h2{font-size:clamp(32px,4vw,52px)}
.article{display:grid; grid-template-columns:120px 1fr; gap:24px; padding:26px 0; border-bottom:1px solid var(--line); text-decoration:none}
.article:first-child{border-top:1px solid var(--line)}
.article time{font:800 13px/1.4 var(--sans); color:var(--grass)}
.article h3{font-size:28px; margin-bottom:8px}
.article:hover h3{text-decoration:underline; text-decoration-color:var(--sun); text-underline-offset:5px}
.article p{color:var(--ink-soft); margin:0}

/* Helfen */
.help{position:relative; color:var(--paper-on-dark); padding:120px 0; overflow:hidden}
.help > figure{position:absolute; inset:0}
.help::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, color-mix(in oklch, var(--shade) 88%, transparent) 0%, color-mix(in oklch, var(--shade) 55%, transparent) 55%, transparent)}
.help .wrap{position:relative; z-index:2}
.help h2{font-size:clamp(40px,5.5vw,76px); max-width:12ch; margin:14px 0 40px}
.help .eyebrow{color:var(--sun-light)}
.ways{list-style:none; margin:0; padding:0; max-width:620px}
.ways li a{display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:16px; padding:18px 0; border-top:1px solid color-mix(in oklch, var(--paper-on-dark) 25%, transparent); text-decoration:none}
.ways li:last-child a{border-bottom:1px solid color-mix(in oklch, var(--paper-on-dark) 25%, transparent)}
.ways .i{font:300 30px/1 var(--serif); color:var(--sun-light)}
.ways strong{display:block; font-size:19px}
.ways small{opacity:.8}
.ways .arr{transition:transform .2s var(--ease-out)}
.ways a:hover .arr{transform:translateX(6px)}

/* Momente */
.moments{padding:90px 0 20px}
.moments .eyebrow{margin-bottom:24px}
.reel{display:grid; grid-template-columns:1.15fr .75fr 1.2fr .7fr 1.1fr; gap:14px; padding-inline:max(16px, calc((100% - 1180px)/2)); align-items:end}
.reel figure{border-radius:var(--r-m); overflow:hidden}
.reel .m1{aspect-ratio:5/4} .reel .m2{aspect-ratio:15/16} .reel .m3{aspect-ratio:3/2; margin-bottom:48px} .reel .m4{aspect-ratio:17/20} .reel .m5{aspect-ratio:3/2; margin-bottom:24px}
@media (max-width:900px){ .reel{grid-template-columns:repeat(5, 72vw); overflow-x:auto; scroll-snap-type:x mandatory} .reel figure{scroll-snap-align:start} .reel .m3{margin-bottom:0} }

/* News */
.news{padding:90px 0}
.news .grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:36px}
.news h2{font-size:clamp(30px,3.6vw,46px); margin-bottom:36px}
.note{border-top:2px solid var(--ink); padding-top:14px}
.note time{font:800 12px/1 var(--sans); letter-spacing:.08em; color:var(--grass)}
.note h3{font-size:24px; margin:10px 0}
.tag{display:inline-block; font:700 11px/1 var(--sans); background:var(--paper-2); padding:5px 7px; border-radius:var(--r-s); color:var(--ink-soft); margin-left:6px}

/* Footer */
footer{background:var(--ink); color:var(--paper-on-dark); padding:0 0 40px}
footer .cols{display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; padding-top:48px}
footer .brand{font-size:32px}
footer ul{list-style:none; margin:0; padding:0; line-height:2}
footer a{text-decoration:none; opacity:.85}
footer a:hover{opacity:1; text-decoration:underline}
footer .fine{margin-top:40px; font-size:12px; opacity:.6}

.sticky-donate{display:none}

@media (max-width: 900px){
  nav.main{display:none}
  nav.main.open{display:flex; position:absolute; top:68px; left:0; right:0; flex-direction:column; gap:0; background:var(--paper); border-bottom:1px solid var(--line); padding:8px 16px 16px}
  nav.main.open a{padding:14px 0; border-bottom:1px solid var(--line)}
  /* Tippziel ≥ 44 × 44 px (Review 2026-11, WCAG 2.5.8) */
  .burger{display:inline-flex; align-items:center; justify-content:center; margin-left:auto; min-height:44px; min-width:44px; padding:0 10px; box-sizing:border-box}
  .bar .btn{display:none}
  .finn{padding:72px 0}
  .finn .grid,.slc .head,.slc ol,.weg .grid,.gene .grid,.art .grid,.press .grid,.news .grid,footer .cols{grid-template-columns:1fr}
  .finn .f1,.finn .f2{margin-top:0}
  .finn .grid{gap:20px}
  .slc li{border-right:0; margin-right:0; border-bottom:1px solid var(--line); padding-bottom:20px}
  .slc .strip{grid-template-columns:1fr}
  .weg .pics figure:first-child{margin-right:0}
  .gene .txt{padding:56px 16px}
  .facts{grid-template-columns:1fr 1fr}
  .art figure{margin-left:0}
  .article{grid-template-columns:1fr; gap:6px}
  .sticky-donate{display:flex; position:fixed; left:16px; right:16px; bottom:14px; z-index:30; justify-content:center; box-shadow:0 8px 24px color-mix(in oklch, var(--shade) 25%, transparent)}
}
@media (prefers-reduced-motion: reduce){ *{transition:none!important; scroll-behavior:auto!important} }

/* Sprachblöcke für lange Texte: <div data-l="de"> / <div data-l="en"> */
.more{margin:28px 0 0; font-weight:700}
.more a{text-decoration:underline; text-decoration-color:var(--sun); text-underline-offset:5px; text-decoration-thickness:2px}
.gene .more a{color:var(--sun-light)}
nav.main a[aria-current="page"]{border-color:var(--sun)}
@media (max-width:1100px){ nav.main{gap:16px} nav.main a{font-size:14px} }

/* ---------- Unterseiten ---------- */
.phero{padding:72px 0 64px; border-bottom:1px solid var(--line)}
.phero .grid{display:grid; grid-template-columns:1.25fr 1fr; gap:56px; align-items:center}
.phero h1{font-size:clamp(42px,5.6vw,80px); margin:16px 0 24px}
.phero .lead{font:300 21px/1.5 var(--serif); max-width:38ch; color:var(--ink)}
.phero-img{aspect-ratio:4/5; border-radius:var(--r-l); overflow:hidden; margin-right:-4vw}

.block{padding:96px 0}
.block.tint{background:var(--paper-2)}
.block h2{font-size:clamp(32px,4vw,54px); margin:14px 0 28px}
.block h2.eyebrow{font:700 12px/1 var(--sans); letter-spacing:.14em; margin:0} /* Eyebrow als h2 (Gliederung ohne Sprung h1→h3), Aussehen wie .eyebrow */
.block h2.wide{max-width:20ch}
.two{display:grid; grid-template-columns:1fr 1.15fr; gap:56px; align-items:start}

.chips{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; align-content:flex-start}
.chips li{border:1px solid var(--line); background:var(--paper); padding:10px 14px; border-radius:999px; font-weight:500; font-size:15px}
.chips li:nth-child(3n+1){border-color:color-mix(in oklch,var(--sun) 45%, var(--paper))}

.diagram{margin:0; color:var(--ink)}
.diagram svg{width:100%; height:auto; display:block}
.diagram .cell{fill:color-mix(in oklch,var(--grass) 14%, var(--paper)); stroke:color-mix(in oklch,var(--grass) 55%, var(--paper)); stroke-width:1.5}
.diagram .fluid{fill:color-mix(in oklch,var(--sun) 12%, var(--paper)); stroke:color-mix(in oklch,var(--sun) 45%, var(--paper)); stroke-width:1.5}
.diagram .gaba circle{fill:var(--sun)}
.diagram .gat rect{fill:var(--grass)}
.diagram .stuck rect{fill:none; stroke:var(--grass); stroke-width:2; stroke-dasharray:3 3}
.diagram .arrow{fill:none; stroke:currentColor; stroke-width:1.6}
.diagram .gene{fill:none; stroke:var(--sun); stroke-width:3; stroke-linecap:round}
.diagram .muted{fill:var(--ink-soft)}
.diagram .t-grass{fill:var(--grass)} .diagram .t-sun{fill:var(--sun-deep)}
.diagram.wide-dg{margin-top:56px; padding:28px; border:1px solid var(--line); border-radius:var(--r-m); background:var(--paper)}
.key{display:inline-block; width:10px; height:10px; border-radius:50%; margin:0 4px 0 10px; vertical-align:middle}
.key.k-gaba{background:var(--sun)} .key.k-gat{background:var(--grass); border-radius:2px}

.stats{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:0; border-top:2px solid var(--ink); margin-bottom:16px}
.stat{padding:24px 20px 24px 0; border-right:1px solid var(--line); margin-right:20px}
.stat:last-child{border:0}
.stat strong{display:block; font:300 clamp(34px,3.6vw,52px)/1 var(--serif); color:var(--sun-deep); margin-bottom:10px; white-space:nowrap}
.stat.big strong{font-size:clamp(56px,6vw,92px); color:var(--ink)}
.stat span{font-size:14px; color:var(--ink-soft)}

.cols3{display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:40px; border-top:1px solid var(--line); padding-top:28px}
.cols3 h3,.card h3,.steps h3{font-size:28px; margin-bottom:12px}

.warn{border:2px solid var(--sun); border-radius:var(--r-m); padding:28px 32px; background:color-mix(in oklch,var(--sun) 7%, var(--paper)); max-width:860px}
.warn .eyebrow{margin-bottom:14px}

.faq details{border-top:1px solid var(--line); padding:18px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; font:500 20px/1.3 var(--serif); list-style:none; display:flex; justify-content:space-between; gap:16px}
.faq summary::after{content:"+"; color:var(--sun-text); font-family:var(--sans); font-weight:700}
.faq details[open] summary::after{content:"–"}
.faq summary::-webkit-details-marker{display:none}
.faq details p{margin:12px 0 0; color:var(--ink-soft)}

.ctaband{background:var(--ink); color:var(--paper); padding:72px 0}
.ctaband .wrap{display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap}
.ctaband h2{font-size:clamp(30px,3.6vw,48px); max-width:18ch}
.ctaband .btn.ghost{color:var(--paper)}
.ctas{display:flex; gap:12px; flex-wrap:wrap}

.sources{padding:72px 0 88px}
.sources h2{font-size:32px}
.sources ol{padding-left:20px; max-width:900px; font-size:14px; color:var(--ink-soft)}
.sources li{margin-bottom:10px}
.sources a{word-break:break-all}

.steps{list-style:none; padding:0; margin:28px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:2px solid var(--ink)}
.steps li{padding:28px 32px 0 0; margin-right:32px; border-right:1px solid var(--line)}
.steps li:last-child{border:0; margin:0}
.steps .n{font:300 64px/1 var(--serif); color:var(--sun-deep); display:block; margin-bottom:12px}

.tl li.hl::before{background:var(--sun); width:16px; height:16px; left:-9px; top:4px}
.tl li.hl p{font-weight:700}

.cards{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:20px}
.card{border:1px solid var(--line); border-radius:var(--r-m); padding:28px; background:var(--paper)}
.card:first-child{background:var(--paper-2)}
.tag2{display:inline-block; font:800 11px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--grass); margin-bottom:16px}

.open{list-style:none; margin:0; padding:0; counter-reset:o}
.open li{position:relative; padding:16px 0 16px 44px; border-top:1px solid var(--line); counter-increment:o}
.open li::before{content:counter(o,decimal-leading-zero); position:absolute; left:0; top:16px; font:800 13px/1.6 var(--sans); color:var(--sun-text)}
.promise-dark{border-left:3px solid var(--sun); padding-left:18px; font-weight:500}

@media (max-width: 900px){
  .phero{padding:40px 0}
  .phero .grid,.two,.cols3,.cards,.steps{grid-template-columns:1fr}
  .phero-img{margin-right:0; aspect-ratio:4/3}
  .block{padding:64px 0}
  .stats{grid-template-columns:1fr 1fr}
  .stat{margin-right:0; padding-right:12px; border-right:0; border-bottom:1px solid var(--line)}
  .stat.big{grid-column:1/-1}
  .steps li{border-right:0; margin-right:0; padding-right:0; border-bottom:1px solid var(--line); padding-bottom:20px}
  .warn{padding:22px}
}
nav.main a{white-space:nowrap}
.dg-caps{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:6px}
.dg-caps .cap{margin:0}

/* Header: Kontakt + Spenden-Menü */
.bar{gap:22px}
.btn.ghost.btn-kontakt{padding:12px 16px}
.nav-kontakt{display:none}
.spenden{position:relative}
.spenden .chev{font-size:11px; transition:transform .2s var(--ease-out)}
.spenden button[aria-expanded="true"] .chev{transform:rotate(180deg)}
.spenden-menu{position:absolute; right:0; top:calc(100% + 8px); min-width:290px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m); box-shadow:0 18px 40px color-mix(in oklch, var(--shade) 16%, transparent); padding:8px; z-index:40}
.spenden-menu a{display:block; padding:12px 14px; border-radius:var(--r-s); text-decoration:none}
.spenden-menu a:hover,.spenden-menu a:focus-visible{background:var(--paper-2)}
.spenden-menu strong{display:block; font-size:16px}
.spenden-menu small{color:var(--ink-soft); font-size:13px}
@media (max-width: 900px){
  .btn-kontakt{display:none}
  .nav-kontakt{display:block}
  .bar .spenden{display:none} /* am Handy übernimmt der feste Spenden-Button unten */
  .bar{gap:12px}
  .burger{margin-left:auto}
  .lang a{padding:7px 7px}
}

/* Über uns, Kontakt, Rechtliches */
.people{display:grid; grid-template-columns:repeat(4,1fr); gap:28px}
.people figure{aspect-ratio:4/5; border-radius:var(--r-m); overflow:hidden; margin-bottom:16px}
.people article:nth-child(even) figure{margin-top:48px}
.people h3{font-size:30px; margin-bottom:8px}
.people p{color:var(--ink-soft); font-size:16px}
.mail{font:400 clamp(22px,2.4vw,30px)/1.3 var(--serif); margin-top:28px}
.mail a{text-decoration:underline; text-decoration-color:var(--sun); text-underline-offset:6px}
.pending{color:var(--ink-soft); font-style:italic}
.legal .narrow{max-width:760px}
.legal h1{font-size:clamp(40px,5vw,64px); margin:14px 0 32px}
.legal h2{font:500 22px/1.3 var(--serif); margin:36px 0 10px}
.legal p{color:var(--ink)}
.lead-s{background:var(--paper-2); border-left:3px solid var(--grass); padding:16px 20px; border-radius:0 var(--r-s) var(--r-s) 0}
@media (max-width:900px){ .people{grid-template-columns:1fr 1fr} .people article:nth-child(even) figure{margin-top:0} }
.phero-img[data-photo="2076"] img{object-position:68% 50%}

/* Über Finn */
.finn-pics{display:grid; grid-template-columns:1.1fr 1fr; grid-template-rows:auto auto; gap:14px}
.finn-pics figure{border-radius:var(--r-m); overflow:hidden}
.finn-pics .fp1{grid-row:1/3; aspect-ratio:2/3}
.finn-pics .fp2{aspect-ratio:1/1}
.finn-pics .fp3{aspect-ratio:4/3}
.big-quote{font:300 clamp(22px,2.4vw,30px)/1.4 var(--serif); border-left:3px solid var(--sun); padding-left:22px; margin-bottom:24px}
.weg-pic{aspect-ratio:4/3; border-radius:var(--r-m); overflow:hidden; margin-top:28px; max-width:420px}
.family{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.family figure{aspect-ratio:3/2; border-radius:var(--r-m); overflow:hidden; margin-bottom:14px}
.family h3{font-size:26px; margin-bottom:6px}
.family p{color:var(--ink-soft); font-size:16px}
@media (max-width:900px){ .family{grid-template-columns:1fr} }
.family article:nth-child(3) img{object-position:58% 45%} /* 2058: Finn und Milo */

/* Sprachwahl: einmal, ganz rechts */
.lang{flex-shrink:0}


/* Presse */
.phero-slim{padding:64px 0 48px}
.phero-slim h1{max-width:16ch}
.press-list{max-width:900px}
.press-list h2{margin-bottom:20px}
.pub{display:block; text-decoration:none; padding:28px 0; border-top:1px solid var(--line)}
.pub:last-of-type{border-bottom:1px solid var(--line)}
.pub-meta{display:flex; flex-wrap:wrap; gap:12px; align-items:center; font:800 12px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--grass); margin-bottom:12px}
.pub-meta .outlet{color:var(--ink-soft)}
.pill{background:var(--ink); color:var(--paper); padding:4px 7px; border-radius:var(--r-s); letter-spacing:.04em}
.pub h3{font-size:clamp(24px,2.6vw,34px); margin-bottom:10px}
.pub p{color:var(--ink-soft); max-width:62ch}
.pub-go{font-weight:700; color:var(--sun-text)}
.pub:hover h3{text-decoration:underline; text-decoration-color:var(--sun); text-underline-offset:6px}
.facts-list{margin:0; border-top:2px solid var(--ink)}
.facts-list div{display:grid; grid-template-columns:120px 1fr; gap:16px; padding:14px 0; border-bottom:1px solid var(--line)}
.facts-list dt{font:800 12px/1.6 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--sun-text)}
.facts-list dd{margin:0}
@media (max-width:900px){ .facts-list div{grid-template-columns:1fr; gap:4px} }

/* Erster Patient & Wer forscht */
.maxwell-facts{display:grid; grid-template-columns:repeat(3,1fr); border-top:2px solid var(--ink); margin-top:8px}
.maxwell-facts div{padding:18px 12px 0 0}
.maxwell-facts strong{display:block; font:300 clamp(36px,4vw,56px)/1 var(--serif); color:var(--sun-deep)}
.maxwell-facts span{font-size:13px; color:var(--ink-soft)}
.for-finn{margin-top:28px; background:var(--ink); color:var(--paper); border-radius:var(--r-m); padding:24px 28px}
.for-finn h3{font-size:26px; margin-bottom:10px; color:var(--sun-light)}
.for-finn p{margin:0}
.labs{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line)}
.labs article{padding:26px 26px 26px 0; border-bottom:1px solid var(--line)}
.labs article:not(:nth-child(3n)){border-right:1px solid var(--line); margin-right:26px}
.labs .place{font:800 11px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--grass)}
.labs h3{font-size:24px; margin:10px 0 6px}
.labs .who{font-weight:700; font-size:15px; margin-bottom:8px}
.labs p{font-size:15px; color:var(--ink-soft)}
@media (max-width:900px){ .labs{grid-template-columns:1fr} .labs article{border-right:0 !important; margin-right:0 !important; padding-right:0} }

/* Einfach erklärt – Schritte mit Grafiken */
.explain .step{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:48px 0; border-top:1px solid var(--line)}
.explain .step:nth-of-type(even) .step-txt{order:2}
.step-n{display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--sun); color:var(--ink); font:800 18px/1 var(--sans); margin-bottom:14px}
.step h3{font-size:clamp(26px,2.8vw,36px); margin-bottom:14px}
.dg{margin:0; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m); padding:22px}
.dg svg{width:100%; height:auto; display:block}
.dg .card-ok{fill:var(--paper); stroke:color-mix(in oklch,var(--grass) 60%, var(--paper)); stroke-width:2}
.dg .card-bad{fill:var(--paper); stroke:color-mix(in oklch,var(--sun) 70%, var(--paper)); stroke-width:2}
.dg .line{fill:color-mix(in oklch,var(--ink) 18%, var(--paper))}
.dg .typo{fill:color-mix(in oklch,var(--sun) 35%, var(--paper)); stroke:var(--sun); stroke-width:1.5; stroke-dasharray:3 2}
.dg .ok{fill:var(--grass)} .dg .bad{fill:var(--sun)}
.dg .tick,.dg .cross{fill:none; stroke:var(--paper); stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.dg .stand{fill:color-mix(in oklch,var(--ink) 70%, var(--paper))}
.dg .beam{fill:var(--ink)}
.dg .pad-gas{fill:color-mix(in oklch,var(--ink) 10%, var(--paper)); stroke:color-mix(in oklch,var(--ink) 35%, var(--paper)); stroke-width:1.5}
.dg .pad-brake{fill:color-mix(in oklch,var(--sun) 25%, var(--paper)); stroke:var(--sun); stroke-width:1.5}
.dg .panel{fill:color-mix(in oklch,var(--grass) 7%, var(--paper)); stroke:var(--line); stroke-width:1}
.dg .mem{stroke:color-mix(in oklch,var(--grass) 55%, var(--paper)); stroke-width:6; stroke-linecap:round}
.dg .bolt{fill:none; stroke:var(--ink); stroke-width:2.5; stroke-linejoin:round}
.dg .gaba circle{fill:var(--sun)}
.dg .gat rect,.dg .gat-fill{fill:var(--grass)}
.dg .pause{fill:color-mix(in oklch,var(--sun) 45%, var(--paper))}
.dg .arrow{fill:none; stroke:currentColor; stroke-width:1.8}
.dg .arrow.dashed{stroke-dasharray:5 4}
.dg .cellwall{fill:color-mix(in oklch,var(--grass) 6%, var(--paper)); stroke:color-mix(in oklch,var(--grass) 55%, var(--paper)); stroke-width:8}
.dg .factory{fill:var(--paper); stroke:var(--ink); stroke-width:1.5}
.dg .crumple{fill:none; stroke:var(--sun-deep); stroke-width:3; stroke-linejoin:round}
.dg .bin{fill:none; stroke:var(--ink-soft); stroke-width:2} .dg .bin-lid{stroke:var(--ink-soft); stroke-width:3}
.dg .eeg{fill:none; stroke:var(--ink); stroke-width:2; stroke-linejoin:round}
.dg .eeg.sw{stroke:var(--sun-deep)}
.dg .scale{stroke:var(--ink-soft); stroke-width:2}
.dg .muted{fill:var(--ink-soft)} .dg .t-grass{fill:var(--grass)} .dg .t-sun{fill:var(--sun-deep)}
@media (max-width:900px){ .explain .step{grid-template-columns:1fr; gap:24px} .explain .step:nth-of-type(even) .step-txt{order:0} .dg{padding:14px} }
.dg .switch{fill:color-mix(in oklch,var(--grass) 40%, var(--paper))} .dg .switch-knob{fill:var(--grass)}
.dg .capsid{fill:color-mix(in oklch,var(--sun) 14%, var(--paper)); stroke:var(--sun-deep); stroke-width:2}
.dg .gene{fill:none; stroke:var(--grass); stroke-width:3; stroke-linecap:round}
.dg .brain{fill:color-mix(in oklch,var(--sun) 10%, var(--paper)); stroke:color-mix(in oklch,var(--ink) 35%, var(--paper)); stroke-width:1.5}
.dg .cord{fill:color-mix(in oklch,var(--grass) 18%, var(--paper)); stroke:color-mix(in oklch,var(--grass) 55%, var(--paper)); stroke-width:1.5}
.dg .flow{fill:none; stroke:var(--grass); stroke-width:2; stroke-dasharray:4 4}
.dg .mini-capsid polygon{fill:var(--paper); stroke:var(--sun-deep); stroke-width:1.5}
.dg .needle{stroke:var(--ink); stroke-width:3; stroke-linecap:round} .dg .needle-cap{fill:var(--ink)}
.dg .nucleus{fill:color-mix(in oklch,var(--ink) 6%, var(--paper)); stroke:color-mix(in oklch,var(--ink) 30%, var(--paper)); stroke-width:1.5; stroke-dasharray:4 3}
.dg .range{fill:color-mix(in oklch,var(--sun) 30%, var(--paper))} .dg .range-ok{fill:var(--grass)}
.explain .step-n{font-size:18px}

/* Sprachblöcke generisch (DE/EN/FR) */
[data-l]{display:none !important}
html[lang="de"] [data-l="de"], html[lang="en"] [data-l="en"], html[lang="fr"] [data-l="fr"]{display:revert !important}

/* Werdegang */
.tl.werdegang li{padding-bottom:26px}
.tl.werdegang h3{font-size:22px; margin:6px 0 4px}
.tl.werdegang p{color:var(--ink-soft)}
.tl.werdegang .more{margin-top:8px; font-size:15px}
.tl .pending-date{color:var(--ink-soft); font-style:italic; font-weight:500; text-transform:none; letter-spacing:0}

/* Startseite 2026-10: Bekannt aus, Weg zu Großspendern und Presse, Neuigkeiten, Danke */
.known{border-bottom:1px solid var(--line); padding:22px 0}
.known-row{display:flex; align-items:center; gap:28px; flex-wrap:wrap}
.known-label{font:700 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.known-logo img{height:26px; width:auto; opacity:.8; transition:opacity .2s}
.known-logo:hover img{opacity:1}
.known-latest{flex:1 1 320px; min-width:0; text-decoration:none; font-size:15px; color:var(--ink-soft)}
.known-latest time{font:800 12px/1 var(--sans); letter-spacing:.08em; color:var(--grass); margin-right:8px}
.known-latest:hover span{text-decoration:underline; text-decoration-color:var(--sun); text-underline-offset:4px}
.known-more{font-weight:700; font-size:14px; text-decoration:none; white-space:nowrap}
.known-more:hover{text-decoration:underline; text-decoration-color:var(--sun); text-underline-offset:4px}

.slc .head .more{margin-top:20px}

.direct{display:grid; grid-template-columns:1fr auto; gap:24px 40px; align-items:center; max-width:820px; margin-top:44px; padding-top:28px; border-top:1px solid color-mix(in oklch, var(--paper-on-dark) 25%, transparent)}
.direct h3{font-size:clamp(24px,2.4vw,30px); margin-bottom:8px}
.direct p{margin:0; opacity:.85}
.direct-links{display:flex; flex-direction:column; align-items:flex-start; gap:14px}
.direct-press{font-weight:700; font-size:15px; text-decoration:underline; text-decoration-color:var(--sun); text-underline-offset:5px}

.news .grid{row-gap:44px}
.note{display:flex; flex-direction:column}
.note p{flex:1}
.note-link{font-weight:700; font-size:14px; text-decoration:none; align-self:flex-start}
.note-link:hover{text-decoration:underline; text-decoration-color:var(--sun); text-underline-offset:4px}
.next-day{background:var(--paper-2); border-top-color:var(--grass); padding:14px 20px 20px; border-radius:0 0 var(--r-m) var(--r-m)}
.next-label{font:800 12px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--grass)}
.next-date{font:300 30px/1.1 var(--serif); color:var(--sun-deep); flex:0 0 auto; margin-bottom:10px}

.thanks{padding:40px 0 110px}
.thanks .grid{display:grid; grid-template-columns:1.4fr 1fr; gap:56px; align-items:center}
.thanks figure{aspect-ratio:3/2; border-radius:var(--r-l); overflow:hidden}
.thanks h2{font-size:clamp(32px,3.8vw,50px); margin-bottom:18px}
.thanks p{color:var(--ink-soft); max-width:34ch}

.footer-who{margin-top:12px; opacity:.75}

@media (max-width: 900px){
  .known-row{gap:14px 20px}
  .known-latest{flex-basis:100%; order:3}
  .known-more{order:4}
  .direct{grid-template-columns:1fr}
  .thanks{padding:24px 0 96px}
  .thanks .grid{grid-template-columns:1fr; gap:28px}
}

/* Hero 2026-10: Bild und Text getrennt. Text links auf Papier, Foto 1751 rechts randlos über die
   volle Höhe des ersten Bildschirms (55 % der Breite; eine Überlappung würde Finn anschneiden, er steht links der Bildmitte). Am Handy: Foto oben, Text darunter. */
.hero{display:grid; grid-template-columns:minmax(0,45fr) minmax(0,55fr); height:calc(100svh - 68px); min-height:560px; max-height:980px; background:var(--paper); color:var(--ink); border-bottom:1px solid var(--line)}
.hero > figure{grid-column:2; grid-row:1; position:relative; height:100%; overflow:hidden}
.hero > figure img{object-position:58% 45%} /* Finn links, Mutter rechts: beide im Ausschnitt */
.hero .wrap{grid-column:1; grid-row:1; width:auto; margin:0; display:flex; align-items:center;
  padding:clamp(32px,4.5vw,64px) clamp(32px,5vw,88px) clamp(32px,4.5vw,64px) max(24px, calc((100vw - 1180px) / 2))}
.hero-text{width:100%; max-width:500px; container-type:inline-size}
.hero h1{font-size:clamp(40px,4.4vw,72px); font-size:min(84px, 14.4cqi); font-weight:300; white-space:nowrap} /* Motto in einer Zeile: Breite = 6,8 x Schriftgröße */
.hero h1 em{font-style:italic; color:var(--sun-deep)}
.hero .lead{font-size:clamp(17px,1.35vw,20px); line-height:1.65; max-width:34ch; margin:24px 0 32px}
.hero-stand{margin:18px 0 0; font-size:13px; color:var(--ink-soft)}
.hero-stand strong{font-weight:700; color:var(--ink)}
@media (max-width: 900px){
  .hero{grid-template-columns:1fr; height:auto; min-height:0; max-height:none}
  .hero > figure{grid-column:1; grid-row:1; height:60svh}
  .hero > figure img{object-position:34% 50%}
  .hero .wrap{grid-column:1; grid-row:2; display:block; padding:28px 16px 40px}
  .hero-text{max-width:none}
}
.hero-known{display:flex; align-items:center; gap:16px; margin-top:28px; padding-top:20px; border-top:1px solid var(--line)}
.hero-known span{font:700 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.hero-known img{height:24px; width:auto; opacity:.8; transition:opacity .2s}
.hero-known a:hover img{opacity:1}
/* Hero: Textspalte auf warmer Fläche (--paper-warm), Foto läuft links weich hinein (David, 2026-10-09) */
.hero{background:var(--paper-warm)}
.hero > figure::after{content:""; position:absolute; inset:0 auto 0 0; width:24%; pointer-events:none;
  background:linear-gradient(90deg, var(--paper-warm) 0%, color-mix(in oklch, var(--paper-warm) 60%, transparent) 40%, transparent 100%)}
@media (max-width: 900px){
  .hero > figure::after{inset:auto 0 0 0; width:auto; height:28%; background:linear-gradient(0deg, var(--paper-warm) 0%, transparent 100%)}
}

/* Was Finn hat: Schlusssatz */
.love{font:400 italic clamp(26px,2.6vw,36px)/1.25 var(--serif); color:var(--sun-deep); margin-top:28px}
.weg .big{font:300 22px/1.5 var(--serif)}
.slc .head .big{font:300 22px/1.45 var(--serif); margin-bottom:14px}
.weg .pics figure:only-child{aspect-ratio:4/3; width:auto; margin-left:0; margin-right:-6vw; border-radius:var(--r-l)}
.weg .grid{align-items:center}
@media (max-width: 900px){ .weg .pics figure:only-child{margin-right:0} }

/* Über Finn: Wer Finn begleitet (Logos) */
.logo-group{font:700 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin:40px 0 18px}
.logos{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:16px}
.logos li{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m); padding:22px 20px 18px; display:flex; flex-direction:column; gap:16px}
.logos a{display:flex; align-items:center; justify-content:center; height:84px}
.logos img{max-height:72px; max-width:100%; width:auto; height:auto; object-fit:contain; mix-blend-mode:multiply}
.logos li > span{font-size:14px; color:var(--ink-soft); line-height:1.4}
.logos strong{display:block; color:var(--ink); font-size:15px}

/* Was Finn hat (2026-10): Foto links randlos über die volle Höhe, Text rechts gegliedert —
   bewusst anders als "Das ist Finn" (Text links, zwei Fotos rechts) */
.hat{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:680px}
.hat-img{position:relative; overflow:hidden}
.hat-img img{position:absolute; inset:0; object-position:12% 50%} /* Bertille, Finn und David im Ausschnitt */
.hat-text{padding:clamp(56px,7vw,110px) max(16px, calc((100vw - 1180px) / 2)) clamp(56px,7vw,110px) clamp(32px,5vw,80px)}
.hat h2{font-size:clamp(34px,4.4vw,56px); margin:14px 0 18px}
.hat .big{font:300 24px/1.4 var(--serif); margin-bottom:28px}
.hat-list{display:grid; grid-template-columns:1fr 1fr; gap:22px 32px; margin:0}
.hat-list div{border-top:2px solid var(--ink); padding-top:12px}
.hat-list dt{font:800 12px/1.2 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--sun-text); margin-bottom:6px}
.hat-list dd{margin:0; font-size:16px; line-height:1.5}
.hat-list .worry{grid-column:1/-1; background:var(--paper-2); border-top-color:var(--sun); padding:14px 18px 16px; border-radius:0 0 var(--r-m) var(--r-m)}
.hat-list .worry dd{font:400 20px/1.4 var(--serif)}
.hat .love{margin-top:32px}
.slc{padding-bottom:150px}
@media (max-width: 900px){
  .hat{grid-template-columns:1fr; min-height:0}
  .hat-img{aspect-ratio:3/2}
  .hat-text{padding:40px 16px 64px}
  .hat-list{grid-template-columns:1fr}
  .slc{padding-bottom:100px}
}

/* Startseite, Desktop: mehr Luft zwischen den Sections (2026-10-09) — gleiche Flächen
   (Papier auf Papier) bekommen zusätzlich eine feine Linie als Grenze */
@media (min-width: 901px){
  body:not(.sub) .finn{padding:170px 0 150px}
  body:not(.sub) .slc{padding:150px 0 190px}
  body:not(.sub) .art{padding:180px 0 170px}
  body:not(.sub) .help{padding:160px 0}
  body:not(.sub) .moments{padding:150px 0 40px}
  body:not(.sub) .news{padding:130px 0 140px}
  body:not(.sub) .news > .wrap{border-top:1px solid var(--line); padding-top:110px}
  body:not(.sub) .thanks{padding:0 0 170px}
  body:not(.sub) .thanks > .wrap{border-top:1px solid var(--line); padding-top:130px}
  body:not(.sub) .hat{min-height:760px}
  body:not(.sub) .hat-text{padding-top:130px; padding-bottom:130px}
}
.logos .logo-box{display:flex; align-items:center; justify-content:center; height:84px}

/* Runde 7 (2026-10-09) */
/* Was Finn hat: Schlusssatz als Notiz mit Unterschrift statt freistehender Zeile */
.love-note{margin:36px 0 0; padding:26px 28px 22px; background:var(--paper-2); border-left:4px solid var(--sun); border-radius:0 var(--r-m) var(--r-m) 0}
.love-note blockquote{margin:0; font:400 italic clamp(26px,2.4vw,34px)/1.25 var(--serif); color:var(--ink)}
.love-note figcaption{margin-top:10px; font:700 13px/1 var(--sans); letter-spacing:.06em; color:var(--sun-text)}
.love-note figcaption::before{content:"— "}

/* Die Ursache: was das für uns heißt */
.for-us{margin-top:24px; padding:20px 22px; background:var(--paper); border-radius:var(--r-m)}
.for-us h3{font:800 12px/1.2 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--sun-text); margin-bottom:10px}
.for-us ul{list-style:none; margin:0; padding:0}
.for-us li{position:relative; padding:6px 0 6px 20px; font-size:16px; border:0; margin:0} /* alte .slc li-Regel (Spalten mit Trennstrich) neutralisieren */
.for-us li::before{content:""; position:absolute; left:0; top:15px; width:8px; height:8px; border-radius:50%; background:var(--sun)}

/* Helfen: Text auf ruhiger dunkler Fläche statt direkt auf dem Foto (Lesbarkeit) */
.help .wrap{width:auto; max-width:720px; margin-left:max(16px, calc((100vw - 1180px) / 2)); margin-right:16px;
  background:color-mix(in oklch, var(--shade) 82%, transparent); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:clamp(28px,4vw,52px); border-radius:var(--r-l)}
.help::before{background:linear-gradient(90deg, color-mix(in oklch, var(--shade) 55%, transparent) 0%, transparent 70%)}
.help h2{margin:14px 0 28px}
.ways small{opacity:1; font-size:15px}
.direct{margin-top:32px; padding-top:24px}
.direct p{opacity:1}
.direct .btn.ghost{color:var(--paper-on-dark)}
.direct-press{color:var(--paper-on-dark)}

/* Danke: Text oben, Foto groß und randlos */
.thanks-text{text-align:center; max-width:720px}
.thanks-text p{margin:0 auto 26px; color:var(--ink-soft)}
.thanks-text h2{font-size:clamp(34px,4.2vw,58px); margin-bottom:18px}
.thanks-img{margin-top:clamp(40px,5vw,72px); height:min(88vh, 62vw); width:100%; aspect-ratio:auto; border-radius:0; overflow:hidden}
.thanks-img img{object-position:50% 58%}
@media (min-width: 901px){
  body:not(.sub) .thanks{padding:0}
  body:not(.sub) .thanks > .wrap{max-width:720px}
}
@media (max-width: 900px){
  .thanks{padding:24px 0 0}
  .thanks-img{height:auto; aspect-ratio:3/2}
  .help .wrap{margin-left:16px; padding:28px 20px}
}

/* Helfen (2026-10-09): Text und Foto getrennt — Bertille und Finn füllen Foto 2105 fast ganz aus */
.help{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(32px,5vw,80px); align-items:center;
  color:var(--ink); background:var(--paper-2); overflow:visible;
  padding-inline:max(16px, calc((100vw - 1180px) / 2))}
.help::before{display:none}
.help > figure{position:relative; inset:auto; grid-column:2; grid-row:1; aspect-ratio:1160/764; border-radius:var(--r-l); overflow:hidden}
.help .wrap{grid-column:1; grid-row:1; width:auto; max-width:none; margin:0; padding:0; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; border-radius:0}
.help .eyebrow{color:var(--sun-text)}
.help h2{max-width:none}
.ways li a{border-top-color:var(--line)}
.ways li:last-child a{border-bottom:0}
.ways .i{color:var(--sun-deep)}
.ways small{color:var(--ink-soft)}
.direct{border-top:1px solid var(--line); margin-top:8px}
.direct .btn.ghost{color:var(--ink)}
.direct-press{color:var(--ink)}
@media (max-width: 900px){
  .help{grid-template-columns:1fr; padding:0 0 64px; gap:28px}
  .help > figure{grid-column:1; grid-row:1; border-radius:0}
  .help .wrap{grid-row:2; padding:0 16px; margin:0}
}
@media (min-width: 901px){ body:not(.sub) .help{padding:150px max(16px, calc((100vw - 1180px) / 2))} }
.help .direct{grid-template-columns:1fr; gap:16px}
/* Geld-Fragen im Helfen-Block der Startseite (2026-11-11) */
.help-faq{margin-top:20px}
.help-faq details{padding:14px 0}
.help-faq summary{font-size:18px; min-height:28px; align-items:center}
.help-faq .more{margin:16px 0 0; font-size:15px}
.help .direct-links{flex-direction:row; flex-wrap:wrap; align-items:center; gap:14px 24px}

/* Die Ursache (2026-10-09): Text mittig, darunter Dreierband Foto · Kasten · Foto */
.cause-intro{max-width:760px; margin:0 auto; text-align:center}
.cause-intro h2{font-size:clamp(34px,4.4vw,56px); margin:14px 0 22px}
.cause-intro .big{font:300 23px/1.45 var(--serif); margin-bottom:14px}
.cause-intro p{margin-left:auto; margin-right:auto; max-width:62ch}
.cause-intro .more{margin-top:18px}
.cause-band{display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:20px; align-items:stretch; margin-top:clamp(40px,5vw,64px)}
.cause-band figure{border-radius:var(--r-m); overflow:hidden; min-height:300px}
.cause-band .for-us{margin:0; padding:28px 26px; display:flex; flex-direction:column; justify-content:center; background:var(--paper)}
.cause-band .for-us h3{font-size:12px}
.cause-band .for-us li{font-size:17px; padding-top:9px; padding-bottom:9px}
.cause-band .for-us li::before{top:18px}
@media (max-width: 900px){
  .cause-intro{text-align:left}
  .cause-band{grid-template-columns:1fr}
  .cause-band figure{min-height:0; aspect-ratio:3/2}
  .cause-band .cb2{order:3}
}

/* Die Ursache als Split (2026-10-09): Text links, Foto 2043 rechts randlos — Spiegelbild zu "Was Finn hat" */
.cause-split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:0 !important}
.cause-split > .wrap{grid-column:1; grid-row:1; width:auto; margin:0;
  padding:clamp(56px,7vw,130px) clamp(32px,5vw,80px) clamp(56px,7vw,130px) max(16px, calc((100vw - 1180px) / 2))}
.cause-split .cause-intro{max-width:none; margin:0; text-align:left}
.cause-split .cause-intro p{margin-left:0; max-width:none}
.cause-split .cause-band{display:block; margin-top:28px}
.cause-split .for-us{padding:22px 24px}
.cause-img{grid-column:2; grid-row:1; position:relative; overflow:hidden; min-height:640px; margin:0}
.cause-img img{position:absolute; inset:0; object-position:40% 50%}
@media (max-width: 900px){
  .cause-split{grid-template-columns:1fr}
  .cause-split > .wrap{grid-row:2; padding:40px 16px 64px}
  .cause-img{grid-column:1; grid-row:1; min-height:0; aspect-ratio:3/2}
}

/* Danke als Split: Foto links groß bis zum Rand, Text rechts direkt daneben */
.thanks-split{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); align-items:center; padding:0 !important}
.thanks-split .thanks-img{grid-column:1; grid-row:1; margin:0; height:min(82vh, 760px); width:100%}
.thanks-split .thanks-img img{object-position:45% 55%}
.thanks-split > .wrap{grid-column:2; grid-row:1; width:auto; max-width:none !important; margin:0; border-top:0 !important;
  text-align:left; padding:clamp(40px,5vw,80px) max(16px, calc((100vw - 1180px) / 2)) clamp(40px,5vw,80px) clamp(32px,5vw,72px) !important}
.thanks-split .thanks-text p{margin:0 0 26px}
@media (max-width: 900px){
  .thanks-split{grid-template-columns:1fr}
  .thanks-split .thanks-img{height:auto; aspect-ratio:3/2}
  .thanks-split > .wrap{grid-column:1; grid-row:2; padding:32px 16px 72px !important}
}
/* Die Ursache wieder mittig (2026-10-09): Band aus Kasten + einem Foto */
.cause .cause-band{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
.cause .cause-band .cb2{min-height:380px}
.cause .cause-band .cb2 img{object-position:40% 45%}
@media (max-width: 900px){ .cause .cause-band{grid-template-columns:1fr} }

/* 2026-10-09: Neuigkeiten ohne Trennstrich darüber; Helfen-Überschrift über die ganze Breite */
body:not(.sub) .news > .wrap{border-top:0; padding-top:0}
.help-head{grid-column:1 / -1; grid-row:1}
.help-head h2{max-width:none; margin:14px 0 0; font-size:clamp(44px,6vw,92px)}
.help > figure{grid-row:2}
.help .wrap{grid-row:2}
@media (max-width: 900px){
  .help-head{padding:0 16px; grid-row:2}
  .help > figure{grid-row:1}
  .help .wrap{grid-row:3}
}

/* Die Ursache kompakter (2026-10-09): weniger Höhe — breiterer Text, einzeilige Überschrift, flacheres Band */
@media (min-width: 901px){
  body:not(.sub) .slc.cause{padding:110px 0 120px}
  .cause-intro{max-width:980px}
  .cause-intro h2{font-size:clamp(34px,3.6vw,52px); margin:12px 0 16px}
  .cause-intro .big{font-size:21px; margin-bottom:10px}
  .cause-intro p{max-width:78ch}
  .cause-intro .more{margin-top:12px}
  .cause .cause-band{margin-top:36px}
  .cause .cause-band .cb2{min-height:0; aspect-ratio:auto; height:300px}
  .cause-band .for-us{padding:22px 24px}
  .cause-band .for-us li{padding-top:6px; padding-bottom:6px}
  .cause-band .for-us li::before{top:15px}
}
/* Was Finn hat: "Unsere größte Sorge" als sechstes Feld rechts neben Epilepsie (2026-10-09) */
.hat-list .worry{grid-column:auto; padding:12px 16px 14px}
.hat-list .worry dd{font:400 18px/1.4 var(--serif)}
/* Die Ursache: Luft nach außen, damit die getönte Fläche frei zwischen den Nachbar-Sections steht (2026-10-09) */
@media (min-width: 901px){ body:not(.sub) .slc.cause{margin:140px 0} }
@media (max-width: 900px){ .slc.cause{margin:64px 0} }
@media (max-width: 900px){ .cause .cause-band .cb2{min-height:0; height:auto; aspect-ratio:3/2} }
@media (max-width: 900px){ footer{padding-bottom:96px} }
/* EN/FR: übersetztes Motto ist länger als „Finn macht Mut.“ — dort darf es umbrechen */
html:not([lang="de"]) .hero h1{white-space:normal}
/* Kontakt: Familienfoto 2031 im Querformat (alle vier im Bild), Buttons unter der Mail */
.phero-family{aspect-ratio:1169/764; margin-right:0}
.phero .ctas{margin-top:26px}
/* Kontakt: drei Themen direkt im Kopfbereich, je mit eigenem Mail-Button (2026-10-09) */
.contact{border-bottom:0; padding-bottom:110px}
.topics{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; margin-top:clamp(48px,6vw,88px)}
.topics-head{grid-column:1 / -1; font:700 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:4px}
.topic{background:var(--paper-2); border-top:3px solid var(--sun); border-radius:0 0 var(--r-m) var(--r-m); padding:24px 24px 22px; display:flex; flex-direction:column}
.topic h3{font-size:26px; margin-bottom:10px}
.topic p{font-size:16px}
.topic .topic-links{margin:auto 0 0; display:flex; flex-wrap:wrap; gap:8px 20px; font-weight:700; font-size:15px}
.topic-links a{text-decoration:underline; text-decoration-color:var(--sun); text-underline-offset:5px; text-decoration-thickness:2px}
@media (max-width: 900px){ .topics{grid-template-columns:1fr} .contact{padding-bottom:64px} }
/* Kontakt: Formular zwischen Kopf und Themen (2026-11-11), Versand über den Worker */
.kform-wrap{margin-top:clamp(48px,6vw,88px); scroll-margin-top:96px}
.kform-head{font-size:clamp(30px,3.6vw,46px); margin-bottom:24px}
.kform{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px 24px; max-width:860px; background:var(--paper-2); border-top:3px solid var(--sun); border-radius:0 0 var(--r-m) var(--r-m); padding:clamp(22px,3vw,36px)}
.kform-breit{grid-column:1 / -1}
.kform-feld{display:flex; flex-direction:column; gap:8px}
.kform-feld label{font:700 14px/1.2 var(--sans); color:var(--ink)}
.kform input,.kform select,.kform textarea{font:400 17px/1.4 var(--sans); color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:var(--r-s); padding:12px 14px; width:100%; min-width:0}
.kform textarea{resize:vertical; min-height:9em}
.kform input:focus-visible,.kform select:focus-visible,.kform textarea:focus-visible{outline:3px solid var(--grass); outline-offset:1px; border-color:var(--grass)}
.kform-fuss{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px}
.kform-hinweis{font-size:15px; color:var(--ink-soft); margin:0; max-width:46ch}
.kform-hinweis a{color:inherit; text-decoration:underline; text-decoration-color:var(--sun); text-underline-offset:4px}
.kform button[disabled]{opacity:.6; cursor:progress}
.kform-status{margin:0; font-weight:700; padding:14px 16px; border-radius:var(--r-s); border-left:4px solid var(--grass); background:var(--paper)}
.kform-status[data-status="pruefen"],.kform-status[data-status="fehler"]{border-left-color:var(--sun-deep)}
.kform-falle{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}
@media (max-width: 900px){ .kform{grid-template-columns:1fr} }
/* Presse: Titelbild im Kopf, Logos der Medien bei den Veröffentlichungen (2026-10-09) */
.phero-wide{aspect-ratio:1160/772; margin-right:0}
.pub-logo{height:28px; width:auto; display:block; opacity:.85}
.pub-meta .outlet{display:flex; align-items:center}
#redaktionen .ctas{margin-top:22px}
/* Presse-Kopf wie die Startseite: Text links, Foto rechts randlos über die volle Höhe (kein "Passfoto"-Kasten) */
.phero-split{padding:0; border-bottom:0}
.phero-split .grid{width:auto; margin:0; grid-template-columns:minmax(0,45fr) minmax(0,55fr); gap:0; align-items:stretch; min-height:min(78vh, 720px)}
.phero-split .grid > div{align-self:center; padding:clamp(40px,5vw,80px) clamp(32px,5vw,88px) clamp(40px,5vw,80px) max(24px, calc((100vw - 1180px) / 2))}
.phero-split .phero-img{aspect-ratio:auto; border-radius:0; margin:0; position:relative; height:100%}
.phero-split .phero-img img{position:absolute; inset:0; object-position:58% 45%}
@media (max-width: 900px){
  .phero-split .grid{grid-template-columns:1fr; min-height:0}
  .phero-split .phero-img{grid-row:1; height:auto; aspect-ratio:3/2}
  .phero-split .grid > div{padding:32px 16px 48px}
}
.phero-split .phero-img[data-photo="1709"] img{object-position:28% 50%} /* Presse: Bertille und Finn im Ausschnitt */

/* Veröffentlichungen ruhiger (2026-10-09): nur zwei Schriftstile — Serif für den Titel, Sans für alles andere.
   Links Datum + Medium als schmale Spalte, rechts Titel, Anriss, Link. Keine Versalien, keine Farbwechsel. */
.pub{display:grid; grid-template-columns:150px minmax(0,1fr); gap:6px 32px; padding:30px 0}
.pub-meta{grid-column:1; grid-row:1 / span 3; display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  font:400 15px/1.4 var(--sans); letter-spacing:0; text-transform:none; color:var(--ink-soft); margin:4px 0 0}
.pub-meta time{font-weight:700; color:var(--ink)}
.pub-meta .outlet{display:block; color:var(--ink-soft)}
.pub h3{grid-column:2; font-size:clamp(22px,2.1vw,28px); line-height:1.2; margin:0 0 6px}
.pub p{grid-column:2; font-size:16px; line-height:1.55; margin:0 0 8px; max-width:60ch}
.pub-go{grid-column:2; font-size:15px; font-weight:700; color:var(--ink); text-decoration:underline; text-decoration-color:var(--sun); text-underline-offset:5px; text-decoration-thickness:2px; justify-self:start}
@media (max-width: 900px){
  .pub{grid-template-columns:1fr}
  .pub-meta{grid-row:auto; flex-direction:row; gap:10px; margin:0 0 4px}
  .pub h3,.pub p,.pub-go{grid-column:1}
}
/* Über Finn: Unsere Woche (2026-10-09) */
.week{margin-top:22px; padding:20px 22px; background:var(--paper-2); border-radius:var(--r-m)}
.week h3{font:800 12px/1.2 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--sun-text); margin-bottom:10px}
.week ul{list-style:none; margin:0; padding:0}
.week li{padding:6px 0; font-size:16px; border:0}
.week strong{font:400 24px/1 var(--serif); color:var(--sun-deep); margin-right:6px}
.phero-split .phero-img[data-photo="2043"] img{object-position:45% 40%}
/* Gentherapie Runde 3 (2026-10-09) */
.dg-stack{display:grid; gap:16px}
.why-img{aspect-ratio:3/2; border-radius:var(--r-l); overflow:hidden; margin-top:28px}
.sources li{margin-bottom:8px}
.sources li a{text-decoration:underline; text-decoration-color:var(--sun); text-underline-offset:4px}
.phero-split .phero-img[data-photo="1907"] img{object-position:50% 38%}
.phero-split h1{font-size:clamp(40px,4.2vw,64px)}
/* SLC6A1 (2026-10-09): Zellwände in Grafiken grau — Grün steht nur für GAT-1; Zahlen in 2 Reihen à 3 */
.dg .mem2{stroke:color-mix(in oklch, var(--ink) 28%, var(--paper)); stroke-width:6; stroke-linecap:round}
.stats{grid-template-columns:repeat(3, minmax(0,1fr))}
.stat:nth-child(3n){border-right:0; margin-right:0}
.stat:nth-child(n+4){border-top:1px solid var(--line)}
.stat.big strong{font-size:clamp(34px,3.6vw,52px); color:var(--sun-deep)}
.cite{margin-top:24px}
.cite a{text-decoration:underline; text-decoration-color:var(--sun); text-underline-offset:3px}
@media (max-width: 900px){ .stats{grid-template-columns:1fr 1fr} .stat:nth-child(3n){border-right:0} .stat:nth-child(n+3){border-top:1px solid var(--line)} }
.phero-split .phero-img[data-photo="1880"] img{object-position:55% 6%} /* SLC6A1-Kopf: Finns Gesicht im Ausschnitt */
.phero-split .phero-img[data-photo="1762"] img{object-position:40% 30%} /* SLC6A1-Kopf: Finn vorne, Familie dahinter */
.phero-split .phero-img[data-photo="2058"] img{object-position:52% 40%} /* SLC6A1-Kopf: Finn und Milo */
/* Neuigkeiten: kommender Termin über die volle Breite hervorgehoben (2026-10-09) */
.note.featured{grid-column:1 / -1; background:color-mix(in oklch, var(--sun) 10%, var(--paper)); border-top-color:var(--sun); padding:18px 24px 22px; border-radius:0 0 var(--r-m) var(--r-m)}
.note.featured h3{font-size:clamp(26px,2.6vw,34px)}
.note.featured p{max-width:70ch}
.note.featured .next-label{color:var(--sun-text); margin-bottom:6px}
.pub-lang:empty,.pub-lang:not(:has(*)):is(:empty){display:none} .pub-meta .pub-lang{font-style:italic}

/* „Finn heute“ auf Über Finn: Foto neben der Erzählung, am Handy darunter */
.heute-img{aspect-ratio:4/3; border-radius:var(--r-m); overflow:hidden}

/* Webseiten-Check 2026-10-09 ------------------------------------------------------------ */
/* Fotos kommen als <picture> aus dem Build; die Hülle soll das Layout nicht verändern */
picture{display:contents}
/* Fester Spenden-Button: site.js blendet ihn erst nach dem ersten Bildschirm ein und wieder aus,
   solange ein Spenden-Button der Seite sichtbar ist (verdeckte sonst den Einstieg) */
@media (max-width: 900px){
  .sticky-donate{transform:translateY(calc(100% + 24px)); visibility:hidden; transition:transform .25s var(--ease-out), visibility 0s .25s}
  .sticky-donate.zeigen{transform:none; visibility:visible; transition:transform .25s var(--ease-out)}
  .lang a{min-height:34px; display:flex; align-items:center}
}
/* Sehr schmale Handys (320–380 px): Kopfzeile passt sonst nicht, die Sprachwahl lief über den Rand */
@media (max-width: 380px){
  .bar{gap:8px}
  header .bar > .brand{font-size:20px}
  .lang a{padding:7px 6px}
}
/* „Wer Finn begleitet“: am Handy zwei Spalten statt neun bildschirmhoher Karten untereinander */
@media (max-width: 600px){
  .logos{grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
  .logos li > span{hyphens:auto; overflow-wrap:break-word}
  .logos li{padding:14px 12px 12px; gap:10px}
  .logos a,.logos .logo-box{height:56px}
  .logos img{max-height:48px}
  .logos li > span{font-size:13px}
  .logos strong{font-size:14px}
}

/* Handy: nie mehrere Fotos ohne Text dazwischen (David, 2026-10-09). Ausgeblendete Fotos
   laden lazy und werden am Handy deshalb gar nicht erst geholt. */
@media (max-width: 900px){
  .finn .f1{display:none}                 /* „Das ist Finn“: nur „Wir vier“ */
  .hat .hat-img{order:2}                  /* Spielhaus-Foto nach dem Text, nicht direkt unter „Wir vier“ */
  .cause .cause-band .cb2{order:-1}       /* „Kinn auf dem Zaun“ vor den Kasten, damit Text vor dem Bank-Foto steht */
  .finn-pics{display:block}               /* „Was Finn liebt“: ein Foto statt Dreier-Raster */
  .finn-pics .fp1,.finn-pics .fp3{display:none}
  .finn-pics .fp2{aspect-ratio:4/3}
}
/* EN/FR: Der übersetzte Name („Finn gives us courage“, „Finn nous donne du courage“) ist länger
   als „Finn macht Mut“ — in der Kopfzeile auf zwei Zeilen, bis neben dem Menü Platz ist */
@media (max-width: 1180px){
  html:not([lang="de"]) header .bar > .brand{line-height:.95}
  html:not([lang="de"]) header .bar > .brand span{display:block}
}
html:not([lang="de"]) footer .brand{line-height:1}
html:not([lang="de"]) footer .brand span{display:block}
/* Platzhalter auf „Über uns“ (Gerüst, Texte folgen) — vor dem Go-live darf keiner übrig sein */
.platzhalter{color:var(--ink-soft); font-style:italic}
p.platzhalter,li.platzhalter{border:1px dashed var(--line); border-radius:var(--r-m); padding:12px 14px}
/* Sechs Menüpunkte (seit „Über uns“) passen erst ab ~1180 px in eine Zeile: darunter klappt das
   Menü wie am Handy hinter „Menü“; der Spenden-Button bleibt sichtbar. */
@media (min-width: 901px) and (max-width: 1180px){
  nav.main{display:none}
  nav.main.open{display:flex; position:absolute; top:68px; left:0; right:0; flex-direction:column; gap:0; background:var(--paper); border-bottom:1px solid var(--line); padding:8px max(16px, calc((100vw - 1180px) / 2)) 16px}
  nav.main.open a{padding:14px 0; border-bottom:1px solid var(--line); font-size:16px}
  .btn-kontakt{display:none}
  .nav-kontakt{display:block}
  .bar .spenden{margin-left:auto}
  .burger{display:block}
}
/* FR: „Finn nous donne du courage“ einzeilig braucht neben dem Menü bis 1280 px zu viel Platz */
@media (max-width: 1280px){
  html[lang="fr"] header .bar > .brand{line-height:.95}
  html[lang="fr"] header .bar > .brand span{display:block}
}
.week-note{margin:12px 0 0; padding-top:12px; border-top:1px solid var(--line); font-size:16px; color:var(--ink-soft)}
/* „Finns typische Woche“ über die ganze Breite: vier Termine nebeneinander, am Handy zwei bzw. einer */
.week.voll{grid-column:1/-1; margin-top:0}
.week.voll ul{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px 28px}
.week.voll li{padding:0}
.week.voll strong{display:block; margin:0 0 6px}
@media (max-width: 900px){ .week.voll ul{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 420px){ .week.voll ul{grid-template-columns:1fr} }
.tint .week{background:var(--paper)}
.mission-promise{margin:36px 0 0; padding-top:20px; border-top:1px solid var(--line); max-width:72ch; color:var(--ink-soft)}
.family figure[data-photo="1992"] img{object-position:50% 22%} /* Über uns: David hochkant, Kopf und Finn im 3:2-Ausschnitt */

/* Presse: Unterstützer als Textkarten (ohne Logo) und Termine ohne Link (2026-10-30) */
.logos.supporters a,.logos.supporters .supporter-name{height:auto; display:block; text-decoration:none}
.logos.supporters strong{font-size:18px; line-height:1.3}
.logos.supporters a:hover strong{text-decoration:underline; text-decoration-color:var(--sun); text-underline-offset:4px}
.press-list .logo-group:first-of-type{margin-top:8px}
div.pub:hover h3{text-decoration:none}
/* Presse: Umschalter Benefiz / Forschung (2026-10-30) — Gruppenüberschrift nur ohne JS */
.term-switch{display:inline-flex; border:1px solid var(--line); border-radius:var(--r-s); overflow:hidden; margin:0 0 24px}
.term-switch[hidden]{display:none}
.term-switch button{font:800 15px/1 var(--sans); padding:12px 18px; border:0; background:var(--paper); color:var(--ink); cursor:pointer}
.term-switch button + button{border-left:1px solid var(--line)}
.term-switch button[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.term-switch button[aria-pressed="false"]:hover{background:var(--paper-2)}
.term-switch:not([hidden]) ~ .term-group .logo-group{display:none}
.term-group .pub{border-bottom:0}
.term-group .pub:last-child{border-bottom:1px solid var(--line)}
/* Über Finn: Aufruf unter den Unterstützern (2026-11-10) */
.supporter-call{margin-top:32px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px}
.supporter-call p{margin:0; max-width:62ch; color:var(--ink-soft)}

/* ===== Review 2026-11, Entwurf A: Hero mit Spendenstand, Kopf-Spenden direkt (David, 2026-11-11) ===== */
/* Kopf: direkter GoFundMe-Link statt Ausklappmenü. Ghost, solange ein Spenden-Button der Seite sichtbar
   ist (Klasse von site.js) — Regel 1: höchstens eine orange Fläche mit Text je Bildschirm.
   Rahmen immer gesetzt, damit der Wechsel Orange ↔ Ghost die Größe nicht ändert. */
.hdr-donate{border:1.5px solid var(--sun); white-space:nowrap; transition:background .25s var(--ease-out), border-color .25s}
body.spende-sichtbar .hdr-donate{background:transparent; border-color:var(--ink)}
body.spende-sichtbar .hdr-donate:hover{background:var(--paper-2)}
@media (min-width: 901px) and (max-width: 1180px){
  .bar .hdr-donate{margin-left:auto}
  .burger{min-height:44px; min-width:44px}
}
/* Spendenstand als Karte mit Balken. Balken: Spur aus --ink-Mischung mit Kontur, Füllung --sun mit
   Kante --sun-deep — trägt als Grafik ≥ 3 : 1 (Design-System Befund 2); die Zahl steht zusätzlich als Text. */
.hero .lead{margin:20px 0 22px}
.hero-stand{margin:0 0 22px; padding:16px 18px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m); font-size:inherit; color:var(--ink)}
.hero-stand .hs-sum{margin:0; font-size:15px; color:var(--ink-soft)}
.hero-stand .hs-sum strong{font:400 34px/1 var(--serif); color:var(--ink); margin-right:4px}
.hero-stand .meter{height:12px; margin:12px 0 8px; border-radius:12px; background:color-mix(in oklch, var(--ink) 10%, var(--paper)); box-shadow:inset 0 0 0 1px color-mix(in oklch, var(--ink) 18%, var(--paper))}
.hero-stand .meter span{min-width:14px; border-radius:12px; border-right:2px solid var(--sun-deep)}
.hero-stand .hs-meta{margin:0; font-size:13px; color:var(--ink-soft)}
.hero .ctas .btn{min-height:48px}
/* Handy: Überschrift im dunklen Verlauf unten im Foto (Regel 5), Foto kürzer, danach Satz, Stand, Buttons.
   .wrap und .hero-text lösen sich auf (display:contents), damit die Überschrift in die Fotozeile des Grids kann. */
@media (max-width: 900px){
  .hero > figure{height:min(40svh, 340px)}
  .hero > figure img{object-position:30% 24%}
  .hero > figure::after{inset:0; width:auto; height:auto; background:linear-gradient(180deg, transparent 42%, color-mix(in oklch, var(--shade) 72%, transparent) 100%)}
  .hero .wrap,.hero .hero-text{display:contents}
  .hero h1{grid-column:1; grid-row:1; align-self:end; z-index:1; margin:0 16px 14px; color:var(--paper-on-dark); font-size:clamp(36px, 11.5vw, 48px); white-space:normal}
  .hero h1 em{color:var(--sun-light)}
  .hero .lead{grid-row:2; margin:18px 16px 14px; font-size:17px; line-height:1.55}
  .hero-stand{grid-row:3; margin:0 16px 14px; padding:12px 14px}
  .hero-stand .hs-sum strong{font-size:28px}
  .hero .ctas{grid-row:4; margin:0 16px; display:grid; grid-template-columns:1fr auto; gap:10px}
  .hero-known{grid-row:5; margin:24px 16px 32px}
}
/* Sehr schmale Handys (≤ 360 px): etwas kürzeres Foto und kleinerer Satz, damit „Jetzt spenden“ im ersten Bildschirm bleibt */
@media (max-width: 360px){
  .hero > figure{height:min(34svh, 280px)}
  .hero .lead{font-size:16px; margin-top:14px}
  .hero-stand .hs-sum strong{font-size:26px}
}