/* Kunden-Dashboard – Gestaltung nach dem Vorbild des bisherigen Stands.
 *
 * Farbzuordnung: Die Seitenleiste traegt die Hauptfarbe der Organisation,
 * Zahlen, Akzente und Schaltflaechen die Sekundaerfarbe. Bei DOKA ergibt das
 * gelbe Leiste, blaue Zahlen. Ein anderer Kunde faerbt sich vollstaendig mit,
 * ohne dass hier etwas geaendert werden muss.
 *
 * Mobil zuerst gedacht: die Grundregeln gelten fuer das Telefon, die
 * Seitenleiste erscheint erst ab 900px. Darunter liegt die Navigation als
 * Reiterleiste unten am Rand.
 */

:root {
  --marke: #ffdd00;
  --akzent: #315397;
  --marke-text: #10213a;

  --grund: #f5f6f7;
  --flaeche: #ffffff;
  --rand: #e6e8ec;
  --linie: #eef0f3;
  --text: #16264a;
  --text-leise: #5b6b84;
  --text-still: #8a95a8;

  --gut: #1f9d55;
  --warnung: #d98324;
  --alarm: #d94a4a;

  --radius: 18px;
  --radius-klein: 12px;
  --schatten: 0 1px 2px rgba(16, 33, 58, .04), 0 6px 20px rgba(16, 33, 58, .06);
  --abstand: 20px;
  --leiste: 244px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; }
a { color: var(--akzent); }

.sprungmarke {
  position: absolute; left: -9999px;
  background: var(--akzent); color: #fff; padding: .6rem 1rem; z-index: 100;
}
.sprungmarke:focus { left: .5rem; top: .5rem; }

.nur-vorleser {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ==================================================================
   Grundgeruest
   ================================================================== */

.rahmen { min-height: 100dvh; }

.inhalt {
  padding: var(--abstand);
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
  max-width: 1560px;
}

/* ==================================================================
   Seitenleiste
   ================================================================== */

.seitenleiste { background: var(--marke); color: var(--marke-text); }

.leiste-logo { display: grid; place-items: center; padding: 26px 20px 10px; }
.leiste-logo img { max-width: 150px; max-height: 92px; width: auto; height: auto; }
.leiste-logo-ersatz {
  font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--marke-text);
}

.leiste-nav { display: grid; gap: 10px; padding: 22px 22px 0; }

.leiste-nav a {
  display: flex; align-items: center; gap: 12px;
  min-height: 50px; padding: 0 16px;
  border-radius: 14px; text-decoration: none;
  font-size: .88rem; font-weight: 700; line-height: 1.2;
  color: var(--marke-text);
  /* Aufgehellte Markenfarbe statt einer festen zweiten Farbe: funktioniert
     mit jeder Kundenfarbe, ohne dass eine Palette gepflegt werden muss. */
  background: rgba(255, 255, 255, .34);
  border: 1px solid transparent;
  transition: background .15s ease;
}
.leiste-nav a:hover { background: rgba(255, 255, 255, .55); }
.leiste-nav a[aria-current="page"] {
  background: rgba(255, 255, 255, .72);
  border-color: rgba(255, 255, 255, .9);
  box-shadow: 0 4px 14px rgba(16, 33, 58, .10);
}
.leiste-nav svg { width: 19px; height: 19px; flex: none; }

.leiste-fuss { padding: 22px; }
.leiste-trenner { height: 1px; margin: 0 22px 18px; background: rgba(16, 33, 58, .14); }

/* Sprache und Rechtshinweise stehen in einer Zeile: die Sprachwahl nimmt
   den Platz, das Paragraphenzeichen sitzt daneben in fester Breite. */
.fusszeile { display: flex; align-items: stretch; gap: 6px; margin-bottom: 10px; }

/* Unter dem Abmelden statt darueber: Sprache und Rechtshinweise werden
   selten gebraucht, das Abmelden taeglich - und was oft gebraucht wird,
   gehoert dorthin, wo die Hand ohnehin hinfaehrt. */
.fusszeile-unten { margin: 10px 0 0; }
.fusszeile .sprachwahl { flex: 1; min-width: 0; margin-bottom: 0; }

/* Ein Zeichen statt eines Wortes: selten gebraucht, ueberall dasselbe,
   und es braucht keine Uebersetzung. Beschriftet ist es trotzdem. */
.knopf-paragraph {
  flex: none; display: grid; place-items: center;
  width: 42px; border-radius: 14px; text-decoration: none;
  background: rgba(255, 255, 255, .22); color: var(--marke-text);
  font-size: 1.05rem; font-weight: 700; line-height: 1; opacity: .75;
}
.knopf-paragraph:hover { background: rgba(255, 255, 255, .45); opacity: 1; }
.admin-body .knopf-paragraph { background: rgba(255, 255, 255, .10); }
.admin-body .knopf-paragraph:hover { background: rgba(255, 255, 255, .2); }

/* Sprachumschalter: zwei gleich breite Haelften in einer Schale, die aktive
   gefuellt. Ein Schalter mit zwei Zustaenden liest sich schneller als zwei
   Knoepfe, die beide gleich aussehen. */
.sprachwahl {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
  margin-bottom: 10px; padding: 4px; border-radius: 14px;
  background: rgba(255, 255, 255, .22);
}
.sprach-knopf {
  font: inherit; cursor: pointer; padding: 8px 0; border: none; border-radius: 10px;
  background: transparent; color: var(--marke-text);
  font-weight: 700; font-size: .78rem; letter-spacing: .04em;
  opacity: .7;
}
.sprach-knopf:hover { background: rgba(255, 255, 255, .3); opacity: 1; }
.sprach-knopf.aktiv {
  background: rgba(255, 255, 255, .72); opacity: 1;
  box-shadow: 0 2px 8px rgba(16, 33, 58, .10);
}

/* Am Telefon steht die Zeile oben in der Kopfzeile neben dem Abmelden -
   dort zaehlt jede Breite, also nur so breit wie noetig. */
.fusszeile-mobil { margin-bottom: 0; gap: 4px; }
.fusszeile-mobil .sprachwahl {
  grid-auto-columns: auto; flex: none; padding: 3px;
  background: color-mix(in srgb, var(--marke-text) 12%, transparent);
}
.fusszeile-mobil .sprach-knopf { padding: .3rem .5rem; font-size: .72rem; }
.fusszeile-mobil .sprach-knopf.aktiv {
  background: color-mix(in srgb, var(--marke-text) 22%, transparent); box-shadow: none;
}
.fusszeile-mobil .knopf-paragraph {
  width: 32px; border-radius: 10px; font-size: .95rem;
  background: color-mix(in srgb, var(--marke-text) 12%, transparent);
}

/* Auf der Anmeldekarte: unauffaellig unter dem Support, mittig. Hier gibt es
   keine Markenfarbe im Ruecken - die Karte ist weiss. */
.fusszeile-anmelden { justify-content: center; margin: 18px 0 0; gap: 6px; }
.fusszeile-anmelden .sprachwahl {
  grid-auto-columns: auto; flex: none;
  padding: 0; gap: 6px; background: transparent;
}
.fusszeile-anmelden .sprach-knopf {
  padding: .35rem .7rem; border-radius: 9px; color: #8A98AA; font-size: .74rem;
}
.fusszeile-anmelden .sprach-knopf:hover { background: rgba(16, 33, 58, .06); }
.fusszeile-anmelden .sprach-knopf.aktiv {
  background: rgba(16, 33, 58, .07); color: var(--navy); box-shadow: none;
}
.fusszeile-anmelden .knopf-paragraph {
  width: 34px; border-radius: 9px; background: transparent;
  color: #8A98AA; font-size: .95rem;
}
.fusszeile-anmelden .knopf-paragraph:hover {
  background: rgba(16, 33, 58, .06); color: var(--navy);
}

/* Gleiche Aufteilung wie beim Administrationsknopf: Symbol links in fester
   Spalte, Beschriftung mittig im Rest. So stehen beide Knoepfe buendig. */
.knopf-abmelden {
  font: inherit; width: 100%; cursor: pointer;
  display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 12px;
  text-align: center;
  min-height: 46px; padding: 0 16px; border-radius: 14px;
  background: rgba(255, 255, 255, .34);
  border: 1px solid transparent;
  color: var(--marke-text); font-weight: 800; font-size: .84rem;
}
.knopf-abmelden svg { width: 18px; height: 18px; }
.knopf-abmelden:hover { background: rgba(255, 255, 255, .6); }

/* Zugang zur Administration - steht ueber dem Abmelden, weil er dorthin
   gehoert: seltener gebraucht als die Auswertungen, haeufiger als Abmelden. */
