/* Gemeinsames CSS der Website. Farben und Schriften vom Canvas, Leiste und Fuß nach Prototyp 06-verein-v4.
   Schriften liefert die Website selbst aus (assets/fonts/, Fontsource 5.3.0, OFL-1.1); nichts lädt von Google. */
@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-grotesque.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(fonts/source-sans-3.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
:root{--petrol:#34736b;--petrol-d:#26564f;--petrol-x:#1b3f3a;--dark:#2b3a44;--teal:#43b6a6;--yellow:#f4c20d;--orange:#ef7d00;--orange-d:#d06c00;--green:#7ab648;--red:#e23b2e;
--paper:#f6f4ee;--paper2:#eaf2ef;--ink:#233038;--muted:#5f6b72;--line:#dde4e1;
--fd:"Bricolage Grotesque","Avenir Next","Helvetica Neue",system-ui,sans-serif;--fb:"Source Sans 3","Segoe UI","Helvetica Neue",system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.6 var(--fb);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh}
img{display:block;max-width:100%}
a{color:var(--petrol)}
h1,h2,h3{font-family:var(--fd);margin:0;letter-spacing:-.005em;line-height:1.15;font-weight:700}
h1{font-size:clamp(32px,4.6vw,50px)}h2{font-size:clamp(25px,3.2vw,34px)}h3{font-size:20px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px;width:100%}
.inhalt{flex:1;padding-top:56px;padding-bottom:64px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:12px 24px;border-radius:999px;font:600 17px/1.2 var(--fd);text-decoration:none;border:2px solid transparent;text-align:center}
.btn-cta{background:var(--orange);color:#fff}.btn-cta:hover{background:var(--orange-d)}

/* Leiste: beim Laden groß, nach dem Scrollen klein (Klasse „klein“ aus inc/layout.php; Maße und Übergänge nach Prototyp
   06-verein-v4, Segment 3 Ticket 01). Sie steht fest oben (fixed) und hält ihren Platz über dem Hauptbereich in der großen Höhe
   frei: So springt der Inhalt beim Schrumpfen nicht nach oben, und kurze Seiten flackern nicht an der Schwelle. */
.leiste{background:#fff;border-bottom:1px solid var(--line);position:fixed;top:0;left:0;right:0;z-index:5}
.leiste + main{margin-top:105px}
.leiste .wrap{display:flex;align-items:center;gap:20px;height:104px;transition:height .2s}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);margin-right:auto}
.brand img{width:80px;height:80px;object-fit:contain;transition:width .2s,height .2s}
.brand b{display:block;font:700 24px/1.1 var(--fd);color:var(--petrol);white-space:nowrap;transition:font-size .2s}
.brand small{display:block;font-size:14px;line-height:1.3;color:var(--muted);max-width:220px;margin-top:3px}
.links{display:flex;align-items:center;gap:18px;white-space:nowrap}
.links a{font:600 16px/1 var(--fd);color:var(--ink);text-decoration:none;padding:6px 0}
.links a.on{color:var(--petrol);border-bottom:2px solid var(--petrol)}
.links a.cta{background:var(--orange);color:#fff;border-radius:999px;padding:10px 16px}
.links a.cta:hover{background:var(--orange-d)}
.links a.cta.on{border-bottom:0}
.links a.adm{color:var(--muted);font-weight:400;border-left:1px solid var(--line);padding-left:14px}
.links a.adm::before{content:"🔒 "}
.burger{display:none;font-size:26px;line-height:1;background:none;border:0;padding:8px;color:var(--ink);cursor:pointer}
.leiste .mcta{display:none;min-height:40px;padding:8px 14px;font-size:15px;white-space:nowrap}
.leiste.klein .wrap{height:60px}
.leiste.klein .brand img{width:42px;height:42px}
.leiste.klein .brand b{font-size:19px}
.leiste.klein .brand small{display:none}
@media (prefers-reduced-motion:reduce){.leiste .wrap,.brand img,.brand b{transition:none}}
@media (max-width:1060px){.links{gap:14px}.links a{font-size:15px}}
@media (max-width:900px){
 .burger{display:block}.leiste .mcta{display:inline-flex}
 .leiste .wrap{height:80px;position:relative}
 .leiste + main{margin-top:81px}
 .brand img{width:58px;height:58px}.brand b{font-size:19px}.brand small{font-size:12px;white-space:normal;max-width:160px}
 .leiste.klein .wrap{height:56px}.leiste.klein .brand img{width:36px;height:36px}.leiste.klein .brand b{font-size:17px}
 .links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(0,0,0,.08);padding:8px 20px 16px}
 .menue-offen .links{display:flex}
 .links a,.links a.adm{font-size:18px;padding:14px 0;border-bottom:1px solid var(--line);border-left:0}
 .links a.on{border-bottom:1px solid var(--line)}
 .links a.cta{text-align:center;margin:10px 0 4px;border-bottom:0}
}
@media (max-width:600px){
 .leiste .wrap{padding:0 14px;gap:10px}.brand{gap:10px}.brand img{width:52px;height:52px}.brand small{display:none}.brand b{font-size:17px;white-space:normal;max-width:100px}
 .leiste .mcta{font-size:14px;padding:8px 12px}
 .leiste.klein .brand img{width:34px;height:34px}.leiste.klein .brand b{font-size:16px}
 .links{padding:8px 14px 16px}
}

/* Fuß */
.fuss{background:var(--dark);color:rgba(255,255,255,.7);font-size:14px;padding:24px 0}
.fuss .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.fuss a{color:#fff}
/* Startseite „Verein“ (Segment 3, Ticket 01): Werte aus Prototyp 06-verein-v4 (Container-Maße dort = Breite des Fensters hier,
   darum vw und @media statt cqi und @container). Nur unter .startseite, damit gleichnamige Klassen anderer Seiten unberührt bleiben.
   Offen im Prototyp, entschieden nach frontend-design: sichtbarer Tastaturfokus, keine Bewegung bei „weniger Bewegung“, Sprungziele
   64 px unter dem oberen Rand, damit sie nicht unter der kleinen Leiste liegen. */
.startseite{flex:1}
.startseite [id]{scroll-margin-top:64px}
.startseite .sec{padding:64px 0}
.startseite .eyebrow{font-family:var(--fd);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--petrol);margin-bottom:8px}
.startseite p{margin:0}
.startseite .lead{font-size:20px;line-height:1.6;color:var(--muted);max-width:700px;margin:10px 0 28px}
.startseite .small{font-size:15px;color:var(--muted)}
.startseite .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.startseite .btn-w{border-color:rgba(255,255,255,.7);color:#fff}
.startseite .btn-o{border-color:var(--petrol);color:var(--petrol)}.startseite .btn-o:hover{background:var(--paper2)}
.startseite a:focus-visible{outline:3px solid rgba(52,115,107,.45);outline-offset:3px}
.startseite .hero a:focus-visible,.startseite .invite a:focus-visible{outline-color:#fff}
.startseite .hero{position:relative;min-height:600px;display:flex;align-items:flex-end;background:url(img/verein-schule.jpg) center 40%/cover}
.startseite .hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,63,58,.05) 0%,rgba(27,63,58,.55) 40%,rgba(27,63,58,.9) 100%)}
.startseite .hero .wrap{position:relative;padding-bottom:48px;color:#fff}
.startseite .hero h1{color:#fff;max-width:720px;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.startseite .hero p{font-size:20px;max-width:640px;margin:14px 0 24px;color:rgba(255,255,255,.92)}
.startseite .ohne{position:relative;background:url(img/verein-schule.jpg) center 45%/cover;padding:84px 0 76px;text-align:center}
.startseite .ohne::before{content:"";position:absolute;inset:0;background:rgba(246,244,238,.88);backdrop-filter:grayscale(1)}
.startseite .ohne .wrap{position:relative;max-width:860px}
.startseite .ohne .o1{font:700 clamp(28px,4vw,44px)/1.2 var(--fd);color:var(--muted);margin-top:6px}
.startseite .ohne .o2{font:700 clamp(24px,3.2vw,34px)/1.25 var(--fd);color:var(--petrol);margin-top:18px}
.startseite .kacheln{padding-top:44px}
.startseite .kacheln .small{margin-bottom:18px}
.startseite .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 18px;margin-top:24px}
.startseite .grid img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;margin-bottom:10px;transition:transform .25s}
.startseite .grid .cap:hover img{transform:scale(1.02)}
.startseite .cap b{display:block;font:600 17px/1.25 var(--fd)}
.startseite .cap span{font-size:15px;color:var(--muted);line-height:1.4;display:block}
.startseite .alles{margin-top:34px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px 26px}
.startseite .alles h3{margin-bottom:14px}
.startseite .alles .gr{columns:3;column-gap:28px}.startseite .alles .gr>div{break-inside:avoid;margin-bottom:18px}
.startseite .alles .gr b{display:block;font:600 15px var(--fd);color:var(--petrol);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.startseite .alles .gr span{display:block;font-size:16px;line-height:1.45;color:var(--ink)}
.startseite .school{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.startseite .school blockquote{margin:0 auto;max-width:820px;text-align:center;font:500 clamp(21px,2.6vw,27px)/1.45 var(--fd)}
.startseite .school cite{display:block;margin-top:14px;font:400 15px var(--fb);color:var(--muted);font-style:normal}
.startseite .board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.startseite .pers{display:flex;gap:14px;align-items:center}
.startseite .av{width:64px;height:64px;flex:0 0 64px;border-radius:999px;background:var(--paper2);border:2px dashed #b7ccc6;display:flex;align-items:center;justify-content:center;font:700 18px var(--fd);color:var(--petrol)}
.startseite .pers b{font-family:var(--fd);font-weight:600;display:block;line-height:1.2;hyphens:auto}
.startseite .pers .r{font-size:14px;color:var(--petrol)}.startseite .pers .t{font-size:14px;color:var(--muted);line-height:1.35}
.startseite .join{margin-top:28px;background:var(--paper2);border-radius:18px;padding:26px 28px;display:grid;grid-template-columns:1fr 1fr;gap:24px 36px}
.startseite .join h3{margin-bottom:8px}.startseite .join p{font-size:17px;color:var(--muted)}
.startseite .join .row{margin-top:16px}
.startseite .invite{background:var(--petrol-x);color:#fff}
.startseite .invite .wrap{text-align:center}
.startseite .invite h2{color:#fff}
.startseite .invite p{color:rgba(255,255,255,.85);font-size:19px;margin:10px auto 22px}
.startseite .antrag{padding:26px 0;border-top:1px solid var(--line)}
.startseite .antrag .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
/* Termine (Segment 3 Ticket 02) nach Prototyp 06-verein-v4 „Was als Nächstes ansteht“; jeder Termin ein details, die Zeile ist
   sein summary. Offen im Prototyp, nach frontend-design: Fokusrahmen der Zeile, erste Notizzeile einzeilig mit Auslassung und
   bei geöffneter Notiz ausgeblendet (sie steht dort als erste Zeile), Listen und Absätze der Notiz, Links im Text statt als
   Kacheln, Satz ohne Stand bzw. ohne Termine in der Liste. */
.startseite .termine{padding-top:0}
.startseite .termine h2{margin-bottom:18px}
.startseite .tl{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.startseite .tgrp{font:600 12px var(--fd);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:10px 18px;background:#fbfaf6}
.startseite .tr{border-top:1px solid var(--line)}
.startseite .tk{display:grid;grid-template-columns:74px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 18px}
.startseite summary.tk{cursor:pointer;list-style:none}
.startseite summary.tk::-webkit-details-marker{display:none}
.startseite summary.tk:focus-visible{outline:3px solid rgba(52,115,107,.45);outline-offset:-3px}
.startseite .dt{font:700 15px/1.1 var(--fd);color:var(--petrol);text-align:center;background:var(--paper2);border-radius:10px;padding:8px 4px}
.startseite .dt small{display:block;font-weight:500;font-size:11px;color:var(--muted);text-transform:uppercase;margin-top:2px}
.startseite .tx{min-width:0}
.startseite .ti{display:block;font:600 17px/1.25 var(--fd);hyphens:auto}
.startseite .su{display:block;font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.startseite .su:empty{display:none}
.startseite .ch{display:flex;align-items:center;justify-content:center;width:22px;height:22px;color:var(--muted);font-size:20px;line-height:1;transition:transform .15s}
.startseite .tr[open] .ch{transform:rotate(90deg)}
.startseite .tr[open] .su{display:none}
.startseite .td{padding:0 18px 16px 106px;font-size:15px;line-height:1.55;overflow-wrap:anywhere}
.startseite .td p,.startseite .td ul,.startseite .td ol{margin:0 0 8px}
.startseite .td ul,.startseite .td ol{padding-left:22px}
.startseite .td a{font-weight:600}
.startseite .tl-satz{padding:16px 18px;border-top:1px solid var(--line);color:var(--muted)}
@media (max-width:600px){.startseite .tk{grid-template-columns:62px minmax(0,1fr) auto}.startseite .td{padding-left:18px}}
/* Leiste „Einblicke“ und Galerie (Segment 3 Ticket 03) nach Prototyp 06-verein-v4, auch seine Handy-Regel (max-width:600px).
   Die Galerie ist ein dialog: Esc schließt, der Fokus bleibt darin; seine Standardmaße sind zurückgesetzt. Offen im Prototyp,
   nach frontend-design: sichtbarer Tastaturfokus der Bilder und Knöpfe, keine Bewegung bei „weniger Bewegung“. */
.startseite .strip-h{display:flex;gap:12px;align-items:baseline;margin:34px 0 10px}
.startseite .strip-h b{font:600 18px var(--fd)}
.startseite .strip-h .small{margin:0}
.startseite .strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
.startseite .strip button{flex:0 0 108px;height:108px;padding:0;border:0;border-radius:10px;overflow:hidden;cursor:pointer;scroll-snap-align:start;background:var(--paper2)}
.startseite .strip img{width:100%;height:100%;object-fit:cover;transition:transform .2s}
.startseite .strip button:hover img{transform:scale(1.06)}
.startseite .strip button:focus-visible{outline:3px solid var(--petrol);outline-offset:-3px}
.startseite .lb{position:fixed;inset:0;width:auto;height:auto;max-width:none;max-height:none;margin:0;border:0;padding:20px;background:rgba(15,22,26,.93);color:#fff}
.startseite .lb[open]{display:flex;align-items:center;justify-content:center;gap:10px}
.startseite .lb::backdrop{background:transparent}
.startseite .lb figure{margin:0;max-width:min(1100px,86vw);text-align:center}
.startseite .lb img{max-width:100%;max-height:78vh;border-radius:10px;margin:0 auto}
.startseite .lb figcaption{color:#fff;margin-top:12px;font-size:17px}
.startseite .lb button{background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:999px;width:48px;height:48px;font-size:28px;cursor:pointer;flex:0 0 48px}
.startseite .lb button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.startseite .lb .x{position:absolute;top:16px;right:16px;font-size:20px}
@media (max-width:600px){.startseite .lb .p,.startseite .lb .n{position:absolute;bottom:20px}.startseite .lb .p{left:20px}.startseite .lb .n{right:20px}}
@media (prefers-reduced-motion:reduce){.startseite .grid img{transition:none}.startseite .grid .cap:hover img{transform:none}.startseite .ch{transition:none}
 .startseite .strip img{transition:none}.startseite .strip button:hover img{transform:none}}
@media (max-width:900px){.startseite .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}}
@media (max-width:860px){.startseite .alles .gr{columns:2}}
@media (max-width:760px){.startseite .board{grid-template-columns:1fr 1fr}.startseite .join{grid-template-columns:1fr}}
@media (max-width:600px){.startseite .hero::before{background:linear-gradient(180deg,rgba(27,63,58,.55),rgba(27,63,58,.9))}.startseite .hero .wrap{padding-top:60px}}
@media (max-width:520px){.startseite .alles .gr{columns:1}.startseite .pers{flex-direction:column;align-items:flex-start}}
/* Formular „Förderantrag stellen“ (Ticket 02). Formen aus design/_style.css, Anpassungen nach Prototyp 08-foerderantrag.
   :user-invalid zeigt ein leeres Pflichtfeld früh rot, sobald man es verlassen hat; entschieden wird nur auf dem Server. */
.lead{font-size:20px;line-height:1.5;color:var(--muted);margin:10px 0 28px}
.muted{color:var(--muted)}.small{font-size:15px;line-height:1.5}
.btn-y{background:var(--yellow);color:#1f2a31;border:0;cursor:pointer;font:700 18px/1 var(--fd)}.btn-y:hover{background:#e6b60a}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:10px}
.card h2{font-size:20px}.card p{margin:0}
.karte-fragen{background:var(--paper2);border-color:#c8ddd8}
.note{background:#fff8dc;border:1px solid #f0dc8a;border-radius:12px;padding:14px 18px;font-size:15px;color:#5a4a00;line-height:1.5;margin:0}
/* Honigtopf (Ticket 08): im HTML für Bots ein normales Feld; das Stylesheet verbirgt es vor Menschen, Tab und Vorlese-Hilfe. */
.honigtopf{display:none}
.fehlerkasten{background:#fbe3e0;border:1px solid var(--red);border-radius:12px;padding:14px 18px;color:#8a1f16;font-weight:600;margin:0 0 24px}
.info{background:#fff;border:1px solid var(--line);border-left:6px solid var(--yellow);border-radius:14px;padding:16px 20px;font-size:16px;line-height:1.5}
.stern,.req::after{color:var(--orange)}.req::after{content:" *"}
.antrag-layout{display:grid;grid-template-columns:7fr 4fr;gap:40px;align-items:start}
#antrag{display:flex;flex-direction:column;gap:22px;min-width:0}
.antrag-aside{display:flex;flex-direction:column;gap:18px;position:sticky;top:124px}
.fsec{background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px 36px;display:flex;flex-direction:column;gap:20px}
.fsec .fh{display:flex;align-items:center;gap:14px}.fsec h2{font-size:24px}
.fsec .fh .no{width:36px;height:36px;border-radius:999px;background:var(--petrol);color:#fff;font:800 16px/1 var(--fd);display:flex;align-items:center;justify-content:center;flex:0 0 36px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0;border:0;padding:0;margin:0}
.field label,.field legend{font:700 15px/1.3 var(--fd);color:var(--ink);padding:0;margin-bottom:6px}
.field label.chk,.field label.radio{font:400 16px/1.45 var(--fb);margin:0}.field label.radio{padding:16px 18px}
.hint{font-size:14px;color:var(--muted);line-height:1.4;margin:0}
.frei{color:var(--muted);font-weight:400}
.frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.inp{display:block;width:100%;min-height:48px;border:1.5px solid #c9d3cf;border-radius:10px;background:#fff;padding:11px 14px;font:17px/1.4 var(--fb);color:var(--ink)}
select.inp{appearance:auto}
textarea.inp{min-height:150px;resize:vertical;line-height:1.5;overflow:hidden}
.inp:focus{outline:3px solid rgba(52,115,107,.25);border-color:var(--petrol)}
.inp:user-invalid,.field.err .inp,.field.err .radio{border-color:var(--red)}
#lerngruppe_frei{margin-top:8px}.inp[hidden]{display:none}
#ap-block{display:flex;flex-direction:column;gap:18px}#ap-block[hidden],#ap-gleich-zeile[hidden]{display:none}
.errmsg{color:var(--red);font-size:14px;line-height:1.4;margin:0}
.chk{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.45;cursor:pointer}
.radio{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border:1.5px solid #c9d3cf;border-radius:12px;background:#fff;font-size:16px;line-height:1.4;cursor:pointer}
.radio:has(input:checked){border-color:var(--petrol);background:var(--paper2)}
.radio .small{display:block}
.radio input,.chk input{accent-color:var(--petrol);width:20px;height:20px;margin:2px 0 0;flex:0 0 20px}
.pos{display:grid;grid-template-columns:1fr 160px;gap:10px}
.kostenzeilen{display:flex;flex-direction:column;gap:10px}.inp.betrag{text-align:right}
.summe{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}
.link{background:none;border:0;padding:4px 0;color:var(--petrol);font:700 16px/1.3 var(--fb);cursor:pointer;text-decoration:underline}
#summe{font:800 20px/1.2 var(--fd);color:var(--ink);white-space:nowrap}
/* Zahlungsempfänger (Ticket 06): eingeklappt als details, Form nach Prototyp 08. */
details.konto summary{cursor:pointer;font:700 17px/1.3 var(--fd);color:var(--petrol)}
details.konto[open] summary{margin-bottom:16px}
.konto-felder{display:flex;flex-direction:column;gap:18px}
.okmsg{color:#3f6d17;font-size:14px;line-height:1.4;margin:0}.okmsg[hidden],.errmsg[hidden]{display:none}
/* Dateien (Ticket 07): Wahlfeld nach Prototyp 08 und Canvas; das echte Eingabefeld liegt unsichtbar über der ganzen
   Fläche, so wirken Klick, Tastatur und Hineinziehen ohne Skript. */
.drop{position:relative;border:2px dashed #b7ccc6;border-radius:14px;padding:22px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;color:var(--muted);background:var(--paper2);font-size:15px;line-height:1.4}
.drop strong{color:var(--petrol);font:700 17px/1.3 var(--fd)}
.drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.drop:hover,.drop:focus-within{border-color:var(--petrol)}.drop:focus-within{outline:3px solid rgba(52,115,107,.25)}
.field.err .drop{border-color:var(--red)}
.dateiliste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:15px;color:var(--ink)}
.dateiliste[hidden]{display:none}.dateiliste li{overflow-wrap:anywhere}
@media (max-width:900px){
 .antrag-layout,.frow{grid-template-columns:1fr}
 .antrag-aside{position:static}
 .fsec{padding:22px 18px}
 .pos{grid-template-columns:1fr 120px}
}
.danke{max-width:820px}.danke h1 strong{color:var(--petrol)}
/* Förderanträge verwalten (Segment 2, Ticket 01): Rahmen nach Prototyp 09 (dunkle Kopfleiste, Grund #f2f4f3, Breite
   1160 px, Überschrift 36 px/800). Anmeldeseite, die der Prototyp nicht zeigt: schmale Spalte, Karte mit Petrol-Rand wie
   die Beschlusskarte des Prototyps. */
body.verwaltung{background:#f2f4f3}
.topbar{background:var(--dark);color:#fff;height:48px}
.topbar .wrap,.vinhalt{max-width:1160px}
.topbar .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.topbar .l{display:flex;align-items:center;gap:14px;font:700 17px/1.2 var(--fd);color:#fff;text-decoration:none;min-width:0}
.topbar .l img{width:36px;height:36px;border-radius:9px;object-fit:cover;flex:0 0 36px}
.topbar .r{display:flex;align-items:center;gap:18px;font-size:15px;flex:0 0 auto}
.topbar .r form{margin:0}
.topbar .r a,.topbar .abmelden{color:rgba(255,255,255,.75);background:none;border:0;padding:6px 0;font:15px/1.2 var(--fb);text-decoration:none;cursor:pointer}
.topbar .r a:hover,.topbar .abmelden:hover{color:#fff;text-decoration:underline}
.topbar a:focus-visible,.topbar .abmelden:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:4px}
.vinhalt{flex:1;padding-top:32px;padding-bottom:56px}
.verwaltung h1{font-size:36px;font-weight:800;line-height:1.08}
.verwaltung .inp{min-height:44px;padding:9px 12px;font-size:16px}
.btn-p{background:var(--petrol);color:#fff;border-color:var(--petrol);cursor:pointer}.btn-p:hover{background:var(--petrol-d)}
.btn-sm{min-height:44px;padding:0 20px;font-size:16px}
.fehler{background:#fbe3e0;color:#a52218;border-radius:10px;padding:10px 14px;font-size:15px;line-height:1.45;margin:0}
.anmelden{max-width:440px;display:flex;flex-direction:column;gap:14px}
.anmelden p{margin:0}
.anmelde-karte{border:2px solid var(--petrol);padding:20px 22px;gap:14px;margin-top:6px}
.anmelde-karte .btn{align-self:flex-start}
/* Liste der Förderanträge (Segment 2, Ticket 02): Tabelle und Status-Pills aus design/_style.css, Anpassungen nach
   Prototyp 09 (Karte ohne Innenabstand, 15 px, Nummer fett, „↻ jährlich“ in Petrol, Lerngruppe unter 900 px ausgeblendet). */
.liste-karte{padding:0;overflow-x:auto;margin-top:20px}
table.liste{border-collapse:collapse;width:100%;font-size:15px}
table.liste th{font:700 14px/1.3 var(--fd);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;padding:12px 14px;border-bottom:2px solid var(--line)}
table.liste td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
table.liste tr:last-child td{border-bottom:0}
table.liste td.num,table.liste th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.liste td.nr{font-family:var(--fd);font-weight:700;white-space:nowrap}
table.liste td.vh{overflow-wrap:anywhere}
.vinhalt > .fehler{margin-top:20px}
/* Satz nach dem Anlegen von Wiederholungen (Segment 2, Ticket 13): .ok aus Prototyp 09 (grün wie „genehmigt“, 10 px Radius, 15 px),
   über den Filterknöpfen wie #listeMeldung; lange Wörter brechen um wie in td.vh (Fremdreview 13 S1+P1). */
.ok{background:#e3f0d6;color:#3f6d17;border-radius:10px;padding:10px 14px;font-size:15px;line-height:1.45;margin:20px 0 0;overflow-wrap:anywhere}
.wdh{color:var(--petrol);font-weight:700;white-space:nowrap}
.pill{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;font:700 13px/1 var(--fd);letter-spacing:.02em;white-space:nowrap}
.pill-neu{background:#dcf3ef;color:#1d6b60}.pill-nachf{background:#fff3c4;color:#7a5a00}
.pill-ok{background:#e3f0d6;color:#3f6d17}.pill-nein{background:#fbe3e0;color:#a52218}
@media (max-width:900px){.verwaltung h1{font-size:30px}table.liste .hm{display:none}}
/* Filterknöpfe über der Liste (Segment 2, Ticket 03): .chip und .chip.on aus Prototyp 09 (weiß mit grauem Rand, gewählt
   Petrol, eine umbrechende Reihe mit 10 px Abstand, auch auf dem Handy), hier als Links. Nicht im Prototyp, gestaltet nach
   frontend-design: Rand Petrol beim Überfahren, sichtbarer Tastaturfokus. */
.unterzeile{margin:0}
.filter{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:20px}
.chip{display:inline-block;border:1.5px solid #c9d3cf;background:#fff;border-radius:999px;padding:6px 14px;font:600 15px/1.3 var(--fb);color:var(--ink);text-decoration:none;white-space:nowrap}
.chip .anzahl{font-variant-numeric:tabular-nums}
.chip:hover{border-color:var(--petrol)}
.chip.on{background:var(--petrol);border-color:var(--petrol);color:#fff}
.chip:focus-visible{outline:3px solid rgba(52,115,107,.35);outline-offset:2px}
/* Handy (Prototyp 09 legt es nicht fest, gestaltet nach frontend-design): jede Zeile ein Block, oben Nummer und Status,
   darunter Vorhaben, dann „beantragt …“ wie im Kopf der Detailansicht des Prototyps; kein seitliches Scrollen. */
@media (max-width:600px){
  table.liste thead{display:none}
  table.liste,table.liste tbody{display:block}
  table.liste tr.row{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:14px 16px;border-bottom:1px solid var(--line)}
  table.liste tr.row:last-child{border-bottom:0}
  table.liste tr.row td{padding:0;border:0}
  table.liste td.st{grid-row:1;grid-column:2;text-align:right}
  table.liste td.vh,table.liste td.num{grid-column:1/-1}
  table.liste td.num{text-align:left;font-weight:700}
  table.liste td.num::before{content:"beantragt ";font-weight:400;color:var(--muted)}
}
/* Suche und Jahr über der Liste (Segment 2, Ticket 04): Reihe nach Prototyp 09 (.tool: flex, umbrechend, 10 px; Suchfeld
   flex 1 1 220px, Jahr 130 px, Höhe 44 px). Nicht im Prototyp, gestaltet nach frontend-design: Knopf „Suchen“ in Petrol in
   Feldhöhe (ohne JavaScript nötig), Suchfeld ohne Browser-Eigenform. Auf dem Handy bricht das Jahr mit dem Knopf in die zweite Zeile. */
.suche{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:20px 0 0}
.suche .inp{width:auto;flex:1 1 220px}
.suche select.inp{flex:0 0 130px}
.suche input[type=search]{-webkit-appearance:none;appearance:none}
.suche .btn{flex:0 0 auto}
.suche .btn:focus-visible{outline:3px solid rgba(52,115,107,.35);outline-offset:2px}
/* Zeile der Liste öffnet den Förderantrag (Segment 2, Ticket 05): Hover wie Prototyp 09 (#f7faf9, Zeiger). Ohne JavaScript
   deckt der Link des Vorhabens per ::after die ganze Zeile ab; nicht im Prototyp und darum nach frontend-design: Text
   bleibt in Schriftfarbe, der Tastaturfokus umrandet die ganze Zeile. */
table.liste tr.row{position:relative;cursor:pointer}
table.liste tr.row:hover,table.liste tr.row:hover td{background:#f7faf9}
a.oeffnen{color:inherit;text-decoration:none}
a.oeffnen::after{content:"";position:absolute;inset:0}
a.oeffnen:focus-visible{outline:none}
table.liste tr.row:has(a.oeffnen:focus-visible){outline:3px solid rgba(52,115,107,.35);outline-offset:-3px}
/* Detailseite eines Förderantrags (Segment 2, Ticket 05), Werte aus Prototyp 09 (#detailView, .dkopf, .layout, .apaar,
   .asec, .kv, .tl, table.kosten, @media). Die Seite ist breiter als die Liste (bis 1400 px) und beginnt höher (16 px). Die
   rechte Spalte läuft ab 901 px mit; der Prototyp setzt sie 60 px unter seine eigene Fallleiste, hier 16 px unter den Rand. */
.vinhalt:has(> .dkopf){display:flex;flex-direction:column;gap:14px;padding-top:16px;padding-bottom:40px}
.dkopf{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.dkopf .zurueck{font-size:15px;line-height:1.5}
/* Links ohne Unterstrich wie im Prototyp 09 (design/_style.css), beim Überfahren unterstrichen. */
.dkopf a,.dlayout a{text-decoration:none}.dkopf a:hover,.dlayout a:hover{text-decoration:underline}
.dkopf .dnr{font:800 18px/1.3 var(--fd);color:var(--petrol)}
.verwaltung .dkopf h1{font-size:24px;overflow-wrap:anywhere;min-width:0}
.dkopf .dbetrag{margin-left:auto;white-space:nowrap}
.dkopf .dbetrag b{font:800 22px/1.2 var(--fd)}
/* Hinweis „kein Versandnachweis“ unter dem Kopf (Segment 2, Ticket 17): nur der Abstand der Spalte, nicht die 20 px der Liste. */
.dkopf ~ .fehler{margin-top:0}
.dlayout{display:grid;grid-template-columns:7fr 5fr;gap:20px;align-items:start}
.dlayout .seite{display:flex;flex-direction:column;gap:20px;min-width:0}
.dlayout .card{padding:20px 22px}
.dlayout .card h2{font-size:19px;line-height:1.3;font-weight:700}
.antrag-karte{gap:0}
.apaar{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;border-top:1px solid var(--line)}
.antrag-karte h2 + .apaar,.apaar .asec{border-top:0}
.asec{padding:12px 0;border-top:1px solid var(--line);min-width:0}
.asec h5{font:700 16px/1.3 var(--fd);color:var(--petrol);margin:0 0 8px}
.asec p{margin:0}
.asec .kv{display:grid;grid-template-columns:120px 1fr;gap:2px 12px;font-size:15px}
.kv .k{color:var(--muted);-webkit-hyphens:auto;hyphens:auto;min-width:0}
.kv .v{overflow-wrap:anywhere;min-width:0}
.btext{font-size:16px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.leer{color:#9aa4a8;font-style:italic}
.files{display:flex;flex-direction:column;gap:6px;font-size:15px}
.files .f{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:6px 0;overflow-wrap:anywhere}
/* Dateinamen als Link (Ticket 06, Prototyp 09 dateiLink): Farbe und Unterstrich beim Überfahren wie die übrigen Links der
   Detailseite; der Tastaturfokus (im Prototyp offen, nach frontend-design) wie bei den Knöpfen der Liste. */
.files a:focus-visible{outline:3px solid rgba(52,115,107,.35);outline-offset:2px;border-radius:4px}
table.kosten{border-collapse:collapse;width:100%;font-size:15px;margin:8px 0 10px}
table.kosten td{padding:7px 0;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
table.kosten td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:12px}
table.kosten tr.kosten-summe td{font-weight:700;border-bottom:0;border-top:2px solid var(--line)}
/* Haken „läuft jedes Jahr wieder“ (Ticket 12): Form des Prototyps (.schalter mit Zeiger, am Ende der Karte mit 14 px Abstand).
   Nicht im Prototyp, nach frontend-design: Tastaturfokus am Kästchen wie an den Knöpfen. */
.wiederholung-form{margin-top:14px}
.schalter{display:flex;gap:8px;align-items:center;font-size:15px;margin-top:10px;cursor:pointer}
.wiederholung-form .schalter{margin-top:0}
.schalter input{accent-color:var(--petrol);width:18px;height:18px;margin:0;flex:0 0 18px;cursor:pointer}
.schalter input:focus-visible{outline:3px solid rgba(52,115,107,.35);outline-offset:2px}
.tl{display:flex;flex-direction:column}
.tl .ev{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:10px 0;border-top:1px solid var(--line);font-size:15px}
.tl .ev:first-child{border-top:0}
.tl .ev .w{color:var(--muted)}
.tl .ev .t{white-space:pre-wrap;overflow-wrap:anywhere;min-width:0}
.tl .ev.notiz .t{background:var(--paper2);border-radius:8px;padding:4px 10px}
/* Interne Notizen (Segment 2, Ticket 21), Werte aus Prototyp 09 (#notiz 150 px hoch, #notizKnopf .btn-o .btn-sm aus
   design/_style.css: Petrol umrandet, beim Überfahren --paper2). Das Feld scrollt bei langem Text (kein Mitwachsen wie im
   Formular). Nicht im Prototyp, nach frontend-design: Tastaturfokus am Knopf wie an den Knöpfen der Beschlusskarte. */
.notiz-form{display:flex;flex-direction:column;gap:10px}
.notiz-form textarea.inp{min-height:150px;overflow:auto}
.btn-o{background:transparent;color:var(--petrol);border-color:var(--petrol);cursor:pointer}.btn-o:hover{background:var(--paper2);color:var(--petrol-d)}
.notiz-form .btn:focus-visible{outline:3px solid rgba(52,115,107,.35);outline-offset:2px}
/* Dateien des Vorstands (Segment 2, Ticket 22), Werte aus Prototyp 09 (Karte mit Satz, .files, „Datei hinzufügen“ als .btn-gr .btn-sm
   aus design/_style.css: grau umrandet, beim Überfahren hellgrau; das Dateifeld steckt im Knopf). Nicht im Prototyp, nach
   frontend-design: das Dateifeld ist nur unsichtbar, nicht versteckt, damit Tab es erreicht; der Fokus zeigt sich am Knopf. */
.btn-gr{background:transparent;color:var(--muted);border-color:#c9d3cf}.btn-gr:hover{background:#eef1f0;color:var(--ink)}
.datei-form label.btn{cursor:pointer;position:relative;align-self:flex-start}
.datei-form input[type=file]{position:absolute;inset:0;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
.datei-form label.btn:has(input:focus-visible){outline:3px solid rgba(52,115,107,.35);outline-offset:2px}
/* Fremdreview 22 P3: Meldungen mit Dateinamen (Karte, 500- und 413-Seite von vorstand/datei_hinzufuegen.php) brechen lange Namen um,
   sonst scrollt die Seite bei 390 px seitlich. Nur hier, nicht in der Grundregel .fehler (öffentliches Formular). */
.datei-meldung{overflow-wrap:anywhere}
/* Datei des Vorstands entfernen (Segment 2, Ticket 23), Werte aus Prototyp 09 (.files .f button: ohne Rahmen und Grund, rot, Schrift
   der Zeile, rechts in der Zeile). Nicht im Prototyp, nach frontend-design: der Knopf schrumpft nicht neben langen Namen, beim
   Überfahren unterstrichen, Tastaturfokus wie an den übrigen Knöpfen. */
.files .f .datei-weg{border:0;background:none;padding:0;color:var(--red);cursor:pointer;font:inherit;flex:none;align-self:flex-start}
.files .f .datei-weg:hover{text-decoration:underline}
.files .f .datei-weg:focus-visible{outline:3px solid rgba(52,115,107,.35);outline-offset:2px;border-radius:4px}
/* Beschlusskarte (Segment 2, Ticket 07), Werte aus Prototyp 09 (#beschlussCard: Petrol-Rand 2 px, Abstand 14 px; #antwortCard:
   gelber Rand 2 px, Abstand 12 px; .act; Knöpfe in der Detailansicht 40 px, 15 px; .btn-yo aus design/_style.css; Textfeld
   72 px hoch). Sie steht oben in der rechten Spalte und läuft mit ihr mit. Nicht im Prototyp, nach frontend-design: Fokus am Knopf. */
.beschluss-karte{border:2px solid var(--petrol);gap:14px}
.rueckfrage-karte{border:2px solid #e0b400;gap:12px}
.beschluss-karte textarea.inp{min-height:72px;overflow:auto}
.rfrage{white-space:pre-wrap;overflow-wrap:anywhere}
.act{display:flex;gap:10px;flex-wrap:wrap}
.dlayout .act .btn{min-height:40px;padding:0 14px;font-size:15px}
.btn-yo{background:transparent;color:#7a5a00;border-color:#e0b400;cursor:pointer}.btn-yo:hover{background:#fff3c4}
.act .btn:focus-visible{outline:3px solid rgba(52,115,107,.35);outline-offset:2px}
@media (min-width:901px){
  .vinhalt:has(> .dkopf){max-width:1400px}
  /* Ticket 21: höchstens 100vh − 16 px oben − 40 px Abstand unter dem Raster; so schiebt das Ende der Seite die Spalte nicht über
     den oberen Rand, und die Beschlusskarte bleibt auch ganz unten vollständig im Bild. */
  .dlayout .seite.rechts{position:sticky;top:16px;max-height:calc(100vh - 56px);overflow:auto;padding-bottom:4px}
  /* Die Beschlusskarte steht auch, wenn die rechte Spalte selbst scrollt; Verlauf und später Notizen und Dateien laufen darunter
     durch (Spec „Detail“, Fremdreview S1+P1; der Prototyp 09 scrollt die Spalte als Block). */
  /* Seit Ticket 09 steht nur die Beschlusskarte bzw. das Ergebnis; bei „Rückfrage offen“ läuft die Rückfrage-Karte mit dem Verlauf
     darunter durch, sonst bliebe für den Verlauf auf 1366 × 768 kaum Platz (Review 09, Spec „Detail“). */
  .dlayout .seite.rechts > .beschluss-karte,.dlayout .seite.rechts > .beschluss-ergebnis{position:sticky;top:0;z-index:1}
}
@media (max-width:900px){
  .dlayout{grid-template-columns:1fr}
  .verwaltung .dkopf h1{font-size:30px}
  .asec .kv{grid-template-columns:110px 1fr}
  .apaar{grid-template-columns:1fr}
  .apaar .asec + .asec{border-top:1px solid var(--line)}
}
/* Beschluss (Segment 2, Ticket 09), Werte aus Prototyp 09 (#beschlussCard .zwei: zwei Spalten, Abstand 12 px; .btn-g aus
   design/_style.css; #ergebnisCard: .kv mit 140 px, 15 px, Abstand 10 px). Nicht im Prototyp, nach frontend-design: unter 600 px
   stehen Datum und Betrag untereinander. Ticket 10: genehmigter Betrag als Eingabefeld (.inp), Hinweis „über dem beantragten“
   wie .hinweis im Prototyp 09 (gelb, 10 px Radius, 15 px). */
.beschluss-karte .zwei{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btn-g{background:var(--green);color:#fff;border-color:var(--green);cursor:pointer}.btn-g:hover{background:#6aa33c}
/* Ticket 11: Knopf „Ablehnen“ wie .btn-r aus design/_style.css (Prototyp 09): rot umrandet, beim Überfahren blassrot. */
.btn-r{background:transparent;color:var(--red);border-color:var(--red);cursor:pointer}.btn-r:hover{background:#fbe3e0}
.beschluss-ergebnis{gap:10px}
.beschluss-ergebnis .kv{display:grid;grid-template-columns:140px 1fr;gap:6px 12px;font-size:15px;align-items:baseline}
.beschluss-ergebnis .btext{font-size:15px;line-height:1.5}
.beschluss-ergebnis .hinweis{background:#fff3c4;color:#7a5a00;border-radius:10px;padding:10px 14px;font-size:15px;line-height:1.45;margin:0}
@media (max-width:900px){.beschluss-ergebnis .kv{grid-template-columns:110px 1fr}}
@media (max-width:600px){.beschluss-karte .zwei{grid-template-columns:1fr}}
/* Ticket 18: Haken „Umlaufbeschluss (per E-Mail)“ oben in der Karte (Prototyp 09 #umlauf, .schalter ohne Abstand nach oben; die
   Karte hat 14 px Abstand). Wie umlaufUmschalten im Prototyp ist nur das geltende Datumsfeld sichtbar, hier per :has ohne Skript;
   welches gilt, entscheidet der Server am Haken. Ein Browser ohne :has zeigt beide Felder. */
.beschluss-karte .schalter{margin-top:0}
.beschluss-karte:has(#umlauf:checked) .datum-protokoll,.beschluss-karte:not(:has(#umlauf:checked)) .datum-umlauf{display:none}
/* Kasten „Prüfungsunterlagen“ unter der Liste (Segment 2, Ticket 24). Prototyp 09 zeigt ihn nicht; gestaltet nach frontend-design:
   Grund --paper2 mit dem Rand von .karte-fragen trennt die Ausgabe zum Jahresende von der weißen Arbeitsliste. Die Jahresauswahl
   steht in der Überschrift und liest sich als ihr Jahr (gleiche Schrift und Größe); darunter ein Satz und „Excel herunterladen“. */
.pruefung{margin-top:32px;background:var(--paper2);border-color:#c8ddd8;padding:22px 24px}
.pruefung form{display:flex;flex-direction:column;gap:12px;margin:0}
.pruefung h2{font-size:22px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.verwaltung .pruefung h2 select.inp{width:auto;flex:0 0 auto;font:700 22px/1.2 var(--fd);color:var(--petrol);padding:5px 10px}
.pruefung p{max-width:68ch}
.pruefung .btn:focus-visible{outline:3px solid rgba(52,115,107,.35);outline-offset:2px}
/* Druckansicht „Genehmigte drucken“ (Segment 2, Ticket 25). Prototyp 09 zeigt sie nicht; gestaltet nach frontend-design für den
   Ordner der Revisionskommission: je Förderantrag ein weißes Blatt mit Petrol-Kante oben, die Antragsnummer groß als Trennblatt,
   darunter das Vorhaben und eine dunkle Linie; die Teile (Förderantrag, Beschluss, Verlauf, Dateien des Vorstands) nur durch feine
   Linien getrennt. Der Förderantrag nutzt .apaar/.asec/.kv der Detailseite. Gedruckt wird mit dem Browser (Fremdreview 25 S3 = P3:
   kein eigener Kasten). Im Druck: Leiste samt „Abmelden“ verborgen, vor jedem Förderantrag ab dem zweiten ein Seitenumbruch, Paare ab
   600 px zweispaltig; kein eigener Seitenrand (Fremdreview 25 S4 = P4: es gelten die Ränder des Browsers). */
.vinhalt:has(> .druck-antrag){max-width:900px}
.druck-antrag{background:#fff;border:1px solid var(--line);border-top:8px solid var(--petrol);border-radius:4px;padding:30px 40px 32px}
.druck-antrag + .druck-antrag{margin-top:28px}
.trennblatt{padding-bottom:18px;border-bottom:2px solid var(--ink)}
.trennblatt .dnr{display:block;font:800 64px/1 var(--fd);color:var(--petrol);font-variant-numeric:tabular-nums}
.verwaltung .trennblatt h2{font:700 30px/1.15 var(--fd);margin:12px 0 0;overflow-wrap:anywhere}
/* Ticket 27: bei einer Wiederholung eine ruhige Zeile unter dem Vorhaben, Schrift des Textes, damit Nummer und Vorhaben führen. */
.trennblatt .wiederholung-von{margin:8px 0 0;font:600 18px/1.3 var(--fb);color:var(--muted)}
.druck-teil{padding:18px 0 4px;border-top:1px solid var(--line)}
.trennblatt + .druck-teil{border-top:0}
.druck-teil h3{font:700 20px/1.3 var(--fd);margin:0 0 4px}
.druck-teil h3 + .apaar{border-top:0}
.druck-teil > .kv{margin-top:8px}
.druck-leer{margin:0}
@media (max-width:600px){
  .druck-antrag{padding:22px 18px 24px}
  .trennblatt .dnr{font-size:44px}
  .verwaltung .trennblatt h2{font-size:24px}
}
@media print{
  body.verwaltung:has(:is(.druck-antrag,.druck-leer)){background:#fff}
  .verwaltung:has(:is(.druck-antrag,.druck-leer)) .topbar{display:none}
  .vinhalt:has(> :is(.druck-antrag,.druck-leer)){max-width:none;padding:0}
  .druck-antrag{border:0;border-top:6px solid var(--petrol);border-radius:0;padding:14px 0 0;margin:0}
  .druck-antrag + .druck-antrag{break-before:page;margin-top:0}
  .trennblatt .dnr{font-size:56px}
  .druck-antrag :is(.asec,.tl .ev,.files .f,table.kosten tr,.kv > div){break-inside:avoid}
  .druck-antrag :is(.druck-teil h3,.asec h5){break-after:avoid}
  .druck-antrag a{color:inherit;text-decoration:none}
}
/* Auf Papier (A4 ist rund 700 px breit) stehen die Paare nebeneinander wie auf der breiten Detailseite; schmaler untereinander. */
@media print and (min-width:600px){
  .druck-antrag .apaar{grid-template-columns:1fr 1fr}
  .druck-antrag .apaar .asec + .asec{border-top:0}
}
/* Geteilte Seite „Mitglied werden“ und „Spenden“ (Segment 3 Ticket 04) nach Prototyp 07-mitglied-v4 Variante B: zwei Flächen statt
   Kästen, links Papier (lesen, Betrag wählen; bleibt beim Scrollen stehen), rechts Weiß (ausfüllen, = Grund des FundraisingBox-
   Formulars). Alles linksbündig; der Rahmen um das Formular wird um die 16 px Innenabstand von FundraisingBox nach außen gezogen,
   damit die Kante der Formularfelder unsere Textkante ist. Eine Petrol-Linie unter dem Tabellenkopf. Unser CSS wirkt nie im Formular
   (fremde Adresse im Rahmen); es legt nur die Flächen darum fest. Werte aus dem Prototyp (cqi dort = vw hier, @container = @media).
   Offen im Prototyp, nach frontend-design: sichtbarer Tastaturfokus auf Links; Spendenkonto in der Zeilenform der Tabelle. */
.geteilt{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;background:var(--paper);--rule:#dcd8cc}
.geteilt p{margin:0}
.geteilt a:focus-visible{outline:3px solid rgba(52,115,107,.45);outline-offset:3px}
.geteilt .ctx{background:var(--paper)}
.geteilt .ctx .col{position:sticky;top:60px;max-width:540px;margin:0 0 0 auto;padding:44px 48px 48px 20px}
.geteilt .ctx h1{font-size:clamp(34px,4.4vw,46px);color:var(--ink)}
.geteilt .ctx .lede{font-size:19px;line-height:1.55;color:var(--muted);margin-top:14px;max-width:34em}
.geteilt .ctx h2{font:700 19px/1.3 var(--fd);margin-top:34px;color:var(--ink)}
.geteilt .ctx .fussnote{font-size:15px;color:var(--muted);margin-top:12px;max-width:34em}
.geteilt .bt{width:100%;border-collapse:collapse;margin-top:12px;font:16px/1.3 var(--fb);font-variant-numeric:tabular-nums lining-nums}
.geteilt .bt th{font:600 15px/1.25 var(--fb);color:var(--muted);text-align:right;vertical-align:bottom;padding:0 0 9px 8px;border-bottom:2px solid var(--petrol)}
.geteilt .bt th:first-child{text-align:left;padding-left:0}
.geteilt .bt td{padding:8px 0;border-bottom:1px solid var(--rule);text-align:right;white-space:nowrap}
.geteilt .bt td:first-child{text-align:left;color:var(--ink)}
.geteilt .bt td+td{font-weight:600;font-size:17px;width:17%}
.geteilt .bt tr:last-child td{border-bottom:0}
.geteilt .konto{margin:12px 0 0;font-variant-numeric:tabular-nums lining-nums}
.geteilt .konto div{display:flex;gap:16px;padding:8px 0;border-bottom:1px solid var(--rule)}
.geteilt .konto div:last-child{border-bottom:0}
.geteilt .konto dt{flex:0 0 8.5em;color:var(--muted);font-size:16px}
.geteilt .konto dd{margin:0;font-weight:600;font-size:17px;color:var(--ink)}
.geteilt .sheet{background:#fff;border-left:1px solid var(--rule);padding:26px 0 56px}
.geteilt .sheet .col{max-width:580px;margin:0;padding:0 20px 0 44px}
.geteilt #fbx{margin:0 -16px;min-height:600px}
@media (max-width:900px){
 .geteilt{display:block}
 .geteilt .ctx .col{position:static;max-width:640px;margin:0 auto;padding:32px 20px 28px}
 .geteilt .sheet{border-left:0;border-top:1px solid var(--rule);padding-top:18px}
 .geteilt .sheet .col{max-width:640px;margin:0 auto;padding:0 20px}
}
@media (max-width:600px){.geteilt .bt td+td{font-size:16px}.geteilt .bt th{font-size:14px}.geteilt .konto dt{flex-basis:7em}.geteilt .konto dd{font-size:16px}}
/* Impressum und Datenschutz (Segment 3 Ticket 05). Kein Prototyp; gestaltet nach frontend-design im Website-Rahmen: eine linksbündige
   Lesespalte mit höchstens 40em (rund 70 Zeichen je Zeile), Überschriften in Bricolage, Text in Source Sans 3. Das Impressum steht in
   der Zeilenform des Spendenkontos (Begriff links, Angabe rechts, feine Linie dazwischen; auf dem Handy untereinander). Die
   Datenschutzerklärung behält die Gliederung der Quelle (I–III, nummerierte Abschnitte); die Teile tragen als einziges Merkmal die
   Petrol-Linie, darüber drei Sprungziele. Lange Wörter trennen (lang="de"), Adressen brechen notfalls um. */
.recht{--rule:#dcd8cc;max-width:calc(40em + 40px);margin-left:max(0px,calc((100% - 1080px) / 2));overflow-wrap:break-word;hyphens:auto}
.recht p,.recht ul{margin:0 0 14px;max-width:40em}
.recht ul{padding-left:22px}
.recht li{margin-bottom:6px}
.recht li::marker{color:var(--petrol)}
.recht p a{white-space:nowrap}
.recht a:focus-visible{outline:3px solid rgba(52,115,107,.45);outline-offset:3px}
.recht h1{margin-bottom:22px}
.recht .lead{margin:-8px 0 26px}
.recht h2{font-size:clamp(23px,2.6vw,28px);margin:36px 0 16px}
.recht h3{font-size:19px;margin:30px 0 10px}
.recht h4{font:600 17px/1.3 var(--fd);margin:22px 0 8px}
.recht [id]{scroll-margin-top:80px}
.recht section > h2{padding-top:18px;border-top:2px solid var(--petrol);margin-top:48px}
.recht .teile ul{list-style:none;padding:0;margin:0 0 8px}
.recht .teile li{margin:0;border-bottom:1px solid var(--rule)}
.recht .teile li:last-child{border-bottom:0}
.recht .teile a{display:block;padding:9px 0;font:600 17px/1.35 var(--fd);text-decoration:none}
.recht .teile a:hover{text-decoration:underline}
.recht .stand{margin-top:32px;color:var(--muted);font-size:16px}
.recht .angaben{margin:0 0 8px;font-variant-numeric:tabular-nums lining-nums}
.recht .angaben div{display:grid;grid-template-columns:11em minmax(0,1fr);gap:16px;padding:11px 0;border-bottom:1px solid var(--rule)}
.recht .angaben div:last-child{border-bottom:0}
.recht .angaben dt{color:var(--muted);font-size:16px;line-height:1.55;padding-top:1px}
.recht .angaben dd{margin:0}
@media (max-width:600px){
 .recht .angaben div{grid-template-columns:1fr;gap:2px}
 .recht h3{font-size:18px}
}