/* ═══════════════════════════════════════════════════════════════════
   WEATHERHUNTERS — Designsystem

   Eine Quelle für Farben, Abstände, Schrift und Bausteine. Wird als
   ERSTES geladen; die älteren Stylesheets (dashboard.css, shop.css,
   wh-map.css) liegen darüber und dürfen weiterhin Feinheiten regeln.

   Aufbau:
     1. Marken- und Systemtokens
     2. Grundlagen (Schrift, Fokus, Auswahl)
     3. Bausteine (Knopf, Feld, Karte, Abzeichen, Tabelle, Leerzustand)
     4. Seitenaufbau
     5. Navigation (Kopfleiste, Schublade, Fußleiste fürs Handy)
     6. Angleichung der Altklassen an das System
     7. Handy und Tablet

   Grundsatz für kleine Bildschirme: nicht schrumpfen, sondern anders
   bedienen. Unter 780 px übernimmt eine Fußleiste die Hauptwege, Filter
   wandern in ein Blatt von unten, Tabellen werden zu Karten.
   ═══════════════════════════════════════════════════════════════════ */


/* ─────────── 1. Tokens ─────────── */

:root {

    /* Marke */
    --wh-gold:        #E8C96B;
    --wh-gold-bright: #F2D98A;
    --wh-gold-soft:   rgba(232, 201, 107, .14);
    --wh-gold-line:   rgba(232, 201, 107, .34);

    /* Flächen */
    --wh-bg:          #131417;
    --wh-bg-raised:   #191b1f;
    --wh-surface:     rgba(255, 255, 255, .04);
    --wh-surface-2:   rgba(255, 255, 255, .065);
    --wh-surface-3:   rgba(255, 255, 255, .09);

    /* Linien */
    --wh-line:        rgba(255, 255, 255, .10);
    --wh-line-strong: rgba(255, 255, 255, .18);

    /* Schrift */
    --wh-text:        #f1f1f3;
    --wh-text-dim:    rgba(255, 255, 255, .58);
    --wh-text-faint:  rgba(255, 255, 255, .36);

    /* Bedeutung */
    --wh-good:        #7fd18d;
    --wh-warn:        #E8C96B;
    --wh-bad:         #e88c8c;
    --wh-info:        #8fb6ff;

    /* Abstände — eine Skala, keine Zufallswerte */
    --wh-1: .25rem;  --wh-2: .5rem;   --wh-3: .75rem;
    --wh-4: 1rem;    --wh-5: 1.5rem;  --wh-6: 2rem;
    --wh-7: 3rem;    --wh-8: 4rem;

    /* Rundungen — Knopf und Feld folgen der Registrierung (3 bzw. 4 px),
       damit die Marke über alle Seiten hinweg dieselbe Kante hat.
       Rund bleiben nur Dinge, die keine Bedienelemente sind: Abzeichen,
       Zähler, Avatar. */
    --wh-r-btn:  3px;
    --wh-r-input: 4px;
    --wh-r-sm:   8px;
    --wh-r:      12px;
    --wh-r-lg:   16px;
    --wh-r-pill: 999px;

    /* Schatten */
    --wh-shadow-sm: 0 2px 8px rgba(0, 0, 0, .25);
    --wh-shadow:    0 10px 30px rgba(0, 0, 0, .35);
    --wh-shadow-lg: 0 20px 50px rgba(0, 0, 0, .5);

    /* Ebenen */
    --wh-z-sticky: 30;
    --wh-z-nav:    100;
    --wh-z-drawer: 200;
    --wh-z-sheet:  300;

    /* Bedienflächen: unter 44 px trifft niemand zuverlässig */
    --wh-touch: 44px;

    /* Höhe der Fußleiste am Handy, inklusive Geräteaussparung */
    --wh-tabbar: calc(58px + env(safe-area-inset-bottom, 0px));
}


/* ─────────── 2. Grundlagen ─────────── */

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

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

body {
    color: var(--wh-text);
    text-rendering: optimizeLegibility;
}

/* Sichtbarer Fokus nur bei Tastaturbedienung — für Screenreader und
   Tastaturnutzer unverzichtbar, mit der Maus stört er nicht. */
:focus-visible {
    outline: 2px solid var(--wh-gold);
    outline-offset: 2px;
    border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--wh-gold); color: #16171a; }

img { max-width: 100%; }

/* Kein waagerechtes Scrollen — der häufigste Fehler auf Handys */
html, body { max-width: 100%; overflow-x: clip; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ─────────── 3. Bausteine ─────────── */

/* Knopf */

.wh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wh-2);
    min-height: var(--wh-touch);
    padding: 0 var(--wh-4);
    border: 1px solid transparent;
    border-radius: var(--wh-r-btn);
    font: inherit;
    font-size: .93rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.wh-btn:active { transform: translateY(1px); }
.wh-btn[disabled], .wh-btn.is-disabled { opacity: .45; pointer-events: none; }
.wh-btn svg { width: 17px; height: 17px; flex: none; }

.wh-btn-primary { background: var(--wh-gold); color: #16171a; }
.wh-btn-primary:hover { background: var(--wh-gold-bright); }

.wh-btn-ghost { border-color: var(--wh-line-strong); color: var(--wh-text); background: transparent; }
.wh-btn-ghost:hover { border-color: var(--wh-gold); color: var(--wh-gold); }

.wh-btn-quiet { background: transparent; color: var(--wh-text-dim); padding: 0 var(--wh-3); }
.wh-btn-quiet:hover { color: var(--wh-text); background: var(--wh-surface-2); }

.wh-btn-danger { background: rgba(232, 140, 140, .16); color: var(--wh-bad); }
.wh-btn-danger:hover { background: rgba(232, 140, 140, .26); }

.wh-btn-sm { min-height: 34px; font-size: .84rem; padding: 0 var(--wh-3); }
.wh-btn-lg { min-height: 52px; font-size: 1rem; padding: 0 var(--wh-5); }
.wh-btn-block { width: 100%; }


/* Eingabefelder — 16 px, sonst zoomt iOS beim Antippen */

.wh-field { display: flex; flex-direction: column; gap: var(--wh-1); }
.wh-field > span, .wh-label { font-size: .84rem; color: var(--wh-text-dim); }

input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="url"], input[type="number"], input[type="date"], input[type="datetime-local"],
input[type="tel"], select, textarea {
    max-width: 100%;
    min-height: var(--wh-touch);
    padding: .6rem .85rem;
    font: inherit;
    font-size: 16px;
    color: var(--wh-text);
    background: var(--wh-surface-2);
    border: 1px solid var(--wh-line-strong);
    border-radius: var(--wh-r-input);
    transition: border-color .15s, background .15s;
}
input:hover, select:hover, textarea:hover { border-color: var(--wh-line-strong); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--wh-gold);
    background: var(--wh-surface-3);
}
input::placeholder, textarea::placeholder { color: var(--wh-text-faint); }
textarea { min-height: 90px; resize: vertical; }
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff88' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    background-size: 16px;
    padding-right: 2.2rem;
}
/* Volle Breite nur dort, wo Felder untereinander stehen. In
   Filterzeilen bestimmt der Flex-Container die Breite — sonst
   klappt die ganze Leiste untereinander. */
