/* cockpit — Oberfläche im Corporate Design von 1863 Venture.
   Stylesheet und Bausteine sind aus dem Kundenportal übernommen: Beide
   Anwendungen sollen wie ein Haus aussehen, und ein zweites Gestaltungssystem
   für ein internes Werkzeug wäre Aufwand ohne Gegenwert. Ergänzt sind unten
   nur die Bausteine, die es dort nicht gibt: Zahlentabellen und Regler.

   Marke: Cyan #00aeef und Graphit aus dem Logo, Space Grotesk über Inter,
   kantige Aktionen. Übernommen aus dem Theme der Firmenseite, damit Portal
   und Website nicht auseinanderlaufen.

   Zwei Regeln, die dort teuer gelernt wurden und hier gelten:
   • Das reine Logo-Cyan erreicht auf Weiß nur 2,5:1 — es ist Akzent auf
     dunklem Grund, Farbe der Balken und der Fortschritte, **nie** Text- oder
     Knopffarbe auf Weiß. Tragend ist die abgedunkelte Variante #006994.
   • Der Grund bleibt hell. Eine dunkle Kopfleiste war die erste Fassung und
     wirkte billig; getragen wird die Seite jetzt von Haarlinien, einer
     Cyan-Kante und ruhigem Weiß — die Unterlagen sind die Hauptsache.

   Aufbau der Ansichten: Seitenkopf (worum geht es, was kann ich tun) →
   Kacheln für alles, was man anklickt → Tafeln für alles, was man liest.
   Zeilenlisten gibt es nur noch dort, wo eine Zeile wirklich eine Zeile ist. */

:root{
  --cyan:#00aeef;
  --primaer:#006994; --primaer-dunkel:#005274; --primaer-weich:#e4f3fb; --primaer-rand:#b9dff2;
  --grund:#f2f6f9; --flaeche:#ffffff; --flaeche-2:#f5f8fa; --flaeche-3:#e8eef3;
  --ink:#0b1622; --ink-2:#4d5c69; --ink-3:#7a8794;
  --linie:#e2e9ef; --linie-stark:#c6d2dc;
  --gut:#137a52; --gut-weich:#e2f2ea; --gut-rand:#a8d6c1;
  --warn:#8a5a00; --warn-weich:#faeed8; --warn-rand:#e3c68a;
  --schlecht:#b3261e; --schlecht-weich:#fce4e2; --schlecht-rand:#eeb2ad;
  --s1:0 1px 2px rgba(11,22,34,.05);
  --s2:0 1px 2px rgba(11,22,34,.04), 0 4px 12px -6px rgba(11,22,34,.14);
  --s3:0 2px 4px rgba(11,22,34,.05), 0 18px 40px -24px rgba(11,22,34,.4);
  --anzeige:"Space Grotesk",system-ui,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --text:"Inter",system-ui,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --kante:6px;      /* Aktionen bleiben kantig — Pillen sind Vorlagen-Optik. */
  --kante-2:10px;   /* Flächen dürfen weicher sein. */
}

@font-face{font-family:"Space Grotesk"; src:url("./fonts/space-grotesk-latin.woff2") format("woff2");
  font-weight:300 700; font-display:swap; font-style:normal}
@font-face{font-family:"Inter"; src:url("./fonts/inter-latin.woff2") format("woff2");
  font-weight:100 900; font-display:swap; font-style:normal}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--grund); color:var(--ink); font-family:var(--text);
  font-size:15px; line-height:1.55; letter-spacing:-.003em; -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0; font-family:var(--anzeige); font-weight:700; letter-spacing:-.028em; text-wrap:balance}
p{margin:0}
a{color:var(--primaer); text-underline-offset:2px}
button{font:inherit; color:inherit; cursor:pointer}
input,select,textarea{font:inherit}
:focus-visible{outline:2px solid var(--cyan); outline-offset:2px; border-radius:3px}
code{font-family:var(--mono); font-size:.9em; background:var(--flaeche-3);
  padding:1px 5px; border-radius:3px}
.zahl{font-variant-numeric:tabular-nums}

