/* ---------------------------------------------------------------------
   Info-Server Stadt Hilden

   Keine externen Ressourcen. Keine Schriften von fremden Servern, keine
   CDN-Einbindungen, kein JavaScript von aussen. Das ist bei einem aus
   dem Internet erreichbaren Auftritt einer Kommune keine Stilfrage:
   jede externe Einbindung uebertraegt die IP-Adresse der Besucher an
   Dritte und macht die Verfuegbarkeit von fremder Infrastruktur
   abhaengig. Deshalb ausschliesslich Systemschriften.
   --------------------------------------------------------------------- */

:root {
    --ink:        #16202a;
    --ink-weich:  #5c6873;
    --papier:     #f1f3ef;
    --flaeche:    #ffffff;
    --linie:      #d7dcd2;
    --akzent:     #1f6f5c;
    --akzent-tief:#154c40;
    --warnung:    #8c3320;

    --schrift: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --schrift-mono: "Cascadia Mono", Consolas, "SF Mono", monospace;

    --raster: 8px;
    --breite: 62rem;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--papier);
    color: var(--ink);
    font-family: var(--schrift);
    font-size: 16px;
    line-height: 1.55;
}

a { color: var(--akzent-tief); }

:where(a, button, input, summary):focus-visible {
    outline: 3px solid var(--akzent);
    outline-offset: 2px;
}

/* --- Kopfzeile ----------------------------------------------------- */

.kopf {
    background: var(--ink);
    color: #fff;
    border-bottom: 4px solid var(--akzent);
}

.kopf__inhalt {
    max-width: var(--breite);
    margin: 0 auto;
    padding: calc(var(--raster) * 2) calc(var(--raster) * 3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--raster);
    align-items: baseline;
    justify-content: space-between;
}

.marke {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin: 0;
}

.marke span { color: #9fc4b8; }

.kopf__benutzer {
    font-size: 0.875rem;
    color: #c3ccd3;
    display: flex;
    gap: calc(var(--raster) * 2);
    align-items: baseline;
}

.kopf__benutzer a { color: #fff; }

/* --- Rumpf --------------------------------------------------------- */

.rumpf {
    max-width: var(--breite);
    margin: 0 auto;
    padding: calc(var(--raster) * 5) calc(var(--raster) * 3);
}

h1 {
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 calc(var(--raster) * 1) 0;
}

.vorspann {
    color: var(--ink-weich);
    margin: 0 0 calc(var(--raster) * 4) 0;
    max-width: 46ch;
}

/* --- Anwendungsliste ------------------------------------------------
   Signaturelement: das monospaced Kuerzel links neben jeder Zeile. Es
   ist nicht dekorativ, sondern das, was Benutzer nach zwei Wochen
   ansteuern, ohne den Text zu lesen.
   ------------------------------------------------------------------- */

.anwendungen {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
    background: var(--linie);
    border: 1px solid var(--linie);
}

.anwendung {
    background: var(--flaeche);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: calc(var(--raster) * 2);
    align-items: center;
    padding: calc(var(--raster) * 2);
    text-decoration: none;
    color: inherit;
    transition: background 120ms ease;
}

.anwendung:hover,
.anwendung:focus-visible { background: #eef3f0; }

.anwendung__kuerzel {
    font-family: var(--schrift-mono);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--akzent-tief);
    border: 1px solid var(--akzent);
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
}

.anwendung__name {
    font-weight: 600;
    display: block;
}

.anwendung__beschreibung {
    color: var(--ink-weich);
    font-size: 0.9rem;
}

.leer {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    padding: calc(var(--raster) * 3);
    color: var(--ink-weich);
}

/* --- Anmeldung ----------------------------------------------------- */

.anmeldung {
    max-width: 26rem;
    margin: calc(var(--raster) * 8) auto;
    padding: 0 calc(var(--raster) * 3);
}

.anmeldung__karte {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-top: 4px solid var(--akzent);
    padding: calc(var(--raster) * 4);
}

.feld { margin-bottom: calc(var(--raster) * 3); }

.feld label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-weich);
    margin-bottom: calc(var(--raster) * 0.75);
}

.feld input {
    width: 100%;
    font: inherit;
    padding: calc(var(--raster) * 1.25);
    border: 1px solid var(--linie);
    background: #fbfcfa;
    color: inherit;
}

.feld input:focus { border-color: var(--akzent); }

