/* Verwaltung: Seitenleiste links, klebende Kopfzeile, Arbeitsbereich.
   Alle Farben, Abstaende und Radien kommen aus marken.css. Hier steht nur,
   wie die Flaechen zueinander liegen.
 *
 * Uebertragen aus dem Entwurf "Glas und Licht", gewaehlt am 22.09.2026.
 * Dieselben drei Regeln wie in der Mitarbeiteransicht:
 *
 * 1. Glas nur fuer schwebende Ebenen. In der Verwaltung sind das genau drei:
 *    die klebende Kopfzeile, der Dialog und die Meldungsleiste. Unter einer
 *    Flaeche mit Daten steht nie Glas.
 * 2. Jede Glasflaeche traegt die Lichtkante aus --glas-kante. Ohne sie ist es
 *    Milchglas, nicht Glas.
 * 3. Zusammengehoerende Eintraege liegen auf EINER Flaeche und werden durch
 *    Haarlinien getrennt. Keine Reihe gleichfoermiger Kaertchen mit eigenem
 *    Rand: das ist es, was eine Verwaltungsoberflaeche gestanzt aussehen laesst.
 *    Umgesetzt mit gap:1px auf der Linienfarbe, damit die Trennung auch beim
 *    Umbruch stimmt.
 */

/* ------------------------------------------------------------ Startzustand */

.start {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: var(--grund);
}
.start-punkt {
  width: 34px; height: 34px;
  border: 3px solid var(--linie-stark);
  border-top-color: var(--blau);
  border-radius: 50%;
  animation: dreht .8s linear infinite;
}
@keyframes dreht { to { transform: rotate(360deg); } }

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

.anmeldung {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: var(--r5);
  background:
    radial-gradient(900px 500px at 50% -10%, var(--blau-hell), transparent 70%),
    var(--grund);
}
.anmeldung-karte {
  width: 100%; max-width: 400px;
  padding: var(--r6);
  display: grid; gap: var(--r4);
  box-shadow: var(--schatten-hebung);
}
.anmeldung-marke {
  font-weight: 700; letter-spacing: -.02em; color: var(--blau);
  text-transform: uppercase; font-size: 12px; letter-spacing: .12em;
}
.anmeldung-karte h1 { font-size: 26px; }
.anmeldung-karte .leise { margin-top: calc(var(--r3) * -1); }
.anmeldung-fehler {
  margin: 0; padding: var(--r3);
  border-radius: var(--rad-s);
  background: var(--fehler-bg); color: var(--fehler-text);
  font-size: 14px;
}

.feld-gruppe { display: block; }
.feld-gruppe + .feld-gruppe { margin-top: var(--r1); }

/* ------------------------------------------------------------------ Huelle */

/* Die Seitenleiste steht fest und liegt damit ausserhalb des Flusses. Deshalb
   bekommt die Spalte den Platz als Innenabstand, nicht als Rasterspalte: ein
   Raster wuerde die Spalte in die erste, 252 Pixel schmale Spalte setzen. */
.huelle {
  min-height: 100vh;
  min-height: 100dvh;
}

.spalte {
  min-width: 0;
  padding-left: var(--leiste-breite);
  display: flex; flex-direction: column;
}

/* ------------------------------------------------------------ Seitenleiste */

.leiste {
  position: fixed; top: 0; bottom: 0; left: 0;
  width: var(--leiste-breite);
  display: flex; flex-direction: column;
  background: var(--leiste-verlauf);
  color: var(--leiste-text);
  border-right: 1px solid var(--leiste-linie);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 60;
}

.leiste-marke {
  display: flex; align-items: center; gap: var(--r3);
  /* Der Schriftzug steht jetzt buendig mit den Navigationspunkten darunter.
     Vorher begann er weiter rechts, weil das Zeichen davor Platz brauchte. */
  padding: var(--r4) var(--r4) var(--r4) var(--r4);
  border-bottom: 1px solid var(--leiste-linie);
  min-height: var(--kopf-hoehe);
}
/* Kein Zeichen, kein Kaestchen. Solange der Name nicht feststeht, traegt der
   Schriftzug allein. Ein Platzhalterquadrat sagt nichts und sieht aus wie ein
   Bild, das nicht geladen hat. */
.leiste-marke-name {
  display: block; color: #fff;
  font-weight: 750; letter-spacing: -.018em; font-size: 18px;
}
.leiste-marke-betrieb {
  display: block; color: var(--leiste-leise); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px;
}

.leiste-nav {
  flex: 1; overflow-y: auto;
  padding: var(--r3) var(--r2) var(--r5);
  display: grid; gap: 2px; align-content: start;
}