/* ================= Marke ================= */
.bildmarke{display:block; height:100%; width:auto}
.marke-bild{display:block; height:30px; color:var(--cyan)}
.wortmarke{display:flex; align-items:baseline; gap:7px; font-family:var(--anzeige);
  font-weight:700; letter-spacing:-.02em; line-height:1}
.wortmarke b,.wortmarke i{font-size:20px}
/* „VENTURE" steht im Logo als Versalzeile unter der Zahl — waagerecht daneben
   braucht es etwas Laufweite und einen Hauch weniger Gewicht, sonst drückt es
   die Zahl weg. */
.wortmarke i{font-style:normal; color:var(--cyan); text-transform:uppercase;
  font-weight:600; letter-spacing:.04em; font-size:18px}

/* ================= Kopfleiste ================= */
/* Hell, nicht dunkel: Die dunkle Fassung wirkte billig, und das Logo selbst
   steht auf Weiß — Graphit für die Zahl, Cyan für den Schriftzug. Getragen
   wird die Leiste von einer Haarlinie und der Cyan-Kante darunter, nicht von
   einer Farbfläche. */
.topbar{position:sticky; top:0; z-index:40; display:flex; flex-wrap:wrap; align-items:center;
  gap:10px 20px; padding:12px 26px; background:var(--flaeche); color:var(--ink);
  border-bottom:1px solid var(--linie); box-shadow:0 1px 0 rgba(11,22,34,.02), 0 6px 20px -18px rgba(11,22,34,.5)}
.topbar::after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg,var(--cyan) 0 96px,transparent 96px)}
.brand{display:flex; align-items:center; gap:13px; text-decoration:none; color:var(--ink)}
.produkt{margin-left:9px; padding-left:18px; border-left:1px solid var(--linie);
  font-size:11.5px; text-transform:uppercase; letter-spacing:.15em; color:var(--ink-3)}
.krumen{margin-left:6px; display:flex; gap:8px; align-items:center; min-width:0;
  font-size:13.5px; color:var(--ink-3)}
.krumen a{color:var(--ink-2); text-decoration:none; font-weight:550}
.krumen a:hover{color:var(--primaer)}
.krumen span.sep{color:var(--linie-stark)}
.wer{margin-left:auto; display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink-2)}
.wer #werName{display:inline-flex; align-items:center; gap:8px; font-weight:550}
.wer #werName::before{content:''; width:7px; height:7px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 0 3px rgba(0,174,239,.2)}
@media (max-width:760px){ .produkt,.krumen{display:none} }

/* ================= Seitengerüst ================= */
main{max-width:1240px; margin:0 auto; padding:28px 22px 72px}
.leer{padding:64px 0; text-align:center; color:var(--ink-3)}

