/* TOMIGX Operations.
   Ruhig statt Science-Fiction: keine Kaesten, keine Scanlinien. Gliederung
   ueber Abstand, eine feine Linie unter jeder Ueberschrift und klare
   Schriftgroessen. Text traegt Text-Farben; Status-Farben erscheinen nur
   als Punkt mit Symbol und Wort daneben. */

:root {
  color-scheme: dark;
  --ebene: #03080f;
  --linie: rgba(39, 216, 255, 0.16);
  --linie-leise: rgba(39, 216, 255, 0.07);
  --akzent: #27d8ff;
  --akzent-hell: #7fe9ff;
  --akzent-spur: #0e3547;
  --text: #e4f6ff;
  --text-2: #9fc6d8;
  --text-3: #6a91a4;
  --gut: #0ca30c;
  --warn: #fab219;
  --krit: #d03b3b;
  --schrift: "Bahnschrift", "DIN Alternate", "Segoe UI", system-ui, sans-serif;
  --schrift-schmal: "Bahnschrift SemiCondensed", "Bahnschrift", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(39, 216, 255, 0.07), transparent 70%), var(--ebene);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 14px;
  line-height: 1.45;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; }
a { color: var(--akzent-hell); text-decoration: none; }
a:hover { text-decoration: underline; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.seite { max-width: 1880px; margin: 0 auto; padding: 18px 28px 20px; }

/* --- Kopf ------------------------------------------------------------------------ */

.kopf { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding-bottom: 16px; margin-bottom: 26px; border-bottom: 1px solid var(--linie); }
.logo { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.logo-name { font-family: var(--schrift-schmal); font-size: 21px; font-weight: 600; letter-spacing: 0.24em; }
.logo-sub { font-family: var(--schrift-schmal); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--akzent); }
.uhr { text-align: center; }
.uhr-zeit { display: block; font-size: 28px; font-weight: 300; letter-spacing: 0.06em; }
.uhr-datum { display: block; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.kopf-rechts { display: flex; justify-content: flex-end; align-items: center; gap: 4px 14px; flex-wrap: wrap; }
.kopf-btn { background: none; border: none; padding: 4px 0; color: var(--text-2); font-size: 12.5px; cursor: pointer; border-bottom: 1px solid transparent; }
.kopf-btn:hover, .kopf-btn:focus-visible { color: var(--text); border-bottom-color: var(--akzent); outline: none; }
.kopf-btn.aktiv { color: var(--akzent-hell); }

/* --- Raster ------------------------------------------------------------------------ */

.raster {
  display: grid;
  gap: 38px 44px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(330px, 0.95fr);
  grid-template-areas:
    "server   reaktor  reaktor  verlauf"
    "sicher   reaktor  reaktor  verlauf"
    "web      lage     lage     verlauf"
    "web      chatbot  verkehr  verlauf"
    "postfach vertrieb aufgaben verlauf";
  align-items: start;
}
.b-reaktor { grid-area: reaktor; }
.b-lage { grid-area: lage; }
.b-server { grid-area: server; }
.b-sicherheit { grid-area: sicher; }
.b-web { grid-area: web; }
.b-chatbot { grid-area: chatbot; }
.b-verkehr { grid-area: verkehr; }
.b-postfach { grid-area: postfach; }
.b-vertrieb { grid-area: vertrieb; }
.b-aufgaben { grid-area: aufgaben; }

/* Die rechte Spalte bleibt beim Scrollen stehen - Liste oben, Chat-Verlauf
   darunter wie ein Live-Ticker. */
.seite-rechts {
  grid-area: verlauf;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-left: 26px;
  border-left: 1px solid var(--linie);
  min-width: 0;
}
.b-notizen { flex: none; max-height: 44%; display: flex; flex-direction: column; min-height: 0; }
.b-notizen .notizen { overflow-y: auto; min-height: 0; }
.b-verlauf { flex: 1; min-height: 0; display: flex; flex-direction: column; }

@media (max-width: 1320px) {
  .raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "reaktor reaktor" "lage verlauf" "server verlauf" "sicher postfach"
      "web chatbot" "verkehr vertrieb" "aufgaben aufgaben";
  }
  .seite-rechts { position: static; max-height: none; }
  .b-notizen { max-height: none; }
  .b-verlauf { max-height: 720px; }
}
@media (max-width: 760px) {
  .seite { padding: 12px 16px; }
  .kopf { grid-template-columns: 1fr; text-align: center; gap: 10px; }
  .logo, .kopf-rechts { justify-content: center; }
  .raster { gap: 30px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "reaktor" "lage" "verlauf" "postfach" "server" "sicher" "web" "chatbot" "verkehr" "vertrieb" "aufgaben"; }
  .seite-rechts { padding-left: 0; border-left: none; }
  .b-verlauf { max-height: 640px; }
}

/* --- Bereiche: keine Kaesten, nur Ueberschrift mit Linie ------------------------- */

.bereich { min-width: 0; }
.bereich h2 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--linie);
  font-family: var(--schrift-schmal);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--akzent);
}
.bereich h2 .meta { font-family: var(--schrift); font-weight: 400; font-size: 11.5px; letter-spacing: 0; text-transform: none; color: var(--text-3); }
.veraltet { opacity: 0.55; }

