/* padan+ — Gestaltung des Selbsttests.
   ERZEUGT von selbsttest-bauen.mjs aus padanplus_Selbsttest_v7.html.
   Nicht von Hand aendern — beim naechsten Bauen ist es weg.
   Aendern in der Quelldatei, dann neu bauen. */

#stest{
  --navy:#0F1C2E; --navy2:#1A2E48; --acc:#C8F14A; --acc-d:#B5E02E; --acc-mid:#A8D62B;
  --ink:#41600A; --onacc:#0F1C2E; --acc2:#C8F14A; --accsoft:#F4FBE2; --rad-sm:8px;
  --text:#171A1F; --grey:#4A5260; --grey2:#6E7684;
  --bg:#F7F8FA; --bg2:#EFF2F7; --line:#E2E6ED; --warn:#41600A;
  --sans:system-ui,"Segoe UI Variable Text","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;
}
#stest *{box-sizing:border-box}
#stest [hidden]{display:none !important}
#stest{margin:0;background:#fff;color:var(--text);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
#stest .wrap{max-width:900px;margin:0 auto;padding:0 26px}
#stest h1, #stest h2, #stest h3, #stest h4{letter-spacing:-.025em;color:var(--navy);margin:0;font-weight:670}
#stest h1{font-size:clamp(28px,4vw,44px);line-height:1.08}
#stest h2{font-size:clamp(22px,2.8vw,30px);line-height:1.15;margin-bottom:12px}
#stest h3{font-size:19px;line-height:1.3}
#stest h4{font-size:16px;line-height:1.3}
#stest p{margin:0 0 12px}
#stest b, #stest strong{font-weight:660;color:var(--navy)}
#stest .kicker{font:700 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--acc);
  display:flex;align-items:center;gap:11px;margin-bottom:16px}
#stest .kicker:before{content:"";flex:0 0 26px;height:2px;background:var(--acc)}
#stest .lead{font-size:19px;line-height:1.5;color:var(--grey)}
#stest .sm{font-size:15.5px;color:var(--grey)}
#stest .xs{font-size:13.5px;color:var(--grey2)}
#stest section{padding:44px 0}
#stest section+section{border-top:1px solid var(--line)}
#stest .tint{background:var(--bg);border-top:0}

/* Rollenwahl */
#stest .sroles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:8px}
@media(max-width:900px){#stest .sroles{grid-template-columns:1fr 1fr}}
@media(max-width:560px){#stest .sroles{grid-template-columns:1fr}}
#stest .srole{text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:4px;padding:14px 15px;
  cursor:pointer;font:inherit;color:inherit;transition:.14s}
#stest .srole:hover{border-color:var(--acc2)}
#stest .srole.on{border-color:var(--acc);background:var(--accsoft)}
#stest .srole b{display:block;font-size:15.5px;line-height:1.25;color:var(--navy);margin-bottom:4px}
#stest .srole span{font-size:13px;color:var(--grey2);line-height:1.35;display:block}

/* Fragen */
#stest .q{border:1px solid var(--line);border-radius:4px;padding:18px 20px 16px;margin-bottom:14px;background:#fff}
#stest .q.done{border-color:#C9D3E2;background:var(--bg)}
#stest .q-nr{font:700 11.5px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--acc);margin-bottom:7px}
#stest .q-nr em{font-style:normal;color:var(--grey2)}
#stest .q-t{font-size:17.5px;font-weight:620;color:var(--navy);line-height:1.35;margin-bottom:12px}
#stest .opts{display:grid;gap:8px}
#stest .opt{border:1.5px solid var(--line);border-radius:3px;padding:10px 13px;cursor:pointer;font-size:15.5px;
  display:flex;justify-content:space-between;gap:12px;align-items:center;background:#fff;transition:.12s;line-height:1.35}
#stest .opt:hover{border-color:var(--acc2)}
#stest .opt.sel{border-color:var(--navy);background:var(--navy);color:#fff}
#stest .opt.sel .pt{color:#DDF29A}
#stest .pt{font:600 12px var(--mono);color:var(--grey2);flex:0 0 auto}
/* Punktwerte bleiben verdeckt — sichtbare Punkte verleiten dazu, die "beste" Antwort zu wählen.
   Zum Einblenden (etwa im Gespräch oder zum Prüfen) die folgende Zeile löschen: */
#stest .pt{display:none}

/* Fortschritt */
#stest .bar{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);
  padding:11px 0;backdrop-filter:blur(8px)}
#stest .bar .wrap{display:flex;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap}
#stest .prog{flex:1;min-width:160px;height:6px;background:var(--bg2);border-radius:3px;overflow:hidden}
#stest .prog span{display:block;height:6px;background:var(--acc);width:0%;transition:width .2s}
#stest .bar .st{font:600 13.5px var(--mono);color:var(--navy);white-space:nowrap}
#stest .btn{display:inline-block;background:var(--acc);color:#fff;border:1.5px solid var(--acc);text-decoration:none;
  font:640 15.5px var(--sans);padding:11px 20px;border-radius:3px;cursor:pointer;transition:.13s}
