.kopf.hilfe-kopf{border-bottom:4px solid #be183b}
.kopf.hilfe-kopf.mit-teaser{border-bottom:0}
/* Teaser der Startseite: die Suche auf Vereinsblau über die volle Breite, rote Linie darunter (wie die Landingpage) */
.h-teaser{background:#162d62;border-bottom:4px solid #be183b}
.h-teaser .h-suche{max-width:1040px;margin:0 auto;padding:24px max(16px,env(safe-area-inset-right)) 32px max(16px,env(safe-area-inset-left));border-bottom:0;color:#ffffff}
.h-teaser h1{color:#ffffff}
.h-teaser .suchfeld{border-color:#ffffff;background:#ffffff}
.h-teaser .suchfeld:focus-within,.h-teaser a:focus-visible,.h-teaser .suchfeld button:focus-visible{outline-color:#ffffff}
.h-teaser .vorschlaege a{border-color:#d3dcee;background:transparent;color:#ffffff}
.h-teaser .vorschlaege a:hover{background:#0e1f47}
.h-teaser .ich-frage{color:#d3dcee}
.h-teaser .ich ul{background:#23407f}
.h-teaser .ich a{color:#ffffff}
.h-teaser .ich a:hover{background:#0e1f47}
.h-teaser .ich a[aria-current]{background:#ffffff;color:#162d62}
/* Kurzer roter Strich unter der Überschrift eines Abschnitts, wie auf der Landingpage */
.h-abschnitt>h2::after,.h-abschnitt>section>h2::after{content:"";display:block;width:32px;height:3px;margin-top:8px;background:#be183b}
/* Store-Knöpfe auf hellem Grund (erste-schritte.ts) */
.l-knoepfe-hell .l-laden{background:#162d62;color:#ffffff}
.l-knoepfe-hell a.l-laden:hover{background:#0e1f47}
.l-knoepfe-hell a.l-laden:focus-visible{outline-color:#162d62}
.l-knoepfe-hell .l-laden-text{flex-direction:row;flex-wrap:wrap;gap:0 0.3em}
/* In der Hilfe einzeilig in der Grundschrift der Hilfe (mindestens 16 px, Zeilenhöhe 1,3; hilfe-mobil-pruefung.ts) */
.l-knoepfe-hell .l-laden-klein,.l-knoepfe-hell .l-laden-gross{font-size:16px;line-height:24px}
.l-knoepfe-hell .l-laden-bald{background:transparent;color:#162d62;border-color:#d6dce7}
.kopf.hilfe-kopf .kopf-innen{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;max-width:1040px;margin:0 auto;padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left))}
.kopf.hilfe-kopf a.marke-verein{flex:0 1 auto;max-width:none;margin:0;padding:0}
.kopf.hilfe-kopf .marke-zeilen{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
.kopf.hilfe-kopf .marke-unter{color:#d3dcee;font-size:14px;line-height:20px;font-weight:400}
.kopf.hilfe-kopf nav{margin-left:auto}
.kopf.hilfe-kopf nav ul{display:flex;flex-wrap:wrap;gap:0 20px;margin:0;padding:0;list-style:none}
.kopf.hilfe-kopf nav li{margin:0}
.kopf.hilfe-kopf nav a{display:inline-flex;align-items:center;min-height:44px;max-width:none;margin:0;padding:0;font-size:16px;line-height:24px;font-weight:500;text-decoration:none}
.kopf.hilfe-kopf nav a:hover{text-decoration:underline}
main.hilfe,main.hilfe+.fuss{max-width:1040px}
main.hilfe{font-size:18px;line-height:28px}
.hilfe .blatt{background:#ffffff;border:1px solid #d6dce7;border-radius:12px;overflow:hidden;overflow:clip;overflow-wrap:anywhere}
.hilfe h1{margin:0;font-size:34px;line-height:42px}
.hilfe h2{margin:0 0 8px;font-size:26px;line-height:32px;font-weight:400}
.hilfe h3{margin:0;color:#162d62;font-size:21px;line-height:26px;font-weight:400}
.hilfe p{margin:0 0 12px}
.hilfe .leise{color:#46536c}
.hilfe .symbol{flex:none}
.nur-vorlesen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.nur-skript{display:none}
.skript .nur-skript{display:inline}
.h-suche{display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px 24px 24px;text-align:center;border-bottom:1px solid #e3e7ef}
.h-suche h1{font-size:36px;line-height:44px}
.suchfeld{display:flex;align-items:center;gap:12px;width:100%;max-width:620px;min-height:60px;padding:0 8px 0 16px;border:2px solid #162d62;border-radius:12px;background:#ffffff;color:#162d62}
.suchfeld:focus-within{outline:3px solid #162d62;outline-offset:2px}
.suchfeld input[type=search]{flex:1;min-width:0;min-height:48px;border:0;outline:0;background:transparent;color:#151d31;font:inherit;font-size:19px;text-overflow:ellipsis;appearance:none;-webkit-appearance:none}
.suchfeld input::placeholder{color:#5b6781;opacity:1}
.suchfeld button{flex:none;min-height:44px;padding:0 16px;border:0;border-radius:8px;background:#162d62;color:#ffffff;font:inherit;font-size:16px;font-weight:500;cursor:pointer}
.suchfeld button:hover{background:#0e1f47}
.suchfeld button:focus-visible,.knopf:focus-visible,.gross-zu:focus-visible{outline:3px solid #162d62;outline-offset:2px}
.vorschlaege,.ich ul{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none}
.vorschlaege li,.ich li{margin:0}
.vorschlaege a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid #d6dce7;border-radius:999px;background:#ffffff;font-size:16px;font-weight:500;text-decoration:none}
.vorschlaege a:hover{background:#e9eef7}
.ich{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px}
.ich-frage{color:#46536c;font-size:16px;font-weight:500}
.ich ul{gap:4px;padding:4px;border-radius:12px;background:#f2f4f8}
.ich a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:8px;color:#46536c;font-size:16px;font-weight:500;text-decoration:none}
.ich a:hover{background:#d6dce7}
.ich a[aria-current]{background:#162d62;color:#ffffff}
.ich.klein{justify-content:flex-start;margin:16px 0 0}
.h-abschnitt{padding:32px 24px;border-bottom:1px solid #e3e7ef}
.h-abschnitt.grau{background:#f6f7fa}
.h-abschnitt>p:last-child{margin-bottom:0}
.erste,.themen,.reiter{display:grid;gap:12px;margin:16px 0 0;padding:0;list-style:none}
.erste{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.erste li{display:flex;gap:12px;align-items:flex-start;margin:0;padding:16px;border:1px solid #d6dce7;border-radius:12px}
.treffer a:hover{background:#f2f4f8}
.erste-verweis{display:inline-flex;align-items:center;align-self:flex-start;min-height:44px;font-weight:500}
.erste .l-knoepfe{margin:8px 0 0}
/* „Wofür brauche ich ein Konto?“ über den ersten Schritten (konto.ts): klappt auf wie eine häufige Frage; zwei Spalten, auf dem Telefon untereinander */
.konto-frage{margin:16px 0 0;padding:0 16px;border-radius:12px;background:#e9eef7}
.frage.konto-frage summary{color:#162d62;font-weight:500}
.frage.konto-frage .antwort{padding:0 0 8px;color:#151d31}
.konto-frage h3{margin:0 0 4px;color:#151d31;font-family:inherit;font-size:18px;line-height:28px;font-weight:700}
.konto-frage ul{margin:0;padding:0 0 0 20px}
.konto-frage li{margin:0 0 4px}
.konto-spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px 24px;margin:0 0 12px}
.nr{display:flex;flex:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#162d62;color:#ffffff;font-size:20px;line-height:1}
.erste-text{display:flex;flex-direction:column;gap:4px}
.erste-titel{color:#162d62;font-family:Basic,Roboto,system-ui,sans-serif;font-size:21px;line-height:28px}
.erste-satz{color:#46536c;font-size:16px;line-height:24px}
.themen{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.thema{padding:16px;border:1px solid #d6dce7;border-radius:12px}
.thema h3{display:flex;align-items:center;gap:12px;margin:0 0 8px}
.thema-symbol{display:flex;flex:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#e9eef7;color:#162d62}
.thema ul,.reiter-karte ul,.treffer{margin:0;padding:0;list-style:none}
.thema li{margin:0;border-top:1px solid #e3e7ef}
.thema li a{display:flex;align-items:center;gap:8px;min-height:48px;padding:8px 0;color:#151d31;text-decoration:none}
.thema li a:hover .aufgabe,.thema li a:focus-visible .aufgabe{color:#162d62;text-decoration:underline}
.aufgabe{flex:1}
.thema li a>.symbol,.schloss,.treffer a>.symbol{color:#5b6781}
.schloss{display:inline-flex;align-items:center;vertical-align:-2px}
.reiter-karte .schloss{margin-left:4px}
.reiter{grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr))}
.reiter-karte{background:#ffffff;border:1px solid #d6dce7;border-radius:12px;overflow:hidden}
.reiter-karte h3{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border-bottom:1px solid #e3e7ef;font-family:inherit;font-size:16px;line-height:22px;font-weight:500}
.strich{width:28px;height:3px;margin-bottom:4px;border-radius:2px;background:#be183b}
.reiter-karte ul{padding:8px 12px 12px}
.reiter-karte li{margin:0;padding:7px 0;border-bottom:1px solid #f2f4f8;font-size:16px;line-height:22px}
.reiter-karte li:last-child{border-bottom:0}
.nur-fuer{color:#46536c}
.treffer{display:flex;flex-direction:column;gap:12px;margin:16px 0}
.treffer li{margin:0}
.treffer a{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid #d6dce7;border-radius:12px;text-decoration:none}
.treffer-text{display:flex;flex:1;flex-direction:column;min-width:0}
.treffer .marke{flex:none}
.treffer-titel{color:#151d31;font-weight:500}
.treffer-ort{color:#5b6781;font-size:16px;line-height:22px}
.zwei{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:32px}
.zwei h3{margin:20px 0 4px;color:#151d31;font-size:18px;line-height:28px;font-weight:700}
.hilfe summary{min-height:44px;padding:8px 0}
.hilfe details p{margin:0 0 12px}
/* Häufige Fragen: leicht in der Liste, deutlich im geöffneten Zustand */
.frage summary{display:flex;align-items:center;gap:12px;padding:12px 0;color:#151d31;font-weight:400;list-style:none}
.frage summary::-webkit-details-marker{display:none}
.frage summary>span{flex:1;min-width:0}
.frage summary>.symbol{color:#162d62;transition:transform 200ms cubic-bezier(.2,0,0,1)}
.frage summary:hover>span{color:#162d62}
.frage[open] summary{color:#162d62;font-weight:500}
.frage[open] summary>.symbol{transform:rotate(180deg)}
.frage .antwort{padding:0 32px 8px 0;color:#46536c}
.zwei h3+.frage{margin-top:4px}
@media (prefers-reduced-motion:reduce){.frage summary>.symbol{transition:none}}
.person{margin:0 0 4px}
.erreichbar{display:flex;align-items:center;gap:8px;color:#162d62}
.erreichbar a{display:inline-flex;align-items:center;min-height:44px}
.hilfe .stand{margin:0;padding:16px 24px;color:#46536c;font-size:14px;line-height:20px}
.marken{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.marke{display:inline-flex;align-items:center;gap:6px;margin:0;padding:6px 12px;border-radius:999px;background:#f2f4f8;color:#46536c;font-size:16px;line-height:22px;font-weight:500}
.marke>span{min-width:0}
.marke.ort,.marke.klein{background:#e9eef7;color:#162d62}
.marke.klein{padding:3px 10px;font-size:14px;line-height:18px}
.anleitung{--a-rand:24px;padding:24px var(--a-rand)}
.krumen{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;margin:0 0 8px;color:#5b6781;font-size:16px;line-height:24px}
.krumen a{display:inline-flex;align-items:center;min-width:44px;min-height:44px}
.krumen [aria-current]{min-width:0}
.anleitung h1{margin:0 0 12px}
.einleitung{max-width:720px;color:#46536c;font-size:19px;line-height:30px}
.ablauf{margin:24px 0}
.schritte{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.schritt{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:0;padding:16px;border:1px solid #e3e7ef;border-radius:12px;scroll-margin-top:16px}
.schritt-kopf{display:flex;gap:16px;align-items:flex-start}
.schritt-worte{min-width:0;padding-top:6px}
.schritt-text{margin:0;color:#151d31;font-size:19px;line-height:28px;font-weight:500}
.hilfe .schritt-detail{margin:4px 0 0;color:#46536c;font-size:17px;line-height:26px}
.bild{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0}
.geraet{position:relative;display:block;width:100%;max-width:260px;border:8px solid #151d31;border-radius:36px;overflow:hidden;background:#ffffff;line-height:0}
.geraet img{display:block;width:100%;height:auto}
.markierung{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.m-hof{fill:none;stroke:#fff;stroke-opacity:.9}
.m-rahmen{fill:none;stroke:#162d62}
.m-kreis{fill:#162d62;stroke:#fff}
.m-nr{fill:#fff;font-family:Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-weight:500}
.bild figcaption{color:#5b6781;font-size:14px;line-height:20px;text-align:center}
.knopf.zweit{background:#ffffff;color:#162d62;border:1px solid #162d62}
.hilfe .blaettern{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 0}
.hilfe .blaettern[hidden],.buehne[hidden]{display:none}
.blaettern .knopf{gap:4px;border:1px solid #162d62;font-family:inherit;cursor:pointer}
.blaettern .knopf:disabled{background:#e3e7ef;border-color:#e3e7ef;color:#8d97ab;cursor:default}
.wissen{display:flex;gap:12px;align-items:flex-start;margin:24px 0;padding:16px;border-radius:12px;background:#eaf2fb;color:#1f5c9e}
.wissen h2{margin:0 0 2px;color:#1f5c9e;font-family:inherit;font-size:17px;line-height:24px;font-weight:500}
.wissen p{margin:0;color:#46536c;font-size:17px;line-height:26px}
.wissen p+p{margin-top:8px}
.weiter{margin:0;padding-top:16px;border-top:1px solid #e3e7ef;color:#46536c}
.weiter a{display:inline-block;padding:8px 0}
.anleitung .stand{padding:16px 0 0}
@media (min-width:720px){
.anleitung{padding-top:32px;padding-bottom:32px}
.mit-bildern .schritt{grid-template-columns:minmax(0,1fr) 220px;align-items:start}
.mit-buehne .ablauf{display:grid;grid-template-columns:300px minmax(0,1fr);gap:32px;align-items:start}
.mit-buehne .buehne{position:sticky;top:16px}
}
.mit-buehne .schritt{grid-template-columns:minmax(0,1fr);cursor:pointer}
.mit-buehne .schritt .bild{display:none}
.mit-buehne .schritt[aria-current]{padding:15px;border:2px solid #162d62;background:#e9eef7}
.mit-buehne .schritt:not([aria-current]) .nr{background:#f2f4f8;color:#162d62}
.mit-buehne .schritt:focus-visible{outline:3px solid #162d62;outline-offset:2px}
.buehne{margin:0 0 16px}
.buehne .geraet{max-width:300px}
.buehne-leer{display:flex;align-items:center;justify-content:center;min-height:200px;padding:16px;border:1px dashed #d6dce7;border-radius:12px;color:#46536c;text-align:center}
dialog.gross{max-width:min(96vw,560px);max-height:96vh;max-height:96dvh;padding:16px;border:0;border-radius:12px;background:#ffffff;overflow:auto}
dialog.gross[open]{display:flex;flex-direction:column;align-items:center;gap:12px}
dialog.gross::backdrop{background:rgba(14,31,71,.48)}
dialog.gross .geraet{width:min(96vw - 32px,528px,(96vh - 104px)*var(--verhaeltnis,.46));width:min(96vw - 32px,528px,(96dvh - 104px)*var(--verhaeltnis,.46));max-width:none;margin:0;border-width:6px;border-radius:28px;cursor:zoom-out}
.gross-zu{display:flex;order:1;flex:none;align-self:stretch;align-items:center;justify-content:center;gap:4px;min-height:44px;padding:0 12px;border:1px solid #162d62;border-radius:12px;background:#ffffff;color:#162d62;font:inherit;font-size:16px;font-weight:500;cursor:pointer}
@media (max-width:480px){
.hilfe h1,.h-suche h1{font-size:28px;line-height:34px}
.h-suche{padding:24px 16px}
.h-teaser .h-suche{padding:20px max(16px,env(safe-area-inset-right)) 24px max(16px,env(safe-area-inset-left))}
.h-abschnitt{padding:24px 16px}
.anleitung{--a-rand:16px;padding-top:20px;padding-bottom:20px}
.hilfe .stand{padding-left:16px;padding-right:16px}
.suchfeld{padding-left:12px}
.suchfeld>.symbol{display:none}
.suchfeld button{padding:0 12px}
.h-suche .ich{width:100%}
.h-suche .ich ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
.h-suche .ich a{display:flex;justify-content:center;padding:0 8px;text-align:center}
.kopf.hilfe-kopf nav{margin-left:0}
.krumen [aria-current],.krumen .krumen-trenner:nth-last-child(2){display:none}
}
@media (max-width:719.98px),(max-height:500px){
.mit-buehne .ablauf{display:block}
.mit-buehne .buehne{display:none}
.mit-buehne .schritt[aria-current] .bild{display:flex}
.mit-buehne .blaettern{position:sticky;bottom:0;z-index:1;flex-wrap:nowrap;margin:16px calc(-1*var(--a-rand)) 0;padding:12px var(--a-rand) calc(12px + env(safe-area-inset-bottom));border-top:1px solid #d6dce7;background:#ffffff}
.mit-buehne .blaettern .knopf{flex:1 1 auto;width:auto;min-width:0;padding:0 12px}
.mit-buehne .blaettern .knopf.zweit{flex:0 0 auto;padding:0 16px}
.mit-buehne .blaettern .knopf span{overflow-wrap:normal;white-space:nowrap}
}
@media (max-width:359.98px){
.mit-buehne .blaettern .knopf .symbol{display:none}
}
@media (min-width:720px) and (max-height:500px){
.mit-buehne.mit-bildern .schritt[aria-current]:has(.bild){grid-template-columns:minmax(0,1fr) 220px}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media print{
main.hilfe{font-size:12pt;line-height:1.45}
.hilfe .blatt{border:0;border-radius:0}
.kopf.hilfe-kopf,.h-teaser,.krumen,.ich,.suchfeld,.vorschlaege,.blaettern,.buehne,.zurueck,.nur-skript,dialog.gross{display:none!important}
.anleitung{padding:0}
.schritt,.mit-buehne .schritt,.mit-buehne .schritt[aria-current]{display:grid;grid-template-columns:minmax(0,1fr) 42mm;padding:3mm 0;border:0;border-bottom:1px solid #999;border-radius:0;background:#fff;break-inside:avoid}
.mit-buehne .schritt .bild{display:flex}
.mit-buehne .ablauf{display:block}
.nr,.mit-buehne .schritt:not([aria-current]) .nr{background:#fff;color:#000;border:2px solid #000;print-color-adjust:exact;-webkit-print-color-adjust:exact}
.geraet{max-width:42mm;border-width:1.2mm;border-radius:5mm}
.m-rahmen{stroke:#000}
.m-kreis{fill:#000}
.markierung,.geraet img{print-color-adjust:exact;-webkit-print-color-adjust:exact}
.wissen{background:#fff;border:1px solid #000;color:#000;break-inside:avoid}
.wissen h2,.wissen p{color:#000}
.marke,.marke.ort{background:#fff;border:1px solid #999;color:#000}
.h-abschnitt,.h-suche{padding:4mm 0;break-inside:avoid-page}
.h-abschnitt.grau{background:#fff}
details{break-inside:avoid}
}