:root{--paper:#eeede6;--ink:#101218;--blue:#244df7;--muted:#71757c;--line:#dad8cc;--white:#fff;
  --gruen:#1c6b4a;--gelb:#a97b12;--rot:#a4322a}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.55}
a{color:inherit;text-decoration:none}

.kopf{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  padding:14px clamp(16px,4vw,40px);background:rgba(238,237,230,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.kopf__links{display:flex;align-items:baseline;gap:8px}
.marke{font-weight:700;letter-spacing:.02em;font-size:14px}
.marke__sub{font-size:10px;letter-spacing:.18em;color:var(--muted)}
.tabs{display:flex;gap:6px;margin-left:auto}
.tabs button{border:1px solid var(--line);background:transparent;border-radius:100px;padding:8px 16px;
  font:inherit;font-size:13px;color:var(--muted);cursor:pointer}
.tabs button.aktiv{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.kopf__status{font-size:11px;color:var(--muted);letter-spacing:.1em}

main{max-width:1280px;margin:0 auto;padding:clamp(24px,4vw,48px) clamp(16px,4vw,40px) 100px}
.eyebrow{font-size:10px;letter-spacing:.18em;color:var(--muted);margin:0 0 12px}
h1{font-size:clamp(28px,4vw,42px);letter-spacing:-.025em;line-height:1.08;margin:0 0 14px;font-weight:600}
.lead{color:var(--muted);max-width:64ch;margin:0 0 34px}

.fluss{display:flex;flex-direction:column;gap:18px}
.reihe{display:flex;align-items:stretch;gap:0;flex-wrap:wrap}
.knoten{position:relative;flex:1 1 240px;min-width:220px;background:var(--white);border:1px solid var(--line);
  border-radius:14px;padding:16px 18px 18px;cursor:pointer;transition:transform .14s ease, box-shadow .14s ease}
.knoten:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(16,18,24,.08)}
.knoten__nr{position:absolute;top:12px;right:14px;font-size:10px;letter-spacing:.1em;color:var(--muted)}
.knoten strong{display:block;font-size:15px;margin:0 0 4px;padding-right:32px}
.knoten small{display:block;color:var(--muted);font-size:12.5px;line-height:1.45}
.badge{display:inline-block;margin-top:10px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:100px;font-weight:600}
.badge--ok{background:#e2f0e8;color:var(--gruen)}
.badge--manuell{background:#f7edd6;color:var(--gelb)}
.badge--warn{background:#f7edd6;color:var(--gelb)}
.badge--offen{background:#f6e3e1;color:var(--rot)}
.pfeil{flex:0 0 34px;position:relative;align-self:center;height:2px;background:var(--line)}
.pfeil::after{content:'';position:absolute;right:-1px;top:-4px;border-left:7px solid var(--line);
  border-top:5px solid transparent;border-bottom:5px solid transparent}
.knoten[data-art="auto"]{border-left:3px solid #cfe3d6}
.knoten[data-art="manuell"]{border-left:3px solid #f0dcae}
.knoten[data-art="offen"]{border-left:3px solid #eec7c2}

.eingabe{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;background:var(--white);
  border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:30px}
.eingabe label{flex:1 1 260px;font-size:12px;font-weight:600}
.eingabe input{display:block;width:100%;margin-top:6px;padding:11px 13px;font:inherit;font-size:14px;
  border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.btn{border:0;border-radius:100px;padding:12px 22px;font:inherit;font-size:14px;font-weight:600;
  background:var(--blue);color:#fff;cursor:pointer}
.blatt{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:16px 18px;flex:1 1 200px;min-width:190px}
.blatt strong{display:block;font-size:14px;margin-bottom:2px}
.blatt small{color:var(--muted);font-size:12px}
.gruppe{margin:0 0 10px;font-size:11px;letter-spacing:.14em;color:var(--muted)}
@media(max-width:820px){.pfeil{display:none}.knoten{min-width:100%}}