:root{
  /* Dieselben Gestaltungswerte wie im bestehenden Cockpit — nicht neu erfunden. */
  --grund:#05070d; --flaeche:#0c1119; --flaeche2:#111827;
  --text:#e9eef8; --dim:#97a5bf; --leise:#7a88a3;
  --linie:rgba(150,180,230,.16); --linie2:rgba(150,180,230,.3);
  --cyan:#1fe8ff; --blau:#0648e8; --gruen:#4ade80; --rot:#ff8a8a; --gelb:#fbbf24;
  --e:cubic-bezier(.16,1,.3,1);
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--grund);color:var(--text);font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  background-image:radial-gradient(60% 40% at 50% 0%,rgba(10,120,245,.13),transparent 70%);min-height:100vh}
a{color:inherit;text-decoration:none}
.huelle{display:flex;min-height:100vh}

/* Navigation */
.nav{width:232px;flex:0 0 232px;border-right:1px solid var(--linie);padding:18px 12px;position:sticky;top:0;height:100vh;overflow:auto}
.marke{display:flex;align-items:center;gap:9px;padding:6px 10px 16px;font-weight:700;letter-spacing:.02em}
.marke b{background:linear-gradient(135deg,var(--blau),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.nav a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 11px;border-radius:10px;color:var(--dim);font-size:14px;transition:.18s var(--e)}
.nav a:hover{background:var(--flaeche);color:var(--text)}
.nav a.an{background:var(--flaeche2);color:var(--text);box-shadow:inset 2px 0 0 var(--cyan)}
.nav .gruppe{padding:14px 11px 6px;font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--leise)}
/* Die Suche sitzt zwischen Marke und Menue: der kuerzeste Weg zu einem
   bestimmten Kunden, und der Grund, warum die Listen darunter zurueckstehen
   duerfen. */
.nav__suche{margin:4px 0 10px;padding:0 3px}
.nav__suche input{width:100%;box-sizing:border-box;padding:8px 11px;border-radius:10px;
  border:1px solid var(--linie);background:var(--flaeche);color:var(--text);font-size:13.5px}
.nav__suche input::placeholder{color:var(--leise)}
.nav__suche input:focus{outline:none;border-color:var(--cyan)}

/* "Alles andere": sieht aus wie ein Menuepunkt, verhaelt sich wie eine
   Schublade. Der Pfeil ist der einzige Unterschied — die Zahl daneben sagt,
   ob etwas darin liegt, damit nichts still verschwindet. */
.nav details.mehr{margin-top:14px;border-top:1px solid var(--linie);padding-top:8px}
.nav details.mehr>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 11px;border-radius:10px;color:var(--dim);font-size:14px;cursor:pointer;
  list-style:none;transition:.18s var(--e)}
.nav details.mehr>summary::-webkit-details-marker{display:none}
.nav details.mehr>summary:hover{background:var(--flaeche);color:var(--text)}
.nav details.mehr>summary::after{content:"";width:7px;height:7px;flex:0 0 auto;margin-left:auto;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s var(--e)}
.nav details.mehr[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.nav details.mehr>summary .zahl{margin-left:0}
.nav details.mehr[open]>summary{color:var(--text)}

/* Die Stufe als Bruch neben dem Wort: "Vorschau 5/9". Klein und leise —
   sie beantwortet eine Frage beim Ueberfliegen, nicht beim Lesen. */
.vg__stufe{font-style:normal;opacity:.55;margin-left:5px;font-variant-numeric:tabular-nums;font-size:.92em}
/* Was nur auf schmalen Schirmen gebraucht wird -- die Suche im Seitenkopf,
   weil das Menue dort keine hat. Auf breiten Schirmen stuende sie zweimal
   da und draengte die Kennzahlen zusammen. */
/* Zwei Klassen, gleiches Gewicht: .leiste steht weiter unten und setzt
   display:flex. Deshalb beide zusammen, sonst gewinnt die spaetere Zeile. */
/* Die Rueckfrage steht dort, wo der Knopf steht -- in dieser Gestaltung,
   nicht als graue Kiste des Browsers, und ohne die Seite anzuhalten. */
.frage{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0 0;
  padding:11px 13px;border:1px solid var(--cyan);border-radius:12px;
  background:rgba(31,232,255,.07);font-size:13.5px;line-height:1.5;color:var(--text)}
.frage > span{flex:1 1 260px;min-width:0}
/* In einer Tabelle sitzt sie in einer eigenen Zeile ueber die volle Breite;
   der Rahmen der Zelle wuerde daneben stoeren. */
tr.fragezeile > td{border:0}
tr.fragezeile .frage{margin:0 0 8px}
.frage .knopf{flex:0 0 auto}
.leiste.nurschmal{display:none}
@media (max-width:900px){ .leiste.nurschmal{display:flex} .leiste.nurschmal input{width:100%} }
.zahl{background:var(--flaeche2);border:1px solid var(--linie);border-radius:999px;padding:1px 7px;font-size:11px;color:var(--dim)}
.zahl.warn{background:rgba(251,191,36,.14);border-color:rgba(251,191,36,.35);color:var(--gelb)}

/* Inhalt */
.inhalt{flex:1;min-width:0;padding:22px 26px 60px}
.kopf{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.kopf h1{font-size:22px;font-weight:650;letter-spacing:-.01em}
.kopf .weg{color:var(--leise);font-size:13px}
.rechts{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px;margin-bottom:18px}
.karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);padding:14px 16px}
.karte h3{font-size:12px;font-weight:500;color:var(--leise);text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px}
.karte .wert{font-size:26px;font-weight:650;letter-spacing:-.02em}
.karte .neben{font-size:12.5px;color:var(--dim);margin-top:3px}
.karte.gross{grid-column:span 2}