.wh-field input, .wh-field select, .wh-field textarea,
.acc-form input, .acc-form select, .acc-form textarea,
.shop-field input, .shop-field select, .shop-licence select,
.shop-search input { width: 100%; }

.shop-filters select, .shop-filters input[type="date"] { width: auto; min-width: 9rem; }

input[type="checkbox"], input[type="radio"] {
    width: 18px; height: 18px; min-height: 0;
    accent-color: var(--wh-gold);
    cursor: pointer;
}


/* Karte */

.wh-card {
    background: var(--wh-surface);
    border: 1px solid var(--wh-line);
    border-radius: var(--wh-r);
    padding: var(--wh-5);
}
.wh-card + .wh-card { margin-top: var(--wh-4); }
.wh-card-flush { padding: 0; overflow: hidden; }
.wh-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--wh-4); flex-wrap: wrap;
    padding: var(--wh-4) var(--wh-5);
    background: rgba(255, 255, 255, .028);
    border-bottom: 1px solid var(--wh-line);
}
.wh-card-body { padding: var(--wh-4) var(--wh-5) var(--wh-5); }


/* Abzeichen und Zustände */

.wh-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .2rem .6rem;
    border-radius: var(--wh-r-pill);
    background: var(--wh-surface-3);
    font-size: .74rem; font-weight: 500;
}
.wh-badge-gold { background: var(--wh-gold); color: #16171a; }
.wh-badge-good { background: rgba(127, 209, 141, .18); color: var(--wh-good); }
.wh-badge-warn { background: rgba(232, 201, 107, .18); color: var(--wh-warn); }
.wh-badge-bad  { background: rgba(232, 140, 140, .18); color: var(--wh-bad); }

.wh-note {
    display: flex; gap: var(--wh-2);
    padding: var(--wh-3) var(--wh-4);
    border-radius: var(--wh-r-sm);
    font-size: .88rem; line-height: 1.55;
    background: var(--wh-surface-2); color: var(--wh-text-dim);
}
.wh-note-warn { background: rgba(232, 201, 107, .1); color: var(--wh-warn); }
.wh-note-bad  { background: rgba(232, 140, 140, .1); color: var(--wh-bad); }
.wh-note-good { background: rgba(127, 209, 141, .1); color: var(--wh-good); }


/* Tabelle — am Handy werden Zeilen zu Karten */

.wh-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.wh-table th, .wh-table td {
    text-align: left; padding: var(--wh-3);
    border-bottom: 1px solid var(--wh-line);
    vertical-align: top;
}
.wh-table th {
    font-size: .76rem; font-weight: 500; letter-spacing: .05em;
    text-transform: uppercase; color: var(--wh-text-dim);
}
.wh-table tr:last-child td { border-bottom: 0; }


/* Leerzustand */

.wh-empty { text-align: center; padding: var(--wh-7) var(--wh-4); color: var(--wh-text-dim); }
.wh-empty svg { width: 44px; height: 44px; color: var(--wh-text-faint); margin-bottom: var(--wh-3); }
.wh-empty h3 { margin: 0 0 var(--wh-2); color: var(--wh-text); font-size: 1.05rem; }
.wh-empty p { margin: 0 0 var(--wh-4); }


/* ─────────── 4. Seitenaufbau ─────────── */

.wh-page {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--wh-5) var(--wh-4) var(--wh-8);
}
.wh-page-narrow { max-width: 860px; }

.wh-page-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--wh-4); flex-wrap: wrap;
    margin-bottom: var(--wh-5);
}
.wh-page-head h1 { margin: 0 0 .25rem; }
.wh-page-head p { margin: 0; color: var(--wh-text-dim); font-size: .95rem; }

.wh-section + .wh-section { margin-top: var(--wh-6); }


/* ─────────── 5. Navigation ─────────── */

.wh-nav {
    position: sticky; top: 0; z-index: var(--wh-z-nav);
    background: rgba(19, 20, 23, .88);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--wh-line);
}
.wh-nav-inner {
    display: flex; align-items: center; gap: var(--wh-4);
    max-width: 1440px; margin: 0 auto;
    padding: var(--wh-2) var(--wh-4);
    min-height: 60px;
}
.wh-nav-logo { display: flex; align-items: center; flex: none; }
.wh-nav-logo img { height: 26px; width: auto; display: block; }

.wh-nav-links { display: flex; align-items: center; gap: var(--wh-1); list-style: none; margin: 0; padding: 0; }
.wh-nav-link {
    display: inline-flex; align-items: center; gap: .4rem;
    min-height: 38px; padding: 0 var(--wh-3);
    border-radius: var(--wh-r-pill);
    color: var(--wh-text-dim); text-decoration: none;
    font-size: .93rem; font-weight: 500;
    transition: color .15s, background .15s;
}
.wh-nav-link:hover { color: var(--wh-text); background: var(--wh-surface-2); }
.wh-nav-link.is-active { color: var(--wh-gold); background: var(--wh-gold-soft); }

.wh-nav-right { display: flex; align-items: center; gap: var(--wh-2); margin-left: auto; }

