/* Evo-Verwaltung - Bausteine auf den ecotel-Tokens.
   Was hier steht, ist NUR das, was das Design-System nicht abdeckt:
   Formularzeilen, Meldungen, Tabellen. Farben und Abstaende kommen
   ausnahmslos aus den Variablen - eine hier eingetragene Farbe waere
   die eine, die beim naechsten Markenwechsel stehen bleibt. */

* { box-sizing: border-box; }

/* Sicherheitsnetz gegen seitliches Scrollen der GANZEN Seite - nicht
   nur der Tabellen (die haben ihren eigenen Rahmen, siehe
   .tabelle-scroll unten, und bleiben bewusst NORMAL umbrechend: eine
   Tabellenspalte soll in ihrem Scroll-Rahmen bequem breit bleiben,
   nicht wortweise auf drei Zeichen zusammengequetscht werden). Zwei
   Ebenen (html UND body), weil Safari auf iOS das nicht immer
   zuverlaessig von nur einer Ebene uebernimmt.
   KEIN body-weites overflow-wrap: break-word (Fehlversuch vom
   10.08.2026, per Screenshot auf einem echten iPhone gefunden) - das
   zwang JEDE Tabellenspalte zum vorzeitigen Umbruch, weil sich damit
   die geforderte width:100% schon durch haessliches Zerhacken der
   Anliegen-Spalte erfuellen liess, statt die Tabelle komfortabel breit
   zu lassen und im eigenen Rahmen (.tabelle-scroll) seitlich scrollen
   zu lassen. Die eigentliche Gefahr (ein einzelnes, nicht umbrechbares
   langes Wort - URL, Connection-String) betrifft in der Praxis nur
   <code>/<pre> (siehe dort); normaler Flietext bricht an Leerzeichen
   ohnehin schon von selbst um. */
html { overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--fg-1);
  background: var(--bg-alt);
  overflow-x: hidden;
  max-width: 100vw;
}

/* ---- Kopfzeile ---------------------------------------------------- */
/* env(safe-area-inset-*) braucht viewport-fit=cover (siehe rahmen.html)
   und ist auf jedem Geraet ohne Notch/Dynamic Island/Home-Indicator
   einfach 0 - die calc() ist dann eine Rechnung mit Null, kein Fallback
   noetig. Betrifft nicht nur iPhones im Hochformat: im Querformat sitzt
   die Notch seitlich, deshalb auch links/rechts, nicht nur oben. */
.kopf {
  background: var(--grad-navy);
  color: var(--fg-on-dark);
  padding: calc(var(--space-4) + env(safe-area-inset-top))
           calc(var(--space-5) + env(safe-area-inset-right))
           var(--space-4)
           calc(var(--space-5) + env(safe-area-inset-left));
  display: flex;
  gap: var(--space-4);
  align-items: baseline;
  flex-wrap: wrap;
}
.kopf .marke {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-lg);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.kopf .marke a { color: var(--fg-on-dark); text-decoration: none; }
.kopf .marke a::after {
  content: "";
  display: inline-block;
  width: var(--space-2); height: var(--space-2);
  margin-left: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--accent);
}
.kopf .rolle { color: var(--fg-on-dark-2); font-size: var(--fs-sm); }
.kopf .wer { margin-left: auto; color: var(--fg-on-dark-2); font-size: var(--fs-sm); }
.kopf .wer a { color: var(--fg-on-dark); }

main {
  max-width: 68rem;
  margin: 0 auto;
  padding: var(--space-5)
           calc(var(--space-5) + env(safe-area-inset-right))
           var(--space-8)
           calc(var(--space-5) + env(safe-area-inset-left));
}

h1 { font-size: var(--fs-2xl); }
h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-lg);
  margin: var(--space-6) 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-hairline);
}
h2::before {
  content: "";
  display: inline-block;
  width: var(--space-1); height: 1em;
  margin-right: var(--space-3);
  vertical-align: -0.15em;
  background: var(--accent);
  border-radius: var(--radius-xs);
}