h3 {
  margin: 18px 0 8px;
  font-family: var(--schrift-schmal);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* --- Status ---------------------------------------------------------------------- */

.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); white-space: nowrap; }
.status i {
  width: 15px; height: 15px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-style: normal; font-weight: 700; font-size: 9.5px; color: #02070d;
  background: var(--c); flex: none;
}
.s-ok { --c: var(--gut); }
.s-warnung { --c: var(--warn); }
.s-kritisch { --c: var(--krit); }
.s-info, .s-unbekannt { --c: var(--text-3); }
.gesamt .status { font-size: 13px; }

/* --- Zeilen und Kennzahlen -------------------------------------------------------- */

.zeilen { display: grid; gap: 7px; }
.zeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-width: 0; }
.zeile > .l { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeile > .r { color: var(--text); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.zeile.umbruch { align-items: flex-start; }
.zeile.umbruch > .r { white-space: pre-line; line-height: 1.5; }
.leise { color: var(--text-3); }
.mono { font-family: var(--mono); font-size: 12px; }

.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 12px 16px; margin-bottom: 4px; }
.kennzahl .wert { display: block; font-size: 27px; font-weight: 300; line-height: 1.1; }
.kennzahl .label { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 3px; }
.kennzahl .zusatz { display: block; font-size: 11.5px; color: var(--text-2); }
.gross { font-size: 42px; font-weight: 300; line-height: 1; }
.kopfzeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }

/* --- Anzeigen ---------------------------------------------------------------------- */

.ringe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.ring-anzeige { text-align: center; }
.ring-anzeige svg { width: 100%; max-width: 96px; display: block; margin: 0 auto; }
.ring-anzeige .spur { fill: none; stroke: var(--akzent-spur); stroke-width: 7; }
.ring-anzeige .fuell { fill: none; stroke-width: 7; stroke-linecap: round; transition: stroke-dasharray 0.8s ease; }
.ring-anzeige .fuell.s-ok { stroke: var(--akzent); }
.ring-anzeige .fuell.s-warnung { stroke: var(--warn); }
.ring-anzeige .fuell.s-kritisch { stroke: var(--krit); }
.ring-anzeige .ring-wert { font-family: var(--schrift); font-size: 19px; font-weight: 300; fill: var(--text); }
.ring-anzeige .ring-unter { font-family: var(--schrift); font-size: 9.5px; fill: var(--text-3); }
.ring-anzeige .label { font-size: 11.5px; color: var(--text-2); }

