:root{--brand-a:#9FDE62;--brand-b:#3CD098;--r:12px;
 --font:"Segoe UI",system-ui,-apple-system,sans-serif}
html[data-theme="dark"]{
 --bg:#0E1512;--surface:#151E1A;--surface-2:#1B2621;--surface-3:#22302A;
 --line:#26332D;--line-soft:#1F2B26;--ink:#E9F1EB;--ink-2:#9DB0A4;--ink-3:#6C7F74;
 --brand-ink:#9FDE62;--brand-soft:rgba(159,222,98,.13);--brand-ring:rgba(159,222,98,.30);
 --good:#6BD98A;--warn:#E7B155;--crit:#EC7A63;
 --good-bg:rgba(107,217,138,.14);--warn-bg:rgba(231,177,85,.14);--crit-bg:rgba(236,122,99,.14);
 --shadow:0 10px 30px rgba(0,0,0,.45);--btn-ink:#0C1310}
html[data-theme="light"]{
 --bg:#F2F6F1;--surface:#FFF;--surface-2:#F6FAF5;--surface-3:#EAF1E7;
 --line:#DDE6DA;--line-soft:#E9F0E7;--ink:#17231C;--ink-2:#54655A;--ink-3:#7E8F84;
 --brand-ink:#15795A;--brand-soft:rgba(60,208,152,.14);--brand-ring:rgba(60,208,152,.35);
 --good:#1F7A45;--warn:#9A6608;--crit:#B23A22;
 --good-bg:rgba(31,122,69,.10);--warn-bg:rgba(154,102,8,.10);--crit-bg:rgba(178,58,34,.10);
 --shadow:0 8px 24px rgba(23,35,28,.10);--btn-ink:#08110C}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);font-size:14px;
 line-height:1.5;transition:background .3s,color .3s}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
.top{display:flex;align-items:center;gap:14px;padding:0 20px;height:56px;
 background:linear-gradient(180deg,var(--surface-2),var(--surface));
 border-bottom:1px solid var(--line);box-shadow:0 6px 18px -14px var(--brand-ring);
 position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:10px;font-weight:600}
.brand svg{width:20px;height:29px}
.brand small{color:var(--ink-3);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.spacer{flex:1}
.tgroup{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--line);
 border-radius:99px;padding:3px}
.tgroup button{font-size:12px;padding:5px 13px;border-radius:99px;color:var(--ink-2);transition:.2s}
.tgroup button.on{background:linear-gradient(135deg,var(--brand-b),var(--brand-a));
 color:var(--btn-ink);font-weight:600}
.wer{font-size:12px;color:var(--ink-3)}
.wer b{color:var(--ink);font-weight:600}
.wrap{max-width:1180px;margin:0 auto;padding:24px 20px 60px}
h1{font-size:22px;margin:0 0 3px;font-weight:600;letter-spacing:-.01em}
.sub{color:var(--ink-3);font-size:13px;margin-bottom:22px}
h2{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);
 margin:28px 0 12px;font-weight:600}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tile{padding:16px 18px;background:var(--surface);border:1px solid var(--line);
 border-radius:var(--r);cursor:pointer;transition:.2s;position:relative;overflow:hidden}
.tile:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--brand-ring)}
.tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
 background:linear-gradient(90deg,var(--brand-b),var(--brand-a));opacity:0;transition:.25s}
.tile:hover::after,.tile.on::after{opacity:1}
.tile .lbl{font-size:12px;color:var(--ink-2);display:flex;align-items:center;gap:7px}
.tile .num{font-size:32px;font-weight:600;letter-spacing:-.02em;margin-top:4px;
 font-variant-numeric:tabular-nums}
