/* 04-home-nav-profil.css — Teil der Aufteilung von style.css (2026-08-10).
   Urspruenglich Zeilen 2871-3763 der einen Datei. Home-Hero (1A Glass-Panel), Profil-Avatar-Dropdown, Kommando-Palette.
   Diese und alle anderen css/*.css-Dateien werden auf JEDER Seite
   gemeinsam geladen, in fester Reihenfolge - die Kaskade ist exakt
   dieselbe wie vorher, nur auf mehrere Dateien verteilt. */

/* =========================================================
   1A Floating Stage Layout (site-weit)
   Alles "schwebt" als zentrierte Spalte auf der Streifen-Stage.
   ========================================================= */

/* Rand rundum, damit die Stage ringsum sichtbar ist */
body {
    padding: calc(env(safe-area-inset-top) + 1.1rem) clamp(0.7rem, 3vw, 1.6rem) calc(env(safe-area-inset-bottom) + 1.3rem);
}

/* Schwebende Glass-Nav als zentrierte Spalte */
nav {
    position: sticky;
    top: 0.8rem;
    z-index: 1000;
    height: auto;
    min-height: var(--navbar-height);
    max-width: 1180px;
    width: 100%;
    margin: 0 auto 1.4rem;
    border: 1px solid rgba(255,255,255,0.18);
    border-bottom: 1px solid rgba(255,255,255,0.18);
    border-radius: 20px;
    overflow: visible;
}

/* Nav-Liste auf volle Höhe strecken, damit das Dropdown bündig unter der
   Leiste sitzt (sonst entsteht eine Lücke und das Menü klappt beim
   Rübergehen zu). */
@media (min-width: 1026px) {
    /* feste Höhe → die Liste/Items füllen die Leiste, Dropdown sitzt bündig */
    nav { height: var(--navbar-height); }
    .dropdown { top: 100%; }
    /* unsichtbare Brücke, damit der Hover beim Wechsel nicht abreißt */
    nav li:hover .dropdown::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -8px;
        height: 8px;
    }
    /* Doppellinie vermeiden: bei geöffnetem Untermenü liegen die gelbe
       border-bottom des Hauptpunkts und die border-top des Dropdowns
       direkt übereinander. Die Linie am Hauptpunkt entfällt dann –
       das Dropdown trägt sie. Spezifität (0,2,2) schlägt die Basisregel
       `nav li:hover > label` (0,1,3). */
    nav .expandable_li:hover > .nav-gruppe,
    nav .expandable_li:focus-within > .nav-gruppe {
        border-bottom-color: transparent;
    }
}

/* Marke im 1A-Stil (kein gelber Block) */
nav .loginHeader {
    background: transparent;
    border-right: none;
    border-radius: 20px 0 0 20px;
}
nav .TigersLogo img {
    background: #fff;
    border-radius: 10px;
    padding: 4px;
}
nav a.logo {
    display: block;
    align-self: center;
    color: #ffffff;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.15;
    font-size: 1rem;
    white-space: nowrap;
}
nav a.logo b { color: var(--tigers-yellow-text); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline); font-weight: 800; }
nav a.logo span {
    display: block;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
}

/* Logout als gelber CTA – bleibt innerhalb des Rahmens */
nav ul a[href="logout.php"] {
    color: var(--tigers-black);
    background: var(--tigers-yellow);
    border-radius: 10px;
    width: calc(100% - 24px);
    margin: 0 12px;
    padding: 9px 14px;
    border-bottom: none;
    box-sizing: border-box;
}
nav ul a[href="logout.php"] i { color: var(--tigers-black); }
nav li:hover > a[href="logout.php"] {
    background: #ffffff;
    border-bottom-color: transparent;
}
/* Desktop: Logout kompakt statt volle Listenbreite */
@media (min-width: 1026px) {
    /* Container-li zentriert den kompakten Button vertikal in der Leiste,
       damit der gelbe Block nicht die volle Bar-Höhe einnimmt. */
    nav li:has(> a[href="logout.php"]) {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    nav ul a[href="logout.php"] {
        width: auto;
        height: auto;
        align-self: center;
        margin: 0 10px;
        padding: 8px 16px;
        border-bottom: none;
    }
}

/* Zentrierte Inhaltsspalte + schwebender Footer */
.content {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto 1.4rem;
}
footer {
    max-width: 1180px;
    width: 100%;
    margin: auto auto 0;
    border-radius: 16px;
}

/* Auf Mobil: Nav-Drawer dunkel ausfüllen, Rundung beibehalten */
@media (max-width: 1025px) {
    nav ul {
        border-radius: 0 0 16px 16px;
        overflow: hidden;
    }
}

/* =========================================================
   1A Hero + Schnellaktionen (nur Home)
   ========================================================= */

/* Hero als zweispaltiger Glass-Block: links Begrüßung, rechts Badges + Aktionen */
.page-home .home-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.4rem;
    padding: 2.2rem 1.9rem 2rem;
}
.page-home .hero-left { flex: 1 1 auto; min-width: 0; }
.page-home .hero-right {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1.1rem;
}
.page-home .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--tigers-yellow-text); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline);
    margin-bottom: 0.7rem;
}
.page-home .home-hero h2 {
    font-size: 2.9rem;
    font-weight: 900;
    letter-spacing: -1.2px;
    line-height: 1.04;
    color: rgb(var(--ink));
    text-shadow: 0 2px 14px rgba(0,0,0,0.4);
    margin: 0;
}
@media (max-width: 600px) {
    .page-home .home-hero h2 { font-size: 2rem; }
}
.page-home .home-hero h2 span { color: var(--tigers-yellow-text); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline); font-size: inherit; font-weight: inherit; }
.page-home .hero-sub {
    margin-top: 0.9rem;
    color: rgba(var(--ink) / 0.85);
    font-size: 1rem;
    max-width: 52ch;
}
.page-home .hero-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.9rem;
    flex-wrap: wrap;
}
.page-home .hero-date {
    margin-top: 1rem;
    color: rgba(var(--ink) / 0.8);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}
.page-home .hero-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.7rem;
    flex-wrap: wrap;
}
.page-home .btn-hero {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 800;
    font-size: 0.9rem;
    padding: 0.8rem 1.5rem;
    border-radius: 99px;
    cursor: pointer;
    transition: all 0.25s ease;
    border: none;
    text-decoration: none;
}
.page-home .btn-hero.primary {
    background: var(--tigers-yellow);
    color: var(--tigers-black);
    box-shadow: 0 8px 24px rgba(253,238,23,0.3);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--tigers-yellow) 30%, transparent);
}
.page-home .btn-hero.primary:hover { transform: translateY(-2px); }
.page-home .btn-hero.ghost {
    background: rgba(var(--ink) / 0.16);
    color: rgb(var(--ink));
    border: 1px solid rgba(var(--ink) / 0.35);
}
.page-home .btn-hero.ghost:hover { background: rgba(var(--ink) / 0.26); }

/* Hero stapelt auf schmalen Screens wieder untereinander (linksbündig) */
@media (max-width: 860px) {
    .page-home .home-hero {
        flex-direction: column;
        align-items: stretch;
        gap: 1.4rem;
    }
    .page-home .hero-right { align-items: flex-start; }
    .page-home .hero-meta,
    .page-home .hero-actions { justify-content: flex-start; }
}

/* =========================================================
   Startseite ab Schnellaktionen: Zeilen statt Kaesten (2026-09-04)
   ---------------------------------------------------------
   Vorher stand jeder Block als volle Glaskarte untereinander:
   drei Schnellaktions-Kacheln mit Beschreibungstext, jede Nachricht
   als eigene Karte, funf News-Karten mit komplettem Text, dazu
   Portal-Info und Vorlagen. Zusammen rund 2100 px am Desktop und
   uber 3800 px am Handy - bei genau einem Block, der uberhaupt eine
   Handlung verlangt (die Aufgaben, und die stehen weiter oben).

   Jetzt ist alles ab den Schnellaktionen eine Zeile:
     - Schnellaktionen = Pillen (Symbol + Beschriftung, ohne
       Beschreibungstext; die war fuer den ersten Tag gedacht und
       kostete danach 130 px pro Kachel)
     - Nachrichten und News = Klapp-Zeilen (Datum, erste Zeile,
       Pfeil). Die neueste persoenliche Nachricht steht offen.
     - Portal-Info und Vorlagen = eine geschlossene Zeile
       "Hilfe & Vorlagen"

   Hero und Aufgaben bleiben unveraendert.

   Die Klapp-Mechanik laeuft ueber grid-template-rows: 0fr -> 1fr.
   Bewusst KEINE feste max-height: die News-Texte sind unterschiedlich
   lang, und eine geratene Maximalhoehe schneidet entweder ab oder
   laesst die Animation ins Leere laufen.
   ========================================================= */