.knopf {
    font: inherit;
    font-weight: 600;
    background: var(--akzent);
    color: #fff;
    border: 1px solid var(--akzent-tief);
    padding: calc(var(--raster) * 1.25) calc(var(--raster) * 3);
    cursor: pointer;
    width: 100%;
}

.knopf:hover { background: var(--akzent-tief); }

.meldung {
    border-left: 4px solid var(--warnung);
    background: #fbf1ee;
    padding: calc(var(--raster) * 1.5) calc(var(--raster) * 2);
    margin-bottom: calc(var(--raster) * 3);
    font-size: 0.9rem;
}

.hinweis {
    border-left: 4px solid var(--akzent);
    background: #eef3f0;
    padding: calc(var(--raster) * 1.5) calc(var(--raster) * 2);
    margin-bottom: calc(var(--raster) * 3);
    font-size: 0.9rem;
}

.fuss {
    max-width: var(--breite);
    margin: 0 auto;
    padding: calc(var(--raster) * 3);
    color: var(--ink-weich);
    font-size: 0.8rem;
    border-top: 1px solid var(--linie);
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

@media (max-width: 30rem) {
    .rumpf { padding: calc(var(--raster) * 3) calc(var(--raster) * 2); }
    .anwendung { grid-template-columns: 1fr; }
    .anwendung__kuerzel { display: none; }
}

/* ---------------------------------------------------------------------
   Verwaltung
   --------------------------------------------------------------------- */

.rumpf--schmal { max-width: 34rem; }

.marke a { color: inherit; text-decoration: none; }

.titelzeile {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--raster) * 2);
    align-items: center;
    justify-content: space-between;
    margin-bottom: calc(var(--raster) * 3);
}

.titelzeile h1 { margin: 0; }

.zurueck { margin: 0 0 calc(var(--raster) * 2) 0; font-size: 0.9rem; }

.flash { border-bottom: 1px solid var(--linie); }
.flash__inhalt {
    max-width: var(--breite);
    margin: 0 auto;
    padding: calc(var(--raster) * 1.5) calc(var(--raster) * 3);
    font-size: 0.9rem;
}
.flash--erfolg  { background: #e9f2ee; border-left: 4px solid var(--akzent); }
.flash--warnung { background: #fbf1ee; border-left: 4px solid var(--warnung); }

/* --- Suchleiste --- */

.suchleiste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--raster);
    margin-bottom: calc(var(--raster) * 3);
}

.suchleiste input[type="search"] {
    flex: 1 1 16rem;
    font: inherit;
    padding: calc(var(--raster) * 1.1);
    border: 1px solid var(--linie);
    background: var(--flaeche);
}

.suchleiste select {
    font: inherit;
    padding: calc(var(--raster) * 1.1);
    border: 1px solid var(--linie);
    background: var(--flaeche);
}

/* --- Tabelle --- */

.tabelle {
    width: 100%;
    border-collapse: collapse;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    font-size: 0.925rem;
}

.tabelle th,
.tabelle td {
    text-align: left;
    padding: calc(var(--raster) * 1.25) calc(var(--raster) * 1.5);
    border-bottom: 1px solid var(--linie);
    vertical-align: top;
}

.tabelle th {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-weich);
    background: #eceee9;
}

.tabelle tbody tr:hover { background: #f7f9f7; }
.tabelle .mono { font-family: var(--schrift-mono); font-size: 0.85rem; }

.marker {
    display: inline-block;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 6px;
    border: 1px solid var(--akzent);
    color: var(--akzent-tief);
    margin-right: 4px;
}

.marker--warn { border-color: var(--warnung); color: var(--warnung); }
.marker--aus  { border-color: var(--ink-weich); color: var(--ink-weich); }
.marker--alt  { border-color: #b08900; color: #8a6d00; }

.blaettern {
    display: flex;
    gap: calc(var(--raster) * 2);
    align-items: baseline;
    margin-top: calc(var(--raster) * 2);
    font-size: 0.9rem;
}

/* --- Formulare --- */

.formular {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-top: 4px solid var(--akzent);
    padding: calc(var(--raster) * 4);
    max-width: 40rem;
}

.formular label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-weich);
    margin-bottom: calc(var(--raster) * 0.75);
}

