/**
 * SprachenPortal – Verwaltung, Mitgliederbereich und Anmeldung.
 *
 * Baut auf assets/css/alpasana-design.css auf. Dort stehen Farben,
 * Schriften, Radien und Schatten der Marke; hier stehen nur die
 * Bausteine, die es im Designsystem nicht gibt – Kopfleiste mit Menü,
 * Kacheln, Tabellen, Statusmarken.
 *
 * Regel: Werte NICHT hart eintragen, sondern die --alp-*-Variablen
 * verwenden. Dann genügt für eine neue Fassung der Marke der Austausch
 * der einen Datei.
 *
 * Die Klassennamen bleiben deutsch wie im übrigen Projekt. Sie stehen in
 * den PHP-Vorlagen; ein Umbenennen auf .alp-* brächte optisch nichts.
 */

/* ------------------------------------------------------------------
   Ergänzende Tokens

   Das Designsystem kennt keine Statusfarben (offen, gesperrt, bezahlt)
   und keine zweite Flächenstufe für Tabellenköpfe. Beides kommt hier
   dazu, in derselben Sprache.

   Die Textfarbe auf den hellen Statusflächen ist jeweils gegen WCAG AA
   geprüft (4.5:1). --alp-muted ist dafür zu hell – das Designsystem
   vermerkt das inzwischen selbst und hält die Farbe für Platzhalter
   und Dekoration frei.
   ------------------------------------------------------------------ */
:root {
    --flaeche-tief:   #f2f5f9;
    --linie-kraeftig: #cfd5df;

    --blau-hell:  #e7f3fa;
    --gruen:      #1e7a4b;
    --gruen-hell: #e4f2ea;
    --amber:      #8a5600;
    --amber-hell: #fdf1dd;
    --rot:        #b00020;
    --rot-hell:   #fbe8ea;
}

/* ------------------------------------------------------------------
   Grundgerüst
   ------------------------------------------------------------------ */

body.alp {
    background: var(--alp-bg-soft);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.inhalt {
    flex: 1;
    width: 100%;
    max-width: var(--alp-container);
    margin: 0 auto;
    padding: 40px 20px 72px;
}

/* ------------------------------------------------------------------
   Seitenkopf

   Vorspann über der Überschrift, wie .alp-section-label mit
   vorangestelltem «//». Er sagt, in welchem Bereich man sich befindet -
   die Überschrift sagt nur, auf welcher Seite.
   ------------------------------------------------------------------ */

.seitenkopf {
    margin-bottom: 32px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--alp-border);
}

.seitenkopf__vorspann {
    font-family: var(--alp-font-head);
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    /* --alp-blue-deep, nicht --alp-blue-dark: Der Vorspann steht auf
       --alp-bg-soft, dort erreicht das hellere Blau nur 4.29:1. */
    color: var(--alp-blue-deep);
    margin: 0 0 6px;
}

.seitenkopf__vorspann::before { content: '// '; }

.alp h1 {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    text-transform: uppercase;
    letter-spacing: .01em;
    margin: 0;
}

.seitenkopf + * { margin-top: 0; }

.alp h2 {
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--alp-text);
    margin: 40px 0 16px;
}

/* Abschnittskopf: Überschrift links, Verweis auf die volle Liste
   rechts. Die Haarlinie darunter trennt die Abschnitte sichtbar - auf
   der Übersicht stehen drei davon untereinander, und ohne Linie
   verschwimmen Kacheln, Balken und Tabelle zu einer Fläche. */
.abschnitt-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 34px 0 16px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--alp-border);
}

/* Der erste Abschnittskopf braucht keinen Abstand nach oben - die
   Linie des Seitenkopfs setzt ihn schon. Ausdruecklich hier, weil
   `.seitenkopf + *` es nicht schafft: `.abschnitt-kopf` ist gleich
   spezifisch und steht spaeter. */
.seitenkopf + .abschnitt-kopf { margin-top: 0; }

.alp .abschnitt-kopf h2 { margin: 0; }