.seitenkopf{display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px 24px; margin-bottom:22px}
.seitenkopf .titelblock{flex:1; min-width:min(300px,100%)}
.seitenkopf h1{font-size:clamp(24px,3.4vw,33px); line-height:1.1}
.obertitel{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.13em;
  color:var(--primaer); margin-bottom:7px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.obertitel::before{content:''; width:16px; height:2px; background:var(--cyan); flex:0 0 auto}
.unterzeile{margin-top:7px; color:var(--ink-2); font-size:14px}
.seitenkopf .aktionen{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

.spalten{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(280px,.85fr); gap:22px; align-items:start}
@media (max-width:980px){ .spalten{grid-template-columns:1fr} }
/* Ohne die Protokollspalte würden die Anforderungen sonst über die volle
   Fensterbreite laufen — jenseits von etwa 90 Zeichen liest das niemand mehr. */
.stapel{max-width:1000px}
.stapel{display:flex; flex-direction:column; gap:22px; min-width:0}

/* ================= Knöpfe ================= */
button.knopf,a.knopf{display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 16px; background:var(--primaer); color:#fff; border:1px solid transparent;
  border-radius:var(--kante); text-decoration:none; font-weight:600; font-size:14px;
  letter-spacing:-.01em; box-shadow:var(--s1); transition:background .12s, transform .08s}
button.knopf:hover,a.knopf:hover{background:var(--primaer-dunkel)}
button.knopf:active,a.knopf:active{transform:translateY(1px)}
button.ghost,a.ghost{display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 13px; background:var(--flaeche); border:1px solid var(--linie-stark);
  border-radius:var(--kante); color:var(--ink-2); text-decoration:none; font-size:13.5px;
  font-weight:550; transition:border-color .12s, color .12s, background .12s}
button.ghost:hover,a.ghost:hover{border-color:var(--primaer); color:var(--primaer); background:var(--primaer-weich)}
/* `.hell` stammt aus der dunklen Kopfleiste und ist jetzt ein gewöhnlicher
   Knopf — die Klasse bleibt, damit die Schale unverändert bleiben kann. */
button.ghost.hell{background:var(--flaeche); border-color:var(--linie-stark); color:var(--ink-2)}
button.gefahr{color:var(--schlecht); border-color:var(--schlecht-rand)}
button.gefahr:hover{border-color:var(--schlecht); color:var(--schlecht); background:var(--schlecht-weich)}
button[disabled]{opacity:.5; cursor:not-allowed}

/* ================= Kacheln ================= */
.raster{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:16px}
.kachel{display:flex; flex-direction:column; gap:12px; padding:18px; background:var(--flaeche);
  border:1px solid var(--linie); border-radius:var(--kante-2); box-shadow:var(--s2);
  text-decoration:none; color:inherit; position:relative; overflow:hidden;
  transition:box-shadow .15s, border-color .15s, transform .12s}
a.kachel:hover{box-shadow:var(--s3); border-color:var(--primaer-rand); transform:translateY(-2px)}
/* Cyan-Kante beim Überfahren — dasselbe Motiv wie die Balken der Bildmarke. */
a.kachel::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--cyan); opacity:0; transition:opacity .15s}
a.kachel:hover::before{opacity:1}
.kachel-kopf{display:flex; align-items:flex-start; gap:12px}
.kachel-kopf h3{font-size:16.5px; line-height:1.25; flex:1; min-width:0}
.signet{flex:0 0 auto; width:38px; height:38px; border-radius:9px; display:grid; place-items:center;
  background:var(--primaer-weich); color:var(--primaer); font-family:var(--anzeige);
  font-weight:700; font-size:14px; letter-spacing:0}
.kachel .meta{font-size:12.5px; color:var(--ink-3)}
.kachel-fuss{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12.5px; color:var(--ink-2);
  padding-top:12px; border-top:1px solid var(--linie); margin-top:auto}
.kachel-fuss b{font-weight:650; font-variant-numeric:tabular-nums}

/* ================= Fortschritt ================= */
.fortschritt{height:6px; background:var(--flaeche-3); border-radius:99px; overflow:hidden}
.fortschritt i{display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,var(--primaer),var(--cyan)); transition:width .4s ease}
.fortschritt.fertig i{background:var(--gut)}
.fortschrittzeile{display:flex; align-items:center; gap:12px}
.fortschrittzeile .fortschritt{flex:1}
.fortschrittzeile .wert{font-size:12.5px; color:var(--ink-2); font-variant-numeric:tabular-nums;
  white-space:nowrap; font-weight:600}

/* ================= Tafeln ================= */
.tafel{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--kante-2);
  box-shadow:var(--s2); overflow:hidden}
