/* ZaehlWeb — Erscheinungsbild nach dem Ceyeborg-CI.
 *
 * Farben und Schriften stammen aus ceyeb.org: Exo als Hausschrift, Source Code
 * Pro für Zahlen, Mitternachtsblau #000A32 als Grundton, Magenta #E40EAB als
 * einziger Akzent. Die Ampelfarben (gut/Warnung/schlecht) kommen ebenfalls aus
 * der Hauspalette, sind aber bewusst vom Akzent getrennt: der Akzent führt,
 * die Ampel bewertet.
 *
 * Beide Themen hängen an Merkmalen, nie an festen Farben in einem Block —
 * :root trägt Hell vollständig, die beiden Dunkel-Blöcke schreiben nur Marken
 * um. Wer eine Farbe ergänzt, legt sie als Marke an, sonst fehlt sie im
 * jeweils anderen Thema.
 */

:root{
  --nacht:#000A32; --magenta:#E40EAB; --violett:#8539F1;

  --grund:#ffffff; --feld:#F5F5F5; --feld2:#ebebef;
  --schrift:#000A32; --schrift2:#444444; --schrift3:#888888;
  --linie:#e0e0e0; --linie2:#c9c9d2;
  --akzent:#E40EAB; --akzent-weich:#fdeaf7;
  --gut:#067a4e; --gut-weich:#e6f6ee;
  --warn:#8a5a10; --warn-weich:#fdf3e0;
  --schlecht:#cf2e2e; --schlecht-weich:#fdeaea;
  --schatten:0 1px 2px rgba(0,10,50,.06), 0 4px 14px rgba(0,10,50,.05);
  --rund:10px;

  /* Diagrammreihen. Gerechnet, nicht geraten: geprueft auf Farbfehlsichtigkeit
     gegen den jeweiligen Grund (schlechtestes Paar dE 8,5 bei Ziel 8, alle
     Paare, nicht nur benachbarte). Die Reihenfolge ist fest — die Farbe
     gehoert der Reihe, nicht ihrem Rang. */
  --reihe-app:#E40EAB;
  --reihe-bild:#0693e3;
  --reihe-video:#00d084;
  --reihe-kunde:#8539F1;
  --gitterlinie:#ececf0;
  --bandfarbe:#f0eff4;
}
@media (prefers-color-scheme:dark){
  :root:not([data-thema="hell"]){
    --grund:#000A32; --feld:#081541; --feld2:#0d1c50;
    --schrift:#ffffff; --schrift2:#c2cbe6; --schrift3:#8892b4;
    --linie:#17255c; --linie2:#22316e;
    --akzent:#FF3FC0; --akzent-weich:#2a0b34;
    --gut-weich:#062a20;
    --warn:#fcb900; --warn-weich:#2e2308;
    --schlecht:#ff6b6b; --schlecht-weich:#340f12;
    --schatten:0 1px 2px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.35);
    /* Eigene Stufen, keine Umkehrung der hellen: auf Mitternachtsblau liegt
       das zulaessige Helligkeitsband bei L 0,48-0,67, die hellen Toene fielen
       heraus. Gleiche Hues, neu gestuft, wieder geprueft. */
    --reihe-app:#ca0096;
    --reihe-bild:#097abe;
    --reihe-video:#0a8a57;
    --reihe-kunde:#8930fd;
    --gitterlinie:#152352;
    --bandfarbe:#0c1a4a;
  }
}
:root[data-thema="dunkel"]{
  --grund:#000A32; --feld:#081541; --feld2:#0d1c50;
  --schrift:#ffffff; --schrift2:#c2cbe6; --schrift3:#8892b4;
  --linie:#17255c; --linie2:#22316e;
  --akzent:#FF3FC0; --akzent-weich:#2a0b34;
  --gut:#00d084; --gut-weich:#062a20;
  --warn:#fcb900; --warn-weich:#2e2308;
  --schlecht:#ff6b6b; --schlecht-weich:#340f12;
  --schatten:0 1px 2px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.35);
  --reihe-app:#ca0096;
  --reihe-bild:#097abe;
  --reihe-video:#0a8a57;
  --reihe-kunde:#8930fd;
  --gitterlinie:#152352;
  --bandfarbe:#0c1a4a;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--grund); color:var(--schrift);
  font:400 15px/1.6 Exo,"Segoe UI",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.zahl,.z{font-family:"Source Code Pro",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums}