.tile .hint{font-size:12px;color:var(--ink-3)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.dot.neu{background:var(--brand-a)}.dot.arbeit{background:var(--warn)}
.dot.gewonnen{background:var(--good)}.dot.verloren{background:var(--crit)}
.dot.mute{background:var(--ink-3)}
.rows{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.row{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line-soft);
 transition:background .15s;cursor:pointer}
.row:last-child{border-bottom:0}
.row:hover{background:var(--surface-2)}
.row .nm{font-weight:600}
.row .meta{font-size:12px;color:var(--ink-3)}
.grow{flex:1;min-width:0}
.pill{font-size:11px;padding:3px 10px;border-radius:99px;background:var(--surface-3);
 color:var(--ink-2);white-space:nowrap}
.pill.neu{background:var(--brand-soft);color:var(--brand-ink);border:1px solid var(--brand-ring)}
.pill.arbeit{background:var(--warn-bg);color:var(--warn)}
.pill.gewonnen{background:var(--good-bg);color:var(--good)}
.pill.verloren{background:var(--crit-bg);color:var(--crit)}
.btn{border:1px solid var(--line);background:var(--surface-2);padding:8px 14px;border-radius:99px;
 font-size:13px;transition:.18s;white-space:nowrap}
.btn:hover{border-color:var(--brand-ring)}
.btn.prim{border:0;background:linear-gradient(135deg,var(--brand-b),var(--brand-a));
 color:var(--btn-ink);font-weight:600}
.btn.prim:hover{filter:brightness(1.07)}
.btn.gefahr{border-color:var(--crit);color:var(--crit)}
.btn.klein{padding:5px 11px;font-size:12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.kv{display:grid;grid-template-columns:150px 1fr;gap:10px 16px;font-size:13px}
.kv dt{color:var(--ink-3)}.kv dd{margin:0}
.copy{border-bottom:1px dashed var(--line);cursor:pointer}
.copy:hover{color:var(--brand-ink);border-color:var(--brand-ring)}
.zwei{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
.frist{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r);
 background:var(--warn-bg);color:var(--warn);font-size:13px;margin-bottom:18px}
.frist b{font-weight:600}
.tl{position:relative;padding-left:22px;margin-top:4px}
.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--line)}
.ev{position:relative;padding:0 0 14px}
.ev::before{content:"";position:absolute;left:-21px;top:5px;width:9px;height:9px;border-radius:50%;
 background:var(--brand-a);box-shadow:0 0 0 3px var(--surface)}
.ev .d{font-size:11px;color:var(--ink-3)}
.inp{width:100%;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);
 color:var(--ink);padding:10px 12px;outline:none;font:inherit}
.inp:focus{border-color:var(--brand-ring);box-shadow:0 0 0 3px var(--brand-soft)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.chip{font-size:12px;padding:6px 13px;border-radius:99px;border:1px solid var(--line);
 background:var(--surface);color:var(--ink-2);transition:.18s}
.chip:hover{border-color:var(--brand-ring)}
.chip.on{background:var(--brand-soft);border-color:var(--brand-ring);color:var(--ink);font-weight:600}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);
 font-weight:600;padding:11px 16px;border-bottom:1px solid var(--line);background:var(--surface)}