/* ------------------------------------------------------------------
   Kopfleiste

   Wie .alp-header im Designsystem: weiss, klebend, 84 Pixel hoch. Das
   Menü steht rechts, damit die Wortmarke links für sich steht.
   ------------------------------------------------------------------ */

.kopfleiste {
    background: var(--alp-bg);
    border-bottom: 1px solid var(--alp-border);
    position: sticky;
    top: 0;
    z-index: 50;
}

.kopfleiste__innen {
    max-width: var(--alp-container);
    margin: 0 auto;
    padding: 12px 20px;
    min-height: 84px;
    display: flex;
    align-items: center;
    gap: 10px 24px;
    flex-wrap: wrap;
}

/* Das Menü steht auf einer eigenen Zeile unter Wortmarke und Konto.

   Vorher teilte es sich die Zeile mit beiden und wuchs auf den Rest
   (flex: 1). In der Verwaltung ging das nicht auf: Wortmarke (187),
   Menü (366) und Kontoblock (559) plus Abstände ergeben genau die 1160
   Pixel des Inhaltsbereichs - jede längere E-Mail-Adresse und jeder
   weitere Menüeintrag kippte «Migrationen» allein in eine zweite Zeile.
   Eine eigene Zeile ist auf jedem Bildschirm dieselbe Zeile und hängt
   nicht an der Länge einer Adresse. */
.menue {
    order: 3;
    width: 100%;
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
}

.menue a {
    font-family: var(--alp-font-head);
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--alp-heading);
    text-decoration: none;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    transition: color var(--alp-transition), border-color var(--alp-transition);
}

.menue a:hover { color: var(--alp-blue-dark); }

.menue a.ist-aktiv {
    color: var(--alp-blue-dark);
    border-bottom-color: var(--alp-blue);
}

/* Der Kontoblock hängt am rechten Rand der ersten Zeile. Er darf
   umbrechen, und die E-Mail-Adresse darf brechen: Ohne das schob eine
   Adresse wie «leandro.kueng@alpasana.ch» samt Rollenmarke und zwei
   Knöpfen die ganze Seite über den rechten Rand - auf dem Telefon um
   58 Pixel, gemessen bei 375 Pixel Bildschirmbreite. */
.konto {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-left: auto;
    min-width: 0;
    font-size: .86rem;
    color: var(--alp-text);
}

.konto__mail {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.konto form { margin: 0; }

/* ------------------------------------------------------------------
   Hinweisband unter der Kopfleiste
   ------------------------------------------------------------------ */

.band {
    background: var(--amber-hell);
    color: var(--amber);
    text-align: center;
    padding: 11px 20px;
    font-size: .89rem;
    border-bottom: 1px solid #f0dfbe;
}

.band a { color: inherit; }

.band code {
    background: rgba(138, 86, 0, .12);
    padding: .05rem .35rem;
    border-radius: 3px;
}

/* ------------------------------------------------------------------
   Kacheln – Kennzahlen auf der Übersicht

   Kompakter als zuvor: Die Übersicht traegt fuenf Kacheln, einen
   Verteilungsbalken, zwei weitere Kacheln und eine Tabelle. Mit 26er
   Innenabstand und 2.4rem-Zahlen reichte das ueber zwei Bildschirme,
   und «auf einen Blick» war es dann keiner mehr.
   ------------------------------------------------------------------ */

.kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(148px, 100%), 1fr));
    gap: 14px;
}

/* Zwei Kacheln sollen nicht über die volle Breite laufen - sie stünden
   sonst als riesige Flächen neben viel Nichts. */
.kacheln--zwei {
    grid-template-columns: repeat(auto-fit, minmax(min(148px, 100%), 250px));
    justify-content: start;
}

.kachel {
    position: relative;
    overflow: hidden;
    background: var(--alp-bg);
    border: 1px solid var(--alp-border);
    border-radius: var(--alp-radius-lg);
    box-shadow: var(--alp-shadow-sm);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: box-shadow var(--alp-transition), transform var(--alp-transition);
}

/* Schmaler Streifen an der linken Kante, in der Farbe der Kennzahl. */
.kachel::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--alp-blue);
    transition: width var(--alp-transition);
}

