/* ==========================================================================
   SEA-Verwaltung: Blatt
   ==========================================================================
   Kein Rahmenwerk, kein CDN, keine Bauschritte. Flask haengt am Praefix
   aus app.py (Konstante PFAD, /apex); Caddy leitet nur diesen Pfad an den
   Wirt, Flasks Vorgabe /static/sea.css kaeme nie an.

   REIHENFOLGE DER FARBEN: hell auf blankem :root, dunkel zweimal: ueber
   prefers-color-scheme (mit Ausschluss [data-thema="hell"]) und ueber
   [data-thema="dunkel"]. Eine Farbe, die es nur im Media-Block gibt, fehlt
   dem Umschalter.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Farben
   -------------------------------------------------------------------------- */
:root {
  /* color-scheme sagt dem Browser, in welcher Fassung ER zeichnet:
     Rollbalken, Auswahllisten, Datumsfelder. Steht in allen drei Farbsaetzen. */
  color-scheme: light;
  --navy: #112349;
  --tuerkis: #22a094;

  --grund: #eef3fa;          /* Seitenhintergrund unter dem Nordlicht */
  --flaeche: #ffffff;        /* Karten, Tabellen */
  --flaeche-2: #f4f8fd;      /* Tabellenkopf, ruhige Knoepfe */
  --schrift: #16202f;

  /* Verweise: ohne eigene Regel stuende 'a' im Browserblau #0000EE, auf
     dunklem Grund 2,07:1. Der Ton ist der Markenton, nur hell genug. */
  --link: #0f6f64;
  --schrift-leise: #5d6a7d;
  --linie: #dbe5f2;
  --akzent: var(--tuerkis);

  /* Der gewaehlte Wahlchip: nicht --tuerkis selbst (weisse Schrift auf
     #22a094 sind 2,8:1, gefordert 4,5:1); #0f6f64 traegt Weiss mit 5,2:1.
     Im Dunkeln dreht sich das Paar um (Flaeche hell, Schrift dunkel),
     deshalb zwei Variablen. */
  --chip-an: #0f6f64;
  --chip-an-schrift: #ffffff;
  --warn: #c0392b;
  --gut: #1e8e5a;

  /* Die drei Schleier des Hintergrunds. */
  --schleier-1: rgba(34, 160, 148, .28);
  --schleier-2: rgba(17, 35, 73, .22);
  --schleier-3: rgba(94, 140, 214, .20);
  --korn: .035;

  /* Gestapelter Schatten: Haarlinie, weite Umgebung, enger Kontakt. Der
     Haarlinien-Ring ersetzt einen border und springt dadurch nicht im
     Layout, wenn eine Karte ihn im Fehlerfall faerbt. */
  --schatten:
    0 0 0 1px rgba(17, 35, 73, .07),
    0 18px 40px -18px rgba(17, 35, 73, .28),
    0 2px 5px -2px rgba(17, 35, 73, .12);

  --rund: 14px;
  --beam-1: var(--tuerkis);
  --beam-2: #7fb2ff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    color-scheme: dark;
    --grund: #080d17;
    --flaeche: #101827;
    --flaeche-2: #16203247;
    --schrift: #e6edf7;
    --link: #6fdccb;
    --schrift-leise: #93a2b8;
    --linie: #24314699;
    --warn: #ff7a6b;
    --gut: #4ade9a;
    --schleier-1: rgba(34, 160, 148, .34);
    --schleier-2: rgba(46, 86, 168, .30);
    --schleier-3: rgba(126, 78, 190, .22);
    --korn: .05;
    /* Umgedreht: helle Flaeche, dunkle Schrift. 7,1:1. */
    --chip-an: #2bb3a5;
    --chip-an-schrift: #06120f;
    --schatten:
      0 0 0 1px rgba(255, 255, 255, .06),
      0 22px 50px -20px rgba(0, 0, 0, .75),
      0 2px 6px -2px rgba(0, 0, 0, .5);
  }
}

/* Derselbe Satz noch einmal fuer den Umschalter, sonst kaeme man aus dem
   hellen Systemmodus nie ins Dunkle. */
:root[data-thema="dunkel"] {
  color-scheme: dark;
  --grund: #080d17;
  --flaeche: #101827;
  --flaeche-2: #16203247;
  --schrift: #e6edf7;
  --link: #6fdccb;
  --schrift-leise: #93a2b8;
  --linie: #24314699;
  --warn: #ff7a6b;
  --gut: #4ade9a;
  --schleier-1: rgba(34, 160, 148, .34);
  --schleier-2: rgba(46, 86, 168, .30);
  --schleier-3: rgba(126, 78, 190, .22);
  --korn: .05;
  --chip-an: #2bb3a5;
  --chip-an-schrift: #06120f;
  --schatten:
    0 0 0 1px rgba(255, 255, 255, .06),
    0 22px 50px -20px rgba(0, 0, 0, .75),
    0 2px 6px -2px rgba(0, 0, 0, .5);
}

/* --------------------------------------------------------------------------
   Die Anmeldeseite ist IMMER dunkel: dritter Farbsatz an body.mystisch
   statt :root, darum schlaegt er Systemthema und data-thema. Die Tuer soll
   nach nichts aussehen; die Verwaltung dahinter behaelt hell und dunkel.
   -------------------------------------------------------------------------- */
/* Hellere Nebenschrift auf den oeffentlichen Dunkelseiten: body.mystisch
   setzt --schrift-leise auf #4a5769, auf #0a1018 rund 2,2:1. Auf der Tuer
   Absicht, auf /guide und /mobile_guide ein Fehler, dort steht der halbe
   Text in .leise. Eine zweite Klasse statt einer geaenderten Farbe. */
body.mystisch.hell-leise {
  --schrift-leise: #e2e9f4;
}

body.mystisch {
  color-scheme: dark;
  --grund: #04070d;
  --flaeche: #0a1018;
  --flaeche-2: #0d141e;
  --schrift: #e8eef8;
  --link: #6fdccb;
  --schrift-leise: #4a5769;
  --linie: #1a2433;
  --warn: #ff6b5c;
  --schleier-1: rgba(34, 160, 148, .22);
  --schleier-2: rgba(38, 70, 140, .20);
  --schleier-3: rgba(96, 60, 150, .16);
  --korn: .06;
  --beam-1: rgba(34, 160, 148, .55);
  --beam-2: rgba(127, 178, 255, .35);
  --schatten:
    0 0 0 1px rgba(255, 255, 255, .04),
    0 30px 80px -30px rgba(0, 0, 0, .9);
}

/* Langsamer als in der Verwaltung: es soll atmen, nicht wandern. */
body.mystisch::before { animation-duration: 90s; }

/* Korn UND Vignette in einer Ebene. Die Vignette zieht die Raender zu und
   laesst nur die Mitte uebrig: ohne sie schwimmt die Karte im Nichts. */
body.mystisch::after {
  opacity: 1;
  background-image:
    radial-gradient(120% 95% at 50% 45%, transparent 25%, #04070d 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23k)' opacity='.06'/></svg>");
}

/* --------------------------------------------------------------------------
   Grundgeruest
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html, body { height: 100%; }
/* Die Scrollleiste bekommt ihren Platz immer: erscheint sie erst beim Laden
   der Tabelle, wird die Seite schmaler und die knappste Zeile bricht um. */
html { scrollbar-gutter: stable; }

/* JEDER VERWEIS, ausser er sieht aus wie ein Knopf. ':visited' steht dabei:
   der Browser faerbt besuchte Verweise violett, auf schwarzem Grund noch
   schlechter als sein Blau. a.knopf, a.knopf.leise, header a, .laden a und
   .hilfe-schweber a sind spezifischer und bleiben. */
a, a:visited { color: var(--link); }
a:hover, a:focus-visible { filter: brightness(1.15); }

/* Die Hausschrift: eine variable Datei fuer alle Staerken, 60 KB, aus
   lab/brand/schrift, Lizenz OFL.txt daneben. Selbst gehostet, kein Dritter.
   Pfad relativ zu dieser Datei (/apex/static/schrift/). font-display: swap. */
@font-face {
  font-family: "Plus Jakarta Sans";
  /* ?v=1 ist kein Versehen: erst mit Buster gibt die Verwaltung die
     Jahresfrist mit. Aendert sich die Datei je, kommt hier eine 2 hin. */
  src: url("schrift/PlusJakartaSans.woff2?v=1") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  line-height: 1.55;
  font-family: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  /* Der Hintergrund haengt an body::before/::after mit position:fixed:
     ohne diesen Kontext wuerden sie beim Rollen mitwandern. */
  position: relative;
  min-height: 100%;
}

/* --------------------------------------------------------------------------
   Nordlicht: drei radiale Verlaeufe in EINER Ebene, je mit eigener
   Bewegung ueber 40-70 s; nur transform wird bewegt. Kein Canvas, kein JS.
   Aus der Vorlage MengTo/kage ist nichts uebernommen (keine Lizenz).
   -------------------------------------------------------------------------- */
body::before {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(38% 42% at 22% 28%, var(--schleier-1) 0%, transparent 70%),
    radial-gradient(45% 38% at 78% 22%, var(--schleier-3) 0%, transparent 72%),
    radial-gradient(50% 45% at 55% 88%, var(--schleier-2) 0%, transparent 70%);
  filter: blur(28px);
  animation: schweben 58s ease-in-out infinite alternate;
}

@keyframes schweben {
  from { transform: translate3d(-3%, -2%, 0) scale(1.05) rotate(-2deg); }
  to   { transform: translate3d( 3%,  2%, 0) scale(1.14) rotate(2deg); }
}

/* Filmkorn. Die Textur ist eine Inline-SVG (feTurbulence): kein Bild, das
   geladen werden muesste, und nichts, was eine CSP stoeren koennte. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--korn);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23k)'/></svg>");
}

/* --------------------------------------------------------------------------
   Border Beam: ein conic-gradient, auf einen 1,5 px Ring beschnitten
   (padding-box aus border-box). @property, weil sich ein Winkel im
   Gradienten sonst nicht animieren laesst; Firefox erst ab 128, deshalb
   der Rueckfall darunter.
   -------------------------------------------------------------------------- */
@property --winkel {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.karte {
  position: relative;
  background: var(--flaeche);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
  padding: 22px;
}

/* Karten kleben nicht aneinander: zwei Karten hintereinander bekommen Luft. */
.karte + .karte { margin-top: 18px; }

.karte.leuchtet::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;               /* = Dicke des Rings */
  background: conic-gradient(from var(--winkel),
              transparent 0deg 300deg,
              var(--beam-2) 330deg,
              var(--beam-1) 350deg,
              transparent 360deg);
  /* Der eigentliche Kniff: Inhalt ausstanzen, Rand behalten. */
  -webkit-mask: linear-gradient(#000 0 0) content-box,
                linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: beam 5s linear infinite;
  pointer-events: none;
}

@keyframes beam {
  to { --winkel: 360deg; }
}

/* Ohne @property dreht sich nichts, dann waere der Ring zu 300/360 der Zeit
   unsichtbar und die Karte saehe kaputt aus. Also ein ruhender Verlauf. */
@supports not (background: conic-gradient(from var(--winkel), red, blue)) {
  .karte.leuchtet::before {
    background: linear-gradient(135deg, var(--beam-1), var(--beam-2));
    opacity: .5;
    animation: none;
  }
}

/* Fehlschlag der Anmeldung: derselbe Ring in Rot, dazu ein einmaliges
   Zucken. Traegt die GANZE Botschaft: Text gibt es auf der Anmeldeseite
   bewusst nicht. */
.karte.fehl::before {
  --beam-1: var(--warn);
  --beam-2: var(--warn);
  background: conic-gradient(from var(--winkel),
              transparent 0deg 260deg,
              var(--warn) 300deg 360deg);
  opacity: 1;
}
.karte.fehl { animation: zucken .4s ease-in-out 1; }

@keyframes zucken {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-7px); }
  45%      { transform: translateX(6px); }
  70%      { transform: translateX(-3px); }
}