.leiste-admin-knopf {
  /* Symbol links, Beschriftung mittig: die Spalte fuer das Symbol ist fest,
     die Beschriftung bekommt den Rest und wird darin zentriert. */
  display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 12px;
  text-align: center;
  min-height: 46px; padding: 0 16px; margin-bottom: 10px;
  border-radius: 14px; text-decoration: none;
  background: rgba(255, 255, 255, .34);
  color: var(--marke-text); font-weight: 700; font-size: .84rem;
}
.leiste-admin-knopf:hover { background: rgba(255, 255, 255, .55); }
.leiste-admin-knopf.aktiv {
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 4px 14px rgba(16, 33, 58, .10);
}
.leiste-admin-knopf svg { width: 18px; height: 18px; flex: none; }

.formular-eins { grid-template-columns: 1fr !important; }
.vorschau-paar {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; margin-top: 16px;
}
.vorschau { margin: 0; display: grid; gap: 8px; justify-items: start; }
.vorschau figcaption { font-size: .76rem; color: var(--text-still); }
.hintergrund-vorschau {
  max-height: 120px; border-radius: var(--radius-klein); border: 1px solid var(--rand);
}

/* Markenauswahl samt Einstellungen - nur fuer Plattform-Admins. Sie steht
   ganz oben ueber dem Logo: erst waehlt man das Dashboard, dann sieht man es. */
.leiste-marke {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px;
  padding: 14px 16px 4px;
}
/* Feld und Rahmen werden aus der Schriftfarbe gemischt und wechseln damit
   zusammen mit ihr. Vorher stand hier eine feste, fast weisse Flaeche - auf
   einer dunklen Markenfarbe wird die Schrift weiss, und dann stand weiss
   auf weiss. */
.leiste-marke select {
  font: inherit; width: 100%; padding: .5rem .6rem; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--marke-text) 30%, transparent);
  background: color-mix(in srgb, var(--marke-text) 12%, transparent);
  color: var(--marke-text); font-weight: 700; font-size: .82rem;
}
/* Die aufgeklappte Liste zeichnet das Betriebssystem auf eigenem Grund.
   Ohne eigene Angabe erben die Eintraege die Schriftfarbe der Leiste und
   stehen dann weiss auf weiss. Hier gelten deshalb die normalen
   Seitenfarben, unabhaengig von der Marke. */
.leiste-marke select option {
  background: var(--flaeche);
  color: var(--text);
}
/* Dasselbe wie beim Auswahlfeld: mitwechseln statt fest hell. */
.marke-einstellungen {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--marke-text) 30%, transparent);
  background: color-mix(in srgb, var(--marke-text) 12%, transparent);
  color: var(--marke-text); text-decoration: none;
}
.marke-einstellungen:hover { background: #fff; }
.marke-einstellungen svg { width: 18px; height: 18px; }

.leiste-mobilfuss { display: none; }

@media (min-width: 900px) {
  .rahmen { display: grid; grid-template-columns: var(--leiste) minmax(0, 1fr); }
  .seitenleiste {
    position: sticky; top: 0; height: 100dvh;
    display: flex; flex-direction: column; overflow-y: auto;
  }
  .leiste-nav { flex: 1; align-content: start; }
  .inhalt { padding: 34px 40px 40px; }
}

/* --- am Telefon: Kopfzeile oben, Navigation unten --- */

@media (max-width: 899px) {
  .seitenleiste {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 8px 14px;
  }
  .leiste-logo { padding: 0; }
  .leiste-logo img { max-height: 38px; max-width: 108px; }
  .leiste-trenner, .leiste-fuss { display: none; }

  .leiste-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    gap: 0; padding: 0; background: var(--marke);
    border-top: 1px solid rgba(16, 33, 58, .14);
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* Nur Symbole, kein Text: fuenf Beschriftungen nebeneinander ergaben auf
     einem Telefon fuenf abgeschnittene Woerter. Der Text bleibt im Markup -
     Vorlesewerkzeuge brauchen ihn, und ein Symbol allein sagt ihnen nichts. */
  .leiste-nav a {
    flex-direction: column; justify-content: center; gap: 0;
    min-height: 56px; padding: 6px 2px;
    border-radius: 0; background: transparent;
  }
  .leiste-nav a span {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .leiste-nav svg { width: 23px; height: 23px; }
  .leiste-nav a[aria-current="page"] {
    background: rgba(255, 255, 255, .55); box-shadow: none; border-color: transparent;
  }

  /* Die Kundenauswahl bekommt eine eigene Zeile unter der Kopfleiste.

     Vorher stand sie neben Logo und Abmelden und war auf ein Drittel der
     Bildschirmbreite gequetscht - von einem Kundennamen blieben drei
     Buchstaben. Oben bleibt damit alles wie beim Kunden, darunter die
     Auswahl mit dem Zahnrad daneben.

     Ueber die Reihenfolge statt ueber die Markup-Position: im Quelltext
     steht die Auswahl vor dem Logo, weil sie am Schreibtisch oben sitzt. */
  .seitenleiste { flex-wrap: wrap; }
  .leiste-logo { order: 1; }
  .leiste-mobilfuss { order: 2; }
  /* Hinweise, die nur am Rechner gelten - Mausrad, Umschalttaste. */
  .nur-am-rechner { display: none; }

  .leiste-marke {
    order: 3; flex: 1 0 100%;
    padding: 0; gap: 8px;
  }
  .leiste-marke select { max-width: none; font-size: .82rem; }
  .marke-einstellungen { width: 38px; height: 38px; }
  /* Umschalter und Abmelden nebeneinander in der Kopfzeile. */
  .leiste-mobilfuss { display: flex; align-items: center; gap: 8px; }
  .knopf-abmelden-mobil {
    font: inherit; cursor: pointer; padding: .4rem .7rem; border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--marke-text) 28%, transparent);
    background: color-mix(in srgb, var(--marke-text) 12%, transparent);
    color: var(--marke-text); font-weight: 700; font-size: .78rem;
  }
}
@media (min-width: 900px) { .knopf-abmelden-mobil { display: none; } }

/* ==================================================================
   Administration - eigenes Gewand
   ==================================================================
   Ohne Kundenfarben: hier wird die Plattform verwaltet, nicht ein Dashboard
   angesehen. Die Farben sind die der Anmeldeseite - Hausfarbe, nicht Kunde. */

.admin-body {
  --marke: #10213A;
  --marke-text: #ffffff;
  --akzent: #0f6fbf;
}

.admin-marke {
  display: grid; gap: 2px;
  padding: 24px 22px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.admin-marke-titel { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.admin-marke-name { font-size: .78rem; opacity: .7; }

.admin-body .leiste-nav a { background: rgba(255, 255, 255, .10); }
.admin-body .leiste-nav a:hover { background: rgba(255, 255, 255, .18); }
.admin-body .leiste-nav a[aria-current="page"] {
  background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .3);
}
.admin-body .leiste-trenner { background: rgba(255, 255, 255, .16); }
.admin-body .knopf-abmelden,
.admin-body .leiste-admin-knopf { background: rgba(255, 255, 255, .10); }
.admin-body .knopf-abmelden:hover,
.admin-body .leiste-admin-knopf:hover { background: rgba(255, 255, 255, .2); }
.admin-body .sprachwahl { background: rgba(255, 255, 255, .10); }
.admin-body .sprach-knopf:hover { background: rgba(255, 255, 255, .18); }
.admin-body .sprach-knopf.aktiv {
  background: rgba(255, 255, 255, .24); box-shadow: none;
}

@media (max-width: 899px) {
  /* In der Administration bleibt der Text stehen: vier kurze Woerter
     passen nebeneinander, und Zahnrad, Wuerfel, Liste und Pfeil sagen
     weniger als Dashboard-, Listen- und Globussymbol beim Kunden. */
  .admin-body .leiste-nav a {
    gap: 3px; font-size: .62rem; text-align: center;
  }
  .admin-body .leiste-nav a span {
    position: static; width: auto; height: auto;
    overflow: visible; clip-path: none;
  }
  .admin-body .leiste-nav svg { width: 20px; height: 20px; }

  .admin-body .admin-marke {
    padding: 0; border-bottom: none;
    grid-auto-flow: column; align-items: center; gap: 10px;
  }
  .admin-body .admin-marke-name { display: none; }
}

/* ==================================================================
   Seitenkopf
   ================================================================== */

.seitenkopf { margin-bottom: 26px; }
.seitenkopf h1 {
  font-size: clamp(1.7rem, 3vw, 2.7rem);
  font-weight: 800; letter-spacing: -.025em; margin: 0 0 12px;
}
.akzentlinie { width: 108px; height: 4px; border-radius: 2px; background: var(--akzent); }
.seitenkopf p { margin: 14px 0 0; color: var(--text-leise); font-size: .88rem; font-weight: 600; }

/* Welcher Datenstand gerade zu sehen ist - unter der Ueberschrift jeder
   Auswertungsseite. Jede Zahl darauf haengt an diesen Angaben: eine
   Reichweite ueber sieben Monate ist etwas anderes als eine ueber zwoelf.
   Deshalb hier oben und nicht in der Fusszeile.

   Die Teile stehen als Zeilen-Flex mit Trennpunkten dazwischen. Am Telefon
   bricht die Zeile um, und der Trennpunkt faellt am Zeilenanfang weg -
   sonst begaenne eine Zeile mit einem einsamen Punkt. */
.seitenkopf .datenstand-zeile {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin: 12px 0 0;
  font-size: .8rem; font-weight: 600; color: var(--text-leise);
}
.datenstand-teil::before {
  content: "·"; margin-right: 10px; color: var(--text-still); font-weight: 400;
}
.datenstand-leise { color: var(--text-still); font-weight: 500; }

/* Die Auswahl des Datenstandes - sie steht anstelle der Beschriftung, also
   soll sie auch so aussehen: kein Kasten, der die Zeile sprengt. */
.standwahl { display: inline-flex; align-items: center; gap: 6px; }
.standwahl select {
  font: inherit; font-size: .92rem; font-weight: 700;
  padding: .35rem 1.7rem .35rem .6rem; border-radius: 8px;
  border: 1px solid var(--rand); background: var(--flaeche); color: var(--text);
  cursor: pointer;
}
.standwahl select:hover { border-color: var(--akzent); }
.standwahl select:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 1px;
}

