/* PREPRIME+ Hilfe (hilfe.preprimeplus.de) – eigenständig, ohne externe Schriften */
:root{--navy:#192a35;--ink:#192a35;--text:#33434f;--muted:#6b7a86;--line:#e3e8ec;--paper:#f6f7f9;--card:#fff;--accent:#2f6fed;--accent-soft:#edf3ff;--accent-line:#c8d8fb;--amber-soft:#fff8ee;--amber-line:#f1d3a8;--radius:16px;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--ink:#e8eef3;--text:#c3cfd8;--muted:#8d9ba6;--line:#26333d;--paper:#0e151b;--card:#141e26;--accent:#6a9bf8;--accent-soft:#15233a;--accent-line:#2c416a;--amber-soft:#2a2112;--amber-line:#5a4520;color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:130px}
body{margin:0;background:var(--paper);color:var(--text);font:16.5px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--accent)}
h1,h2,h3{color:var(--ink);line-height:1.2;letter-spacing:-.015em}
h1{font-size:clamp(28px,4.2vw,40px);margin:0 0 10px}
h2{font-size:24px;margin:0 0 14px}
.wrap{max-width:1120px;margin:0 auto;padding-inline:18px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;z-index:10;background:#fff;padding:8px 12px;border-radius:8px}
.eyebrow{margin:0 0 8px;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.lead{font-size:18px;color:var(--muted);margin:0 0 28px;max-width:720px}
code{font:600 .92em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--accent-soft);padding:1px 6px;border-radius:6px;overflow-wrap:anywhere}

/* Kopf */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--navy);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.06)}
.top>.wrap{display:flex;align-items:center;gap:18px;min-height:64px}
.logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;flex:none}
.logo img{width:130px;height:auto}.logo span{padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.12);font-size:13px;letter-spacing:.04em}
.search{position:relative;margin-left:auto;width:min(360px,100%)}
.search input{width:100%;min-height:42px;padding:0 14px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:15px}
.search input::placeholder{color:#a9b7c2}
.search input:focus{outline:2px solid var(--accent);background:rgba(255,255,255,.14)}
.results{position:absolute;right:0;left:0;top:48px;max-height:70vh;overflow:auto;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.results a{display:block;padding:12px 14px;text-decoration:none;color:inherit;border-top:1px solid var(--line)}.results a:first-child{border-top:0}
.results a:hover,.results a:focus{background:var(--accent-soft)}
.results b{display:block;color:var(--ink)}.results small{color:var(--muted)}.results p{margin:2px 0 0;font-size:14px;color:var(--muted)}
.results .none{padding:14px;color:var(--muted)}
.tabs{border-top:1px solid rgba(255,255,255,.08);overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}
.tabs .wrap{display:flex;gap:4px;white-space:nowrap}
.tabs a{padding:10px 12px;color:#c9d5de;text-decoration:none;font-size:14.5px;border-bottom:3px solid transparent}
.tabs a:hover{color:#fff}.tabs a[aria-current=page]{color:#fff;border-bottom-color:var(--accent)}

/* Inhalt */
.page{display:grid;grid-template-columns:230px minmax(0,1fr);gap:44px;padding-block:40px 64px}
.page:not(:has(.toc)){display:block}
.toc{position:sticky;top:130px;align-self:start;display:flex;flex-direction:column;gap:2px;font-size:14.5px}
.toc b{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.toc a{color:var(--text);text-decoration:none;padding:6px 10px;border-radius:8px}.toc a:hover{background:var(--accent-soft);color:var(--accent)}
.content{min-width:0;max-width:780px}
.content section{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;margin-bottom:20px}
.content ul{padding-left:1.2em}.content li{margin:6px 0}
.ui{display:inline-block;padding:0 8px;border-radius:7px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-weight:650;font-size:.93em;white-space:nowrap}
.ico{width:1.3em;height:1.3em;vertical-align:-.28em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--accent)}
.ico circle{fill:currentColor;stroke:none}
.steps{counter-reset:s;list-style:none;padding:0;margin:0 0 18px}
.steps li{counter-increment:s;position:relative;padding:4px 0 10px 46px;margin:0}
.steps li::before{content:counter(s);position:absolute;left:0;top:2px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;font-size:14px}
.callout{border-radius:12px;padding:14px 16px;margin:16px 0 0;border:1px solid var(--accent-line);background:var(--accent-soft)}
.callout b{display:block;color:var(--ink);margin-bottom:2px}.callout p{margin:0}
.callout.warn{border-color:var(--amber-line);background:var(--amber-soft)}
.video{margin:18px 0 6px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.video video{width:min(320px,100%);height:auto;border-radius:22px;background:#0b1319;box-shadow:0 18px 40px rgba(25,42,53,.18);border:8px solid #0b1319}
.video figcaption{font-size:14px;color:var(--muted);font-weight:600}

/* Startseite */
.hero-help{padding:18px 0 10px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin:10px 0 36px}
.card{display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);text-decoration:none;color:var(--muted);transition:transform .15s,border-color .15s}
.card:hover{transform:translateY(-2px);border-color:var(--accent-line)}
.card b{color:var(--ink);font-size:18px}.card .emoji{font-size:28px}
.popular{margin-bottom:34px}.popular ul{columns:2;gap:24px;padding-left:1.1em}.popular li{margin:6px 0;break-inside:avoid}
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.vcard{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink);font-weight:650;font-size:14.5px}
.vcard img{width:100%;height:auto;aspect-ratio:390/844;object-fit:cover;object-position:top;border-radius:16px;border:6px solid #0b1319;background:#fff}

footer{border-top:1px solid var(--line);padding-block:26px;font-size:14px;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;gap:10px 22px}footer nav{display:flex;gap:16px;margin-left:auto}footer a{color:var(--muted)}.site-version{font-size:12px;opacity:.75}

@media (max-width:860px){.page{grid-template-columns:1fr;gap:10px}.toc{position:static;flex-direction:row;flex-wrap:wrap;gap:6px}.toc b{width:100%}.toc a{border:1px solid var(--line);background:var(--card)}}
@media (max-width:620px){
  body{font-size:16px}.top>.wrap{flex-wrap:wrap;gap:10px;padding-block:10px}.search{width:100%;margin-left:0}
  .content section{padding:20px 18px}.popular ul{columns:1}footer nav{margin-left:0}
  html{scroll-padding-top:170px}
}
.content section.hero-help{background:none;border:0;padding:8px 0 4px}

/* Impressum und Datenschutz als Fenster (assets/legal.js) */
.legal-dialog{width:min(760px,calc(100% - 32px));max-height:min(86vh,900px);padding:0;border:1px solid var(--line);border-radius:18px;background:var(--card);color:var(--text);box-shadow:0 30px 90px rgba(0,0,0,.35)}
.legal-dialog::backdrop{background:rgba(10,18,26,.6);backdrop-filter:blur(3px)}
.legal-dialog .legal-body{padding:34px 36px 30px;max-height:min(86vh,900px);overflow:auto}
.legal-dialog h1{font-size:28px;color:var(--ink);margin:0 0 18px;padding-right:40px}.legal-dialog h2{font-size:18px;color:var(--ink);margin:24px 0 6px}
.legal-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font-size:22px;line-height:1;cursor:pointer}
@media (max-width:700px){.legal-dialog .legal-body{padding:26px 20px 22px}.legal-dialog h1{font-size:24px}}