:root{
  --primary:#14436D; --primary-dark:#07456B; --accent:#46BCC3; --blue:#0090D4;
  --ink:#171717; --muted:#5b6b78; --muted-2:#27486A; --rule:#dfe6ec; --bg:#F7F7F7; --surface:#FFFFFF;
  --grad:linear-gradient(135deg,#46BCC3 0%,#0090D4 100%);
  --sans:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-lg:20px; --r-md:10px; --r-sm:8px;
  --shadow:0 10px 30px rgba(20,67,109,.08), 0 1px 2px rgba(20,67,109,.06);
}
*{box-sizing:border-box}
html{color-scheme:light;-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0;background:var(--bg)}
body{
  font-family:var(--sans); color:var(--ink); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; min-height:100vh;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
/* Hintergrund-Atmosphaere */
.blob{position:fixed; z-index:0; pointer-events:none; border-radius:50%; filter:blur(70px); opacity:.35}
.blob.a{width:560px;height:560px; right:-180px; top:-200px; background:var(--grad)}
.blob.b{width:380px;height:380px; left:-160px; bottom:-160px; background:var(--accent); opacity:.18}

/* Topbar */
.top{position:sticky; top:0; z-index:5; background:rgba(247,247,247,.85); backdrop-filter:blur(8px)}
.top .in{max-width:860px; margin:0 auto; padding:16px 20px 10px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.top .logo{height:26px; width:auto; display:block}
.top .meta{font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); text-align:right; white-space:nowrap}
.top .meta small{display:block; font-weight:500; color:var(--muted); letter-spacing:.06em; margin-top:2px}
.prog{height:4px; background:#e2e9ee; position:relative}
.prog>i{position:absolute; left:0; top:0; bottom:0; width:0; background:var(--grad); transition:width .35s ease}

/* Bühne */
.stage{position:relative; z-index:1; max-width:860px; margin:0 auto; padding:28px 20px 60px}
.card{
  background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow);
  padding:36px 40px; animation:rise .28s ease both;
}
@keyframes rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@media (max-width:640px){ .card{padding:24px 20px; border-radius:16px} .stage{padding:16px 12px 40px} .top .meta small{display:none} }

h1{font-size:30px; line-height:1.12; font-weight:800; color:var(--primary); margin:0 0 8px; letter-spacing:-.01em}
h2{font-size:22px; line-height:1.25; font-weight:800; color:var(--primary); margin:0 0 6px; letter-spacing:-.005em}
h3{font-size:14px; font-weight:800; color:var(--primary); margin:0 0 8px}
p{margin:0 0 12px}
.lead{font-size:17px; color:var(--muted); font-weight:500; margin:0 0 24px}
.kicker{font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--primary); padding:4px 8px; border-radius:6px; display:inline-block}
.kicker.soft{background:rgba(70,188,195,.16); color:var(--primary)}
.mono{font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em}

/* Startseite */
.factbox{background:var(--bg); border-left:3px solid var(--accent); border-radius:0 var(--r-md) var(--r-md) 0; padding:18px 22px; margin:0 0 20px}
.factbox dl{margin:0; display:grid; grid-template-columns:150px 1fr; row-gap:10px; column-gap:16px}
.factbox dt{font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--primary); padding-top:3px}
.factbox dd{margin:0}
@media (max-width:560px){ .factbox dl{grid-template-columns:1fr; row-gap:4px} .factbox dd{margin-bottom:8px} }
.twocol{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:22px}
@media (max-width:640px){ .twocol{grid-template-columns:1fr} }
.note{border:1px solid var(--rule); border-radius:var(--r-md); padding:16px 18px}
.note ol,.note ul{margin:0; padding-left:18px}
.note ul.plain{list-style:none; padding-left:0}
.note li{margin-bottom:6px}
.hints{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:26px}
@media (max-width:640px){ .hints{grid-template-columns:1fr} }
.hint{background:var(--bg); border-radius:var(--r-md); padding:14px 16px; font-size:13.5px; color:var(--muted-2)}
.hint .ic{width:22px;height:22px; color:var(--blue); margin-bottom:8px; display:block}
.hint b{display:block; color:var(--primary); font-weight:700; margin-bottom:2px}