/* --------------------------------------------------------------------------
   Anmeldung: zwei Felder, sonst nichts
   -------------------------------------------------------------------------- */
.tor {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.tor .karte {
  width: min(340px, 100%);
  padding: 34px 28px 30px;
  background: color-mix(in srgb, var(--flaeche) 70%, transparent);
  backdrop-filter: blur(3px);
}

.tor form { display: grid; gap: 20px; }

/* Kein Kasten, nur eine Grundlinie: die Felder sollen kaum da sein.
   Der GETIPPTE Text bleibt trotzdem hell und gut lesbar; gedimmt wird das
   Beiwerk, nicht die Eingabe. Wer sein Passwort nicht mehr lesen kann,
   vertippt sich, und das ist keine Mystik, sondern ein Mangel. */
.tor input {
  width: 100%;
  padding: 9px 2px;
  font-size: 15px;
  letter-spacing: .04em;
  font-family: inherit;
  color: var(--schrift);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--linie);
  border-radius: 0;
  outline: none;
  transition: border-color .35s, box-shadow .35s;
}

.tor input:focus {
  border-bottom-color: var(--tuerkis);
  box-shadow: 0 1px 12px -4px var(--tuerkis);
}

/* Die eine Zeile ueber den Feldern: --schrift-leise auf --grund ergibt rund
   6:1. Gesperrt und in Grossbuchstaben, weil zwei Worte ohne Bezugsrahmen
   sonst wie ein Platzhalter wirken. */
.tor-titel {
  margin: 0 0 22px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--schrift-leise);
}

/* --------------------------------------------------------------------------
   Der Knopf: 42 Pixel (WCAG 2.5.8 verlangt 24x24). Die Eingabetaste loest
   weiterhin aus, er ist der einzige Absendeknopf; per Tabulator erreichbar,
   mit Ring bei Tastaturfokus. Die Schatten sind fuer 42 px gerechnet.
   -------------------------------------------------------------------------- */
.tor button {
  justify-self: center;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: var(--tuerkis);
  color: var(--grund);
  box-shadow: 0 0 18px 3px color-mix(in srgb, var(--tuerkis) 40%, transparent);
  animation: glimmen 4.5s ease-in-out infinite;
  transition: transform .18s, filter .18s;
}
.tor button svg { width: 20px; height: 20px; }
.tor button:hover { filter: brightness(1.1); }
.tor button:active { transform: scale(.94); }
.tor button:focus-visible {
  outline: 1px solid var(--tuerkis);
  outline-offset: 7px;
}

@keyframes glimmen {
  0%, 100% { box-shadow: 0 0 14px 2px color-mix(in srgb, var(--tuerkis) 30%, transparent); }
  50%      { box-shadow: 0 0 26px 6px color-mix(in srgb, var(--tuerkis) 55%, transparent); }
}

/* Nur fuer Screenreader: auf der Anmeldeseite traegt das die Meldung, die
   sehende Nutzer als roten Ring bekommen. */
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Kopfzeile und Seitenaufbau (nach der Anmeldung)
   -------------------------------------------------------------------------- */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 13px 20px;
  background: color-mix(in srgb, var(--flaeche) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}
header .marke { font-weight: 650; letter-spacing: .2px; }
/* Der Kopf: links die Marke, in der Mitte die Kennung, rechts Thema und
   Burger. Das nav ist das Feld, das der Burger aufklappt (unten);
   margin-left: auto an der Kennung schiebt alles rechts davon an den Rand. */
/* z-index am Kopf, auch am Schreibtisch: backdrop-filter macht ihn zum
   Stapelkontext, und ohne eigene Stufe laege das Menuefeld (im Kopf, 55)
   unter jeder Karte, die im Rumpf danach kommt. Am Telefon stand die 50
   schon (klebender Kopf). */
header { position: relative; z-index: 50; }
header .kennung {
  margin-left: auto;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 44vw;
}
header .werkzeuge { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
header a { color: var(--schrift-leise); }
/* Der Burger: fett, mit Wort, im Markenton umrandet. Er ist der einzige
   Weg zu den Bereichen, also darf ihn niemand uebersehen. */
.burger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 14px 6px 10px;
  border: 2px solid var(--tuerkis);
  border-radius: 12px;
  background: color-mix(in srgb, var(--tuerkis) 12%, transparent);
  color: var(--schrift);
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  letter-spacing: .01em;
  cursor: pointer;
}
.burger:hover { background: color-mix(in srgb, var(--tuerkis) 22%, transparent); }
.burger[aria-expanded="true"] { background: var(--tuerkis); color: #fff; }
.burger:active, .thema:active { filter: brightness(.94); }

/* DAS FELD. position: absolute unter dem Kopf: es faehrt mit ihm, braucht
   kein fixed und damit keinen Bezugsblock, an dem es sich stossen koennte
   (header hat backdrop-filter). Zu ist es unsichtbar UND aus dem Fokusweg
   (visibility), nicht nur durchsichtig. Die Verzoegerung an visibility
   laesst es beim Schliessen erst ausblenden und dann verschwinden; beim
   Oeffnen gilt sie nicht. Am Schreibtisch haengt es rechts unter dem
   Burger, am Telefon ueber die ganze Breite (760er-Block). */
header nav {
  position: absolute;
  top: calc(100% + 6px);
  right: 12px;
  width: min(320px, calc(100vw - 24px));
  z-index: 55;
  display: grid;
  gap: 2px;
  padding: 8px 10px 10px;
  font-size: 15px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 14px;
  box-shadow: var(--schatten);
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility 0s .18s;
}
.menue-offen header nav {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}
/* Ein Punkt ist eine Zeile von 44 Pixeln: ein Finger trifft das, ohne zu
   zielen. Der aktuelle bekommt eine Flaeche im Markenton. */
header nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  color: var(--schrift);
  text-decoration: none;
}
header nav a:hover { background: var(--flaeche-2); }
header nav a[aria-current="page"] {
  background: color-mix(in srgb, var(--tuerkis) 14%, transparent);
  font-weight: 650;
}
header nav .abmelden {
  margin-top: 6px;
  border-top: 1px solid var(--linie);
  border-radius: 0 0 10px 10px;
  color: var(--schrift-leise);
}
/* Drei Gruppen im Feld, seit 0810a in dieser Reihenfolge: Arbeit (.warm,
   Onboarding und Events) ZUERST, dann neutral (Apex bis FAQ), dann
   Technik (.gefahr, Calls bis Remi). Jede Gruppe traegt den Strich ueber
   sich, die erste im Feld nicht: eine L3 ohne Haken sieht nur
   Onboarding und Events. Die Farbe sitzt im Wort. Bernstein ueber
   color-mix mit --schrift: im Hellen dunkler (#875e24, 5,7:1 auf Weiss), im
   Dunkeln heller (#c59c60, 7:1); #b7791f allein traegt auf Weiss nur
   3,5:1. --warn wechselt von selbst mit dem Thema. */
header nav .menue-gruppe {
  display: grid;
  gap: 2px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--linie);
}
header nav .menue-gruppe:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
header nav .menue-gruppe.warm a   { color: color-mix(in srgb, #b7791f 70%, var(--schrift)); }
header nav .menue-gruppe.gefahr a { color: var(--warn); }
/* OHNE SKRIPT ist das Feld eine Reihe im Kopf: der Burger kann dann
   nichts aufklappen, und ein Menue, das niemand oeffnen kann, ist keines.
   Das Skript in rahmen.html setzt html.js. */
html:not(.js) header nav {
  position: static;
  width: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: none;
  opacity: 1;
  transform: none;
  visibility: visible;
}
html:not(.js) header nav a { min-height: 32px; padding: 0 8px; }
/* Die Gruppen loesen sich in der Reihe auf: display: contents nimmt den
   Wrapper aus dem Fluss, die Farbe im Wort bleibt. */
html:not(.js) header nav .menue-gruppe { display: contents; }
html:not(.js) .burger { display: none; }
/* Der Vorhang liegt unter dem Kopf (50) und ueber allem anderen, auch
   ueber der Hilfe (40) und dem Massenband (5). Solange er steht, rollt
   die Seite nicht: ein Menue, hinter dem der Inhalt weiterlaeuft, ist am
   Finger eine Falle. Am Schreibtisch ist er fast durchsichtig: er faengt
   den Klick daneben, mehr nicht. */
.menue-vorhang {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(8, 13, 23, .18);
}
.menue-vorhang[hidden] { display: none; }
.menue-offen, .menue-offen body { overflow: hidden; }
/* Sichtbarer Fokusring fuer Tastatur und Schaltersteuerung, im Markenton und
   mit Abstand, damit er nicht im Strich des aktiven Punkts untergeht. */
.burger:focus-visible, .thema:focus-visible, header nav a:focus-visible {
  outline: 2px solid var(--tuerkis);
  outline-offset: 3px;
}

/* 1560 statt 1180: die Personenliste soll links und rechts Platz haben. Die
   oeffentlichen Seiten deckeln sich selbst (main style="max-width"). Polster
   28 zusammen mit scrollbar-gutter gegen den Umbruch. */
main { max-width: 1560px; margin: 0 auto; padding: 22px 28px 64px; }

h2 {
  font-size: 16px;
  margin: 28px 0 10px;
  letter-spacing: .2px;
}
h2:first-child { margin-top: 4px; }

/* --------------------------------------------------------------------------
   Bedienelemente
   -------------------------------------------------------------------------- */
input, select, button { font-family: inherit; font-size: 14px; }

input[type="text"], input[type="email"], input[type="password"], select {
  padding: 7px 10px;
  color: var(--schrift);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 7px;
}
input:focus, select:focus {
  outline: 2px solid color-mix(in srgb, var(--akzent) 55%, transparent);
  outline-offset: 1px;
}

/* Kaestchen und Radios in der Hausfarbe: sonst zeichnete der Browser sein
   Systemblau. Eine Zeile, alle Seiten. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--akzent); }

button {
  background: var(--navy);
  color: #fff;
  border: 0;
  border-radius: 7px;
  padding: 8px 15px;
  font-weight: 600;
  cursor: pointer;
}
button.leise {
  background: var(--flaeche-2);
  color: var(--schrift);
  box-shadow: inset 0 0 0 1px var(--linie);
}
button:disabled { opacity: .45; cursor: not-allowed; }

/* Loeschen: der eine Knopf, der endgueltig ist, traegt die Warnfarbe; die
   Karte dazu die Kante als stillere Form desselben Signals. */
button.gefahr { background: var(--warn); color: #fff; }
.karte.gefahr { box-shadow: inset 3px 0 0 var(--warn), var(--schatten); }

/* Die zweite Erinnerung: Bernstein, nicht die Warnfarbe, ein Nachdruck,
   keine Gefahr. Liste "Contacted" unter /onboarding ab Tag 14. */
button.warm { background: #b7791f; color: #fff; }

/* Ein Link, der wie ein Knopf aussieht. Gebraucht auf /willkommen: der Rueckweg
   in den Chat ist kein Formular, sondern ein Ziel: ein <button> dafuer waere
   gelogen und ohne Formular auch nicht bedienbar per Tastatur-Enter. */
a.knopf {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  border-radius: 7px;
  padding: 8px 15px;
  font-weight: 600;
  text-decoration: none;
}
a.knopf:hover { filter: brightness(1.12); }

/* Der stillere Zwilling, wie button.leise. Die Regel MUSS beide Klassen
   nennen: '.leise' setzt weiter unten eine graue Schrift und 13px, und auf
   navyfarbenem Grund waere das eine graue Schrift auf Blau. Zwei Klassen
   wiegen schwerer als eine, die Reihenfolge im Blatt spielt also keine
   Rolle. */
a.knopf.leise {
  background: var(--flaeche-2);
  color: var(--schrift);
  font-size: inherit;
  box-shadow: inset 0 0 0 1px var(--linie);
}

/* Die Knopfzeile zur Hilfe (/registration und /guide, Changes ID 75).
   Umbruch statt Rollbalken: auf einem schmalen Telefon stehen die drei
   Knoepfe untereinander, und das ist richtig so. Das Zeichen im Knopf ist
   quadratisch und klein: es soll den Dienst kenntlich machen, nicht die
   Zeile beherrschen. */
.hilfe-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 16px 0 0;
}
.hilfe-knoepfe a.knopf { display: inline-flex; align-items: center; gap: 7px; }
.hilfe-knoepfe img { width: 18px; height: 18px; object-fit: contain; }

/* Dieselbe Hilfe als grosse Karte am Fuss von /guide. Die Knoepfe tragen
   nicht .leise; am Telefon steht jeder auf eigener Zeile ueber die volle
   Breite. */
/* Mittig: die Marke ist inline-flex, text-align stellt sie mit; nur die
   Knopfzeile braucht ihr justify-content. */
.support-karte { margin-top: 26px; text-align: center; }
.support-karte .guide-marke { margin: 0 0 14px; }
.support-knoepfe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
}
.support-knoepfe a.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1 1 190px;
  min-height: 52px;
  font-size: 16px;
}
.support-knoepfe img { width: 24px; height: 24px; object-fit: contain; }
@media (max-width: 460px) {
  .support-knoepfe a.knopf { flex-basis: 100%; }
}

.thema {
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: var(--schrift-leise);
  line-height: 0;
}
.thema svg { width: 17px; height: 17px; }

/* --------------------------------------------------------------------------
   Tabellen
   -------------------------------------------------------------------------- */
/* Keine feste Hoehe mehr: jede Tabelle hatte ihren eigenen senkrechten
   Rollbalken. 'overflow: auto' bleibt fuer den seitlichen Rollbereich
   breiter Tabellen (.stapelbar). Der Preis: die mitlaufende Kopfzeile
   haftet nicht mehr, senkrecht rollt die Seite. Ausnahme das Raster, dort
   IST der Kasten der Zweck (.tafel.raster). */
.tafel {
  background: var(--flaeche);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
  overflow: auto;
}

/* Das Raster behaelt seinen Kasten, auf jedem Bildschirm: die Namensspalte
   steht still (position: sticky, weiter unten), waehrend man seitlich durch
   die Laender rollt. Ohne feste Hoehe gaebe es nichts, worin die Kopfzeile
   stehen bleiben koennte, und genau dafuer gibt es das Raster. */
.tafel.raster { max-height: 74vh; }

/* Zweispaltige Schluessel-Wert-Tabellen: die Werte duerfen umbrechen, sonst
   schiebt eine lange Mailadresse am Telefon die Karte auseinander. Am
   Behaelter, damit die Tabelle nichts wissen muss. */
.umbruch td, .umbruch th { white-space: normal; }

table { width: 100%; border-collapse: separate; border-spacing: 0; }

th, td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--linie);
  vertical-align: middle;
  white-space: nowrap;
}
/* Die mitlaufende Kopfzeile haftet nur im Raster: ein sticky haengt am
   naechsten Rollbereich, und .tafel hat keine Hoehe mehr. Die Zeile bleibt,
   sie kostet nichts. */
