/* Ergänzungen zum übernommenen Grundstil (style.css) und das dunkle Farbschema.
   Was dort schon steht, wird dort genutzt und hier nicht nachgebaut.

   Eine Namensklärung vorweg, weil sie sonst dauerhaft verwirrt: Im übernommenen
   Stil heißt .karte eine Inhaltskachel. Die Landkarte dieses Werkzeugs heißt
   deshalb .landkarte. */

/* =====================================================================
   Dunkles Farbschema

   Palette wie in MD-Assist und im Bewerbermanagement. Dunkel ist die
   Voreinstellung und steht direkt im :root -- so gibt es beim Laden kein
   kurzes Aufblitzen einer hellen Seite. Wer lieber hell arbeitet, setzt ueber
   den Umschalter im Kopf data-thema="hell" auf <html>; ein winziges Skript im
   <head> jeder Seite liest die Wahl aus dem Sitzungsspeicher, bevor der Stil
   greift.
   ===================================================================== */

:root {
  --bg:#12171F;
  --surface:#1A212B;
  --ink:#E6EBF2;
  --ink-soft:#93A1B5;
  --line:#2C3644;

  --blue:#60A5FA;
  --blue-deep:#93C5FD;
  --blue-tint:#1B2A41;

  --yellow:#FCD34D;
  --yellow-ink:#FCD34D;
  --yellow-tint:#3A2F0B;

  --green:#86EFAC;
  --green-ink:#86EFAC;
  --green-tint:#14351F;

  --red:#FCA5A5;
  --red-tint:#3D1618;

  --lightblue:#7DD3FC;
  --purple:#C4A0C2;
  --gray-ink:#93A1B5;
  --gray-tint:#232B36;

  --eingabe-bg:#141A23;
  --auf-akzent:#0B1017;
  --schatten:rgba(0,0,0,.45);

  --logo-navy:#9CC5EC;
  --logo-papier:#12171F;

  /* Die Landkarte. Rasterkacheln sind hell gerendert; auf dunklem Grund werden
     sie gedaempft, damit die Route darauf noch lesbar bleibt. */

  /* Die eigene Vektorkarte. Gedaempft und kontrastarm gehalten: Sie ist
     Hintergrund, nicht Inhalt -- die Route muss darauf sofort ins Auge fallen. */
}

:root[data-thema="hell"] {
  --bg:#F4F7FA;
  --surface:#FFFFFF;
  --ink:#17262B;
  --ink-soft:#5A6B70;
  --line:#DFE6EC;

  --blue:#003E77;
  --blue-deep:#002C55;
  --blue-tint:#E4EDF6;

  --yellow:#FFD405;
  --yellow-ink:#8F7400;
  --yellow-tint:#FFF7D1;

  --green:#4DAF45;
  --green-ink:#2F7A29;
  --green-tint:#E7F5E5;

  --red:#B2452F;
  --red-tint:#F9E9E5;

  --lightblue:#70CAF3;
  --purple:#A862A4;
  --gray-ink:#5A6B70;
  --gray-tint:#ECEFF0;

  --eingabe-bg:#FFFFFF;
  --auf-akzent:#FFFFFF;
  --schatten:rgba(23,38,43,.14);

  --logo-navy:#003E77;
  --logo-papier:#FFFFFF;


}

/* =====================================================================
   Eingabefelder

   style.css setzt background:#fff hart auf input, select und textarea. Auf
   dunklem Grund stand die Schrift damit weiss auf weiss -- in Auswahlfeldern
   war schlicht nichts zu lesen.

   color-scheme ist der zweite Teil und wichtiger, als er aussieht: Ohne diese
   Angabe zeichnet der Browser die Aufklappliste eines <select>, die
   Bildlaufleisten und die Zahlenpfeile weiterhin im hellen Systemschema --
   Teile, an die kein Stylesheet herankommt.
   ===================================================================== */

/* =====================================================================
   Seitenwechsel

   Jede Ansicht ist eine eigene Seite -- das ist Absicht: Es gibt keinen
   Anwendungszustand im Browser, der beim Wechsel verlorengehen koennte, und
   jede Adresse laesst sich weitergeben und neu laden. Der Preis war ein harter
   Schnitt bei jedem Klick.

   Zwei Massnahmen dagegen, beide ohne eine Zeile JavaScript:

   1. Der Hintergrund steht auf <html> und wird zusaetzlich vom Schnipsel im
      <head> gesetzt, bevor ueberhaupt ein Stylesheet gelesen ist. Das
      Aufblitzen war der eigene weisse Grund des Browsers zwischen zwei
      Dokumenten.
   2. Die View-Transition-API blendet den Wechsel weich ueber. Browser, die sie
      nicht kennen, laden schlicht wie bisher -- es faellt nichts aus.
   ===================================================================== */