.formular input[type="text"],
.formular input[type="email"],
.formular input[type="password"] {
    width: 100%;
    font: inherit;
    padding: calc(var(--raster) * 1.25);
    border: 1px solid var(--linie);
    background: #fbfcfa;
}

.formular input:focus { border-color: var(--akzent); }

.feld--schalter { display: flex; align-items: baseline; gap: var(--raster); }
.feld--schalter label { text-transform: none; letter-spacing: 0; font-size: 0.95rem; margin: 0; }
.feld--schalter input { order: -1; }

.feld--auswahl > div { display: grid; gap: calc(var(--raster) * 0.5); }
.feld--auswahl > div > div { display: flex; align-items: baseline; gap: var(--raster); }
.feld--auswahl > div label { text-transform: none; letter-spacing: 0; font-size: 0.95rem; margin: 0; }

.formular .help {
    font-size: 0.85rem;
    color: var(--ink-weich);
    margin-top: calc(var(--raster) * 0.5);
}

.formular ul {
    color: var(--warnung);
    font-size: 0.875rem;
    margin: calc(var(--raster) * 0.5) 0 0 0;
    padding-left: 1.2em;
}

.knopf--klein { width: auto; padding: calc(var(--raster)) calc(var(--raster) * 2); font-size: 0.9rem; }
.knopf--still { background: var(--flaeche); color: var(--ink); border-color: var(--linie); }
.knopf--still:hover { background: #eceee9; }

.inline-form { display: inline-block; margin-left: var(--raster); }

.weitere-aktionen {
    margin-top: calc(var(--raster) * 5);
    padding-top: calc(var(--raster) * 3);
    border-top: 1px solid var(--linie);
    max-width: 40rem;
}

.weitere-aktionen h2 { font-size: 1.05rem; margin: 0 0 calc(var(--raster) * 2) 0; }

.fussnote { font-size: 0.85rem; color: var(--ink-weich); margin-top: calc(var(--raster) * 2); }

@media (max-width: 40rem) {
    .tabelle thead { display: none; }
    .tabelle, .tabelle tbody, .tabelle tr, .tabelle td { display: block; width: 100%; }
    .tabelle tr { border-bottom: 2px solid var(--linie); }
    .tabelle td { border: none; padding: calc(var(--raster) * 0.5) calc(var(--raster) * 1.5); }
    .formular { padding: calc(var(--raster) * 2); }
}

/* --- Verwaltungsleiste --- */

.verwaltungsleiste {
    background: #223040;
    border-bottom: 1px solid #2e3f52;
}

.verwaltungsleiste__inhalt {
    max-width: var(--breite);
    margin: 0 auto;
    padding: 0 calc(var(--raster) * 3);
    display: flex;
    gap: calc(var(--raster) * 3);
}

.verwaltungsleiste a {
    color: #c3ccd3;
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    padding: calc(var(--raster) * 1.25) 0;
    border-bottom: 2px solid transparent;
}

.verwaltungsleiste a:hover {
    color: #fff;
    border-bottom-color: var(--akzent);
}

.formular textarea {
    width: 100%;
    font: inherit;
    padding: calc(var(--raster) * 1.25);
    border: 1px solid var(--linie);
    background: #fbfcfa;
    resize: vertical;
}

.formular input[type="number"] {
    width: 8rem;
    font: inherit;
    padding: calc(var(--raster) * 1.25);
    border: 1px solid var(--linie);
    background: #fbfcfa;
}

.tabelle form { margin: 0; }

/* --- Passwortfeld mit Schalter --------------------------------------
   An portal.css anhaengen. Die Huelle wird von passwort.js erzeugt.
   -------------------------------------------------------------------- */

.pwfeld {
    position: relative;
    display: block;
}

.pwfeld input {
    width: 100%;
    /* Platz fuer den Schalter, damit lange Eingaben nicht darunter
       verschwinden */
    padding-right: 5.5rem;
}

.pwfeld__schalter {
    position: absolute;
    top: 50%;
    right: calc(var(--raster) * 0.75);
    transform: translateY(-50%);
    font: inherit;
    font-size: 0.8rem;
    line-height: 1;
    padding: calc(var(--raster) * 0.6) calc(var(--raster));
    background: transparent;
    border: 1px solid var(--linie);
    color: var(--ink-weich);
    cursor: pointer;
}

.pwfeld__schalter:hover {
    color: var(--ink);
    border-color: var(--ink-weich);
    background: #fff;
}

.pwfeld__schalter[aria-pressed="true"] {
    color: var(--akzent-tief);
    border-color: var(--akzent);
}

.pwfeld__schalter:focus-visible {
    outline: 3px solid var(--akzent);
    outline-offset: 1px;
}

/* --- Auswahlfelder ausrichten ---------------------------------------
   Ans Ende von portal.css anhaengen. Ersetzt die frueheren Regeln zu
   .feld--auswahl und .feld--schalter - haengen Sie diese Datei danach
   an, dann gewinnt sie.

   DAS PROBLEM

   Symfony gibt aufgeklappte Auswahlfelder so aus:

       <div>
         <input type="radio" id="..."><label for="...">Einzahlung</label>
         <input type="radio" id="..."><label for="...">Auszahlung</label>
       </div>

   Kaestchen und Beschriftung stehen also unmittelbar nebeneinander,
   ohne gemeinsame Huelle je Zeile. Ein flex-Layout kann die Paare
   deshalb nicht gruppieren - die Beschriftungen rutschen gegenueber
   den Kaestchen.

   DIE LOESUNG

   Ein Raster mit zwei Spalten: Kaestchen links, Beschriftung rechts.
   Die Elemente fuellen es abwechselnd von selbst, und align-items
   legt beide auf dieselbe Mittellinie.
   -------------------------------------------------------------------- */

/* --- Mehrfachauswahl: Rollen, Anwendungen, Vorgang ------------------ */

.feld--auswahl > div {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: calc(var(--raster) * 0.75) var(--raster);
    align-items: center;
}

.feld--auswahl > div > input {
    margin: 0;
    width: 1.05rem;
    height: 1.05rem;
    justify-self: center;
}

.feld--auswahl > div > label {
    margin: 0;
    padding: 0;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.35;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
    cursor: pointer;
}

/* Die Beschriftung des Feldes selbst bleibt wie die anderen */
.feld--auswahl > label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-weich);
    margin-bottom: calc(var(--raster) * 0.75);
}

