/* ITB Studio – gemeinsame Gestaltung. Farben: Navy, Blau, Rot. Schrift: Inter. */
:root{
  --bg:#EEF2F6;--panel:#FFFFFF;--fg:#0B1B2E;--muted:#5A6B7E;--line:#D5DEE8;
  --blue:#2F9BEA;--blue-ink:#1673BE;--red:#E8333A;--navy:#0B1B2E;--stage:#0B1B2E;--chip:#E4EBF3;
  --ui:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{--bg:#08121E;--panel:#0F1D2E;--fg:#E8EFF7;--muted:#8FA2B8;--line:#21344A;--blue-ink:#5DB4F5;--stage:#050B13;--chip:#18293D;color-scheme:dark}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--ui);font-size:15px;line-height:1.5}
a{color:inherit}
.topbar{position:sticky;top:0;z-index:20;background:var(--navy);color:#fff;padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top,0px))}
.topbar .in{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff}
.brand img{height:36px;width:auto;display:block}
.brand .wm{display:flex;flex-direction:column;width:max-content}
.brand .w1{font-weight:300;font-size:22px;line-height:1;letter-spacing:.035em;color:#F0343B;padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,.85)}
.brand .w2{font-weight:400;font-size:10px;line-height:1;color:#4FB3F8;padding-top:3px;text-align:justify;text-align-last:justify;letter-spacing:.1em;margin-right:-.1em}
.nav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.nav a{text-decoration:none;font-weight:600;font-size:14px;padding:8px 13px;border-radius:999px;color:#C8D6E6}
.nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav a[aria-current="page"]{background:#fff;color:var(--navy)}
.page{max-width:1240px;margin:0 auto;padding:22px 16px 48px;display:grid;gap:18px}
h1{font-weight:900;font-size:clamp(26px,4vw,36px);margin:0;line-height:1.1;letter-spacing:-.01em}
h1 b{color:var(--red)}
.sub{color:var(--muted);margin:6px 0 0;max-width:70ch}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;display:grid;gap:14px;min-width:0}
.card h2{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0;display:flex;align-items:center;gap:10px}
.card h2::before{content:"";width:18px;height:4px;border-radius:2px;flex:none;background:linear-gradient(90deg,var(--blue) 0 70%,transparent 70% 78%,var(--red) 78%)}
.card h2 .n{margin-left:auto;letter-spacing:0;text-transform:none;font:600 13px var(--ui)}
label.f{display:grid;gap:6px;font-weight:600;font-size:13.5px}
label.f .h{color:var(--muted);font-weight:500;font-size:12.5px}
label.f output{font-weight:500;color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
input[type=text],textarea,select{width:100%;font:500 15px var(--ui);color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:10px 12px}
textarea{resize:vertical;min-height:84px;line-height:1.35}
input[type=range]{width:100%;accent-color:var(--blue)}
input[type=checkbox]{accent-color:var(--blue);width:17px;height:17px}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.checks{display:flex;flex-wrap:wrap;gap:8px 18px}
.checks label{display:flex;align-items:center;gap:8px;font-weight:500;cursor:pointer}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button,.chip{appearance:none;border:1px solid var(--line);background:var(--panel);color:var(--fg);border-radius:999px;padding:8px 14px;font:600 13.5px var(--ui);cursor:pointer}
.seg button[aria-pressed="true"],.chip[aria-pressed="true"]{background:var(--fg);color:var(--panel);border-color:var(--fg)}
.btn{appearance:none;border:0;border-radius:11px;padding:13px 16px;font:700 15px var(--ui);cursor:pointer;display:grid;gap:2px;text-align:left}
.btn small{font-weight:500;font-size:12.5px;opacity:.85}
.btn.primary{background:var(--blue);color:#fff}
.btn.second{background:var(--chip);color:var(--fg)}
.btn:disabled{opacity:.55;cursor:progress}
.btns{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.linkbtn{appearance:none;border:0;background:none;color:var(--blue);font:600 13.5px var(--ui);cursor:pointer;padding:0;justify-self:start}
.status{font-size:13.5px;color:var(--muted);min-height:1.5em}
.status.err{color:var(--red)}
.tip{margin:0;color:var(--muted);font-size:13.5px}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:18px;align-items:start}
@media (max-width:900px){.grid2{grid-template-columns:minmax(0,1fr)}.stagecol{order:-1}}
.stage{background:var(--stage);border-radius:14px;padding:14px;display:grid;gap:12px;justify-items:center;position:sticky;top:76px}
@media (max-width:900px){.stage{position:static}}
@media (max-width:700px){.topbar{position:static}}