.meter { display: grid; gap: 4px; }
.meter-kopf { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.meter-kopf .l { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meter-kopf .r { color: var(--text); font-variant-numeric: tabular-nums; }
.meter-spur-h { height: 4px; background: var(--akzent-spur); border-radius: 2px; overflow: hidden; }
.meter-fuell { height: 100%; border-radius: 2px; background: var(--akzent); transition: width 0.8s ease; }
.meter-fuell.s-warnung { background: var(--warn); }
.meter-fuell.s-kritisch { background: var(--krit); }

.plakette { font-size: 10.5px; color: var(--text-3); margin-left: 6px; }
.plakette.kunde { color: var(--akzent-hell); }

.diagramm { margin-top: 10px; }
.diagramm svg { width: 100%; height: auto; display: block; overflow: visible; }
.diagramm .achse { stroke: var(--akzent-spur); stroke-width: 1; }
.diagramm .fuellung { fill: var(--akzent); opacity: 0.8; }
.diagramm .bar { outline: none; }
.diagramm .bar:hover .fuellung, .diagramm .bar:focus .fuellung { opacity: 1; }
.diagramm .treffer { fill: transparent; }
.diagramm .achsentext { font-family: var(--schrift); font-size: 9.5px; fill: var(--text-3); }
.diagramm .linie { fill: none; stroke: var(--akzent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.diagramm .flaeche { fill: var(--akzent); opacity: 0.08; }
.diagramm .punkt { fill: var(--akzent); stroke: var(--ebene); stroke-width: 2; }
.diagramm .fadenkreuz { stroke: var(--linie); stroke-width: 1; }
.diagramm-fuss { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; font-size: 11.5px; }
.tabelle-btn { background: none; border: none; color: var(--text-3); font-size: 11.5px; cursor: pointer; padding: 0; }
.tabelle-btn:hover, .tabelle-btn:focus-visible { color: var(--akzent-hell); outline: none; }
.werttabelle { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 12px; }
.werttabelle td { padding: 2px 4px; border-bottom: 1px solid var(--linie-leise); }
.werttabelle td:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Listen ------------------------------------------------------------------------ */

.liste { list-style: none; margin: 0; padding: 0; }
.liste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--linie-leise); min-width: 0; }
.liste li:last-child { border-bottom: none; }
.liste .l { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
.liste .l > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste .r { color: var(--text-2); white-space: nowrap; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.led { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }

/* --- Reaktor ---------------------------------------------------------------------- */

.reaktor { position: relative; width: min(100%, 580px); aspect-ratio: 1; margin: -6px auto 0; }
.reaktor-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring { transform-box: view-box; transform-origin: 300px 300px; }
.r1 circle { fill: none; stroke: rgba(39, 216, 255, 0.35); stroke-width: 1; stroke-dasharray: 2 9; }
.r1 { animation: drehen 120s linear infinite; }
.r2 line { stroke: var(--akzent); stroke-width: 1.2; opacity: 0.4; }
.r2 line.lang { opacity: 0.8; stroke-width: 1.8; }
.r3 circle { fill: none; stroke: var(--akzent); stroke-width: 3; stroke-dasharray: 62 22; opacity: 0.35; }
.r3 { animation: drehen 70s linear infinite reverse; }
.r4 circle { fill: none; stroke: var(--akzent-hell); stroke-width: 1; stroke-dasharray: 1 6; opacity: 0.5; }
.r4 { animation: drehen 40s linear infinite; }
.meter-spur { fill: none; stroke: var(--akzent-spur); stroke-width: 10; }
.meter-wert { fill: none; stroke: var(--akzent); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 0 1194; transition: stroke-dasharray 1.2s ease, stroke 0.6s; }
.meter-wert.s-warnung { stroke: var(--warn); }
.meter-wert.s-kritisch { stroke: var(--krit); }
.kern-scheibe { fill: rgba(3, 8, 15, 0.9); stroke: rgba(39, 216, 255, 0.3); stroke-width: 1; }

.kern { position: absolute; left: 50%; top: 50%; width: 40%; aspect-ratio: 1; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.kern-zahl { font-size: clamp(44px, 5vw, 72px); font-weight: 300; line-height: 1; }
.kern-zahl small { font-size: 0.42em; color: var(--text-2); margin-left: 2px; }
.kern-label { font-size: 11.5px; color: var(--text-3); margin-top: 6px; }
.kern-stufe { margin-top: 8px; }

.knoten-ebene { position: absolute; inset: 0; }
.knoten {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: none; padding: 4px 6px; cursor: pointer; text-align: center;
  text-shadow: 0 0 6px var(--ebene), 0 0 12px var(--ebene), 0 0 18px var(--ebene);
}
.knoten:focus-visible { outline: 1px solid var(--akzent); outline-offset: 2px; }
.knoten .k-name { font-size: 12px; color: var(--text); }
.knoten .k-wert { font-family: var(--mono); font-size: 11px; color: var(--text-3); white-space: nowrap; }
.knoten.s-kritisch .k-wert { color: #ff8a8a; }
.knoten.s-warnung .k-wert { color: var(--warn); }
.verbindung { stroke-width: 1.2; fill: none; }
.verbindung.s-ok { stroke: rgba(39, 216, 255, 0.35); stroke-dasharray: 3 9; animation: fliessen 2s linear infinite; }
.verbindung.s-warnung { stroke: rgba(250, 178, 25, 0.6); stroke-dasharray: 6 6; }
.verbindung.s-kritisch { stroke: var(--krit); stroke-width: 1.8; }
.verbindung.s-info, .verbindung.s-unbekannt { stroke: rgba(106, 145, 164, 0.35); stroke-dasharray: 2 8; }

@media (max-width: 760px) {
  .knoten .k-wert { display: none; }
  .knoten .k-name { font-size: 10px; }
}

/* --- Chat-Verlauf ---------------------------------------------------------------- */

.verlauf-leiste { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.verlauf-leiste select { background: var(--ebene); color: var(--text); border: 1px solid var(--linie); padding: 5px 8px; font: inherit; font-size: 12.5px; border-radius: 2px; }
.verlauf-zahlen { font-size: 12px; color: var(--text-3); }
.verlauf-liste { overflow-y: auto; min-height: 0; flex: 1; padding-right: 6px; }
.tag-titel { position: sticky; top: 0; z-index: 1; background: var(--ebene); padding: 10px 0 6px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.gespraech { position: relative; padding-left: 16px; border-left: 1px solid var(--linie-leise); }
.gespraech::before { content: ""; position: absolute; left: -4px; top: 13px; width: 7px; height: 7px; border-radius: 50%; background: var(--akzent-spur); }
.gespraech.lead::before { background: var(--akzent); }
.gespraech.neu::before { background: var(--akzent-hell); box-shadow: 0 0 0 3px rgba(127, 233, 255, 0.18); }
.g-kopf { display: block; width: 100%; text-align: left; background: none; border: none; padding: 7px 0 9px; cursor: pointer; }
.g-kopf:hover .g-vorschau, .g-kopf:focus-visible .g-vorschau { color: var(--text); }
.g-kopf:focus-visible { outline: 1px solid var(--akzent); outline-offset: 2px; }
.g-zeile1 { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--text-3); }
.g-zeit { color: var(--text-2); font-variant-numeric: tabular-nums; }
.g-mandant { text-transform: uppercase; letter-spacing: 0.08em; font-size: 10.5px; }
.g-mandant.kunde { color: var(--akzent-hell); }
.g-marke { font-size: 11px; }
.g-marke.lead { color: var(--akzent-hell); }
.g-marke.luecke { color: var(--warn); }
.g-vorschau { display: block; margin-top: 3px; color: var(--text-2); font-size: 13px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.g-info { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-nachrichten { padding: 2px 0 12px; display: grid; gap: 8px; }
.n { font-size: 13px; line-height: 1.45; }
.n-wer { display: block; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1px; }
.n-user .n-text { color: var(--text); }
.n-bot .n-text { color: var(--text-2); }
.n-luecke .n-wer::after { content: " · kein Treffer"; color: var(--warn); text-transform: none; letter-spacing: 0; }
.n-text { white-space: pre-wrap; word-wrap: break-word; }
.verlauf-leer { color: var(--text-3); font-size: 13px; padding: 8px 0; }

/* --- Eigene Liste ------------------------------------------------------------ */

.notiz-form { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.notiz-form input { flex: 1; min-width: 0; background: transparent; border: none; border-bottom: 1px solid var(--linie); color: var(--text); padding: 6px 0; font: inherit; font-size: 13px; }
.notiz-form input:focus { outline: none; border-bottom-color: var(--akzent); }
.notiz-form input::placeholder { color: var(--text-3); }
.notizen { list-style: none; margin: 0; padding: 0; }
.notiz { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--linie-leise); font-size: 13px; }
.notiz:last-child { border-bottom: none; }
.notiz input { accent-color: var(--akzent); width: 14px; height: 14px; margin: 2px 0 0; flex: none; cursor: pointer; }
.notiz label { flex: 1; min-width: 0; word-wrap: break-word; cursor: pointer; }
.notiz.weg { opacity: 0; transition: opacity 0.25s ease; }
.notizen-schalter { align-self: flex-start; font-size: 12px; margin-top: 8px; }
.notizen-verlauf { margin-top: 6px; max-height: 220px; overflow-y: auto; }
.notizen-verlauf .notiz { color: var(--text-3); }
.notizen-verlauf .notiz-text { text-decoration: line-through; flex: 1; min-width: 0; word-wrap: break-word; }
.notiz-wann { display: block; font-size: 11px; text-decoration: none; margin-top: 1px; }
.notiz-aktionen { display: flex; gap: 10px; flex: none; font-size: 11.5px; }
.notizen-leer { color: var(--text-3); font-size: 12.5px; padding: 4px 0; }

/* Inhalte verbergen: fuer Vorfuehrungen und Bildschirmfotos. */
.verborgen .privat { filter: blur(5px); user-select: none; }

/* --- Postfach ---------------------------------------------------------------------- */

.mails { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; }
.mail { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; gap: 1px 10px; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--linie-leise); padding: 7px 0; cursor: pointer; }
.mail:hover .betreff, .mail:focus-visible .betreff { color: var(--text); }
.mail:focus-visible { outline: 1px solid var(--akzent); outline-offset: 2px; }
.mail .punkt { grid-row: span 2; align-self: center; width: 6px; height: 6px; border-radius: 50%; }
.mail.neu .punkt { background: var(--akzent); }
.mail .von { color: var(--text-2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail.neu .von { color: var(--text); font-weight: 600; }
.mail .zeit { color: var(--text-3); font-size: 11.5px; white-space: nowrap; }
.mail .betreff { grid-column: 2 / 4; color: var(--text-2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail.neu .betreff { color: var(--text); }
.unterzeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; font-size: 12px; color: var(--text-3); flex-wrap: wrap; }

.formular { display: grid; gap: 7px; }
.formular label { font-size: 11.5px; color: var(--text-3); margin-top: 4px; }
.formular input { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--linie); color: var(--text); padding: 7px 0; font: inherit; border-radius: 0; }
.formular input:focus { outline: none; border-bottom-color: var(--akzent); }
.formular .reihe { display: grid; grid-template-columns: 1fr 80px; gap: 12px; }
.formular .hinweis { font-size: 12px; color: var(--text-3); }
.meldung { font-size: 12.5px; min-height: 17px; margin: 4px 0; }
.meldung.fehler { color: #ff8a8a; }
.meldung:empty { display: none; }

.knopf { display: inline-block; background: none; border: 1px solid var(--akzent); color: var(--text); font-size: 12.5px; padding: 7px 14px; cursor: pointer; border-radius: 2px; }
.knopf:hover, .knopf:focus-visible { background: rgba(39, 216, 255, 0.1); outline: none; text-decoration: none; }
.knopf.zweit { border-color: var(--linie); color: var(--text-2); }
.link { background: none; border: none; color: var(--akzent-hell); cursor: pointer; padding: 0; font-size: inherit; }
.link:hover { text-decoration: underline; }

/* --- Aufgaben, Lage ---------------------------------------------------------------- */

.aufgaben { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.aufgabe { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; font-size: 13px; }
.aufgabe.erledigt { color: var(--text-3); text-decoration: line-through; }
.aufgabe input { accent-color: var(--akzent); width: 14px; height: 14px; margin: 2px 0 0; flex: none; cursor: pointer; }
.aufgabe .status { margin-top: 1px; }
.aufgabe .auto { font-size: 10px; color: var(--text-3); margin-left: 6px; text-decoration: none; display: inline-block; }

.meldungen { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.meldungen li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; }
.ereignisse { list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: 11.5px; color: var(--text-2); display: grid; gap: 3px; max-height: 130px; overflow-y: auto; }
.ereignisse .zeit { color: var(--text-3); margin-right: 8px; }

/* --- Fuss ------------------------------------------------------------------------ */

.fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 34px; padding-top: 12px; border-top: 1px solid var(--linie); }
.links { display: flex; gap: 6px 18px; flex-wrap: wrap; font-size: 12.5px; }
.links a { color: var(--text-2); }
.links a:hover { color: var(--text); }
.fuss-status { font-family: var(--mono); font-size: 11px; color: var(--text-3); }

/* --- Overlays ---------------------------------------------------------------------- */

.overlay { position: fixed; inset: 0; z-index: 20; background: rgba(1, 4, 8, 0.82); display: grid; place-items: center; padding: 20px; }
.overlay[hidden] { display: none; }
.leser { width: min(820px, 100%); max-height: 88vh; display: flex; flex-direction: column; background: var(--ebene); border-top: 1px solid var(--akzent); padding: 18px 22px 20px; }
.leser-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.leser-kopf h2 { margin: 0; font-size: 17px; font-weight: 400; }
.x { background: none; border: none; color: var(--text-2); cursor: pointer; font-size: 16px; padding: 0 4px; }
.x:hover { color: var(--text); }
.leser-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--text-3); font-size: 12.5px; margin: 6px 0 12px; flex-wrap: wrap; }
.leser-text { flex: 1; overflow: auto; margin: 0; padding: 12px 0; border-top: 1px solid var(--linie-leise); border-bottom: 1px solid var(--linie-leise); white-space: pre-wrap; word-wrap: break-word; font-family: var(--schrift); font-size: 14px; line-height: 1.55; }
.leser-anhaenge { font-size: 12px; color: var(--text-3); margin-top: 8px; }
.leser-aktionen { display: flex; gap: 10px; margin-top: 14px; }
.getrennt { max-width: 440px; text-align: center; }
.getrennt h2 { font-weight: 400; margin: 0 0 8px; }
.getrennt p { color: var(--text-2); margin: 0; }

.tip { position: fixed; z-index: 30; pointer-events: none; background: var(--ebene); border: 1px solid var(--linie); padding: 6px 9px; font-size: 12px; color: var(--text-2); max-width: 280px; }
.tip strong { display: block; color: var(--text); font-size: 14px; font-weight: 600; }

/* --- Anmeldung ------------------------------------------------------------------ */

body.anmelden { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.anmelde-box { width: min(340px, 100%); display: grid; gap: 22px; }
.anmelde-box .logo { justify-content: center; }
.anmelde-box .knopf { justify-self: start; margin-top: 6px; }
.anmelde-box .leise { font-size: 12px; margin: 0; }

/* --- Bewegung (nur die Ringe, sehr langsam) ------------------------------------ */

@keyframes drehen { to { transform: rotate(360deg); } }
@keyframes fliessen { to { stroke-dashoffset: -24; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}