.tafel>header{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:15px 20px; border-bottom:1px solid var(--linie); background:var(--flaeche-2)}
.tafel>header h2{font-size:15.5px; letter-spacing:-.02em}
.tafel>header .rechts{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
.zaehler{font-size:12px; font-weight:700; color:var(--primaer); background:var(--primaer-weich);
  border:1px solid var(--primaer-rand); padding:2px 9px; border-radius:99px;
  font-variant-numeric:tabular-nums}
.tafel .inhalt{padding:18px 20px}
.tafel .inhalt+.inhalt{border-top:1px solid var(--linie)}

/* ================= Anforderungsliste ================= */
.anfliste{list-style:none; margin:0; padding:0}
.anf{padding:16px 20px 16px 17px; border-bottom:1px solid var(--linie); border-left:3px solid transparent}
.anf:last-child{border-bottom:0}
.anf.ist-offen{border-left-color:var(--linie-stark)}
.anf.ist-eingereicht{border-left-color:var(--cyan); background:linear-gradient(90deg,var(--primaer-weich),transparent 42%)}
.anf.ist-angenommen{border-left-color:var(--gut)}
.anf.ist-nachgefordert{border-left-color:var(--schlecht); background:linear-gradient(90deg,var(--schlecht-weich),transparent 42%)}
.anf-kopf{display:flex; align-items:flex-start; gap:10px 14px; flex-wrap:wrap}
.anf-kopf h3{font-size:15.5px; flex:1; min-width:min(220px,100%); line-height:1.35}
.anf-hinweis{margin-top:4px; font-size:13px; color:var(--ink-3); max-width:64ch}
.anf-rueckmeldung{margin-top:10px; padding:9px 12px; border-radius:var(--kante);
  background:var(--schlecht-weich); border:1px solid var(--schlecht-rand);
  color:var(--schlecht); font-size:13px}
.anf-aktionen{display:flex; gap:7px; flex-wrap:wrap; margin-top:12px}

/* ================= Marken ================= */
.marke{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:99px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; white-space:nowrap;
  border:1px solid transparent}
.marke::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor}
.m-offen{background:var(--flaeche-3); color:var(--ink-2)}
.m-eingereicht{background:var(--primaer-weich); color:var(--primaer); border-color:var(--primaer-rand)}
.m-in_arbeit{background:var(--warn-weich); color:var(--warn); border-color:var(--warn-rand)}
.m-bereit{background:var(--gut-weich); color:var(--gut); border-color:var(--gut-rand)}
.m-abgeschlossen{background:var(--flaeche-3); color:var(--ink-3)}
.m-angenommen{background:var(--gut-weich); color:var(--gut); border-color:var(--gut-rand)}
.m-nachgefordert{background:var(--schlecht-weich); color:var(--schlecht); border-color:var(--schlecht-rand)}
.m-pflicht{background:transparent; color:var(--ink-3); border-color:var(--linie-stark)}
.m-pflicht::before{display:none}
.frist{display:inline-flex; align-items:center; gap:5px}
.frist-nah{color:var(--schlecht); font-weight:650}

/* ================= Dateien ================= */
.dateien{list-style:none; margin:12px 0 0; padding:0; font-size:13.5px}
.dateien li{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; padding:9px 12px;
  background:var(--flaeche-2); border:1px solid var(--linie); border-radius:var(--kante); margin-bottom:6px}
.dateien li:last-child{margin-bottom:0}
/* Nur der Dateiname darf sich die freie Breite nehmen und abschneiden — die
   Knöpfe behalten ihre. Galt das `flex:1` für jeden Link in der Zeile, war der
   Name auf null gequetscht und vom Abruf blieb ein Pfeil. */
.dateien .name{flex:1 1 190px; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; font-weight:600; display:flex; align-items:center; gap:8px}
.dateien .name::before{content:''; flex:0 0 auto; width:16px; height:18px; border-radius:2px;
  background:var(--primaer-rand);
  clip-path:polygon(0 0,68% 0,100% 26%,100% 100%,0 100%)}
.dateien .klein{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; color:var(--ink-3); font-size:12px; font-variant-numeric:tabular-nums}
.dateien .bemerkung{flex:1 1 100%; font-size:12.5px; color:var(--ink-2);
  padding-left:24px; margin-top:-2px}
.dateien .bemerkung::before{content:'„'}
.dateien .bemerkung::after{content:'"'}
.dateien .klein-knopf{flex:0 0 auto; padding:6px 12px; font-size:12.5px; white-space:nowrap}
@media (max-width:620px){ .dateien .name{flex:1 1 100%} }

/* ================= Ablegefeld ================= */
.ablage{border:2px dashed var(--linie-stark); border-radius:var(--kante-2); padding:26px 20px;
  text-align:center; color:var(--ink-2); background:var(--flaeche-2); transition:.15s}