#stest .btn:hover{background:#B5E02E;border-color:#B5E02E}
#stest .btn:disabled{background:#D8DDE6;border-color:#D8DDE6;color:#8C94A3;cursor:default}
#stest .btn.ghost{background:none;color:var(--navy);border-color:#C7CEDA}
#stest .btn.ghost:hover{background:var(--bg)}
#stest .btn.dark{background:var(--navy);border-color:var(--navy)}
#stest .btn.dark:hover{background:var(--navy2)}
#stest .btn.sm{font-size:14px;padding:8px 14px}

/* Auswertungsbogen */
#stest #bogen{display:none;scroll-margin-top:64px}
#stest #bogen.on{display:block}
#stest .sheet{border:1.5px solid var(--navy);border-radius:4px;background:#fff;overflow:hidden;margin-top:6px}
#stest .sheet-head{background:var(--navy);color:#fff;padding:20px 24px}
#stest .sheet-head .t{font:700 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc2);margin-bottom:6px}
#stest .sheet-head h2{color:#fff;margin:0 0 8px}
#stest .sheet-head .meta{font:500 13px var(--mono);color:#BCC8DC;line-height:1.6}
#stest .sheet-body{padding:24px}
#stest .score{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--line)}
#stest .score .n{font:720 46px/1 var(--mono);letter-spacing:-.04em;color:var(--navy)}
#stest .score .n em{font-style:normal;font-size:24px;color:var(--grey2)}
#stest .score .stufe{font-size:20px;font-weight:660;color:var(--acc)}
#stest .bl{display:flex;align-items:center;gap:12px;margin-bottom:9px}
#stest .bl .nm{flex:0 0 210px;font-size:15px;color:var(--navy);font-weight:600}
#stest .bl .tr{flex:1;background:#E4EAEF;height:15px;border-radius:2px;overflow:hidden}
#stest .bl .fi{display:block;height:15px;background:var(--navy)}
#stest .bl.weak .fi{background:var(--acc)}
#stest .bl.weak .nm, #stest .bl.weak .vl{color:var(--acc)}
#stest .bl .vl{flex:0 0 54px;text-align:right;white-space:nowrap;font:640 14px var(--mono);color:var(--navy)}
#stest .bl .sx{font-size:13.5px;color:var(--grey);margin:-4px 0 12px 222px;line-height:1.45}
@media(max-width:640px){#stest .bl .nm{flex:0 0 120px;font-size:14px}#stest .bl .sx{margin-left:0}}
#stest .block{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
#stest .block h3{margin-bottom:10px}
#stest .item{display:flex;gap:13px;padding:9px 0;border-bottom:1px solid var(--line)}
#stest .item:last-child{border-bottom:0}
#stest .item i{font:700 12px var(--mono);color:var(--acc);flex:0 0 26px;font-style:normal;padding-top:3px}
#stest .item b{display:block;font-size:15.5px;line-height:1.3;margin-bottom:2px}
#stest .item span{font-size:14.5px;color:var(--grey);line-height:1.45}
#stest .tag{display:inline-block;font:700 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  background:var(--accsoft);color:var(--warn);padding:3px 7px;border-radius:2px;margin-left:7px;vertical-align:1px}
#stest .note{background:var(--bg);border-left:3px solid var(--acc);padding:14px 16px;font-size:14.5px;color:var(--grey);line-height:1.5}
#stest .note b{color:var(--navy)}
#stest .ret{background:var(--navy);color:#E9EDF5;border-radius:4px;padding:22px 24px;margin-top:22px}
#stest .ret h3{color:#fff}
#stest .ret .sm{color:#BCC8DC}
#stest .ret input[type=text], #stest .ret input[type=email]{background:#fff;border:1.5px solid #2B4368;border-radius:3px;
  padding:9px 11px;font:inherit;font-size:15px;width:100%;color:var(--text)}
#stest .fld{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
@media(max-width:640px){#stest .fld{grid-template-columns:1fr}}
#stest .chk{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;color:#BCC8DC;margin-bottom:14px;line-height:1.45;cursor:pointer}
#stest .chk input{margin-top:3px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--acc)}
#stest .acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
#stest .bonus{border:1.5px dashed #C7CEDA;border-radius:4px;padding:18px 20px;background:#fff;margin-top:4px}
#stest .bonus textarea{width:100%;border:1.5px solid var(--line);border-radius:3px;padding:10px 12px;
  font:inherit;font-size:15.5px;resize:vertical}
