/* ============================================================
   Lena · Navigationsleiste
   ============================================================
   Eine Leiste über allen Bereichen. Sie sieht überall gleich
   aus -- wer von den Vorgängen in die Verwaltung wechselt, soll
   nicht das Gefühl haben, eine andere Anwendung zu öffnen.
   ============================================================ */

.nav {
  display: flex;
  align-items: center;
  /* Umbrechen statt überlaufen.
     
     Bis Paket 86 stand hier nichts dergleichen: Neun Bereiche
     mit Beschriftung brauchen rund 1300 px, und wer ein
     schmaleres Fenster hatte, schob die ganze Seite seitwärts.
     Gemessen bei 1280 px: 197 px über den Rand; bei 860 px:
     617 px. Jetzt bricht die Leiste um, und die Bereiche
     rücken vorher enger zusammen. */
  flex-wrap: wrap;
  row-gap: 0;
  gap: 0;
  padding: 0 1.5rem;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}

.nav__marke {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 1rem 1.75rem 1rem 0;
  margin-right: .5rem;
  border-right: 1px solid var(--linie);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--tinte);
}

.nav__bereiche {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-self: stretch;
  /* Ohne min-width: 0 wächst ein Flex-Element über seinen
     Anteil hinaus, statt umzubrechen. */
  min-width: 0;
  flex: 1 1 auto;
}

.nav__bereich {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 0 1.125rem;
  border-bottom: 2px solid transparent;
  color: var(--text-leise);
  font-size: .90625rem;
  text-decoration: none;
  white-space: nowrap;
}
.nav__bereich:hover { color: var(--text); background: #FCFBF8; }
.nav__bereich[aria-current="page"] {
  border-bottom-color: var(--tinte);
  color: var(--tinte);
  font-weight: 600;
}
.nav__bereich svg { flex: none; }

/* Eine Zahl am Reiter zeigt, was dort wartet -- auch aus einem
   anderen Bereich heraus. */
.nav__zahl {
  min-width: 1.1875rem;
  padding: .0625rem .375rem;
  border-radius: var(--radius-marke);
  background: var(--linie-fein);
  color: var(--text-leise);
  font-size: .75rem;
  font-weight: 700;
  text-align: center;
}
.nav__zahl--dringend { background: var(--frist-flaeche); color: var(--frist); }

.nav__person { margin-left: auto; display: flex; align-items: center; gap: .875rem; }

/* Der Verbindungsanzeiger (Paket 109). Die Farbe der Fristen,
   nicht die des Fehlers: Es ist kein Schaden, sondern ein
   Zustand, der voruebergeht. */
.nav__offline {
  padding: .1875rem .5rem;
  border-radius: var(--radius-marke);
  background: var(--register-blass);
  color: var(--register);
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}
.nav__wer { text-align: right; line-height: 1.3; }
.nav__wer b { display: block; font-size: .84375rem; font-weight: 600; }
.nav__wer span { font-size: .71875rem; color: var(--text-leise); }

.nav__aus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: 9px;
  background: var(--flaeche);
  color: var(--text-leise);
  cursor: pointer;
}
.nav__aus:hover { border-color: var(--tinte); color: var(--tinte); }

/* Zweite Ebene: woran man innerhalb eines Bereichs arbeitet. */
.nav-unter {
  display: flex;
  gap: 2px;
  padding: 0 1.5rem;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}
.nav-unter__knopf {
  padding: .6875rem .875rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-leise);
  font: inherit;
  font-size: .84375rem;
  cursor: pointer;
}
.nav-unter__knopf[aria-current="true"] {
  border-bottom-color: var(--text);
  color: var(--text);
  font-weight: 600;
}

/* Dazwischen: erst enger, dann kürzer. Die Beschriftung bleibt,
   solange sie passt -- ein Symbol allein beantwortet nicht, wo
   man etwas findet. */
@media (max-width: 96rem) {
  .nav__bereich { padding: 0 .875rem; }
}

@media (max-width: 82rem) {
  .nav { padding: 0 1rem; }
  .nav__bereich { padding: 0 .75rem; gap: .375rem; }
  .nav__marke { padding-right: 1rem; margin-right: .25rem; }
}