.ablage:hover{border-color:var(--primaer-rand); background:var(--primaer-weich)}
.ablage.warm{border-color:var(--cyan); background:var(--primaer-weich); color:var(--primaer)}
.ablage .pfeil{display:block; width:40px; height:40px; margin:0 auto 10px; border-radius:11px;
  background:var(--flaeche); border:1px solid var(--linie); color:var(--primaer);
  display:grid; place-items:center; font-size:19px; box-shadow:var(--s1)}
.ablage strong{display:block; font-weight:650; margin-bottom:3px}
.balken{height:5px; background:var(--flaeche-3); border-radius:99px; overflow:hidden; margin-top:14px}
.balken i{display:block; height:100%; background:linear-gradient(90deg,var(--primaer),var(--cyan));
  width:0; transition:width .15s}

/* ================= Zeitstrahl (Protokoll) ================= */
.zeitstrahl{list-style:none; margin:0; padding:4px 0 0; max-height:520px; overflow:auto}
.zeitstrahl li{position:relative; padding:0 0 16px 22px; font-size:13px}
.zeitstrahl li::before{content:''; position:absolute; left:3px; top:5px; width:8px; height:8px;
  border-radius:50%; background:var(--flaeche); border:2px solid var(--primaer-rand)}
.zeitstrahl li:first-child::before{border-color:var(--cyan); background:var(--cyan)}
.zeitstrahl li::after{content:''; position:absolute; left:6.5px; top:15px; bottom:0; width:1px;
  background:var(--linie)}
.zeitstrahl li:last-child{padding-bottom:0}
.zeitstrahl li:last-child::after{display:none}
.zeitstrahl .zeit{color:var(--ink-3); font-size:11px; font-variant-numeric:tabular-nums;
  letter-spacing:-.01em}
.zeitstrahl .wer{font-weight:600; color:var(--ink-2)}

/* ================= Personenliste ================= */
.personen{list-style:none; margin:0; padding:0}
.personen li{display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  padding:13px 20px; border-bottom:1px solid var(--linie)}
.personen li:last-child{border-bottom:0}
.personen .haupt{flex:1; min-width:min(200px,100%)}
.personen .titel{font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.personen .unter{font-size:12.5px; color:var(--ink-3); margin-top:2px}
.personen .werkzeuge{display:flex; gap:6px; flex-wrap:wrap}

/* ================= Leerzustand ================= */
.leerzustand{padding:40px 24px; text-align:center; color:var(--ink-3)}
.leerzustand svg{width:46px; height:auto; color:var(--primaer-rand); margin-bottom:14px}
.leerzustand strong{display:block; color:var(--ink-2); font-weight:650; margin-bottom:4px}

/* ================= Formulare ================= */
.feld{display:flex; flex-direction:column; gap:5px; margin-bottom:15px}
.feld label{font-size:11px; font-weight:700; color:var(--ink-2);
  text-transform:uppercase; letter-spacing:.1em}
.feld input,.feld select,.feld textarea{padding:10px 12px; background:var(--flaeche);
  color:var(--ink); border:1px solid var(--linie-stark); border-radius:var(--kante);
  transition:border-color .12s, box-shadow .12s}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--primaer);
  box-shadow:0 0 0 3px rgba(0,174,239,.16); outline:none}
.feld ::placeholder{color:var(--ink-3); opacity:1}
.feld input:-webkit-autofill{-webkit-text-fill-color:var(--ink); box-shadow:inset 0 0 0 100px var(--flaeche-2)}
.feld input[type=checkbox]{width:18px; height:18px; accent-color:var(--primaer)}
.feld textarea{min-height:74px; resize:vertical}
.hilfe{font-size:12.5px; color:var(--ink-3)}