.block{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);padding:16px 18px;margin-bottom:16px}
.block h2{font-size:14px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.block h2 .mehr{margin-left:auto;font-size:12.5px;color:var(--dim);font-weight:400}
.zwei{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;align-items:start}

table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--leise);font-weight:500;padding:0 10px 9px;white-space:nowrap}
td{padding:10px;border-top:1px solid var(--linie);vertical-align:middle}
tbody tr{transition:.15s var(--e)}
tbody tr:hover{background:rgba(150,180,230,.05)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.leer{padding:26px 10px;color:var(--leise);text-align:center;font-size:14px}
.tabellenrahmen{overflow-x:auto}

.marke2{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:3px 9px;border-radius:999px;border:1px solid var(--linie);background:var(--flaeche2);color:var(--dim);white-space:nowrap}
.marke2::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--leise)}
.marke2.gut{color:var(--gruen);border-color:rgba(74,222,128,.32);background:rgba(74,222,128,.1)}
.marke2.gut::before{background:var(--gruen)}
.marke2.schlecht{color:var(--rot);border-color:rgba(255,138,138,.32);background:rgba(255,138,138,.1)}
.marke2.schlecht::before{background:var(--rot)}
.marke2.warnung{color:var(--gelb);border-color:rgba(251,191,36,.32);background:rgba(251,191,36,.1)}
.marke2.warnung::before{background:var(--gelb)}

.knopf{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:10px;border:1px solid var(--linie2);
  background:var(--flaeche2);color:var(--text);font-size:13.5px;cursor:pointer;transition:.18s var(--e);font-family:inherit}