/* --------------------------------------------------------------------
   Vergleich: zwei Stände und das Wörtchen dazwischen

   „und" stellt zwei einzelne Monate nebeneinander, „bis" summiert alles
   dazwischen. Das ist der ganze Unterschied, deshalb steht der Umschalter
   zwischen den beiden Auswahlfeldern und nicht darüber - man liest ihn
   dort, wo man ihn ohnehin erwartet.

   Am Handy bricht die Zeile um; der Umschalter bleibt dabei zwischen den
   Feldern, weil er sonst seinen Sinn verliert.
   -------------------------------------------------------------------- */
/* Derselbe Abstand wie bei den Absaetzen im Seitenkopf - die Auswahl haengt
   sonst am Balken unter der Ueberschrift. */
.vergleichswahl { flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.modus-wahl {
  display: inline-flex; border: 1px solid var(--rand); border-radius: 8px;
  overflow: hidden; background: var(--flaeche);
}
/* Die Schalter selbst liegen unter ihren Beschriftungen - sichtbar bleiben
   sie fuer Vorlesewerkzeuge und fuer die Tastatur. */
.modus-wahl input { position: absolute; opacity: 0; pointer-events: none; }
.modus-wahl label {
  padding: .38rem .85rem; font-size: .92rem; font-weight: 800; cursor: pointer;
  color: var(--text-leise); user-select: none;
}
.modus-wahl label + input + label { border-left: 1px solid var(--rand); }
/* Weiss ist hier sicher: --akzent wird aus der Sekundaerfarbe berechnet und
   dabei abgedunkelt, wenn sie zu hell waere - wie beim Tabellenkopf auch. */
.modus-wahl input:checked + label { background: var(--akzent); color: #fff; }
.modus-wahl input:focus-visible + label { outline: 2px solid var(--akzent); outline-offset: -2px; }

.vergleich-erklaerung {
  margin: 10px 0 0; font-size: .84rem; font-weight: 600; color: var(--text-leise);
}

/* Sortierung als Links, damit sie in der Adresse steht und ohne
   JavaScript funktioniert. */
/* Knoepfe, aber aus Links gebaut: so steht die Sortierung in der Adresse,
   laesst sich weiterschicken und funktioniert ohne JavaScript. */
.sortierwahl {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0 0 14px;
}
.sortierwahl-titel {
  margin-right: 4px; font-size: .8rem; font-weight: 600; color: var(--text-leise);
}
.sortierwahl a {
  padding: .3rem .8rem; border: 1px solid var(--rand); border-radius: 8px;
  background: var(--flaeche); color: var(--text-leise);
  font-size: .84rem; font-weight: 800; text-decoration: none;
}
.sortierwahl a:hover { border-color: var(--akzent); color: var(--akzent); }
.sortierwahl a[aria-current] {
  background: var(--akzent); border-color: var(--akzent); color: #fff;
}
.sortierwahl a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
/* Der Export gehoert nicht zur Sortierung - er rueckt deshalb ans
   andere Ende der Zeile und behaelt sein eigenes Gewand. */
.sortierwahl-export { margin-left: auto; }
.sortierwahl a.sortierwahl-export[aria-current] { background: none; }
@media (max-width: 559px) {
  /* Am Handy bricht die Zeile ohnehin um - dann steht der Knopf
     darunter statt am rechten Rand zu kleben. */
  .sortierwahl-export { margin-left: 0; }
}

/* Filter über einer langen Liste, mit der Anzahl daneben. */
.listenfilter { margin: 0 0 14px; flex-wrap: wrap; }
.listenfilter label { font-size: .8rem; font-weight: 700; color: var(--text-leise); }
.listenfilter-zahl { font-size: .8rem; font-weight: 600; color: var(--text-leise); }

/* Wer zurueckgeblaettert hat, sieht aeltere Zahlen. Die Seite sieht sonst
   genauso aus wie mit den aktuellen - das muss auffallen. */
.datenstand-hinweis {
  color: var(--warnung); font-weight: 800;
}

@media (max-width: 559px) {
  .datenstand-zeile { gap: 2px 10px; }
  .datenstand-zeile > :first-child::before { content: none; margin: 0; }
}

.kopf-zeile {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.kopf-zeile h1 { margin: 0; }

/* Schalter und Speichern stehen zusammen rechts neben der Überschrift.
   Der Schalter bekommt eine feste Spalte, damit er mittig darin sitzt und
   nicht am Knopf klebt. */
.kopf-werkzeuge {
  display: flex; align-items: center; gap: 16px;
  margin-left: auto;
}
.kopf-werkzeuge .schalter-form {
  display: grid; place-items: center; min-width: 56px;
}

.kopf-schalter { display: flex; align-items: center; gap: 8px; }
.schalter-text { font-size: .82rem; font-weight: 700; color: var(--text-leise); }

/* Schaltflächen am Fuß einer Kachel - abgesetzt vom Inhalt darüber. */
.karten-fuss-knoepfe {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-top: 22px;
}

/* Ein/Aus-Schalter. Ein Knopf statt eines Kaestchens: er wirkt sofort und
   sieht in Liste und Kopfzeile gleich aus. */
.schalter-form { display: inline; margin: 0; }
.schalter,
.umschalter-bahn {
  position: relative; cursor: pointer; display: inline-block; flex: none;
  width: 42px; height: 24px; padding: 0; border-radius: 999px;
  border: 1px solid var(--rand); background: #cfd4db;
  transition: background .15s ease, border-color .15s ease;
}
.schalter-knauf {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(16, 33, 58, .3);
  transition: transform .15s ease;
}
/* Ein Kaestchen im Formular, das wie ein Schalter aussieht. Das echte
   <input> liegt unsichtbar ueber der Bahn - Tastatur, Vorlesewerkzeuge und
   das Absenden kommen so vom Browser, ohne eine Zeile JavaScript. */
.umschalter { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.umschalter input {
  position: absolute; opacity: 0; margin: 0;
  width: 42px; height: 24px; cursor: pointer;
}
.umschalter-text { font-size: .88rem; font-weight: 600; }
.umschalter input:checked + .umschalter-bahn {
  background: var(--gut); border-color: var(--gut);
}
.umschalter input:checked + .umschalter-bahn .schalter-knauf {
  transform: translateX(18px);
}
.umschalter input:focus-visible + .umschalter-bahn {
  outline: 2px solid var(--akzent); outline-offset: 2px;
}

.schalter-an { background: var(--gut); border-color: var(--gut); }
.schalter-an .schalter-knauf { transform: translateX(18px); }
.schalter:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .schalter, .umschalter-bahn, .schalter-knauf { transition: none; }
}

/* ==================================================================
   Karten
   ================================================================== */

.karte {
  background: var(--flaeche);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  /* Die Kante links ist das Wiedererkennungsmerkmal des bisherigen Stands -
     sie traegt die Sekundaerfarbe der Organisation. */
  border-left: 5px solid var(--akzent);
  padding: 22px 24px;
  margin-bottom: var(--abstand);
}
.karte h2 { font-size: 1.15rem; font-weight: 800; margin: 0 0 16px; }
.karten-untertitel {
  margin: 0 0 14px; font-size: .82rem; font-weight: 600; color: var(--text-leise);
}

.karten-paar {
  display: grid; gap: var(--abstand); grid-template-columns: 1fr;
  /* Eigener Abstand nach unten: die Karten darin haben ihren verloren, sonst
     klebt der naechste Block direkt an ihnen. */
  margin-bottom: var(--abstand);
}
@media (min-width: 1180px) {
  .karten-paar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .karten-paar > .karte { margin-bottom: 0; }
}

.hinweis {
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: var(--abstand);
  background: var(--flaeche); box-shadow: var(--schatten);
  border-left: 5px solid var(--warnung);
}
.hinweis p { margin: .3rem 0 0; color: var(--text-leise); font-size: .88rem; }

/* Ein Hinweis innerhalb einer Karte - ohne eigenen Schatten, sonst schwebte
   eine Karte in der Karte. */
.hinweis-knapp {
  margin: 14px 0 0; padding: 12px 14px; box-shadow: none;
  border: 1px solid var(--rand); border-left: 5px solid var(--warnung);
  background: var(--linie);
}
.hinweis-knapp strong { font-size: .86rem; }
.hinweis-knapp p { font-size: .82rem; }

/* ==================================================================
   Kennzahlen
   ================================================================== */

.kpi-gitter {
  display: grid; gap: var(--abstand); grid-template-columns: 1fr;
  margin-bottom: var(--abstand);
}
@media (min-width: 620px) { .kpi-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .kpi-gitter { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kpi-gitter-eins { grid-template-columns: 1fr; max-width: 560px; }

.kpi {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start;
  background: var(--flaeche); border-radius: var(--radius);
  box-shadow: var(--schatten); border-left: 5px solid var(--akzent);
  padding: 22px 24px;
}
.kpi-symbol {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: var(--radius-klein);
  background: var(--linie); color: var(--text-leise);
}
.kpi-symbol svg { width: 24px; height: 24px; }

.kpi-titel { margin: 2px 0 4px; font-size: .88rem; font-weight: 700; color: var(--text-leise); }
.kpi-wert {
  margin: 0; font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 800; letter-spacing: -.03em;
  /* Tabellenziffern sind hier Pflicht: beim Hochzaehlen wechseln die Stellen
     im Sekundentakt, und mit proportionalen Ziffern zappelte die Zahl. */
  font-variant-numeric: tabular-nums; color: var(--akzent);
}
.kpi-delta {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 8px; font-size: .82rem; font-weight: 700;
}
.delta-auf { color: var(--gut); }
.delta-ab { color: var(--alarm); }
.delta-neutral { color: var(--text-leise); }

/* ==================================================================
   Ranglisten als Balken
   ================================================================== */

.balken-liste {
  display: grid; gap: 9px;
  /* Feste Breite der Wertspalte. Mit 'auto' richtet sich die Spalte nach dem
     laengsten Betrag, und dann beginnen und enden die Balken je nach Zahl an
     anderer Stelle - die Laengen waeren nicht mehr vergleichbar. */
  --wertspalte: 148px;
}
.balken-liste-schmal { --wertspalte: 88px; }

.balken-zeile { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; }

@media (min-width: 720px) {
  /* Beschriftung rechtsbuendig links vom Balken - wie im bisherigen Stand. */
  .balken-zeile {
    grid-template-columns: minmax(110px, 26%) minmax(0, 1fr) var(--wertspalte);
    align-items: center; gap: 0 14px;
  }
  .balken-name { text-align: right; }
  .balken-wert { text-align: right; }
}

.balken-name {
  font-size: .8rem; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.balken-schiene { display: block; height: 26px; border-radius: 5px; background: var(--linie); }
/* Die Balken wachsen beim Erscheinen nach rechts.
 *
 * Ueber transform statt ueber width: die Zielbreite steht als Prozentwert im
 * Markup, und eine Keyframe-Bewegung koennte sie nicht auslesen. scaleX von 0
 * auf 1 mit Ursprung links ergibt dieselbe Wirkung, laeuft auf der
 * Grafikkarte und macht nebenbei keine Layoutneuberechnung je Bild.
 *
 * Die Verzoegerung staffelt die Zeilen: --nr kommt aus der Schleife im
 * Template. Bei fuenfzehn Zeilen laeuft die letzte rund 0,6 Sekunden nach der
 * ersten los - lang genug fuer den Welleneffekt, kurz genug, dass niemand
 * darauf wartet. */
.balken-fuellung {
  display: block; height: 100%; min-width: 2px; border-radius: 5px;
  background: var(--akzent); opacity: .42;
  transform-origin: left center;
  animation: balken-wachsen .6s cubic-bezier(.22, .8, .3, 1) both;
  animation-delay: calc(var(--nr, 0) * 45ms);
}

@keyframes balken-wachsen {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
/* Die Spitzenreiter kraeftig, der Rest gedaempft: so ist die Rangfolge auf
   einen Blick erkennbar, ohne dass fuenfzehn Balken um Aufmerksamkeit ringen. */
.balken-fuellung.spitze { opacity: 1; }
.balken-fuellung.alarm { background: #f08080; opacity: 1; }

/* Betrag und Anteil in eigenen Spalten. Stuenden beide im selben Feld,
   verschoebe sich der graue Anteil je nach Laenge des Betrags davor. */
.balken-wert {
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
  font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap; text-align: right;
}
.balken-liste-schmal .balken-wert { grid-template-columns: 1fr; }
.balken-anteil {
  color: var(--text-still); font-weight: 500;
  min-width: 52px; text-align: right;
}

@media (prefers-reduced-motion: reduce) {
  .balken-fuellung { animation: none; }
}

/* ==================================================================
   Analysekarten
   ================================================================== */

.analyse-gitter { display: grid; gap: var(--abstand); grid-template-columns: 1fr; }
@media (min-width: 760px) { .analyse-gitter { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.analyse {
  display: block; text-decoration: none; color: inherit;
  background: var(--flaeche); border-radius: var(--radius);
  box-shadow: var(--schatten); padding: 22px 24px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.analyse:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(16, 33, 58, .05), 0 12px 28px rgba(16, 33, 58, .10);
}
.analyse-symbol {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: var(--radius-klein); margin-bottom: 14px;
}
.analyse-symbol svg { width: 22px; height: 22px; }
.analyse-symbol.warn { background: #fdeadb; color: #d98324; }
.analyse-symbol.slow { background: #efe6fb; color: #7b52c9; }
.analyse-symbol.welt { background: #e3ecfb; color: var(--akzent); }

.analyse h3 { font-size: 1rem; font-weight: 800; margin: 0 0 6px; }
.analyse p { margin: 0 0 12px; font-size: .84rem; color: var(--text-leise); font-weight: 600; }
.analyse-mehr { font-size: .84rem; font-weight: 800; color: var(--akzent); }

/* ==================================================================
   Tabellen
   ================================================================== */

.tabellen-rahmen { overflow: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; }
@media (min-width: 900px) { .tabellen-rahmen { max-height: 68vh; } }

table.daten { width: 100%; border-collapse: collapse; font-size: .84rem; min-width: 680px; }
table.daten th, table.daten td { padding: 11px 14px; text-align: left; white-space: nowrap; }
table.daten th.zahl, table.daten td.zahl { text-align: right; font-variant-numeric: tabular-nums; }
table.daten td.text { white-space: normal; min-width: 220px; }

table.daten thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--linie); color: var(--text-leise);
  font-size: .78rem; font-weight: 600;
  border-bottom: 1px solid var(--rand);
}
table.daten tbody tr { border-bottom: 1px solid var(--linie); }
table.daten tbody tr:hover { background: #fbfcfd; }
table.daten tbody tr.hervorgehoben { background: #eaf0fb; }

/* --- am Telefon wird aus jeder Zeile eine Karte ---
 *
 * Eine zehnspaltige Tabelle laesst sich auf einem Telefon nicht sinnvoll
 * seitwaerts schieben: man verliert beim Scrollen die Kopfzeile und weiss
 * nicht mehr, welche Zahl man gerade liest. Deshalb steht hier jede Zeile
 * als eigener Block, mit der Beschriftung direkt neben dem Wert.
 *
 * Die Beschriftungen kommen aus data-label an den Zellen - kein zweites
 * Markup, keine doppelte Pflege.
 */
@media (max-width: 720px) {
  .tabellen-rahmen { overflow: visible; max-height: none; }

  table.daten { display: block; min-width: 0; font-size: .86rem; }
  table.daten thead { display: none; }
  table.daten tbody { display: grid; gap: 12px; }

  table.daten tbody tr {
    display: block; border: 1px solid var(--rand); border-radius: 12px;
    padding: 12px 14px; background: var(--flaeche);
  }
  table.daten tbody tr:hover { background: var(--flaeche); }

  table.daten td {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px; align-items: baseline;
    padding: 5px 0; white-space: normal; text-align: right;
    border-right: none;
  }
  table.daten td::before {
    content: attr(data-label);
    text-align: left; color: var(--text-leise);
    font-size: .78rem; font-weight: 600;
  }

  /* Kopfbereich der Karte: Artikelnummer klein darueber, Bezeichnung fett. */
  table.daten td.zell-schluessel, table.daten td.zell-artnr {
    display: block; text-align: left; padding: 0;
    font-size: .76rem; color: var(--text-still); font-weight: 600;
  }
  table.daten td.zell-schluessel { color: var(--akzent); }
  table.daten td.zell-schluessel::before, table.daten td.zell-artnr::before { display: none; }

  table.daten td.text {
    display: block; text-align: left; padding: 0 0 8px;
    font-size: .95rem; font-weight: 700; min-width: 0;
    border-bottom: 1px solid var(--linie); margin-bottom: 6px;
  }
  table.daten td.text::before { display: none; }

  /* Status als durchgehendes Band am Fuss der Karte. */
  table.daten td.status-zelle {
    display: block; text-align: center;
    margin-top: 10px; padding: 7px; border-radius: 8px;
    font-size: .8rem; font-weight: 700;
  }
  table.daten td.status-zelle::before { display: none; }

  /* Leerzeile ("keine Treffer") darf nicht als Karte erscheinen. */
  table.daten tbody tr td[colspan] { display: block; text-align: center; }
  table.daten tbody tr td[colspan]::before { display: none; }
}

/* Variante mit dunklem Kopf - im bisherigen Stand bei Slow Mover und Laendern. */
table.daten.dunkler-kopf thead th {
  background: var(--akzent); color: #fff; font-weight: 700; border-bottom: none;
}
table.daten.dunkler-kopf tbody td { border-right: 1px solid var(--linie); }
table.daten.dunkler-kopf tbody td:last-child { border-right: none; }

.zell-schluessel { color: var(--akzent); font-weight: 700; }

/* Zweite Zeile in einer Tabellenzelle: der Zeitraum unter der Beschriftung
   des Datenstandes. Leiser gesetzt, damit die Zeile weiter vom Namen
   gefuehrt wird und der Zeitraum nur bestaetigt. */
.zell-nebentext {
  display: block; margin-top: 2px;
  font-size: .78rem; font-weight: 600; color: var(--text-leise);
}

/* Statuszelle: ganzflaechig eingefaerbt, wie im bisherigen Stand. */
td.status-zelle { font-weight: 600; color: #23303f; }
td.status-ausverkauft  { background: #f8a3a3; }
td.status-dringend     { background: #f8b89a; }
td.status-pruefen      { background: #fbcf72; }
td.status-optimal      { background: #7bd7a8; }
td.status-ueberbestand { background: #fbcf72; }
td.status-ohne         { background: #c9ced6; }

.marke {
  display: inline-block; padding: .18rem .55rem; border-radius: 6px;
  font-size: .76rem; font-weight: 700; white-space: nowrap; color: #23303f;
}
.marke-ausverkauft  { background: #f8a3a3; }
.marke-dringend     { background: #f8b89a; }
.marke-pruefen      { background: #fbcf72; }
.marke-optimal      { background: #7bd7a8; }
.marke-ueberbestand { background: #fbcf72; }
.marke-ohne         { background: #c9ced6; }

.pille {
  display: inline-flex; align-items: center; gap: 4px;
  padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
}
.pille.delta-auf { background: #e2f5ea; }
.pille.delta-ab { background: #fbe6e6; }
.pille.delta-neutral { background: var(--linie); }

/* ==================================================================
   Filter und Schaltflaechen
   ================================================================== */

/* Dieselbe farbige Kante wie die Karten - der Filter ist ein Block auf der
   Seite wie jeder andere, und ohne Kante fiel er als einziger heraus. */
.filter-block {
  background: var(--flaeche); border-radius: 10px; box-shadow: var(--schatten);
  border-left: 5px solid var(--akzent); margin-bottom: 16px;
}
.filter-block > summary {
  list-style: none; cursor: pointer; padding: 13px 18px;
  font-size: .88rem; font-weight: 700; display: flex; align-items: center; gap: 10px;
}
.filter-block > summary::-webkit-details-marker { display: none; }
.filter-block > summary::before { content: "›"; font-size: 1.1rem; color: var(--text-leise); }
.filter-block[open] > summary::before { content: "⌄"; }

.filter { display: grid; gap: 14px; padding: 0 18px 18px; }
/* Steht kein aufklappbarer Kopf darueber - wie in der Lagerliste -, klebten
   die Feldbeschriftungen an der Oberkante des Blocks. Dann dieselbe
   Polsterung wie an den Seiten. */
.filter-block > .filter:first-child { padding-top: 18px; }
@media (min-width: 760px) { .filter { grid-template-columns: 2fr 1fr auto; align-items: end; } }
/* Vier Spalten fuer den Protokollfilter. Der Knopf steht in einer eigenen
   Spalte - lag er im letzten Feld, machte er dessen Spalte hoeher und die
   Beschriftung darueber sass nicht mehr auf einer Linie mit den anderen. */
@media (min-width: 760px) { .filter-vier { grid-template-columns: 2fr 1fr 1fr auto; } }

.feld label { display: block; font-size: .8rem; color: var(--text-leise); margin-bottom: 5px; font-weight: 600; }
.feld-schalter { display: flex; align-items: center; gap: .45rem; font-size: .88rem; font-weight: 600; }

.zeilenzahl { font-weight: 700; margin: 0 0 14px; }

.feld-knoepfe { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }

/* Gleiche Hoehe und Polsterung wie der Filterknopf, damit beide auf einer
   Linie sitzen. */
.knopf-zuruecksetzen,
.knopf-sekundaer {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; cursor: pointer; text-decoration: none;
  padding: .65rem 1.3rem; border-radius: 9px;
  border: 1px solid var(--rand); background: var(--flaeche);
  color: var(--text-leise); font-weight: 700; font-size: .88rem;
}
.knopf-zuruecksetzen:hover,
.knopf-sekundaer:hover { border-color: var(--akzent); color: var(--akzent); }
.knopf-zuruecksetzen svg,
.knopf-sekundaer svg { width: 16px; height: 16px; flex: none; }

.knopf {
  display: inline-block; font: inherit; cursor: pointer;
  padding: .65rem 1.3rem; border: none; border-radius: 9px;
  background: var(--akzent); color: #fff; font-weight: 700; font-size: .88rem;
  text-decoration: none;
}
.knopf:hover { filter: brightness(1.08); }

/* ==================================================================
   Formulare der Verwaltung
   ================================================================== */

.formular { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .formular { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 720px) { .formular-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Alle Eingabefelder gleich - ausgenommen die, die eigene Regeln brauchen
   (Farbwaehler und Kaestchen). Vorher waren nur text/number/file erfasst,
   dadurch sahen E-Mail- und Passwortfelder anders aus als die daneben.

   Und vorher hing die Regel an .formular. Ein Feld ausserhalb davon - die
   Zeile fuer die Testmail, das Passwortfeld im Fenster - blieb ungestaltet
   und sah aus wie ein Fremdkoerper. Jetzt zaehlt .feld allein.
   Die Anmeldeseite hat weiter unten eine eigene Regel und bleibt davon
   unberuehrt; Kaestchen sind ausgenommen, weil der Schalter sein <input>
   unsichtbar ueber die Bahn legt. */
.feld input:not([type="color"]):not([type="checkbox"]):not([type="radio"]),
.feld select,
.feld textarea {
  font: inherit; width: 100%; padding: .55rem .7rem;
  border: 1px solid var(--rand); border-radius: 10px;
  background: var(--flaeche); color: var(--text);
}
.formular .feld textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.feld input:focus-visible,
.feld select:focus-visible,
.feld textarea:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 1px; border-color: transparent;
}
.formular .feld input[type="file"] { padding: .45rem .6rem; }
.formular .feld input[type="color"] {
  width: 100%; height: 44px; padding: 4px;
  border: 1px solid var(--rand); border-radius: 10px; background: var(--flaeche);
}
.formular .feld input[type="checkbox"] { width: 20px; height: 20px; }

.feld-hinweis { margin: 5px 0 0; font-size: .76rem; color: var(--text-still); }

/* Eigener Auswahlknopf statt des Feldes vom Browser.
   Grund: "Durchsuchen..." und "Keine Datei ausgewaehlt" zeichnet der Browser
   in seiner eigenen Sprache - auf einer englischen Oberflaeche stand dort
   weiter Deutsch, und daran kommt eine Seite nicht heran.

   Das echte Feld bleibt im Markup und bleibt anspringbar, es ist nur
   unsichtbar. display:none waere falsch: dann kaeme man mit der Tabulatortaste
   nicht mehr hin. Den Fokusring uebernimmt der Knopf ueber :focus-within. */
.dateiwahl { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dateiwahl input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.dateiwahl-knopf { flex: none; cursor: pointer; }
.dateiwahl:focus-within .dateiwahl-knopf {
  outline: 2px solid var(--akzent); outline-offset: 1px;
}
.dateiwahl-name {
  min-width: 0; font-size: .8rem; color: var(--text-still);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dateiwahl-name.gewaehlt { color: var(--text); font-weight: 600; }

/* Vorhandene Datei mit Papierkorb. Hochladen ueberschreibt - der Knopf ist
   nur fuer "ganz weg". */
.datei-vorhanden {
  display: flex; align-items: center; gap: 10px;
  /* Gedeckelt: darin stehen ein Dateiname und ein Papierkorb, mehr nicht.
     Ueber die ganze Spalte gezogen sah die Zeile aus wie ein Eingabefeld
     und stand unpassend breit neben dem kleinen Auswahlknopf. Lange Namen
     kuerzt .datei-name ohnehin mit Auslassungspunkten. */
  max-width: 340px;
  margin-bottom: 8px; padding: 8px 10px;
  border: 1px solid var(--rand); border-radius: 10px; background: var(--linie);
}
.datei-name {
  flex: 1; min-width: 0; font-size: .8rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.knopf-papierkorb {
  flex: none; display: grid; place-items: center; cursor: pointer;
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--rand); background: var(--flaeche); color: var(--text-leise);
}
.knopf-papierkorb:hover {
  color: var(--alarm); border-color: var(--alarm); background: rgba(217, 74, 74, .06);
}
.knopf-papierkorb svg { width: 16px; height: 16px; }

/* Freigeben und Zuruecknehmen als Symbol - in der Standliste stehen bis zu
   vier Handlungen nebeneinander, und vier Woerter sprengen jede Zeile.
   Farbe traegt die Bedeutung: gruen gibt frei, gedeckt nimmt zurueck. */
.knopf-freigeben:hover {
  color: var(--gut); border-color: var(--gut); background: rgba(31, 157, 85, .08);
}
.knopf-zurueckziehen:hover {
  color: var(--warnung); border-color: var(--warnung);
  background: rgba(217, 131, 36, .08);
}

.versteckte-formulare { display: none; }

.protokoll { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.protokoll li {
  display: flex; gap: 10px; align-items: baseline;
  font-size: .84rem; padding-bottom: 8px; border-bottom: 1px solid var(--linie);
}
.protokoll li:last-child { border-bottom: none; padding-bottom: 0; }
.protokoll-art {
  flex: none; font-size: .72rem; font-weight: 700; color: var(--text-still);
  background: var(--linie); border-radius: 5px; padding: .1rem .45rem;
}
.protokoll-zahl { font-size: .74rem; color: var(--text-still); margin-left: 6px; }

/* Wird als <button> und als <a> verwendet - deshalb display und
   text-decoration ausdruecklich: sonst traegt der Link eine Unterstreichung
   und sitzt eine Spur anders als der Knopf daneben. */
.knopf-klein {
  display: inline-block; text-decoration: none; line-height: 1.35;
  font: inherit; cursor: pointer; padding: .35rem .8rem;
  border: 1px solid var(--rand); border-radius: 8px;
  background: var(--flaeche); color: var(--akzent); font-weight: 700; font-size: .78rem;
}
.knopf-klein:hover { border-color: var(--akzent); background: var(--linie); }

.karte-gefahr { border-left-color: var(--alarm); }
.blaetterung {
  display: flex; align-items: center; gap: 14px; justify-content: center;
  margin-top: 16px; font-size: .84rem; color: var(--text-leise);
}

.feld-fehler { margin: 5px 0 0; font-size: .78rem; color: var(--alarm); font-weight: 700; }
.feld-fehlerhaft input, .feld-fehlerhaft select { border-color: var(--alarm); }

.formular-fuss {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-bottom: var(--abstand);
}
.knopf-zurueck {
  display: inline-block; padding: .65rem 1.3rem; border-radius: 9px;
  border: 1px solid var(--rand); background: var(--flaeche);
  color: var(--text); font-weight: 700; font-size: .88rem; text-decoration: none;
}
.knopf-zurueck:hover { border-color: var(--akzent); color: var(--akzent); }

.knopf-gefahr {
  display: inline-block; padding: .65rem 1.3rem; border-radius: 9px;
  border: 1px solid rgba(217, 74, 74, .4); background: transparent;
  color: var(--alarm); font-weight: 700; font-size: .88rem; text-decoration: none;
  margin-left: auto;
}
.knopf-gefahr:hover { background: rgba(217, 74, 74, .08); border-color: var(--alarm); }

.knopf-gefahr-voll {
  font: inherit; cursor: pointer; padding: .65rem 1.3rem;
  border: none; border-radius: 9px;
  background: var(--alarm); color: #fff; font-weight: 700; font-size: .88rem;
}

.meldung {
  border-radius: 10px; padding: 12px 16px; margin-bottom: var(--abstand);
  font-weight: 700; font-size: .88rem;
}
.meldung-erfolg { background: #e2f5ea; color: #17663c; }
.meldung-fehler { background: #fbe6e6; color: #9c2a2a; }

.logo-vorschau {
  display: inline-grid; place-items: center;
  padding: 12px 16px; border-radius: var(--radius-klein);
  background: var(--marke);
}
.logo-vorschau img { max-height: 64px; max-width: 180px; }

/* Feld und Vorschau nebeneinander in einer Zelle des zweispaltigen
   Formulars. Ohne diese Klammer rutschten die Vorschauen unter das
   Formular in die linke Spalte, und man musste raten, welche zu welchem
   Feld gehoert.

   Mittig ausgerichtet und das Feld gedeckelt: sonst klebte die Vorschau
   am rechten Rand der Zelle, weit weg von dem, worauf sie sich bezieht. */
.feld-mit-vorschau {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.feld-mit-vorschau > .feld {
  flex: 1 1 260px; max-width: 340px; min-width: 0; margin-bottom: 0;
}
.feld-mit-vorschau .vorschau { flex: none; margin: 0; }
.feld-mit-vorschau .logo-vorschau { flex: none; }

/* Beide Bilder der Anmeldeseite gleich hoch - nebeneinander sollen sie
   wie ein Paar aussehen, nicht wie zwei zufaellige Ausschnitte. */
.feld-mit-vorschau .logo-vorschau img { max-height: 68px; max-width: 190px; }
.feld-mit-vorschau .hintergrund-vorschau { max-height: 92px; }

/* Ein Portrait ist quadratisch, kein Logo auf farbigem Grund.

   Die Auswahl ist absichtlich so lang: die Regel fuer die Bilder der
   Anmeldeseite steht eine Zeile hoeher und deckelt die Hoehe auf 68px.
   Sie ist spezifischer als eine kurze Portrait-Regel und schnitt das
   quadratische Bild oben und unten ab. */
.vorschau-portrait {
  padding: 0; overflow: hidden; border-radius: 50%;
  background: var(--linie); border: 1px solid var(--rand);
}
.feld-mit-vorschau .logo-vorschau.vorschau-portrait img,
.vorschau-portrait img {
  width: 108px; height: 108px; max-height: none; max-width: none;
  object-fit: cover; display: block;
}

.schrift-probe { margin: 10px 0 0; font-size: 1.3rem; }

.farbtupfer {
  display: inline-block; width: 18px; height: 18px; border-radius: 5px;
  border: 1px solid var(--rand); vertical-align: middle; margin-right: 4px;
}

/* ==================================================================
   Weltkarte
   ================================================================== */

.karten-flaeche { position: relative; }
#karte { width: 100%; height: 62vh; min-height: 340px; }

.karten-zoom {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: grid; gap: 6px;
}
.karten-zoom button {
  font: inherit; cursor: pointer;
  width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid var(--rand); background: rgba(255, 255, 255, .94);
  color: var(--akzent); font-weight: 800; font-size: 1rem; line-height: 1;
  box-shadow: 0 2px 8px rgba(16, 33, 58, .10);
}
.karten-zoom button:hover { background: #fff; border-color: var(--akzent); }
.karten-zoom button:disabled { opacity: .4; cursor: default; }
.karten-zoom .zuruecksetzen { display: grid; place-items: center; }
.karten-zoom .zuruecksetzen svg { width: 17px; height: 17px; }
.karten-fuss { margin: .6rem 0 0; color: var(--text-still); font-size: .8rem; text-align: center; }
.karten-fuss kbd {
  font: inherit; font-weight: 700;
  border: 1px solid var(--rand); border-radius: 5px; padding: 0 .3rem;
  background: var(--flaeche);
}

/* Am Telefon ausgeblendet - dort wird die zugehoerige Bibliothek auch nicht
   geladen, siehe das Skript auf der Laenderseite. */
/* Am Telefon nimmt die Karte die volle Breite - der Seitenrand kostet dort
   Platz, den die Karte dringender braucht als die Kachel. */
@media (max-width: 719px) {
  /* Am Telefon zieht sich die Weltkarte ueber die Seitenraender hinaus.
     Die farbige Kante entfaellt dabei: sie saesse am aeussersten
     Bildschirmrand und laese sich als Strich, nicht als Kante einer
     Karte - Raender hat die Kachel dort ja keine mehr. */
  .karte-randlos {
    margin-left: calc(var(--abstand) * -1);
    margin-right: calc(var(--abstand) * -1);
    border-radius: 0;
    border-left: none;
    padding-left: 0; padding-right: 0;
  }
  .karte-randlos .karten-fuss { padding: 0 var(--abstand); }
  /* Die Kachel bekommt die Form, die der gezeichnete Ausschnitt hat.

     Vorher stand hier eine feste Hoehe in Bildschirmanteilen. Am Telefon
     ergab das ein hochkantiges Feld, waehrend Europa breiter als hoch
     gezeichnet wird - Plotly zentriert die Karte darin, und oben wie unten
     blieb ein Streifen Weiss stehen. Ueber das Seitenverhaeltnis passt sich
     die Kachel dem Inhalt an statt umgekehrt. */
  #karte { height: auto; min-height: 0; aspect-ratio: 8 / 5; }
}

/* Laenderflaggen.
 *
 * Ein Flaggen-Emoji ist kein eigenes Zeichen, sondern ein Paar Regional
 * Indicator Symbols - zusammengezogen wird es von der Schriftart. Windows'
 * "Segoe UI Emoji" enthaelt keine Laenderflaggen, deshalb blieb die Spalte in
 * Brave, Vivaldi, Chrome und Edge leer, waehrend Firefox sie zeigte: der
 * bringt eine eigene Emoji-Schrift mit.
 *
 * Die "unicode-range" ist der Kern: die Schrift greift nur fuer genau diesen
 * Bereich. Ueberall sonst zeichnet weiter die Schrift des Kunden - und die
 * 78 kB werden nur geladen, wo wirklich eine Flagge steht.
 *
 * Herkunft und Lizenz: static/schriften/HERKUNFT.md
 */
@font-face {
  font-family: "Laenderflaggen";
  src: url("../schriften/TwemojiCountryFlags.woff2") format("woff2");
  unicode-range: U+1F1E6-1F1FF;
  font-display: swap;
}
.flagge {
  font-family: "Laenderflaggen", "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
  font-size: 1.05em; line-height: 1; margin-right: .45rem;
}

/* ==================================================================
   Anmeldung
   ==================================================================
   Nachempfunden dem bisherigen Login: Hintergrundfoto, darueber ein grosses
   Glaspaneel, links die Marke, rechts die Anmeldekarte.

   Die Seite bleibt bewusst hell - sie lebt vom Foto, ein dunkles Glaspaneel
   darauf ergaebe keinen Sinn. */

.anmelde-body {
  --navy: #10213A;
  --blau: #139BE8;
  --blau-tief: #0576D8;
  --grau-text: #4D607A;
  --grau-leise: #6B7C94;
  --grau-linie: rgba(16, 33, 58, .12);
}

.anmelde-seite {
  min-height: 100dvh; display: grid; place-items: center;
  padding: clamp(16px, 4vw, 48px); position: relative; isolation: isolate;
}
.anmelde-seite::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(90deg, rgba(245, 250, 255, .30), rgba(245, 250, 255, .18)),
    var(--anmelde-bild);
  background-size: cover; background-position: center;
}

.anmelde-tafel {
  width: 100%; max-width: 1300px;
  display: grid; grid-template-columns: 1.35fr 0.65fr;
  align-items: center; gap: clamp(24px, 4vw, 42px);
  padding: clamp(22px, 3.4vw, 46px);
  border-radius: clamp(20px, 3vw, 42px);
  background: rgba(255, 255, 255, .58);
  border: 1px solid rgba(255, 255, 255, .72);
  box-shadow: 0 38px 110px rgba(16, 33, 58, .18), inset 0 1px 0 rgba(255, 255, 255, .85);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  animation: anmelde-auf .85s ease-out both;
}

.anmelde-marke { animation: anmelde-links .85s ease-out both; }
.anmelde-logo {
  width: 190px; height: auto; display: block;
  margin-bottom: clamp(20px, 3vw, 44px);
  filter: drop-shadow(0 18px 34px rgba(19, 155, 232, .18));
}
.anmelde-titel {
  font-size: clamp(30px, 5vw, 72px); line-height: .98;
  letter-spacing: -.035em; color: var(--navy); font-weight: 900;
  margin: 0 0 clamp(14px, 2vw, 26px);
}
.anmelde-titel span { color: var(--blau); }
.anmelde-unterzeile {
  max-width: 660px; font-size: clamp(15px, 1.4vw, 20px); line-height: 1.55;
  color: var(--grau-text); font-weight: 600; margin: 0;
}

.anmelde-karte {
  justify-self: end; width: 100%; max-width: 380px;
  padding: clamp(24px, 2.6vw, 40px) clamp(22px, 2.4vw, 36px) clamp(22px, 2.2vw, 32px);
  border-radius: clamp(18px, 2.2vw, 32px);
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(255, 255, 255, .96);
  box-shadow: 0 28px 80px rgba(16, 33, 58, .18), inset 0 1px 0 rgba(255, 255, 255, .95);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  animation: anmelde-auf .85s ease-out both; animation-delay: .14s;
}
.anmelde-karte-titel {
  font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; letter-spacing: -.03em;
  color: var(--navy); font-weight: 900; margin: 0 0 6px;
}
.anmelde-karte-unterzeile { font-size: 14px; color: var(--grau-leise); font-weight: 600; margin: 0 0 26px; }
.anmelde-karte .feld { margin-bottom: 14px; }
.anmelde-karte label {
  display: block; margin-bottom: 6px; font-size: 13px; font-weight: 800; color: var(--navy);
}
.anmelde-karte input {
  font: inherit; width: 100%; min-height: 52px; padding: .7rem .9rem;
  border-radius: 15px; border: 1px solid var(--grau-linie);
  background: rgba(255, 255, 255, .86); color: var(--navy); font-weight: 600;
}
.anmelde-karte input:focus-visible {
  outline: 2px solid var(--blau); outline-offset: 1px; border-color: transparent;
}

/* Wird als <button> und als <a> verwendet - beim Anmelden ist es ein Knopf,
   auf den Seiten danach ein Link zur Anmeldung. Ohne display und
   text-decoration bliebe der Link ein Inline-Element: Breite und Hoehe
   griffen nicht, die Beschriftung stuende links und unterstrichen. */
.anmelde-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; text-align: center;
  font: inherit; cursor: pointer; width: 100%; min-height: 46px; margin-top: 12px;
  border: 0; border-radius: 12px;
  background: linear-gradient(135deg, var(--blau) 0%, var(--blau-tief) 100%);
  color: #fff; font-size: 15px; font-weight: 800;
  box-shadow: 0 18px 36px rgba(19, 155, 232, .30);
  transition: transform .15s ease, box-shadow .15s ease;
}
.anmelde-knopf:hover { transform: translateY(-1px); box-shadow: 0 22px 42px rgba(19, 155, 232, .38); }

.anmelde-fehler {
  margin: 0 0 16px; padding: .7rem .9rem; border-radius: 12px;
  background: rgba(207, 58, 58, .10); border: 1px solid rgba(207, 58, 58, .28);
  color: #a12727; font-size: .88rem; font-weight: 700;
}

.anmelde-support summary { list-style: none; cursor: pointer; }
.anmelde-support summary::-webkit-details-marker { display: none; }
.anmelde-trenner {
  display: flex; align-items: center; gap: 14px;
  color: #8A98AA; font-size: 13px; font-weight: 700; margin: 26px 0 16px;
}
.anmelde-trenner::before, .anmelde-trenner::after {
  content: ""; height: 1px; flex: 1; background: var(--grau-linie);
}
.anmelde-support-knopf {
  display: grid; place-items: center; min-height: 46px; border-radius: 12px;
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(19, 155, 232, .38);
  color: var(--blau); font-size: 15px; font-weight: 800;
}
.anmelde-support-knopf:hover { background: rgba(19, 155, 232, .08); border-color: rgba(19, 155, 232, .58); }
.anmelde-support[open] .anmelde-support-knopf { background: rgba(19, 155, 232, .08); }

.support-karte {
  display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: center;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--grau-linie);
}
.support-foto { width: 84px; height: 84px; object-fit: contain; }
.support-name { margin: 0; font-weight: 800; color: var(--navy); font-size: .95rem; }
.support-abteilung { margin: 0 0 .4rem; color: var(--grau-leise); font-size: .82rem; }
.support-zeile { margin: 0; font-size: .85rem; }
.support-zeile a { color: var(--blau); font-weight: 700; text-decoration: none; }
.support-zeile a:hover { text-decoration: underline; }

@media (max-width: 980px) {
  .anmelde-tafel { grid-template-columns: 1fr; }
  .anmelde-karte { justify-self: stretch; max-width: none; }
  .anmelde-logo { width: 150px; }
}
@media (max-width: 560px) {
  .anmelde-seite { padding: 0; place-items: stretch; }
  .anmelde-tafel {
    border-radius: 0; border: 0; min-height: 100dvh;
    align-content: center; background: rgba(255, 255, 255, .74);
  }
  .anmelde-unterzeile { display: none; }
}

@keyframes anmelde-links {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes anmelde-auf {
  from { opacity: 0; transform: translateY(28px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .anmelde-tafel, .anmelde-marke, .anmelde-karte { animation: none; }
  .anmelde-knopf { transition: none; }
}

/* ==================================================================
   Mailversand, Aufbewahrungsfrist und das Passwort-Fenster
   ================================================================== */

.zustandszeile {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 18px; font-size: .86rem; color: var(--text-leise);
}

/* Testmail und Aufbewahrung: mobil untereinander, ab 640px in einer Zeile.
   Beide enden mit einem Knopf, der auf der Grundlinie des Feldes sitzt. */
.probe-zeile, .frist-zeile, .frist-form {
  display: flex; flex-direction: column; gap: 12px; align-items: stretch;
}
.frist-zeile { gap: 10px; }
@media (min-width: 640px) {
  .probe-zeile, .frist-zeile, .frist-form { flex-direction: row; align-items: flex-end; gap: 12px; }
  .probe-zeile .feld { flex: 1 1 280px; }
  .frist-form .feld { min-width: 220px; }
}
.frist-stand { margin-top: 14px; }
.frist-stand strong { color: var(--text); }

.feld-mit-knopf { display: flex; gap: 8px; align-items: stretch; }
.feld-mit-knopf input { flex: 1 1 auto; min-width: 0; }

/* Ein Symbolknopf ohne Rahmen - fuer die Schluesselspalte in der Zugangsliste. */
.knopf-symbol {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--rand); border-radius: 9px;
  background: var(--flaeche); color: var(--text-leise);
  font: inherit; cursor: pointer;
}
.knopf-symbol:hover { border-color: var(--akzent); color: var(--akzent); }
.knopf-symbol svg { width: 17px; height: 17px; }
.zell-knopf { white-space: nowrap; }
.zeilen-knoepfe { display: flex; align-items: center; gap: 8px; }

/* Das Fenster. Der Browser bringt Fokusfang und Escape mit, hier steht nur
   das Aussehen. ::backdrop dunkelt die Seite dahinter ab. */
.fenster {
  /* Das Fenster steht im Markup in einer Tabellenzelle, und die haelt ihre
     Knoepfe mit nowrap zusammen. Ohne diese Zeile erbt der Text im Fenster
     das und laeuft ueber den Rand hinaus, statt umzubrechen. */
  white-space: normal;
  width: min(460px, calc(100vw - 32px));
  border: 0; border-radius: 14px; padding: 22px;
  background: var(--flaeche); color: var(--text);
  box-shadow: 0 30px 80px rgba(16, 33, 58, .28);
}
.fenster::backdrop { background: rgba(16, 33, 58, .45); }
.fenster-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.fenster-kopf h3 { margin: 0; font-size: 1rem; }
.fenster-text { margin: 0 0 14px; font-size: .86rem; color: var(--text-leise); }
.fenster-text strong { color: var(--text); }
.fenster-grund {
  background: var(--linie); border-radius: 9px; padding: 10px 12px;
}
.fenster-alternative { margin-top: 16px; border-top: 1px solid var(--rand); padding-top: 12px; }
.fenster-alternative > summary {
  cursor: pointer; font-size: .82rem; font-weight: 700; color: var(--text-leise);
}
.fenster-alternative > summary:hover { color: var(--akzent); }
.passwort-direkt { margin-top: 12px; }
.passwort-direkt .knopf { margin-top: 12px; }

/* Hinweiszeile auf den Seiten vor der Anmeldung. */
.anmelde-hinweis { margin: 0 0 18px; font-size: .86rem; color: var(--text-leise); }

/* ==================================================================
   Kopfzeile der Datenvorschau
   ================================================================== */

/* Die Seitenleiste bleibt, wie sie ist - der Kunde soll ja genau das
   sehen. Nur oben in der Hauptanzeige steht, dass hier ein Stand liegt,
   den es fuer ihn noch nicht gibt. */
.vorschau-band {
  background: #fff6e0; border: 1px solid #e8c98a;
  border-left: 5px solid #d99b1c;
  border-radius: var(--radius); padding: 14px 18px;
  margin-bottom: var(--abstand);
}
.vorschau-kopf { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 760px) {
  .vorschau-kopf { flex-direction: row; align-items: center; justify-content: space-between; }
}
.vorschau-titel {
  display: block; font-size: 1rem; font-weight: 800; color: #7a5405;
}
.vorschau-text p { margin: 3px 0 0; font-size: .82rem; color: #7a5405; }
.vorschau-kopf > .knopf { flex: none; align-self: flex-start; }

/* Die Seiten der Vorschau. Am Telefon rutschen sie seitlich weg, statt
   den Kopf auf vier Zeilen anwachsen zu lassen. */
.vorschau-seiten {
  display: flex; gap: 8px; flex-wrap: nowrap;
  overflow-x: auto; padding-top: 12px; margin-top: 12px;
  border-top: 1px solid #e8c98a;
}
.vorschau-seiten a {
  flex: none; text-decoration: none; white-space: nowrap;
  padding: .35rem .8rem; border-radius: 8px;
  border: 1px solid #e8c98a; background: rgba(255, 255, 255, .55);
  color: #7a5405; font-weight: 700; font-size: .78rem;
}
.vorschau-seiten a:hover { background: #fff; }
.vorschau-seiten a[aria-current="page"] {
  background: #d99b1c; border-color: #d99b1c; color: #fff;
}

/* ==================================================================
   Rechtliches
   ==================================================================
   Eine Seite ohne Seitenleiste und ohne Kundenfarben: sie gehoert keinem
   Kunden, sie gehoert der Anwendung. Wer sie aus einem Dashboard heraus
   oeffnet, soll sehen, dass er die Marke verlassen hat. */

/* Das schlichte Geruest: nur fuer Besucher ohne Anmeldung. Wer angemeldet
   ist, bekommt dieselbe Seite in seinem gewohnten Geruest, im Inhaltsbereich
   neben der Leiste - dort gilt ohnehin die Breite von .inhalt. */
.schlicht-body { background: var(--grund); }

.schlicht {
  max-width: 1180px; margin: 0 auto;
  padding: clamp(24px, 4vw, 48px) var(--abstand);
  padding-bottom: calc(48px + env(safe-area-inset-bottom));
}

.schlicht-fuss {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 14px; margin-top: var(--abstand);
}

/* Zwischenueberschriften auf der Rechtsseite - eine Karte traegt dort
   mehrere Themen, und ohne Absetzung laufen sie ineinander. */
.karte h3 {
  margin: 26px 0 10px; font-size: 1rem; font-weight: 800; color: var(--text);
}
.karte h3:first-of-type { margin-top: 20px; }

/* Freitext aus den Einstellungen - Zeilenumbrueche bleiben, wie sie
   eingetippt wurden. */
.rechtliches-freitext {
  margin: 0 0 6px; color: var(--text); font-size: .92rem; line-height: 1.6;
}