.wh-nav-icon {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    color: var(--wh-text); text-decoration: none;
    border: 0; background: transparent; cursor: pointer;
    transition: background .15s;
}
.wh-nav-icon:hover { background: var(--wh-surface-2); }
.wh-nav-icon svg { width: 20px; height: 20px; }
.wh-nav-count {
    position: absolute; top: 1px; right: 1px;
    min-width: 17px; height: 17px; padding: 0 4px;
    display: grid; place-items: center;
    border-radius: var(--wh-r-pill);
    background: var(--wh-gold); color: #16171a;
    font-size: .68rem; font-weight: 600;
}
.wh-nav-count-bad { background: var(--wh-bad); color: #2a1010; }

/* Konto-Menü */
.wh-menu { position: relative; }
.wh-menu-panel {
    position: absolute; right: 0; top: calc(100% + 8px);
    min-width: 230px;
    background: var(--wh-bg-raised);
    border: 1px solid var(--wh-line-strong);
    border-radius: var(--wh-r);
    box-shadow: var(--wh-shadow);
    padding: var(--wh-2);
    display: none;
}
.wh-menu.is-open .wh-menu-panel { display: block; }
.wh-menu-panel a, .wh-menu-panel button {
    display: flex; align-items: center; justify-content: space-between; gap: var(--wh-2);
    width: 100%; min-height: 40px; padding: 0 var(--wh-3);
    border: 0; background: transparent;
    border-radius: var(--wh-r-sm);
    color: var(--wh-text); text-decoration: none;
    font: inherit; font-size: .9rem; text-align: left; cursor: pointer;
}
.wh-menu-panel a:hover, .wh-menu-panel button:hover { background: var(--wh-surface-2); }
.wh-menu-head { padding: var(--wh-2) var(--wh-3) var(--wh-3); border-bottom: 1px solid var(--wh-line); margin-bottom: var(--wh-2); }
.wh-menu-head strong { display: block; font-size: .92rem; }
.wh-menu-head span { font-size: .8rem; color: var(--wh-text-dim); word-break: break-all; }
.wh-menu-sep { height: 1px; background: var(--wh-line); margin: var(--wh-2) 0; }

.wh-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid var(--wh-gold-line);
    background: var(--wh-surface-2);
    color: var(--wh-gold); font-size: .82rem; font-weight: 600;
    cursor: pointer; overflow: hidden;
}
.wh-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Schublade — eingefahrenes Panel von rechts.
   Die Handy-Schublade der Navigation ist am 24.08.2026 samt Burger-Knopf
   entfallen (.wh-burger, .wh-drawer-title standen nur für sie hier).
   Die Regeln bleiben, weil das Warenkorb-Panel darauf aufbaut:
   .wh-cart trägt .wh-drawer, sein Kasten .wh-drawer-panel. */
.wh-drawer {
    position: fixed; inset: 0; z-index: var(--wh-z-drawer);
    background: rgba(8, 9, 11, .6);
    backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none;
    transition: opacity .2s;
}
.wh-drawer.is-open { opacity: 1; pointer-events: auto; }
.wh-drawer-panel {
    position: absolute; inset: 0 0 0 auto;
    width: min(320px, 86vw);
    background: var(--wh-bg-raised);
    border-left: 1px solid var(--wh-line);
    padding: var(--wh-4) var(--wh-4) calc(var(--wh-tabbar) + var(--wh-4));
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .24s ease;
}
.wh-drawer.is-open .wh-drawer-panel { transform: none; }
.wh-drawer-panel a {
    display: flex; align-items: center; gap: var(--wh-3);
    min-height: 50px; padding: 0 var(--wh-3);
    border-radius: var(--wh-r-sm);
    color: var(--wh-text); text-decoration: none; font-size: 1rem;
}
.wh-drawer-panel a:hover, .wh-drawer-panel a.is-active { background: var(--wh-surface-2); color: var(--wh-gold); }

/* Fußleiste fürs Handy */
.wh-tabbar {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--wh-z-nav);
    background: rgba(19, 20, 23, .96);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--wh-line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.wh-tabbar-inner { display: flex; }
.wh-tab {
    position: relative;
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 58px;
    color: var(--wh-text-faint); text-decoration: none;
    font-size: .68rem; letter-spacing: .01em;
}
.wh-tab svg { width: 21px; height: 21px; }

/* Beschriftungen bleiben einzeilig (28.08.2026): Seit die
   Wissensdatenbank mitfaehrt, teilen sich sechs Punkte die Breite eines
   Handys. Ein Umbruch in "Forecast" oder "Knowledge" wuerde die Leiste
   hoeher machen und die Symbole verschieben — abgeschnitten wird lieber
   gar nichts, dafuer schrumpft die Schrift weiter unten. */
.wh-tab span { white-space: nowrap; }

.wh-tab.is-active { color: var(--wh-gold); }
.wh-tab-count {
    position: absolute; top: 6px; left: calc(50% + 6px);
    min-width: 16px; height: 16px; padding: 0 4px;
    display: grid; place-items: center;
    border-radius: var(--wh-r-pill);
    background: var(--wh-gold); color: #16171a;
    font-size: .62rem; font-weight: 700;
}
.wh-tab-count-bad { background: var(--wh-bad); color: #2a1010; }


/* ─────────── 6. Altklassen an das System angleichen ───────────
   Damit bestehende Seiten ohne Umbau einheitlich aussehen. */

.btn, .sbtn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--wh-2);
    min-height: var(--wh-touch); padding: 0 var(--wh-4);
    border: 1px solid transparent; border-radius: var(--wh-r-btn);
    font: inherit; font-size: .93rem; font-weight: 500; line-height: 1;
    text-decoration: none; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.btn-gold, .sbtn-primary { background: var(--wh-gold); color: #16171a; }
.btn-gold:hover, .sbtn-primary:hover { background: var(--wh-gold-bright); }
.btn-ghost, .sbtn-ghost { background: transparent; border-color: var(--wh-line-strong); color: var(--wh-text); }
.btn-ghost:hover, .sbtn-ghost:hover { border-color: var(--wh-gold); color: var(--wh-gold); }
.sbtn-quiet { background: transparent; color: var(--wh-text-dim); }
.sbtn-quiet:hover { color: var(--wh-text); background: var(--wh-surface-2); }

.settings-card, .shop-card, .ccard, .sc-tool, .sc-status {
    border-radius: var(--wh-r);
    border-color: var(--wh-line);
}
.settings-hint, .shop-tile-meta, .cart-meta { color: var(--wh-text-dim); }

/* Admin-Seiten erben Farben und Bedienflächen */
body > .top { border-bottom-color: var(--wh-line); }
.wrap button, .act button { min-height: 38px; }


/* Rendering ueberspringen, was nicht im Blick ist. Bei langen
   Bildrastern spart das spuerbar Zeit beim ersten Aufbau; die
   Groessenangabe verhindert Springen beim Scrollen. */
.shop-tile, .sc-tool, .wh-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 320px;
}