a { color: var(--link); }
.klein { font-size: var(--fs-sm); color: var(--fg-2); }
.marke-aus { color: var(--fg-2); }
code, pre {
  font-family: var(--font-mono); font-size: var(--fs-sm);
  background: var(--bg-alt); padding: 0 var(--space-1);
  border-radius: var(--radius-xs);
  /* Lange Werte (Pfade, Connection-Strings) UND lange Kommandozeilen
     (<pre>) brechen um statt die Seite zu verbreitern - <pre> ist von
     Haus aus white-space:pre (nie umbrechend, notfalls eigener
     Scrollbalken als letzter Ausweg), Monospace-Text bricht sonst auch
     mit dem body-weiten overflow-wrap manchmal nicht zuverlaessig um. */
  overflow-wrap: break-word;
  white-space: pre-wrap;
  overflow-x: auto;
}
pre { display: block; }

/* ---- Formular ----------------------------------------------------- */
/* ZWEI SPALTEN. Ein Eingabefeld ist selten breiter als eine halbe
   Zeile; einspaltig entsteht aus dreissig Feldern eine Kolonne, die man
   scrollen muss, statt sie zu ueberblicken. Nebeneinander passt eine
   ganze Gruppe auf einen Blick.

   Was nicht in eine halbe Zeile passt - lange Texte, Erklaerungen,
   Knopfleisten - bekommt in der Vorlage `breit` und nimmt beide
   Spalten. Unter 48rem faellt alles auf eine Spalte zurueck; zwei
   Spalten auf einem Telefon waeren zwei zu schmale. */
fieldset, .raster { border: 0; padding: 0; margin: 0; }
fieldset, .raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-5);
  align-items: start;
}
/* Ein Feld je Zeile statt zwei Spalten - fuer Gruppen, in denen
   Nebeneinander-Layout eher verwirrt als hilft (z.B. Sprachmodell +
   Ausweich-Sprachmodell: Anbieter, Modell und Endpunkt gehoeren
   inhaltlich zusammen und sollen sich lesen wie eine Liste). */
fieldset.einspaltig { grid-template-columns: minmax(0, 1fr); }
label { display: block; margin: 0; }
.breit, fieldset > .leiste, .raster > .leiste,
fieldset > p, .raster > p { grid-column: 1 / -1; }
label .titel {
  display: block; font-weight: 600; font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-1); color: var(--fg-1);
}
label .hinweis {
  display: block; font-size: var(--fs-xs); color: var(--fg-2);
  margin-top: var(--space-1); line-height: var(--lh-normal);
}
input[type=text], input[type=email], input[type=number], select, textarea {
  width: 100%;
  padding: var(--space-1) var(--space-3);
  line-height: var(--lh-normal);
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  color: var(--fg-1);
  background: var(--bg);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
textarea { min-height: 4rem; resize: vertical; line-height: var(--lh-normal); }
input[type=checkbox] { width: auto; margin-right: var(--space-2); accent-color: var(--accent); }

button, .knopf {
  font: inherit; font-weight: 600;
  padding: var(--space-2) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--ecotel-white);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease;
}
button:hover, .knopf:hover { box-shadow: var(--shadow-glow-orange); transform: translateY(-1px); }
button:active, .knopf:active { transform: translateY(0); }
button.zweit, .knopf.zweit {
  background: var(--bg);
  color: var(--ecotel-navy);
  border-color: var(--ecotel-gray-300);
}
button.zweit:hover, .knopf.zweit:hover {
  box-shadow: var(--shadow-1); border-color: var(--ecotel-navy);
}
.leiste { display: flex; gap: var(--space-3); margin-top: var(--space-3); flex-wrap: wrap; }

/* Kleine Aktionen in Tabellenzeilen (bearbeiten/loeschen/entfernen) -
   der volle Knopf waere in einer Tabellenzeile zu wuchtig. Eigene
   Klasse statt der bisherigen Inline-styles in den Vorlagen, DAMIT sich
   die Groesse fuer Touch-Bedienung ueberhaupt an einer Stelle anheben
   laesst (siehe @media (pointer: coarse) unten) - eine Inline-style
   liesse sich von aussen nicht mehr uebersteuern. */
.knopf-klein { padding: .2rem .5rem; text-decoration: none; }

/* ---- Meldungen ---------------------------------------------------- */
.meldung {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  margin: var(--space-4) 0;
  border-left: var(--space-1) solid;
  background: var(--bg);
  box-shadow: var(--shadow-1);
  line-height: var(--lh-normal);
}
.meldung.gut     { border-color: var(--ecotel-success); }
.meldung.schlecht{ border-color: var(--ecotel-error); }
.meldung.hinweis { border-color: var(--ecotel-warning); }