th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--flaeche-2);
  backdrop-filter: blur(6px);
  font-size: 12.5px;
  font-weight: 650;
  color: var(--schrift-leise);
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--akzent) 6%, transparent); }

/* Sortieren per Kopfzeile: nur Tabellen mit data-sortierbar, Skript in
   verlauf.html. Der Pfeil haengt an aria-sort. Am Telefon gibt es keine
   Kopfzeile, also keine Sortierung. */
table[data-sortierbar] th { cursor: pointer; user-select: none; }
table[data-sortierbar] th:hover { color: var(--schrift); }
table[data-sortierbar] th:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: -2px;
}
table[data-sortierbar] th[aria-sort="ascending"]::after {
  content: " ▲";
  font-size: 9px;
}
table[data-sortierbar] th[aria-sort="descending"]::after {
  content: " ▼";
  font-size: 9px;
}

/* Sortieren auf dem SERVER (Runde 2309b, vw_tafel): die Kopfzelle ist ein
   Link, kein Klickfeld fuers Skript. Nur dort, wo die Tabelle blaettert:
   im Browser lagen sonst nur die fuenfzig Zeilen dieser Seite. */
th a.sortier {
  color: inherit;
  text-decoration: none;
  display: inline-block;
}
th a.sortier:hover { color: var(--schrift); text-decoration: underline; }
th a.sortier.an { color: var(--schrift); }

/* Erste Spalte bleibt beim seitlichen Rollen stehen: bei 12 Laenderspalten
   waere sonst nicht mehr zu erkennen, wessen Zeile man anklickt. */
.raster td.wer, .raster th.wer {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--flaeche);
}
.raster th.wer { z-index: 3; background: var(--flaeche-2); }
.raster td.zelle { text-align: center; padding: 6px 4px; }
.raster input[type="radio"] { accent-color: var(--tuerkis); width: 16px; height: 16px; }
.raster tr.geaendert td { background: color-mix(in srgb, var(--akzent) 12%, transparent); }
.raster th.land { text-align: center; padding: 7px 4px; }

/* Die Aenderungsspalte der Personenliste: Auswahllisten und Knopf in einer
   Reihe. Die Regeln wohnen HIER und nicht als style= am Formular: das
   Inline-display:flex schlug frueher die stapelbar-Regeln der Telefonansicht,
   und gegen ein Inline-flex-wrap kaeme auch das nowrap unten nicht an. */
td.tut form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* Zwei Knoepfe nebeneinander IN einer Zelle: das flex auf dem <td> selbst
   machte die Zelle zu keiner Tabellenzelle mehr. */
.knopfpaar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* Eine Person, EINE Zeile: oberhalb der Telefon-Schwelle bricht in der
   Personenliste nichts um; wird es eng, rollt die .tafel seitlich. */
@media (min-width: 761px) {
  #liste td.tut form { flex-wrap: nowrap; gap: 4px; }

  /* Und kompakt: kleinere Schrift, engere Zellen, gedeckelte Auswahllisten
     (nur die Anzeige, die aufgeklappte Liste zeigt den vollen Text). */
  #liste table { font-size: 13.5px; }
  #liste th, #liste td { padding: 6px 8px; }
  #liste .tag { font-size: 10.5px; padding: 1px 6px; }
  #liste td.tut select { font-size: 13px; }
  /* Feste Breiten, nicht gedeckelte: 'max-width' liess kurze Namen schmal und
     lange breit, das verschob die Chips daneben und erzeugte das
     Treppenmuster. Der Text wird nur in der Anzeige beschnitten. */
  #liste td.tut select[name="tier"] { width: 62px; }
  #liste td.tut select[name="country"] { width: 118px; }
  #liste td.tut select[name="region"] { width: 132px; }
  /* Das PLZ-Feld sitzt in der Spalte Postal code und gehoert per form=
     zur Zeile (0810a): schmal, der Treffer-Hinweis klein darunter. */
  #liste input[name="plz"] { width: 86px; font-size: 13px; }
  #liste .w-plz-ort { font-size: 11.5px; }
  /* Firefox schneidet von sich aus ab, Chrome und Safari brauchen die
     Ansage. Ohne sie steht ein halber Buchstabe am Rand. */
  #liste td.tut select { text-overflow: ellipsis; }
  #liste td.tut button { font-size: 13px; padding: 3px 10px; }
}
/* Der Stift neben der PLZ (0810c): gesperrt sieht das Feld aus wie Text,
   der Knopf ist klein und leise, kein dunkler Setz-Knopf. */
#liste input[name="plz"][readonly] {
  background: transparent; border-color: transparent; cursor: default; }
#liste .w-plz-edit {
  background: none; border: 0; box-shadow: none; padding: 2px 4px;
  margin-left: 2px; min-height: 0; color: var(--schrift-leise);
  cursor: pointer; vertical-align: middle; line-height: 0; }
#liste .w-plz-edit:hover, #liste .w-plz-edit:focus-visible {
  color: var(--akzent); }
#liste .w-plz-edit svg { fill: currentColor; }
#liste .w-plz-edit .kreuz, #liste .w-plz-edit.offen .stift { display: none; }
#liste .w-plz-edit.offen .kreuz { display: inline; }
/* 0810d: Bernstein = geaendert, noch nicht gesetzt; gruen = gesetzt. */
#liste input[name="plz"].w-plz-geaendert {
  border-color: #d08a00; box-shadow: 0 0 0 2px rgba(208, 138, 0, .25); }
#liste input[name="plz"].w-plz-neu {
  color: var(--gut); font-weight: 700;
  background: color-mix(in srgb, var(--gut) 14%, transparent); }
#liste .w-plz-edit[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Kleinteile
   -------------------------------------------------------------------------- */
.flagge {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
  vertical-align: -2px;
}
/* Wenn eine SVG-Datei fehlt: Kuerzel statt kaputtem Bild. */
.kuerzel {
  display: inline-block;
  min-width: 24px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--flaeche-2);
  box-shadow: inset 0 0 0 1px var(--linie);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--schrift-leise);
}

.tag {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--akzent) 14%, transparent);
  font-size: 12px;
  color: var(--schrift);
}
.tag.still { background: var(--flaeche-2); color: var(--schrift-leise); }
.fehlt { color: var(--warn); font-weight: 600; }
.leise { color: var(--schrift-leise); font-size: 13px; }

/* --------------------------------------------------------------------------
   Haken: drei Klassen statt fuenf verschiedener gap-Werte inline in den
   Vorlagen.
     .haken       ein einzelnes Kaestchen mit seiner Beschriftung
     .hakenreihe  eine Gruppe davon nebeneinander (Abteilungen, Rollen)
     .hakenliste  eine Gruppe untereinander (lange Texte, Formularseiten)
   Zwei Reihen nebeneinander bekommen eine Haarlinie dazwischen.
   -------------------------------------------------------------------------- */
.haken {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Eine Beschriftung neben einem Kaestchen ist keine Ueberschrift: der
     Fettdruck aus .karte label wuerde sie sonst erben. */
  font-weight: 400;
}
.haken input[type="checkbox"], .haken input[type="radio"] {
  width: 15px;
  height: 15px;
  /* Der Browser gibt Kaestchen einen eigenen Rand; ohne diese Zeile sitzt
     die Beschriftung nicht auf der gap, die hier steht. */
  margin: 0;
  flex: none;
}

.hakenreihe {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  /* Zeilenabstand grosszuegiger als der Abstand nebeneinander: bricht die
     Reihe um, sollen die Zeilen nicht aneinanderkleben. */
  gap: 4px 10px;
}
/* Die Haarlinie zwischen zwei Reihen. Nur zwischen ihnen, nie davor: der
   Nachbarwahl-Bezug sorgt dafuer von selbst. */
.hakenreihe + .hakenreihe {
  border-left: 1px solid var(--linie);
  padding-left: 9px;
}