.nav-gruppe { display: grid; }
.nav-gruppe-kopf {
  display: flex; align-items: center; gap: var(--r3);
  width: 100%; min-height: 36px; padding: 0 var(--r3);
  border: 0; border-radius: var(--rad-s);
  background: transparent; color: var(--leiste-text);
  font: inherit; font-size: 14px; font-weight: 550; text-align: left;
  cursor: pointer;
}
.nav-gruppe-kopf:hover { background: var(--leiste-hover); }
.nav-gruppe-kopf svg { flex: none; opacity: .75; }
.nav-gruppe-kopf .pfeil { margin-left: auto; transition: transform .16s; opacity: .55; }
.nav-gruppe[data-offen="ja"] .pfeil { transform: rotate(90deg); }
.nav-gruppe-inhalt { display: grid; gap: 2px; padding: 2px 0 var(--r2); }
.nav-gruppe[data-offen="nein"] .nav-gruppe-inhalt { display: none; }

.nav-punkt {
  display: flex; align-items: center; gap: var(--r3);
  min-height: 36px; padding: 0 var(--r3);
  border-radius: var(--rad-s);
  color: var(--leiste-text); font-size: 14px; font-weight: 500;
  text-decoration: none;
  transition: background .14s, color .14s;
}
.nav-punkt:hover { background: var(--leiste-hover); text-decoration: none; }
.nav-punkt svg { flex: none; opacity: .75; }
.nav-gruppe-inhalt .nav-punkt { padding-left: calc(var(--r3) + 28px); }

.nav-punkt.aktiv {
  background: var(--leiste-aktiv-bg);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--leiste-aktiv-kante);
}
.nav-punkt.aktiv svg { opacity: 1; }