/* ---- Ampel (Dashboard) --------------------------------------------- */
.ampel {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  margin-right: var(--space-2);
  vertical-align: middle;
}
.ampel.gruen     { background: var(--ecotel-success); }
.ampel.gelb      { background: var(--ecotel-warning); }
.ampel.rot       { background: var(--ecotel-error); }
.ampel.unbekannt { background: var(--fg-2); opacity: .4; }

/* ---- Flaechen ----------------------------------------------------- */
.karte {
  background: var(--bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-3) 0;
}
/* Der einleitende Satz einer Karte gehoert zur Karte, nicht zum ersten
   Feld - deshalb kein zusaetzlicher Abstand nach unten. */
.karte > p:first-child { margin-top: 0; }

/* Zwei kleine Karten nebeneinander. Oeffnungszeiten und Kalender haben
   je ein Feld; untereinander verschenken sie eine halbe Bildschirmhoehe. */
.paar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}
.paar h2 { margin-top: 0; }

/* Wrapper, den rahmen.html per Skript um jede Tabelle legt (siehe dort -
   CSS kann keine Elemente einfuegen). Rundung/Schatten bleiben auf der
   TABELLE selbst (unveraendert unten) - der Wrapper macht nur den
   Scrollbalken, sonst wuerde die Kante beim seitlichen Scrollen
   mitwandern und eckig wirken. -webkit-overflow-scrolling:touch ist
   veraltet (moderne iOS-Safari scrollt Overflow-Container laengst mit
   Wischgeste-Schwung von selbst), schadet aber nicht und hilft noch auf
   ein paar aelteren iPads im Umlauf. */
.tabelle-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-3) 0;
  transition: box-shadow 150ms ease;
}
/* Schatten am Rand, gesetzt von rahmen.html anhand der tatsaechlichen
   Scrollposition (siehe dort) - "hier geht noch was" auf einen Blick,
   ohne dafuer erst zu wischen. Inset-Schatten statt eines Farbverlaufs,
   der die Hintergrundfarbe treffen muesste: eine Tabelle steckt mal in
   einer weissen .karte, mal direkt auf dem grauen Seitenhintergrund -
   ein Inset-Schatten legt sich ueber JEDEN Untergrund gleich, ohne
   dass man die Farbe je nachpflegen muesste. */
.tabelle-scroll.kann-rechts { box-shadow: inset -14px 0 10px -12px rgba(13, 23, 45, .22); }
.tabelle-scroll.kann-links  { box-shadow: inset  14px 0 10px -12px rgba(13, 23, 45, .22); }
.tabelle-scroll.kann-links.kann-rechts {
  box-shadow: inset -14px 0 10px -12px rgba(13, 23, 45, .22),
              inset  14px 0 10px -12px rgba(13, 23, 45, .22);
}
.tabelle-scroll table { margin: 0; }

/* Unter 40rem (ein Telefon, nicht mehr ein quergehaltenes iPad):
   Zeilen stapeln sich untereinander statt seitlich zu scrollen. Eine
   Telefonnummer oder ein voller Satz in der Anliegen-Spalte bleibt so
   ungekuerzt lesbar, ohne dass jemand wischen muss, um den Rest einer
   Zeile zu sehen - jede Zeile wird ihr eigener kleiner Abschnitt, jede
   Zelle zeigt ihre Spaltenueberschrift als Label darueber (data-label,
   von rahmen.html gesetzt). Der Scroll-Rahmen (.tabelle-scroll) bleibt
   technisch bestehen, wird hier aber gegenstandslos - eine gestapelte
   Tabelle ist nie breiter als ihr Rahmen, Schatten und Scrollbalken
   erscheinen deshalb erst gar nicht. */
/* ---- Mobil-Karten: Tabellenersatz fuer schmale Bildschirme ----------- */
/* ZWEI GETRENNTE MARKUP-BAEUME statt EINER Tabelle, die per CSS in ein
   Kartenlayout gezwungen wird - der urspruengliche Versuch (display:block
   auf table/tr/td) scheiterte zweimal an Eigenheiten, wie Browser
   Tabellen-Elemente intern behandeln (automatisch eingefuegtes <tbody>,
   das nicht mitgestellt wurde). <div> hat keine dieser Ueberraschungen.
   Die Vorlage rendert deshalb JEDE Tabelle mit einer echten Kopfzeile
   ZWEIMAL: als <table class="nur-breit"> (unveraendert, mit dem
   Scroll-Rahmen oben) und als <div class="nur-schmal mobil-karten">
   (eine Karte je Zeile, darin Label|Wert nebeneinander in zwei Spalten -
   genau das, um das Volker gebeten hat, statt jedes Feld einzeln
   untereinander zu stapeln). Nur EINE der beiden ist je nach Breite
   sichtbar; welche, entscheidet CSS allein, kein Javascript noetig. */