@view-transition { navigation: auto; }

html { background: var(--bg); }

::view-transition-old(root) { animation: ausblenden .12s ease both; }
::view-transition-new(root) { animation: einblenden .16s ease both; }

@keyframes ausblenden { to { opacity: 0; } }
@keyframes einblenden { from { opacity: 0; } }

/* Die Kopfzeile bleibt stehen, statt mitzublenden. Sie ist auf allen Seiten
   dieselbe; sie mitzuanimieren liesse sie flackern, obwohl sich nichts an ihr
   aendert. */
header { view-transition-name: kopfzeile; }
::view-transition-group(kopfzeile) { animation-duration: 0s; }

/* Wer Bewegung im Betriebssystem abgestellt hat, bekommt keine. Das ist keine
   Hoeflichkeit -- ueberblendende Flaechen loesen bei manchen Menschen
   Schwindel aus. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

:root { color-scheme: dark; }
:root[data-thema="hell"] { color-scheme: light; }

input, select, textarea { background: var(--eingabe-bg); }
option { background: var(--surface); color: var(--ink); }
::placeholder { color: var(--ink-soft); opacity: 1; }

.dialog-huelle { z-index: 400; }

/* --- Logo --- */
.logo { display:flex; align-items:center; gap:10px; }
.logo-zeichen { height:38px; width:38px; flex:0 0 auto; }
.logo-wort {
  font-family: var(--font-display, Arial, Helvetica, sans-serif);
  font-size:19px; font-weight:600; letter-spacing:1.4px;
  color: var(--logo-navy); white-space:nowrap;
}
.logo[data-form="lockup"] { flex-direction:column; gap:14px; }
.logo[data-form="lockup"] .logo-zeichen { height:84px; width:84px; }
.logo[data-form="lockup"] .logo-wort { font-size:30px; letter-spacing:3px; }
.logo-unterzeile {
  font-size:11.5px; letter-spacing:2.2px; color:var(--ink-soft);
  text-transform:uppercase; text-align:center;
}

.thema-knopf {
  border:1px solid var(--line); background:transparent; color:var(--ink-soft);
  border-radius:8px; width:32px; height:32px; line-height:1; font-size:15px; padding:0;
}
.thema-knopf:hover { color:var(--blue); border-color:var(--blue); }

/* Zahnrad mit Klappmenue. Dahinter liegt, was zur Verwaltung gehoert und nicht
   zur taeglichen Arbeit -- wie in den Geschwisterwerkzeugen. */
.zahnrad-huelle { position:relative; display:flex; }
.kopfmenue {
  position:absolute; top:38px; right:0; z-index:500; min-width:180px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 6px 24px var(--schatten); padding:6px; display:flex;
  flex-direction:column; gap:2px;
}
.kopfmenue a {
  display:block; padding:8px 12px; border-radius:7px; font-size:13.5px;
  color:var(--ink); text-decoration:none; white-space:nowrap;
}
.kopfmenue a:hover { background:var(--blue-tint); color:var(--blue); }
.kopfmenue a.aktiv { color:var(--blue); font-weight:600; }

/* =====================================================================
   Betriebslage

   Steht ganz oben auf der Startseite. Ein fehlender Adressindex oder ein
   toter Routing-Dienst soll auffallen, BEVOR jemand einen Lauf startet und
   sich hinterher ueber 2.000 Fehlermeldungen wundert.
   ===================================================================== */

/* Eine Zeile mit dem, was das Ergebnis bestimmt. Alles Weitere einen Klick
   entfernt auf der Grundlagenseite. */
.profil-zeile {
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  flex-wrap:wrap; font-size:13px; color:var(--ink-soft); margin:0 0 26px;
}

.lage { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:12px; }
.lage-feld {
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; display:flex; gap:11px; align-items:flex-start;
}
.lage-feld .ampel { margin-top:5px; }
.lage-name { font-size:11.5px; letter-spacing:.7px; text-transform:uppercase;
             color:var(--ink-soft); margin-bottom:3px; }
.lage-wert { font-size:13.5px; font-weight:600; line-height:1.4; }
.lage-feld.stoerung { border-color:var(--red); background:var(--red-tint); }

/* =====================================================================
   Ablage fuer den Upload
   ===================================================================== */