a{color:var(--akzent); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--akzent); outline-offset:2px; border-radius:4px}

/* ---------- Kopf ---------- */
.kopf{position:sticky; top:0; z-index:20; background:var(--grund);
  border-bottom:1px solid var(--linie); padding:10px 16px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.kopf .marke{display:flex; align-items:center; gap:10px; min-width:0}
.kopf .marke img{height:26px; width:auto; display:block}
.kopf .wo{font-weight:600; letter-spacing:-.01em; white-space:nowrap}
.kopf .wo span{color:var(--schrift3); font-weight:400}
.kopf .luft{flex:1 1 auto}
.kopf .wer{color:var(--schrift3); font-size:13px; white-space:nowrap}

/* ---------- Bausteine ---------- */
.huelle{padding:16px; max-width:1400px; margin:0 auto}
.knopf{display:inline-block; background:var(--feld); color:var(--schrift);
  border:1px solid var(--linie2); border-radius:99px; padding:5px 13px;
  font-size:13.5px; cursor:pointer; white-space:nowrap}
.knopf:hover{border-color:var(--schrift3); text-decoration:none}
.knopf[aria-pressed="true"]{background:var(--akzent); border-color:var(--akzent);
  color:#fff; font-weight:500}
.knopf.stark{background:var(--akzent); border-color:var(--akzent); color:#fff;
  font-weight:600; padding:9px 18px; font-size:15px}

.kacheln{display:grid; gap:10px; margin:0 0 16px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.kachel{background:var(--feld); border:1px solid var(--linie); border-radius:var(--rund);
  padding:11px 13px}
.kachel b{display:block; font:600 26px/1.15 "Source Code Pro",monospace;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.kachel span{display:block; color:var(--schrift3); font-size:11.5px;
  text-transform:uppercase; letter-spacing:.06em; margin-top:3px}
.kachel em{font-style:normal; color:var(--schrift3); font-size:11.5px}

.werkzeug{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 14px}
.werkzeug input[type=search]{flex:1 1 190px; min-width:0; background:var(--feld);
  color:var(--schrift); border:1px solid var(--linie2); border-radius:99px;
  padding:7px 15px; font:inherit; font-size:14px}
.werkzeug .gruppe{display:flex; gap:6px; flex-wrap:wrap}

.perle{display:inline-block; border-radius:99px; padding:2px 9px; font-size:12px;
  font-weight:500; border:1px solid transparent; white-space:nowrap}
.perle.gut{background:var(--gut-weich); color:var(--gut); border-color:var(--gut)}
.perle.schlecht{background:var(--schlecht-weich); color:var(--schlecht); border-color:var(--schlecht)}
.perle.warn{background:var(--warn-weich); color:var(--warn); border-color:var(--warn)}
.perle.ruhig{background:var(--feld2); color:var(--schrift2); border-color:var(--linie2)}
.abw.gut{color:var(--gut)} .abw.schlecht{color:var(--schlecht)}

/* ---------- Liste: Karten (Telefon) ---------- */
.karten{display:grid; gap:10px}
.karte{display:block; background:var(--grund); border:1px solid var(--linie);
  border-left:3px solid var(--linie2); border-radius:var(--rund);
  padding:12px 14px; color:inherit; box-shadow:var(--schatten)}
.karte:hover{border-color:var(--schrift3); text-decoration:none}
.karte.raus{border-left-color:var(--schlecht)}
.karte.drin{border-left-color:var(--gut)}
.karte .oben{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.karte .titel{font-weight:600; font-size:14.5px; word-break:break-all}
.karte .unten{display:flex; gap:14px; flex-wrap:wrap; margin-top:9px;
  color:var(--schrift2); font-size:13px}
.karte .unten b{font-family:"Source Code Pro",monospace; font-variant-numeric:tabular-nums;
  color:var(--schrift); font-weight:600}
.karte .unten i{font-style:normal; color:var(--schrift3); font-size:11px;
  text-transform:uppercase; letter-spacing:.05em; display:block}

/* ---------- Liste: Tabelle (Schreibtisch) ---------- */
.rahmen{display:none}
table{border-collapse:collapse; width:100%; font-size:13.5px}
th,td{padding:7px 10px; text-align:left; border-bottom:1px solid var(--linie);
  white-space:nowrap}
thead th{position:sticky; top:0; background:var(--grund); z-index:5;
  font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--schrift3); font-weight:600}
td.n{text-align:right; font-family:"Source Code Pro",monospace;
  font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--feld)}

@media (min-width:860px){
  .karten{display:none}
  .rahmen{display:block; overflow-x:auto; border:1px solid var(--linie);
    border-radius:var(--rund); background:var(--grund)}
  .huelle{padding:20px 24px}
}

/* ---------- Aufnahme ---------- */
.zurueck{display:inline-block; margin:0 0 12px; color:var(--schrift3); font-size:13.5px}
h1{font-size:21px; margin:0 0 4px; letter-spacing:-.02em; text-wrap:balance;
  word-break:break-all}
h2{font-size:12px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--schrift3); margin:24px 0 9px; font-weight:600}
.unterzeile{color:var(--schrift3); font-size:13.5px; margin:0 0 6px}
.paare{display:grid; gap:1px; background:var(--linie); border:1px solid var(--linie);
  border-radius:var(--rund); overflow:hidden}
.paar{display:flex; justify-content:space-between; gap:16px; align-items:baseline;
  background:var(--grund); padding:9px 13px}
.paar dt{color:var(--schrift2); font-size:13.5px}
.paar dd{margin:0; font-family:"Source Code Pro",monospace;
  font-variant-numeric:tabular-nums; font-weight:600; text-align:right}
.spalten{display:grid; gap:18px}
@media (min-width:860px){.spalten{grid-template-columns:1fr 1fr}}

/* ---------- Anmelden ---------- */
.tor{min-height:100dvh; display:grid; place-items:center; padding:24px}
.tor form{width:100%; max-width:340px; display:grid; gap:13px}
.tor img{height:34px; width:auto; margin:0 auto 6px; display:block}
.tor h1{font-size:17px; text-align:center; margin:0 0 2px}
.tor p.sub{text-align:center; color:var(--schrift3); font-size:13.5px; margin:0 0 8px}
.tor label{display:grid; gap:5px; font-size:13px; color:var(--schrift2)}
.tor input{background:var(--feld); color:var(--schrift); border:1px solid var(--linie2);
  border-radius:8px; padding:10px 13px; font:inherit; width:100%}
.tor .fehler{background:var(--schlecht-weich); color:var(--schlecht);
  border:1px solid var(--schlecht); border-radius:8px; padding:9px 12px; font-size:13.5px}
.leer{color:var(--schrift3); padding:36px 12px; text-align:center}

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

/* Sprachumschalter: zwei knappe Knöpfe, die im Kopf nicht auftragen. */
/* Eigenstaendig flex, nicht geerbt: .gruppe traegt display:flex nur unter
   .werkzeug — im Kopf und auf der Anmeldeseite gibt es das nicht, und die
   beiden Formulare des Umschalters standen deshalb untereinander. */
.sprache{display:flex; gap:4px; flex-wrap:nowrap; align-items:center}
.knopf.mini{padding:3px 9px; font-size:12px; letter-spacing:.04em; font-weight:600}


/* ---------- Uebersichtsdiagramm ---------- */
.uebersicht-rahmen{margin:0 0 16px; padding:12px 14px 6px; background:var(--grund);
  border:1px solid var(--linie); border-radius:var(--rund); box-shadow:var(--schatten)}
.uebersicht-rahmen figcaption{display:flex; flex-wrap:wrap; gap:4px 12px;
  align-items:baseline; margin:0 0 8px}
.uebersicht-rahmen figcaption b{font-size:14px; font-weight:600}
.uebersicht-rahmen figcaption span{color:var(--schrift3); font-size:12.5px}

.legende{display:flex; flex-wrap:wrap; gap:6px 16px; margin:0 0 8px; padding:0;
  list-style:none; font-size:12.5px; color:var(--schrift2)}
.legende li{display:flex; align-items:center; gap:6px}
.legende i{width:11px; height:11px; border-radius:3px; display:block; flex:none}
.legende i.trendmarke{height:0; border-top:2px dashed var(--schrift3); border-radius:0}

/* Das Diagramm ist breiter als ein Telefon. Es rollt in seinem eigenen Feld,
   damit die Seite selbst nie seitlich rollt. */
.rollfeld{overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  padding-bottom:4px}
.rollfeld svg{display:block}

svg.uebersicht .gitter line{stroke:var(--gitterlinie); stroke-width:1}
svg.uebersicht .band{fill:var(--bandfarbe)}
svg.uebersicht .null{stroke:var(--linie2); stroke-width:1}
svg.uebersicht .trend{stroke:var(--schrift3); stroke-width:2; stroke-dasharray:5 4}
svg.uebersicht .punkt{stroke:var(--grund); stroke-width:2}   /* 2px Ring, damit
   sich ueberlappende Punkte trennen */
svg.uebersicht .ueber{stroke:var(--grund); stroke-width:1.5}
svg.uebersicht .saeule:hover{filter:brightness(1.12)}
svg.uebersicht text.achse{fill:var(--schrift3); font-size:10.5px;
  font-family:"Source Code Pro",ui-monospace,monospace; font-variant-numeric:tabular-nums}
svg.uebersicht text.achse.schwach{opacity:.72; font-size:9.5px}
svg.uebersicht text.feldname{fill:var(--schrift2); font-size:11px; font-weight:500}

/* Spuren zum Zeigen: unsichtbar, bis der Zeiger darauf steht. */
svg.uebersicht .spur{fill:transparent; cursor:crosshair}
svg.uebersicht .spur:hover,
svg.uebersicht .spur.aktiv{fill:color-mix(in srgb, var(--akzent) 8%, transparent)}
svg.uebersicht .spur:focus-visible{outline:2px solid var(--akzent); outline-offset:-2px}

/* Hinweisfeld — folgt dem Zeiger, bleibt im Rahmen. */
.uebersicht-rahmen{position:relative}
.hinweis{position:absolute; z-index:30; pointer-events:none;
  background:var(--grund); color:var(--schrift);
  border:1px solid var(--linie2); border-radius:9px; padding:9px 11px;
  box-shadow:0 4px 18px rgba(0,10,50,.18); font-size:12.5px; min-width:196px;
  max-width:280px}
.hinweis[hidden]{display:none}
.hinweis .ht{font-weight:600; font-size:13px; margin:0 0 1px; word-break:break-all}
.hinweis .hu{color:var(--schrift3); font-size:11.5px; margin:0 0 7px}
.hinweis .hs{color:var(--schrift3); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.06em; margin:7px 0 3px; border-top:1px solid var(--linie);
  padding-top:5px}
.hinweis .hz{display:flex; align-items:center; gap:7px; padding:1.5px 0}
.hinweis .hz i{width:9px; height:9px; border-radius:2px; flex:none}
.hinweis .hz i.ohne{background:transparent}
.hinweis .hz span{color:var(--schrift2); flex:1 1 auto}
.hinweis .hz b{font-family:"Source Code Pro",ui-monospace,monospace;
  font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap}

/* Kurzes Aufblitzen, wenn im Hintergrund neue Aufnahmen dazugekommen sind. */
.uebersicht-rahmen.frisch{animation:frisch 1.2s ease-out}
@keyframes frisch{from{border-color:var(--akzent); box-shadow:0 0 0 3px var(--akzent-weich)}
  to{border-color:var(--linie); box-shadow:var(--schatten)}}
@media (prefers-reduced-motion:reduce){.uebersicht-rahmen.frisch{animation:none}}

/* Laufende Nummer — dieselbe wie auf der x-Achse des Diagramms. Sie zeigt
   nicht auf die Aufnahme selbst, sondern auf ihren Platz in der aktuellen
   Auswahl: filtert man, wird neu gezaehlt, und das Diagramm zaehlt mit. */
.nr{font-family:"Source Code Pro",ui-monospace,monospace; font-variant-numeric:tabular-nums;
  color:var(--schrift3); font-weight:600}
b.nr{display:inline-block; min-width:1.6em; padding:0 5px; margin-right:4px;
  background:var(--feld2); border-radius:5px; text-align:center; font-size:11.5px}
b.nr.gross{font-size:15px; padding:1px 8px; vertical-align:middle}
td.nr{color:var(--schrift3)}

/* ---------- Bühne: Panorama, Overlay, Video ---------- */
.buehne{margin:0 0 20px}
.reiter{display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:0 0 10px}
.reiter .luft{flex:1 1 auto}
.schalter{display:flex; align-items:center; gap:6px; font-size:13px;
  color:var(--schrift2); cursor:pointer}

/* Das Panorama ist bis 31426 px hoch — es rollt in seinem eigenen Feld,
   damit die Seite selbst nicht endlos wird. */
.tafel{max-height:70vh; overflow:auto; background:var(--feld);
  border:1px solid var(--linie); border-radius:var(--rund);
  -webkit-overflow-scrolling:touch}
/* Der Bezug der Marker ist das Bild, nicht das rollende Feld. */
.tafel-innen{position:relative}
.tafel img{display:block; width:100%; height:auto}
.tafel .marker{position:absolute; inset:0; pointer-events:none}
.tafel .marker i{position:absolute; width:100%; left:0!important;
  border-top:1px solid var(--akzent); opacity:.75}
.tafel .marker i::after{content:""; position:absolute; right:4px; top:-3px;
  width:6px; height:6px; border-radius:50%; background:var(--akzent)}
.buehne .fach[hidden]{display:none}
.buehne video{width:100%; max-height:70vh; background:#000;
  border:1px solid var(--linie); border-radius:var(--rund); display:block}

/* ---------- Schmale Formularseiten ---------- */
.huelle.schmal{max-width:440px}
.formular{display:grid; gap:13px; margin:14px 0 0}
.formular label{display:grid; gap:5px; font-size:13px; color:var(--schrift2)}
.formular input{background:var(--feld); color:var(--schrift);
  border:1px solid var(--linie2); border-radius:8px; padding:10px 13px;
  font:inherit; width:100%}
.formular .fehler{background:var(--schlecht-weich); color:var(--schlecht);
  border:1px solid var(--schlecht); border-radius:8px; padding:9px 12px; font-size:13.5px}
.hinweistext{color:var(--schrift3); font-size:12.5px; margin:0}
a.wer{color:var(--schrift3); text-decoration:none; border-bottom:1px dotted var(--linie2)}
a.wer:hover{color:var(--akzent); text-decoration:none}

/* Streifen je Aufnahme: gerade so sichtbar, dass die Gruppe zusammenhaelt,
   und schwach genug, dass er die Farben der Reihen nicht verfaelscht. */
svg.uebersicht .streifen rect{fill:var(--schrift); opacity:.035}

/* Sprachumschalter auf der Anmeldeseite: oben rechts, wie im Kopf der
   angemeldeten Seiten — dieselbe Ecke, damit man ihn nicht zweimal suchen
   muss. Er sitzt ueber dem Anmeldefeld, nicht davor: die Eingabe soll
   mittig bleiben. */
.tor{position:relative}
.tor-sprache{position:absolute; top:14px; right:16px; z-index:5}

/* ---------- Ladezustand der Bühne ----------
   Solange Bild oder Video nicht da sind, wird das Feld leer gehalten und
   ein Wort gezeigt. Die Marker bleiben unsichtbar: über einem leeren
   Kasten stünden sie alle übereinander am oberen Rand und sähen aus wie
   ein Fehler. */
/* Während des Ladens bleibt das Feld flach. Sonst reserviert das Bild über
   width/height seine volle Höhe — bis 31426 px —, und das mittig gesetzte
   Ladewort läge 15000 px unterhalb des sichtbaren Fensters. Man sähe nur
   eine leere graue Fläche und hielte die Seite für kaputt. */
.tafel-innen.laedt{min-height:260px; max-height:260px; overflow:hidden}
.videofeld.laedt{min-height:260px}
.tafel-innen.laedt img,
.videofeld.laedt video{opacity:0}
.tafel-innen.laedt .marker{visibility:hidden}
.tafel-innen .ladewort,
.videofeld .ladewort,
.tafel-innen .ladefehler,
.videofeld .ladefehler{position:absolute; inset:0; margin:0;
  display:flex; align-items:center; justify-content:center; gap:10px;
  color:var(--schrift3); font-size:13.5px; text-align:center; padding:20px}
.tafel-innen:not(.laedt) .ladewort,
.videofeld:not(.laedt) .ladewort{display:none}
.ladefehler[hidden]{display:none!important}
.ladefehler{color:var(--schlecht)}
.videofeld{position:relative; min-height:220px}

/* Der Punkt links vom Wort dreht sich, damit erkennbar bleibt, dass etwas
   geschieht — bei 25 MB Panorama dauert es. */
.ladewort::before{content:""; width:14px; height:14px; flex:none;
  border:2px solid var(--linie2); border-top-color:var(--akzent);
  border-radius:50%; animation:dreht .8s linear infinite}
@keyframes dreht{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .ladewort::before{animation:none; border-top-color:var(--linie2)}
}
/* Bild und Video blenden weich auf, sobald sie da sind. */
.tafel-innen img,.videofeld video{transition:opacity .25s ease}
@media (prefers-reduced-motion:reduce){
  .tafel-innen img,.videofeld video{transition:none}
}