/* Verlinkte Kacheln führen in die gefilterte Liste. Sie erben Farbe und
   Schrift, damit sie wie eine Kachel aussehen und nicht wie ein Verweis.
   Das Anheben bleibt ihnen vorbehalten: Eine Kachel, die sich hebt, ohne
   dass ein Klick etwas bewirkt, verspricht etwas, das nicht kommt. */
a.kachel {
    text-decoration: none;
    color: inherit;
}

a.kachel:hover {
    box-shadow: var(--alp-shadow);
    transform: translateY(-2px);
    border-color: var(--alp-blue);
}

a.kachel:hover::before { width: 5px; }

a.kachel:focus-visible {
    outline: 3px solid var(--alp-blue);
    outline-offset: 2px;
}

/* Der Streifen nimmt die Farbe der Kennzahl auf. :has() wird von allen
   Zielbrowsern unterstuetzt; faellt es aus, bleibt der Streifen blau -
   das ist kein Verlust an Information, die Zahl ist ohnehin gefaerbt. */
.kachel:has(.kachel__zahl--gruen)::before { background: var(--gruen); }
.kachel:has(.kachel__zahl--amber)::before { background: var(--amber); }
.kachel:has(.kachel__zahl--rot)::before   { background: var(--rot); }
.kachel:has(.kachel__zahl--blau)::before  { background: var(--alp-blue-deep); }

/* Die Gesamtzahl ist keiner der vier Zustände, sondern deren Summe. Sie
   sitzt deshalb auf der dunklen Markenfläche und nicht auf Weiss: Die
   Reihe liest sich dann als «so viele insgesamt - und so verteilen sie
   sich», statt als fuenf gleichrangige Zahlen, unter denen man die
   Summe erst suchen muss.

   Die Beschriftung steht bei 72 Prozent Weiss - das ergibt auf
   --alp-dark noch 8:1 und bleibt damit deutlich über WCAG AA. */
.kachel--summe {
    background: var(--alp-dark);
    border-color: var(--alp-dark);
}

.kachel--summe::before { background: var(--alp-blue-bright); }
.kachel--summe .kachel__zahl { color: #fff; }
.kachel--summe .kachel__text { color: rgba(255, 255, 255, .72); }

.kachel__zahl {
    font-family: var(--alp-font-head);
    font-size: 2.05rem;
    font-weight: 700;
    line-height: 1.05;
    color: var(--alp-heading);
    font-variant-numeric: tabular-nums;
}

/* Für Kacheln, in denen ein Wort statt einer Zahl steht: «Freigeschaltet»
   in 2.05rem bricht um und wirkt plump. */
.kachel__zahl--wort {
    font-size: 1.15rem;
    letter-spacing: .01em;
}

/* Betraege sind laenger als Anzahlen: «CHF 12'480.00» braucht mehr
   Platz als «42» und liefe in einer 250er Kachel ueber die Kante. */
.kachel__zahl--betrag { font-size: 1.6rem; }

.kachel__zahl--gruen { color: var(--gruen); }
.kachel__zahl--amber { color: var(--amber); }
.kachel__zahl--rot   { color: var(--rot); }

/* «registriert» ist blau wie die zugehoerige Statusmarke - so heisst
   dieselbe Farbe in Kachel, Balken und Tabelle dasselbe. */
.kachel__zahl--blau  { color: var(--alp-blue-deep); }

/* margin-top: auto schiebt die Beschriftung an die Unterkante. Die
   Kacheln einer Reihe sind gleich hoch, die Kennzahlen darüber aber
   nicht gleich gross - ohne das stünden die Beschriftungen auf
   verschiedenen Höhen und die Reihe wirkte schief. */
.kachel__text {
    margin-top: auto;
    font-size: .74rem;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--alp-text);
}

/* ------------------------------------------------------------------
   Verteilungsbalken

   Die Kacheln nennen die Zahlen, der Balken zeigt das Verhaeltnis. Ob
   die Haelfte der Konten auf ihre Zahlung wartet oder eines von
   fuenfzig, steht so nicht mehr im Kopfrechnen.

   Er traegt keine eigene Information und ist deshalb aus dem
   Vorlesefluss heraus: Wer die Seite hoert, hat die Zahlen der Kacheln
   schon gehoert.
   ------------------------------------------------------------------ */

