
/* Layout: Buchcover-Look. Heller Papiergrund, Navy-Versalien in Condensed, Goldlinien mit Punkt. Eine zentrierte Arbeitsspalte (46rem); Start → Fragen → Profil wechseln an derselben Stelle. */
.check-app{
  --bg:#F7F3EC;
  --surface:#FFFDF9;
  --fg:#0E1D38;
  --muted:#5A6172;
  --line:#E2DACB;
  --primary:#0E1D38;
  --primary-fg:#F7F3EC;
  --gold:#BE9152;
  --gold-text:#8C6531;
  --gold-soft:rgba(190,145,82,.20);
  --primary-soft:rgba(14,29,56,.06);
  --band:#0E1D38;
  --band-deep:#081124;
  --band-fg:#F7F3EC;
  --band-muted:#B8B2B0;
  --band-gold:#D6B27A;
  --warn:#9A3B1F;
  --warn-soft:rgba(154,59,31,.09);
  --ok:#2F6B4F;
  --ok-soft:rgba(47,107,79,.09);
  --f-display:"Barlow Condensed","Arial Narrow","Roboto Condensed",sans-serif;
  --f-body:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
a{color:var(--fg);text-decoration-color:var(--gold);text-underline-offset:4px}
a:hover{color:var(--gold-text)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}
.check-wrap{max-width:46rem;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* Kopfzeile wie auf der Buchseite */
.top{border-bottom:1px solid var(--line)}
.top .check-wrap{max-width:62rem;padding-block:14px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.logo{font-family:var(--f-display);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:15px;text-decoration:none;line-height:1.15}
.logo span{color:var(--gold-text)}
.back{font-family:var(--f-display);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:13px;text-decoration:none}

.label{font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase}

/* Hero */
.check-hero .check-wrap{padding-block:40px 30px;text-align:center}
.authors{display:flex;align-items:center;justify-content:center;gap:14px;font-family:var(--f-display);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:14px}
.authors::before,.authors::after{content:"";height:1px;width:42px;background:var(--gold)}
.authors i{width:5px;height:5px;border-radius:50%;background:var(--gold);display:inline-block}
h1{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:clamp(2.5rem,7.6vw,4.1rem);line-height:.98;letter-spacing:.01em;margin:22px 0 0;text-wrap:balance}
h1 em{font-style:italic;font-weight:600;color:var(--gold-text)}
.rule{display:flex;align-items:center;justify-content:center;gap:10px;margin:22px auto 18px;max-width:22rem}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:var(--gold)}
.rule i{width:5px;height:5px;border-radius:50%;background:var(--gold)}
.lede{max-width:34rem;margin:0 auto;color:var(--muted);font-size:16px}
.facts{margin-top:16px;font-family:var(--f-display);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:13px;color:var(--gold-text)}

main .check-wrap{padding-block:6px 48px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:clamp(20px,4.4vw,38px)}
h2{font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(1.55rem,4vw,2.05rem);line-height:1.08;margin:0 0 .55em;text-wrap:balance}
h2.q{text-transform:none;font-weight:600;letter-spacing:0;font-size:clamp(1.45rem,3.8vw,1.85rem);line-height:1.18}
h3{font-size:15px;font-weight:600;margin:0 0 .25em}
p{margin:0 0 1em}
.muted{color:var(--muted)}

/* Start */
.start-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:start}
.start-grid>*{min-width:0}
.dims{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:12px}
.dims li{display:grid;grid-template-columns:2.4rem 1fr;gap:4px;align-items:baseline}
.dims .n{font-family:var(--f-display);font-weight:700;font-size:15px;color:var(--gold-text);letter-spacing:.06em}
.dims strong{display:block;font-weight:600;font-size:15px}
.dims span.d{display:block;color:var(--muted);font-size:13.5px;line-height:1.45}
.sample{border:1px solid var(--line);border-radius:4px;padding:14px 12px 4px;text-align:center;margin:0;background:var(--bg)}
.sample .label{color:var(--muted)}

.btn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--primary);border-radius:2px;background:var(--primary);color:var(--primary-fg);font-family:var(--f-display);font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:12px 22px;cursor:pointer;font-size:15px;transition:background .15s,color .15s,transform .1s}
.btn:hover{background:transparent;color:var(--primary)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--fg)}
.btn.small{padding:9px 15px;font-size:13.5px}
.btn[disabled]{opacity:.3;cursor:default}
.btn[disabled]:hover{background:var(--primary);color:var(--primary-fg)}

