:root { color-scheme: dark; --bg:#101827; --panel:#1a2538; --line:#435570; --text:#edf3fb; --muted:#b8c6da; --accent:#a9efca; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.6 system-ui,sans-serif; }
a { color:var(--accent); text-underline-offset:3px; }
header,footer { padding:20px max(20px,calc((100% - 1120px)/2)); border-bottom:1px solid var(--line); display:flex; gap:20px; flex-wrap:wrap; }
footer { border-top:1px solid var(--line); border-bottom:0; color:var(--muted); }
main { max-width:1120px; padding:24px; margin:auto; }
h1 { font-size:clamp(1.8rem,5vw,3rem); line-height:1.2; } h2 { margin-top:0; }
.intro { max-width:70ch; }.notice { padding:14px; border-left:4px solid var(--accent); color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:20px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px; margin:18px 0; min-width:0; }
.stats { display:flex; flex-wrap:wrap; gap:20px; }.stats div { flex:1; min-width:150px; }.stats strong { display:block; font-size:1.7rem; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin:14px 0; }
button { background:var(--accent); color:#12251c; border:1px solid var(--accent); border-radius:8px; padding:12px 18px; font:inherit; cursor:pointer; min-height:44px; }
button.secondary { background:transparent; color:var(--text); border-color:var(--line); }button:disabled { opacity:.55; cursor:wait; }
label { display:block; margin:12px 0; }input,select,textarea { width:100%; padding:12px; font:inherit; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:6px; }
textarea { min-height:130px; } table { border-collapse:collapse; width:100%; }th,td { padding:12px 8px; text-align:left; border-bottom:1px solid var(--line); } .table { overflow-x:auto; }
p,li,td { overflow-wrap:anywhere; }.muted { color:var(--muted); }.danger { border-color:#f4b3a7; }
:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }.skip { position:absolute; top:-100px; left:12px; padding:12px; background:var(--panel); }.skip:focus { top:8px; }
[hidden] { display:none !important; }@media(max-width:600px) { main { padding:16px; }.card { padding:16px; }header,footer { padding:16px; } }

.code-editor { font-family: monospace; min-height: 15rem; tab-size: 2; }
#projekt-preview iframe, #kunden-preview iframe { width: 100%; height: 28rem; border: 1px solid #526174; background: white; }

section[id] { scroll-margin-top: 20px; }
nav[aria-label="Arbeitsbereiche"] { margin-block: 20px; gap: 16px; }