#stest .btn.off{background:#D8DDE6;border-color:#D8DDE6;color:#8C94A3;pointer-events:none}
#stest .zusage{margin-top:20px;border-left:3px solid var(--acc);background:var(--accsoft);padding:14px 18px;border-radius:0 3px 3px 0}
#stest .zusage b{display:block;font-size:17px;margin-bottom:3px}
#stest .zusage span{font-size:15.5px;color:var(--grey);line-height:1.5}
#stest .wnr{font:700 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc2);margin-bottom:7px}
#stest .wnr.dark{color:var(--acc)}
#stest .req{border:1.5px solid var(--line);border-radius:4px;padding:20px 22px;margin-top:14px;background:var(--bg)}
#stest .req input{background:#fff;border:1.5px solid #C7CEDA;border-radius:3px;padding:9px 11px;font:inherit;font-size:15px;width:100%}
#stest .chk2{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;color:var(--grey);line-height:1.45;cursor:pointer}
#stest .chk2 input{margin-top:3px;width:16px;height:16px;accent-color:var(--acc)}
#stest .btn.off{background:#D8DDE6;border-color:#D8DDE6;color:#8C94A3;pointer-events:none}

/* Druck: nur der Bogen */
@media print{
  @page{size:A4;margin:10mm 13mm}
  .noprint, #stest .bar, #stest .sroles, #stest #fragen, header, footer{display:none !important}
  body{font-size:9.8pt;line-height:1.35;background:#fff}
  #stest .sheet-head{padding:11px 16px}
  #stest .sheet-head h2{font-size:17pt}
  #stest .sheet-head .meta{font-size:8.5pt;line-height:1.45}
  #stest .sheet-body{padding:13px 16px 7px}
  #stest .score{padding-bottom:8px}
  #stest .score .n{font-size:27pt}
  #stest .score .stufe{font-size:13pt}
  #stest #s-begr{margin-bottom:0}
  #stest .block{margin-top:7px;padding-top:6px}
  #stest .block h3{font-size:12pt}
  #stest .bl{margin-bottom:3px}
  #stest .bl .fi, #stest .bl .tr{height:11px}
  #stest .bl .sx{margin-top:-2px;margin-bottom:6px;font-size:9pt}
  #stest .item{padding:4px 0}
  #stest .item b{font-size:10.5pt}
  #stest .item span{font-size:9pt}
  #stest .sheet{border:0}
  #stest .wrap{max-width:none;padding:0}
  #stest section{padding:0;border:0}
  #stest .sheet{border:1px solid #0F1C2E;border-radius:0}
  #stest .sheet-head, #stest .bl .fi, #stest .tag, #stest .note{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #stest .block{break-inside:avoid}
  #stest .pfoot{display:block !important}
}
#stest .pfoot{display:none;margin-top:14px;font-size:9.5pt;color:#6E7684;border-top:1px solid #E2E6ED;padding-top:8px}


/* ---------------------------------------------------------------------
   Farbwelt "Tinte + Limette" — Nachzug fuer den Selbsttest (20.08.2026)
   Limette ist Flaechenfarbe. Als Text auf Weiss waere sie nicht lesbar.
   Text/Zahlen -> var(--ink), Text auf Limettenflaeche -> var(--onacc).
   --------------------------------------------------------------------- */
#stest .kicker, #stest .q-nr, #stest .score .stufe, #stest .item i, #stest .bl.weak .nm, #stest .bl.weak .vl, #stest .wnr.dark{color:var(--ink)}
#stest .kicker:before{background:var(--acc-mid)}
#stest .srole:hover, #stest .opt:hover, #stest .srole.on{border-color:var(--acc-mid)}
#stest .note, #stest .zusage{border-left-color:var(--acc-mid)}
#stest .btn{background:var(--acc);color:var(--onacc);border-color:var(--acc);border-radius:var(--rad-sm)}
#stest .btn:hover{background:var(--acc-d);border-color:var(--acc-d);color:var(--onacc)}
#stest .sheet-head .t, #stest .wnr{color:var(--acc2)}

/* ---- von selbsttest-bauen.mjs ergaenzt ---- */
@media print{
  header,footer,#cc,#stest #intro{display:none !important}
  /* Die Seitenhuelle der Website darf im Druck keinen Platz kosten,
     sonst rutscht der Bogen auf eine zweite Seite. */
  .page,.wrap,section{padding:0 !important;margin:0 !important;border:0 !important;max-width:none !important}
  body{background:#fff}
  /* stil.css setzt groessere Grundwerte als die Quelldatei. Ohne diese
     Verdichtung passt der Bogen nicht mehr auf eine A4-Seite. */
  #stest{font-size:9.2pt}
  #stest .sm,#stest .item span,#stest .bl .sx,#stest .xs{font-size:8.8pt;line-height:1.35}
  #stest .block{margin-top:6px;padding-top:5px}
  #stest .item{padding:3px 0}
}
#stest .bar{top:var(--hdr,68px);z-index:20}