.leiste-fuss { border-top: 1px solid var(--leiste-linie); padding: var(--r2); }
.leiste-person {
  display: flex; align-items: center; gap: var(--r3);
  width: 100%; padding: var(--r2) var(--r3);
  border: 0; border-radius: var(--rad-s);
  background: transparent; color: var(--leiste-text);
  font: inherit; text-align: left; cursor: pointer;
}
.leiste-person:hover { background: var(--leiste-hover); }
.leiste-person-kreis {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--leiste-aktiv-bg); color: #fff;
  font-size: 12px; font-weight: 650;
}
.leiste-person-text { min-width: 0; }
.leiste-person-name {
  display: block; color: #fff; font-size: 13.5px; font-weight: 550;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.leiste-person-rolle { display: block; color: var(--leiste-leise); font-size: 12px; }

/* --------------------------------------------------------------- Kopfzeile */

/* Sie klebt, also ist sie Glas. Vorher hatte sie ueberhaupt keine Fuellung:
   beim Scrollen lief der Inhalt sichtbar unter dem Titel durch. */
.kopf {
  position: sticky; top: env(safe-area-inset-top, 0px);
  z-index: 40;
  display: flex; align-items: center; gap: var(--r3);
  min-height: var(--kopf-hoehe);
  padding: 0 var(--r5);
  background: var(--glas-fuellung);
  -webkit-backdrop-filter: var(--glas-filter);
  backdrop-filter: var(--glas-filter);
  box-shadow: var(--glas-kante), 0 1px 0 var(--linie-zart);
}
.kopf-titel {
  font-size: 18px; font-weight: 750; letter-spacing: -.022em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}

/* Am Handy stand die Ueberschrift zweimal: oben in der Leiste als "Obje..."
   und gleich darunter gross als "Objekte". Die gekuerzte Fassung nahm dem
   Knopf daneben den Platz, sodass "Objekt anlegen" auf zwei Zeilen umbrach.
   Deshalb bleibt die Leiste leer, solange die grosse Ueberschrift im Bild
   steht, und der Titel blendet erst ein, wenn man weit genug gescrollt hat.
   Dasselbe Verhalten kennt man von den Apple-eigenen Apps. */
@media (max-width: 900px) {
  .kopf-titel {
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .16s ease, transform .16s ease;
    pointer-events: none;
    flex: 0 1 auto;
  }
  .kopf[data-gescrollt] .kopf-titel {
    opacity: 1;
    transform: none;
  }
  /* Ohne das bricht ein Knopf mit zwei Woertern mittendrin um. */
  .kopf-aktionen .knopf,
  .block-kopf-aktionen .knopf { white-space: nowrap; }

  /* Ueberschrift und Knopf teilen sich am Handy nur 358 Pixel. Steht der Knopf
     daneben, bleiben der Ueberschrift 120 und sie bricht. Untereinander hat
     beides Platz. */
  .block-kopf { flex-wrap: wrap; gap: var(--r2); }
  .block-kopf h3 { flex: 1 1 100%; }
  .block-kopf-aktionen { flex: 1 1 100%; }
  .block-kopf-aktionen .knopf { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .kopf-titel { transition: none; }
}
/* min-width:0 ist das Netz: ohne es waechst ein Knopf mit langem Text ueber
   den Rand der Leiste hinaus, statt zu schrumpfen. Am 25.09.2026 stand
   "Einsaetze fuer heute erzeugen" mit 257 Pixeln in einer Leiste, die 358 hat,
   und schob den Hilfe-Knopf aus dem Bild. */
.kopf-aktionen { margin-left: auto; display: flex; align-items: center; gap: var(--r2); min-width: 0; }
.kopf-aktionen > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kopf-hilfe { min-height: 34px; padding: 0 var(--r3); }
.nur-schmal { display: none; }

/* ---------------------------------------------------------- Arbeitsbereich */

.arbeitsbereich {
  width: 100%; max-width: 1320px; margin: 0 auto;
  padding: var(--r5);
  padding-bottom: var(--r8);
}
.arbeitsbereich:focus { outline: none; }

.seiten-kopf {
  display: flex; align-items: flex-start; gap: var(--r4);
  flex-wrap: wrap;
  margin-bottom: var(--r5);
}
.seiten-kopf-text { min-width: 0; flex: 1 1 320px; }
.seiten-kopf h2 { margin-bottom: var(--r1); }
.seiten-kopf-aktionen { display: flex; gap: var(--r2); flex-wrap: wrap; }

.zurueck {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: var(--r2);
  font-size: 13px; color: var(--text-leise);
}
.zurueck:hover { color: var(--blau-dunkel); text-decoration: none; }

/* marken.css trennt die Kinder jeder Karte mit einer Haarlinie. Das ist fuer
   eine Karte aus gestapelten Abschnitten richtig, nicht aber dort, wo die
   Kinder zusammen EINE Aussage bilden (Kennzahl) oder wo der Abschnitt seine
   Linie schon selbst setzt (Blockkopf). Sonst steht dort eine doppelte Linie
   in zwei Toenen, und genau das laesst eine Oberflaeche billig aussehen. */
.kennzahl > * + *,
.block > * + *,
.steckbrief > * + * { border-top: 0; }

/* ------------------------------------------------------------- Kennzahlen */

/* Regel 3: eine Flaeche, getrennt durch Haarlinien. Die Trennung entsteht
   ueber gap:1px auf der Linienfarbe, damit sie auch stimmt, wenn das Raster
   umbricht. Die Kennzahlen bringen aus dem Markup die Klasse karte mit,
   deren Wurf und Radius werden hier wieder abgeraeumt. */
.kennzahlen {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  margin-bottom: var(--r5);
  background: var(--linie-zart);
  border-radius: var(--rad);
  box-shadow: var(--schatten-hebung);
  overflow: hidden;
}
.kennzahl {
  padding: var(--r5); display: grid; gap: var(--r1);
  background: var(--flaeche); box-shadow: none; border-radius: 0;
}
.kennzahl-titel {
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-leise);
}
.kennzahl-wert {
  font-size: 38px; font-weight: 800; letter-spacing: -.038em; line-height: 1.02;
  font-variant-numeric: tabular-nums;
}
.kennzahl-fuss { font-size: 13px; color: var(--text-leise); }
.kennzahl-fuss.wach { color: var(--warnung-text); font-weight: 550; }

/* ------------------------------------------------------------------ Bloecke */

.block { margin-bottom: var(--r5); overflow: hidden; }
.block-kopf {
  display: flex; align-items: center; gap: var(--r3);
  padding: var(--r4) var(--r5);
  border-bottom: 1px solid var(--linie);
  background: var(--flaeche-sanft);
}
.block-kopf h3 { flex: 1 1 auto; min-width: 0; }
.block-kopf-aktionen { display: flex; gap: var(--r2); flex-wrap: wrap; }
.block-inhalt { padding: var(--r5); }
.block-inhalt.dicht { padding: 0; }

.werkzeugleiste {
  display: flex; align-items: flex-end; gap: var(--r3); flex-wrap: wrap;
  padding: var(--r4) var(--r5);
  border-bottom: 1px solid var(--linie);
}
.werkzeugleiste .feld-gruppe { flex: 0 1 220px; }
.werkzeugleiste .feld-gruppe.breit { flex: 1 1 280px; }
.werkzeugleiste-schub { margin-left: auto; display: flex; gap: var(--r2); }

.tabelle-rahmen { overflow-x: auto; }

/* -------------------------------------------- Tabelle wird am Handy Liste */

/* Die Umschaltung liegt bei 820 Pixeln, nicht bei den 900 der Seitenleiste.
   Zwischen 820 und 900 ist die Seitenleiste zwar schon eine Schublade, aber
   der Inhalt hat dann die ganze Breite und eine Tabelle mit sieben Spalten
   passt dort noch bequem. Ein Tablet im Hochformat hat 768 und bekommt
   deshalb die Liste. */
.bei-schmal { display: none; }

.eintraege {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Kein display an dieser Stelle. Sonst schlaegt es das display:none von
     .bei-schmal, das weiter oben im Blatt steht und gleich stark ist, und
     die Liste erscheint auch am grossen Bildschirm unter der Tabelle.
     Gesetzt wird es nur in der Medienregel unten. */
  gap: 1px;
  background: var(--linie-zart);
  border-radius: var(--rad-s);
  overflow: hidden;
}

.eintrag { background: var(--flaeche); display: grid; }

.eintrag-flaeche {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  padding: 0;
  cursor: pointer;
}

.eintrag.ist-klickbar .eintrag-flaeche:hover { background: var(--flaeche-hover); }
.eintrag-flaeche:focus-visible { outline: 2px solid var(--blau); outline-offset: -2px; }

.eintrag-kopf {
  display: flex;
  align-items: center;
  gap: var(--r3);
  padding: 13px var(--r4);
  min-width: 0;
}

/* Ein Raum steht unter seiner Etage, eingerueckt und mit einer Linie davor.
   Ohne das sieht die Liste aus wie lauter gleichrangige Bereiche, und die
   Zuordnung eines Raumes zu seiner Etage geht verloren. */
.eintrag.ist-ebene-1 .eintrag-kopf { padding-left: 34px; position: relative; }
.eintrag.ist-ebene-1 .eintrag-kopf::before {
  content: "";
  position: absolute;
  left: 22px; top: 0; bottom: 0;
  width: 1px;
  background: var(--linie-zart);
}
.eintrag.ist-ebene-1 .eintrag-titel { font-weight: 500; color: var(--text-weich); }
.eintrag.ist-ebene-1 .eintrag-aktionen { padding-left: 34px; }

.eintrag-links { flex: 0 0 auto; display: flex; align-items: center; }
.eintrag-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }

/* Eine Zeile, und was nicht passt, endet in drei Punkten. Genau das war der
   Wunsch: lieber gekuerzt als buchstabenweise umgebrochen. */
.eintrag-titel {
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: -.008em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eintrag-unter, .eintrag-zusatz {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--text-weich);
  min-width: 0;
}

.eintrag-zusatz { color: var(--text-leise); }
.eintrag-unter .trenner, .eintrag-zusatz .trenner { color: var(--text-leise); opacity: .6; }

.eintrag-rechts { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }

.eintrag-pfeil {
  flex: 0 0 auto;
  color: var(--text-leise);
  display: flex;
  align-items: center;
}

/* Knoepfe sitzen unter dem Eintrag in voller Breite, nebeneinander zu gleichen
   Teilen. Am Zeilenende waeren sie bei schmalem Bildschirm ausserhalb. */
.eintrag-aktionen {
  display: flex;
  gap: 8px;
  padding: 0 var(--r4) 13px;
}

.eintrag-aktionen > * { flex: 1 1 0; justify-content: center; min-width: 0; }

/* ------------------------------------------- Arbeitsablauf als Karten */

.ablauf-karten { display: grid; gap: var(--r3); }

.ablauf-bereich {
  margin: var(--r3) 0 0;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.ablauf-bereich:first-child { margin-top: 0; }

.ablauf-karte {
  background: var(--flaeche);
  border: 1px solid var(--linie-zart);
  border-radius: var(--rad-s);
  padding: var(--r3) var(--r4) var(--r3);
  display: grid;
  gap: 10px;
}

.ablauf-karte .ablauf-name { text-align: left; font-size: 15.5px; }
.ablauf-name-fest { font-weight: 600; font-size: 15.5px; }
.ablauf-karte .ablauf-hinweis { margin: 0; }

/* Sieben Tage nebeneinander, jeder als eigene Flaeche zum Antippen. Zusammen
   brauchen sie rund 290 Pixel, es sind 358 da. Ein Tag ist mindestens 40 Pixel
   breit und hoch, sonst trifft ihn niemand mit dem Daumen. */
.tagesreihe {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.tagesknopf {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 44px;
  border-radius: 9px;
  border: 1px solid var(--linie-stark);
  background: var(--flaeche-sanft);
  color: var(--text-leise);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.tagesknopf input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.tagesknopf:has(input:checked) {
  background: var(--blau-hell);
  border-color: var(--blau-hell-stark);
  color: var(--blau-dunkel);
}

.tagesknopf:has(input:focus-visible) { outline: 2px solid var(--blau); outline-offset: 1px; }
.tagesknopf:has(input:disabled) { cursor: default; opacity: .55; }
.tagesknopf.ist-wochenende { background: transparent; }
.tagesknopf.ist-wochenende:has(input:checked) { background: var(--blau-hell); }

.ablauf-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--r3);
  flex-wrap: wrap;
}

/* Entfernen ist der seltenste Griff auf dieser Karte und soll nicht der
   auffaelligste sein. */
.ablauf-fuss .knopf {
  min-height: 32px;
  padding: 0 10px;
  font-size: 13px;
  color: var(--text-leise);
}
.ablauf-fuss .knopf:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .tagesknopf { transition: none; }
}