.nur-schmal { display: none; }
@media (max-width: 40rem) {
  .nur-breit { display: none; }
  .nur-schmal { display: block; }
}
.mobil-karten { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-3) 0; }
.mobil-karte {
  background: var(--bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  padding: var(--space-3) var(--space-4);
}
.mobil-feld {
  display: grid;
  grid-template-columns: minmax(5.5rem, 40%) 1fr;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-1) 0;
  border-bottom: var(--border-hairline);
  align-items: start;
}
.mobil-karte > .mobil-feld:last-child { border-bottom: 0; }
.mobil-feld .mobil-label {
  font-weight: 600; font-size: var(--fs-xs); color: var(--fg-2);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
}
/* Aktionen (Loeschen/Bearbeiten/Erledigt-Knoepfe) brauchen keine
   Label-Spalte - eine Karte ganz ohne Label nimmt die volle Breite. */
.mobil-feld.mobil-aktion { grid-template-columns: 1fr; }

table {
  width: 100%; border-collapse: collapse;
  background: var(--bg);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
th, td { text-align: left; padding: var(--space-3) var(--space-4);
         border-bottom: var(--border-hairline); }
th {
  font-size: var(--fs-xs); color: var(--fg-2);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  background: var(--bg-alt);
}
tr:last-child td { border-bottom: 0; }
tbody tr, table tr:not(:has(th)) {
  transition: background-color 120ms ease;
}
table tr:not(:has(th)):hover { background-color: var(--bg-alt); }

@media (max-width: 48rem) {
  fieldset, .raster, .paar { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 40rem) {
  main {
    padding: var(--space-5)
             calc(var(--space-4) + env(safe-area-inset-right))
             var(--space-8)
             calc(var(--space-4) + env(safe-area-inset-left));
  }
  .kopf .wer { margin-left: 0; width: 100%; }
  /* Zustand + Uebernehmen-Knopf: nebeneinander wird auf einem Telefon
     eng, das Auswahlfeld hat oft laengere Texte als noch Platz fuer
     einen Knopf daneben bleibt. Untereinander, Knopf ueber volle
     Breite - leichter zu treffen und nichts wird abgeschnitten. */
  .zustandsleiste { flex-direction: column; align-items: stretch; }
  .zustandsleiste label { flex: none; }
  .zustandsleiste button { margin-bottom: 0; }
}

/* ---- Umgebungswerte ------------------------------------------------ */
/* Zwei Spalten, links der Name. Die Tabelle steht in einer Karte und
   braucht deshalb keinen eigenen Schatten. */
.karte h3 {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-2);
  margin: var(--space-4) 0 var(--space-2);
}
.karte h3:first-of-type { margin-top: var(--space-2); }
.karte table { box-shadow: none; border-radius: 0; }
.karte table td { padding: var(--space-1) var(--space-3); }
.karte table td:first-child { width: 18rem; }

/* ---- Wochenraster --------------------------------------------------- */
/* Sieben Zeilen, zwei Zeitspannen je Tag. FRUEHER eine <table> (der
   Zusammenhang "diese Uhrzeit gehoert zu diesem Tag" ist tabellarisch),
   seit 10.08.2026 bewusst NICHT mehr: ein einziges Formular mit vielen
   benannten Feldern laesst sich - anders als die reinen Anzeige-
   Tabellen im Rest der Oberflaeche - nicht ein zweites Mal fuers
   Mobil-Layout rendern, ohne doppelte Feldnamen zu erzeugen. CSS Grid
   plus display:contents baut dieselbe optische Tabelle nach, ganz ohne
   Tabellen-Elemente und damit ohne deren Eigenheiten (siehe die zwei
   gescheiterten Anlaeufe mit table/tr/td weiter oben in der
   Versionsgeschichte). Was die Tabellensemantik vorher fuer
   Screenreader leistete, tragen jetzt aria-label an jedem Feld
   (mandant.html). */
.wochenraster {
  background: var(--bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  padding: var(--space-2) var(--space-4);
  display: grid;
  grid-template-columns: 3rem auto 1fr 1fr;
  gap: var(--space-2) var(--space-4);
  align-items: center;
}
.wochenraster-kopfzelle {
  font-size: var(--fs-xs); color: var(--fg-2);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
}
/* display:contents loest die Zeile optisch auf - ihre vier Kinder
   werden zu direkten Gitterzellen des Wochenraster-Grids und landen
   dadurch in denselben vier Spalten wie die Kopfzeile darueber, ohne
   dass die Zeile selbst einen eigenen Rahmen braucht. */
.wochentag-zeile { display: contents; }
.wochentag-name { font-weight: 600; font-size: var(--fs-sm); }
.wochentag-feld { display: flex; align-items: center; gap: var(--space-2); }
.wochenraster-label {
  display: none;
  font-size: var(--fs-xs); color: var(--fg-2);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
}
.wochenraster input[type=time] { padding: 2px var(--space-2); width: auto; }
.wochenraster .spanne { display: flex; align-items: center; gap: var(--space-2); }
.wochenraster .spanne span { font-size: var(--fs-xs); color: var(--fg-2); }
/* Ein geschlossener Tag tritt zurueck, ohne unlesbar zu werden. */
.wochentag-zeile:not(:has(input:checked)) .spanne input { opacity: .55; }

@media (max-width: 40rem) {
  /* Eine Spalte statt vier: jeder Tag wird sein eigener kleiner
     Abschnitt, display:contents faellt wieder weg (die Zeile braucht
     jetzt selbst eine Box), und jedes Feld bekommt sein Label sichtbar
     vorangestellt, weil die Kopfzeile darueber (die es sonst ersetzt)
     ausgeblendet ist. */
  .wochenraster { grid-template-columns: minmax(0, 1fr); }
  .wochenraster-kopfzelle { display: none; }
  .wochentag-zeile {
    display: block;
    padding: var(--space-2) 0;
    border-bottom: var(--border-hairline);
  }
  .wochentag-zeile:last-child { border-bottom: 0; }
  .wochentag-name { margin-bottom: var(--space-1); }
  .wochentag-feld { flex-wrap: wrap; padding: 2px 0; }
  .wochenraster-label { display: block; width: 100%; }
}

/* ---- Zustandsleiste ------------------------------------------------- */
/* Eine Zeile, kein Kasten: der Zustand ist eine Entscheidung und keine
   Einstellung unter vielen. Er steht deshalb ueber allem anderen und
   nimmt trotzdem nur die Hoehe, die er braucht. */
.zustandsleiste {
  display: flex; align-items: flex-end; gap: var(--space-3);
  margin: 0 0 var(--space-5);
  /* Ohne dies wird die Zeile bei einem breiten <select> (lange
     Zustandstexte) auf einem iPad NIE schmaler als der Inhalt
     verlangt, egal was flex-shrink sagt - Flex-Kinder duerfen von
     Haus aus nicht unter ihre Inhaltsbreite schrumpfen. Grid loest das
     hier schon ueberall mit minmax(0, 1fr) (siehe .raster/.paar
     oben); flex-wrap:wrap ist das Gegenstueck fuer eine Zeile: reicht
     der Platz nicht, faellt der Knopf in die naechste Zeile statt die
     Seite zu verbreitern. Gilt auf JEDER Breite, nicht nur unterhalb
     des Umbruchpunkts unten - der raet nur eine typische Handybreite,
     dieser Schutz braucht keine Vermutung. */
  flex-wrap: wrap;
}
.zustandsleiste label { margin: 0; flex: 0 1 26rem; min-width: 0; }
.zustandsleiste button { margin-bottom: 1px; }

/* ---- Aufklappbare Abschnitte ---------------------------------------- */
/* <details>/<summary> statt Javascript fuers Auf- und Zuklappen selbst -
   Tastatur und Screenreader koennen das von Haus aus. Nur der oberste
   Abschnitt ist beim ersten Aufruf offen (siehe die Vorlagen); welche
   offen sind, merkt sich rahmen.html ueber einen Seitenwechsel hinweg,
   damit ein Speichern oder Loeschen nicht den gerade offenen Abschnitt
   wieder zuklappt. */
details.abschnitt { margin-top: var(--space-6); }
details.abschnitt:first-of-type { margin-top: 0; }
details.abschnitt > summary {
  cursor: pointer;
  list-style: none;
}
details.abschnitt > summary::-webkit-details-marker { display: none; }
details.abschnitt > summary h2 { margin-top: 0; }
details.abschnitt > summary h2::after {
  content: "\25B8";
  float: right;
  color: var(--fg-2);
  display: inline-block;
  transition: transform 150ms ease;
}
details.abschnitt[open] > summary h2::after { transform: rotate(90deg); }
details.abschnitt > summary:hover h2::after { color: var(--accent); }
details.abschnitt > summary:focus-visible h2 {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- Anmeldeseite ---------------------------------------------------- */
/* Die einzige Seite ohne Kopfzeile (kein zugang) - deshalb der einzige
   Ort im Haus, an dem der erste Eindruck ausschliesslich von dieser
   Karte kommt. Zweigeteilt: eine Markenflaeche in der Navy-Verlaufsfarbe
   (--grad-navy, sonst nur in der Kopfzeile verwendet) und das
   eigentliche Formular auf Weiss. */
.anmelde-wrapper {
  min-height: 65vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.anmelde-karte {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 22rem);
  max-width: 40rem;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-3);
}
.anmelde-marke {
  background: var(--grad-navy);
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
}
.anmelde-logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-3xl);
  letter-spacing: var(--tracking-tight);
}
.anmelde-formular { background: var(--bg); padding: var(--space-6) var(--space-5); }
.anmelde-formular > p:first-child { margin-top: 0; }
@media (max-width: 40rem) {
  .anmelde-karte { grid-template-columns: minmax(0, 1fr); }
  .anmelde-marke { padding: var(--space-5); }
}