/* Bilder duerfen das Layout nicht verschieben */
.shop-tile-media, .arch-card img { aspect-ratio: 4 / 3; }


/* ─────────── 7. Handy und Tablet ─────────── */

/* Tablet: engere Raster, Karte kleiner */
@media (max-width: 1024px) {
    .wh-page { padding-left: var(--wh-3); padding-right: var(--wh-3); }
    .shop-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
    #archMap { height: min(46vh, 380px); }
}

/* Tablet-Band 781-1199 px: die Kopfleiste bricht auf zwei Zeilen um
   (ToDo #96, 28.08.2026).

   Ausgangslage, gemessen: In einer Zeile braucht die Leiste rund
   1186 px — Schriftzug 314, sieben bis acht Hauptwege 580-612,
   rechts die Gast-Knoepfe 195, dazu Abstaende und Polster. Darunter
   stand sie ueber den Rand: 113,7 px bei 1024, 237,7 bei 900,
   337,7 bei 800. Seit #95 schneidet 'overflow-x: clip' den Ueberstand
   ab, statt die Seite zu verschieben — die hinteren Wege (Teams,
   Wissen) und bei 900/1024 sogar "Anmelden"/"Registrieren" waren
   damit einfach weg.

   Warum nicht das Handy-Muster hochziehen: Die Fussleiste traegt
   fuenf Wege (Bildarchiv, Fotofeed, Start, Radar, Forecasts).
   Mitglieder, Teams und Wissen stehen NICHT darin — fuer Mitglieder
   liegen zwei davon im Avatar-Menue, ein Gast hat gar kein Menue.
   Die Fussleiste ab 1199 px zu zeigen haette also im ganzen Band
   drei Ziele unerreichbar gemacht. Ein unerreichbarer Weg ist
   schlimmer als ein abgeschnittener Rand.

   Warum nicht enger setzen: Auf 800 px muessten 338 px weichen.
   Selbst mit kleinerer Schrift, engeren Polstern und geschrumpften
   Knoepfen blieben fuer den Schriftzug nur zweistellige Pixel — er
   waere dann keine sieben Pixel hoch. Das ist keine Loesung.

   Also zwei Zeilen: oben Schriftzug und Konto- bzw. Gast-Seite,
   darunter die Hauptwege ueber die volle Breite. Kein neues
   Bedienkonzept, kein Ziel weniger, und unter 781 px bleibt alles so,
   wie #95 es beschlossen hat. */
@media (min-width: 781px) and (max-width: 1199px) {

    .wh-nav-inner { flex-wrap: wrap; row-gap: var(--wh-2); }

    /* Reihenfolge statt Markup-Umbau: Die rechte Seite rueckt vor die
       Hauptwege, damit sie noch in Zeile eins passt. Ohne das waeren
       es drei Zeilen — die Hauptwege belegen ja die volle Breite. */
    .wh-nav-right { order: 2; }
    .wh-nav-main  { order: 3; flex: 1 0 100%; min-width: 0; }

    /* Falls die Beschriftungen einmal laenger werden (andere Sprache,
       ein Weg mehr), bricht die Reihe um, statt wieder ueberzustehen. */
    .wh-nav-links { flex-wrap: wrap; row-gap: 2px; }
}