.hakenliste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hakenliste .haken {
  /* Untereinander stehen laengere Texte, und die brechen um. Das Kaestchen
     gehoert dann an das ERSTE Wort und nicht in die Mitte des Absatzes. */
  align-items: flex-start;
}
.hakenliste .haken input[type="checkbox"] {
  /* Mit der Zeilenhoehe mitgehen, damit es auf dem ersten Wort sitzt. */
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   Wahlchips: Kaestchen mit Beschriftung brauchen rund 43 px fuer 'Fin', als
   Chip 34; das ist der Unterschied zwischen 'passt in eine Zeile' und
   'bricht um' (Treppenmuster). Gefuellt heisst an, Umriss heisst aus.
   Das Kaestchen ist nicht weg, nur unsichtbar: ein echtes <input
   type=checkbox> mit Namen und Wert, Formular und Route aendern sich nicht.
   Nicht display:none, sonst faellt es aus der Tabulatorreihenfolge; es wird
   auf einen Punkt geschrumpft, der Chip zeigt den Fokus. 'input:checked +
   span' statt :has(), das geht in jedem Browser.
   -------------------------------------------------------------------------- */
/* Eine Breite fuer alle. Sie muss das laengste Kuerzel tragen ('SoMe',
   'NSpk'); alles darunter macht die Chips ungleich und die Spalten
   krumm. Wer ein laengeres Kuerzel einfuehrt, aendert diese Zahl. */
:root { --chipbreite: 52px; }

.wahlchip {
  display: inline-flex;
  position: relative;
  cursor: pointer;
  /* Eine Beschriftung neben einem Feld ist keine Ueberschrift. */
  font-weight: 400;
}
.wahlchip input {
  /* Da, fokussierbar, vorlesbar: nur nicht zu sehen. Kein display:none. */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.wahlchip span {
  display: block;
  /* Alle Chips gleich breit: die halbe Miete fuer die tabellarische
     Ausrichtung. */
  width: var(--chipbreite);
  box-sizing: border-box;
  text-align: center;
  padding: 3px 4px;
  border-radius: 999px;
  border: 1px solid var(--linie);
  /* Transparent, nicht weiss: auf einer eingefaerbten Zeile sass sonst ein
     weisser Fleck. */
  background: transparent;
  color: var(--schrift-leise);
  font-size: 12.5px;
  line-height: 1.35;
  white-space: nowrap;
  /* Nur Farbe und Rand bewegen sich: KEIN transform und keine Groessen-
     aenderung. In einer Tabelle mit 5000 Zeilen ruckelt sonst beim
     Ueberfahren die ganze Zeile. */
  transition: background .12s, border-color .12s, color .12s;
}
.wahlchip:hover span {
  border-color: var(--akzent);
  color: var(--schrift);
}

/* Gewaehlt sieht gewaehlt aus, im Hausgruen: das Navy ist die Farbe der
   Knoepfe, also von Handlungen. Ein Chip ist ein Zustand. */
.wahlchip input:checked + span {
  background: var(--chip-an);
  border-color: var(--chip-an);
  color: var(--chip-an-schrift);
}
.wahlchip:hover input:checked + span {
  /* Beim Ueberfahren einen Hauch dunkler, statt die Randfarbe zu
     wechseln: ein gewaehlter Chip soll nicht kurz ungewaehlt aussehen. */
  filter: brightness(.92);
}

/* Der Fokusring gehoert an den Chip, nicht an den unsichtbaren Punkt.
   :focus-visible und nicht :focus: sonst leuchtet nach jedem Mausklick ein
   Ring auf, und in einer Zeile mit acht Chips ist das nur Laerm. */
.wahlchip input:focus-visible + span {
  outline: 2px solid color-mix(in srgb, var(--akzent) 55%, transparent);
  outline-offset: 1px;
}

/* Ein abgeschalteter Chip: es gibt ihn heute nirgends, aber ohne diese
   Regel saehe er aus wie ein waehlbarer. */
.wahlchip input:disabled + span {
  opacity: .45;
  cursor: not-allowed;
}

/* Eine Gruppe Wahlchips: ein Raster mit fester Spaltenzahl, nicht ein
   umbrechendes Flex. Die Regionsauswahl daneben liess unterschiedlich viel
   Platz, und die Gruppen brachen je Zeile verschieden um. Die Spaltenzahl
   steht in --spalten aus der Vorlage: eine Eigenschaft der Gruppe, nicht
   des Aussehens. So ist jede Gruppe in jeder Zeile gleich hoch. */
.chipreihe {
  display: inline-grid;
  grid-template-columns: repeat(var(--spalten, 2), var(--chipbreite));
  gap: 3px;
  align-content: center;
}
/* Die Haarlinie zwischen zwei Gruppen, wie bei .hakenreihe: sie sagt, dass
   'Fin SoMe Ops Adm' und 'NOrg NSpk' zwei Dinge sind und nicht sechs. */
.chipreihe + .chipreihe {
  border-left: 1px solid var(--linie);
  margin-left: 3px;
  padding-left: 8px;
}

/* --------------------------------------------------------------------------
   Pflichtfelder: ein rotes Sternchen, und beim Absenden wird rot, was
   fehlt. Der Stern traegt aria-hidden: eine Vorlesehilfe kennt 'required'.
   -------------------------------------------------------------------------- */
.pflicht {
  color: var(--warn);
  font-weight: 700;
  /* Der Stern sitzt sonst optisch zu hoch neben der Beschriftung. */
  font-size: 1.05em;
  line-height: 1;
}

/* Gesetzt wird das aus rahmen.html, auf dem 'invalid'-Ereignis des Browsers.
   Der Rand allein reicht nicht: bei einem Auswahlfeld ist er schmal, und im
   dunklen Thema faellt Rot auf Dunkelblau kaum auf. Deshalb zusaetzlich der
   Ring. */
.falsch,
input.falsch,
select.falsch,
textarea.falsch {
  border-color: var(--warn) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 22%, transparent);
  outline: none;
}

/* Ein Kaestchen ist zu klein fuer einen sichtbaren Rand. Rot wird deshalb
   seine Beschriftung: das ist der Text, den man sucht, wenn einer der
   Regelhaken fehlt. */
.falsch-um {
  color: var(--warn);
}
.falsch-um input[type="checkbox"] {
  outline: 2px solid var(--warn);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Der Wartehinweis: rahmen.html sperrt den Knopf, dieser Kasten faengt im
   selben Augenblick an zu pochen. Kein Dialogfenster: es verdeckte die
   Seite, und waehrend der Anfrage gibt es keinen Weg heraus.
   -------------------------------------------------------------------------- */
.wartehinweis {
  display: block;
  margin: 12px 0 0;
  padding: 11px 14px;
  border-radius: 10px;
  border-left: 4px solid var(--linie);
  background: var(--flaeche-2);
  color: var(--schrift-leise);
  font-size: 14px;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.wartehinweis b { font-weight: 700; }

.wartehinweis.laeuft {
  border-left-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  color: var(--schrift);
  animation: warte-blinken 1.4s ease-in-out infinite;
}
.wartehinweis.laeuft b { color: var(--warn); }

@keyframes warte-blinken {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warn) 34%, transparent); }
  50%      { box-shadow: 0 0 0 8px transparent; }
}

/* Die Ampel auf /apex/calls. Vier Zustaende: 'grau' heisst "wir wissen
   gerade nichts", sonst saehe eine tote Messung aus wie eine ruhige
   Maschine. Der Ring aussen traegt die Farbe auch, wo der Punkt zu klein
   ist; der Grund steht als Text daneben, nie nur als Farbe. */