/* ---- Navigationsleiste ------------------------------------------------ */
/* Kurze Liste von Verweisen auf Nebenseiten (Plattform, Rechnungen, ...) -
   als Pillen statt durch Mittelpunkte getrenntem Fliesstext, damit sie
   als anklickbare Ziele erkennbar sind, nicht als Satz. */
.navleiste { display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin: 0 0 var(--space-5); }
.navleiste a {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--fg-1);
  font-size: var(--fs-sm);
  font-weight: 600;
  box-shadow: var(--shadow-1);
  border: none;
  transition: box-shadow 150ms ease, color 150ms ease;
}
.navleiste a:hover { color: var(--accent); box-shadow: var(--shadow-2); }

/* ---- Handbuchleiste ------------------------------------------------- */
/* Nachschlagewerk, keine Funktion: eine Zeile mit Verweisen, die nicht
   um Aufmerksamkeit konkurriert. Das PDF-Zeichen macht vorab klar, dass
   ein neues Fenster aufgeht. */
.handbuchleiste { display: flex; flex-wrap: wrap; gap: var(--space-4);
  margin: 0 0 var(--space-5); font-size: var(--fs-sm); }
.handbuchleiste a { color: var(--fg-2); text-decoration: none;
  border-bottom: var(--border-strong); padding-bottom: 1px; }