.knopf:hover{border-color:var(--cyan);transform:translateY(-1px)}
.knopf.haupt{background:linear-gradient(135deg,var(--blau),#0a63f0);border-color:transparent;font-weight:550}
.knopf.stumm{background:transparent;color:var(--dim)}

input,select,textarea{width:100%;padding:9px 11px;border-radius:10px;border:1px solid var(--linie);
  background:var(--grund);color:var(--text);font:inherit;font-size:14px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cyan)}
label{display:block;font-size:12px;color:var(--dim);margin:0 0 5px}
.feld{margin-bottom:13px}
.reihe{display:grid;grid-template-columns:1fr 1fr;gap:12px}
form.leiste{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
form.leiste input,form.leiste select{width:auto;min-width:150px}

.balken{height:6px;border-radius:99px;background:var(--flaeche2);overflow:hidden;min-width:70px}
.balken i{display:block;height:100%;background:linear-gradient(90deg,var(--blau),var(--cyan))}

.verlauf{list-style:none}
.verlauf li{display:flex;gap:11px;padding:9px 0;border-top:1px solid var(--linie)}
.verlauf li:first-child{border-top:0}
.verlauf .punkt{width:7px;height:7px;border-radius:50%;background:var(--cyan);margin-top:7px;flex:0 0 7px}
.verlauf .wann{margin-left:auto;color:var(--leise);font-size:12px;white-space:nowrap}
.verlauf small{color:var(--leise)}

.saeulen{display:flex;align-items:flex-end;gap:5px;height:130px;padding-top:8px}
.saeulen div{flex:1;background:linear-gradient(180deg,var(--cyan),var(--blau));border-radius:4px 4px 0 0;min-height:2px;position:relative}
.saeulen div span{position:absolute;bottom:-19px;left:0;right:0;text-align:center;font-size:10px;color:var(--leise)}
.saeulen{margin-bottom:22px}

.hinweis{padding:10px 13px;border-radius:10px;font-size:13.5px;margin-bottom:14px;border:1px solid}
.hinweis.gut{background:rgba(74,222,128,.1);border-color:rgba(74,222,128,.3);color:var(--gruen)}
.hinweis.schlecht{background:rgba(255,138,138,.1);border-color:rgba(255,138,138,.3);color:var(--rot)}

.anmeldung{max-width:370px;margin:min(16vh,140px) auto;padding:26px}
.anmeldung .block{padding:24px}

/* ---------------------------------------------------------------------
   Vorgaenge. Eine Zeile ist ein Kunde und der naechste Handgriff — nicht
   eine Tabelle mit Spalten, die man erst lesen und dann deuten muss.
   --------------------------------------------------------------------- */
.vg{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:13px 0;border-top:1px solid var(--linie)}
.vg:first-of-type{border-top:0}
.vg__wer{flex:0 1 250px;min-width:180px}
.vg__name{font-weight:600;font-size:15px}
.vg__unter{color:var(--leise);font-size:12.5px;margin-top:2px}
.vg__warum{flex:2 1 260px;color:var(--dim);font-size:13.5px;line-height:1.5}
.vg__tun{margin-left:auto;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.vg__ruht{color:var(--leise);font-size:12px;white-space:nowrap}
.vg__ruht.lang{color:var(--gelb)}

/* Die Fortschrittsleiste eines Vorgangs. */
.stufen{display:flex;gap:4px;margin:0 0 18px;flex-wrap:wrap}
.stufen span{flex:1 1 0;min-width:54px;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--leise);padding-top:7px;border-top:3px solid var(--linie);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stufen span.da{border-top-color:var(--blau);color:var(--dim)}
.stufen span.jetzt{border-top-color:var(--cyan);color:var(--text);font-weight:650}

/* Der naechste Handgriff — das Erste, was auf einer Vorgangsseite steht. */
.dran{border:1px solid var(--linie2);border-radius:var(--r);padding:15px 17px;margin-bottom:16px;
  background:linear-gradient(135deg,rgba(6,72,232,.16),rgba(31,232,255,.05))}
.dran h2{font-size:13px;font-weight:600;margin-bottom:7px;display:flex;gap:8px;align-items:center}
.dran p{color:var(--dim);font-size:13.5px;line-height:1.55;margin:0 0 12px}
.dran.wartet{background:none;border-color:var(--linie)}
.dran h2 .mehr{margin-left:auto;font-size:12.5px;font-weight:400;color:var(--dim)}
.dran .tun{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* Wie in form.leiste: Felder bleiben so breit, wie sie sein muessen. */
.dran .tun input,.dran .tun select{width:auto;min-width:170px}

@media(max-width:900px){
  .zwei{grid-template-columns:1fr}
  /* Eine Spalte im Raster ist von sich aus so breit wie ihr breitester
     Inhalt — auch wenn der Inhalt selbst scrollen koennte. Ohne diese Zeile
     schiebt eine Tabelle die ganze Seite nach rechts, obwohl sie in einem
     scrollenden Rahmen sitzt. */
  .zwei > *,.huelle > *,.inhalt > *{min-width:0}
  .huelle{flex-direction:column}
  .nav{width:auto;flex:none;height:auto;position:static;display:flex;gap:4px;overflow-x:auto;border-right:0;border-bottom:1px solid var(--linie);padding:10px}
  .nav .gruppe,.marke{display:none}
  /* Auf dem Handy wird das Menue eine Zeile — ein Suchfeld darin waere
     ein Feld ohne Platz. Es steht dann auf der Seite Heute. */
  .nav__suche{display:none}
  .nav a{white-space:nowrap;padding:7px 12px}
  .inhalt{padding:16px 14px 50px}
  .karte.gross{grid-column:span 1}
}

/* Auf dem Handy sind das keine Knoepfe mehr, sondern Ziele fuer eine
   Fingerkuppe. Die Kundenseiten werden fast nur dort geoeffnet — der Link
   kommt per E-Mail und wird unterwegs angetippt. 34 Pixel sind dafuer zu
   wenig; die uebliche Untergrenze liegt bei 44. */
@media(max-width:700px){
  /* Eine Tabelle mit sechs Spalten passt auf kein Telefon. Bisher schob sie
     die ganze Seite nach rechts: Man wischte, und die Kopfzeile wanderte mit,
     als waere die Verwaltung kaputt. Jetzt scrollt die Tabelle in sich selbst,
     der Rest der Seite bleibt stehen. Auf dem Rechner aendert sich nichts. */
  .block table{display:block;overflow-x:auto;max-width:100%}
  /* Wer schon in einem scrollenden Rahmen steckt, bleibt eine echte Tabelle —
     sonst schrumpfte sie dort auf ihre Inhaltsbreite zusammen. */
  .tabellenrahmen table{display:table;width:100%}
  .knopf,button.knopf,button:not(.chip-opt){min-height:44px;padding-top:11px;padding-bottom:11px}
  .sprachen a{display:inline-block;padding:10px 8px}
  .datei .knopf{min-width:44px;justify-content:center}
}

/* ==========================================================================
   "Jetzt dran" — der naechste Schritt, auf jeder Seite.

   Die Leiste sitzt ueber dem Inhalt und ist die einzige Stelle in der
   Verwaltung, die eine Handlung verlangt statt einen Bestand zu zeigen.
   Deshalb darf sie farbig sein, waehrend alles andere ruhig bleibt: Zwei
   Dinge, die um Aufmerksamkeit rufen, sind eines zu viel.
   ========================================================================== */
.jetzt{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:0 0 18px; padding:12px 16px; border-radius:12px;
  background:linear-gradient(135deg, rgba(6,72,232,.16), rgba(31,232,255,.07));
  border:1px solid rgba(31,232,255,.28);
}
.jetzt--leer{
  background:transparent; border-color:var(--linie);
  padding-top:9px; padding-bottom:9px;
}
.jetzt__ruhe{color:var(--leise); font-size:13px}
.jetzt__marke{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan); white-space:nowrap; font-weight:600;
}
.jetzt__wer{display:flex; flex-direction:column; gap:2px; flex:1 1 260px; min-width:0}
.jetzt__wer b{font-size:14.5px}
.jetzt__warum{color:var(--leise); font-size:12.5px; line-height:1.45}
.jetzt__tun{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.jetzt__rest{color:var(--leise); font-size:12.5px; white-space:nowrap}
.jetzt__rest:hover{color:var(--cyan)}

/* ---- Der Knopf, der gemeint ist ----------------------------------------
   Kommt man ueber die Leiste, traegt die Adresse ?tun= mit. Genau das
   passende Formular leuchtet dann kurz auf. Ohne das sucht man auf einer
   vollen Vorgangsseite den richtigen von acht Knoepfen. */
.leuchtet{
  position:relative; border-radius:12px;
  animation:leuchten 2.4s ease-out 3;
  outline:2px solid var(--cyan); outline-offset:6px;
  /* Damit der obere Rahmen nicht am Fensterrand klebt, wenn ein hoher
     Abschnitt oben angesetzt wird. */
  scroll-margin-top:18px; scroll-margin-bottom:18px;
}
@keyframes leuchten{
  0%,100%{outline-color:rgba(31,232,255,0)}
  25%   {outline-color:rgba(31,232,255,.9)}
  60%   {outline-color:rgba(31,232,255,.25)}
}
@media (prefers-reduced-motion:reduce){
  .leuchtet{animation:none; outline-color:var(--cyan)}
}

/* ---------- Rechtsfuss --------------------------------------------------
   Dieselbe Form wie auf den Kundenseiten. Gebraucht wird er hier nur auf
   buchen.php, das diese Datei mitbenutzt — die Verwaltung selbst hat ihr
   Impressum nicht noetig. */
.rechtsfuss{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:8px; margin:30px auto 10px; padding:16px 20px 0;
  max-width:760px; border-top:1px solid var(--linie);
  font-size:12.5px; line-height:1.6; color:var(--leise);
}
.rechtsfuss a{color:var(--leise); text-decoration:none;
  min-height:32px; display:inline-flex; align-items:center}
.rechtsfuss a:hover,.rechtsfuss a:focus-visible{color:var(--cyan); text-decoration:underline}
.rechtsfuss span{color:var(--linie2)}

/* ===========================================================================
   DIE CHECKLISTE EINER STUFE

   Sie steht direkt unter "Du bist dran" und beantwortet die andere Frage:
   nicht "was jetzt", sondern "wo stehe ich". Zugeklappt, sobald alles steht --
   eine vollstaendige Liste ist eine Nachricht, keine Arbeit.

   Bewusst leise gehalten: Sie soll den Schritt darueber nicht ueberstimmen.
   Deshalb kein Rahmen, keine Farbe, keine Groesse -- nur Ordnung.
   ======================================================================== */
.dran details.liste{margin:14px 0 0;border-top:1px solid var(--linie);padding-top:10px}
.dran details.liste summary{cursor:pointer;font-size:13px;color:var(--leise);
  list-style:none;display:flex;align-items:center;gap:6px;user-select:none}
.dran details.liste summary::-webkit-details-marker{display:none}
.dran details.liste summary::before{content:'▸';font-size:10px;opacity:.6;
  transition:transform .15s ease}
.dran details.liste[open] summary::before{transform:rotate(90deg)}
.dran details.liste summary b{color:var(--text);font-weight:550}
.dran details.liste ul{list-style:none;margin:10px 0 2px;padding:0;
  display:flex;flex-direction:column;gap:5px}
.dran details.liste li{display:flex;align-items:baseline;gap:8px;font-size:13px}
/* Feste Breite, damit die Punkte untereinander fluchten -- ein Haken, der die
   Zeile verschiebt, macht aus einer Liste eine Treppe. */
.dran details.liste .haken{flex:0 0 14px;text-align:center;font-size:12px;
  color:var(--gruen);font-weight:700}
.dran details.liste li.offen{color:var(--leise)}
.dran details.liste li.offen .haken::before{content:'·';opacity:.5;font-weight:400}
.dran details.liste li i{font-style:normal;opacity:.7;font-size:12px}
@media (prefers-reduced-motion:reduce){
  .dran details.liste summary::before{transition:none}
}

/* Ein Stand, der sich von selbst bewegt hat. Steht einmal da und erklaert
   sich; niemand soll raten muessen, warum sich etwas geaendert hat. */
.nachgezogen{margin:12px 0 0;font-size:12.5px;color:var(--leise);
  border-left:2px solid var(--linie);padding-left:10px}
.nachgezogen b{color:var(--text);font-weight:550}

/* Die Leiste tritt zurueck, wenn man ohnehin auf dem gemeinten Vorgang steht.
   Sie sagt weiterhin, dass er es ist -- den Knopf laesst sie der Seite. */
.jetzt__hier{color:var(--leise);font-size:12.5px;white-space:nowrap}

/* Mehrere Anfragen am selben Tag. Bewusst nicht rot: Es ist keine Stoerung,
   sondern ein guter Tag mit einem Zeitfenster daran. */
.erstantwort{margin:0 0 14px;padding:9px 13px;border-radius:10px;
  border:1px solid var(--linie2);background:var(--flaeche2);
  color:var(--dim);font-size:13px}
.erstantwort b{color:var(--text);font-weight:600}

/* Der Telefon-Trichter. Fünf Stufen, von links nach rechts weniger — die
   Frage ist nicht wie viel übrig bleibt, sondern wo es abreißt. */
.trichter{display:grid;gap:10px}
.trichter__stufe{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:12px}
.trichter__zahl{font-size:19px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.trichter__balken{height:9px;border-radius:5px;background:var(--flaeche2);overflow:hidden}
.trichter__balken span{display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,var(--blau),var(--cyan))}
.trichter__wort{font-size:12.5px;color:var(--dim);white-space:nowrap}
.trichter__wort i{font-style:normal;color:var(--leise)}