.ampel {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--schrift-leise);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--schrift-leise) 22%, transparent);
}
.ampel.gruen { background: var(--gut);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gut) 22%, transparent); }
.ampel.gelb  { background: #d68910;
  box-shadow: 0 0 0 3px color-mix(in srgb, #d68910 22%, transparent); }
.ampel.rot   { background: var(--warn);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 22%, transparent); }

/* Nutzernamen in Tabellen: ab ~12 Zeichen abgeschnitten, der volle Name als
   title. inline-block, damit die Ellipse greift; vertical-align haelt die
   Grundlinie. */
.name {
  display: inline-block;
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* Dasselbe fuer die Regionsspalte: Median 8 Zeichen, neun von zehn unter
   16; 14ch traegt den Median mit Luft. Der volle Name haengt im Hover und
   steht in der Auswahlliste daneben. Eigene Klasse, nicht .name: die beiden
   decken verschiedene Inhalte. */
.knapp {
  display: inline-block;
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.hinweis {
  border-left: 3px solid var(--akzent);
  background: var(--flaeche);
  border-radius: 8px;
  box-shadow: var(--schatten);
  padding: 12px 15px;
  font-size: 14px;
  margin-bottom: 18px;
}

pre {
  background: #0b1220;
  color: #cfe0f5;
  padding: 14px;
  border-radius: 10px;
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.5;
}

/* Filterband und Ansichtsumschalter */
.band {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
}

/* Das Suchfeld steckt in einem eigenen <form>: ohne JavaScript ein GET mit
   Enter. Im Band kein eigener Kasten, sondern so breit wie sein Feld. */
.suchform {
  display: flex;
  align-items: center;
  margin: 0;
  gap: 6px;
}

/* Das Band ueber jeder Tabelle (Runde 2309b): Suchfeld, Knopf, Zaehler.
   Das Feld traegt seinen Rahmen hier und nicht oben bei den anderen
   Eingabefeldern: type="search" stand dort nie, und die Personenliste
   setzt ihre Breite von Hand. */
.tafelband input[type="search"] {
  padding: 7px 10px;
  color: var(--schrift);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 7px;
  min-width: 170px;
}
/* Am Telefon nimmt das Feld die Zeile: daneben blieben 60 Pixel. Dieselbe
   Schwelle wie der uebrige Telefonschnitt weiter unten. */
@media (max-width: 760px) {
  .tafelband .suchform { flex: 1 1 100%; }
  .tafelband input[type="search"] { flex: 1 1 auto; min-width: 0; }
}

/* ==========================================================================
   Die Blaetterleiste: rechtsbuendig, denn sie steht unter der Tabelle und
   der Blick kommt von der letzten Zeile. Sie benutzt .chip mit; nur was
   .chip nicht kann, steht hier.
   ========================================================================== */
.blaettern {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  margin: 12px 0 0;
}
/* Der Pfeil auf der ersten oder letzten Seite. Er bleibt STEHEN und wird
   nur blass: verschwaende er, spraengen die uebrigen Chips beim Blaettern
   hin und her, und man traefe den, den man eben noch getroffen hat, nicht
   mehr. Ohne href ist er ohnehin ein <span>: nichts zu klicken, keine
   Station fuer den Tabulator. */
.chip.aus {
  opacity: .45;
  pointer-events: none;
}
/* Am Schreibtisch die Zahlenreihe, am Telefon "2 / 16": siehe unten. */
.blattkurz { display: none; }
.chip {
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  color: var(--schrift-leise);
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* Ohne diese Zeile waren die Chips, die Links sind (Land, Region), als
     einzige unterstrichen: ein globales a { text-decoration: none } gibt es
     nicht. */
  text-decoration: none;
}

/* Gewaehlt sieht gewaehlt aus, egal ob Knopf (aria-pressed) oder Link
   (Klasse 'gewaehlt', Land- und Regionschips gehen zum Server). Beide
   zusammen, damit die naechste Aenderung nicht nur die Haelfte trifft. */
.chip[aria-pressed="true"],
.chip.gewaehlt {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.chip[aria-pressed="true"] .kuerzel,
.chip.gewaehlt .kuerzel { background: rgba(255,255,255,.18); color: #fff; }

/* Landchips tragen Name UND Kuerzel: am Schreibtisch der Name, am Telefon
   das Kuerzel (der Wechsel steht im 760er-Block). */
.landkurz { display: none; }

/* Die Bilanz "First contact" ist ein <details>: am Schreibtisch immer offen
   und ohne Pfeil, am Telefon zu (Skript im Teil selbst). */
details.bilanz > summary { list-style: none; cursor: default; }
details.bilanz > summary::-webkit-details-marker { display: none; }
details.bilanz > summary h2 { display: inline-block; }
.bilanz-kurz { display: none; }

/* --------------------------------------------------------------------------
   Auswahl per Ziehen: markierte Zeile, Gummiband, Band oben. Markierte
   Zeilen sind kraeftiger getoent als geaenderte und tragen eine Kante
   links: markiert heisst "gemeint", geaendert heisst "wird geschrieben".
   Starre Zeilen sind nicht waehlbar, der Mauszeiger sagt es.
   -------------------------------------------------------------------------- */
tbody tr[data-name] { cursor: default; }
tbody tr[data-starr] { cursor: not-allowed; }

tbody tr.gewaehlt > td {
  background: color-mix(in srgb, var(--akzent) 20%, transparent);
}
tbody tr.gewaehlt > td:first-child {
  box-shadow: inset 3px 0 0 0 var(--akzent);
}
/* Die erste Spalte des Rasters klebt und traegt eine eigene Flaeche: ohne
   diese Zeile bliebe genau die Zelle ungetoent, an der man zieht. */
.raster tr.gewaehlt td.wer {
  background: color-mix(in srgb, var(--akzent) 20%, var(--flaeche));
}

/* --------------------------------------------------------------------------
   Die Auswahlspalte: schmal und ohne eigenen Rand, Werkzeug, nicht Inhalt.
   Am Telefon bekommt sie kein data-titel-Etikett (siehe .stapelbar).
   -------------------------------------------------------------------------- */
th.waehl, td.waehl {
  width: 32px;
  padding-left: 10px;
  padding-right: 0;
  text-align: center;
}
td.waehl input { cursor: pointer; }

/* --------------------------------------------------------------------------
   Das drehende Rad am "Set" sitzt IN der Zeile, weil dort die Frage
   entsteht, und es duerfen mehrere laufen. Die laufende Zeile wird gedaempft.
   -------------------------------------------------------------------------- */
.rad {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, var(--akzent) 35%, transparent);
  border-top-color: var(--akzent);
  border-radius: 50%;
  animation: sea-dreht 0.7s linear infinite;
  vertical-align: middle;
}
.rad[hidden] { display: none; }
@keyframes sea-dreht { to { transform: rotate(360deg); } }

/* Wer Bewegung abgestellt hat, bekommt keine: das Rad bleibt stehen und
   ist trotzdem da: es ist die ANWESENHEIT, die "laeuft" bedeutet, nicht
   die Drehung. */
@media (prefers-reduced-motion: reduce) {
  .rad { animation: none; }
}

tbody tr.laeuft > td { opacity: 0.62; }

/* Der Knopf wechselt seine Beschriftung: "Set" -> "sending…" -> "sent".
   Ohne feste Mindestbreite ruckt die ganze Zeile bei jedem Klick, und in
   einer Tabelle mit dreissig Zeilen sieht das aus wie ein Fehler.
   Gemessen an der laengsten der drei Beschriftungen. */
form.setzform button {
  min-width: 82px;
  text-align: center;
}
.zeilenlage { font-size: 13px; }
.zeilenlage[hidden] { display: none; }

/* Das Gummiband haengt am Koerper, fixiert, nicht absolut: ein absolut
   positioniertes Kind von <body> liesse die Seite waehrend des Zuges
   wachsen. z-index ueber Massenband (5) und Tabellenkoepfen (2/3). */
.gummiband {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  border: 1px solid var(--akzent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--akzent) 14%, transparent);
}
/* Strg, Alt oder Cmd beim Ziehen nimmt weg statt hinzuzufuegen. Das muss man
   SEHEN, sonst wirkt es wie ein Fehler. */
.gummiband.weg {
  border-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
}

/* Waehrend eines Zuges keine Textmarkierung. Die Klasse setzt das Skript
   erst, wenn die Schwelle ueberschritten ist: wer nur einen Namen kopieren
   will, soll das weiterhin koennen. */
body.zieht,
body.zieht * {
  -webkit-user-select: none;
  user-select: none;
}

.massen {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 11px 15px;
  border-radius: var(--rund);
  background: color-mix(in srgb, var(--flaeche) 92%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: var(--schatten);
}
.massen[hidden] { display: none; }
.massen label { display: inline-flex; align-items: center; gap: 6px; }

.stapel {
  position: sticky;
  bottom: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: var(--rund);
  background: var(--flaeche);
  box-shadow: var(--schatten);
}
.stapel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Bewegung reduzieren: alles Bewegte steht still, nichts verschwindet.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; transform: scale(1.1); }
  /* Das Menuefeld am Telefon springt statt zu gleiten. */
  header nav { transition: none; }
  .karte.leuchtet::before {
    animation: none;
    background: linear-gradient(135deg, var(--beam-1), var(--beam-2));
    opacity: .6;
  }
  .karte.fehl::before { background: var(--warn); opacity: 1; }
  .karte.fehl { animation: none; }
  /* Der Lichtpunkt hoert auf zu pulsieren, bleibt aber SICHTBAR, und zwar
     auf der hellen Seite des Pulses. Ihn mitzudimmen hiesse, den einzigen
     Knopf der Seite verschwinden zu lassen. */
  .tor button {
    animation: none;
    opacity: 1;
    box-shadow: 0 0 11px 3px color-mix(in srgb, var(--tuerkis) 65%, transparent);
  }
  * { transition-duration: .01ms !important; }
}

/* ==========================================================================
   AM TELEFON
   ==========================================================================
   Zwei Abfragen, zwei Fragen: (pointer: coarse) heisst "wird mit dem
   Finger bedient", sagt nichts ueber die Breite (Trefferflaechen,
   Schriftgroessen von Feldern); (max-width) heisst "ist schmal" (Umbrechen
   des Aufbaus). Am Ende der Datei, weil bei gleicher Spezifitaet die
   spaetere Regel gewinnt.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Finger. iOS Safari zoomt die Seite, sobald ein Eingabefeld mit
   weniger als 16px angetippt wird, fest eingebaut. Am Schreibtischbrowser
   ist davon nichts zu sehen; wer das nachprueft, braucht ein iPhone.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; }

  /* 44 Pixel ist Apples Mass, 48 das von Google. 44 mit etwas Luft daneben
     trifft beide. Betroffen sind vor allem die Chips: mit 4px Innenabstand
     massen sie 26 Pixel und waren damit eher Zielscheibe als Knopf. */
  button, a.knopf, .chip, select,
  input[type="text"], input[type="email"], input[type="password"] {
    min-height: 44px;
  }
  button, a.knopf { padding: 11px 18px; }
  .chip { padding: 9px 15px; }
  input[type="text"], input[type="email"], input[type="password"], select {
    padding: 10px 12px;
  }

  /* Kaestchen sind sonst kaum zu treffen, und auf /registration,
     /willkommen und /beitreten haengt an sieben davon die Zustimmung. */
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
  label { line-height: 1.5; }

  /* DIESE ZWEI ZEILEN SIND PFLICHT, und zwar wegen der Spezifitaet.
     '.haken input[type="checkbox"]' oben ist (0,2,1) und schlaegt die
     Zeile darueber (0,1,1) muehelos. Ohne diese Wiederholung schrumpften
     mit der Einfuehrung der Klasse auch die Zustimmungskaestchen der
     oeffentlichen Seiten von 22 auf 15 Pixel: genau die, an denen die
     Einwilligung haengt, und genau am Geraet, an dem fast alle anmelden. */
  .haken input[type="checkbox"], .haken input[type="radio"] {
    width: 22px;
    height: 22px;
  }
  .haken { gap: 10px; }

  /* Wahlchips gehen den umgekehrten Weg: nicht das Kaestchen waechst,
     sondern der Chip. Die Regel oben darf sie NICHT treffen, sonst
     spannte der unsichtbare Punkt im Chip ploetzlich 22 Pixel auf und
     schoebe die Beschriftung zur Seite: darum ist er dort ausdruecklich
     1 px gross und wird hier nicht angefasst. */
  .wahlchip span { padding: 8px 4px; font-size: 13.5px; }
  .chipreihe { gap: 5px; }
  /* Am Finger duerfen sie breiter sein: die Zeile stapelt dort ohnehin
     (siehe .stapelbar), es geht also keine Tabellenbreite verloren. */
  :root { --chipbreite: 62px; }

  /* Der Themenknopf ist ein Symbol ohne Text und faellt sonst durch. */
  .thema { min-height: 44px; min-width: 44px; padding: 10px; }
}

/* --------------------------------------------------------------------------
   2. Schmal
   -------------------------------------------------------------------------- */
/* Hinweise, die nur am schmalen Schirm etwas erklaeren. Am Schreibtisch
   waeren sie Rauschen: dort stimmt ja alles. */
.nur-schmal { display: none; }

/* Das Gegenstueck: was NUR am Schreibtisch stimmt (registration-done.html,
   Karte "On this computer"). Dieselbe Grenze wie .nur-schmal. */
.nur-breit { display: block; }

@media (max-width: 760px) {
  .nur-schmal { display: block; }
  .nur-breit { display: none; }

  main { padding: 16px 12px 48px; }
  h2 { margin: 22px 0 8px; }

  /* Die Blaetterleiste am Finger: nur "2 / 16" zwischen zwei grossen Pfeilen,
     44 Pixel, mittig. Nicht klebend: eine feste Leiste verdeckte eine Karte. */
  .blaettern { justify-content: center; gap: 10px; }
  .blaettern .zahl { display: none; }
  .blattkurz { display: inline; }
  .blaettern .chip {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Kein Rollbereich in einer rollenden Seite: die Regel gilt jetzt ueberall
     (.tafel setzt keine Hoehe mehr), nur das Raster behaelt seinen Kasten. */

  /* Tabellen, die zu Karten werden. Die Klasse steht ausdruecklich am
     Element, damit man am Markup sieht, was gemeint ist: das Raster
     (Personen x zwoelf Laender) traegt sie NICHT und rollt weiter seitlich,
     siehe unten. */
  .stapelbar thead { display: none; }
  .stapelbar, .stapelbar tbody, .stapelbar tr, .stapelbar td { display: block; }
  /* Gefilterte Zeilen bleiben auch hier weg: die Regel darueber setzt
     'display: block' auf jede Zeile und schlaegt das [hidden] des Browsers. */
  .stapelbar tr[hidden] { display: none; }
  .stapelbar tr {
    /* 10/12 statt 6/10: eine Karte mit sechs Zeilen las sich sonst wie ein Block. */
    padding: 10px 4px 12px;
    border-bottom: 1px solid var(--linie);
  }
  .stapelbar tr:last-child { border-bottom: 0; }
  .stapelbar td {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: baseline;
    justify-content: space-between;
    white-space: normal;
    border: 0;
    padding: 4px 8px;
  }
  /* Die Spaltenueberschrift wandert in die Zelle. Ohne sie stuenden dort
     Werte ohne Bedeutung: 'L4', 'ch', '117' untereinander.
     'data-titel' und NICHT 'data-spalte': letzteres traegt am <tr> schon den
     Filterwert (Land bzw. Region). Zwei Bedeutungen unter einem Namen sind
     beim naechsten Lesen eine Falle. */
  .stapelbar td[data-titel]::before {
    content: attr(data-titel);
    color: var(--schrift-leise);
    font-size: 12.5px;
    font-weight: 650;
    flex: 0 0 auto;
  }
  /* In der Kartenansicht hat der Name die volle Breite: hier schneidet
     nichts ab, der Hover vom Schreibtisch existiert am Finger ohnehin
     nicht. */
  .stapelbar .name, .stapelbar .knapp { max-width: none; }

  /* Die Zelle mit dem Aenderungsformular bekommt die volle Breite: drei
     Auswahllisten und ein Knopf nebeneinander gehen auf 390 Pixel nicht. */
  .stapelbar td.tut { display: block; padding-top: 8px; }
  .stapelbar td.tut::before { display: block; margin-bottom: 6px; }
  .stapelbar td.tut form { display: grid; gap: 8px; }
  .stapelbar td.tut form > * { width: 100%; }
  /* Das Rad ist keine Formularzeile: es soll nicht ueber die volle Breite
     gehen und dabei die Karte um eine Zeile wachsen lassen. */
  .stapelbar td.tut form > .rad { width: 14px; }

  /* Die Auswahlspalte bleibt in der Kartenansicht eine schmale Zelle oben
     links, statt als eigene Zeile "Select" zu tragen: sie ist Werkzeug und
     nicht Inhalt der Karte. Sie steht in der Karte als erstes: dieselbe
     Reihenfolge wie in der Tabelle. */
  .stapelbar td.waehl {
    display: inline-flex;
    width: auto;
    padding: 4px 8px 0;
    justify-content: flex-start;
  }

  /* Das Raster bleibt, was es ist: ein Werkzeug fuer den Schreibtisch. Es
     rollt seitlich, die Namensspalte bleibt stehen (steht schon oben). Es
     hier zu Karten zu falten hiesse, die eine Eigenschaft wegzuwerfen,
     wegen der es existiert: die Uebersicht ueber viele auf einmal. */
  .tafel.raster { max-height: 70vh; }

  /* Bedienbaender: untereinander statt nebeneinander gequetscht. */
  .massen, .stapel { padding: 10px 12px; }
  .massen label { width: 100%; }
  .massen label select { flex: 1; }

  /* ---- Der Kopf am Telefon: er klebt oben, das nav wird zum Feld darunter.
     Klebend nur hier: am Schreibtisch rechnen .massen und die Rasterkoepfe
     mit top: 0. --kopf ist seine Hoehe (10 + 44 + 10 + 1 Linie): alles, was
     ebenfalls oben klebt oder per Anker angesprungen wird, rueckt um so viel. */
  :root { --kopf: 65px; }
  header {
    position: sticky;
    top: 0;
    z-index: 50;
    flex-wrap: nowrap;
    padding: 10px 14px;
  }
  .massen { top: calc(var(--kopf) + 6px); }
  [id] { scroll-margin-top: calc(var(--kopf) + 8px); }

  .burger { min-height: 44px; padding: 6px 12px 6px 10px; }
  .burger-wort { display: none; }
  header .kennung { max-width: 30vw; }

  /* Das Feld ueber die ganze Breite; der Vorhang dunkel, am Finger soll der
     Inhalt dahinter zur Ruhe kommen. Alles Uebrige steht im allgemeinen Block. */
  header nav {
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    font-size: 16px;
    padding: 8px 10px 12px;
  }
  header nav a { min-height: 48px; }
  .menue-vorhang { background: rgba(8, 13, 23, .45); }

  /* ---- Die Arbeitsliste am Telefon: zwei Tabellen, #arbeitsliste und
     #kontaktliste, jede Regel nennt beide IDs, sonst faellt die zweite auf die
     Karten aus .stapelbar zurueck. Ein Raster mit drei Zeilen: Name (Message
     rechts), Ort und Wartezeit, Knoepfe; die Beschriftungen fallen weg, der
     Inhalt sagt es selbst. Umbrueche in Waiting und Where werden Leerzeichen. */
  #arbeitsliste tr, #kontaktliste tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    align-items: center;
    padding: 10px 12px 12px;
  }
  /* Gefilterte Zeilen bleiben weg: die ID-Regel darueber wiegt mehr als
     .stapelbar tr[hidden]. Wer hier eine Regel mit ID anlegt, legt die
     [hidden]-Regel daneben. */
  #arbeitsliste tr[hidden], #kontaktliste tr[hidden] { display: none; }
  #arbeitsliste td, #kontaktliste td { display: block; padding: 0; }
  #arbeitsliste td::before, #kontaktliste td::before { display: none; }
  #arbeitsliste td.wer, #kontaktliste td.wer { grid-column: 1 / -1; grid-row: 1; }
  #arbeitsliste td[data-titel="Where"],
  #kontaktliste td[data-titel="Where"] { grid-column: 1; grid-row: 2; font-size: 13px; }
  #arbeitsliste td[data-titel="Waiting"],
  #kontaktliste td[data-titel="Since"] {
    grid-column: 2;
    grid-row: 2;
    font-size: 13px;
    text-align: right;
  }
  #arbeitsliste td[data-titel="Where"] br,
  #arbeitsliste td[data-titel="Waiting"] br,
  #kontaktliste td[data-titel="Where"] br,
  #kontaktliste td[data-titel="Since"] br { display: none; }
  #arbeitsliste td[data-titel="Contacted"],
  #kontaktliste td[data-titel="Contacted"] { grid-column: 1; grid-row: 3; margin-top: 4px; }
  #arbeitsliste td[data-titel="Promote"],
  #kontaktliste td[data-titel="Promote"] { grid-column: 2; grid-row: 3; margin-top: 4px; }
  /* Die Erinnerung bekommt in "Contacted" die vierte Zeile, volle Breite. */
  #kontaktliste td[data-titel="Reminder"] { grid-column: 1 / -1; grid-row: 4; margin-top: 4px; }
  #arbeitsliste td[data-titel="Promote"] .knopfpaar,
  #kontaktliste td[data-titel="Promote"] .knopfpaar { justify-content: flex-end; }
  #arbeitsliste td form, #kontaktliste td form { display: inline-block; }
  /* "not notified" erklaert sich nur im Hover, und den gibt es am Finger
     nicht. Am Schreibtisch bleibt es stehen. */
  #arbeitsliste .gemeldet, #kontaktliste .gemeldet { display: none; }
  /* Kleinere Knoepfe, aber 40 Pixel hoch: drei nebeneinander muessen in
     die Zeile passen und trotzdem ein Daumen treffen. Die ID schlaegt die
     44 aus dem Finger-Block am Dateiende, das ist hier Absicht. */
  #arbeitsliste button, #arbeitsliste a.knopf,
  #kontaktliste button, #kontaktliste a.knopf {
    min-height: 40px;
    padding: 6px 11px;
    font-size: 13px;
  }

  /* Die Landchips: Kuerzel statt Name, etwas enger, 40 statt 44 Pixel. */
  .filterleiste .landname, .band .landname { display: none; }
  .filterleiste .landkurz, .band .landkurz { display: inline; }
  .filterleiste .chip, .band .chip { padding: 4px 9px; font-size: 12.5px; gap: 4px; min-height: 40px; }

  /* Die Bilanz: zu, bis jemand tippt (Skript in _onboarding_bilanz.html),
     mit Pfeil und Kurztext im Titel. Aufgeklappt stehen je Zeitraum die
     sechs Zahlen als Raster zu dritt, Beschriftung UNTER der Zahl: 21
     beschriftete Zeilen wurden zu drei kleinen Bloecken. */
  details.bilanz > summary { cursor: pointer; }
  details.bilanz > summary h2::after { content: " \25B8"; color: var(--schrift-leise); }
  details.bilanz[open] > summary h2::after { content: " \25BE"; }
  .bilanz-kurz {
    display: inline;
    margin-left: 6px;
    font-weight: 400;
    font-size: 13px;
    color: var(--schrift-leise);
  }
  .bilanz .stapelbar tr {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 8px;
    padding: 10px 10px 12px;
  }
  .bilanz .stapelbar td {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: 0 4px;
    font-size: 14px;
  }
  .bilanz .stapelbar td.wer { grid-column: 1 / -1; flex-direction: row; padding-bottom: 2px; }
  .bilanz .stapelbar td[data-titel]::before { font-size: 11px; font-weight: 600; }
  .bilanz .stapelbar td br { display: none; }

  .karte { padding: 16px 14px; }
}