@media (max-width: 72rem) {
  .nav__bereich { padding: 0 .5rem; font-size: .875rem; }
  .nav__wer { display: none; }
}

/* Ab hier nur noch Zeichen. Drei Zeilen Beschriftung sind
   schlechter als eine Zeile Symbole -- zumal jeder Reiter
   seinen Namen als Sprechblase und für Vorleseprogramme
   behält. */
@media (max-width: 62rem) {
  .nav__bereich span:not(.nav__zahl) { display: none; }
  .nav__bereich { padding: 0 .625rem; gap: .25rem; }
}

/* Das Telefon: jedes Pixel zählt. */
@media (max-width: 30rem) {
  .nav { padding: 0 .5rem; }
  .nav__bereich { padding: 0 .4375rem; }
  .nav__marke { padding-right: .625rem; margin-right: .125rem; }
}

@media (max-width: 44rem) {
  .nav { padding: 0 .875rem; flex-wrap: wrap; }
  .nav__marke { padding-right: 1rem; margin-right: .25rem; }
  .nav__bereich span:not(.nav__zahl) { display: none; }
  .nav__wer { display: none; }
}

/* ---------- Nachrichtencenter (Paket 81) ----------
   Die Glocke vor dem Namen, das Feld darunter. Das Feld haengt
   am Knopf, nicht an der Seite: Es soll auf jeder Seite an
   derselben Stelle aufgehen. */
/* Die Leiste liegt ueber dem Inhalt -- sonst verdeckte die Seite
   darunter das aufgeklappte Feld. (Der Glaseffekt in dunkel.css
   macht die Leiste zu einer eigenen Ebene; ohne z-index laege
   alles, was spaeter im Dokument kommt, darueber.) */
.nav { position: relative; z-index: 40; }
.nav__glocke-halter { position: relative; display: flex; }
.nav__glocke {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: 11px;
  background: var(--flaeche);
  color: var(--text-leise);
  cursor: pointer;
}
.nav__glocke[hidden] { display: none; }
.nav__glocke:hover, .nav__glocke--offen { border-color: var(--tinte); color: var(--tinte); }
.nav__glocke-zahl {
  position: absolute;
  top: -.3125rem;
  right: -.3125rem;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 .3125rem;
  box-sizing: border-box;
  border-radius: 99px;
  background: var(--frist);
  color: #FFFFFF;
  font-size: .6875rem;
  font-weight: 800;
  line-height: 1.125rem;
  text-align: center;
}
.nav__glocke-zahl[hidden] { display: none; }