/* ================= Anmeldung ================= */
.anmeldeseite{position:fixed; inset:0; z-index:50; color:var(--ink);
  background:radial-gradient(90% 70% at 50% -10%, #e7f5fd 0%, var(--grund) 58%);
  display:flex; align-items:center; justify-content:center; padding:24px; overflow:auto}
.anmeldung{width:min(420px,100%)}
.anmeldung .lockup{display:flex; align-items:center; gap:14px; margin-bottom:26px}
.anmeldung .marke-bild{height:44px}
.anmeldung .wortmarke b,.anmeldung .wortmarke i{font-size:27px}
.anmeldung .tafel{border-top:3px solid var(--cyan); box-shadow:var(--s3)}
.anmeldung h1{font-size:26px; margin-bottom:6px}
.anmeldung .inhalt>p{color:var(--ink-2); font-size:14px; margin-bottom:20px}
.anmeldung .knopf{width:100%; padding:12px}

/* ================= Meldung und Dialog ================= */
#meldung{position:fixed; right:22px; bottom:22px; background:#0b1f2d; color:#fff;
  padding:12px 18px; border-radius:var(--kante); box-shadow:var(--s3);
  border-left:3px solid var(--cyan); max-width:min(420px,90vw); z-index:60; font-size:14px;
  animation:auftauchen .18s ease-out}