@media (max-width: 560px) {
  /* Der Kopf stapelt hier nicht mehr: oben nur Marke, Thema und Burger, die
     Kennung wohnt im Menue. */

  /* Auf den oeffentlichen Seiten (/registration, /willkommen, /beitreten)
     steht jedes Feld ueber die volle Breite und der Knopf darunter: ein
     Daumen trifft das, ohne zu zielen. Nebeneinander gesetzte Auswahllisten
     brechen dabei von selbst um, sie haben schon flex-wrap. */
  .karte form input[type="text"],
  .karte form input[type="email"],
  .karte form input[type="password"],
  .karte form select,
  .karte form button,
  .karte form a.knopf { width: 100%; max-width: none; }
  .karte form button, .karte form a.knopf { text-align: center; }
}

/* --------------------------------------------------------------------------
   3. Sichere Raender
   --------------------------------------------------------------------------
   Auf einem iPhone liegt unten der Bedienbalken ueber der Seite. Was dort
   klebt, liegt darunter und ist nicht zu treffen.
   -------------------------------------------------------------------------- */
@supports (padding: env(safe-area-inset-bottom)) {
  .stapel { bottom: calc(14px + env(safe-area-inset-bottom)); }
  main { padding-bottom: calc(48px + env(safe-area-inset-bottom)); }
}

/* --------------------------------------------------------------------------
   4. /guide: die Anmelde-Anleitung. Das Telefon zuerst, und der eine
   Schritt hervorgehoben: "Sign in", nicht "Create account".
     .stufen        die nummerierte Spur mit durchgehender Linie
     .kommt         gestaffeltes Einblenden beim Laden
     .pocht         ein langsamer Puls auf der einen Warnung
     .laden:hover   die Store-Abzeichen heben sich an
   prefers-reduced-motion schaltet alles davon ab; kein Effekt traegt
   Information, die nicht auch im Text steht.
   -------------------------------------------------------------------------- */
.guide-kopf { margin: 26px 0 6px; font-size: 27px; letter-spacing: -.4px; }

.guide-vor { max-width: 46ch; margin: 0 0 22px; }

/* Die Reihenfolge steht im Markup, nicht im Stil: wer die Karten tauscht,
   tauscht die Reihenfolge. Ein order-Wert waere hier eine zweite Wahrheit. */
.guide-marke {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 5px 12px 5px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--akzent) 14%, transparent);
  color: var(--akzent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
}
.guide-marke .gross { font-size: 16px; }

/* --- die nummerierte Spur ------------------------------------------------ */
.stufen { list-style: none; margin: 0; padding: 0; counter-reset: stufe; }

.stufen li {
  position: relative;
  padding: 0 0 18px 42px;
  counter-increment: stufe;
}
.stufen li:last-child { padding-bottom: 0; }

/* Die Ziffer. counter statt getippter Zahlen: wer einen Schritt einschiebt,
   muss nichts nachzaehlen. */
.stufen li::before {
  content: counter(stufe);
  position: absolute;
  left: 0;
  top: -1px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--akzent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

/* Die Linie zwischen den Ziffern. Nicht am letzten Schritt: eine Linie, die
   ins Leere laeuft, verspricht einen vierten. */
.stufen li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 13.5px;
  top: 30px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(var(--akzent), transparent);
  opacity: .35;
}

/* --- gestaffeltes Einblenden --------------------------------------------- */
/* Die Reihenfolge steht als --auf im Markup und nicht als :nth-child hier:
   die Karten stehen zwischen einer Ueberschrift und einem Absatz, und jede
   Stellungsregel waere beim naechsten eingeschobenen Element still falsch. */
.kommt { animation: guide-auf .5s cubic-bezier(.2,.7,.3,1) both;
         animation-delay: calc(var(--auf, 0) * .08s); }

@keyframes guide-auf {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* --- die eine Warnung, die ueberlesen wird ------------------------------- */
.pocht {
  display: block;
  margin: 10px 0 0;
  padding: 11px 14px;
  border-radius: 10px;
  border-left: 4px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  color: var(--schrift);
  font-size: 14px;
  animation: guide-pochen 2.8s ease-in-out infinite;
}
.pocht b { color: var(--warn); }

@keyframes guide-pochen {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warn) 30%, transparent); }
  50%      { box-shadow: 0 0 0 7px transparent; }
}

/* --- die Store-Abzeichen ------------------------------------------------- */
/* justify-content: die Abzeichen klebten links, weil die Karte
   text-align:left traegt und ein Flexkasten davon nichts weiss. */
.laden {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 14px 0 6px;
}
.laden a {
  display: inline-block;
  border-radius: 10px;
  transition: transform .18s ease, filter .18s ease;
}
.laden a:hover, .laden a:focus-visible { transform: translateY(-3px); filter: brightness(1.06); }
.laden a:active { transform: translateY(-1px) scale(.98); }
.laden img { display: block; }

/* Beide Abzeichen gleich gross: store-apple.png und store-google.png messen
   beide 524 x 175 und fuellen den Rahmen randlos; eine Hoehe genuegt. */
.laden img { height: 52px; }