.nc {
  position: absolute;
  top: calc(100% + .75rem);
  right: 0;
  z-index: 60;
  width: 30rem;
  max-width: calc(100vw - 1.5rem);
  max-height: calc(100dvh - 6rem);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linie-stark);
  border-radius: 18px;
  background: var(--flaeche);
  box-shadow: 0 24px 70px rgba(0,0,0,.22);
  overflow: hidden;
  text-align: left;
}
.nc[hidden] { display: none; }
.nc__kopf { flex: none; padding: 1rem 1.125rem .75rem; display: flex; flex-direction: column; gap: .75rem; border-bottom: 1px solid var(--linie); }
.nc__titelzeile { display: flex; align-items: baseline; gap: .75rem; }
.nc__titel { flex-grow: 1; margin: 0; font-size: 1.125rem; font-weight: 750; }
.nc__titel:focus { outline: none; }
.nc__textknopf {
  width: auto; margin: 0; padding: .25rem 0;
  border: 0; background: none; color: var(--tinte);
  font: inherit; font-size: .8125rem; cursor: pointer;
}
.nc__textknopf:hover { text-decoration: underline; }
.nc__reiter { display: flex; gap: 3px; padding: 3px; border-radius: 10px; background: var(--linie-fein); }
.nc__reiterknopf {
  flex: 1; width: auto; margin: 0; min-height: 2rem; padding: 0 .5rem;
  border: 0; border-radius: 8px; background: transparent; color: var(--text-leise);
  font: inherit; font-size: .78125rem; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.nc__reiterknopf[aria-pressed="true"] { background: var(--tinte); color: #FFFFFF; }
.nc__liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.nc__leer { margin: 0; padding: 1.5rem 1.125rem; color: var(--text-leise); font-size: .875rem; line-height: 1.5; }
.nc__eintrag { display: flex; gap: .75rem; padding: .875rem 1.125rem; border-top: 1px solid var(--linie-fein); }
.nc__eintrag:first-child { border-top: 0; }
.nc__zeichen {
  flex: none; width: 2.125rem; height: 2.125rem; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--linie-fein); color: var(--tinte);
}
.nc__rumpf { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.nc__oben { display: flex; align-items: baseline; gap: .5rem; }
.nc__punkt { flex: none; width: .4375rem; height: .4375rem; border-radius: 99px; background: var(--tinte); align-self: center; }
.nc__eintragtitel { flex-grow: 1; margin: 0; font-size: .875rem; font-weight: 550; line-height: 1.35; }
.nc__eintrag--neu .nc__eintragtitel { font-weight: 750; }
.nc__wann { flex: none; font-size: .75rem; color: var(--text-leise); white-space: nowrap; }
.nc__text { margin: 0; font-size: .8125rem; line-height: 1.45; color: var(--text-leise); overflow-wrap: anywhere; }
.nc__wege { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
.nc__knopf {
  width: auto; margin: 0; min-height: 2.125rem; padding: 0 .8125rem;
  border: 1px solid var(--linie-stark); border-radius: 9px;
  background: var(--flaeche); color: var(--text);
  font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer;
}
.nc__knopf--haupt { border-color: var(--tinte); background: var(--tinte); color: #FFFFFF; }
.nc__knopf:disabled { opacity: .55; cursor: default; }
.nc__fuss { flex: none; margin: 0; padding: .625rem 1.125rem; border-top: 1px solid var(--linie); font-size: .75rem; color: var(--text-leise); }
.nc-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 44rem) {
  .nc {
    position: fixed; top: var(--nc-oben, 4.25rem); left: .75rem; right: .75rem;
    width: auto; max-width: none; max-height: calc(100dvh - var(--nc-oben, 4.25rem) - .75rem);
  }
}

/* ---------- Knöpfe mit Symbol ---------- */
/* Ein Ton, drei Gewichte: gefüllt für die Handlung, die den
   Vorgang weiterbringt; umrandet für gleichrangige Wege;
   still für alles Übrige. */
.knopf-svg {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  width: auto;
  margin: 0;
  padding: .5625rem 1.125rem;
  border: 1px solid var(--linie-stark);
  border-radius: 10px;
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .1s ease, border-color .1s ease, background .1s ease;
}
.knopf-svg svg { flex: none; }
.knopf-svg:hover { border-color: var(--tinte); color: var(--tinte); transform: translateY(-1px); }
.knopf-svg:active { transform: translateY(0); }

.knopf-svg--haupt {
  border-color: var(--tinte);
  background: var(--tinte);
  color: #fff;
  box-shadow: 0 1px 3px rgba(31,58,110,.24);
}
.knopf-svg--haupt:hover {
  background: var(--tinte-hell);
  border-color: var(--tinte-hell);
  color: #fff;
}

/* Der Generator ist etwas Eigenes -- er schreibt einen Prozess,
   statt ihn zu verwalten. Das darf man sehen. */
.knopf-svg--funke {
  border-color: #C8891F;
  background: linear-gradient(180deg, #FBF0DC, #F6E4C2);
  color: #5A3A08;
}
.knopf-svg--funke:hover {
  border-color: #A9700D;
  background: linear-gradient(180deg, #FBF0DC, #F0D9AE);
  color: #5A3A08;
}

/* Die Kachelansicht nutzt die ganze Bildschirmbreite -- auf
   der Startseite wie in der Verwaltung. Kacheln sind zum
   Überblicken da; je mehr nebeneinander stehen, desto
   schneller findet man, was man sucht. */
body.kacheln main,
body.kacheln .kopf { max-width: none; }

/* ---------- Prozesskacheln ---------- */
/* Quadratische Kacheln statt einer Liste: Ein Prozess ist ein
   Gegenstand, kein Listeneintrag. Der Farbton kommt aus der
   Kategorie -- gleiche Sorte, gleiche Farbe. */
/* So viele Kacheln nebeneinander, wie die Breite hergibt --
   mindestens 15,5 rem je Kachel, höchstens 18. Bei einem
   einzigen Prozess bleibt die Kachel schmal, weil die Spalten
   nicht über 18 rem wachsen.
   
   Kein "1fr": damit zöge sich eine einzelne Kachel über die
   ganze Breite und wäre so hoch wie der Bildschirm. */
.kachelraster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 18rem));
  justify-content: start;
  gap: 1.125rem;
  margin-bottom: 1.75rem;
}

.kachel {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  box-shadow: 0 1px 3px rgba(40,35,25,.05);
  transition: transform .12s ease, box-shadow .12s ease;
}
.kachel:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(40,35,25,.11); }

/* Die Fläche ist der Knopf: ein Klick öffnet den Prozess.
   Feste Höhe statt aspect-ratio -- quadratisch wäre sie bei
   dieser Breite viel zu hoch. 12,5 rem sind 200 Pixel, wie in
   TONI. */
.kachel__flaeche {
  display: flex;
  flex-direction: column;
  height: 12.5rem;
  padding: 1rem 1.0625rem .875rem;
  border: 0;
  background: var(--kachel-ton, #4B5563);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.kachel__art {
  font-size: .65625rem;
  font-weight: 700;
  letter-spacing: .09em;
  opacity: .82;
}
.kachel__titel {
  margin: .3125rem 0 .4375rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -.016em;
}
.kachel__text {
  flex: 1;
  margin: 0;
  font-size: .78125rem;
  line-height: 1.5;
  opacity: .88;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* Segmente statt eines durchgehenden Balkens -- wie in TONI.
   Man sieht auf einen Blick, wie weit etwas ist, ohne den
   Prozentwert lesen zu müssen. */
.kachel__streifen {
  display: flex;
  gap: 3px;
  height: 3px;
  margin: .8125rem 0 .5rem;
}
.kachel__streifen i {
  flex: 1;
  border-radius: 2px;
  background: rgba(255,255,255,.3);
}
.kachel__streifen i.voll { background: #fff; }
.kachel__stand {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  font-size: .71875rem;
}
.kachel__stand b { font-weight: 700; }
.kachel__stand span { opacity: .8; text-align: right; }

/* Die Werkzeuge sitzen unter der Fläche, nicht darauf: Sie
   gehören zur Verwaltung, nicht zum Prozess. */
.kachel__werkzeuge {
  display: flex;
  justify-content: space-around;
  gap: .25rem;
  padding: .5rem .625rem;
  background: var(--flaeche);
}
.kachel__werkzeuge .werkzeug { width: 2rem; height: 2rem; border-radius: 8px; }

/* Kategorien. Kräftige Töne, alle mit weißer Schrift über 4,5:1. */
.kachel--antrag    { --kachel-ton: linear-gradient(155deg, #1F3A6E, #16437A); }
.kachel--meldung   { --kachel-ton: linear-gradient(155deg, #7A3E12, #96521A); }
.kachel--vorfall   { --kachel-ton: linear-gradient(155deg, #8A1F1A, #A32B22); }
.kachel--anzeige   { --kachel-ton: linear-gradient(155deg, #4A2A6B, #5C3583); }
.kachel--sonstiges { --kachel-ton: linear-gradient(155deg, #3D4A3A, #4A5A45); }

/* Stillgelegt: blass, aber lesbar -- der Prozess ist nicht weg,
   er wird nur nicht mehr angeboten. */
.kachel--still .kachel__flaeche { filter: grayscale(.75); opacity: .72; }

.kachel-fuss { display: flex; flex-wrap: wrap; gap: .625rem; }


/* Auf der Startseite ist die Kachel ein Startknopf: kein
   Fortschritt, keine Werkzeuge, dafür ein Pfeil. */
.kachel__stand--start {
  align-items: center;
  font-size: .78125rem;
  padding-top: .5rem;
  border-top: 1px solid rgba(255,255,255,.28);
}
.kachel__stand--start svg { flex: none; opacity: .85; }


/* ============================================================
   Die Reiterleiste der Verwaltung
   ============================================================
   Hier, nicht in generator.css: Die Leiste erscheint auf vier
   Seiten, und nur eine davon laedt jenes Blatt. Dort stand sie
   fuer die anderen drei wirkungslos da -- die Gruppennamen
   sahen aus wie Menuepunkte.
   ============================================================ */
/* Acht Reiter nebeneinander beantworten nicht, wo man etwas
   sucht. Vier Gruppen tun es -- und sie trennen, was man
   täglich braucht, von dem, was man einmal einstellt. */
/* Die Leiste traegt ihre Begrenzung selbst.
   
   Auf editor.html sitzt sie innerhalb des Inhaltsbereichs, auf
   den anderen drei Seiten habe ich sie an den Seitenanfang
   gesetzt -- ausserhalb jeder Begrenzung. Dort lief sie
   linksbuendig ueber die ganze Breite und schob sich unter die
   Kopfzeile.
   
   Dieselben Masse wie "main": So sitzt sie auf jeder Seite an
   derselben Stelle, gleich wo im Markup sie steht. */
/* Sie steht IN dem Inhaltsbereich der Seite und übernimmt
   dessen Breite.
   
   Vorher trug sie eine eigene Begrenzung von 34rem. Jede Seite
   setzt ihre Breite aber selbst -- 34rem beim Editor, 52rem
   beim Generator, 76rem bei der Belegung. Die Leiste war
   deshalb mal schmaler als der Inhalt darunter, mal breiter.
   
   Eine Breite, die an drei Stellen gepflegt werden müsste, ist
   zwei zu viel. */
.reiter--verwaltung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .125rem;
  margin: 0 0 1rem;
  padding: 0 0 .625rem;
  border-bottom: 1px solid var(--linie-fein);
}

/* Steht sie NICHT in einem main, braucht sie dessen Maße.
   
   Im Editor sitzt sie unmittelbar im Abschnitt, vor den fünf
   Bereichen -- dort griff ".reiter" aus editor.css mit der
   Formularbreite von 46rem. Beim Wechsel von Prozessen auf
   Personen sprang die Leiste also schmal, während der Inhalt
   darunter breit blieb.
   
   Dieselben Maße wie "main", damit beides auf einer Linie
   steht. */
.ansicht > .reiter--verwaltung {
  max-width: var(--breite-weit);
  margin: 0 auto 1rem;
  padding: 1.25rem 1.125rem .625rem;
}

/* ---------- Die Reiter selbst ----------
   Sie tragen nirgends ein Maß: Die alte Leiste stand nur im
   Editor und wurde von editor.css gestaltet. Auf den anderen
   drei Seiten klebten die Wörter aneinander -- "ProzesseVorlagen"
   -- und waren unterstrichen wie gewöhnliche Verweise. */
.reiter__knopf {
  display: inline-flex;
  align-items: center;
  padding: .4375rem .75rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 8px 8px 0 0;
  background: none;
  font: inherit;
  font-size: .8125rem;
  color: var(--text-leise);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
a.reiter__knopf:hover { text-decoration: none; }
.reiter__knopf:hover { color: var(--text); }
.reiter__knopf.aktiv,
.reiter__knopf[aria-current="page"] {
  color: var(--tinte);
  border-bottom-color: var(--tinte);
  font-weight: 600;
}
.reiter__gruppe {
  margin: 0 .25rem 0 0;
  font-size: .625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-still);
}
.reiter__trenner {
  width: 1px;
  height: 1.125rem;
  margin: 0 .5rem;
  background: var(--linie);
}



/* Das Zeichen neben dem Schriftzug.
   Es traegt seine Farben selbst und braucht im dunklen Design
   keine eigene Fassung. */
.nav__zeichen {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  display: block;
}

@media (max-width: 40rem) {
  /* Auf schmalen Geraeten steht das Zeichen fuer sich -- der
     Schriftzug kostet dort Platz, den die Bereiche brauchen. */
  .nav__wort { display: none; }
  .nav__marke { padding-right: 1rem; }
}