.verteilung {
    display: flex;
    height: 9px;
    margin-top: 14px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--flaeche-tief);
}

/* Mindestbreite: Ein gesperrtes Konto unter fuenfhundert waere sonst
   schmaler als ein Pixel und damit gar nicht da. */
.verteilung__teil { height: 100%; min-width: 3px; }

.verteilung__teil--gruen { background: var(--gruen); }
.verteilung__teil--blau  { background: var(--alp-blue-deep); }
.verteilung__teil--amber { background: var(--amber); }
.verteilung__teil--rot   { background: var(--rot); }

/* ------------------------------------------------------------------
   Filterleiste
   ------------------------------------------------------------------ */

.filter {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.filter a {
    font-family: var(--alp-font-head);
    font-weight: 600;
    font-size: .86rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--alp-heading);
    text-decoration: none;
    padding: 9px 18px;
    border: 2px solid var(--alp-border);
    border-radius: var(--alp-radius);
    background: var(--alp-bg);
    transition: all var(--alp-transition);
}

.filter a:hover {
    border-color: var(--alp-blue-dark);
    color: var(--alp-blue-dark);
}

.filter a.ist-aktiv {
    background: var(--alp-blue-dark);
    border-color: var(--alp-blue-dark);
    color: #fff;
}

/* F7: Filterleiste mit drei Feldern statt einer Reihe von Links.
   Der Knopf und das Zurücksetzen erben die bestehende Gestaltung aus
   .alp button[type="submit"] und .filter a. Die Beschriftungen nutzen
   --alp-heading und nicht --alp-muted: Letzteres ergibt auf Weiss nur
   2,6:1 und fiele durch WCAG AA. */
.filter--form { align-items: flex-end; }

.filter__feld {
    display: flex;
    flex-direction: column;
}

.filter__feld label {
    font-family: var(--alp-font-head);
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--alp-heading);
    margin-bottom: 5px;
}

.filter--form select,
.filter--form input[type="search"] {
    font-family: var(--alp-font-body);
    font-size: .95rem;
    padding: 9px 12px;
    min-width: 170px;
    border: 1.5px solid var(--alp-border);
    border-radius: var(--alp-radius);
    background: var(--alp-bg);
    color: var(--alp-heading);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.filter--form select:hover,
.filter--form input[type="search"]:hover { border-color: #c7d0dc; }

.filter--form select:focus,
.filter--form input[type="search"]:focus {
    outline: none;
    border-color: var(--alp-blue);
    box-shadow: 0 0 0 3px rgba(38, 156, 217, .16);
}

/* ------------------------------------------------------------------
   Tabellen
   ------------------------------------------------------------------ */

.tabelle-huelle {
    overflow-x: auto;
    background: var(--alp-bg);
    border: 1px solid var(--alp-border);
    border-radius: var(--alp-radius-lg);
    box-shadow: var(--alp-shadow-sm);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}

th, td {
    text-align: left;
    padding: 14px 18px;
    border-bottom: 1px solid var(--alp-border);
    white-space: nowrap;
}

/* Spaltenkopf einer Liste. */
thead th {
    font-family: var(--alp-font-head);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--alp-text);
    font-weight: 600;
    background: var(--flaeche-tief);
}

/* Beschriftung in einer Schluessel-Wert-Tabelle. Hier waere ein grauer
   Balken ueber die ganze linke Spalte zu laut - es ist eine Bezeichnung,
   kein Spaltenkopf. */
tbody th {
    font-family: var(--alp-font-body);
    font-weight: 600;
    font-size: .9rem;
    color: var(--alp-text);
    background: transparent;
    text-transform: none;
    letter-spacing: normal;
    width: 1%;
    padding-right: 32px;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--alp-bg-soft); }

td.zahl { font-variant-numeric: tabular-nums; text-align: right; }
td.referenz { font-family: ui-monospace, "Consolas", monospace; font-size: .82em; color: var(--alp-text); }
td.aktionen { text-align: right; }
td.aktionen form { margin: 0; display: inline; }

