/* Unterseiten FAQ und Hilfe (audhive.io) – gleiche Farben und Kopf/Fuss wie index.html, Sprache über html[data-lang] */
:root {
  --bg:#09111E; --bg2:#0F1E33; --bg3:#152840;
  --bl:rgba(143,172,200,0.11);
  --blue:#1B8FE0; --teal:#00C896; --amber:#F0A832; --purple:#9B7BE8;
  --text:#EEF3FA; --t2:#8EA6C0; --t3:#4A6480;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; scroll-padding-top:80px; }
body { background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,'Helvetica Neue',sans-serif; line-height:1.6; overflow-x:hidden; }
html[data-lang="en"] [data-lang="de"], html[data-lang="de"] [data-lang="en"] { display:none !important; }
a { color:var(--blue); }
code { font-family:'Cascadia Code','Fira Mono',Consolas,monospace; font-size:.86em; background:rgba(27,143,224,.1); border:1px solid rgba(27,143,224,.18); border-radius:5px; padding:1px 6px; color:#BFE0FF; overflow-wrap:anywhere; }
#scroll-progress { position:fixed; top:0; left:0; height:2px; width:0; background:linear-gradient(90deg,var(--blue),var(--teal)); z-index:10001; pointer-events:none; }
/* Kopf: css/nav.css (gemeinsam mit allen Seiten) */
.nav-logo { display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--text); font-size:1.22rem; font-weight:800; letter-spacing:-.03em; }
.logo-mark { width:30px; height:30px; flex-shrink:0; display:block; object-fit:contain; }
.nav-links { display:flex; gap:1.8rem; list-style:none; }
.nav-links a { color:var(--t2); text-decoration:none; font-size:.88rem; font-weight:500; }
.nav-links a:hover, .nav-links a[aria-current] { color:var(--text); }
.nav-right { display:flex; align-items:center; gap:12px; }
.lang-toggle { display:flex; align-items:center; background:rgba(255,255,255,.05); border:1px solid var(--bl); border-radius:8px; padding:3px; gap:2px; }
.lang-btn { background:transparent; border:none; cursor:pointer; color:var(--t3); font-size:.72rem; font-weight:700; padding:4px 10px; border-radius:6px; font-family:inherit; letter-spacing:.04em; }
.lang-btn.active { background:var(--blue); color:#fff; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; border:none; cursor:pointer; font-family:inherit; font-weight:600; border-radius:9px; transition:opacity .18s,transform .18s; }
.btn:hover { opacity:.88; transform:translateY(-1px); }
.btn-blue { background:var(--blue); color:#fff; padding:10px 20px; font-size:.88rem; }
.btn-ghost { background:transparent; color:var(--text); border:1px solid rgba(143,172,200,.2); padding:10px 20px; font-size:.88rem; }
.btn-sm { padding:7px 14px; font-size:.8rem; border-radius:7px; }
@media(max-width:960px) { .nav-links { display:none; } }
@media(max-width:480px) { .nav-right .btn-ghost { display:none; } }
/* Seitenkopf */
.wrap { max-width:1160px; margin:0 auto; padding:0 clamp(1rem,5vw,3rem); }
.page-hero { padding:72px 0 44px; background:linear-gradient(180deg,var(--bg3) 0%,var(--bg) 100%); border-bottom:1px solid var(--bl); }
.eyebrow { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--blue); margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.eyebrow::before { content:''; display:block; width:18px; height:2px; background:var(--blue); border-radius:2px; }
.page-hero h1 { font-size:clamp(1.9rem,4.5vw,2.8rem); font-weight:800; letter-spacing:-.03em; line-height:1.1; margin-bottom:14px; text-wrap:balance; }
.page-hero p { font-size:1rem; color:var(--t2); max-width:68ch; }
.hero-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
/* Inhalt mit Inhaltsverzeichnis */
.layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:48px; padding:48px 0 96px; align-items:start; }
.toc { position:sticky; top:86px; font-size:.84rem; max-height:calc(100vh - 110px); overflow:auto; }
.toc p { font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--t3); margin-bottom:10px; }
.toc ol { list-style:none; display:flex; flex-direction:column; gap:2px; border-left:1px solid var(--bl); }
.toc a { display:block; color:var(--t2); text-decoration:none; padding:5px 0 5px 14px; margin-left:-1px; border-left:2px solid transparent; line-height:1.4; }
.toc a:hover { color:var(--text); border-left-color:var(--blue); }
.toc ol ol { border-left:none; margin-left:12px; }
.toc ol ol a { font-size:.8rem; color:var(--t3); padding-top:3px; padding-bottom:3px; }
@media(max-width:960px) { .layout { grid-template-columns:1fr; gap:28px; padding-top:32px; } .toc { position:static; max-height:none; background:var(--bg2); border:1px solid var(--bl); border-radius:14px; padding:18px 18px 12px; } }
.content { min-width:0; }
.content section { margin-bottom:56px; }
.content h2 { font-size:clamp(1.45rem,2.6vw,1.8rem); font-weight:800; letter-spacing:-.025em; line-height:1.2; margin-bottom:12px; text-wrap:balance; }
.content h3 { font-size:1.06rem; font-weight:700; margin:28px 0 8px; letter-spacing:-.01em; }
.content p, .content li { color:var(--t2); font-size:.93rem; line-height:1.72; }
.content p { margin-bottom:12px; }
.content strong, .content b { color:var(--text); }
.content ul.dash, .content ol.num { margin:0 0 14px 0; padding-left:1.3em; display:flex; flex-direction:column; gap:6px; }
.lead { font-size:1rem !important; }
.note { background:rgba(27,143,224,.07); border:1px solid rgba(27,143,224,.18); border-left:3px solid var(--blue); border-radius:0 10px 10px 0; padding:13px 18px; margin:14px 0 18px; font-size:.88rem; color:var(--t2); }
.note.warn { background:rgba(240,168,50,.07); border-color:rgba(240,168,50,.25); border-left-color:var(--amber); }
.note p:last-child { margin-bottom:0; }
.cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:16px 0 20px; }
.cards.c3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.card { background:var(--bg2); border:1px solid var(--bl); border-radius:14px; padding:20px 22px; }
.card h3 { margin:0 0 6px; font-size:.98rem; }
.card p { font-size:.86rem; margin-bottom:8px; }
.card ul { padding-left:1.2em; display:flex; flex-direction:column; gap:4px; }
.card li { font-size:.85rem; }
@media(max-width:760px) { .cards, .cards.c3 { grid-template-columns:1fr; } }
/* Tabelle Voraussetzungen */
.req { width:100%; border-collapse:collapse; margin:10px 0 18px; font-size:.88rem; }
.req th { text-align:left; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--t3); padding:9px 12px; border-bottom:1px solid var(--bl); }
.req td { padding:11px 12px; border-bottom:1px solid rgba(143,172,200,.07); vertical-align:top; color:var(--t2); line-height:1.6; }
.req td:first-child { color:var(--text); font-weight:600; width:26%; }
.req-wrap { background:var(--bg2); border:1px solid var(--bl); border-radius:14px; padding:6px 8px; overflow-x:auto; }
@media(max-width:600px) { .req, .req tbody, .req tr, .req td { display:block; width:100% !important; } .req thead { display:none; } .req tr { padding:8px 4px; border-bottom:1px solid var(--bl); } .req td { border:none; padding:3px 8px; } }
/* Schritte */
.steps { list-style:none; counter-reset:st; display:flex; flex-direction:column; gap:26px; margin:18px 0 10px; }
.step { position:relative; padding-left:52px; }
.step::before { counter-increment:st; content:counter(st); position:absolute; left:0; top:0; width:34px; height:34px; border-radius:50%; background:rgba(27,143,224,.14); border:1px solid rgba(27,143,224,.35); color:#9fd1ff; font-weight:800; font-size:.86rem; display:flex; align-items:center; justify-content:center; }
.steps.zero { counter-reset:st -1; }
.step.cont::before { counter-increment:none; content:counter(st); opacity:.6; }   /* gehört zum vorherigen Schritt (z. B. „Ihre Lizenz“ zu Schritt 1) */
.step h3 { margin:4px 0 6px; }
@media(max-width:600px) { .step { padding-left:0; } .step::before { position:static; margin-bottom:8px; } }
/* Screenshots */
.shot { margin:14px 0 6px; background:var(--bg2); border:1px solid rgba(27,143,224,.18); border-radius:12px; overflow:hidden; cursor:zoom-in; box-shadow:0 18px 50px rgba(0,0,0,.35); }
.shot img { display:block; width:100%; height:auto; }
.shot figcaption { font-size:.76rem; color:var(--t3); padding:8px 14px; border-top:1px solid var(--bl); }
.shot.narrow { max-width:640px; }
.shots2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
@media(max-width:760px) { .shots2 { grid-template-columns:1fr; } }
dialog.lightbox { border:none; padding:0; background:transparent; max-width:96vw; max-height:94vh; margin:auto; }
dialog.lightbox::backdrop { background:rgba(4,8,15,.86); }
dialog.lightbox img { display:block; max-width:96vw; max-height:86vh; width:auto; height:auto; border-radius:10px; }
dialog.lightbox p { color:var(--t2); font-size:.82rem; text-align:center; padding:8px; }
.lb-close { position:fixed; top:14px; right:16px; width:40px; height:40px; border-radius:50%; border:1px solid var(--bl); background:var(--bg2); color:var(--text); font-size:1.1rem; cursor:pointer; }
/* FAQ */
.faq-group { margin-bottom:40px; }
.faq-group h2 { margin-bottom:14px; }
details.qa { background:var(--bg2); border:1px solid var(--bl); border-radius:12px; margin-bottom:10px; }
details.qa[open] { border-color:rgba(27,143,224,.3); }
details.qa summary { cursor:pointer; list-style:none; padding:16px 48px 16px 20px; font-weight:650; font-size:.97rem; position:relative; color:var(--text); }
details.qa summary::-webkit-details-marker { display:none; }
details.qa summary::after { content:'+'; position:absolute; right:20px; top:50%; transform:translateY(-50%); color:var(--blue); font-size:1.3rem; font-weight:400; }
details.qa[open] summary::after { content:'−'; }
details.qa .a { padding:0 20px 16px; }
details.qa .a p:last-child, details.qa .a ul:last-child { margin-bottom:0; }
.anchor { color:var(--t3); text-decoration:none; font-size:.8rem; margin-left:6px; opacity:0; }
details.qa summary:hover .anchor { opacity:1; }
/* Fuss */
footer { border-top:1px solid var(--bl); padding:56px 0 36px; }
.foot-grid { display:grid; grid-template-columns:2.2fr 1fr 1fr 1fr; gap:48px; margin-bottom:44px; }
.foot-brand h3 { font-size:1.1rem; font-weight:800; margin-bottom:9px; display:flex; align-items:center; gap:8px; }
.foot-brand p { font-size:.82rem; color:var(--t2); line-height:1.65; max-width:30ch; }
.foot-col h4 { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--t3); margin-bottom:14px; }
.foot-col ul { list-style:none; display:flex; flex-direction:column; gap:9px; }
.foot-col a { font-size:.84rem; color:var(--t2); text-decoration:none; }
.foot-col a:hover { color:var(--text); }
.foot-bottom { border-top:1px solid var(--bl); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.foot-bottom p, .foot-bottom a { font-size:.78rem; color:var(--t3); text-decoration:none; }
.foot-legal { display:flex; gap:16px; flex-wrap:wrap; }
@media(max-width:960px) { .foot-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:600px) { .foot-grid { grid-template-columns:1fr; gap:28px; } }
[hidden] { display:none !important; }