.ablage {
  border:2px dashed var(--line); border-radius:12px; padding:34px 24px;
  text-align:center; background:var(--surface); transition:border-color .15s, background .15s;
}
.ablage.bereit { border-color:var(--blue); background:var(--blue-tint); }
.ablage h3 { margin:0 0 6px; font-size:16px; }
.ablage p { color:var(--ink-soft); font-size:13px; margin:0 0 16px; }
.ablage input[type=file] { display:none; }

/* =====================================================================
   Fortschritt eines Laufs
   ===================================================================== */

.fortschritt-schiene {
  height:9px; background:var(--gray-tint); border-radius:5px; overflow:hidden;
  margin:12px 0 8px;
}
.fortschritt-balken {
  height:100%; background:var(--blue); border-radius:5px; width:0;
  transition:width .4s ease;
}
.fortschritt-zeile { display:flex; justify-content:space-between; gap:12px;
                     font-size:13px; color:var(--ink-soft); }

/* =====================================================================
   Verteilung der Ergebnisse als Band

   Bewusst ein Band und kein Tortendiagramm: Die Frage lautet nicht »wie viel
   Prozent«, sondern »wie viele Faelle muss ich noch anfassen«. Ein Band, das
   sich anklicken laesst und dabei die Liste filtert, beantwortet genau das.
   ===================================================================== */

.verteilung { display:flex; height:34px; border-radius:8px; overflow:hidden;
              border:1px solid var(--line); margin:6px 0 10px; }
.verteilung-teil {
  display:flex; align-items:center; justify-content:center; font-size:12px;
  font-weight:700; color:var(--auf-akzent); cursor:pointer; min-width:0;
  border:none; padding:0; transition:filter .15s;
}
.verteilung-teil:hover { filter:brightness(1.15); }
.verteilung-teil.berechtigt { background:var(--green); }
.verteilung-teil.grenzfall { background:var(--yellow); }
.verteilung-teil.nicht_berechtigt { background:var(--gray-ink); }
.verteilung-teil.nacharbeit { background:var(--red); }
.verteilung-teil.fehler { background:var(--red); filter:brightness(.8); }
.verteilung-teil.offen { background:var(--blue); }
.verteilung-legende { display:flex; flex-wrap:wrap; gap:14px; font-size:12px;
                      color:var(--ink-soft); }
.verteilung-legende span { display:flex; align-items:center; gap:6px; }

/* =====================================================================
   Statusschilder in der Ergebnisliste
   ===================================================================== */

.schild {
  display:inline-block; padding:2px 9px; border-radius:20px; font-size:11.5px;
  font-weight:700; white-space:nowrap;
}
.schild.laeuft { background:var(--yellow-tint); color:var(--yellow-ink); }
.schild.beendet { background:var(--green-tint); color:var(--green-ink); }
.schild.abgebrochen { background:var(--gray-tint); color:var(--gray-ink); }

/* Knopfspalte am rechten Rand einer Tabelle. Die Knoepfe bleiben unauffaellig,
   bis man mit dem Zeiger in die Zeile faehrt -- sonst zieht eine Liste mit
   zwanzig Zeilen zwanzig Mal Aufmerksamkeit auf sich. */
.aktion-spalte { text-align:right; white-space:nowrap; }
.aktion-spalte button { padding:4px 10px; font-size:12px; margin-left:6px; opacity:.55; }
tr:hover .aktion-spalte button { opacity:1; }
.aktion-spalte button:disabled { visibility:hidden; }


/* =====================================================================
   Aufnahmen: Liste, Schluessel, Schrittansicht
   ===================================================================== */

/* Die Belegung steht in der Ueberschriftszeile und nicht in einem eigenen
   Kasten. Sie ist eine Randbedingung, keine Meldung -- solange sie unter der
   Warnschwelle liegt, soll sie mitlaufen, ohne Aufmerksamkeit zu fordern. */
.belegung { font-size:12px; color:var(--ink-soft); white-space:nowrap; }

/* Die verbleibende Frist. Erst wenn es eng wird, faellt sie auf. */
.bald { color:var(--yellow-ink); font-weight:600; }

.schluessel-wert {
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px;
  background:var(--eingabe-bg); border:1px solid var(--line); border-radius:8px;
  padding:12px; overflow-wrap:anywhere; white-space:pre-wrap; user-select:all;
}

.zurueck { margin:0 0 10px; font-size:13px; }
.zurueck a { color:var(--ink-soft); text-decoration:none; }
.zurueck a:hover { color:var(--ink); }

.kopfdaten {
  display:grid; grid-template-columns:auto 1fr; gap:4px 18px;
  margin:0 0 22px; font-size:13.5px;
}
.kopfdaten dt { color:var(--ink-soft); }
.kopfdaten dd { margin:0; }