.leer-zelle { color: var(--alp-text); font-style: italic; }

/* ------------------------------------------------------------------
   Statusmarken
   ------------------------------------------------------------------ */

.status {
    display: inline-block;
    font-family: var(--alp-font-head);
    font-size: .74rem;
    padding: 3px 11px;
    border-radius: 999px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Kontostatus: die vier deutschen Werte des Pflichtenhefts. Die alten
   englischen bleiben aufgefuehrt, solange Migration 005 aussteht und in
   der Datenbank noch alte Werte stehen koennen. */
.status--aktiv,
.status--active,
.status--succeeded { background: var(--gruen-hell); color: var(--gruen); }

.status--zahlung_offen,
.status--pending   { background: var(--amber-hell); color: var(--amber); }

/* «registriert» ist noch kein Wartezustand, sondern der Anfang - deshalb
   sachlich blau und nicht amber wie eine offene Zahlung. --alp-bg-soft
   waere auf der weissen Tabelle kaum von ihr zu unterscheiden; --blau-hell
   mit --alp-blue-deep ergibt 5.45:1 und bleibt als Marke erkennbar. */
.status--registriert { background: var(--blau-hell); color: var(--alp-blue-deep); }

.status--gesperrt,
.status--suspended,
.status--failed    { background: var(--rot-hell); color: var(--rot); }

.status--refunded,
.status--canceled  { background: var(--flaeche-tief); color: var(--alp-text); }

.status--admin     { background: var(--blau-hell); color: var(--alp-blue-deep); }
.status--moderator { background: var(--amber-hell); color: var(--amber); }
.status--member    { background: var(--flaeche-tief); color: var(--alp-text); }

/* ------------------------------------------------------------------
   Meldungen

   Wie .alp-alert im Designsystem: Rahmen in der Signalfarbe, damit die
   Meldung auch ohne Farbwahrnehmung als abgesetzter Kasten erkennbar
   bleibt.
   ------------------------------------------------------------------ */

.meldung {
    border-radius: var(--alp-radius);
    padding: 13px 17px;
    font-size: .95rem;
    margin: 0 0 20px;
    border: 1px solid transparent;
}

.meldung--gut     { background: var(--gruen-hell); border-color: #b4dcc4; color: var(--gruen); }
.meldung--fehler  { background: var(--rot-hell);   border-color: #e7b4bb; color: var(--rot); }
.meldung--warnung { background: var(--amber-hell); border-color: #ead9b4; color: var(--amber); }

.meldung a { color: inherit; }

.feld-fehler {
    display: block;
    color: var(--rot);
    font-size: .82rem;
    margin-top: 6px;
}

.leer {
    background: var(--alp-bg);
    border: 1px dashed var(--linie-kraeftig);
    border-radius: var(--alp-radius-lg);
    padding: 44px 20px;
    text-align: center;
    color: var(--alp-text);
}

.summe { font-weight: 600; color: var(--alp-heading); }

.hinweis-klein {
    font-size: .84rem;
    color: var(--alp-text);
    margin-top: 12px;
    max-width: 68ch;
}

/* ------------------------------------------------------------------
   Knöpfe

   Grundform aus dem Designsystem (.alp-btn): Rajdhani, Grossbuchstaben,
   zwei Pixel Rahmen. Der Rahmen ist auch bei gefüllten Knöpfen da, nur
   durchsichtig - sonst springen sie beim Wechsel auf die Umriss-Form.
   ------------------------------------------------------------------ */

.alp button,
.alp .knopf-schlicht {
    font-family: var(--alp-font-head);
    font-weight: 600;
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    border-radius: var(--alp-radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--alp-transition);
}

.alp button[type="submit"] {
    background: var(--alp-blue-dark);
    color: #fff;
    padding: 13px 30px;
}

.alp button[type="submit"]:hover { background: var(--alp-blue-deep); }

.alp button[type="submit"]:disabled {
    background: var(--alp-muted);
    cursor: not-allowed;
}

.alp .knopf-schlicht {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    /* --alp-blue-deep, nicht --alp-blue-dark: Der Knopf steht mal auf
       Weiss (Kopfleiste), mal auf --alp-bg-soft (Abschnittskopf). Auf
       der Grundfläche erreicht das hellere Blau nur 4.29:1. */
    color: var(--alp-blue-deep);
    border-color: var(--alp-blue-deep);
    padding: 8px 18px;
    font-size: .84rem;
    text-decoration: none;
}

.alp .knopf-schlicht:hover {
    background: var(--alp-blue-deep);
    color: #fff;
}

.alp .knopf-schlicht--warnend {
    color: var(--rot);
    border-color: var(--rot);
}

.alp .knopf-schlicht--warnend:hover {
    background: var(--rot);
    color: #fff;
}

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

.formular {
    background: var(--alp-bg);
    border: 1px solid var(--alp-border);
    border-radius: var(--alp-radius-lg);
    box-shadow: var(--alp-shadow-sm);
    padding: 30px;
    max-width: 40rem;
}

.formular label,
.login-karte label {
    display: block;
    font-family: var(--alp-font-head);
    font-weight: 600;
    font-size: .85rem;
    color: var(--alp-heading);
    margin: 18px 0 7px;
}

.formular label:first-of-type,
.login-karte label:first-of-type { margin-top: 0; }

.formular input[type="text"],
.formular input[type="email"],
.formular input[type="password"],
.formular textarea,
.formular select,
.login-karte input {
    width: 100%;
    font-family: var(--alp-font-body);
    font-size: 1rem;
    padding: 13px 16px;
    border: 1.5px solid var(--alp-border);
    border-radius: var(--alp-radius);
    background: var(--alp-bg);
    color: var(--alp-heading);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.formular textarea { resize: vertical; min-height: 120px; }

.formular input:hover,
.formular textarea:hover,
.formular select:hover,
.login-karte input:hover { border-color: #c7d0dc; }

.formular input:focus,
.formular textarea:focus,
.formular select:focus,
.login-karte input:focus {
    outline: none;
    border-color: var(--alp-blue);
    box-shadow: 0 0 0 3px rgba(38, 156, 217, .16);
}

.formular button[type="submit"] { margin-top: 24px; }

.rollen-form { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }

.rollen-form select {
    font-family: var(--alp-font-body);
    font-size: .85rem;
    padding: 6px 10px;
    border: 1.5px solid var(--alp-border);
    border-radius: var(--alp-radius);
    background: var(--alp-bg);
    color: var(--alp-heading);
}

.nur-vorlesen {
    background: var(--flaeche-tief);
    color: var(--alp-text);
    cursor: not-allowed;
}

td.gekuerzt {
    max-width: 26rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ------------------------------------------------------------------
   Anmelde- und Registrierungsseite
   ------------------------------------------------------------------ */

/* Karte auf dem Markenverlauf – derselbe wie auf der Coming-Soon-Seite
   und in .alp-hero. Eine weisse Karte auf grauem Grund wirkte beliebig;
   der Verlauf gibt der Anmeldung ein Gesicht und verbindet sie mit dem
   ersten Eindruck, den Besucher:innen vorher hatten.

   body.alp.seite-login, nicht .seite-login: body.alp setzt die Fläche
   selbst und wäre sonst spezifischer. */
body.alp.seite-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px 20px;
    background: linear-gradient(140deg, #232434 0%, #1b2b40 55%, #14304a 100%);
}

/* Ruhige, grosse Formen im Hintergrund – nehmen die Bildmarke auf,
   ohne sie zu wiederholen. Rein dekorativ, deshalb aus dem
   Vorlesefluss heraus und ohne Bedeutung für den Inhalt. */
body.alp.seite-login::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(38rem 38rem at 12% 18%, rgba(38, 156, 217, .16), transparent 60%),
        radial-gradient(30rem 30rem at 88% 82%, rgba(17, 180, 246, .12), transparent 60%);
    pointer-events: none;
}

.login-marke {
    margin-bottom: 30px;
    position: relative;
}

/* Wortmarke steht hier auf dunklem Grund. */
.seite-login .alp-logo-text,
.seite-login .alp-logo-text > span { color: #fff; }

.login-karte {
    position: relative;
    background: var(--alp-bg);
    border-radius: var(--alp-radius-lg);
    /* Kräftiger als --alp-shadow: Die Karte liegt auf dunklem Grund und
       braucht mehr Tiefe, um sich zu lösen. */
    box-shadow: 0 24px 60px rgba(10, 14, 24, .45);
    padding: 38px;
    width: 100%;
    max-width: 25rem;
}

/* Schmaler Markenstreifen an der Oberkante der Karte. */
.login-karte::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    border-radius: var(--alp-radius-lg) var(--alp-radius-lg) 0 0;
    background: linear-gradient(90deg, #1c79d9, #11b4f6);
}

.login-karte--breit { max-width: 32rem; }

/* Kleiner Vorspann ueber der Ueberschrift, wie .alp-section-label im
   Designsystem. Er nennt den Zusammenhang, nicht den Produktnamen -
   der steht schon in der Wortmarke darueber. */
.login-hinweis {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--alp-blue-dark);
    font-family: var(--alp-font-head);
    font-weight: 600;
    margin: 0 0 6px;
}

.alp .login-karte h1 {
    font-size: 1.5rem;
    text-transform: uppercase;
    margin: 0 0 26px;
}

.alp .login-karte button[type="submit"] {
    width: 100%;
    margin-top: 26px;
}

.login-fuss {
    margin: 24px 0 0;
    font-size: .88rem;
    text-align: center;
    color: var(--alp-text);
}

/* Impressum, Datenschutz und AGB unter der Karte. Sie stehen auf
   dunklem Grund und nicht auf der Karte: Es sind Angaben zur Firma, die
   mit dem Formular selbst nichts zu tun haben. rgba(255,255,255,.62)
   auf dem Verlauf ergibt 5.4:1 und bleibt ueber WCAG AA. */
.rechtszeile {
    display: flex;
    justify-content: center;
    gap: 8px 20px;
    flex-wrap: wrap;
    margin: 18px 0 0;
    font-size: .82rem;
    position: relative;
}

.seite-login .rechtszeile a {
    color: rgba(255, 255, 255, .62);
    text-decoration: none;
}

.seite-login .rechtszeile a:hover { color: #fff; text-decoration: underline; }

/* ------------------------------------------------------------------
   Fuss
   ------------------------------------------------------------------ */

.fussleiste {
    background: var(--alp-dark);
    color: rgba(255, 255, 255, .7);
    padding: 30px 20px;
    font-size: .85rem;
    margin-top: auto;
}

.fussleiste__innen {
    max-width: var(--alp-container);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.fussleiste__marke {
    font-family: var(--alp-font-head);
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    letter-spacing: .02em;
}

.fussleiste a { color: rgba(255, 255, 255, .7); }
.fussleiste a:hover { color: #fff; }

/* ------------------------------------------------------------------
   Tastaturbedienung

   Sichtbarer Fokus auf allem, was sich bedienen lässt. Das
   Designsystem setzt das für Verweise und Felder bereits; hier kommen
   die Bausteine des Portals dazu.
   ------------------------------------------------------------------ */

.alp .menue a:focus-visible,
.alp .filter a:focus-visible,
.alp button:focus-visible,
.alp .knopf-schlicht:focus-visible,
.alp select:focus-visible {
    outline: 3px solid var(--alp-blue);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------
   Schmale Bildschirme
   ------------------------------------------------------------------ */

@media (max-width: 46rem) {
    /* Nicht klebend auf dem Telefon: Die Kopfleiste braucht dort drei
       Zeilen und nähme sonst dauerhaft ein knappes Drittel des
       Bildschirms mit. Zurückscrollen ist das kleinere Übel. */
    .kopfleiste { position: static; }

    .kopfleiste__innen {
        min-height: 0;
        padding: 14px 20px;
        gap: 10px 14px;
    }

    .menue { gap: 16px; }
    .menue a { font-size: .95rem; }

    /* Der Kontoblock trägt eine Adresse, eine Rollenmarke und zwei
       Knöpfe. Auf 335 Pixel Inhaltsbreite geht das nur kleiner. */
    .konto { font-size: .8rem; gap: 8px 12px; }
    .alp .konto .knopf-schlicht { padding: 6px 12px; font-size: .78rem; }

    .inhalt { padding: 28px 20px 56px; }

    /* Untereinander gestapelt braucht die Übersicht weniger Luft
       zwischen den Abschnitten als nebeneinander. */
    .abschnitt-kopf { margin-top: 26px; }

    /* Auf dem Telefon stehen zwei Kacheln nebeneinander (148px Mindest-
       breite in .kacheln). Ein Betrag wie «CHF 12'480.00» passt dort in
       1.6rem nicht mehr über die Kachel. */
    .kachel__zahl--betrag { font-size: 1.15rem; }

    .formular, .login-karte { padding: 24px; }
}

/* ------------------------------------------------------------------
   Einwilligung in den Verzeichniseintrag

   Ein eigener Block am Ende des Profilformulars. Er sieht mit Absicht
   anders aus als die Felder darüber: Dort werden Angaben erfasst, hier
   wird entschieden, was von ihnen nach aussen geht. Diese Entscheidung
   soll nicht zwischen Strasse und Hausnummer untergehen.
   ------------------------------------------------------------------ */
.einwilligung {
    margin-top: 32px;
    padding: 20px 22px 16px;
    border: 1.5px solid var(--alp-border);
    border-radius: var(--alp-radius);
    background: var(--alp-bg-soft);
}

.einwilligung legend {
    font-family: var(--alp-font-head);
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--alp-heading);
    padding: 0 8px;
}

.einwilligung .hinweis {
    font-size: .84rem;
    color: var(--alp-text);
    max-width: 62ch;
    margin: 0 0 14px;
}

.einwilligung .hinweis:last-child { margin: 14px 0 0; }

/* Die Grundregel für .formular label setzt display:block und die
   Überschriftenschrift. Für ein Kontrollkästchen stimmt beides nicht:
   Der Haken gehört neben seinen Text, nicht darüber. */
.einwilligung .kasten {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 10px;
    font-family: var(--alp-font-body);
    font-weight: 400;
    font-size: .95rem;
    color: var(--alp-heading);
    cursor: pointer;
}

.einwilligung .kasten input[type="checkbox"] {
    width: auto;
    margin: 2px 0 0;
    accent-color: var(--alp-blue);
    flex: none;
}

/* Statistik und Terminverwaltung */
.statistik-filter { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.statistik-filter a { padding: 12px 20px; border: 1px solid var(--alp-border); border-radius: var(--alp-radius-lg); background: var(--alp-bg); color: var(--alp-heading); text-decoration: none; }
.statistik-filter a.ist-aktiv { background: var(--alp-blue-dark); color: var(--alp-bg); }
.statistik-filter a:focus-visible { outline: 3px solid var(--alp-blue); outline-offset: 3px; }
.statistik-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 28px 0 16px; }
.statistik-kachel, .statistik-quote, .termin-karte { position: relative; overflow: hidden; background: var(--alp-bg); padding: 28px; border: 1px solid var(--alp-border); border-radius: var(--alp-radius-lg); box-shadow: var(--alp-shadow); }
.statistik-kachel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--alp-blue), var(--amber)); }
.statistik-kachel--akzent { outline: 2px solid var(--amber); }
.statistik-kachel strong, .statistik-quote strong { display: block; font-family: var(--alp-font-head); font-size: 3rem; line-height: 1.2; color: var(--alp-heading); }
.statistik-kachel span { display: block; text-transform: uppercase; margin-top: 8px; }
.statistik-kachel small { display: block; margin-top: 6px; }
.statistik-quote { margin: 28px 0; }
.statistik-quote h2 { margin-top: 0; }
.termin-karte { margin: 16px 0; overflow-wrap: anywhere; }
@media (max-width: 1000px) { .statistik-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .statistik-kacheln { grid-template-columns: 1fr; } .statistik-filter a { flex: 1 1 40%; text-align: center; } }