.wcnc{--bg:#f5f5f3;--surface:#fff;--fg:#33323f;--muted:#6b6a75;--line:#dcdbd6;--accent:#800000;--accent-soft:#f6e8e8;--ok:#2f7d4f;--ok-soft:#e3f1e8;--watch:#8a6d00;--watch-soft:#f6f0d8;--act:#b5401d;--act-soft:#f9e6df;color:var(--fg);font-size:17px;line-height:1.55;max-width:1120px;margin:0 auto}
#wcnc *{box-sizing:border-box}
#wcnc h2{font-size:clamp(24px,3.4vw,32px);line-height:1.15;margin:0;font-weight:800;color:var(--fg)}
#wcnc h3{margin:0;font-size:18px;line-height:1.3;font-weight:700;color:var(--fg)}
#wcnc p{margin:0}
#wcnc .lead{color:var(--muted);max-width:68ch}
#wcnc .eyebrow{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:700}
#wcnc section{display:grid;gap:18px;margin-bottom:56px}
#wcnc .head{display:flex;justify-content:space-between;align-items:end;gap:12px;flex-wrap:wrap}
#wcnc .stand{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
#wcnc .legend{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
#wcnc .legend span{display:flex;align-items:center;gap:6px}
#wcnc .s-ruhig{--s:var(--ok);--sb:var(--ok-soft)}#wcnc .s-beobachten{--s:var(--watch);--sb:var(--watch-soft)}#wcnc .s-handeln{--s:var(--act);--sb:var(--act-soft)}
#wcnc .dot{width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--s)}
#wcnc .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){#wcnc .cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){#wcnc .cards{grid-template-columns:minmax(0,1fr)}}
#wcnc .card{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--s);padding:16px 18px;display:grid;gap:8px;align-content:start}
#wcnc .card .top{display:flex;justify-content:space-between;gap:8px;align-items:center}
#wcnc .pill{font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;padding:3px 8px;border-radius:20px;background:var(--sb);color:var(--s);white-space:nowrap}
#wcnc .wert{font-weight:800;font-size:21px;line-height:1.2}
#wcnc .card p{font-size:15px}
#wcnc .tie{font-size:13px;color:var(--accent);font-weight:700}
#wcnc .src{font-size:13px;color:var(--muted)}
#wcnc .src a{color:var(--accent)}
#wcnc .hh{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#wcnc .hh span{font-weight:700}
#wcnc .stepper{display:flex;align-items:center;border:1px solid var(--line);background:var(--surface)}
#wcnc .stepper button{width:40px;height:40px;border:0;background:none;color:var(--fg);font-size:20px;cursor:pointer;padding:0}
#wcnc .stepper output{min-width:2.5ch;text-align:center;font-variant-numeric:tabular-nums}
#wcnc .grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
@media (max-width:860px){#wcnc .grid{grid-template-columns:minmax(0,1fr)}}
#wcnc ol.qs{list-style:none;margin:0;padding:0;display:grid;gap:14px}
#wcnc .q{background:var(--surface);border:1px solid var(--line);padding:18px 20px;display:grid;gap:10px;margin:0}
#wcnc .q .area{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:700}
#wcnc .opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (max-width:560px){#wcnc .opts{grid-template-columns:minmax(0,1fr)}}
#wcnc .opts input{position:absolute;opacity:0;pointer-events:none}
#wcnc .opts label{display:block;height:100%;padding:10px 12px;border:1px solid var(--line);cursor:pointer;font-size:15px;line-height:1.35;margin:0}
#wcnc .opts label:hover{border-color:var(--accent)}
#wcnc .opts input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
#wcnc .opts input:checked+label{border-color:var(--accent);background:var(--accent-soft);font-weight:700}
#wcnc aside{position:sticky;top:100px;background:var(--surface);border:1px solid var(--line);padding:22px;display:grid;gap:14px}
@media (max-width:860px){#wcnc aside{position:static}}
#wcnc .score{display:flex;align-items:baseline;gap:8px}
#wcnc .score b{font-weight:800;font-size:54px;line-height:1;font-variant-numeric:tabular-nums}
#wcnc .score span,#wcnc .progress,#wcnc .levelText{color:var(--muted);font-size:15px}
#wcnc .meter{height:10px;border-radius:5px;background:var(--line);overflow:hidden}
#wcnc .meter i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s}
@media (prefers-reduced-motion:reduce){#wcnc .meter i{transition:none}}
#wcnc .scale{display:grid;grid-template-columns:40fr 35fr 25fr;font-size:11px;color:var(--muted);margin-top:4px}
#wcnc .level{font-weight:800;font-size:20px}
#wcnc .gaps h4{margin:0 0 8px;font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
#wcnc .gaps ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
#wcnc .gap{border-left:3px solid var(--act);background:var(--act-soft);padding:10px 12px;font-size:15px;display:grid;gap:4px;margin:0}
#wcnc .gap.soft{border-left-color:var(--watch);background:var(--watch-soft)}
#wcnc .gap a{color:var(--accent);font-weight:700;font-size:14px}
#wcnc .done{background:var(--ok-soft);color:var(--ok);padding:10px 12px;font-size:15px}
#wcnc .note{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}