@media (max-width: 820px) {
  .bei-breit { display: none; }
  .bei-schmal { display: block; }
  ul.bei-schmal { display: grid; }
}

.zeilen-aktionen { display: flex; gap: 6px; justify-content: flex-end; }
.tabelle tbody tr.klickbar { cursor: pointer; }
.tabelle td.eng, .tabelle th.eng { width: 1%; white-space: nowrap; }
.tabelle td.rechts, .tabelle th.rechts { text-align: right; }
.tabelle .haupt { font-weight: 560; }
.tabelle .neben { color: var(--text-leise); font-size: 13px; }

.fortschritt-balken {
  position: relative; width: 78px; height: 6px;
  border-radius: 999px; background: var(--flaeche-versenkt);
  display: inline-block; vertical-align: middle; margin-right: var(--r2);
}
.fortschritt-balken i {
  position: absolute; inset: 0 auto 0 0;
  border-radius: 999px; background: var(--blau);
}
.fortschritt-balken.fertig i { background: var(--erfolg); }

/* --------------------------------------------------------- Detailansichten */

.detail {
  display: grid; gap: var(--r5);
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  align-items: start;
}
.detail-haupt { min-width: 0; }
.detail-neben { min-width: 0; display: grid; gap: var(--r4); position: sticky; top: calc(var(--kopf-hoehe) + var(--r4)); }

.steckbrief { padding: var(--r5); display: grid; gap: var(--r4); }
.steckbrief dl { margin: 0; display: grid; gap: var(--r3); }
.steckbrief dt {
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-leise);
}
.steckbrief dd { margin: 2px 0 0; font-size: 14px; overflow-wrap: anywhere; }

.reiter {
  display: flex; gap: var(--r1); flex-wrap: wrap;
  border-bottom: 1px solid var(--linie);
  margin-bottom: var(--r5);
}
.reiter-knopf {
  appearance: none; border: 0; background: transparent;
  font: inherit; font-size: 14px; font-weight: 550; color: var(--text-leise);
  padding: var(--r3) var(--r3); margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.reiter-knopf:hover { color: var(--text); }
.reiter-knopf[aria-selected="true"] { color: var(--blau-dunkel); border-bottom-color: var(--blau); }

/* -------------------------------------------------------- Arbeitsablauf */

.ablauf-tabelle { min-width: 720px; }
.ablauf-tabelle th.tag, .ablauf-tabelle td.tag { width: 46px; text-align: center; padding: 0; }
.ablauf-tabelle tr.bereich-zeile td {
  background: var(--flaeche-versenkt);
  font-size: 12px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-weich);
  height: 32px;
}
.ablauf-tabelle td.tag label {
  display: grid; place-items: center; height: var(--zeile-hoehe); margin: 0; cursor: pointer;
}
.ablauf-tabelle input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--blau); cursor: pointer; }
.ablauf-tabelle td.tag.wochenende { background: var(--flaeche-sanft); }
.ablauf-name {
  display: block; width: 100%; padding: 0; margin: 0;
  min-height: auto; border: 0; background: transparent;
  font: inherit; font-weight: 560; color: var(--text);
  text-align: left; cursor: pointer;
}
.ablauf-name:hover { color: var(--blau-dunkel); text-decoration: underline; }
.ablauf-hinweis { display: block; color: var(--text-leise); font-size: 12.5px; }

/* --------------------------------------------------------------- Formulare */