/* Handy: eigenes Bedienkonzept */
@media (max-width: 780px) {

    /* backdrop-filter kostet auf Handys bei jedem Scrollschritt
       Rechenzeit. Deckende Flaechen sehen gleich aus und scrollen
       spuerbar fluessiger. */
    .wh-nav, .wh-tabbar { backdrop-filter: none; background: #16171a; }
    .wh-drawer { backdrop-filter: none; }
    .shop-filters { backdrop-filter: none; background: #16171a; }

    /* Die Kopfleisten-Links weichen am Handy der Fußleiste. Was dort
       keinen Platz findet — Mitglieder und Teams —, steht seit dem
       24.08.2026 im Avatar-Menü; vorher führte nur die Schublade
       dorthin. */
    .wh-nav-links { display: none; }
    /* Auch die <nav>-Huelle: sonst bleibt ein leerer Flex-Posten
       samt Luecke in der Zeile stehen — und eine leere Landmarke
       im Vorlesebaum. Der Weg durchs Portal ist am Handy die
       Fussleiste, die selbst ein <nav> ist. */
    .wh-nav-main { display: none; }
    .wh-tabbar { display: block; }

    /* Platz für die Fußleiste, sonst verdeckt sie den letzten Knopf */
    body { padding-bottom: var(--wh-tabbar); }

    .wh-nav-inner { min-height: 54px; gap: var(--wh-2); }

    /* Der Schriftzug ist 1500x124 gross, also 12:1 breit — bei 22 px
       Hoehe sind das 266 px. Neben den beiden Gast-Knoepfen passte
       das auf 375-px-Geraeten nicht mehr in die Zeile: die Leiste
       war dort 119 px zu breit (ToDo #95).

       Deshalb gibt das Logo am Handy nach. Es nimmt die natuerliche
       Hoehe, solange Platz ist, und schrumpft erst, wenn die Zeile
       eng wird — 'height:auto' + 'max-height' halten dabei das
       Seitenverhaeltnis, 'max-width' begrenzt auf den Rest der
       Zeile. Ueber rund 430 px aendert sich dadurch nichts. */
    .wh-nav-logo { flex: 0 1 auto; min-width: 0; }
    .wh-nav-logo img { height: auto; max-height: 22px; max-width: 100%; }

    /* Die Knopfgruppe rechts ist der Weg hinein und behaelt ihre
       Breite; umbrechen darf ihre Beschriftung nicht. */
    .wh-nav-right { flex: none; }
    .wh-nav-right .wh-btn { white-space: nowrap; }

    .wh-page { padding-top: var(--wh-4); }
    .wh-page-head { margin-bottom: var(--wh-4); }
    .wh-page-head h1 { font-size: 1.6rem; }

    .wh-card { padding: var(--wh-4); border-radius: var(--wh-r-sm); }
    .wh-card-head, .wh-card-body { padding-left: var(--wh-4); padding-right: var(--wh-4); }

    /* Tabellen werden zu Karten: Kopfzeile verschwindet, jede Zelle
       bekommt ihre Beschriftung aus data-label vorangestellt. */
    .wh-table thead { display: none; }
    .wh-table, .wh-table tbody, .wh-table tr, .wh-table td { display: block; width: 100%; }
    .wh-table tr {
        background: var(--wh-surface); border: 1px solid var(--wh-line);
        border-radius: var(--wh-r-sm); padding: var(--wh-2);
        margin-bottom: var(--wh-3);
    }
    .wh-table td { border: 0; padding: .35rem var(--wh-2); }
    .wh-table td[data-label]::before {
        content: attr(data-label) " ";
        display: block; font-size: .72rem; text-transform: uppercase;
        letter-spacing: .05em; color: var(--wh-text-faint);
    }

    /* Formulare: ein Feld pro Zeile, volle Breite für Knöpfe */
    .acc-row, .shop-filter-row { grid-template-columns: 1fr !important; }
    .acc-form .btn, .acc-form .sbtn, .shop-licence .sbtn { width: 100%; }

    /* Bedienflächen vergrößern */
    .wh-nav-icon { width: var(--wh-touch); height: var(--wh-touch); }
    .shop-tab { min-height: 40px; }
}

/* Schmale Handys: die Gast-Kopfleiste wird kompakter.
   Nur dort — die Leiste des angemeldeten Nutzers traegt rechts
   den Avatar (38 px) und war nie zu breit. .wh-btn kommt in der
   Navigation ausschliesslich bei den Gast-Knoepfen vor. */
@media (max-width: 420px) {
    .wh-nav-inner { padding-left: var(--wh-3); padding-right: var(--wh-3); }
    .wh-nav-right { gap: 6px; }
    .wh-nav-right .wh-btn-sm { padding: 0 10px; font-size: .78rem; }
}

/* Sehr schmale Geräte */
@media (max-width: 380px) {
    .wh-nav-inner { padding-left: var(--wh-2); padding-right: var(--wh-2); }
    .wh-nav-right { gap: 4px; }
    .wh-nav-right .wh-btn-sm { padding: 0 8px; font-size: .74rem; }
    .shop-grid { grid-template-columns: 1fr 1fr; gap: var(--wh-2); }

    /* Sechs Punkte auf 360 px sind 60 px je Punkt (28.08.2026). Die
       laengste Beschriftung ist "Knowledge" im Englischen: neun Zeichen
       auf .62rem = 9,9 px Schriftgroesse ergeben rund 50 px — das passt,
       eine kleinere Schrift oder gar Kuerzungen braucht es nicht. Der
       Sperrsatz faellt trotzdem weg (er kostet auf neun Zeichen fast
       einen ganzen Buchstaben), und die Symbole geben ein Pixel ab,
       damit Bild und Wort zusammen nicht hoeher werden als der Punkt. */
    .wh-tab { font-size: .62rem; letter-spacing: 0; }
    .wh-tab svg { width: 20px; height: 20px; }
}

/* Querformat am Handy: Fußleiste stört, Platz ist knapp */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 460px) {
    .wh-tabbar { display: none; }
    body { padding-bottom: 0; }
    .wh-nav { position: static; }
}


/* Drucken: Rechnungen und Listen sauber auf Papier */
@media print {
    .wh-nav, .wh-tabbar, .wh-drawer, .shop-filters, .wh-btn, .sbtn { display: none !important; }
    body { background: #fff; color: #000; }
    .wh-card { border-color: #ccc; break-inside: avoid; }
}


/* ─────────── Dialogfenster (Rechtstexte) ─────────── */

.wh-modal {
    position: fixed; inset: 0; z-index: var(--wh-z-sheet, 300);
    display: grid; place-items: center;
    padding: var(--wh-4, 1rem);
    background: rgba(8, 9, 11, .72);
    opacity: 0; transition: opacity .18s;
}
.wh-modal.is-open { opacity: 1; }

.wh-modal-box {
    display: flex; flex-direction: column;
    width: min(760px, 100%);
    max-height: min(86dvh, 900px);
    background: var(--wh-bg-raised, #191b1f);
    border: 1px solid var(--wh-line-strong, rgba(255,255,255,.18));
    border-radius: var(--wh-r, 12px);
    box-shadow: var(--wh-shadow-lg, 0 20px 50px rgba(0,0,0,.5));
    transform: translateY(12px) scale(.99);
    transition: transform .18s ease;
    outline: none;
}
.wh-modal.is-open .wh-modal-box { transform: none; }

.wh-modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--wh-3, .75rem);
    padding: var(--wh-4, 1rem) var(--wh-5, 1.5rem);
    border-bottom: 1px solid var(--wh-line, rgba(255,255,255,.1));
}
.wh-modal-head h2 { margin: 0; font-size: 1.15rem; letter-spacing: .04em; }

.wh-modal-body {
    padding: var(--wh-4, 1rem) var(--wh-5, 1.5rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    font-size: .92rem; line-height: 1.65;
}
.wh-modal-body h1 { font-size: 1.3rem; margin: 0 0 var(--wh-3, .75rem); }
.wh-modal-body h2 { font-size: 1.02rem; margin: var(--wh-5, 1.5rem) 0 var(--wh-2, .5rem); }
.wh-modal-body .card,
.wh-modal-body .box {
    background: var(--wh-surface, rgba(255,255,255,.04));
    border: 1px solid var(--wh-line, rgba(255,255,255,.1));
    border-radius: var(--wh-r-sm, 8px);
    padding: var(--wh-3, .75rem) var(--wh-4, 1rem);
    margin-bottom: var(--wh-3, .75rem);
}
.wh-modal-body a { color: var(--wh-gold, #E8C96B); }
.wh-modal-loading { color: var(--wh-text-faint, rgba(255,255,255,.36)); }

.wh-modal-foot {
    display: flex; align-items: center; justify-content: space-between; gap: var(--wh-3, .75rem);
    padding: var(--wh-3, .75rem) var(--wh-5, 1.5rem) var(--wh-4, 1rem);
    border-top: 1px solid var(--wh-line, rgba(255,255,255,.1));
}

/* Am Handy von unten einfahren — das kennt man aus Apps */
@media (max-width: 640px) {
    .wh-modal { align-items: end; padding: 0; }
    .wh-modal-box {
        width: 100%; max-height: 92dvh;
        border-radius: var(--wh-r-lg, 16px) var(--wh-r-lg, 16px) 0 0;
        transform: translateY(100%);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .wh-modal.is-open .wh-modal-box { transform: none; }
    .wh-modal-head, .wh-modal-body, .wh-modal-foot { padding-left: var(--wh-4, 1rem); padding-right: var(--wh-4, 1rem); }
}


/* ─────────── Warenkorb-Vorschau im Kopf ─────────── */

.wh-cart-panel {
    display: flex; flex-direction: column;
    padding: 0;
    width: min(420px, 92vw);
}

.wh-cart-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--wh-3);
    padding: var(--wh-4) var(--wh-4) var(--wh-3);
    border-bottom: 1px solid var(--wh-line);
    flex: none;
}
.wh-cart-head h2 { margin: 0; font-size: 1.1rem; letter-spacing: .04em; }

.wh-cart-body {
    flex: 1; overflow-y: auto; overscroll-behavior: contain;
    padding: var(--wh-2) var(--wh-3);
}

.wh-cart-item {
    display: grid; grid-template-columns: 62px 1fr auto;
    gap: var(--wh-3); align-items: center;
    padding: var(--wh-2);
    border-radius: var(--wh-r-sm);
    text-decoration: none; color: inherit;
    min-height: auto;
}
.wh-cart-item:hover { background: var(--wh-surface-2); }
.wh-cart-item img { width: 62px; height: 46px; object-fit: cover; border-radius: 6px; display: block; }
.wh-cart-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wh-cart-item-text strong { font-size: .9rem; font-weight: 500; line-height: 1.3; }
.wh-cart-item-meta { font-size: .76rem; color: var(--wh-text-dim); line-height: 1.35; }
.wh-cart-item-price { font-size: .92rem; font-weight: 600; white-space: nowrap; }

.wh-cart-foot {
    flex: none;
    padding: var(--wh-3) var(--wh-4) calc(var(--wh-4) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--wh-line);
    background: rgba(255, 255, 255, .028);
}
.wh-cart-sums {
    display: grid; grid-template-columns: 1fr auto;
    gap: .3rem var(--wh-4);
    margin: 0 0 var(--wh-3);
    font-size: .9rem;
}
.wh-cart-sums dt { color: var(--wh-text-dim); }
.wh-cart-sums dd { margin: 0; text-align: right; }
.wh-cart-sums .wh-cart-total {
    padding-top: var(--wh-2);
    border-top: 1px solid var(--wh-line);
    font-size: 1.08rem; font-weight: 600; color: #fff;
}

/* Am Handy von unten statt von rechts — der Daumen ist unten */
@media (max-width: 640px) {
    .wh-cart .wh-drawer-panel {
        inset: auto 0 0 0;
        width: 100%;
        max-height: 86dvh;
        border-left: 0;
        border-top: 1px solid var(--wh-line-strong);
        border-radius: var(--wh-r-lg) var(--wh-r-lg) 0 0;
        transform: translateY(100%);
    }
    .wh-cart.is-open .wh-drawer-panel { transform: none; }
}


/* ─── Nachricht des Tages ───
   Schmales Band unter der Kopfleiste. Bewusst im Fluss und nicht
   fixiert: Eine Ansage soll man wegscrollen können. */

.wh-motd {
    background: linear-gradient(180deg, rgba(232,201,107,.14), rgba(232,201,107,.06));
    border-bottom: 1px solid rgba(232,201,107,.28);
}
.wh-motd-good { background: linear-gradient(180deg, rgba(127,209,141,.14), rgba(127,209,141,.05)); border-bottom-color: rgba(127,209,141,.3); }
.wh-motd-warn { background: linear-gradient(180deg, rgba(232,201,107,.18), rgba(232,201,107,.06)); }
.wh-motd-bad  { background: linear-gradient(180deg, rgba(232,140,140,.16), rgba(232,140,140,.05)); border-bottom-color: rgba(232,140,140,.32); }

.wh-motd-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    align-items: baseline;
    gap: var(--wh-3);
    padding: var(--wh-2) var(--wh-4);
    font-size: .9rem;
    line-height: 1.5;
}

.wh-motd-inner strong { color: #fff; flex: none; }
.wh-motd-inner span { color: rgba(255,255,255,.78); }

.wh-motd-close {
    margin-left: auto;
    flex: none;
    background: none;
    border: 0;
    color: rgba(255,255,255,.55);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 var(--wh-1);
    min-width: var(--wh-touch);
    min-height: var(--wh-touch);
}
.wh-motd-close:hover { color: #fff; }

@media (max-width: 640px) {
    .wh-motd-inner { flex-wrap: wrap; padding: var(--wh-2) var(--wh-3); font-size: .85rem; }
    .wh-motd-close { margin-left: auto; }
}


/* ─── Foto-Upload aus dem Bildarchiv ─── */

.wh-modal-wide .wh-modal-box { max-width: 720px; }

.wh-upform { display: block; }

.wh-upform-note {
    margin: 0 0 var(--wh-4, 1rem);
    font-size: .9rem;
    line-height: 1.6;
    color: var(--wh-text-muted, rgba(255,255,255,.62));
}

.wh-upform-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--wh-3, .75rem);
}

.wh-upform-grid .full { grid-column: 1 / -1; }

.wh-upform-grid label {
    display: block;
    font-size: .8rem;
    color: var(--wh-text-muted, rgba(255,255,255,.62));
    margin-bottom: .25rem;
}

.wh-upform-grid input[type=text],
.wh-upform-grid input[type=date],
.wh-upform-grid input[type=file],
.wh-upform-grid select,
.wh-upform-grid textarea {
    width: 100%;
    /* 16 px, sonst zoomt iOS beim Antippen in das Feld hinein */
    font-size: 16px;
}

.wh-upform-hint {
    display: block;
    margin-top: .25rem;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--wh-text-faint, rgba(255,255,255,.4));
}

.wh-upform-checks {
    display: grid;
    gap: var(--wh-2, .5rem);
    margin: var(--wh-4, 1rem) 0;
    padding: var(--wh-3, .75rem);
    border: 1px solid var(--wh-line, rgba(255,255,255,.09));
    border-radius: var(--wh-r-input, 4px);
    background: rgba(255,255,255,.03);
}

.wh-upform-check {
    display: flex;
    gap: var(--wh-2, .5rem);
    align-items: flex-start;
    font-size: .88rem;
    line-height: 1.5;
    cursor: pointer;
}

.wh-upform-check input {
    /* Bedienfläche gross genug für den Daumen */
    width: 20px; height: 20px;
    margin-top: .1rem;
    flex: none;
    accent-color: var(--wh-gold, #E8C96B);
}

.wh-upform-sale {
    font-size: .84rem;
    padding: var(--wh-2, .5rem) var(--wh-3, .75rem);
    border-left: 2px solid var(--wh-gold, #E8C96B);
    background: rgba(232,201,107,.07);
    border-radius: 0 var(--wh-r-input, 4px) var(--wh-r-input, 4px) 0;
}

.wh-upform-actions {
    display: flex;
    gap: var(--wh-2, .5rem);
    justify-content: flex-end;
    margin-top: var(--wh-4, 1rem);
}

@media (max-width: 640px) {
    .wh-upform-grid { grid-template-columns: 1fr; }
    .wh-upform-actions { flex-direction: column-reverse; }
    .wh-upform-actions .wh-btn { width: 100%; }
}


/* ─── Feedback ───
   Der Reiter klebt am rechten Rand, weil er dort nie einen Inhalt
   verdeckt und trotzdem auf jeder Seite an derselben Stelle steht.
   Über der Karte (z-index 1200) muss er nicht liegen — unter dem
   Dialog (1400) schon. */

.wh-fb-tab {
    position: fixed;
    right: 0;
    top: 62%;
    z-index: 1150;
    transform: translateY(-50%) translateX(calc(100% - 42px));
    display: flex;
    align-items: center;
    gap: var(--wh-2, .5rem);
    padding: .7rem .9rem;
    background: var(--wh-gold, #E8C96B);
    color: #101014;
    border: 0;
    border-radius: var(--wh-r-btn, 3px) 0 0 var(--wh-r-btn, 3px);
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: -2px 0 12px rgba(0,0,0,.35);
    /* Nur transform bewegt sich — das läuft auf der Compositor-Ebene */
    transition: transform .16s ease;
}

.wh-fb-tab svg { width: 20px; height: 20px; flex: none; }
.wh-fb-tab:hover,
.wh-fb-tab:focus-visible { transform: translateY(-50%) translateX(0); }

@media (max-width: 780px) {
    /* Am Handy würde der Reiter über der Fußleiste kleben — dort
       reicht der Eintrag in der Schublade. */
    .wh-fb-tab { display: none; }
}

.wh-fb-form { display: block; }
.wh-fb-intro { margin: 0 0 var(--wh-4, 1rem); font-size: .92rem; line-height: 1.6; color: var(--wh-text-muted, rgba(255,255,255,.62)); }

.wh-fb-types { display: flex; flex-wrap: wrap; gap: var(--wh-2, .5rem); margin-bottom: var(--wh-4, 1rem); }
.wh-fb-types label { position: relative; }
.wh-fb-types input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.wh-fb-types span {
    display: block;
    padding: .5rem .9rem;
    border: 1px solid var(--wh-line, rgba(255,255,255,.09));
    border-radius: var(--wh-r-btn, 3px);
    font-size: .9rem;
    cursor: pointer;
}
.wh-fb-types input:checked + span {
    background: rgba(232,201,107,.14);
    border-color: rgba(232,201,107,.5);
    color: var(--wh-gold, #E8C96B);
}
.wh-fb-types input:focus-visible + span { outline: 2px solid rgba(232,201,107,.6); outline-offset: 2px; }

.wh-fb-label { display: block; font-size: .82rem; color: var(--wh-text-muted, rgba(255,255,255,.62)); margin: 0 0 .25rem; }
.wh-fb-form textarea,
.wh-fb-form input[type=file] { width: 100%; font-size: 16px; }
.wh-fb-hint { display: block; margin: .25rem 0 var(--wh-4, 1rem); font-size: .78rem; color: var(--wh-text-faint, rgba(255,255,255,.4)); }

.wh-fb-check { display: flex; gap: var(--wh-2, .5rem); align-items: center; margin: var(--wh-3, .75rem) 0; font-size: .9rem; }
.wh-fb-check input { width: 20px; height: 20px; accent-color: var(--wh-gold, #E8C96B); }

.wh-fb-ctx { margin: var(--wh-4, 1rem) 0; font-size: .85rem; }
.wh-fb-ctx summary { cursor: pointer; color: var(--wh-text-muted, rgba(255,255,255,.62)); }
.wh-fb-ctx ul { list-style: none; margin: var(--wh-2, .5rem) 0 0; padding: var(--wh-3, .75rem); border: 1px solid var(--wh-line, rgba(255,255,255,.09)); border-radius: var(--wh-r-input, 4px); }
.wh-fb-ctx li { display: flex; gap: var(--wh-3, .75rem); padding: .15rem 0; }
.wh-fb-ctx b { flex: 0 0 11rem; font-weight: 400; color: var(--wh-text-faint, rgba(255,255,255,.4)); }
.wh-fb-ctx span { color: var(--wh-text-muted, rgba(255,255,255,.62)); word-break: break-word; }

.wh-fb-msg { margin: var(--wh-3, .75rem) 0 0; padding: .6rem .8rem; border-left: 2px solid var(--wh-bad, #e88c8c); background: rgba(232,140,140,.1); font-size: .88rem; }

.wh-fb-actions { display: flex; gap: var(--wh-2, .5rem); justify-content: flex-end; margin-top: var(--wh-4, 1rem); }

.wh-fb-done { text-align: center; padding: var(--wh-6, 2rem) 0; }
.wh-fb-done h3 { margin: 0 0 .4rem; font-size: 1.1rem; }
.wh-fb-done p { margin: 0 0 var(--wh-4, 1rem); color: var(--wh-text-muted, rgba(255,255,255,.62)); }

@media (max-width: 640px) {
    .wh-fb-ctx li { flex-direction: column; gap: 0; }
    .wh-fb-ctx b { flex: none; }
    .wh-fb-actions { flex-direction: column-reverse; }
    .wh-fb-actions .wh-btn { width: 100%; }
}


/* ─── Bedienelemente des Systems ───

   Die aufgeklappte Liste einer Auswahl zeichnet der Browser, nicht das
   Stylesheet. Ohne diesen Hinweis nimmt er sein helles Standardschema —
   und unsere helle Schrift steht dann auf hellem Grund.

   color-scheme regelt in einem Zug: Aufklapplisten, Datums- und
   Zeitauswahl, Bildlaufleisten, Kontrollkästchen, Auswahlknöpfe. */

:root { color-scheme: dark; }

/* Rückfall für Browser, die das Schema in der Liste ignorieren */
select option,
select optgroup {
    background-color: #1b1c21;
    color: #e9e9ec;
}

select option:checked,
select option:hover {
    background-color: #2a2c33;
    color: #fff;
}

/* Ein deaktiviertes Feld soll deaktiviert aussehen, nicht kaputt */
select:disabled,
input:disabled,
textarea:disabled {
    opacity: .55;
    cursor: not-allowed;
}


/* ─── Blättern (Members/Teams) ───

   Zahlen und Pfeile sind gleich groß und quadratisch. Das hat zwei
   Gründe: die Zeile bleibt ruhig, egal ob dort 1 oder 12 steht, und
   jedes Ziel ist auch mit dem Daumen sicher zu treffen.

   Farblich hält sich der Pager zurück — er ist Beiwerk unter der
   Liste. Nur die aktuelle Seite bekommt Gold, damit man ohne Suchen
   sieht, wo man steht. */

.cpager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin: 1.6rem 0 .4rem;
    flex-wrap: wrap;
}

.cpager a,
.cpager span {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .6rem;
    border-radius: var(--wh-r-sm);
    text-decoration: none;
    font-size: .9rem;
    line-height: 1;
}

.cpager a {
    background: var(--wh-surface);
    border: 1px solid var(--wh-line);
    color: var(--wh-text-dim);
    transition: background .15s, border-color .15s, color .15s;
}

.cpager a:hover {
    background: var(--wh-surface-2);
    border-color: var(--wh-gold-line);
    color: var(--wh-gold);
}

.cpager .cur {
    background: var(--wh-gold-soft);
    border: 1px solid var(--wh-gold-line);
    color: var(--wh-gold);
    font-weight: 600;
}

/* Auslassung und der Pfeil am Rand sind keine Ziele, also sehen sie
   auch nicht wie welche aus: kein Rahmen, keine Fläche, nur Schrift. */
.cpager .dots,
.cpager .off {
    background: none;
    border: 0;
    color: var(--wh-text-faint);
}


/* ─── Namen als Weg zum Profil ───

   Ueberall, wo ein Benutzername steht — unter einem Foto, an einem
   Blogbeitrag, in der Kachel des Bildarchivs —, fuehrt ein Klick auf
   ihn zum Profil. Der Name soll dabei ein Name bleiben und nicht zur
   bunten Verlinkung werden: Er behaelt die Farbe seines Umfelds und
   traegt nur eine zurueckhaltende goldene Unterstreichung, die erst
   beim Ueberfahren voll aufleuchtet.

   Zwei Bauformen tragen dieselbe Klasse. Das echte <a> — und dort,
   wo ringsum schon ein Link oder ein Knopf sitzt und ein zweiter
   darin ungueltiges HTML waere, ein <span role="link">. Fuer dieses
   <span> steht hier auch cursor: pointer; ein Link bringt den Zeiger
   von selbst mit, ein <span> nicht.

   Die dritte Zeile gilt den Karten-Popups: Leaflet wird nach diesem
   Stylesheet geladen und faerbt sonst mit .leaflet-container a jeden
   Link darin blau. */

.wh-namelink,
a.wh-namelink,
.leaflet-container a.wh-namelink {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(232, 201, 107, .5);
    cursor: pointer;
}

.wh-namelink:hover,
.wh-namelink:focus-visible,
a.wh-namelink:hover,
a.wh-namelink:focus-visible,
.leaflet-container a.wh-namelink:hover,
.leaflet-container a.wh-namelink:focus-visible {
    color: var(--wh-gold);
    text-decoration-color: var(--wh-gold);
}


/* ─────────── Namensweg mit Mini-Avatar ───────────

   Vor dem Namen steht jetzt sein Gesicht: ein 20-Pixel-Kreis mit
   Profilbild oder Initialen. Avatar und Name liegen im selben <a> —
   ein Klickziel, kein zweites daneben.

   Das <a> bleibt bewusst ein gewoehnliches Inline-Element und wird
   NICHT zum Flex-Container. Der Name steht meist mitten im Satz
   ("von ● Sturmjaeger · gestern"); ein Flex-Kasten wuerde die
   Grundlinie des Namens gegen die des Umgebungstextes verschieben
   und beim Zeilenumbruch als Block stehenbleiben. Der Kreis haengt
   sich stattdessen ueber vertical-align an die Schriftlinie.

   Die Unterstreichung wandert dabei vom <a> auf den Namenstext:
   Browser ziehen die Linie sonst auch unter den Avatarkreis, weil
   der als atomarer Inline-Kasten Teil derselben Zeile ist. */

.wh-namelink-avatar,
a.wh-namelink-avatar,
.leaflet-container a.wh-namelink-avatar {
    text-decoration: none;
}

.wh-namelink-avatar > .cavatar-xs {
    vertical-align: -.32em;
    margin-right: .3rem;
}

.wh-namelink-avatar > .wh-namelink-txt {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(232, 201, 107, .5);
}

.wh-namelink-avatar:hover > .wh-namelink-txt,
.wh-namelink-avatar:focus-visible > .wh-namelink-txt {
    text-decoration-color: var(--wh-gold);
}


/* ─── Support-Reiter ───
   Der zweite Reiter am rechten Rand (25.08.2026). Er sitzt genau
   unter dem Feedback-Reiter und teilt dessen Klasse .wh-fb-tab —
   damit gelten Lage, Ausfahr-Bewegung und die Mobil-Regel
   (unter 780px ausblenden) automatisch auch für ihn. Hier steht nur
   der Versatz nach unten und die ruhigere Farbe: Zwei goldene Reiter
   übereinander wären zwei gleich laute Angebote.

   Der Versatz rechnet mit der Höhe des Reiters darüber (≈ 44px) plus
   einem schmalen Spalt. calc() auf top statt eines zweiten
   translateY, weil translateY hier schon die Zentrierung trägt — ein
   zweiter Wert darin müsste beide Zustände (Ruhe und :hover) doppelt
   führen. */

.wh-fb-tab-support {
    top: calc(62% + 52px);
    background: var(--wh-surface-2, #23252a);
    color: var(--wh-text, #f2f3f5);
    border: 1px solid var(--wh-line, rgba(255,255,255,.14));
    border-right: 0;
    text-decoration: none;
}

.wh-fb-tab-support:hover,
.wh-fb-tab-support:focus-visible {
    background: var(--wh-surface-3, #2c2f35);
}