/* --- Einzelnes Kaestchen: "Konto ist aktiv" usw. -------------------- */

.feld--schalter {
    display: flex;
    align-items: center;
    gap: var(--raster);
}

.feld--schalter input {
    order: -1;          /* Kaestchen vor die Beschriftung */
    margin: 0;
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
}

.feld--schalter label {
    margin: 0;
    padding: 0;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.35;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
    cursor: pointer;
}

/* Hilfetext unter einem Schalter soll unter der Beschriftung stehen,
   nicht daneben */
.feld--schalter .help {
    flex: 1 0 100%;
    margin-left: calc(1.05rem + var(--raster));
    margin-top: 0;
}

/* --- Sichtbarer Rahmen beim Tastaturwechsel ------------------------- */

.feld--auswahl input:focus-visible,
.feld--schalter input:focus-visible {
    outline: 3px solid var(--akzent);
    outline-offset: 2px;
}

@media (max-width: 30rem) {
    .feld--auswahl > div { gap: var(--raster) calc(var(--raster) * 0.75); }
}

/* --- Auswahlfelder ausrichten ---------------------------------------
   Ans Ende von portal.css anhaengen. Ersetzt die frueheren Regeln zu
   .feld--auswahl und .feld--schalter - haengen Sie diese Datei danach
   an, dann gewinnt sie.

   DAS PROBLEM

   Symfony gibt aufgeklappte Auswahlfelder so aus:

       <div>
         <input type="radio" id="..."><label for="...">Einzahlung</label>
         <input type="radio" id="..."><label for="...">Auszahlung</label>
       </div>

   Kaestchen und Beschriftung stehen also unmittelbar nebeneinander,
   ohne gemeinsame Huelle je Zeile. Ein flex-Layout kann die Paare
   deshalb nicht gruppieren - die Beschriftungen rutschen gegenueber
   den Kaestchen.

   DIE LOESUNG

   Ein Raster mit zwei Spalten: Kaestchen links, Beschriftung rechts.
   Die Elemente fuellen es abwechselnd von selbst, und align-items
   legt beide auf dieselbe Mittellinie.
   -------------------------------------------------------------------- */

/* --- Mehrfachauswahl: Rollen, Anwendungen, Vorgang ------------------ */

.feld--auswahl > div {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: calc(var(--raster) * 0.75) var(--raster);
    align-items: center;
}