.schalter { font-size:12.5px; color:var(--ink-soft); white-space:nowrap; }
.schalter input { margin-right:6px; vertical-align:middle; }

/* Ein Schritt ist eine Karte und keine Tabellenzeile: Das Bild ist der
   eigentliche Inhalt, und ein Bild in einer Tabellenzelle zwingt entweder die
   Zeile in die Hoehe oder das Bild in die Bedeutungslosigkeit. */
.schritt-karte {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; margin-bottom:14px;
}
.schritt-karte.verworfen { opacity:.55; border-style:dashed; }

.schritt-kopf { display:flex; align-items:flex-start; gap:12px; }
.schritt-kopf > button { margin-left:auto; flex:0 0 auto; }

.schritt-nummer {
  flex:0 0 auto; min-width:28px; height:28px; border-radius:50%;
  background:var(--blue-tint); color:var(--blue-deep);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:700;
}

.schritt-text { min-width:0; }
.schritt-herkunft {
  font-size:11.5px; color:var(--ink-soft); margin-top:2px; overflow-wrap:anywhere;
}

.laufzeit {
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px;
  padding:3px 8px; flex:0 0 auto;
}

.schritt-bild {
  display:block; width:100%; margin-top:12px; border-radius:8px;
  border:1px solid var(--line); cursor:zoom-in; background:var(--eingabe-bg);
}

/* Der Nachweis, dass bereits im Browser geschwaerzt wurde. Gruen, weil es eine
   gute Nachricht ist -- hier ist etwas gar nicht erst angekommen. */
.schwaerzung-hinweis {
  margin:8px 0 0; font-size:11.5px; color:var(--green-ink);
}

/* Bild in voller Groesse ueber der Seite. */
.lupe {
  position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.86);
  display:flex; align-items:center; justify-content:center; padding:24px;
  cursor:zoom-out;
}
.lupe img { max-width:100%; max-height:100%; border-radius:6px; }

@media (max-width:700px) {
  .kopfdaten { grid-template-columns:1fr; gap:2px 0; }
  .kopfdaten dd { margin-bottom:8px; }
}

/* =====================================================================
   Einrichtungsassistent
   ===================================================================== */

main.schmal { max-width:620px; }

/* Die Stufenleiste. Sie sagt zwei Dinge: wo man ist und wieviel noch kommt.
   Beides beruhigt -- eine Anleitung ohne sichtbares Ende fuehlt sich laenger
   an, als sie ist. */
.stufen {
  display:flex; list-style:none; margin:0 0 10px; padding:0;
  justify-content:space-between;
}
.stufen li { display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; }
.stufen .punkt {
  width:11px; height:11px; border-radius:50%;
  background:var(--line); transition:background .35s ease, transform .35s ease;
}
.stufen .marke { font-size:11px; color:var(--ink-soft); transition:color .35s ease; }
.stufen li.hier .punkt { background:var(--blue); transform:scale(1.5); }
.stufen li.hier .marke { color:var(--ink); font-weight:600; }
.stufen li.erledigt .punkt { background:var(--green); }

.schiene { height:3px; background:var(--line); border-radius:2px; margin-bottom:26px; }
.fuellung {
  height:100%; width:0; border-radius:2px; background:var(--blue);
  transition:width .45s cubic-bezier(.4,0,.2,1);
}

/* Die Buehne haelt alle Bilder uebereinander. Sie waechst auf das aktive --
   ohne feste Hoehe, sonst haette das kuerzeste Bild dieselbe Laenge wie das
   laengste. */
.buehne { position:relative; }

/* Die Kurzansicht (.bild-fest) sieht aus wie ein Assistentenbild, macht die
   Bewegung aber nicht mit: Sie steht fuer sich und wird nicht durchgeblaettert.
   Ohne eigene Klasse hatte zeichnen() sie mitverwaltet -- und ihr die
   Sichtbarkeit wieder abgenommen, weil sie zu keiner Stufe gehoert. */
.bild, .bild-fest {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 26px 22px;
  transition:opacity .32s ease, transform .32s cubic-bezier(.4,0,.2,1);
}
.bild-fest h2 { margin:0 0 6px; font-size:20px; }
.bild-fest > p { margin:0 0 18px; font-size:14px; color:var(--ink-soft); line-height:1.6; }
/* Nicht display:none, sondern aus der Buehne heraus: Nur so laesst sich der
   Wechsel bewegen. position:absolute nimmt das inaktive Bild aus dem Fluss,
   damit die Buehne die Hoehe des aktiven annimmt. */
.bild:not(.aktiv) {
  position:absolute; inset:0 0 auto; opacity:0; pointer-events:none;
  transform:translateX(28px);
}
.bild:not(.aktiv).vorher { transform:translateX(-28px); }
.bild.aktiv { position:relative; opacity:1; transform:none; }