/* Frage */
.progress{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:24px}
.progress .grp{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.progress i{display:block;height:4px;background:var(--line)}
.progress i.done{background:var(--primary)}
.progress i.now{background:var(--gold)}
.q-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.q-head .label{color:var(--gold-text)}
.q-head .count{font-family:var(--f-display);font-weight:600;letter-spacing:.1em;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.options{display:grid;gap:10px;margin:22px 0 26px}
.opt{display:grid;grid-template-columns:2rem 1fr;gap:12px;align-items:start;text-align:left;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:14px 16px;cursor:pointer;transition:border-color .15s,background .15s;line-height:1.5;font-size:15px}
.opt:hover{border-color:var(--gold)}
.opt .k{font-family:var(--f-display);font-weight:700;font-size:14px;color:var(--muted);border:1px solid var(--line);border-radius:50%;width:1.75rem;height:1.75rem;display:grid;place-items:center;margin-top:-1px}
.opt[aria-pressed="true"]{border-color:var(--primary);background:var(--primary-soft)}
.opt[aria-pressed="true"] .k{background:var(--primary);color:var(--primary-fg);border-color:var(--primary)}
.q-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.hint{font-size:12.5px;color:var(--muted)}
.fade{animation:fade .28s ease}
@keyframes fade{from{opacity:.25;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Ergebnis */
.res-label{color:var(--gold-text)}
.score-row{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;margin-top:10px}
.score-row>*{min-width:0}
.big{font-family:var(--f-display);font-weight:700;font-size:clamp(4rem,12vw,5.4rem);line-height:.9;font-variant-numeric:tabular-nums}
.big small{font-size:.45em;color:var(--gold-text);margin-left:3px}
.stage-name{font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:1.9rem;line-height:1;margin:4px 0 8px}
.stage-name em{font-style:italic;font-weight:600;color:var(--gold-text)}
.ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:24px 0 4px}
.ladder div{font-family:var(--f-display);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:13px;color:var(--muted);padding-top:8px;border-top:3px solid var(--line)}
.ladder div.on{border-top-color:var(--gold);color:var(--fg)}
.ladder div.past{border-top-color:var(--primary)}
.ladder .r{display:block;font-family:var(--f-body);font-weight:400;letter-spacing:0;text-transform:none;font-size:11.5px;font-variant-numeric:tabular-nums}
.res-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:28px;align-items:center}
.res-grid>*{min-width:0}
.bars{display:grid;gap:13px}
.bar-row{display:grid;grid-template-columns:1fr auto;gap:5px 10px;font-size:14px}
.bar-row .lbl{font-weight:500}
.bar-row .val{font-family:var(--f-display);font-weight:600;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.bar{grid-column:1/-1;height:6px;background:var(--line);overflow:hidden}
.bar span{display:block;height:100%;background:var(--primary);transition:width .6s ease}
.bar-row.best .bar span{background:var(--gold)}
.flag{padding:14px 16px;margin-top:26px;font-size:14.5px}
.flag.warn{background:var(--warn-soft);border-left:3px solid var(--warn)}
.flag.ok{background:var(--ok-soft);border-left:3px solid var(--ok)}
.flag .label{display:block;margin-bottom:4px}
.flag.warn .label{color:var(--warn)}
.flag.ok .label{color:var(--ok)}
.flag p{margin:0}
.strength{background:var(--gold-soft);padding:14px 16px;margin-top:16px;font-size:14.5px}
.strength .label{color:var(--gold-text)}
.strength p{margin:4px 0 0}
.section{margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
.section>.label{color:var(--gold-text);display:block;margin-bottom:6px}
.steps{display:grid;gap:18px;margin-top:16px}
.step{display:grid;grid-template-columns:2.4rem 1fr;gap:8px}
.step .n{font-family:var(--f-display);font-weight:700;font-size:1.9rem;line-height:1;color:var(--gold-text)}
.step p{margin:0;color:var(--muted);font-size:14.5px}

.cta{background:var(--band);color:var(--band-fg);padding:clamp(22px,4.4vw,34px);margin-top:36px}
.cta .label{color:var(--band-gold)}
.cta h2{color:var(--band-fg);margin-top:8px}
.cta p{color:var(--band-muted);font-size:14.5px}
.cta .who{color:var(--band-fg);font-weight:500}
.mail{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0 4px}
.mail code{font-family:var(--f-body);font-size:15px;font-weight:500;background:rgba(255,255,255,.06);border:1px solid rgba(214,178,122,.45);padding:9px 13px;user-select:all;color:var(--band-fg);word-break:break-all}
.cta .btn{background:var(--band-gold);border-color:var(--band-gold);color:#081124}
.cta .btn:hover{background:transparent;color:var(--band-gold)}
.cta .btn.ghost{background:transparent;color:var(--band-fg);border-color:rgba(247,243,236,.35)}
.cta .btn.ghost:hover{border-color:var(--band-gold);color:var(--band-gold)}
.status{font-size:13px;color:var(--band-gold);min-height:1.2em;margin:8px 0 0}
#fallback{width:100%;min-height:9rem;margin-top:10px;font-family:var(--f-body);font-size:12.5px;border:1px solid var(--line);padding:10px;background:var(--surface);color:var(--fg)}
.links{display:flex;gap:10px 24px;flex-wrap:wrap;margin-top:22px}
.links a{font-family:var(--f-display);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:14px;text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:2px}
.restart{margin-top:22px}

 .check-footer{border-top:1px solid var(--line)}
 .check-footer .check-wrap{padding-block:24px 40px;font-size:12.5px;color:var(--muted)}
 .check-footer .motto{font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:15px;color:var(--fg);margin-bottom:8px}
 .check-footer .motto em{font-style:italic;font-weight:600;color:var(--gold-text)}
 .check-footer p{max-width:42rem}

svg text{font-family:var(--f-body)}
.radar{width:100%;max-width:420px;height:auto;display:block;margin:0 auto}

@media (max-width:640px){
  .start-grid,.res-grid{grid-template-columns:1fr}
  .score-row{grid-template-columns:1fr;gap:8px}
  .progress{gap:4px}
  .authors{font-size:12.5px;gap:10px}
  .authors::before,.authors::after{width:20px}
  .ladder div{font-size:11.5px;letter-spacing:.04em}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.check-app{--bg:#f7f5f0;--surface:#fff;--fg:#172152;--muted:#626778;--line:#dededb;--primary:#24317c;--primary-fg:#fff;--gold:#eda900;--gold-text:#8b6100;--gold-soft:#eda90020;--primary-soft:#24317c0b;--band:#24317c;--band-fg:#fff;--band-muted:#e1e3ef;--band-gold:#eda900;--f-display:Arial,Helvetica,sans-serif;--f-body:Arial,Helvetica,sans-serif;font:16px/1.65 Arial,Helvetica,sans-serif;color:var(--fg);background:var(--bg)}
.check-page{background:#f7f5f0;color:#172152;font-family:Arial,Helvetica,sans-serif}
.check-page header nav a[aria-current]{border-bottom:2px solid #eda900;padding-bottom:5px}
.check-app .check-wrap{max-width:1220px;padding-left:44px;padding-right:44px}
.check-app .check-hero .check-wrap{text-align:left;padding-top:34px;padding-bottom:35px}
.check-app .check-hero h1{font-family:Impact,'Arial Narrow',Arial,sans-serif;font-size:clamp(42px,5.3vw,72px);font-weight:500;line-height:1.02;letter-spacing:-.018em;text-transform:none;max-width:950px;margin:20px 0}
.check-app .check-hero h1 em{font-family:inherit;font-style:normal;font-weight:inherit;color:#eda900}
.check-app .authors{justify-content:flex-start;font-size:10px;letter-spacing:2px;font-weight:700}
.check-app .authors::before{width:26px;height:3px}.check-app .authors::after{display:none}
.check-app .rule{display:none}.check-app .lede{max-width:770px;margin:0;font-size:20px;line-height:1.5}
.check-app .facts{font-size:11px;letter-spacing:1.2px;color:#626778;margin-top:22px}
.check-app .panel{border-radius:0;padding:38px;border-top:3px solid #24317c}
.check-app h2{font-size:32px;line-height:1.12;font-weight:750;letter-spacing:-.045em;text-transform:none}
.check-app h2.q{font-size:30px;font-weight:750;letter-spacing:-.025em;max-width:850px}
.check-app h3{font-size:18px;font-weight:700;line-height:1.25}
.check-app .label{font-size:10px;letter-spacing:1.7px;font-weight:700}
.check-app .start-grid{grid-template-columns:1.1fr .9fr;gap:55px}.check-app .dims{margin-top:26px;gap:14px}
.check-app .dims .n{color:#24317c}.check-app .sample{padding:25px;border-radius:0;background:#f7f5f0}
.check-app .btn{border-radius:0;text-transform:none;letter-spacing:0;font-size:13px;font-weight:700;padding:16px 23px;line-height:1.4;text-decoration:none}
.check-app .btn:not(.ghost){background:#eda900;color:#172152;border-color:#eda900}.check-app .btn:not(.ghost):hover{background:#f7bd2e}
.check-app .btn.ghost{color:#172152}.check-app .cta .btn.ghost{color:white}
.check-app .opt{border-radius:0;font-size:16px;padding:18px 20px}.check-app .opt .k{font-size:13px}.check-app .q-nav{margin-top:25px}
.check-app .progress i{height:5px}.check-app .q-head{margin-bottom:24px}.check-app .count{font-size:12px}
.check-app .big{font-family:Impact,'Arial Narrow',Arial,sans-serif;font-weight:500;color:#24317c}.check-app .stage-name{text-transform:none;font-size:35px;letter-spacing:-.03em}.check-app .stage-name em{font-style:normal;color:#24317c}
.check-app .method-note{font-size:13px;color:#626778;border-top:1px solid #dededb;margin-top:30px;padding-top:22px}
.check-method{margin:36px 0 55px;padding:26px 0;border-top:1px solid #dededb}.check-method summary{font-size:14px;font-weight:700;cursor:pointer}.check-method p{max-width:900px;font-size:14px;margin:15px 0}.check-method ul{font-size:14px}
.check-app .check-breadcrumb{display:flex;gap:12px;font-size:12px;letter-spacing:normal;padding:25px 0 0;color:#626778}.check-app .check-breadcrumb a{text-decoration:none}
.check-app .links a{text-transform:none;letter-spacing:0;font-size:13px}
.check-app .ladder div{text-transform:none;letter-spacing:0;font-size:14px}
.check-app .score-row{margin-top:20px}.check-app .strength{background:#eda90015}
.check-app .privacy-note{font-size:12px;color:#626778;margin-top:18px;max-width:750px}
.check-page header>nav{gap:20px;flex-wrap:wrap}
@media(max-width:1100px){.check-page header{flex-wrap:wrap}.check-page header>nav{order:3;width:100%;justify-content:flex-start}}
@media(max-width:700px){.check-app .check-wrap{padding-left:24px;padding-right:24px}.check-app .check-hero .check-wrap{padding-top:28px}.check-app .check-hero h1{font-size:40px}.check-app .lede{font-size:18px}.check-app .panel{padding:24px}.check-app .start-grid,.check-app .res-grid{grid-template-columns:1fr;gap:28px}.check-app h2{font-size:27px}.check-app h2.q{font-size:25px}.check-app .authors{font-size:9px;gap:8px;flex-wrap:wrap}.check-app .authors::before{width:20px}.check-app .opt{padding:15px 12px;font-size:15px;grid-template-columns:1.75rem 1fr;gap:10px}.check-app .q-nav{gap:16px}.check-app .hint{display:none}.check-app .ladder div{font-size:11px}.check-app .cta h2{font-size:27px}.check-app .mail code{font-size:13px}.check-app .facts{font-size:10px;letter-spacing:.6px}.check-app .panel{scroll-margin-top:20px}}
@media print{.check-page header,.check-page footer,.check-hero,.check-breadcrumb,.check-method,.check-app .cta,.check-app .restart,.check-app .links,.check-app .print-button{display:none!important}.check-app .check-wrap{max-width:none;padding:0}.check-app .panel{border:0;padding:0}.check-app .res-grid{grid-template-columns:1fr 1fr}.check-app .flag,.check-app .step{break-inside:avoid}.check-app .bar{print-color-adjust:exact}}

.check-app .authors{padding:0;margin:0}.check-app .panel:focus{outline:none}

html:has(body.check-page){scroll-behavior:auto;scroll-padding-top:20px}.check-app .fade{animation:none}

.check-app .check-hero-action{margin-top:24px}.check-app .check-breadcrumb{justify-content:flex-start;width:auto;order:0;border:0}