.feld--auswahl > div > input {
    margin: 0;
    width: 1.05rem;
    height: 1.05rem;
    justify-self: center;
}

.feld--auswahl > div > label {
    margin: 0;
    padding: 0;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.35;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
    cursor: pointer;
}

/* Die Beschriftung des Feldes selbst bleibt wie die anderen */
.feld--auswahl > label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-weich);
    margin-bottom: calc(var(--raster) * 0.75);
}

/* --- Einzelnes Kaestchen: "Konto ist aktiv" usw. -------------------- */

.feld--schalter {
    display: flex;
    align-items: center;
    gap: var(--raster);
}

.feld--schalter input {
    order: -1;          /* Kaestchen vor die Beschriftung */
    margin: 0;
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
}

.feld--schalter label {
    margin: 0;
    padding: 0;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.35;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
    cursor: pointer;
}

/* Hilfetext unter einem Schalter soll unter der Beschriftung stehen,
   nicht daneben */
.feld--schalter .help {
    flex: 1 0 100%;
    margin-left: calc(1.05rem + var(--raster));
    margin-top: 0;
}

/* --- Sichtbarer Rahmen beim Tastaturwechsel ------------------------- */

.feld--auswahl input:focus-visible,
.feld--schalter input:focus-visible {
    outline: 3px solid var(--akzent);
    outline-offset: 2px;
}

@media (max-width: 30rem) {
    .feld--auswahl > div { gap: var(--raster) calc(var(--raster) * 0.75); }
}

/* --- Telefonbuch -----------------------------------------------------
   Ans Ende von portal.css anhaengen.
   -------------------------------------------------------------------- */

.telsuche {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--raster);
    background: var(--flaeche);
    border: 1px solid var(--linie);
    padding: calc(var(--raster) * 2);
    margin: calc(var(--raster) * 3) 0;
}

.telsuche__feld { display: flex; flex-direction: column; flex: 1 1 16rem; }
.telsuche__feld--schmal { flex: 0 1 10rem; }

.telsuche label {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-weich);
    margin-bottom: calc(var(--raster) * 0.5);
}

.telsuche input,
.telsuche select {
    font: inherit;
    min-height: 2.75rem;
    padding: 0 calc(var(--raster));
    border: 1px solid var(--linie);
    background: #fbfcfa;
    width: 100%;
}

.telsuche input:focus,
.telsuche select:focus { border-color: var(--akzent); outline: 2px solid var(--akzent); outline-offset: -2px; }

.telsuche .knopf { min-height: 2.75rem; flex: 0 0 auto; }

/* --- Trefferliste ---------------------------------------------------
   Bewusst eine Liste statt einer Tabelle: Sechs Spalten passen auf
   kein Handy, und die Angaben gehoeren ohnehin zusammen.
   -------------------------------------------------------------------- */

.telliste {
    list-style: none;
    margin: calc(var(--raster) * 2) 0;
    padding: 0;
    display: grid;
    gap: 1px;
    background: var(--linie);
    border: 1px solid var(--linie);
}

.telzeile {
    background: var(--flaeche);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "name    nummern"
        "ort     nummern";
    gap: 2px var(--raster);
    align-items: center;
    padding: calc(var(--raster) * 1.5);
}

.telzeile:hover { background: #f7f9f7; }

.telzeile__name {
    grid-area: name;
    font-weight: 600;
    line-height: 1.25;
}

.telzeile__ort {
    grid-area: ort;
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--raster) * 1.5);
    font-size: 0.8rem;
    color: var(--ink-weich);
}

.telzeile__nummern {
    grid-area: nummern;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.telzeile__tel {
    font-family: var(--schrift-mono);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--akzent-tief);
    text-decoration: none;
}

.telzeile__handy {
    font-family: var(--schrift-mono);
    font-size: 0.85rem;
    color: var(--ink-weich);
    text-decoration: none;
}

.telzeile__tel:hover,
.telzeile__handy:hover { text-decoration: underline; }

.telzeile__kw {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--ink-weich);
    border: 1px solid var(--linie);
    padding: 0 4px;
}

@media (max-width: 34rem) {
    .telsuche { padding: calc(var(--raster) * 1.5); }
    .telsuche .knopf { width: 100%; }

    .telzeile {
        grid-template-columns: 1fr;
        grid-template-areas: "name" "nummern" "ort";
        gap: calc(var(--raster) * 0.5);
    }

    .telzeile__nummern {
        flex-direction: row;
        align-items: baseline;
        gap: var(--raster);
        justify-content: flex-start;
    }
}