.bild h2 { margin:0 0 6px; font-size:20px; }
.bild > p { margin:0 0 18px; font-size:14px; color:var(--ink-soft); line-height:1.6; }

.tat { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.tat input { flex:1 1 200px; }

.knopf {
  display:inline-block; padding:9px 16px; border-radius:8px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font-size:13.5px; text-decoration:none;
}
.knopf:hover { border-color:var(--blue); }
.knopf.primaer, button.primaer { background:var(--blue-tint); border-color:var(--blue); color:var(--blue-deep); }
.knopf.gross { padding:13px 22px; font-size:15px; }

.geheim { display:flex; gap:10px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
.geheim code {
  flex:1 1 220px; background:var(--eingabe-bg); border:1px solid var(--line);
  border-radius:8px; padding:11px 13px; font-size:13px;
  overflow-wrap:anywhere; user-select:all;
}

.knapp { margin:0 0 16px; padding-left:22px; font-size:14px; line-height:1.9; }
.knapp code {
  background:var(--eingabe-bg); border:1px solid var(--line);
  border-radius:5px; padding:1px 6px; font-size:12.5px;
}
.merksatz { list-style:none; padding:0; font-size:13px; color:var(--ink-soft); }
.merksatz li { padding-left:16px; position:relative; }
.merksatz li::before { content:"·"; position:absolute; left:4px; }

.leise { font-size:12.5px; color:var(--ink-soft); }
.leise.mitte { text-align:center; margin-top:18px; }
.leise-knopf { border-color:transparent; color:var(--ink-soft); }

/* Das Warten ist der ehrlichste Teil der Seite: Hier steht, dass geprueft
   wird, und nicht nur, dass man weiterklicken darf. */
.warten {
  display:flex; align-items:center; gap:10px;
  font-size:13px; color:var(--ink-soft);
  background:var(--eingabe-bg); border:1px solid var(--line);
  border-radius:10px; padding:12px 14px; margin-top:6px;
  transition:color .3s ease, border-color .3s ease, background .3s ease;
}
.warten .pulse {
  width:9px; height:9px; border-radius:50%; background:var(--blue);
  flex:0 0 auto; animation:atmen 1.5s ease-in-out infinite;
}
.warten.gefunden { color:var(--green-ink); border-color:var(--green); }
.warten.gefunden .pulse { background:var(--green); animation:none; }

@keyframes atmen { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.3; transform:scale(.8); } }

/* Der Haken auf dem letzten Bild -- gezeichnet, nicht eingeblendet. */
.mit-haken { display:flex; align-items:center; gap:10px; }
.haken {
  width:22px; height:22px; border-radius:50%; background:var(--green-tint);
  position:relative; flex:0 0 auto;
}
.haken::after {
  content:""; position:absolute; left:7px; top:4px;
  width:6px; height:11px; border:solid var(--green-ink);
  border-width:0 2px 2px 0; transform:rotate(45deg) scale(0);
  animation:haken-setzen .4s .15s cubic-bezier(.2,.9,.3,1.4) forwards;
}
@keyframes haken-setzen { to { transform:rotate(45deg) scale(1); } }

.steuerung {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:22px; gap:12px;
}
.steuerung button { padding:10px 20px; }
.steuerung #weiter:disabled { opacity:.4; }
/* Kurzes Aufleuchten, wenn ein Schritt fertig wird -- der Blick liegt dann
   woanders, und der Knopf muss ihn holen. */
.steuerung #weiter.aufgetaucht { animation:aufleuchten .7s ease; }
@keyframes aufleuchten {
  0% { box-shadow:0 0 0 0 rgba(96,165,250,.55); }
  70% { box-shadow:0 0 0 10px rgba(96,165,250,0); }
  100% { box-shadow:0 0 0 0 rgba(96,165,250,0); }
}

/* Wer Bewegung abgestellt hat, bekommt keine. Die Seite funktioniert
   vollstaendig ohne sie -- das ist der Pruefstein dafuer, dass die Bewegung
   Zierde ist und nicht Traeger der Aussage. */
@media (prefers-reduced-motion:reduce) {
  .bild, .fuellung, .stufen .punkt, .warten { transition:none; }
  .bild:not(.aktiv) { transform:none; }
  .warten .pulse, .haken::after, .steuerung #weiter.aufgetaucht { animation:none; }
  .haken::after { transform:rotate(45deg) scale(1); }
}

.kurz-titel { font-size:13px; color:var(--ink-soft); margin:18px 0 8px; font-weight:600; }