.formular-raster {
  display: grid; gap: var(--r4);
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.formular-raster .voll { grid-column: 1 / -1; }
.formular-fuss {
  display: flex; gap: var(--r2); flex-wrap: wrap;
  margin-top: var(--r5); padding-top: var(--r4);
  border-top: 1px solid var(--linie-zart);
}
textarea.feld { min-height: 96px; resize: vertical; line-height: 1.55; }
select.feld { cursor: pointer; }

.schalter { display: flex; align-items: center; gap: var(--r2); }
.schalter label { margin: 0; font-size: 14px; font-weight: 500; color: var(--text); }
.schalter input { width: 17px; height: 17px; accent-color: var(--blau); }

.tage-wahl { display: flex; gap: 4px; flex-wrap: wrap; }
.tage-wahl label {
  display: grid; place-items: center;
  width: 34px; height: 34px; margin: 0;
  border: 1px solid var(--linie-stark); border-radius: var(--rad-s);
  font-size: 12px; font-weight: 600; color: var(--text-weich);
  cursor: pointer; user-select: none;
}
.tage-wahl input { position: absolute; opacity: 0; pointer-events: none; }
.tage-wahl label:has(input:checked) {
  background: var(--blau); border-color: var(--blau); color: #fff;
}
.tage-wahl label:has(input:focus-visible) { box-shadow: var(--fokus-ring); }

/* ------------------------------------------------------------------ Dialog */

dialog.dialog {
  /* Ohne margin:auto klebt der Dialog oben links, weil das globale Reset in
     marken.css das voreingestellte margin des Elements ueberschreibt. */
  margin: auto;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: 0;
  border: 0;
  border-radius: var(--rad-l);
  color: var(--text);
  /* Schwebende Ebene, also Glas mit Lichtkante. */
  background: var(--glas-fuellung);
  -webkit-backdrop-filter: var(--glas-filter);
  backdrop-filter: var(--glas-filter);
  box-shadow: var(--glas-kante), var(--glas-wurf);
}
dialog.dialog::backdrop {
  background: var(--schleier);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
/* Wo es keine Unschaerfe gibt, waere Glas nur eine halbdurchsichtige Flaeche
   ueber dem Text darunter. Dann lieber deckend. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kopf, dialog.dialog { background: var(--glas-deckend); }
}
.dialog-kopf {
  display: flex; align-items: center; gap: var(--r3);
  padding: var(--r4) var(--r5);
  border-bottom: 1px solid var(--linie-zart);
}
.dialog-kopf h3 { flex: 1; }
.dialog-inhalt { padding: var(--r5); overflow-y: auto; }
.dialog-fuss {
  display: flex; justify-content: flex-end; gap: var(--r2); flex-wrap: wrap;
  padding: var(--r4) var(--r5);
  border-top: 1px solid var(--linie-zart);
}
.dialog-fehler {
  margin: 0 0 var(--r4); padding: var(--r3);
  border-radius: var(--rad-s);
  background: var(--fehler-bg); color: var(--fehler-text); font-size: 14px;
}

/* ---------------------------------------------------- Zustaende und Listen */

.laden { display: grid; gap: var(--r3); padding: var(--r5); }
.laden-balken {
  height: 13px; border-radius: 999px;
  background: linear-gradient(90deg, var(--flaeche-versenkt), var(--flaeche-hover), var(--flaeche-versenkt));
  background-size: 300% 100%;
  animation: wandert 1.4s ease-in-out infinite;
}
@keyframes wandert { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.leer h3 { color: var(--text); }
.leer p { max-width: 42ch; }

.fehler-block {
  padding: var(--r5); border-radius: var(--rad);
  background: var(--fehler-bg); color: var(--fehler-text);
}

/* Die Meldungsleiste baut ui.js selbst auf und bringt die Klasse glas mit.
   Hier steht nur, dass sie ueber Kopfzeile und Dialog liegt. */
.meldungen { z-index: 95; }

/* ------------------------------------------------------------- Bilder etc. */

.galerie {
  display: grid; gap: var(--r3);
  grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
}
.galerie-feld {
  position: relative; aspect-ratio: 4 / 3;
  border-radius: var(--rad); overflow: hidden;
  background: var(--flaeche-versenkt);
  border: 1px solid var(--linie);
  padding: 0; cursor: zoom-in;
}
.galerie-feld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galerie-feld figcaption, .galerie-feld .bildtext {
  position: absolute; inset: auto 0 0 0;
  padding: 6px var(--r2);
  background: var(--bildtext-verlauf);
  color: #fff; font-size: 12px; text-align: left;
}

.datei-liste {
  display: grid; gap: 1px;
  background: var(--linie-zart);
  border-radius: var(--rad-s); overflow: hidden;
}
.datei-zeile {
  display: flex; align-items: center; gap: var(--r3);
  padding: var(--r3) var(--r4);
  border: 0; border-radius: 0;
  background: var(--flaeche);
}
.datei-zeile .name { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.unterschrift-feld {
  border: 1px solid var(--linie); border-radius: var(--rad);
  background: var(--flaeche-sanft);
  padding: var(--r4);
}
.unterschrift-feld svg { width: 100%; height: auto; display: block; }

.nachweis { display: grid; gap: var(--r3); }
.nachweis div { display: grid; gap: 2px; }
.nachweis dt {
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-leise);
}
.nachweis dd {
  margin: 0; font-family: var(--schrift-zahl); font-size: 13px;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ Wissen/Hilfe */

/* Vorher ein blauer Vollflaechen-Verlauf mit weissem Kreis darin. Das ist der
   Hero, den jede Vorlage mitbringt, und genau daran erkennt man sie. Jetzt eine
   helle Flaeche mit dem Himmel als Schleier darueber: dieselbe Wirkung, aber
   aus Licht statt aus Farbe, und die Serifenschrift traegt die Ueberschrift. */
.wissen-banner {
  position: relative; overflow: hidden;
  padding: var(--r7) var(--r6);
  border-radius: var(--rad-xl);
  background: var(--flaeche);
  box-shadow: var(--schatten-hebung);
  margin-bottom: var(--r5);
}
.wissen-banner::before {
  content: ""; position: absolute; inset: 0;
  background: var(--himmel);
  pointer-events: none;
}
.wissen-banner > * { position: relative; }
.wissen-banner h2 { font-size: clamp(25px, 3.4vw, 34px); }
.wissen-banner p { margin-top: var(--r2); max-width: 54ch; color: var(--text-weich); }

.such-leiste { position: relative; margin-top: var(--r5); max-width: 620px; }
.such-leiste input {
  width: 100%; min-height: 54px;
  padding: 0 var(--r5) 0 52px;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--flaeche); color: var(--text);
  font: inherit; font-size: 16px;
  box-shadow: var(--glas-kante), var(--schatten-hebung);
}
.such-leiste input:focus { outline: none; box-shadow: var(--schatten-hebung), var(--fokus-ring); }
.such-leiste svg {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  color: var(--text-leise); pointer-events: none;
}

.kachel-raster {
  display: grid; gap: var(--r4);
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}
/* Kacheln sind Wege, keine Daten: das Raster bleibt. Aber ohne den 1px-Rand,
   der sie in die Flaeche stanzt. Sie liegen auf und heben sich beim Zeigen. */
.kachel {
  display: grid; gap: var(--r2); align-content: start;
  padding: var(--r5);
  background: var(--flaeche);
  border: 0; border-radius: var(--rad);
  box-shadow: var(--glas-kante), var(--schatten-karte);
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  transition: box-shadow .16s, transform .12s;
}
.kachel:hover {
  box-shadow: var(--glas-kante), var(--schatten-hebung);
  transform: translateY(-2px);
  text-decoration: none;
}
.kachel:active { transform: translateY(0); }
.kachel-zeichen {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: var(--rad-s);
  background: var(--blau-hell); color: var(--blau-dunkel);
  font-size: 18px;
}
.kachel h3 { font-size: 15.5px; }
.kachel p { font-size: 13.5px; color: var(--text-leise); }
.kachel-zahl { font-size: 12.5px; font-weight: 600; color: var(--blau-dunkel); }

/* Regel 3: zusammengehoerende Eintraege auf einer Flaeche. */
.schritte {
  display: grid; gap: 1px; counter-reset: schritt;
  background: var(--linie-zart);
  border-radius: var(--rad); overflow: hidden;
  box-shadow: var(--schatten-hebung);
}
.schritt {
  display: flex; align-items: center; gap: var(--r4);
  padding: var(--r4);
  border: 0; border-radius: 0;
  background: var(--flaeche);
  color: inherit;
  transition: background .14s;
}
.schritt:hover { background: var(--flaeche-hover); text-decoration: none; }
.schritt-nummer {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--flaeche-versenkt); color: var(--text-weich);
  font-size: 13px; font-weight: 650;
}
.schritt.fertig .schritt-nummer { background: var(--erfolg-bg); color: var(--erfolg-text); }
.schritt-text { flex: 1; min-width: 0; }
.schritt-text span { display: block; font-size: 13px; color: var(--text-leise); }

.fortschritt-zeile {
  display: flex; align-items: center; gap: var(--r3);
  margin-bottom: var(--r4); font-size: 13.5px; color: var(--text-leise);
}
.fortschritt-zeile .fortschritt-balken { width: 180px; height: 8px; }

.faq {
  display: grid; gap: 1px;
  background: var(--linie-zart);
  border-radius: var(--rad); overflow: hidden;
  box-shadow: var(--schatten-hebung);
}
.faq details {
  border: 0; border-radius: 0;
  background: var(--flaeche);
  overflow: hidden;
}
.faq summary {
  padding: var(--r4) var(--r5);
  font-weight: 550; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--text-leise); font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq .faq-text { padding: 0 var(--r5) var(--r5); color: var(--text-weich); font-size: 14px; }

.artikel-huelle { display: grid; gap: var(--r5); grid-template-columns: minmax(0, 1fr) minmax(0, 260px); align-items: start; }
.artikel-text { font-size: 15.5px; line-height: 1.65; color: var(--text-weich); }
.artikel-text h3 { margin: var(--r5) 0 var(--r2); color: var(--text); }
.artikel-text p { margin-bottom: var(--r3); }
.artikel-text ul { margin: 0 0 var(--r3); padding-left: var(--r5); }
.artikel-text li { margin-bottom: 6px; }
.artikel-video {
  width: 100%; border-radius: var(--rad); background: #000; display: block;
  aspect-ratio: 16 / 9;
}
.geholfen {
  display: flex; align-items: center; gap: var(--r3); flex-wrap: wrap;
  margin-top: var(--r6); padding-top: var(--r5);
  border-top: 1px solid var(--linie);
}
.treffer-liste {
  display: grid; gap: 1px;
  background: var(--linie-zart);
  border-radius: var(--rad); overflow: hidden;
  box-shadow: var(--schatten-hebung);
}
.treffer {
  display: grid; gap: 4px; padding: var(--r4);
  border: 0; border-radius: 0;
  background: var(--flaeche); color: inherit;
  transition: background .14s;
}
.treffer:hover { background: var(--flaeche-hover); text-decoration: none; }
.treffer strong { font-size: 15px; }
.treffer span { font-size: 13.5px; color: var(--text-leise); }

/* -------------------------------------------------------------- Kalender */

.kalender {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px; background: var(--linie); border: 1px solid var(--linie);
  border-radius: var(--rad); overflow: hidden;
}
.kalender-kopf {
  background: var(--flaeche-sanft); color: var(--text-leise);
  font-size: 11.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
  padding: var(--r2); text-align: center;
}
.kalender-tag {
  background: var(--flaeche); min-height: 82px;
  padding: var(--r2); border: 0;
  display: grid; align-content: start; gap: 4px;
  font: inherit; text-align: left; cursor: pointer;
}
.kalender-tag:hover { background: var(--flaeche-hover); }
.kalender-tag.fremd { background: var(--flaeche-sanft); color: var(--text-leise); cursor: default; }
.kalender-tag.heute .kalender-zahl { color: var(--blau-dunkel); font-weight: 700; }
.kalender-tag.gewaehlt { background: var(--flaeche-aktiv); box-shadow: inset 0 0 0 2px var(--blau); }
.kalender-zahl { font-size: 13px; font-variant-numeric: tabular-nums; }
.kalender-punkte { display: flex; gap: 3px; flex-wrap: wrap; }
.kalender-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--neutral); }
.kalender-punkt.laeuft { background: var(--laeuft); }
.kalender-punkt.abgegeben { background: var(--warnung); }
.kalender-punkt.freigegeben { background: var(--erfolg); }