/* --------------------------------------------------------------------------
   Die schwebende Support-Hilfe, nur am Telefon (am Rechner ist die Karte am
   Fuss erreichbar). Links unten, nicht rechts: dort sitzt auf iOS die
   Leiste des Browsers und der Daumen. 'weg' statt [hidden]: der Uebergang
   soll sichtbar sein; pointer-events faellt mit weg.
   -------------------------------------------------------------------------- */
.hilfe-schweber { display: none; }

@media (max-width: 759px) {
  .hilfe-schweber {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: fixed;
    left: 12px;
    bottom: 14px;
    z-index: 40;
    transition: opacity .22s ease, transform .22s ease;
  }
  .hilfe-schweber.weg {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
  }
  .hilfe-schweber a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .55);
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
  }
  .hilfe-schweber a:active { transform: scale(.94); }
  .hilfe-schweber img { width: 26px; height: 26px; display: block; }
}

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

/* --- der richtige und der falsche Server: Element X schlaegt matrix.org
   vor, und der Vorschlag sieht plausibel aus. Durchgestrichen zusaetzlich
   zu Rot: Rot allein ist fuer Farbenblinde keine Auskunft. */
.falsch-server {
  color: var(--warn);
  font-weight: 600;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.richtig-server {
  color: var(--gut);
  font-weight: 800;
}

/* --- die Bildschirmfotos im Guide ---------------------------------------- */
/* Das Anleitungsvideo: volle Spaltenbreite, gerundet, dunkler Grund: ein
   schwarzes Rechteck vor dem Laden ist ehrlicher als ein weisses. */
.guide-video { margin: 18px 0 6px; }

/* Am Rechner kleiner: am Telefon ist das Video der Einstieg, am Rechner
   drueckte es die Anleitung unter die Falz. Die Breite haengt am
   Ansichtsfenster; 'margin-inline: auto' haelt es mittig. */
@media (min-width: 760px) {
  .guide-video { max-width: 380px; margin-inline: auto; }
}

/* Der Rahmen: ein Standbild ohne Rand war von einem Bildschirmfoto nicht zu
   unterscheiden. Der dunkle Bezel sagt "hier laeuft etwas". */
.video-rahmen {
  position: relative;
  border-radius: 14px;
  padding: 8px;
  background: linear-gradient(160deg, #0e1c33, #050a14);
  box-shadow: 0 14px 34px -18px rgba(6, 12, 26, .8),
              inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.guide-video video {
  width: 100%;
  display: block;
  border-radius: 8px;
  background: #000;
}

/* DER STARTKNOPF. Er liegt UEBER dem Standbild und deckt die native
   Steuerleiste am unteren Rand bewusst nicht ab (bottom: 44px): wer lieber
   dort tippt, kann das, und beim ersten Klick nimmt sea.js den Knopf
   ohnehin weg. 'pointer-events' bleibt auf der Flaeche, nicht auf dem
   Rahmen: ein Klick daneben soll das Video treffen, nicht den Knopf. */
.video-start {
  position: absolute;
  inset: 8px 8px 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  border: 0;
  border-radius: 8px;
  background: rgba(5, 10, 20, .34);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .16s ease;
}
.video-start:hover { background: rgba(5, 10, 20, .18); }
.video-dreieck {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--akzent);
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .7);
  position: relative;
}
.video-dreieck::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 17px 0 17px 28px;
  border-color: transparent transparent transparent #fff;
}
.video-wort {
  background: rgba(5, 10, 20, .62);
  padding: 6px 14px;
  border-radius: 999px;
}
@media (max-width: 420px) {
  .video-dreieck { width: 64px; height: 64px; }
  .video-dreieck::after { border-width: 13px 0 13px 21px; }
  .video-start { inset: 8px 8px 44px; font-size: 14px; }
}
.guide-video figcaption {
  margin-top: 6px;
  font-size: 13px;
  color: var(--schrift-leise);
  text-align: center;
}

/* Zentriert: die Bildschirmfotos sind schmaler als die Spalte.
   'margin-inline: auto' am Bild UND am Rahmen, sonst wandert nur eines. */
.guide-bild {
  display: block;
  margin: 12px auto 2px;
  text-align: center;
}
.guide-bild img {
  display: block;
  width: 100%;
  max-width: 320px;
  margin-inline: auto;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--linie);
  background: var(--flaeche-2);
  /* Auf hellem Grund braucht ein helles Bildschirmfoto eine Kante, sonst
     schwimmt es. Im dunklen Thema uebernimmt --linie das von selbst. */
  box-shadow: 0 6px 18px -10px rgba(17, 35, 73, .45);
}
.guide-bild figcaption {
  margin-top: 5px;
  color: var(--schrift-leise);
  font-size: 12.5px;
}

/* --- der Server-Name zum Abtippen ---------------------------------------- */
.abtippen {
  display: inline-block;
  margin-top: 4px;
  padding: 7px 13px;
  border-radius: 9px;
  border: 1px dashed var(--linie);
  background: var(--flaeche-2);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 15px;
  letter-spacing: .4px;
  user-select: all;              /* ein Klick markiert alles */
}

@media (prefers-reduced-motion: reduce) {
  /* Der Wartehinweis behaelt seine Farbe, verliert nur das Pochen: er sagt
     etwas, das man wissen muss, und darf deshalb nicht ganz verschwinden. */
  .kommt, .pocht, .wartehinweis.laeuft { animation: none; }
  .kommt { opacity: 1; transform: none; }
  .laden a:hover, .laden a:focus-visible { transform: none; }
}

/* /guide: "Forgot your password?" als grosse Pille. Spezifischer als
   'a, a:visited', damit die Linkfarbe nicht durchschlaegt. */
a.reset-pille, a.reset-pille:visited {
  display: inline-block;
  padding: 14px 34px;
  border-radius: 999px;
  background: var(--akzent);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--akzent) 35%, transparent);
  transition: transform .18s ease, filter .18s ease;
}
a.reset-pille:hover, a.reset-pille:focus-visible { filter: brightness(1.1); transform: translateY(-2px); }
a.reset-pille:active { transform: scale(.98); }

@media (max-width: 700px) {
  .guide-kopf { font-size: 23px; }
  a.reset-pille { display: block; }
  .laden img { max-width: 46vw; height: auto !important; }
}

/* Der gefundene Einsatzort blinkt hell auf: zwei kurze Pulse, dann Ruhe.
   Nur wenn sich der Treffer aendert (registration.html).
   prefers-reduced-motion schaltet ab. */
@keyframes plz-aufblenden {
  0%   { background: color-mix(in srgb, var(--akzent) 45%, transparent); }
  100% { background: transparent; }
}
#plzhinweis.gefunden {
  animation: plz-aufblenden 0.7s ease-out 2;
  border-radius: 6px;
  padding: 2px 6px;
  margin-left: -6px;
}
@media (prefers-reduced-motion: reduce) {
  #plzhinweis.gefunden { animation: none; }
}

/* ==========================================================================
   Das Hinweisband: der Notfall-Kasten ueber jeder Seite (data/hinweis.txt,
   hinweis() in app.py). Nicht rot: es ist meistens eine Lage, keine
   Stoerung, und ein Band, das immer nach Alarm aussieht, wird ueberlesen.
   position: static, absichtlich: ein klebendes Band nimmt am Telefon ein
   Drittel des Formulars weg.
   ========================================================================== */
.hinweisband {
  margin: 0;
  padding: 11px 18px;
  background: color-mix(in srgb, var(--akzent) 16%, var(--flaeche));
  border-bottom: 1px solid color-mix(in srgb, var(--akzent) 45%, transparent);
  color: var(--schrift);
  font-size: .93rem;
  line-height: 1.45;
  text-align: center;
  white-space: pre-line;   /* Zeilenumbrueche aus der Datei bleiben */
}

/* color-mix kennt nicht jeder Browser. Ohne diesen Rueckfall stuende das
   Band ohne Hintergrund da, also unsichtbar auf der Seite. */
@supports not (background: color-mix(in srgb, red 10%, blue)) {
  .hinweisband {
    background: var(--flaeche);
    border-bottom: 1px solid var(--akzent);
  }
}

/* Wer gerade in einem Call sitzt, auf /apex/calls: untereinander, ab drei
   Leuten war die Zeile mit Komma nicht lesbar. Nicht .kuerzel: das ist fuer
   Laenderkuerzel gemacht. */
ul.leute {
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}
ul.leute li {
  padding: 1px 0;
  line-height: 1.5;
}
ul.leute .person {
  color: var(--schrift);
  font-size: 13px;
}

/* ==========================================================================
   /faq: die Kacheln. Die Kachel ist ein <details> (templates/faq.html):
   vorne Frage und Plus, hinten das Blatt als feste Ebene ueber der Seite.
   Der Vorhang ist das ::after des summary: ein Tipp daneben schliesst, ohne
   Skript. Drei in einer Reihe, fest; unter 900 px zwei. Die Seite traegt
   body.landung: dieselbe Europakarte wie die Startseite.
   ========================================================================== */
.faq-main {
  max-width: 1240px;
  padding: 30px 24px 60px;
}
/* Ein div, kein <header>: die Verwaltung stylt header global (klebender
   Kopf mit Zeile und Glas), und das saehe hier nach Apex aus. */
.faq-kopf { text-align: center; margin: 6px 0 30px; }
.faq-kopf .landung-augenbraue { margin-top: 0; }
.faq-titel { font-size: clamp(40px, 7vw, 64px); margin-bottom: 8px; }
.faq-unter { margin-bottom: 0; }
.faq-unter a { color: var(--link); }

.faq-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0;
}

/* Die Kachel selbst ist nur der Rahmen: ohne Glas, ohne Bewegung.
   backdrop-filter und transform machen ein Element zum Bezugsblock fuer
   position:fixed; laege beides auf der Kachel, saesse das Blatt in der
   Kachel statt ueber der Seite. Glas und Hover tragen darum die FLAECHE,
   ein span im summary. */
.faq-karte {
  --sea-ton: #17a094;
  position: relative;
  aspect-ratio: 1 / 1;
}
.faq-karte:nth-child(3n + 1) { --sea-ton: #4b86df; }
.faq-karte:nth-child(3n + 2) { --sea-ton: #17a094; }
.faq-karte:nth-child(3n + 3) { --sea-ton: #8e6ede; }

/* Das summary ist die ganze Vorderseite, unsichtbar fuer sich. */
.faq-deckel {
  position: absolute;
  inset: 0;
  display: block;
  cursor: pointer;
  list-style: none;
  color: var(--schrift);
}
.faq-deckel::-webkit-details-marker { display: none; }
.faq-deckel::marker { content: ""; }

/* Die Flaeche: Glas, Kante, Hover. Nummer oben, Frage unten, Plus in der
   Ecke. */
.faq-flaeche {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px 24px 24px;
  border-radius: 26px;
  overflow: hidden;
  background: rgba(10, 22, 46, .58);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .10),
              0 24px 48px -30px rgba(0, 0, 0, .8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.faq-karte:hover .faq-flaeche {
  transform: translateY(-3px);
  background: rgba(14, 30, 60, .72);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22),
              0 30px 60px -30px rgba(0, 0, 0, .9),
              0 0 40px -20px var(--sea-ton);
}
/* Die obere Kante traegt den Ton, wie die Kacheln auf #/home, und dazu
   ein Schein in demselben Ton oben rechts: die Flaeche ist gross, und
   leer wirkte sie wie ein Loch. */
.faq-flaeche::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--sea-ton), transparent 85%) top / 100% 3px no-repeat,
    radial-gradient(60% 55% at 88% 6%, color-mix(in srgb, var(--sea-ton) 26%, transparent), transparent 70%);
  opacity: .95;
  pointer-events: none;
}
/* Die Geisterzahl: gross, fast unsichtbar, oben rechts. Sie gibt der
   Kachel Gewicht, ohne der Frage etwas wegzunehmen. */