/* Frage */
.blockbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px}
.blockbar .bt{font-weight:700; color:var(--primary)}
.blockbar .pos{margin-left:auto; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.bintro{background:var(--bg); border-left:3px solid var(--accent); padding:12px 16px; border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:13.5px; color:var(--muted-2); margin-bottom:26px}
.qh{display:flex; gap:14px; align-items:flex-start; margin-bottom:22px}
.qid{font-family:var(--mono); font-size:13px; font-weight:700; color:var(--blue); padding-top:5px; min-width:38px; letter-spacing:.04em}
.qt{font-size:20px; line-height:1.3; font-weight:700; color:var(--ink)}
.qs{display:block; font-size:14.5px; line-height:1.5; font-weight:400; color:var(--muted); margin-top:8px}
.qbody{margin-left:52px}
@media (max-width:640px){ .qbody{margin-left:0} .qt{font-size:18px} }

/* Auswahl */
.opts{display:flex; flex-wrap:wrap; gap:10px}
.opts.col{flex-direction:column}
.opt{
  display:inline-flex; align-items:center; gap:12px; text-align:left;
  padding:12px 16px; border:1.5px solid var(--rule); background:var(--surface); border-radius:var(--r-md);
  font:inherit; font-size:15px; color:var(--ink); cursor:pointer; transition:border-color .15s, background .15s, box-shadow .15s;
}
.opt:hover{border-color:var(--accent)}
.opt:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.opt .dot{width:20px;height:20px; flex:none; border-radius:50%; border:2px solid #9fb0bd; position:relative; transition:all .15s}
.opt.on{border-color:var(--primary); background:rgba(20,67,109,.04); box-shadow:0 0 0 1px var(--primary) inset}
.opt.on .dot{border-color:var(--primary); background:var(--primary)}
.opt.on .dot::after{content:""; position:absolute; inset:5px; border-radius:50%; background:#fff}
.opt .k{font-family:var(--mono); font-size:12px; font-weight:700; color:var(--blue); letter-spacing:.04em; min-width:26px}
.other{margin-top:14px; padding:16px; border:1.5px dashed var(--rule); border-radius:var(--r-md)}
.other .lab{font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--primary); margin-bottom:8px}

/* Tabellen / Matrizen */
.mtx{width:100%; border-collapse:collapse; font-size:14.5px}
.mtx th{font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--primary); text-align:left; vertical-align:bottom; padding:0 8px 10px; border-bottom:2px solid var(--primary)}
.mtx th.c{text-align:center}
.mtx td{padding:12px 8px; border-bottom:1px solid var(--rule); vertical-align:middle}
.mtx td.it{font-weight:500}
.mtx td.it .k{font-family:var(--mono); font-size:12px; font-weight:700; color:var(--blue); margin-right:6px}
.mtx td.c{text-align:center; white-space:nowrap}
.mtx tr.dim td{opacity:.45}
.sc{display:inline-flex; gap:6px}
.sc button{
  width:36px; height:36px; border:1.5px solid #c6d2db; border-radius:8px; background:var(--surface);
  font-family:var(--mono); font-size:13px; font-weight:700; color:var(--muted); cursor:pointer; transition:all .12s;
}
.sc button:hover{border-color:var(--accent); color:var(--primary)}
.sc button.on{background:var(--primary); border-color:var(--primary); color:#fff}
.sc button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.cbx{width:26px;height:26px; border:1.5px solid #9fb0bd; border-radius:7px; background:var(--surface); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; color:#fff; transition:all .12s; padding:0}
.cbx:hover{border-color:var(--accent)}
.cbx.on{background:var(--primary); border-color:var(--primary)}
.cbx.on.b{background:var(--blue); border-color:var(--blue)}
.cbx svg{width:16px;height:16px}
.tkey{font-size:13px; color:var(--muted); margin-top:12px}
.tkey b{color:var(--primary)}
.count{display:flex; gap:18px; margin-top:12px; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.count .ok{color:var(--primary)}
.count b{font-weight:700}
.tablewrap{overflow-x:auto; margin:0 -8px}
@media (max-width:640px){
  .mtx.stack thead{display:none}
  .mtx.stack, .mtx.stack tbody, .mtx.stack tr, .mtx.stack td{display:block; width:100%}
  .mtx.stack tr{padding:0 0 12px; border-bottom:1px solid var(--rule)}
  .mtx.stack td{border-bottom:0}
  .mtx.stack td.it{padding:14px 0 6px}
  .mtx.stack td.c{text-align:left; white-space:normal; padding:6px 0}
  .mtx.stack td.c::before{content:attr(data-col); display:block; font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--primary); margin-bottom:6px}
  .sc{flex-wrap:wrap}
  .sc button{width:38px; height:38px}
  .tablewrap{margin:0}
}

/* Sprachfeld */
.voice{border:1.5px solid var(--rule); border-radius:var(--r-md); background:var(--bg); overflow:hidden}
.voice.rec{border-color:var(--accent); box-shadow:0 0 0 3px rgba(70,188,195,.18)}
.voice .txt{
  width:100%; min-height:96px; padding:14px 16px; border:0; background:transparent; resize:none; outline:none;
  font:inherit; font-size:15.5px; line-height:1.55; color:var(--ink); display:block;
  -webkit-user-select:none; user-select:none; cursor:default;
}
.voice .txt::placeholder{color:#8a99a5}
.voice .txt.typing{cursor:text; -webkit-user-select:text; user-select:text}
.voice .bar{display:flex; align-items:center; gap:10px; padding:10px 12px; border-top:1px solid var(--rule); background:var(--surface); flex-wrap:wrap}
.voice .stat{font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); flex:1; min-width:120px}
.voice .stat.live{color:var(--blue)}
.voice .stat.err{color:#b23a3a; text-transform:none; letter-spacing:0; font-family:var(--sans); font-weight:500; font-size:13px}
.pulse{display:inline-block; width:8px;height:8px; border-radius:50%; background:var(--accent); margin-right:6px; vertical-align:middle; animation:pulse 1s infinite}
@keyframes pulse{0%,100%{transform:scale(1); opacity:1} 50%{transform:scale(1.5); opacity:.5}}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:999px; border:1.5px solid transparent;
  font:inherit; font-size:14.5px; font-weight:600; cursor:pointer; transition:all .15s; text-decoration:none; white-space:nowrap;
}
.btn svg{width:18px;height:18px}
.btn.pri{background:var(--primary); color:#fff}
.btn.pri:hover{background:var(--primary-dark)}
.btn.pri:disabled{background:#c5d0d9; cursor:not-allowed}
.btn.acc{background:var(--accent); color:#fff}
.btn.acc:hover{filter:brightness(.95)}
.btn.ghost{background:transparent; color:var(--primary); border-color:var(--rule)}
.btn.ghost:hover{border-color:var(--primary)}
.btn.ghost:disabled{color:#a4b1bb; cursor:not-allowed; border-color:var(--rule)}
.btn.sm{padding:8px 13px; font-size:13px}
.btn.sm svg{width:16px;height:16px}
.btn.mic{background:var(--primary); color:#fff; padding:9px 14px}
.btn.mic.rec{background:#b23a3a}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.nav{display:flex; align-items:center; gap:10px; margin-top:34px; padding-top:22px; border-top:1px solid var(--rule); flex-wrap:wrap}
.nav .spacer{flex:1}
.nav .why{width:100%; font-size:13px; color:var(--muted)}
.skipnote{font-size:13px; color:var(--muted); margin-top:16px}

/* Abschluss */
.done{text-align:center}
.done .gifwrap{margin:22px auto 8px; width:288px; max-width:100%; aspect-ratio:6/5; border-radius:16px; overflow:hidden; background:#0b1e33; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow)}
.done .gifwrap img{width:100%; height:100%; image-rendering:pixelated; image-rendering:crisp-edges; display:block}
.done .cap{font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:22px}
.status{display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:999px; background:var(--bg); font-size:13.5px; color:var(--muted-2); margin:6px 0 20px}
.status.ok{background:rgba(70,188,195,.16); color:var(--primary)}
.status.warn{background:#fff4e0; color:#8a5a00}
.status svg{width:18px;height:18px; flex:none}
.actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}

.sig{font-size:13px; color:var(--muted); border-top:1px solid var(--rule); padding-top:14px; margin-top:26px}
.hidden{display:none!important}
.sr{position:absolute; left:-9999px}

@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }
@media print{ body>*{display:none!important} body::after{content:"Dieser Fragebogen wird ausschließlich online ausgefüllt."; display:block; padding:40px; font-family:var(--sans)} }


/* =====================================================================
   ERGÄNZUNG DER WEB-APP (Anmeldung, Sync-Hinweis).
   Nutzt ausschließlich die bestehenden Design-Tokens von oben.
   ===================================================================== */
.authgrid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0 0 6px}
@media (max-width:560px){ .authgrid{grid-template-columns:1fr} }
.authgrid .wide{grid-column:1 / -1}
.fld{display:block}
.fld > span{display:block; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--primary); margin-bottom:6px}
.fld input{
  width:100%; padding:12px 14px; border:1.5px solid var(--rule); border-radius:var(--r-md); background:var(--surface);
  font:inherit; font-size:15.5px; color:var(--ink); outline:none; transition:border-color .15s, box-shadow .15s;
  -webkit-user-select:text; user-select:text;
}
.fld input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(70,188,195,.18)}
.fld input:disabled{background:var(--bg); color:var(--muted)}
.formerr{font-size:13.5px; color:#b23a3a; margin:2px 0 12px; min-height:19px}
.linkbtn{
  font:inherit; font-size:inherit; color:var(--primary); background:none; border:0; padding:0;
  text-decoration:underline; text-underline-offset:2px; cursor:pointer;
}
.linkbtn:hover{color:var(--blue)}
.linkbtn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.who{font-size:13px; color:var(--muted); border-top:1px solid var(--rule); padding-top:14px; margin-top:26px}
.who strong{color:var(--muted-2); font-weight:600}
.nav .why.warn{color:#8a5a00}