/* --- Schnellaktionen als Pillen --- */
.page-home .ha-pillen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.page-home .ha-pille {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 1.15rem;
    border-radius: 99px;
    background: rgba(var(--ink) / 0.14);
    border: 1px solid rgba(var(--ink) / 0.24);
    color: rgb(var(--ink));
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.page-home .ha-pille i {
    color: var(--tigers-yellow-text);
    -webkit-text-stroke: 0.4px var(--tigers-yellow-outline);
    text-shadow: 0 0 1px var(--tigers-yellow-outline);
    font-size: 0.95em;
}
.page-home .ha-pille:hover {
    background: rgba(var(--ink) / 0.22);
    border-color: var(--tigers-yellow);
    transform: translateY(-1px);
}
/* Die erste Kachel ist die Hauptaktion der Rolle - sie bleibt gefuellt. */
.page-home .ha-pille-stark {
    background: var(--tigers-yellow);
    border-color: var(--tigers-yellow);
    color: var(--tigers-black);
}
.page-home .ha-pille-stark i {
    color: var(--tigers-black);
    -webkit-text-stroke: 0;
    text-shadow: none;
}
.page-home .ha-pille-stark:hover {
    background: var(--tigers-yellow-hover);
    border-color: var(--tigers-yellow-hover);
    color: var(--tigers-black);
}

/* --- Klapp-Zeile: nur noch "Hilfe & Vorlagen" --- */
.page-home .ha-zeile {
    background: rgba(var(--ink) / 0.14);
    border: 1px solid rgba(var(--ink) / 0.24);
    border-radius: 12px;
    overflow: hidden;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.page-home .ha-zeile[open],
.page-home .ha-zeile.ha-offen {
    background: rgba(var(--ink) / 0.2);
    border-color: var(--tigers-yellow-40);
}
.page-home .ha-zeile-kopf {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.8rem;
    background: none;
    border: none;
    font: inherit;
    color: rgb(var(--ink));
    text-align: left;
    cursor: pointer;
}
.page-home .ha-zeile-kopf:focus-visible {
    outline: 2px solid var(--tigers-yellow);
    outline-offset: -2px;
    border-radius: 11px;
}
.page-home .ha-pfeil {
    flex: 0 0 auto;
    color: rgba(var(--ink) / 0.55);
    font-size: 0.8rem;
    transition: transform 0.25s ease, color 0.25s ease;
}
.page-home .ha-zeile.ha-offen .ha-pfeil {
    transform: rotate(180deg);
    color: var(--tigers-yellow-text);
}
/* Die Hoehe setzt home-zeilen.js in Pixeln und gibt sie nach der
   Animation wieder frei (height: auto), damit lange News-Texte nicht an
   einer geratenen Maximalhoehe abgeschnitten werden.

   Der naheliegende Weg waere grid-template-rows: 0fr -> 1fr gewesen - er
   braucht kein JavaScript und keine Messung. Er wurde verworfen, weil der
   Uebergang beim ERSTEN Klick nicht zuverlaessig anlaeuft: die Spur bleibt
   auf 0 px stehen, der Inhalt erscheint gar nicht (geprueft in Chrome am
   2026-09-04). Ohne transition oeffnete dieselbe Zeile korrekt.

   visibility haelt zugeklappte Links aus der Tabulator-Reihenfolge; ohne
   sie landete der Fokus in einem 0 px hohen Kasten. */
.page-home .ha-zeile-inhalt {
    height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: height 0.28s ease, visibility 0s linear 0.28s;
}
.page-home .ha-zeile.ha-offen .ha-zeile-inhalt {
    visibility: visible;
    transition: height 0.28s ease, visibility 0s linear 0s;
}
.page-home .ha-zeile-inhalt .ha-inhalt-innen {
    padding: 0 0.8rem 0.75rem 0.8rem;
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(var(--ink) / 0.85);
}
.page-home .ha-zeile-inhalt .ha-inhalt-innen p {
    margin: 0 0 0.5rem;
}
.page-home .ha-zeile-inhalt .ha-inhalt-innen p:last-child {
    margin-bottom: 0;
}
.page-home .ha-zeile-inhalt .ha-inhalt-innen strong,
.page-home .ha-zeile-inhalt .ha-inhalt-innen b {
    color: rgb(var(--ink));
}
.page-home .ha-zeile-inhalt .ha-inhalt-innen a {
    color: var(--tigers-yellow-text);
    -webkit-text-stroke: 0.4px var(--tigers-yellow-outline);
    text-shadow: 0 0 1px var(--tigers-yellow-outline);
}

/* --- Kartenraster: Persoenliche Nachrichten und News (2026-09-04, 2. Schritt)
   ---------------------------------------------------------------------
   Die Zeilen waren vertikal sparsam und horizontal verschwenderisch: auf
   dem Desktop ist die Zeile rund 1140 px breit, der laengste News-Titel
   belegte samt Datum 424 px, im Schnitt 348 px. 63 bis 69 % blieben leer.

   Die Spaltenzahl rechnet sich das Raster selbst aus (auto-fill), statt
   sie an feste Bruchstellen zu haengen, die man bei jedem neuen
   Bildschirmformat nachpflegen muesste.

   grid-auto-rows: 1fr gibt ALLEN Karten dieselbe Hoehe - nicht nur denen
   in derselben Reihe, wie es die Voreinstellung taete. Damit das nicht an
   einer einzelnen langen Nachricht zerbricht, ist der Kartentext auf drei
   Zeilen begrenzt; der volle Text steht im Dialog. */
.page-home .ha-karten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    grid-auto-rows: 1fr;
    gap: 0.6rem;
}
.page-home .ha-karte {
    display: flex;
    background: rgba(var(--ink) / 0.14);
    border: 1px solid rgba(var(--ink) / 0.24);
    border-radius: 14px;
    overflow: hidden;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.page-home .ha-karte-kopf {
    flex: 1 1 auto;          /* fuellt die vom Raster vorgegebene Hoehe */
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.8rem;
    background: none;
    border: none;
    font: inherit;
    color: rgb(var(--ink));
    text-align: left;
    cursor: pointer;
}
.page-home .ha-karte-kopf:hover {
    background: rgba(var(--ink) / 0.06);
}
.page-home .ha-karte:hover {
    border-color: var(--tigers-yellow-40);
}
.page-home .ha-karte-kopf:focus-visible {
    outline: 2px solid var(--tigers-yellow);
    outline-offset: -2px;
    border-radius: 13px;
}
/* Die Plakette traegt die Unterscheidung, die vorher die Datumsfarbe
   machte: gelb = an dich gerichtet, grau = Aenderung am Portal. Im Raster
   waeren verstreute gelbe und graue Datumsflecken unruhig gewesen. */
.page-home .ha-plakette {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 0.85rem;
    background: rgba(var(--ink) / 0.16);
    color: rgba(var(--ink) / 0.7);
}
.page-home .ha-plakette-mir {
    background: var(--tigers-yellow);
    color: var(--tigers-black);
}
.page-home .ha-karte-text {
    flex: 1 1 auto;
    min-width: 0;
}
.page-home .ha-karte-titel {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.35;
    color: rgb(var(--ink));
}
.page-home .ha-wann {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.72rem;
    color: rgba(var(--ink) / 0.55);
}
.page-home .ha-karte-mehr {
    flex: 0 0 auto;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: rgba(var(--ink) / 0.45);
    transition: color 0.2s ease;
}
.page-home .ha-karte-kopf:hover .ha-karte-mehr {
    color: var(--tigers-yellow-text);
    -webkit-text-stroke: 0.4px var(--tigers-yellow-outline);
    text-shadow: 0 0 1px var(--tigers-yellow-outline);
}

/* --- Detail-Dialog -------------------------------------------------
   Gleiche Geste wie in der Uebungsdatenbank: Karte anklicken, Detail
   oeffnet als Dialog. Bewusst KEIN Vollbild-Vorhang - ein Kasten von
   560 px laesst die Startseite dahinter stehen, und ein Dialog fuer zwei
   Saetze soll sich nicht wie ein Seitenwechsel anfuehlen. */
.page-home .ha-schleier {
    position: fixed;
    inset: 0;
    z-index: 21000;
    display: grid;
    place-items: center;
    place-items: safe center;   /* hohe Inhalte nicht oben abschneiden */
    padding: 24px 16px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: ha-schleier-auf 0.2s ease-out;
}
.page-home .ha-schleier[hidden] { display: none; }
@keyframes ha-schleier-auf { from { opacity: 0; } to { opacity: 1; } }

body.ha-dialog-offen { overflow: hidden; }

.page-home .ha-dialog {
    width: min(560px, 100%);
    background: var(--bg-flaeche);
    color: rgb(var(--ink));
    border: 1px solid var(--karte-border);
    border-radius: 18px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    animation: ha-dialog-auf 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ha-dialog-auf {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}
.page-home .ha-dialog-kopf {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.1rem 1.1rem 0.75rem;
    border-bottom: 1px solid rgba(var(--ink) / 0.14);
}
.page-home .ha-dialog-kopf .ha-plakette {
    width: 38px;
    height: 38px;
}
.page-home .ha-dialog-kopf-text {
    flex: 1 1 auto;
    min-width: 0;
}
.page-home .ha-dialog-titel {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.3;
    color: rgb(var(--ink));
}
.page-home .ha-dialog-kopf .ha-wann {
    margin-top: 0.2rem;
}
.page-home .ha-dialog-zu {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: rgba(var(--ink) / 0.1);
    border: 1px solid rgba(var(--ink) / 0.2);
    color: rgba(var(--ink) / 0.8);
    cursor: pointer;
    font: inherit;
    /* Beides noetig, sonst sitzt das X nicht mittig:
       - padding: 0 gegen die globale Button-Regel (12px 14px). Mit
         box-sizing: border-box bleibt bei 32x32 sonst eine Inhaltsflaeche
         von 4x8 px, aus der das 12x16 grosse Zeichen nach rechts unten
         herausfaellt - place-items zentriert es brav in diesen 4x8 px.
       - line-height: 1, weil font: inherit die 1.55 vom body mitbringt und
         die Zeilenbox hoeher macht als das Zeichen. */
    padding: 0;
    line-height: 1;
}
.page-home .ha-dialog-zu i {
    display: block;
    line-height: 1;
}
.page-home .ha-dialog-zu:hover { background: rgba(var(--ink) / 0.2); }
.page-home .ha-dialog-zu:focus-visible {
    outline: 2px solid var(--tigers-yellow);
    outline-offset: 2px;
}
.page-home .ha-dialog-koerper {
    padding: 1rem 1.1rem 1.1rem;
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgba(var(--ink) / 0.88);
}
.page-home .ha-dialog-koerper p { margin: 0 0 0.6rem; }
.page-home .ha-dialog-koerper p:last-child { margin-bottom: 0; }
.page-home .ha-dialog-koerper strong,
.page-home .ha-dialog-koerper b { color: rgb(var(--ink)); }
.page-home .ha-dialog-koerper a {
    color: var(--tigers-yellow-text);
    -webkit-text-stroke: 0.4px var(--tigers-yellow-outline);
    text-shadow: 0 0 1px var(--tigers-yellow-outline);
}

/* Blaettern im Dialog. Ohne das hiesse "drei News lesen" dreimal oeffnen
   und schliessen - der Einwand, der gegen einen Dialog fuer zwei Saetze
   spricht. */
.page-home .ha-dialog-fuss {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.1rem;
    border-top: 1px solid rgba(var(--ink) / 0.14);
    background: rgba(0, 0, 0, 0.16);
}
.page-home .ha-blaettern {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border-radius: 99px;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    background: rgba(var(--ink) / 0.1);
    border: 1px solid rgba(var(--ink) / 0.2);
    color: rgba(var(--ink) / 0.85);
    cursor: pointer;
}
.page-home .ha-blaettern:hover:not(:disabled) { background: rgba(var(--ink) / 0.2); }
.page-home .ha-blaettern:disabled { opacity: 0.35; cursor: default; }
/* display:inline-flex schlaegt sonst das hidden-Attribut aus dem
   Browser-Stylesheet - dieselbe Falle wie bei .ueb-detail-scrim. Bei
   einer einzelnen Karte werden die Blaetter-Knoepfe ausgeblendet. */
.page-home .ha-blaettern[hidden] { display: none; }
.page-home .ha-blaettern:focus-visible {
    outline: 2px solid var(--tigers-yellow);
    outline-offset: 2px;
}
.page-home .ha-zaehler {
    margin-left: auto;
    font-size: 0.78rem;
    color: rgba(var(--ink) / 0.55);
}

/* Auf dem Handy fuellt derselbe Dialog fast den Bildschirm. Ein kleiner
   Kasten im kleinen Kasten waere dort sinnlos. */
@media (max-width: 600px) {
    .page-home .ha-schleier { padding: 12px; }
    .page-home .ha-dialog { width: 100%; }
    .page-home .ha-karten { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .page-home .ha-schleier,
    .page-home .ha-dialog { animation: none; }
}

/* Anzahl neben dem Abschnittstitel - ersetzt die Zaehl-Plakette im Hero
   nicht, sondern beantwortet direkt an der Liste, wie viel dahinter liegt. */
.page-home .ha-anzahl {
    font-weight: 700;
    font-size: 0.72rem;
    color: rgba(var(--ink) / 0.6);
    margin-left: 0.4rem;
    letter-spacing: 0;
}

.page-home .ha-mehr {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--tigers-yellow-text);
    -webkit-text-stroke: 0.4px var(--tigers-yellow-outline);
    text-shadow: 0 0 1px var(--tigers-yellow-outline);
}
.page-home .ha-leer {
    margin: 0;
    padding: 0.7rem 0.8rem;
    font-size: 0.88rem;
    color: rgba(var(--ink) / 0.7);
    background: rgba(var(--ink) / 0.08);
    border: 1px solid rgba(var(--ink) / 0.16);
    border-radius: 12px;
}

/* --- Hilfe & Vorlagen: eine geschlossene Zeile statt zweier Abschnitte --- */
.page-home .ha-hilfe {
    margin-top: 0.4rem;
}
.page-home .ha-hilfe .ha-zeile-kopf {
    padding: 0.75rem 0.9rem;
}
.page-home .ha-hilfe-titel {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9rem;
    color: rgba(var(--ink) / 0.92);
}
.page-home .ha-hilfe-titel strong {
    font-weight: 700;
    margin-right: 0.45rem;
}
.page-home .ha-hilfe-titel span {
    color: rgba(var(--ink) / 0.62);
    font-size: 0.85rem;
}
.page-home .ha-hilfe .ha-symbol {
    flex: 0 0 auto;
    color: var(--tigers-yellow-text);
    -webkit-text-stroke: 0.4px var(--tigers-yellow-outline);
    text-shadow: 0 0 1px var(--tigers-yellow-outline);
}
/* Portal-Info und Vorlagen behalten drinnen ihre bisherige Gestaltung
   (.info-box, .doc-grid) - nur der Rahmen ist jetzt zugeklappt. */
.page-home .ha-hilfe .info-box {
    margin: 0 0 0.75rem;
}
.page-home .ha-hilfe .doc-grid {
    margin: 0;
}

/* Auf schmalen Geraeten darf die Beschriftung der Hilfe-Zeile umbrechen,
   statt den Pfeil aus der Zeile zu druecken. */
@media (max-width: 600px) {
    .page-home .ha-hilfe-titel {
        white-space: normal;
    }
    .page-home .ha-hilfe-titel span {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* home-zeilen.js prueft dieselbe Abfrage und setzt die Hoehe dann
       ohne Animation - sonst bliebe sie auf dem Pixelwert stehen, weil
       kein transitionend mehr kommt. */
    .page-home .ha-zeile-inhalt,
    .page-home .ha-zeile.ha-offen .ha-zeile-inhalt,
    .page-home .ha-pfeil,
    .page-home .ha-pille {
        transition: none;
    }
}

/* =========================================================
   1A: Nav + Hero zu EINEM Glass-Panel (nur Home, Desktop)
   Wie im Mockup: Leiste und Hero teilen sich ein Panel, getrennt
   durch eine dünne Linie. Datenseiten + Mobile bleiben unverändert.
   ========================================================= */
@media (min-width: 1026px) {
    /* Nav klebt am Hero: nicht sticky, kein Abstand, nur oben gerundet */
    .page-home nav {
        position: static;
        margin: 0 auto;
        border-bottom: 1px solid rgba(255,255,255,0.18);
        border-radius: 20px 20px 0 0;
        box-shadow: 0 20px 60px rgba(15,15,15,0.28);
    }
    /* Content direkt unter die Nav ziehen, gleiche Spaltenbreite */
    .page-home .content {
        width: 100%;
        max-width: 1180px;
        margin: 0 auto 40px;
    }
    /* Hero schließt nahtlos unten an: oben eckig, keine Doppellinie oben */
    .page-home .home-hero {
        border-top: none !important;
        border-radius: 0 0 22px 22px;
        box-shadow: 0 20px 60px rgba(15,15,15,0.28);
    }
}

/* ===== Profil-Avatar mit Rollen-/Konto-Dropdown im Menü =====
   Ersetzt den früheren gelben Rollen-Chip und den reinen Avatar-Link:
   der Umschalter (echter Rechtewechsel via RolleWechseln.php), „Mein Profil“
   und „Logout“ leben jetzt gemeinsam im Avatar-Dropdown (Variante A). */
nav .nav-profile-li { min-width: auto; }
/* nav-Präfix, damit die Basis-Menüregel (nav .expandable_li > label) nicht
   den Text grau färbt. */
nav .nav-profile-toggle {
    gap: 9px !important;
    color: #ffffff;
    padding: 0 12px;
    background: none;
    border: 0;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
}
.nav-profile-av {
    width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
    object-fit: cover; border: 2px solid var(--tigers-yellow);
    background: rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    transition: box-shadow 0.15s ease;
}
.nav-profile-ph i { color: var(--tigers-yellow); font-size: 1rem; }
.nav-profile-cur {
    display: inline-flex; align-items: center; gap: 6px;
    color: #ffffff; text-transform: uppercase;
    letter-spacing: 0.03em; font-weight: 700; font-size: 0.68rem;
}
.nav-profile-cur > i { color: var(--tigers-yellow); }
.nav-profile-caret { font-size: 0.7rem; color: var(--tigers-yellow); opacity: 0.9; }
nav .nav-profile-li:hover .nav-profile-toggle,
nav .nav-profile-li:focus-within .nav-profile-toggle,
nav .nav-profile-li:hover .nav-profile-cur,
nav .nav-profile-li:focus-within .nav-profile-cur { color: var(--tigers-yellow); }
.nav-profile-li:hover .nav-profile-av,
.nav-profile-li:focus-within .nav-profile-av { box-shadow: 0 0 0 3px var(--tigers-yellow-35); }

/* Dropdown rechtsbündig, sonst läuft es (left:0) über den rechten Rand */
@media (min-width: 1026px) {
    .nav-profile-menu { left: auto; right: 0; width: 250px; }
}

/* =========================================================
   Kommando-Palette (Strg/Cmd+K) - durchsucht die Nav-Menuepunkte
   ========================================================= */
.ti-cmdk-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: inherit;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background 0.15s ease;
}
.ti-cmdk-trigger:hover { background: rgba(255,255,255,0.12); }

.ti-cmdk-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 20000;
    padding: 12vh 16px 0;
}
.ti-cmdk-overlay.is-open { display: block; }
.ti-cmdk-box {
    width: min(560px, 100%);
    margin: 0 auto;
    background: var(--tigers-nav-bg, #1a1a1a);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    overflow: hidden;
}
.ti-cmdk-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
}
.ti-cmdk-input-row input {
    flex: 1 1 auto;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 1rem;
    font-family: inherit;
}
.ti-cmdk-input-row input::placeholder { color: rgba(255,255,255,0.45); }
.ti-cmdk-input-row kbd {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 5px;
    padding: 2px 6px;
}
.ti-cmdk-results {
    list-style: none;
    margin: 0;
    padding: 8px;
    max-height: 50vh;
    overflow-y: auto;
}
.ti-cmdk-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 9px;
    color: rgba(255,255,255,0.85);
    font-size: 0.92rem;
    cursor: pointer;
}
.ti-cmdk-item i { width: 18px; text-align: center; color: rgba(255,255,255,0.5); }
.ti-cmdk-item.is-active { background: var(--tigers-yellow); color: var(--tigers-black); }
.ti-cmdk-item.is-active i { color: var(--tigers-black); }

/* Kopfzeile: Name + E-Mail, kein Hover-Highlight */
.nav-profile-menu .npm-head {
    height: auto; cursor: default;
    display: flex; align-items: center; gap: 11px;
    padding: 13px 16px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.npm-head-av {
    width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
    object-fit: cover; border: 2px solid var(--tigers-yellow);
    background: rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
}
.npm-head-ph i { color: var(--tigers-yellow); font-size: 1rem; }
.npm-head-text { display: flex; flex-direction: column; min-width: 0; }
.npm-head-name { color: #fff; font-weight: 700; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.npm-head-mail { color: rgba(255,255,255,0.55); font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Abschnitts-Label „Ansicht als“ */
.nav-profile-menu .npm-label {
    height: auto; cursor: default; border-bottom: none;
    padding: 9px 16px 4px;
    font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
    /* 0,4 ergab 3,81:1 - siehe 00-basis-nav.css (2026-08-23). */
    color: rgba(255,255,255,0.6);
}

/* Rollen-Einträge (echter Rechtewechsel) */
.nav-profile-menu .npm-role { justify-content: flex-start; gap: 10px; }
.nav-profile-menu .npm-role.active { color: var(--tigers-yellow); font-weight: 700; }
.nav-profile-menu .npm-role.active i { color: var(--tigers-yellow); }
.nav-profile-menu .npm-check { margin-left: auto; color: var(--tigers-yellow); font-size: 0.8rem; flex: 0 0 auto; }
/* Lange Rollennamen ("Sportlicher Leiter") in der Leiste zweizeilig umbrechen,
   statt die Navigation in die Breite zu ziehen. max-width wirkt als Umbruch-
   Hinweis: kurze Rollen (Spieler/Trainer/Admin) bleiben einzeilig, nur der
   zweiteilige Name bricht am Leerzeichen. Kein word-break – Wörter bleiben ganz. */
.nav-profile-cur .nav-profile-role {
    /* font-size: inherit gegen den Universalselektor (* { font-size: 1rem }):
       der setzt 16px DIREKT auf das <span> – ohne das hier bliebe der
       Rollenname die größte Schrift der ganzen Leiste. */
    font-size: inherit;
    white-space: normal;
    max-width: 8ch;
    line-height: 1.1;
    text-align: left;
}
/* Lange Rollennamen ("Sportlicher Leiter") nicht abschneiden: umbrechen + auto Höhe */
.nav-profile-menu .npm-role-li { height: auto; }
.nav-profile-menu .npm-role {
    height: auto; min-height: 44px;
    padding-top: 9px; padding-bottom: 9px;
    align-items: center;
}
.nav-profile-menu .npm-role .npm-role-name {
    min-width: 0; white-space: normal; line-height: 1.2; text-align: left;
    /* s.o.: ohne font-size: inherit setzt * { font-size: 1rem } hier 16px und
       der Rollenname wäre größer als jeder andere Dropdown-Eintrag (0.83rem). */
    font-size: inherit;
}

/* Trennlinie */
.nav-profile-menu .npm-sep {
    height: 1px !important; padding: 0; margin: 6px 0;
    background: rgba(255,255,255,0.1); border: none;
}

/* =========================================================
   Erscheinungsbild: Hell | Dunkel | System (2026-08-24)
   ---------------------------------------------------------
   Drei Segmente nebeneinander statt eines Kippschalters. „System“ ist kein
   Zwischenwert zwischen Hell und Dunkel, sondern eine dritte Entscheidung –
   auf einem Kippschalter liesse sie sich gar nicht abbilden, und alle drei
   Zustaende gleichzeitig zu sehen erspart das Aufklappen einer Liste.
   Der aktive Zustand traegt dasselbe gelbe Feld wie der aktive Treffer in
   der Kommando-Palette, damit „ausgewaehlt“ im Portal ueberall gleich
   aussieht.
   ========================================================= */
.nav-profile-menu .npm-theme-li { height: auto; border-bottom: none; }
.npm-theme { display: block; padding: 8px 16px 12px; }
.npm-theme-lbl {
    display: block; padding-bottom: 6px;
    /* font-size explizit gegen den Universalselektor (* { font-size: 1rem }),
       sonst waere die Beschriftung groesser als die Menuepunkte darueber. */
    font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: rgba(255,255,255,0.6);
}
.npm-seg {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
    padding: 3px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
}
.npm-seg-opt { position: relative; display: block; margin: 0; }
/* Bewusst NICHT display:none – das nimmt das Feld aus der Tab-Reihenfolge,
   und die Gruppe waere per Tastatur nicht mehr erreichbar. Unsichtbar, aber
   ueber dem Segment liegend: der Klick trifft das Feld selbst. */
.npm-seg-opt input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    margin: 0; opacity: 0; cursor: pointer;
}
.npm-seg-txt {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 6px 4px;
    border-radius: 999px;
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em;
    color: rgba(255,255,255,0.72);
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.npm-seg-txt i { font-size: 0.72rem; color: inherit; }
.npm-seg-opt:hover .npm-seg-txt { background: rgba(255,255,255,0.08); color: #fff; }
.npm-seg-opt input:checked + .npm-seg-txt {
    background: var(--tigers-yellow);
    color: var(--tigers-black);
    font-weight: 700;
}
.npm-seg-opt input:checked + .npm-seg-txt i { color: var(--tigers-black); }
.npm-seg-opt input:focus-visible + .npm-seg-txt {
    outline: 2px solid #ffffff; outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .npm-seg-txt { transition: none; }
}

/* Nur ohne JavaScript sichtbar – der Knopf steht im <noscript>. */
.npm-seg-go {
    margin-top: 8px; width: 100%;
    padding: 7px 10px;
    background: transparent; color: var(--tigers-yellow);
    border: 1px solid var(--tigers-yellow); border-radius: var(--radius-small);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
    cursor: pointer;
}
.npm-seg-go:hover { background: var(--tigers-yellow); color: var(--tigers-black); }

/* Im aufgeklappten Handy-Menue auf dieselbe Einrueckung wie die
   Menuepunkte (dort padding: 13px 40px). */
@media (max-width: 1025px) {
    .npm-theme { padding: 10px 40px 14px; }
}

/* Logout NICHT als gelber CTA rendern – die globale a[href="logout.php"]-Regel
   (mit !important) gezielt überschreiben, als normaler Danger-Eintrag. */
.nav-profile-menu .npm-logout {
    background: transparent !important;
    color: #ff6b6b;
    width: 100% !important; height: 100% !important;
    margin: 0 !important; padding: 0 18px !important;
    border-radius: 0 !important; box-shadow: none !important;
    justify-content: flex-start !important; align-self: auto !important;
}
.nav-profile-menu .npm-logout i { color: #ff6b6b; }
.nav-profile-menu li:hover .npm-logout {
    background: rgba(255,107,107,0.12) !important;
    color: #ff8787;
}
.nav-profile-menu li:hover .npm-logout i { color: #ff8787; }
/* Das Desktop-:has()-Flex des Logout-Containers im Dropdown neutralisieren */
nav .nav-profile-menu li:has(> a[href="logout.php"]) {
    display: block; align-items: initial; justify-content: initial;
}

/* ===== Home-Hero Avatar ===== */
.hero-head { display: flex; align-items: center; gap: 1.1rem; }
.hero-avatar { flex: 0 0 auto; display: inline-flex; text-decoration: none; }
.hero-avatar img,
.hero-avatar .hero-avatar-ph {
    width: 76px; height: 76px; border-radius: 50%;
    object-fit: cover; border: 3px solid var(--tigers-yellow);
    background: rgba(var(--ink) / 0.12);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.hero-avatar .hero-avatar-ph i { color: var(--tigers-yellow-text); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline); font-size: 1.9rem; }

/* ===== Profilbild-Upload (Premium) ===== */
.pb-profil { text-align: center; }
.pb-card {
    max-width: none; margin: 8px auto 0; padding: 0;
    background: transparent; border: none; box-shadow: none;
}
.pb-card .progress-ring {
    width: 150px; height: 150px; margin: 0 auto; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.pb-card .progress-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.pb-card .ring-bg { fill: none; stroke: #d9dde3; stroke-width: 8; }
.pb-card .ring-fg {
    fill: none; stroke: var(--tigers-yellow); stroke-width: 8; stroke-linecap: round;
    transition: stroke-dashoffset 0.2s ease;
}
.pb-card .progress-ring.done .ring-fg { stroke: #2ecc71; }
/* Grund des Platzhalter-Kreises, wenn noch kein Profilbild da ist. Bis
   2026-08-26 stand hier var(--white) - eine Variable, die in KEINEM Theme neu
   belegt wird. Im Dunkelmodus leuchtete damit ein 116px grosser weisser Kreis
   auf dunklem Grund, und das graue Platzhalter-Symbol (#b8bdc7) stand mit
   Kontrast 1,88 darauf. Mit --bg-flaeche aendert sich im Hellmodus nichts
   (beide #ffffff), im Dunkelmodus wird der Kreis #242424 und das Symbol
   erreicht 8,24. Liegt ein Bild vor, deckt es den Kreis ohnehin ab. */
.pb-card .image-box {
    width: 116px; height: 116px; border-radius: 50%; overflow: hidden;
    background: var(--bg-flaeche); display: flex; align-items: center; justify-content: center;
}
.pb-card .image-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-card .image-box #pbPlaceholder { color: #b8bdc7; font-size: 2.4rem; }
.pb-card .progress-badge {
    display: none; position: absolute; bottom: 2px; right: 2px;
    background: #1a1a1a; color: var(--tigers-yellow-text); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline);
    border-radius: 999px; padding: 3px 9px; font-size: 0.75rem; font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.pb-card .progress-ring.uploading .progress-badge,
.pb-card .progress-ring.done .progress-badge { display: block; }
.pb-fileinfo {
    margin-top: 14px; display: flex; justify-content: space-between; align-items: center;
    gap: 10px; padding: 8px 12px; background: var(--bg-flaeche); border-radius: 10px;
    font-size: 0.8rem; color: var(--text-color);
}
.pb-fileinfo #pbFileName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-fileinfo .pb-filesize { color: var(--text-placeholder); flex: 0 0 auto; }
.pb-actions { margin-top: 14px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.pb-btn {
    border: none; border-radius: 10px; padding: 9px 14px; font-size: 0.82rem; font-weight: 700;
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    transition: filter 0.15s ease, background 0.15s ease;
}
.pb-btn.primary { background: var(--tigers-yellow); color: #1a1a1a; }
.pb-btn.primary:hover { filter: brightness(0.95); }
/* Der Hintergrund war fest #f0f2f5 (hellgrau), die Schrift kam aber aus
   var(--text-color) - im Dunkelmodus also weiss auf hellgrau, 1,11:1
   (2026-08-23 gemessen). Jetzt eine Flaeche, die mit dem Theme kippt. */
.pb-btn.ghost { background: rgba(var(--ink) / 0.10); color: var(--text-color); }
.pb-btn.ghost:hover { background: rgba(var(--ink) / 0.16); }
.pb-hint { margin-top: 12px; font-size: 0.78rem; color: var(--text-placeholder); }
.pb-status { margin-top: 8px; font-size: 0.85rem; font-weight: 600; min-height: 1.1em; }
.pb-status.ok { color: #219653; }
.pb-status.err { color: var(--danger-red); }

@media (max-width: 640px) {
    .hero-avatar img, .hero-avatar .hero-avatar-ph { width: 58px; height: 58px; }
    .hero-head { gap: 0.8rem; }
    .nav-avatar-label { display: inline; }
}

/* =========================================================
   Profil-Seite – Sidebar + Glass (Konzept 2)
   Gescoped auf .pf, damit andere Datenseiten unberuehrt bleiben.
   ========================================================= */

.content.pf {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

/* Globale Element-Selektoren neutralisieren:
   nav { display:flex; height:64px } und section { height:calc(100vh-80px) }
   duerfen die Profil-Sidebar bzw. die Karten NICHT treffen. */
.pf-card {
    height: auto;
    min-height: 0;
}
.pf .pf-nav {
    position: static;
    top: auto;
    height: auto;
    min-height: 0;
    width: auto;
    max-width: none;
    margin: 0;
    display: block;
    overflow: visible;
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

/* Basis-Regel .content>div (graue Box) fuer das Grid neutralisieren */
.pf > .pf-grid {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

/* ---- Seitenleiste ---- */
.pf-side {
    position: sticky;
    top: 84px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pf-idcard,
.pf-nav,
.pf-savebox,
.pf-card {
    background: var(--karte-bg);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    border: 1px solid var(--karte-border);
    border-radius: 18px;
    box-shadow: 0 12px 36px var(--glass-shadow);
}

.pf-idcard {
    padding: 20px 16px;
    text-align: center;
}

.pf-avatar {
    position: relative;
    width: 104px;
    height: 104px;
    margin: 0 auto;
}

.pf-ring { position: absolute; inset: 0; width: 104px; height: 104px; transform: rotate(-90deg); }
.pf-ring-bg { fill: none; stroke: rgba(var(--ink) / 0.18); stroke-width: 6; }
.pf-ring-fg { fill: none; stroke: var(--tigers-yellow); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 0.6s ease; }

.pf-avatar-inner {
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--tigers-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pf-avatar-inner img { width: 100%; height: 100%; object-fit: cover; }
.pf-avatar-ph { font-size: 1.9rem; font-weight: 900; color: var(--tigers-black); }

.pf-avatar-cam {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--tigers-black);
    border: 2px solid var(--tigers-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pf-avatar-cam i { color: var(--tigers-yellow-text); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline); font-size: 0.8rem; }

.pf-complete { color: var(--tigers-yellow-ink); font-size: 0.78rem; font-weight: 700; margin-top: 10px; }
.pf-name { color: rgb(var(--ink)); font-size: 1.05rem; font-weight: 900; margin-top: 4px; line-height: 1.2; }
.pf-sub { color: rgba(var(--ink) / 0.6); font-size: 0.8rem; margin-top: 3px; }
.pf-sub i { color: var(--tigers-yellow-ink); }

/* ---- Sprungnavigation ---- */
.pf-nav { padding: 8px; }
.pf-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: rgba(var(--ink) / 0.78);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 2px;
}
.pf-nav a i { color: rgba(var(--ink) / 0.5); font-size: 0.95rem; width: 18px; text-align: center; }
.pf-nav a:hover { background: rgba(var(--ink) / 0.08); color: rgb(var(--ink)); }
.pf-nav a.on {
    background: var(--tigers-yellow-12);
    color: var(--tigers-yellow-ink);
    border-left: 3px solid var(--tigers-yellow);
    border-radius: 0 10px 10px 0;
}
.pf-nav a.on i { color: var(--tigers-yellow-ink); }

/* ---- Speichern-Box ---- */
.pf-savebox { padding: 14px; }
.pf-save {
    width: 100%;
    background: var(--tigers-yellow);
    color: var(--tigers-black);
    border: none;
    border-radius: 12px;
    padding: 12px 16px;
    font-weight: 800;
    font-size: 0.9rem;
    cursor: pointer;
}
.pf-save:hover { background: var(--tigers-yellow-hover); transform: translateY(-1px); }
.pf-saved {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #4ade80;
    font-size: 0.82rem;
    margin-top: 10px;
    justify-content: center;
}
.pf-saved i { color: var(--ok-text); }

/* ---- Inhalts-Karten ---- */
.pf-main { display: flex; flex-direction: column; gap: 16px; }
.pf-card { padding: 20px 22px; scroll-margin-top: 90px; }

.pf-sec {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgb(var(--ink));
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: none;
    border-left: 5px solid var(--tigers-yellow);
    padding: 0 0 0 12px;
    margin: 0 0 16px;
}
.pf-sec i { color: var(--tigers-yellow-ink); font-size: 0.95rem; }
/* Zweite Überschrift innerhalb einer Karte (z. B. "Erstellte Dokumente" unter
   den Verträgen). .pf-sec bringt nur margin-bottom mit — ohne diesen Zusatz
   klebt die Unterüberschrift an der Tabelle darüber. */
.pf-sec-sub { margin-top: 26px; }

/* ---- Feld-Raster ----
   Zwoelf Spalten statt zwei (2026-08-25). Vorher gab es genau zwei
   Breiten: halb (Standard) und ganz (.pf-col-2). Eine Hausnummer bekam
   damit so viel Platz wie eine Strasse, eine Postleitzahl so viel wie ein
   Ortsname — die Karten waren doppelt so hoch wie noetig.

   Bewusst ein Baukasten und keine feldeigenen Klassen: Das naechste Feld,
   das irgendwo dazwischen soll, ist damit eine Klasse im HTML statt einer
   neuen CSS-Regel. Und bewusst keine festen Pixelbreiten — die vertragen
   sich nicht mit der Vorgabe einheitlicher Feldhoehen und brechen, sobald
   jemand die Schrift groesser stellt. */
.pf-fields {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px 18px;
}
.pf-field { display: flex; flex-direction: column; gap: 5px; grid-column: span 6; }

.pf-w-2  { grid-column: span 2; }
.pf-w-3  { grid-column: span 3; }
.pf-w-4  { grid-column: span 4; }
.pf-w-5  { grid-column: span 5; }
.pf-w-6  { grid-column: span 6; }
.pf-w-7  { grid-column: span 7; }
.pf-w-8  { grid-column: span 8; }
.pf-w-9  { grid-column: span 9; }
.pf-w-10 { grid-column: span 10; }
.pf-w-11 { grid-column: span 11; }
.pf-w-12 { grid-column: span 12; }

/* Altname aus dem Zwei-Spalten-Raster. Bleibt gueltig, damit eine
   uebersehene Stelle im HTML nicht still auf halbe Breite faellt. */
.pf-col-2 { grid-column: span 12; }

/* Datums- und Zeitangaben in Tabellen duerfen nicht mitten in der
   Jahreszahl umbrechen ("10.08.202" / "6" in der Vertragskarte). */
.pf-nowrap { white-space: nowrap; }

/* ---- Vertragskarte auf schmalen Geraeten ----
   In css/01-login-register-content.css steht seit Langem eine Regel, die
   unter 1024 px JEDE Tabelle im .content stapelt und dabei die Kopfzeile
   ganz ausblendet (.content th { display: none }). Fuer die beiden Tabellen
   der Vertragskarte hiess das: sechs Werte untereinander, ohne dass
   irgendwo steht, was davon Art, Laufzeit oder Status ist.

   Die Kopfzeile zurueckzuholen wuerde nichts helfen — bei einer gestapelten
   Tabelle steht sie einmal oben und die Zuordnung geht trotzdem verloren.
   Stattdessen traegt jede Zelle ihre Beschriftung als data-lbl und zeigt sie
   direkt vor dem Wert.

   Bewusst nur fuer .pf-vertragstabelle und nicht fuer alle Tabellen: Die
   Regel von 2024 betrifft auch Hallenbelegung, Abrechnung und Auswertungen,
   und die sind hier nicht Gegenstand. */
@media (max-width: 1024px) {
    .pf-vertragstabelle tr {
        display: block;
        margin-bottom: 12px;
        padding: 10px 12px;
        border: 1px solid rgba(var(--ink) / 0.16);
        border-radius: 10px;
    }
    .pf-vertragstabelle thead { display: none; }
    .pf-vertragstabelle td {
        display: flex;
        gap: 10px;
        align-items: baseline;
        justify-content: space-between;
        border: none;
        padding: 4px 0;
    }
    .pf-vertragstabelle td::before {
        content: attr(data-lbl);
        flex: 0 0 auto;
        font-size: 0.68rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: rgba(var(--ink) / 0.6);
    }
    /* Die erste Zelle ist die Ueberschrift der Karte — dort waere die
       Beschriftung "Bezeichnung" nur Wiederholung. */
    .pf-vertragstabelle td:first-child {
        display: block;
        font-weight: 700;
        padding-bottom: 8px;
        margin-bottom: 4px;
        border-bottom: 1px solid rgba(var(--ink) / 0.12);
    }
    .pf-vertragstabelle td:first-child::before { content: none; }
}

/* ---- Telefonfeld: Laendervorwahl + Nummer ----
   Zwei Bedienelemente, die wie eines aussehen sollen. Die Vorwahl bekommt
   eine feste Grundbreite und darf NICHT mitwachsen: Der laengste Eintrag
   der Liste ist "Vereinigte Arabische Emirate", und danach duerfte sich
   die Breite des Feldes nicht richten.

   min-width: 0 am Nummernfeld ist noetig, weil ein Flex-Kind sonst nicht
   unter seine Inhaltsbreite schrumpft und die Zeile aufschiebt. */
.ti-tel { display: flex; gap: 8px; align-items: stretch; }
.ti-tel-vorwahl {
    /* Reicht fuer die laengste Vorwahl (+1868) samt Aufklapp-Pfeil.
       Zugeklappt steht dort nur die Vorwahl — telefonfeld.js kuerzt den
       ausgewaehlten Eintrag und schreibt ihn beim Anfassen wieder aus.
       Ohne das Skript steht hier der volle Text und wird beschnitten;
       bedienbar bleibt das Feld in beiden Faellen. */
    flex: 0 0 6.5em;
    min-width: 0;
    text-overflow: ellipsis;
}
.ti-tel-nummer { flex: 1 1 auto; min-width: 0; }

.ti-tel-hinweis {
    display: block;
    margin-top: 4px;
    font-size: 0.72rem;
    line-height: 1.35;
    color: rgba(var(--ink) / 0.7);
}

/* Auf schmalen Geraeten untereinander: nebeneinander blieben fuer die
   Nummer sonst keine 100 px uebrig. */
@media (max-width: 560px) {
    .ti-tel { flex-direction: column; gap: 6px; }
    .ti-tel-vorwahl { flex: 0 0 auto; }
}
.pf-lbl {
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(var(--ink) / 0.7);
}
.pf-lbl small { text-transform: none; letter-spacing: 0; color: rgba(var(--ink) / 0.72); font-weight: 400; }

/* Zurueckhaltender Text in Tabellen (z. B. "Dokument liegt beim Verein").
   Bewusst getrennt von .pf-lbl: Die ist die Klasse der Feldbeschriftungen
   und schreibt in Grossbuchstaben mit Sperrung. */
.pf-dim { color: rgba(var(--ink) / 0.6); }
.pf-field input,
.pf-field select {
    width: 100%;
    background: #fff;
    color: #111;
    border: 1px solid rgba(var(--ink) / 0.35);
    border-radius: 10px;
    padding: 0 12px;
}
.pf-field input:focus,
.pf-field select:focus {
    outline: none;
    border-color: var(--tigers-yellow);
    box-shadow: 0 0 0 3px rgba(253, 238, 23, 0.3);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tigers-yellow) 30%, transparent);
}

/* ---- Nur-Ansicht-Felder (Freigabe, Mannschaft) ---- */
.pf-val {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(var(--ink) / 0.06);
    border: 1px solid rgba(var(--ink) / 0.14);
    border-radius: 10px;
    padding: 10px 12px;
    color: rgb(var(--ink));
    font-size: 0.9rem;
    font-weight: 500;
    min-height: 42px;
}
.pf-val i { color: var(--tigers-yellow-ink); }
/* Handball-Pictogramm im Nur-Ansicht-Feld (frueher inline in profile.php).
   Die Kontur ueber --tigers-yellow-outline ist im Dunkelmodus transparent. */
.pf-ball { width: 1.05em; height: 1.05em; flex: 0 0 auto; }
.pf-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: rgba(var(--ink) / 0.72);
    font-size: 0.78rem;
}
.pf-note i { color: rgba(var(--ink) / 0.72); }

/* ---- Profilbild-Karte im Glass-Look ---- */
.pf-card.pb-profil { text-align: left; }
.pf-card .pb-card {
    max-width: 340px;
    margin: 0 auto;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}
.pf-card .pb-fileinfo,
.pf-card .pb-hint { color: rgba(var(--ink) / 0.75); }
.pf-card .pb-filesize { color: rgba(var(--ink) / 0.5); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .pf > .pf-grid { grid-template-columns: 1fr; }
    .pf-side { position: static; }
    .pf-nav { display: none; }
}
/* Zwei Stufen statt einer (2026-08-25).

   Bis 1024 px steht die Seitenleiste noch neben den Karten und frisst
   Breite — eine Dreierreihe wird dort zu eng. Alles Schmalere faellt
   deshalb auf halbe Breite, alles Breitere auf ganze. Unter 900 px
   verschwindet die Seitenleiste (siehe Block darueber) und die Karten
   werden wieder breiter; wir bleiben trotzdem bis 560 px bei zwei
   Feldern, weil eine Regel, die zweimal hin- und herspringt, beim
   Verkleinern des Fensters unruhig aussieht. */
@media (max-width: 1024px) {
    /* Alles bis 9 wird zur Haelfte, erst ab 10 zur ganzen Breite.

       Die 9 gehoert bewusst zur Haelfte und nicht zur ganzen Breite: Sonst
       bekaeme die Strasse eine eigene Reihe, und Hausnummer und Postleitzahl
       ruecken zusammen — zwei Felder, die inhaltlich nichts miteinander zu
       tun haben. Im Browser nachgemessen, bevor die Regel so stehenblieb.
       Mit 6 bleiben die Paare beieinander: Strasse+Hausnummer, PLZ+Ort,
       Name+Telefon. */
    .pf-w-2, .pf-w-3, .pf-w-4, .pf-w-5,
    .pf-w-7, .pf-w-8, .pf-w-9 { grid-column: span 6; }
    .pf-w-10, .pf-w-11 { grid-column: span 12; }
}
@media (max-width: 560px) {
    .pf-field,
    .pf-w-2, .pf-w-3, .pf-w-4,  .pf-w-5,  .pf-w-6,
    .pf-w-7, .pf-w-8, .pf-w-9,  .pf-w-10, .pf-w-11, .pf-w-12,
    .pf-col-2 { grid-column: span 12; }
}

/* =====================================================================
   WILLKOMMENS-KARTE + HINWEIS-STREIFEN (2026-08-21)
   ---------------------------------------------------------------------
   Die Karte erscheint genau einmal: beim ersten Login eines neuen Kontos.
   Sie liegt als Overlay ueber home.php, es gibt bewusst keine eigene Seite.

   Gestalterisch traegt EIN Element die Karte: die Ausweiskarte links, die
   sich beim Tippen fuellt. Sie ersetzt den Fortschrittsbalken, den man
   hier erwarten wuerde - man sieht, WAS entsteht, statt nur WIE VIEL.
   Alles andere bleibt bewusst ruhig, damit dieses eine Element wirkt.

   Farben und Radien kommen ausschliesslich aus den Variablen in
   00-basis-nav.css, damit der Farb-Editor im Admin auch hier greift.
   ================================================================== */

.wk-overlay {
    position: fixed;
    inset: 0;
    z-index: 21000;                 /* ueber der Kommandopalette (20000) */
    display: grid;
    /* Zwei Zeilen mit Absicht: ist die Karte hoeher als das Fenster (kleiner
       Laptop, Zoom, eingeblendete Tastatur), schneidet zentriertes Grid oben
       ab und der Anfang wird unerreichbar. 'safe' kippt in dem Fall auf
       Anfang; die erste Zeile bleibt als Rueckfall fuer aeltere Browser. */
    place-items: center;
    place-items: safe center;
    padding: 24px 16px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: wk-schleier 0.25s ease-out;
}
@keyframes wk-schleier { from { opacity: 0; } to { opacity: 1; } }

/* Hintergrund darf nicht mitscrollen, solange die Karte laeuft. */
body.wk-offen { overflow: hidden; }

.wk-karte {
    width: min(780px, 100%);
    background: var(--bg-flaeche);
    color: rgb(var(--ink));
    border: 1px solid var(--karte-border);
    border-radius: 20px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    animation: wk-auf 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes wk-auf {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

/* --- Kopf ---------------------------------------------------------
   Der gelbe Strich ist dasselbe Zeichen wie in den Vereins-Mails, in
   denen die Registrierung angekuendigt wird. Wer hier ankommt, hat es
   dort schon gesehen. */
.wk-kopf {
    padding: 26px 30px 20px;
    border-bottom: 1px solid var(--karte-border);
}
.wk-stripe {
    display: block;
    width: 52px;
    height: 4px;
    border-radius: 3px;
    background: var(--tigers-yellow);
    margin-bottom: 16px;
}
.wk-kopf h2 {
    margin: 0 0 8px;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: rgb(var(--ink));
}
.wk-kopf p {
    margin: 0;
    max-width: 56ch;
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(var(--ink) / 0.72);
}

/* --- Koerper ------------------------------------------------------- */
.wk-body {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 26px;
    padding: 24px 30px;
}

/* --- Ausweiskarte (das Signature-Element) --------------------------- */
.wk-ausweis-karte {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 16px 16px;
    background: var(--glass-06);
    border: 1px solid var(--karte-border);
    border-radius: 16px;
}

.wk-foto {
    position: relative;
    width: 112px;
    height: 112px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--glass-12);
    cursor: pointer;
    overflow: visible;
}
.wk-foto img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.wk-foto-ph {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(var(--ink) / 0.6);
}
/* Das hidden-Attribut muss gewinnen. Die Regeln oben setzen display auf
   grid bzw. block und schlagen damit das display:none aus dem Browser-
   Standard - die Initialen standen dadurch trotz vorhandenem Bild noch da
   und ragten ueber die Ausweisdaten (2026-08-21 im Portal gesehen). */
.wk-foto img[hidden],
.wk-foto-ph[hidden] { display: none; }
.wk-foto-cam {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--tigers-yellow);
    color: var(--tigers-black);
    font-size: 0.8rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.wk-foto-ring {
    position: absolute;
    inset: -6px;
    pointer-events: none;
}
.wk-foto-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.wk-ring-bg { fill: none; stroke: transparent; stroke-width: 4; }
.wk-ring-fg {
    fill: none;
    stroke: var(--tigers-yellow);
    stroke-width: 4;
    stroke-linecap: round;
    opacity: 0;
    transition: stroke-dashoffset 0.2s linear;
}
.wk-foto.laedt .wk-ring-bg { stroke: var(--glass-16); }
.wk-foto.laedt .wk-ring-fg { opacity: 1; }
.wk-foto.fertig .wk-foto-cam { background: var(--status-teal); }
.wk-foto:focus-visible {
    outline: 3px solid var(--tigers-yellow);
    outline-offset: 4px;
}

.wk-ausweis-name {
    font-size: 0.98rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.25;
    color: rgb(var(--ink));
}

/* Die drei Zeilen unter dem Namen sind die eigentliche Fortschritts-
   anzeige: sie stehen auf Strich, bis das zugehoerige Feld gefuellt ist. */
.wk-ausweis-daten {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin: 4px 0 0;
}
.wk-ausweis-daten > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-top: 6px;
    border-top: 1px solid var(--karte-border);
    font-size: 0.78rem;
}
.wk-ausweis-daten dt {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(var(--ink) / 0.72);
}
.wk-ausweis-daten dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
    color: rgb(var(--ink));
    transition: color 0.2s ease;
}

.wk-foto-hinweis {
    margin: 12px 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    /* 0.68 statt 0.55: bei 12px Schrift lag der Kontrast im Hellmodus unter
       4,5:1 - und ausgerechnet dieser Satz erklaert, dass das Bild sofort
       gespeichert wird. Der darf nicht der blasseste auf der Karte sein. */
    color: rgba(var(--ink) / 0.72);
}
.wk-foto-status {
    margin: 6px 0 0;
    min-height: 1em;
    font-size: 0.76rem;
    color: rgba(var(--ink) / 0.7);
}
.wk-foto-status.ok  { color: var(--ok-text); }
.wk-foto-status.err { color: var(--err-text); }

/* --- Felder --------------------------------------------------------- */
.wk-felder {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px 16px;
    align-content: start;
}
.wk-feld {
    display: flex;
    flex-direction: column;
    gap: 5px;
    grid-column: span 3;
    min-width: 0;
}
.wk-feld-breit  { grid-column: span 4; }
.wk-feld-schmal { grid-column: span 2; }
.wk-feld-voll   { grid-column: 1 / -1; }

.wk-lbl {
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(var(--ink) / 0.7);
}
.wk-lbl small {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: rgba(var(--ink) / 0.72);
}
.wk-feld input,
.wk-feld select {
    width: 100%;
    /* Hausregel (Block "Einheitliche Feldhoehen"): Hoehe kommt aus
       --feld-hoehe, nie aus dem Innenabstand. */
    height: var(--feld-hoehe);
    min-height: var(--feld-hoehe);
    box-sizing: border-box;
    background: #fff;
    color: #111;
    border: 1px solid rgba(var(--ink) / 0.35);
    border-radius: 10px;
    /* 0 statt 9px senkrecht: dieselbe Regel wie .pf-field im Profil, damit
       alle Felder im Portal gleich hoch sind (Block "Einheitliche
       Feldhoehen" in 00-basis-nav.css). */
    padding: 0 12px;
    font-size: 0.92rem;
}
.wk-feld input:focus,
.wk-feld select:focus {
    outline: none;
    border-color: var(--tigers-yellow);
    box-shadow: 0 0 0 3px var(--tigers-yellow-35);
}
.wk-fehler {
    min-height: 1em;
    font-size: 0.72rem;
    color: var(--err-text);
}

/* --- Fuss ------------------------------------------------------------
   Speichern ist gefuellt, Spaeter ist ein ruhiger Textbutton. Zwei gleich
   starke Knoepfe wuerden suggerieren, beide Wege seien gleich gemeint -
   sind sie nicht. */
.wk-fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 18px 30px 22px;
    border-top: 1px solid var(--karte-border);
    background: var(--glass-06);
}
.wk-btn {
    min-height: 42px;
    padding: 0 22px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
}
.wk-btn:disabled { opacity: 0.55; cursor: default; }
.wk-btn-primary {
    background: var(--tigers-yellow);
    color: var(--tigers-black);
}
.wk-btn-primary:hover:not(:disabled) { background: var(--tigers-yellow-hover); }
.wk-btn-ghost {
    background: transparent;
    color: rgba(var(--ink) / 0.72);
    font-weight: 500;
    padding: 0 10px;
}
.wk-btn-ghost:hover:not(:disabled) {
    color: rgb(var(--ink));
    text-decoration: underline;
}
.wk-btn:focus-visible {
    outline: 3px solid var(--tigers-yellow);
    outline-offset: 3px;
}
.wk-fuss-note {
    flex: 1 1 100%;
    margin: 2px 0 0;
    font-size: 0.78rem;
    color: rgba(var(--ink) / 0.72);
}
.wk-fuss-note a { color: rgb(var(--ink)); }

/* --- Handy: Vollbild-Blatt statt schwebender Karte -------------------
   Acht Felder in einer mittig schwebenden Karte sind auf dem Telefon
   unbenutzbar. Da die meisten Neuanmeldungen vom Handy kommen, ist das
   hier kein Randfall. */
@media (max-width: 720px) {
    .wk-overlay {
        padding: 0;
        place-items: end stretch;
    }
    .wk-karte {
        width: 100%;
        max-height: 100dvh;
        overflow-y: auto;
        border-radius: 20px 20px 0 0;
        border-bottom: none;
    }
    .wk-kopf { padding: 22px 20px 16px; }
    .wk-kopf h2 { font-size: 1.25rem; }
    .wk-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding: 20px;
    }
    .wk-ausweis-karte {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 16px;
    }
    .wk-ausweis-karte .wk-foto { flex: 0 0 auto; width: 84px; height: 84px; }
    .wk-ausweis-karte .wk-foto-ph { font-size: 1.5rem; }
    .wk-ausweis-name { text-align: left; }
    .wk-ausweis-daten { margin: 0; }
    .wk-fuss { padding: 16px 20px 22px; }
    .wk-btn-primary { flex: 1 1 auto; }
}
@media (max-width: 460px) {
    .wk-feld { grid-column: 1 / -1; }
    .wk-feld-breit  { grid-column: span 4; }
    .wk-feld-schmal { grid-column: span 2; }
}

@media (prefers-reduced-motion: reduce) {
    .wk-overlay, .wk-karte { animation: none; }
    .wk-ring-fg, .wk-ausweis-daten dd { transition: none; }
}

/* =====================================================================
   HINWEIS-STREIFEN
   ---------------------------------------------------------------------
   Der ruhige Nachfolger der Karte. Er steht ueber dem Hero-Banner und
   bleibt, bis die acht Felder gefuellt sind. Bewusst kein Alarm-Gelb
   ueber die volle Breite: er soll erinnern, nicht anschreien.
   ================================================================== */
.wk-streifen {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    padding: 12px 18px;
    background: var(--karte-bg);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    border: 1px solid var(--karte-border);
    border-left: 3px solid var(--tigers-yellow);
    border-radius: 14px;
    color: rgb(var(--ink));
    text-decoration: none;
}
.wk-streifen:hover { background: var(--glass-08); }
.wk-streifen:focus-visible {
    outline: 3px solid var(--tigers-yellow);
    outline-offset: 2px;
}

/* Der Ring ist ein reiner conic-gradient - kein SVG, kein Skript. */
.wk-streifen-ring {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: conic-gradient(var(--tigers-yellow) calc(var(--wk-pct) * 1%), var(--glass-12) 0);
}
.wk-streifen-ring > span {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-flaeche);
    font-size: 0.78rem;
    font-weight: 700;
}
.wk-streifen-ring small { font-size: 0.6rem; font-weight: 500; }

.wk-streifen-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.86rem;
    line-height: 1.45;
    color: rgba(var(--ink) / 0.72);
}
.wk-streifen-text strong { display: block; color: rgb(var(--ink)); }
.wk-streifen-go {
    flex: 0 0 auto;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--tigers-yellow-ink);
}
@media (max-width: 640px) {
    .wk-streifen { flex-wrap: wrap; gap: 12px; }
    .wk-streifen-go { width: 100%; }
}

/* --- Quittung nach dem Speichern ------------------------------------ */
.wk-flash {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 11px 16px;
    border-radius: 12px;
    font-size: 0.88rem;
    transition: opacity 0.4s ease;
}
.wk-flash-ok {
    background: var(--ok-bg);
    border: 1px solid var(--ok-border);
    color: var(--ok-text);
}
.wk-flash-warn {
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    color: var(--warn-text);
}
.wk-flash-weg { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
    .wk-flash { transition: none; }
}