.faq-flaeche::after {
  content: attr(data-nr);
  position: absolute;
  right: 18px;
  top: 4px;
  font-size: clamp(96px, 11vw, 150px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.05em;
  color: rgba(255, 255, 255, .055);
  pointer-events: none;
}
.faq-karte:hover .faq-flaeche::after { color: color-mix(in srgb, var(--sea-ton) 22%, transparent); }
/* Ein Deckelbild (static/faq/<kennung>/deckel.*) liegt hinter der Frage,
   mit einem Verlauf darueber, damit die Schrift lesbar bleibt. */
.faq-flaeche.mit-bild {
  background: linear-gradient(180deg, rgba(10, 16, 36, .10) 0%, rgba(10, 16, 36, .82) 70%),
              var(--deckel) center / cover no-repeat;
}
.faq-nr {
  position: absolute;
  left: 22px;
  top: 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--sea-ton);
}
.faq-frage {
  display: block;
  padding-right: 58px;
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.012em;
  color: #fff;
}
/* Das Plus: ein runder Knopf, zwei Balken. Offen dreht es sich zum Kreuz. */
.faq-plus {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(180deg, #7ff0e2 0%, #17a094 100%);
  box-shadow: 0 10px 24px -10px rgba(23, 160, 148, .95),
              inset 0 0 0 1px rgba(255, 255, 255, .18);
  transition: transform .25s ease, filter .18s ease;
}
.faq-plus::before,
.faq-plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2.5px;
  border-radius: 2px;
  background: #04231f;
  transform: translate(-50%, -50%);
}
.faq-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-karte:hover .faq-plus { transform: scale(1.06); filter: brightness(1.06); }
.faq-karte[open] .faq-plus { transform: rotate(45deg); }
.faq-deckel:focus-visible {
  outline: 2px solid #6fe3d6;
  outline-offset: 3px;
}

/* DAS BLATT. Zu: gar nicht da. Offen: eine feste Ebene ueber allem, das
   Blatt mittig, dahinter der Vorhang (::after des summary, damit ein
   Tipp daneben schliesst). z-index ueber dem Kopf der Verwaltung (der
   traegt 20). */
.faq-blatt { display: none; }
.faq-karte[open] > .faq-deckel::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(4, 10, 24, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 0;
}
.faq-karte[open] .faq-blatt {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 61;
  padding: 24px;
  pointer-events: none;
}
.faq-blatt-innen {
  position: relative;
  width: min(760px, 100%);
  max-height: min(88vh, 900px);
  overflow-y: auto;
  padding: 34px 38px 36px;
  border-radius: 26px;
  background: rgba(13, 24, 50, .96);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14),
              0 40px 90px -30px rgba(0, 0, 0, .9);
  color: var(--schrift);
  pointer-events: auto;
  animation: faq-auf .22s ease-out;
}
@keyframes faq-auf {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-blatt-innen { animation: none; }
  .faq-karte, .faq-plus { transition: none; }
}
html.faq-offen { overflow: hidden; }
.faq-blatt-nr {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  color: #6fe3d6;
}
.faq-blatt-innen h2 {
  margin: 0 0 14px;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
  letter-spacing: -.015em;
  color: #fff;
}
.faq-antwort {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(243, 244, 246, .84);
}
.faq-antwort a { color: var(--link); }
.faq-zu {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.faq-zu:hover { background: rgba(255, 255, 255, .16); }
.faq-zu:focus-visible { outline: 2px solid #6fe3d6; outline-offset: 2px; }

/* Bilder und Videos beim Oeffnen. Nebeneinander, wenn Platz ist; ein
   Hochkantvideo vom Telefon wird ueber die HOEHE begrenzt, nicht die
   Breite, sonst fuellte es das ganze Blatt. */
.faq-medien {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 22px;
}
.faq-medien figure { margin: 0; max-width: 100%; }
.faq-medien img,
.faq-medien video {
  display: block;
  max-width: 100%;
  max-height: 62vh;
  width: auto;
  height: auto;
  border-radius: 16px;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12),
              0 24px 48px -30px rgba(0, 0, 0, .9);
}
.faq-fuss { margin: 26px 0 0; text-align: center; }
.faq-fuss a { color: var(--link); }

@media (max-width: 900px) {
  .faq-raster { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .faq-flaeche { padding: 16px 16px 18px; }
  .faq-flaeche::after { font-size: 64px; right: 12px; top: 2px; }
  .faq-nr { left: 16px; top: 12px; font-size: 12px; }
  .faq-frage { font-size: 16px; padding-right: 0; margin-bottom: 44px; }
  .faq-plus { right: 12px; bottom: 12px; width: 40px; height: 40px; }
  .faq-blatt-innen { padding: 26px 20px 24px; max-height: 90vh; }
  .faq-karte[open] .faq-blatt { padding: 12px; }
  .faq-zu { right: 10px; top: 10px; }
}

/* ==========================================================================
   Die Handy-Startseite im Kleid der Startseite: /mobile_guide
   (templates/mobil.html) holt die Gestalt aus lab/brand/anmeldeseite.css
   (sea-l-*, sea-l-handy-seite). Hier bleibt nur der Grund: body.landung mit
   Europakarte und Schleiern; mystisch und hell-leise bleiben daneben. Von
   .landung-* bleiben Augenbraue, Claim und Unterzeile fuer /faq.
   Ueberschrieben: body::before (Farbschleier) geht aus, body::after wird
   ein ruhiger Schleier von oben und unten.
   ========================================================================== */
body.landung {
  --grund: #141d3a;
  --flaeche: rgba(10, 22, 46, .62);
  --flaeche-2: rgba(255, 255, 255, .08);
  --linie: rgba(255, 255, 255, .14);
  --link: #6fe3d6;
  --schatten:
    0 0 0 1px rgba(255, 255, 255, .10),
    0 24px 48px -30px rgba(0, 0, 0, .8);
  /* 68 % statt Mitte: hochkant zeigt 'cover' sonst nur das leere Navy links,
     die Karte bleibt am Rand. So ist etwas von ihr da, ohne den Text zu stoeren. */
  background: #141d3a url(/brand/anmelde-hintergrund-karte.jpg) 68% 50% / cover fixed no-repeat;
}
/* Die Telefone ragen ueber das Banner hinaus: kein Rollen zur Seite. */
body.landung { overflow-x: hidden; }
body.landung::before { display: none; }
body.landung::after {
  opacity: 1;
  background-image: linear-gradient(180deg,
    rgba(10, 16, 36, .62) 0%, rgba(10, 16, 36, .18) 30%,
    rgba(10, 16, 36, .18) 60%, rgba(10, 16, 36, .66) 100%);
}

/* Augenbraue, Claim, Unterzeile: der Kopf von /faq (faq.html). Dieselben
   Werte wie .sea-l-augenbraue/-claim/-unter in lab/brand/anmeldeseite.css. */
.landung-augenbraue {
  margin: 14px 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6fe3d6;
}

.landung-claim {
  margin: 0 0 10px;
  font-weight: 800;
  font-size: clamp(28px, 8vw, 36px);
  line-height: 1.06;
  letter-spacing: -.022em;
  color: #ffffff;
  background: linear-gradient(96deg, #ffffff 0%, #d5f2ee 44%, #6fe3d6 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body.landung .landung-claim { color: transparent; }
}

.landung-unter {
  margin: 0 auto 22px;
  max-width: 40ch;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(243, 244, 246, .78);
}

/* ==========================================================================
   /apex/faq: die FAQ-Redaktion. Je Karte ein Kasten: Kopf (Nummer,
   Kennung, Pfeile), Text, Medien (Raster, Hochladen), unten leise das
   Loeschen. Klassen .faqred-*, Vorlage templates/faq_redaktion.html.
   ========================================================================== */
.faqred-hilfe { margin: 0 0 18px; padding: 14px 18px; }
.faqred-hilfe summary { cursor: pointer; }
.faqred-tabelle { margin: 10px 0 0; border-collapse: collapse; }
.faqred-tabelle td { padding: 4px 14px 4px 0; vertical-align: top; }
.faqred-liste { display: grid; gap: 18px; }
.faqred-karte { padding: 18px 22px 16px; }
.faqred-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.faqred-nr { font-weight: 750; letter-spacing: .12em; color: var(--tuerkis); }
.faqred-kennung { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
.faqred-ordnen { margin-left: auto; }
.faqred-ordnen form { display: inline-flex; gap: 4px; }
.faqred-ordnen button { min-width: 36px; padding: 5px 8px; }
.faqred-text { display: grid; gap: 10px; }
.faqred-text label { display: grid; gap: 4px; font-size: 13px; color: var(--schrift-leise); }
.faqred-text input, .faqred-text textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 14.5px;
  color: var(--schrift);
  background: var(--flaeche-2);
  border: 1px solid var(--linie);
  border-radius: 8px;
  padding: 8px 10px;
}
.faqred-text textarea { resize: vertical; line-height: 1.5; }
.faqred-tat { margin: 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.faqred-medien { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--linie); }
.faqred-medien h2 { margin: 0 0 10px; }
.faqred-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin: 0 0 12px;
}
.faqred-datei {
  margin: 0;
  padding: 8px;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: var(--flaeche-2);
}
.faqred-datei.deckel { border-color: var(--tuerkis); box-shadow: inset 0 0 0 1px var(--tuerkis); }
.faqred-datei img, .faqred-datei video {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  background: #000;
}
.faqred-datei figcaption { margin-top: 6px; display: grid; gap: 4px; }
.faqred-name { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faqred-datei form { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.faqred-datei form button { padding: 4px 8px; font-size: 12.5px; }
.faqred-datei .tag { font-size: 11.5px; }
button.gefahr-leise { color: var(--warn); }
.faqred-hochladen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.faqred-hochladen input[type="file"] { font: inherit; font-size: 13.5px; color: var(--schrift); }
.faqred-loeschen { margin-top: 14px; }
.faqred-loeschen summary { cursor: pointer; font-size: 13px; }
.faqred-loeschform { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 8px; }
.faqred-loeschform label { display: grid; gap: 4px; font-size: 13px; color: var(--schrift-leise); }
.faqred-loeschform input {
  font: inherit; color: var(--schrift); background: var(--flaeche-2);
  border: 1px solid var(--linie); border-radius: 8px; padding: 7px 10px;
}
.faqred-neu { margin-top: 22px; }
.faqred-neu h2 { margin-top: 0; }

/* ------------------------------------------------------------------------
   Kurzbegriff mit ?: Ansage Cedric 28.09. "Apex-Beschreibungen abkuerzen,
   ein, zwei Woerter, der Text im Hover". Der Langtext bleibt als Kind im
   HTML (kein title-Attribut): Links darin bleiben klickbar, verify findet
   ihn weiter, und auf dem Telefon oeffnet ein Tippen (tabindex, :focus).
     <span class="hilfe" tabindex="0">?<span class="hilfe-text">Lang</span></span>
   ------------------------------------------------------------------------ */
.hilfe {
  position: relative; display: inline-flex; align-items: center;
  justify-content: center; width: 17px; height: 17px; margin-left: 4px;
  border-radius: 50%; border: 1px solid var(--linie); cursor: help;
  font-size: 11px; font-weight: 700; line-height: 1; vertical-align: 1px;
  color: var(--schrift-leise); background: var(--flaeche);
}
.hilfe:hover, .hilfe:focus { color: var(--akzent); border-color: var(--akzent);
  outline: none; }
.hilfe-text {
  display: none; position: absolute; z-index: 50; top: calc(100% + 6px);
  left: -8px; width: max-content; max-width: min(360px, 80vw);
  padding: 9px 11px; border-radius: 10px; border: 1px solid var(--linie);
  background: var(--flaeche); color: var(--schrift); box-shadow: var(--schatten);
  font-size: 13px; font-weight: 400; line-height: 1.45; text-align: left;
  white-space: normal; cursor: auto;
}
.hilfe:hover .hilfe-text, .hilfe:focus .hilfe-text,
.hilfe:focus-within .hilfe-text { display: block; }
/* Rechts am Rand klappt der Text nach links auf. */
.hilfe.links .hilfe-text { left: auto; right: -8px; }