.auswahl-leiste {
  display: flex; align-items: center; gap: var(--r3); flex-wrap: wrap;
  padding: var(--r3) var(--r5);
  background: var(--blau-hell); border-bottom: 1px solid var(--linie);
  font-size: 14px;
}
.auswahl-leiste strong { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- Schmal */

.schleier {
  position: fixed; inset: 0; z-index: 50;
  background: var(--schleier);
}

@media (max-width: 900px) {
  .spalte { padding-left: 0; }
  .leiste {
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: var(--schatten-schwebe);
  }
  .huelle[data-schublade="offen"] .leiste { transform: translateX(0); }
  .nur-schmal { display: inline-flex; }
  .nur-breit { display: none; }
  .kopf { padding: 0 var(--r4); }
  .arbeitsbereich { padding: var(--r4); }
  .detail, .artikel-huelle { grid-template-columns: minmax(0, 1fr); }
  .detail-neben { position: static; }
  .wissen-banner { padding: var(--r5) var(--r4); }
  .wissen-banner h2 { font-size: 22px; }
  .kalender-tag { min-height: 64px; }

  /* Am Handy hat eine Tabelle rund 358 Pixel. Was darueber liegt, verschwindet
     nach rechts, und mit ihm die Knoepfe am Zeilenende: Remzi legt beim
     Ersttermin eine Etage an, verschreibt sich und sieht den Knopf nicht, mit
     dem er das korrigieren koennte. Deshalb fallen am Handy die Spalten weg,
     die im Aenderungsdialog ohnehin stehen. */
  .tabelle th.schmal-weg, .tabelle td.schmal-weg { display: none; }

  /* Was bleibt, darf umbrechen. Sonst schiebt ein langer Bereichsname die
     Tabelle wieder ueber den Rand und die Knoepfe verschwinden erneut. */
  .tabelle td.haupt, .tabelle td.neben { overflow-wrap: anywhere; white-space: normal; }
  .tabelle .knopf { padding: 5px 9px; font-size: 13px; }

  /* Zwei Knoepfe nebeneinander schieben die Tabelle am Handy ueber den Rand.
     Untereinander passen sie und sind mit dem Daumen leichter zu treffen. */
  .zeilen-aktionen { flex-direction: column; align-items: stretch; }
  .zeilen-aktionen .knopf { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .leiste { transition: none; }
}