.handbuchleiste a:hover { color: var(--accent);
  border-bottom-color: currentColor; }
.handbuchleiste a::before { content: "PDF"; font-size: .7em;
  letter-spacing: .08em; margin-right: .45em; padding: .1em .3em;
  border: 1px solid currentColor; border-radius: 2px; opacity: .6;
  vertical-align: 1px; }

/* ---- Touch-Bedienung (iPhone/iPad, Fingerspitze statt Mauszeiger) --- */
/* (pointer: coarse) statt einer Bildschirmbreite: ein iPad im Querformat
   ist oft breiter als die 48rem/40rem-Umbruchpunkte oben, wird aber
   trotzdem mit dem Finger bedient - die Buendigkeit sitzt hier an der
   EINGABEART, nicht an der Fensterbreite. Apples eigene Vorgabe fuer ein
   bequem treffbares Ziel liegt bei 44x44pt; die Werte unten kommen dem
   nahe, ohne die kompakten Tabellenzeilen zu sprengen. */
@media (pointer: coarse) {
  a, button, .knopf, summary { -webkit-tap-highlight-color: transparent; }

  .navleiste a, .handbuchleiste a {
    padding: var(--space-2) var(--space-4);
  }
  .knopf-klein { padding: .55rem .8rem; }
  input[type=checkbox] { width: 1.15rem; height: 1.15rem; }
  details.abschnitt > summary { padding: var(--space-2) 0; }
}