#meldung.fehler{background:var(--schlecht); border-left-color:#fff}
@keyframes auftauchen{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@media (max-width:620px){ #meldung{left:16px; right:16px; max-width:none} }

dialog.weit{max-width:min(680px,94vw)}
dialog.weit .zeitstrahl{max-height:min(60vh,520px)}
dialog{border:0; border-top:3px solid var(--cyan); border-radius:var(--kante-2);
  background:var(--flaeche); color:var(--ink); padding:26px; max-width:min(520px,92vw);
  box-shadow:0 30px 70px -24px rgba(7,15,24,.55)}
dialog::backdrop{background:rgba(7,15,24,.55); backdrop-filter:blur(2px)}
dialog h2{margin-bottom:6px; font-size:21px}
dialog>form>.hilfe{margin-bottom:18px}
dialog .aktionen{display:flex; gap:8px; justify-content:flex-end; margin-top:22px}
.zugangszettel{font-family:var(--mono); background:var(--flaeche-2); border:1px solid var(--linie);
  border-left:3px solid var(--cyan); border-radius:var(--kante); padding:14px; font-size:13.5px;
  line-height:1.8; word-break:break-all}

@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }


/* ================= Zahlentabelle ================= */
.tabelle{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
.tabelle th{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-3); text-align:right; padding:0 0 8px; border-bottom:1px solid var(--linie)}
.tabelle th:first-child{text-align:left}
.tabelle td{padding:7px 0; font-size:13.5px; text-align:right; border-bottom:1px solid var(--linie)}
.tabelle td:first-child{text-align:left; color:var(--ink-2)}
.tabelle tr:last-child td{border-bottom:0}
.tabelle tr.summe td{font-weight:700; color:var(--ink); border-top:1.5px solid var(--linie-stark);
  border-bottom:0; padding-top:9px}
.tabelle tr.summe td:first-child{color:var(--ink)}
.tabelle td+td{padding-left:14px}
.tabelle .gut{color:var(--gut)}
.tabelle .schlecht{color:var(--schlecht)}
.tabelle .leise{color:var(--ink-3); font-size:12.5px}
.tabelle tr.rot td{background:#fdf0ef}
.tabelle input{width:100%; text-align:right; padding:6px 8px; border:1px solid var(--linie);
  border-radius:var(--kante); background:var(--flaeche-2); color:var(--ink)}
.tabelle input:focus{border-color:var(--primaer); background:var(--flaeche); outline:none}
.tabellenrahmen{overflow-x:auto}

/* ================= Regler ================= */
.regler{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px}
.regler label{display:block; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink-2); margin-bottom:6px}
.regler input[type=range]{width:100%; accent-color:var(--primaer)}
.regler .wert{font-size:15px; font-weight:650; font-variant-numeric:tabular-nums}

/* ================= Kennzahlen ================= */
.kennzahlen{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px}
.kennzahl{padding:14px 16px; background:var(--flaeche-2); border-left:3px solid var(--cyan);
  border-radius:0 var(--kante) var(--kante) 0}
.kennzahl.gut{border-left-color:var(--gut)}
.kennzahl.schlecht{border-left-color:var(--schlecht)}
.kennzahl .name{font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.09em; color:var(--ink-3)}
.kennzahl .wert{font-family:var(--anzeige); font-size:21px; font-weight:700; margin-top:5px;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.kennzahl .unter{font-size:12px; color:var(--ink-2); margin-top:3px}

.vorschau{font-size:12px; max-height:180px; overflow:auto; border:1px solid var(--linie);
  border-radius:var(--kante); background:var(--flaeche-2); padding:10px}
.vorschau code{background:none; padding:0}


/* ================= Modulreiter ================= */
.reiter{display:flex; gap:4px; margin:-6px 0 22px; border-bottom:1px solid var(--linie)}
.reiter a{padding:9px 16px; text-decoration:none; color:var(--ink-2); font-size:14px;
  font-weight:600; border-bottom:2px solid transparent; margin-bottom:-1px}
.reiter a:hover{color:var(--primaer)}
.reiter a.aktiv{color:var(--primaer); border-bottom-color:var(--cyan)}

/* ================= Berichtseditor ================= */
.abschnitt{border:1px solid var(--linie); border-left:3px solid var(--cyan);
  border-radius:0 var(--kante) var(--kante) 0; padding:14px 16px; margin-bottom:14px;
  background:var(--flaeche)}
.abschnitt.ist-zahlen{border-left-color:var(--linie-stark); background:var(--flaeche-2)}
.abschnitt-kopf{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.abschnitt-kopf input{flex:1; min-width:200px; padding:7px 10px; font-weight:600;
  border:1px solid transparent; border-radius:var(--kante); background:transparent; color:var(--ink)}
.abschnitt-kopf input:hover{border-color:var(--linie)}
.abschnitt-kopf input:focus{border-color:var(--primaer); background:var(--flaeche); outline:none}
.abschnitt-kopf strong{flex:1; min-width:150px}
.abschnitt-kopf .werkzeuge{display:flex; gap:5px; flex-wrap:wrap}
.abschnitt textarea{width:100%; padding:11px 12px; border:1px solid var(--linie-stark);
  border-radius:var(--kante); background:var(--flaeche); color:var(--ink); resize:vertical;
  line-height:1.6; font-size:14px}
.abschnitt textarea:focus{border-color:var(--primaer); box-shadow:0 0 0 3px rgba(0,174,239,.16); outline:none}
.abschnitt .hilfe{margin:0}
.platzhalter{display:flex; flex-wrap:wrap; gap:5px; margin-top:9px}
.platzhalter button{padding:3px 9px; font-size:11.5px; font-family:var(--mono);
  background:var(--flaeche-2); border:1px solid var(--linie); border-radius:99px; color:var(--ink-2)}
.platzhalter button:hover{border-color:var(--primaer); color:var(--primaer); background:var(--primaer-weich)}
.platzhalter button.mehr{font-family:var(--text); font-weight:600}
.vorschau-zeile{margin-top:10px; padding-top:9px; border-top:1px dashed var(--linie);
  font-size:12.5px; color:var(--ink-2); display:flex; gap:8px}
.vorschau-zeile .wie{flex:0 0 auto; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; font-size:10px; color:var(--ink-3); padding-top:2px}


/* ================= Vorschaugrafiken ================= */
.grafik{width:100%; height:118px; margin-top:12px; display:block; overflow:visible}
.grafik .achse{stroke:var(--linie-stark); stroke-width:.8}
.grafik .kurve{fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round;
  vector-effect:non-scaling-stroke}
.grafik .beschriftung{font-size:9px; fill:var(--ink-3); text-anchor:middle;
  font-family:var(--text)}
.grafik .inbalken{font-size:10px; fill:#fff; font-weight:700; text-anchor:middle;
  font-family:var(--text)}

.zwei-spalten{display:grid; grid-template-columns:1fr 1fr; gap:24px}
@media (max-width:760px){ .zwei-spalten{grid-template-columns:1fr} }

/* ================= Anmeldung ================= */
/* Eine Karte, mittig, ohne Bild und ohne Verlauf: Es ist ein Werkzeug, kein
   Produktauftritt. Die Marke steht darüber, damit klar ist, wo man ist. */
.anmeldung{max-width:26rem; margin:9vh auto 0; display:flex; flex-direction:column; gap:20px}
.anmeldung-marke{display:flex; align-items:center; gap:13px; justify-content:center}
.anmeldung .tafel{box-shadow:var(--s3)}
.anmeldung .feld{margin-top:14px}
.hinweiskasten{margin:14px 0 0; padding:10px 13px; border-radius:var(--kante); font-size:13.5px;
  border:1px solid var(--linie-stark); background:var(--flaeche-2)}
.hinweiskasten.schlecht{background:var(--schlecht-weich); border-color:var(--schlecht-rand); color:var(--schlecht)}
.hinweiskasten.warn{background:var(--warn-weich); border-color:var(--warn-rand); color:var(--warn)}
.hinweiskasten.gut{background:var(--gut-weich); border-color:var(--gut-rand); color:var(--gut)}

/* Wer ist angemeldet — rechts in der Kopfleiste. */
.werknopf{display:flex; align-items:center; gap:8px; padding:5px 11px; border-radius:var(--kante);
  border:1px solid var(--linie); background:var(--flaeche); font-size:13px}
.werknopf:hover{border-color:var(--linie-stark); background:var(--flaeche-2)}
.werknopf .kuerzel{font-weight:700; letter-spacing:.02em}
.werknopf .leise{color:var(--ink-3); font-size:12px}

/* ================= Planmatrix ================= */
/* Zwölf Monate mal zehn Positionen. Die Positionsspalte bleibt beim Blättern
   stehen — ohne sie weiß nach der vierten Spalte niemand mehr, welche Zeile
   er gerade tippt. */
.matrixrahmen{overflow-x:auto}
.matrix{border-collapse:separate; border-spacing:0; font-size:12.5px; min-width:100%}
.matrix th,.matrix td{padding:4px 6px; white-space:nowrap; border-bottom:1px solid var(--linie)}
.matrix thead th{position:sticky; top:0; z-index:2; background:var(--flaeche); font-size:11px;
  font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; text-align:right}
.matrix th.pos,.matrix td.pos{position:sticky; left:0; z-index:1; background:var(--flaeche);
  text-align:left; min-width:190px; box-shadow:1px 0 0 var(--linie)}
.matrix thead th.pos{z-index:3}
.matrix input{width:78px; padding:3px 6px; text-align:right; border:1px solid transparent;
  border-radius:4px; background:transparent; font-variant-numeric:tabular-nums; color:var(--ink)}
.matrix input:hover{border-color:var(--linie)}
.matrix input:focus{border-color:var(--cyan); background:var(--flaeche); outline:none}
.matrix tr.summe td{background:var(--flaeche-2); font-weight:650}
.matrix tr.summe td.pos{background:var(--flaeche-2)}
.matrix td.jahr,.matrix th.jahr{text-align:right; font-variant-numeric:tabular-nums;
  border-left:1px solid var(--linie-stark); font-weight:600; min-width:110px}
.matrix td.zahl{text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-2)}
.matrix .zeilenwerkzeug{opacity:0; font-size:11px; margin-left:8px}
.matrix tr:hover .zeilenwerkzeug{opacity:1}

/* Szenarienstreifen über der Matrix. */
.szenarien{display:flex; gap:8px; flex-wrap:wrap}
.szenariokarte{flex:1 1 190px; padding:12px 14px; border:1px solid var(--linie);
  border-radius:var(--kante-2); background:var(--flaeche); text-decoration:none; color:inherit;
  border-left-width:3px}
.szenariokarte:hover{border-color:var(--linie-stark); box-shadow:var(--s2)}
.szenariokarte.aktiv{border-color:var(--primaer-rand); background:var(--primaer-weich)}
.szenariokarte .kopf{display:flex; align-items:center; gap:8px; font-weight:650; font-size:14px}
.szenariokarte .zahlen{margin-top:7px; font-size:12.5px; color:var(--ink-2);
  display:flex; flex-direction:column; gap:2px; font-variant-numeric:tabular-nums}
.szenariokarte b{font-weight:650}

/* Freischaltungen im Rechtedialog. */
.hakenliste{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:6px 14px;
  max-height:220px; overflow:auto; padding:10px 12px; border:1px solid var(--linie);
  border-radius:var(--kante); background:var(--flaeche-2)}
.haken{display:flex; align-items:center; gap:8px; font-size:13.5px}
.haken input{width:auto; margin:0}