/* --- Telefonbuch -----------------------------------------------------
   Ans Ende von portal.css anhaengen. ERSETZT die frueheren Regeln zum
   Telefonbuch - die alten Klassen .telsuche, .telliste und .telzeile
   werden nicht mehr verwendet und koennen aus portal.css entfernt
   werden.

   Das Telefonbuch benutzt jetzt die vorhandenen Bausteine des Portals:
   .suchleiste fuer die Suche, .tabelle fuer die Treffer. Hier stehen
   nur noch die wenigen Ergaenzungen, die eine Telefonliste braucht.
   -------------------------------------------------------------------- */

/* Der Knopf in der Suchleiste war so hoch wie der Text, die Felder
   aber hoeher - dadurch sass er nicht auf einer Linie. */
.suchleiste .knopf {
    flex: 0 0 auto;
    padding-top: calc(var(--raster) * 1.1);
    padding-bottom: calc(var(--raster) * 1.1);
}

/* Rufnummern gut lesbar und antippbar */
.tabelle--telefon a[href^="tel:"] {
    color: var(--akzent-tief);
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    padding: 2px 0;
}

.tabelle--telefon a[href^="tel:"]:hover { text-decoration: underline; }

.tabelle--telefon td { vertical-align: top; }

/* --- Schmale Bildschirme --------------------------------------------
   Fuenf Spalten passen auf kein Handy. Die Zeilen werden gestapelt,
   und jede Zelle bekommt ihre Spaltenbeschriftung davor - sonst
   staenden dort Zahlen ohne Zusammenhang.

   Die Beschriftung kommt aus data-spalte im Template, es braucht also
   kein zweites Stueck HTML fuer die Handyansicht.
   -------------------------------------------------------------------- */

@media (max-width: 44rem) {
    .tabelle--telefon thead { display: none; }

    .tabelle--telefon,
    .tabelle--telefon tbody,
    .tabelle--telefon tr,
    .tabelle--telefon td { display: block; width: 100%; }

    .tabelle--telefon tr {
        border-bottom: 1px solid var(--linie);
        padding: calc(var(--raster) * 1.5) 0;
    }

    .tabelle--telefon tr:last-child { border-bottom: none; }

    .tabelle--telefon td {
        border: none;
        padding: 2px calc(var(--raster) * 1.5);
        display: grid;
        grid-template-columns: 4.5rem 1fr;
        gap: var(--raster);
        align-items: baseline;
    }

    .tabelle--telefon td::before {
        content: attr(data-spalte);
        font-size: 0.7rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--ink-weich);
    }

    /* Der Name steht oben und braucht keine Beschriftung */
    .tabelle--telefon td[data-spalte="Name"] {
        grid-template-columns: 1fr;
        font-size: 1.05rem;
        padding-bottom: calc(var(--raster) * 0.75);
    }

    .tabelle--telefon td[data-spalte="Name"]::before { content: none; }

    /* Leere Angaben weglassen statt Striche zu zeigen */
    .tabelle--telefon td:has(> :only-child):not([data-spalte="Name"]) { }
}

/* --- Mitteilungsblätter: Jahresauswahl -------------------------------
   Ans Ende von portal.css anhaengen. Die Tabellen benutzen die
   vorhandene Klasse .tabelle - hier steht nur die Jahresleiste.
   -------------------------------------------------------------------- */

.jahre {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--raster) * 0.75);
    background: var(--flaeche);
    border: 1px solid var(--linie);
    padding: calc(var(--raster) * 1.5);
    margin: calc(var(--raster) * 3) 0;
}

.jahre__jahr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.5rem;
    min-height: 2.5rem;
    padding: 0 calc(var(--raster));
    border: 1px solid var(--linie);
    background: var(--papier);
    color: var(--akzent-tief);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.jahre__jahr:hover {
    border-color: var(--akzent);
    background: #eef3f0;
}

.jahre__jahr--aktiv {
    background: var(--akzent);
    border-color: var(--akzent-tief);
    color: #fff;
    font-weight: 600;
}

.jahre__jahr:focus-visible {
    outline: 3px solid var(--akzent);
    outline-offset: 2px;
}