td{padding:12px 16px;border-bottom:1px solid var(--line-soft)}
tbody tr:last-child td{border-bottom:0}
.num{font-variant-numeric:tabular-nums}
.seite{animation:auf .3s ease}
@keyframes auf{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.menue{background:var(--surface);border-bottom:1px solid var(--line);
 position:sticky;top:56px;z-index:19}
.menue-inner{max-width:1180px;margin:0 auto;padding:0 20px;display:flex;gap:24px}
.mtab{padding:13px 0;font-size:13px;color:var(--ink-3);border-bottom:2px solid transparent;
 margin-bottom:-1px;transition:.18s}
.mtab:hover{color:var(--ink)}
.mtab.on{color:var(--ink);border-color:var(--brand-a);font-weight:600}
.vier{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.schritt{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.schritt:last-child{border-bottom:0}
.nr{width:26px;height:26px;border-radius:50%;background:var(--brand-soft);color:var(--brand-ink);
 border:1px solid var(--brand-ring);display:grid;place-items:center;font-size:12px;font-weight:600;flex:none}
.hinweis{font-size:12px;color:var(--ink-3);line-height:1.6;margin-top:12px}
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:var(--surface);
 border:1px solid var(--line);box-shadow:var(--shadow);padding:12px 20px;border-radius:99px;
 font-size:13px;opacity:0;transition:.3s;pointer-events:none;z-index:60}
.toast.on{opacity:1;transform:translate(-50%,0)}
.balken{height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden;width:120px}
.balken i{display:block;height:100%;border-radius:99px;
 background:linear-gradient(90deg,var(--brand-b),var(--brand-a))}
.kasten{border:1px dashed var(--brand-ring);background:var(--brand-soft);border-radius:var(--r);
 padding:16px 18px;margin-top:16px}
.kasten b{color:var(--brand-ink)}

/* ---------------------------------------------------------------------------
   Ergaenzungen fuer die serverseitig gerenderte Fassung.
   Alles darueber stammt unveraendert aus _input/FS-Leads_Portal-Vorschau.html –
   Farben, Abstaende und Formen sollen genau so bleiben. Hier kommt nur dazu,
   was eine Vorschau ohne Server nicht braucht: Formulare, Meldungen,
   Anmeldeseite und die Tatsache, dass Kacheln und Zeilen hier Links sind.
--------------------------------------------------------------------------- */

a { color: inherit; text-decoration: none }
a.klar { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 2px }
a.klar:hover { filter: brightness(1.1) }

/* Kacheln, Zeilen, Reiter und Chips sind hier <a> statt <button> */
a.tile, a.row, a.mtab, a.chip, a.btn { display: block }
a.mtab, a.chip, a.btn { display: inline-block }
a.row { display: flex }
.mtab { background: none; border-top: 0; border-left: 0; border-right: 0 }

/* Formulare */
form.inline { display: inline }
.feld { margin-bottom: 14px }
.feld > label { display: block; font-size: 12px; color: var(--ink-3); margin-bottom: 6px }
.feld .hinweis { margin-top: 6px }
select.inp, textarea.inp { width: 100%; font: inherit }
textarea.inp { min-height: 90px; resize: vertical }
select.inp { appearance: none; padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 16px) 18px, calc(100% - 11px) 18px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat }
.paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px }
.knopfreihe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px }
button:disabled, .btn.aus { opacity: .45; cursor: not-allowed }

/* Auswahl als Chip: das Steuerelement liegt unsichtbar darunter */
label.chip { cursor: pointer; position: relative }
label.chip input { position: absolute; opacity: 0; width: 0; height: 0 }
label.chip:has(input:checked) {
  background: var(--brand-soft); border-color: var(--brand-ring); color: var(--ink); font-weight: 600 }
label.chip:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--brand-soft) }

/* Meldungen ueber dem Inhalt */
.meldung { padding: 12px 16px; border-radius: var(--r); font-size: 13px; margin-bottom: 18px }
.meldung.ok { background: var(--good-bg); color: var(--good); border: 1px solid var(--good) }
.meldung.fehler { background: var(--crit-bg); color: var(--crit); border: 1px solid var(--crit) }
.meldung ul { margin: 6px 0 0; padding-left: 18px }

/* Breite Tabellen scrollen in sich selbst, nie die ganze Seite */
.huelle { overflow-x: auto }
.rechts { text-align: right }
.leer { padding: 28px 18px; text-align: center; color: var(--ink-3); font-size: 13px }

/* Anmeldung und Passwort setzen */
.mitte { max-width: 380px; margin: 12vh auto 0 }
.mitte .brand { justify-content: center; margin-bottom: 22px; font-size: 18px }
.mitte .brand svg { width: 26px; height: 38px }

.fuss { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line-soft);
  font-size: 12px; color: var(--ink-3); display: flex; gap: 14px; flex-wrap: wrap }

/* Schmale Fenster: die dreispaltigen Raster brechen um, die Seite selbst nicht */
@media (max-width: 880px) {
  .tiles, .vier { grid-template-columns: 1fr 1fr }
  .zwei { grid-template-columns: 1fr }
  .paar { grid-template-columns: 1fr }
  .menue-inner { gap: 16px; overflow-x: auto }
}
@media (max-width: 560px) {
  .tiles, .vier { grid-template-columns: 1fr }
  .top { flex-wrap: wrap; height: auto; padding: 10px 14px; gap: 10px }
  .wer { width: 100% }
  .kv { grid-template-columns: 1fr }
}