/**
 * WebAlbum – Oberfläche (Designsystem)
 * Farben aus dem Branding kommen als CSS-Variablen (--wa-primary …) aus dem Layout.
 *
 * @package WebAlbum
 * @version 0.9.0
 *
 * Changelog:
 * 0.9.0 – Video in Alben: Galerie-Kachel (.wa-video-badge, .wa-video-play, .wa-video-duration, Ersatzkachel
 *         .wa-video-fallback ohne ffmpeg-Vorschaubild – mit color-mix() auf var(--wa-primary), also auch im
 *         späteren Hell/Dunkel-Schalter richtig), Großansicht (.wa-lb-video, .wa-lb-kind), Diashow (.wa-ss-video)
 * 0.8.0 – Admin „Sprachen & Texte“: .wa-input.is-open (noch unübersetztes Textfeld, gelb wie .wa-tile--accent)
 * 0.7.7 – Geschenk-Zeile mit mehreren Boni: .wa-tile-note--warn (orange, wenn ein Bonus in 14 Tagen oder weniger abläuft)
 * 0.7.6b – Fehler behoben: Hinweis-Badge war in Reihen-/Mosaik-Ansicht auf dem Handy immer aus, egal was im Admin
 *          eingestellt war (.wa-gal--rows .wa-credit / .wa-gal--masonry .wa-credit { display:none } entfernt – die
 *          bestehenden Einstellungen „In der Galerie anzeigen“ und „Auf dem Handy kleiner“ (.wa-credit--shrink) regeln das jetzt allein)
 * 0.7.6a – Fehler behoben: .wa-ss-credit (Badge in der Diashow) war an Bühne/Bildschirm verankert (position: fixed);
 *          bei Fotos mit anderem Seitenverhältnis als der Bildschirm lag der Badge dadurch neben statt auf dem Foto.
 *          Jetzt position: absolute mit Basiswert, die genaue Lage setzt gallery.js (positionCredit) je Bild neu,
 *          am tatsächlichen Bildrand statt am Bildschirmrand; „auf dem Handy oben“ zieht ebenfalls dorthin um
 * 0.7.6 – Hinweis-Badge: .wa-credit nur noch mit CSS-Variablen (--b-…) aus Branding::badgeStyle(), damit Handy-Verkleinerung
 *         und Diashow-Sonderfälle per @media weiter wirken; .wa-ss-credit „nach oben klappen“ auf dem Handy war durch
 *         .wa-credit--shrink (zwei Klassen, stärker) überstimmt worden – jetzt mit .wa-ss-credit.wa-credit--shrink behoben;
 *         Admin-Reiter „Hinweis-Badge“ (.wa-badge-icon-grid, .wa-badge-pos-grid, .wa-badge-color-row, .wa-badge-preview-frame)
 * 0.7.5c – Hamburger-Menü am Handy/Tablet (.wa-nav-toggle-wrap, .wa-nav-toggle) ersetzt das seitliche Scrollen der Menüleiste (.wa-nav)
 * 0.7.4e – Text-Links: kein Unterstrich, beim Überfahren wächst er von der Mitte nach außen; Knopf „?“ ohne Unterstrich; Feld „Text unter Alben/Profilen“
 * 0.7.4d – Eigene Schriften: Karte (.wa-font-card, Ablagefeld .wa-font-drop, Liste .wa-font-row), Dialoge (.wa-font-dlg, .wa-font-files, Lizenz .wa-font-lic)
 * 0.7.4c – Reiter „Suchmaschinen & Teilen“: Zähler, Vorschaubild, Vorschauen Google/WhatsApp/Facebook (.wa-serp, .wa-wa-*, .wa-fb-card), „Kommt automatisch“ + Kopf-Code (.wa-brand-auto, .wa-brand-code)
 * 0.7.4b – Fußzeile aus dem Branding (.wa-footer-line, .wa-heart), Knopf „?“ (.wa-help-btn), About-Dialog Zeilen (.wa-about-rows), Reiter „Name & Über“ / „Fußzeile & Links“ (.wa-brand-*)
 * 0.7.4a – Branding „Aussehen“ (.wa-brand-*, Vorschau .wa-bprev-*); Seitenleiste mit eigener Farbe (--wa-sidebar, Standard = Hintergrund); eigenes Logo (.wa-logo-own); Reiter „bald“ (.wa-tab.is-soon)
 * 0.7.3d – Handy: Kopfzeile der öffentlichen Seiten bricht um (kein seitliches Wischen); Tabellen-Rahmen hält versteckte Texte fest (Admin → Benutzer nicht mehr zu breit); Farbe Mediathek im Speicher-Balken (.is-library)
 * 0.7.3c – Öffentliche Seite „Neuigkeiten“ (.wa-news-page, .wa-news-post-*)
 * 0.7.3b – Neuigkeiten: Admin-Liste + Editor (.wa-news-*), Kachel in der Übersicht (.wa-news-tile-*), Leiste „Wichtig“ (.wa-newsbar-*), Archiv, Menü-Zahl .wa-count--primary
 * 0.7.3a – Mediathek (.wa-lib-*, .wa-rss-*), .wa-head-actions, Vorschau im Papierkorb .wa-trash-media
 * 0.7.2b – Hinweis-Leiste gesperrtes Album (.wa-modnote-*), Freigabe-Anfragen (.wa-mod-request, .wa-modreq-*)
 * 0.7.2 – Alben & Moderation: .wa-mod-*, .wa-lock-* (Dialog), .wa-pill.is-locked, .wa-count--dark, Leiste Prüfansicht
 * 0.7.1b – Handy: violette Leiste „Als Benutzer ansehen“ bricht um, kein seitliches Wischen mehr
 * 0.7.1 – „Mein WebAlbum“: .wa-myalbum-* (Karte, Leiste, Dialog, Kennzeichen)
 * 0.7.0d – .wa-check-action
 * 0.7.0c – Mesh (.wa-mesh-*)
 * 0.7.0b2 – .wa-design-last
 * 0.7.0b – Hintergrund der Albumseite (.wa-bg-*), öffentliche Seite mit eigenem Hintergrund (.wa-has-bg, .wa-tone-light)
 * 0.7.0a – Reiter „Darstellung“: .wa-design-*, .wa-undo-toast, .wa-note--dashed/--link
 * 0.6.9g – Großansicht im Vollbild
 * 0.6.9f – Speicher-Anzeige blendet sanft aus (.is-fading)
 * 0.6.9d – Originale: .wa-badge--orig, .wa-orig-line, .wa-check-help
 * 0.6.9b – Album-Kennzeichen (.wa-album-badges, .wa-pill.is-pw rot, .is-private); größere Kennzeichen auf Album-Karten; .wa-cover-badge entfernt
 * 0.6.9 – Admin-Übersicht grafisch (.wa-adm-*, .wa-tile--accent, .wa-initials, .wa-hbars--tight, Balken-Farben is-blocked/is-private)
 * 0.6.8b – Balken im Dashboard wieder sichtbar (Name .wa-bar war doppelt vergeben → Statistik jetzt .wa-chart-bar); Balken ab 80 % orange, ab 95 % rot; Punkte im Systemcheck wieder grün (.wa-dot nur noch in Sprach-Tabs überschrieben); Übersicht: geteilter Balken, Legende, Aufrufe-Balken, Album-Karten gleich hoch
 * 0.6.8 – Rechtliches: Admin-Editor (Werkzeugleiste, Platzhalter), öffentliche Rechtsseiten, Lizenzen
 * 0.6.7b – „Als Benutzer ansehen“: Speichern-Knöpfe der automatisch speichernden Formulare ausgeblendet
 * 0.6.6b – Admin-Übersicht: Kacheln wieder nebeneinander (Regel der Statistik-Seite griff dort mit)
 * 0.6.6 – Anzeige „Gespeichert“; Speichern-Knöpfe ausgeblendet, wenn automatisch gespeichert wird
 * 0.6.5 – Leiste „Als Benutzer ansehen“, nur-lesen-Darstellung
 * 0.6.4 – Profilseite bearbeiten (Bilder, Fokuspunkt, Links, Alben); öffentliche Profilseite; Hinweisseite
 * 0.6.3 – Mosaik; Diashow; Passwort-Seite; Statistik; Optionen Passwort/Befristung; Suchmaschinen-Karte
 * 0.6.2b – Infospalte: Hinweis zu Bildinformationen, „keine Beschreibung“
 * 0.6.2 – Veröffentlichen (Segment-Auswahl, Farbmuster); öffentliches Album (Reihen, Raster, Hinweis-Badge); Großansicht Creme/Dunkel; schmales Fenster mit Maus: Pfeile über dem Bild
 * 0.6.1 – Upload, Fortschritt, Bilder-Raster, Bild bearbeiten, Badges, Papierkorb-Vorschau
 * 0.6.0 – Meine Alben (Kacheln, Dialog, Inhaltsregeln), Album bearbeiten, Papierkorb des Nutzers
 * 0.5.3 – Zahlungshinweis-Box; Kennzeichen kostenpflichtig
 * 0.5.2 – Dashboard-Kacheln mit Balken; Tarif-Kasten; „Mein Tarif“; Tarifwahl bei Registrierung
 * 0.5.1 – Tarif & Bonus beim Benutzer; Tabelle „Was darf …“
 * 0.5.0 – Tarif-Editor: Liste + Editor; Sprach-Umschalter; Kontingente; Funktionen; Leistungsliste
 * 0.4.1 – Papierkorb; Gefahrenbereich; Schutz-Karte; Warnleiste mit Knopf
 * 0.4.0 – Registrierung; Tabs; Schalter; Auswahlkarten; Mail-Protokoll; Sitzungen; Leerzustand; Zähler
 * 0.3.0 – Zwei-Faktor: Schrittanzeige; QR; Codefeld; Sicherheitscodes; Druckansicht
 * 0.2.0 – App-Layout mit Seitenleiste; Anmeldeseite; Formulare; Tabelle; Meldungen; Kacheln; Stärkeanzeige
 * 0.1.0 – Erstanlage; Tokens; Schriften; Kopfzeile; Karten; Buttons; Pills; Dialog; Menü; Systemcheck
 */

/* ---------- Schriften (lokal, OFL) ---------- */
@font-face { font-family: "Instrument Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/instrument-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/bricolage-grotesque-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2"); }

/* ---------- Grundwerte (Fallback, falls keine Branding-Variablen) ---------- */
:root {
    --wa-primary: #146C60;
    --wa-primary-rgb: 20, 108, 96;
    --wa-on-primary: #FFFFFF;
    --wa-secondary: #C9822B;
    --wa-secondary-rgb: 201, 130, 43;
    --wa-on-secondary: #1C1B19;
    --wa-radius: 12px;

    --wa-bg: #F4F3EF;
    --wa-surface: #FFFFFF;
    --wa-surface-2: #ECEAE4;
    --wa-border: #E4E1DA;
    --wa-border-strong: #D5D1C8;
    --wa-text: #1C1B19;
    --wa-text-2: #3D3B37;
    --wa-muted: #5E5B55;
    --wa-faint: #6B6860;

    --wa-ok: #1F6B3F;       --wa-ok-bg: #E3F1E8;
    --wa-warn: #7A4A0E;     --wa-warn-bg: #F7EBD9;
    --wa-fail: #8F1D14;     --wa-fail-bg: #FBE4E2;
    --wa-info: #2F4A8A;     --wa-info-bg: #E4EAF6;

    --wa-font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --wa-font-display: "Bricolage Grotesque", var(--wa-font);
    --wa-shadow-lg: 0 24px 60px rgba(28, 27, 25, .28);
    --wa-focus: 0 0 0 4px rgba(var(--wa-primary-rgb), .18);
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.wa-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--wa-bg);
    color: var(--wa-text);
    font-family: var(--wa-font);
    font-size: 16px;
    line-height: 1.5;
}
h1, h2, h3 { font-family: var(--wa-font-display); letter-spacing: -.01em; margin: 0; }
a { color: var(--wa-primary); }
:focus-visible { outline: 2px solid var(--wa-primary); outline-offset: 2px; }
.wa-muted { color: var(--wa-muted); }
.wa-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wa-eyebrow { display: block; font-family: var(--wa-font); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--wa-faint); }

/* ---------- Kopf- und Fußzeile ---------- */
.wa-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 16px clamp(16px, 4vw, 48px);
}
.wa-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--wa-text); }
.wa-brand-name { font-family: var(--wa-font-display); font-weight: 700; font-size: 19px; }
.wa-logo {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--wa-primary); color: var(--wa-on-primary);
}
.wa-topbar-actions { display: flex; align-items: center; gap: 10px; }
.wa-main { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 24px clamp(16px, 4vw, 48px) 48px; }
.wa-footer {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 22px;
    padding: 28px 16px; font-size: 14px; color: var(--wa-muted);
}
.wa-footer a { color: var(--wa-muted); text-decoration: none; }
.wa-footer a:hover { color: var(--wa-text); }

/* ---------- Buttons ---------- */
.wa-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 0 20px; border-radius: var(--wa-radius);
    border: 1px solid transparent; font: inherit; font-size: 15px; font-weight: 600;
    text-decoration: none; cursor: pointer; transition: filter .15s, background .15s;
}
.wa-btn--primary { background: var(--wa-primary); color: var(--wa-on-primary); }
.wa-btn--primary:hover { filter: brightness(.94); color: var(--wa-on-primary); }
.wa-btn--ghost { background: var(--wa-surface); border-color: var(--wa-border-strong); color: var(--wa-text); }
.wa-btn--soft { background: rgba(var(--wa-primary-rgb), .12); color: var(--wa-primary); }
.wa-btn.is-disabled { opacity: .55; cursor: not-allowed; }
.wa-icon-btn {
    width: 44px; height: 44px; border-radius: var(--wa-radius);
    border: 1px solid #DEDBD3; background: var(--wa-surface); color: var(--wa-text-2);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.wa-icon-btn--soft { border: none; background: var(--wa-bg); width: 40px; height: 40px; }

/* ---------- Sprachumschalter / Menü ---------- */
.wa-dropdown { position: relative; }
.wa-lang-btn {
    height: 44px; padding: 0 14px; border-radius: var(--wa-radius);
    border: 1px solid #DEDBD3; background: var(--wa-surface); color: var(--wa-text-2);
    display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.wa-dropdown.is-open .wa-lang-btn { border-color: var(--wa-primary); box-shadow: var(--wa-focus); }
.wa-dropdown.is-open .wa-chevron { transform: rotate(180deg); }
.wa-menu {
    display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 50;
    min-width: 200px; padding: 6px; border-radius: 14px;
    background: var(--wa-surface); border: 1px solid var(--wa-border);
    box-shadow: 0 12px 32px rgba(28, 27, 25, .16);
}
.wa-dropdown.is-open .wa-menu { display: flex; flex-direction: column; }
.wa-menu-item {
    display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 9px;
    color: var(--wa-text); text-decoration: none; font-size: 15px;
}
.wa-menu-item:hover { background: var(--wa-bg); color: var(--wa-text); }
.wa-menu-item.is-active { background: rgba(var(--wa-primary-rgb), .1); color: var(--wa-primary); font-weight: 600; }

/* ---------- Karten, Pills, Raster ---------- */
.wa-card {
    background: var(--wa-surface); border: 1px solid var(--wa-border);
    border-radius: calc(var(--wa-radius) + 6px); padding: 24px;
}
.wa-card-title { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.wa-pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 99px;
    background: var(--wa-surface-2); color: #4A4843; white-space: nowrap;
}
.wa-pill.is-ok { background: var(--wa-ok-bg); color: var(--wa-ok); }
.wa-pill.is-warn { background: var(--wa-warn-bg); color: var(--wa-warn); }
.wa-pill.is-fail { background: var(--wa-fail-bg); color: var(--wa-fail); }
.wa-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 860px) { .wa-grid-2 { grid-template-columns: 1fr; } }

/* ---------- Startseite ---------- */
.wa-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; padding-top: 40px; }
@media (max-width: 860px) { .wa-hero { grid-template-columns: 1fr; padding-top: 8px; } }
.wa-hero h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1.02; letter-spacing: -.02em; margin: 12px 0 16px; }
.wa-lead { font-size: 19px; color: var(--wa-text-2); margin: 0 0 28px; max-width: 30ch; }
.wa-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.wa-status-card h2 { font-size: 20px; margin-bottom: 10px; }
.wa-status-line { font-weight: 600; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.wa-status-line::before { content: ""; width: 10px; height: 10px; border-radius: 99px; background: currentColor; }
.wa-status-line.is-ok { color: var(--wa-ok); }
.wa-status-line.is-fail { color: var(--wa-fail); }
.wa-steps { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 10px; counter-reset: s; }
.wa-steps li { counter-increment: s; display: flex; gap: 12px; align-items: center; color: var(--wa-muted); font-size: 15px; }
.wa-steps li::before {
    content: counter(s); width: 28px; height: 28px; border-radius: 99px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--wa-surface-2); color: var(--wa-muted); font-weight: 700; font-size: 13px;
}
.wa-steps li.is-done { color: var(--wa-text); font-weight: 500; }
.wa-steps li.is-done::before { content: "✓"; background: var(--wa-ok-bg); color: var(--wa-ok); }

/* ---------- Seitenkopf / Systemcheck ---------- */
.wa-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.wa-page-head h1 { font-size: 34px; margin: 6px 0; }
.wa-page-head p { margin: 0; }
.wa-summary { display: flex; gap: 8px; flex-wrap: wrap; }
.wa-summary .wa-pill { font-size: 13px; padding: 5px 12px; }
.wa-check-list { list-style: none; margin: 0; padding: 0; }
.wa-check { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 11px 0; border-top: 1px solid #EFEDE7; }
.wa-check:first-child { border-top: none; }
.wa-dot { width: 10px; height: 10px; border-radius: 99px; margin-top: 7px; background: var(--wa-ok); }
.wa-check.is-warn .wa-dot { background: #B86E00; }
.wa-check.is-fail .wa-dot { background: #B42318; }
.wa-check-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wa-check-label { font-size: 15px; font-weight: 500; }
.wa-check-hint { font-size: 13px; color: var(--wa-muted); }
.wa-check-action { margin-top: 8px; }
.wa-check.is-fail .wa-check-hint { color: var(--wa-fail); }
.wa-check-value { font-size: 14px; color: var(--wa-muted); text-align: right; max-width: 260px; overflow-wrap: anywhere; }

/* ---------- Leere Seiten / Fehler ---------- */
.wa-empty { max-width: 560px; margin: 60px auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.wa-empty-code { font-family: var(--wa-font-display); font-size: 72px; font-weight: 700; color: var(--wa-border-strong); line-height: 1; }
.wa-empty h1 { font-size: 32px; }
.wa-empty p { margin: 0 0 8px; font-size: 17px; }
.wa-debug { max-width: 100%; white-space: pre-wrap; text-align: left; font-size: 13px; background: var(--wa-fail-bg); color: var(--wa-fail); padding: 12px 14px; border-radius: 10px; }

/* ---------- Dialog (About u. a.) ---------- */
.wa-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; overflow-y: auto; }
.wa-modal[hidden] { display: none; }
.wa-modal-backdrop { position: fixed; inset: 0; background: rgba(28, 27, 25, .48); }
.wa-modal-box {
    position: relative; width: 100%; max-width: 520px;
    background: var(--wa-surface); border-radius: 22px; box-shadow: var(--wa-shadow-lg);
    padding: 28px; display: flex; flex-direction: column; gap: 12px;
}
.wa-about-head { display: flex; align-items: flex-start; gap: 16px; }
.wa-about-head .wa-logo { width: 56px; height: 56px; border-radius: 16px; }
.wa-about-head > div { flex: 1; }
.wa-about-head h2 { font-size: 26px; }
.wa-modal-box p { margin: 0; color: var(--wa-text-2); }
.wa-about-tagline { font-style: italic; color: var(--wa-muted) !important; }
.wa-about-links { display: flex; gap: 18px; font-size: 14px; font-weight: 600; }
.wa-about-links a { text-decoration: none; }
.wa-modal-box .wa-eyebrow { margin-top: 10px; padding-top: 16px; border-top: 1px solid #EFEDE7; }
.wa-license-list { list-style: none; margin: 0; padding: 0; }
.wa-license-list li { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font-size: 14px; }
.wa-about-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 13px; }

/* ================================================================ 0.2.0 */

/* ---------- Icons (Bootstrap Icons) ---------- */
.bi { font-size: 18px; line-height: 1; display: inline-flex; }

/* ---------- Buttons: Ergänzungen ---------- */
.wa-btn--sm { min-height: 38px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.wa-btn--block { width: 100%; }
.wa-btn--danger { background: #B42318; color: #FFFFFF; }
.wa-btn--danger-soft { background: var(--wa-fail-bg); color: var(--wa-fail); }
.wa-btn--ok-soft { background: var(--wa-ok-bg); color: var(--wa-ok); }
.wa-btn--ghost:hover { background: var(--wa-bg); color: var(--wa-text); }
.wa-icon-btn--ghost { border: none; background: transparent; color: var(--wa-muted); width: 40px; height: 40px; }
.wa-icon-btn--ghost:hover { background: var(--wa-surface-2); color: var(--wa-text); }

/* ---------- App-Layout ---------- */
body.wa-app { flex-direction: row; }
.wa-sidebar {
    width: 256px; flex-shrink: 0; position: sticky; top: 0; height: 100vh;
    padding: 24px 18px; display: flex; flex-direction: column; gap: 26px;
    border-right: 1px solid var(--wa-border); background: var(--wa-sidebar, var(--wa-bg));
}
.wa-sidebar .wa-brand { padding: 0 8px; }
.wa-brand-text { display: flex; flex-direction: column; }
.wa-brand-sub { font-size: 12px; color: var(--wa-faint); }
.wa-brand-sub.is-admin { color: var(--wa-warn); font-weight: 600; }
.wa-nav { display: flex; flex-direction: column; gap: 3px; flex: 1; overflow-y: auto; }
.wa-nav-item {
    display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px;
    border-radius: 10px; color: var(--wa-text-2); text-decoration: none; font-size: 15px; font-weight: 500;
}
.wa-nav-item > span:not(.wa-pill) { flex: 1; }
.wa-nav-item:hover { background: var(--wa-surface-2); color: var(--wa-text); }
.wa-nav-item.is-active { background: rgba(var(--wa-primary-rgb), .12); color: var(--wa-primary); font-weight: 600; }
.wa-nav-item.is-soon { color: #9A968E; cursor: default; }
.wa-nav-item.is-soon:hover { background: transparent; }
.wa-nav-item.is-soon .wa-pill { font-size: 11px; padding: 1px 8px; }
.wa-nav-toggle-wrap { display: contents; }
.wa-nav-toggle { display: none; }
.wa-sidebar-foot { display: flex; align-items: center; gap: 6px; }
.wa-me { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 12px; text-decoration: none; color: var(--wa-text); }
.wa-me:hover { background: var(--wa-surface-2); color: var(--wa-text); }
.wa-me-text { display: flex; flex-direction: column; min-width: 0; }
.wa-me-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-me-sub { font-size: 12px; color: var(--wa-faint); }
.wa-avatar {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 99px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(var(--wa-primary-rgb), .16); color: var(--wa-primary); font-weight: 600; font-size: 14px;
}
.wa-app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wa-app-top { display: flex; justify-content: flex-end; gap: 10px; padding: 18px clamp(16px, 3vw, 44px) 0; }
.wa-app-content { width: 100%; max-width: 1240px; padding: 8px clamp(16px, 3vw, 44px) 48px; display: flex; flex-direction: column; gap: 20px; }
.wa-app-content .wa-page-head { margin-bottom: 4px; }

@media (max-width: 900px) {
    body.wa-app { flex-direction: column; }
    .wa-sidebar { position: relative; width: auto; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; border-right: none; border-bottom: 1px solid var(--wa-border); }
    .wa-nav-toggle-wrap { display: block; }
    .wa-nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--wa-radius); border: 1px solid #DEDBD3; background: var(--wa-surface); color: var(--wa-text-2); cursor: pointer; }
    .wa-nav-toggle-wrap.is-open .wa-nav-toggle { border-color: var(--wa-primary); box-shadow: var(--wa-focus); color: var(--wa-primary); }
    .wa-nav {
        display: none; flex-direction: column; position: absolute; left: 16px; right: 16px; top: 100%; z-index: 70;
        max-height: 60vh; overflow-y: auto; gap: 3px; padding: 6px;
        border-radius: 14px; background: var(--wa-surface); border: 1px solid var(--wa-border); box-shadow: 0 12px 32px rgba(28, 27, 25, .16);
    }
    .wa-nav-toggle-wrap.is-open .wa-nav { display: flex; }
    .wa-nav-item { white-space: nowrap; }
    .wa-nav-item.is-soon { display: none; }
    .wa-sidebar-foot { margin-left: auto; }
    .wa-me-text { display: none; }
}

/* ---------- Anmeldeseite ---------- */
body.wa-auth { flex-direction: row; }
.wa-auth-brand {
    width: 40%; max-width: 540px; min-height: 100vh; padding: 44px; display: flex; flex-direction: column; gap: 36px;
    background: var(--wa-primary); color: var(--wa-on-primary);
}
.wa-brand--light { color: var(--wa-on-primary); }
.wa-brand--light .wa-logo { background: var(--wa-on-primary); color: var(--wa-primary); }
.wa-mosaic { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; min-height: 200px; }
.wa-mosaic span { border-radius: 14px; background: rgba(255, 255, 255, .14); }
.wa-mosaic span:nth-child(2n) { background: rgba(255, 255, 255, .08); }
.wa-mosaic span:nth-child(3n) { background: rgba(255, 255, 255, .2); }
.wa-mosaic .t { grid-row: span 2; }
.wa-mosaic .w { grid-column: span 2; }
.wa-auth-tagline { margin: 0; font-family: var(--wa-font-display); font-size: 30px; font-weight: 500; line-height: 1.2; }
.wa-auth-legal { display: flex; gap: 20px; font-size: 14px; }
.wa-auth-legal a { color: inherit; opacity: .85; text-decoration: none; }
.wa-auth-main { flex: 1; display: flex; flex-direction: column; padding: 24px clamp(16px, 3vw, 36px); }
.wa-auth-top { display: flex; justify-content: flex-end; gap: 10px; }
.wa-auth-center { flex: 1; width: 100%; max-width: 420px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 32px 0; }
.wa-auth-form { display: flex; flex-direction: column; gap: 18px; }
.wa-auth-head h1 { font-size: 32px; margin-bottom: 6px; }
.wa-auth-head p { margin: 0; }
.wa-auth-alt { text-align: center; margin: 4px 0 0; font-size: 15px; }
@media (max-width: 860px) {
    body.wa-auth { flex-direction: column; }
    .wa-auth-brand { width: auto; max-width: none; min-height: 0; padding: 20px 16px; flex-direction: row; justify-content: space-between; }
    .wa-mosaic, .wa-auth-tagline { display: none; }
}

/* ---------- Formulare ---------- */
.wa-form { display: flex; flex-direction: column; gap: 16px; }
.wa-field { display: flex; flex-direction: column; gap: 6px; }
.wa-label { font-size: 14px; font-weight: 600; }
.wa-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.wa-optional { font-weight: 400; color: var(--wa-faint); }
.wa-input {
    width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--wa-border-strong); border-radius: 12px;
    background: var(--wa-surface); color: var(--wa-text); font: inherit; font-size: 16px;
}
textarea.wa-input { min-height: 96px; line-height: 1.5; resize: vertical; }
select.wa-input { padding-right: 36px; }
.wa-input:focus { outline: none; border-color: var(--wa-primary); box-shadow: var(--wa-focus); }
.wa-input.is-invalid { border-color: #B42318; }
.wa-input.is-invalid:focus { box-shadow: 0 0 0 4px rgba(180, 35, 24, .15); }
.wa-input.is-open { background: #FDF6EC; border-color: #E8C99A; }
.wa-help { font-size: 13px; color: var(--wa-muted); margin: 0; }
.wa-error { font-size: 13px; font-weight: 600; color: var(--wa-fail); }
.wa-static { min-height: 46px; display: flex; align-items: center; padding: 0 14px; border-radius: 12px; background: var(--wa-bg); color: var(--wa-text-2); }
.wa-input-wrap { position: relative; }
.wa-input-wrap .wa-input { padding-right: 52px; }
.wa-input-btn { position: absolute; right: 4px; top: 3px; width: 40px; height: 40px; border: none; border-radius: 9px; background: transparent; color: var(--wa-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.wa-input-btn:hover { background: var(--wa-bg); color: var(--wa-text); }
.wa-input-prefix { display: flex; align-items: stretch; border: 1px solid var(--wa-border-strong); border-radius: 12px; overflow: hidden; background: var(--wa-surface); }
.wa-input-prefix span { display: flex; align-items: center; padding: 0 4px 0 12px; background: var(--wa-bg); color: var(--wa-faint); font-size: 14px; white-space: nowrap; }
.wa-input-prefix .wa-input { border: none; border-radius: 0; }
.wa-input-prefix:focus-within { border-color: var(--wa-primary); box-shadow: var(--wa-focus); }
.wa-input-prefix .wa-input:focus { box-shadow: none; }
.wa-form-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.wa-form-actions--bar { padding-top: 4px; }
.wa-link-soon { font-size: 14px; color: #9A968E; }
.wa-stack { display: flex; flex-direction: column; gap: 20px; }

/* Stärkeanzeige */
.wa-meter { display: flex; align-items: center; gap: 10px; min-height: 18px; }
.wa-meter-bar { flex: 1; height: 6px; border-radius: 99px; background: var(--wa-surface-2); overflow: hidden; }
.wa-meter-bar span { display: block; height: 100%; width: 0; border-radius: 99px; background: #B42318; transition: width .2s; }
.wa-meter-text { font-size: 13px; color: var(--wa-muted); min-width: 110px; text-align: right; }
.wa-meter[data-level="short"] .wa-meter-bar span { width: 12%; background: #B42318; }
.wa-meter[data-level="0"] .wa-meter-bar span { width: 25%; background: #B42318; }
.wa-meter[data-level="1"] .wa-meter-bar span { width: 50%; background: #B86E00; }
.wa-meter[data-level="2"] .wa-meter-bar span { width: 75%; background: var(--wa-primary); }
.wa-meter[data-level="3"] .wa-meter-bar span { width: 100%; background: var(--wa-ok); }

/* ---------- Meldungen ---------- */
.wa-alert { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 14px; font-size: 15px; border: 1px solid transparent; }
.wa-alert a { color: inherit; font-weight: 600; }
.wa-alert--ok { background: var(--wa-ok-bg); color: var(--wa-ok); border-color: #CBE5D4; }
.wa-alert--warn { background: var(--wa-warn-bg); color: #5A3A0C; border-color: #EDD5B0; }
.wa-alert--fail { background: var(--wa-fail-bg); color: var(--wa-fail); border-color: #F2C6C1; }
.wa-alert--info { background: var(--wa-info-bg); color: #1F3366; border-color: #C9D4EC; }

/* ---------- Kacheln, Kennzahlen, Listen ---------- */
.wa-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.wa-tile--wide { grid-column: span 2; }
.wa-tile-title { font-family: var(--wa-font); font-size: 15px; font-weight: 600; color: var(--wa-muted); margin: 0 0 10px; letter-spacing: 0; }
.wa-tile-empty { margin: 0; color: var(--wa-faint); font-size: 14px; }
.wa-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.wa-stat { display: flex; flex-direction: column; gap: 4px; padding: 22px 24px; }
.wa-stat-num { font-family: var(--wa-font-display); font-size: 36px; font-weight: 700; line-height: 1.1; }
.wa-stat.is-soon { opacity: .6; }
@media (max-width: 1100px) { .wa-tiles, .wa-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .wa-tiles, .wa-stats { grid-template-columns: 1fr; } .wa-tile--wide { grid-column: auto; } }
.wa-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.wa-card-head a { font-size: 14px; font-weight: 600; text-decoration: none; }
.wa-card--flush { padding: 0; overflow: hidden; }
.wa-list { list-style: none; margin: 0; padding: 0; }
.wa-list-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid #EFEDE7; }
.wa-list-row:first-child { border-top: none; }
.wa-list-main { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 15px; }
.wa-list-main a { color: var(--wa-text); font-weight: 600; text-decoration: none; }
.wa-list-main a:hover { color: var(--wa-primary); }
.wa-list-main .wa-muted { font-size: 13px; }
.wa-pills { display: inline-flex; gap: 6px; flex-wrap: nowrap; }
.wa-card > .wa-field + .wa-field { margin-top: 18px; }
.wa-pill.is-accent { background: rgba(var(--wa-secondary-rgb), .22); color: #5A3A0C; }
.wa-crumbs { display: flex; gap: 8px; font-size: 14px; color: var(--wa-faint); margin-bottom: 6px; }
.wa-crumbs a { color: var(--wa-faint); text-decoration: none; }
.wa-crumbs a:hover { color: var(--wa-text); }

/* ---------- Tabelle ---------- */
.wa-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid #EFEDE7; flex-wrap: wrap; }
.wa-search { position: relative; flex: 1; max-width: 420px; }
.wa-search .bi { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--wa-faint); font-size: 16px; }
.wa-search .wa-input { padding-left: 40px; min-height: 42px; }
.wa-table-wrap { overflow-x: auto; position: relative; }  /* 0.7.3d: versteckte Texte (wa-visually-hidden) bleiben im Rahmen – sonst wurde die ganze Seite am Handy zu breit */
.wa-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.wa-table th { text-align: left; font-size: 13px; font-weight: 600; color: var(--wa-faint); padding: 12px 16px; background: #F9F8F5; white-space: nowrap; }
.wa-table td { padding: 12px 16px; border-top: 1px solid #EFEDE7; vertical-align: middle; }
.wa-table td.wa-muted { font-size: 14px; }
.wa-cell-user { display: flex; align-items: center; gap: 12px; }
.wa-cell-actions { text-align: right; white-space: nowrap; }
.wa-cell-actions form { display: inline; }
.wa-empty-row { padding: 28px 20px; margin: 0; color: var(--wa-muted); text-align: center; }

/* ---------- Startseite einspaltig, Bestätigungsdialog ---------- */
.wa-hero--single { grid-template-columns: 1fr; padding-top: 80px; }
.wa-modal-box--sm { max-width: 420px; gap: 20px; }
.wa-confirm-text { font-size: 16px; color: var(--wa-text) !important; }

/* ================================================================ 0.3.0 */
.wa-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--wa-text-2); text-decoration: none; }
.wa-back:hover { color: var(--wa-text); }
.wa-icon-badge { width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--wa-primary-rgb), .12); color: var(--wa-primary); }
.wa-icon-badge .bi { font-size: 26px; }
.wa-icon-badge--ok { border-radius: 99px; background: var(--wa-ok-bg); color: var(--wa-ok); }
.wa-input--code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 24px; letter-spacing: .18em; text-align: center; min-height: 56px; }
.wa-note { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: var(--wa-surface-2); font-size: 14px; color: var(--wa-text-2); }
.wa-inline { display: flex; gap: 12px; flex-wrap: wrap; }
.wa-inline .wa-input { width: 200px; flex: 0 0 auto; }

.wa-stepper { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.wa-stepper li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--wa-faint); }
.wa-stepper li + li::before { content: ""; width: 40px; height: 2px; background: var(--wa-border-strong); margin-right: 4px; }
.wa-stepper li > span { width: 30px; height: 30px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; background: var(--wa-surface-2); font-size: 14px; font-weight: 700; }
.wa-stepper li.is-done { color: var(--wa-ok); }
.wa-stepper li.is-done > span { background: var(--wa-ok-bg); }
.wa-stepper li.is-done > span .bi { font-size: 14px; }
.wa-stepper li.is-current { color: var(--wa-primary); font-weight: 600; }
.wa-stepper li.is-current > span { background: var(--wa-primary); color: var(--wa-on-primary); }

.wa-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 1000px) { .wa-split { grid-template-columns: 1fr; } }
.wa-card--tint { background: rgba(var(--wa-primary-rgb), .06); border-color: rgba(var(--wa-primary-rgb), .18); }
.wa-card--tint p { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--wa-text-2); }
.wa-twofa { display: flex; gap: 32px; flex-wrap: wrap; }
.wa-qr-box { padding: 16px; border: 1px solid var(--wa-border); border-radius: 16px; background: #FFFFFF; align-self: flex-start; }
.wa-qr { width: 216px; height: 216px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 13px; }
.wa-qr svg { width: 100%; height: 100%; display: block; }
.wa-twofa-main { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 18px; }
.wa-twofa-main p { margin: 0; }
.wa-twofa-confirm { padding-top: 16px; border-top: 1px solid #EFEDE7; }
.wa-copy { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border: 1px solid var(--wa-border-strong); border-radius: 12px; background: #F9F8F5; }
.wa-copy code { flex: 1; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 17px; letter-spacing: .08em; color: var(--wa-text); overflow-wrap: anywhere; }

.wa-codes-card { max-width: 620px; display: flex; flex-direction: column; gap: 18px; }
.wa-codes-card p { margin: 0; line-height: 1.55; }
.wa-codes-head { display: flex; align-items: center; gap: 16px; }
.wa-codes-title { font-size: 26px; }
.wa-codes-head p { margin: 2px 0 0; }
.wa-codes { list-style: none; margin: 0; padding: 20px 24px; border-radius: 14px; background: var(--wa-bg); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 18px; letter-spacing: .06em; }
.wa-codes-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .wa-codes-actions { grid-template-columns: 1fr; } }
.wa-check-line { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; }
.wa-check-line input { width: 20px; height: 20px; margin: 0; accent-color: var(--wa-primary); }

@media print {
    .wa-sidebar, .wa-app-top, .wa-codes-actions, .wa-check-line, #wa-codes-done, .wa-alert { display: none !important; }
    body.wa-app { display: block; background: #FFFFFF; }
    .wa-card { border: none; }
}

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


/* ---------- 0.4.0: Registrierung, Einstellungen, Mails, Sitzungen ---------- */
.wa-auth-center--wide { max-width: 640px; }
.wa-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wa-mini-steps { list-style: none; counter-reset: st; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wa-mini-steps li { counter-increment: st; display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 12px; background: var(--wa-surface-2); font-size: 13px; line-height: 1.4; color: var(--wa-text-2); }
.wa-mini-steps li::before { content: counter(st); flex: none; width: 22px; height: 22px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; background: var(--wa-primary); color: var(--wa-on-primary); font-size: 12px; font-weight: 700; }
@media (max-width: 560px) { .wa-mini-steps { grid-template-columns: 1fr; } }
.wa-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
@media (max-width: 640px) { .wa-form-grid { grid-template-columns: 1fr; } }
.wa-namecheck { font-size: 13px; min-height: 1em; }
.wa-namecheck.is-ok { color: var(--wa-ok); }
.wa-namecheck.is-fail { color: var(--wa-fail); }
.wa-check-line--top { align-items: flex-start; font-weight: 400; line-height: 1.5; }
.wa-check-line--top input { margin-top: 2px; flex: none; }
.wa-check-line--top > span { display: block; }
.wa-check-line--top small { display: block; margin-top: 2px; }
.wa-check-line.is-invalid { color: var(--wa-fail); }
.wa-link-small { font-size: 14px; text-decoration: none; background: linear-gradient(currentColor, currentColor) 50% 100% / 0% 1px no-repeat; transition: background-size .25s ease; } .wa-link-small:hover, .wa-link-small:focus-visible { background-size: 100% 1px; }
.wa-icon-badge--muted { background: var(--wa-surface-2); color: var(--wa-muted); }
.wa-empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 48px 24px; color: var(--wa-muted); }
.wa-empty-state p { margin: 0; }
.wa-list--pad .wa-list-row { padding: 14px 22px; }
.wa-dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 15px; }
.wa-dl dt { color: var(--wa-muted); }
.wa-dl dd { margin: 0; overflow-wrap: anywhere; }
.wa-subtitle { font-family: var(--wa-font); font-size: 14px; font-weight: 600; color: var(--wa-muted); margin: 18px 0 6px; }
.wa-quote { margin: 0; padding: 12px 14px; border-left: 3px solid rgba(var(--wa-primary-rgb), .4); background: var(--wa-bg); border-radius: 0 10px 10px 0; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.wa-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--wa-border); margin-bottom: 20px; overflow-x: auto; }
.wa-tab { padding: 10px 16px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--wa-muted); text-decoration: none; font-weight: 500; white-space: nowrap; }
.wa-tab:hover { color: var(--wa-text); }
.wa-tab.is-active { color: var(--wa-primary); border-bottom-color: var(--wa-primary); font-weight: 600; }
.wa-narrow { max-width: 680px; }
.wa-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; border-top: 1px solid #EFEDE7; cursor: pointer; }
.wa-card-title + .wa-switch-row { border-top: none; padding-top: 4px; }
.wa-switch-row > span { display: flex; flex-direction: column; gap: 2px; }
.wa-switch-row small { color: var(--wa-muted); font-size: 14px; }
.wa-switch { appearance: none; -webkit-appearance: none; flex: none; width: 46px; height: 26px; border-radius: 99px; background: var(--wa-border-strong); position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.wa-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 99px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.wa-switch:checked { background: var(--wa-primary); }
.wa-switch:checked::after { transform: translateX(20px); }
.wa-switch:focus-visible { box-shadow: var(--wa-focus); outline: none; }
.wa-input--short { max-width: 140px; }
.wa-choice-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
@media (max-width: 760px) { .wa-choice-row { grid-template-columns: 1fr; } }
.wa-choice { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border: 1px solid var(--wa-border-strong); border-radius: 12px; cursor: pointer; background: var(--wa-surface); }
.wa-choice input { margin: 3px 0 0; accent-color: var(--wa-primary); flex: none; }
.wa-choice span { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.wa-choice small { color: var(--wa-muted); font-size: 13px; line-height: 1.4; }
.wa-choice:has(input:checked) { border-color: var(--wa-primary); background: rgba(var(--wa-primary-rgb), .06); box-shadow: 0 0 0 1px var(--wa-primary) inset; }
.wa-fieldset { border: 1px solid var(--wa-border); border-radius: 12px; padding: 16px 18px 18px; margin: 20px 0 0; }
.wa-fieldset legend { padding: 0 6px; font-weight: 600; font-size: 14px; }
.wa-mt { margin-top: 28px; }
[hidden] { display: none !important; }
.wa-count { flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; background: var(--wa-secondary); color: var(--wa-on-secondary); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.wa-stat--link { text-decoration: none; color: var(--wa-text); transition: border-color .15s; }
.wa-stat--link:hover { border-color: var(--wa-primary); color: var(--wa-text); }
.wa-mail-log { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1000px) { .wa-mail-log { grid-template-columns: 1fr; } }
.wa-mail-list { list-style: none; margin: 0; padding: 0; max-height: 70vh; overflow-y: auto; }
.wa-mail-list a { display: flex; flex-direction: column; gap: 4px; padding: 12px 18px; border-top: 1px solid #EFEDE7; text-decoration: none; color: var(--wa-text); font-size: 14px; }
.wa-mail-list li:first-child a { border-top: none; }
.wa-mail-list a:hover { background: var(--wa-bg); }
.wa-mail-list a.is-active { background: rgba(var(--wa-primary-rgb), .08); }
.wa-mail-subject { font-weight: 600; font-size: 15px; }
.wa-pill.is-fail { background: var(--wa-fail-bg); color: var(--wa-fail); }
.wa-mail-view { display: flex; flex-direction: column; gap: 12px; }
.wa-mail-view .wa-card-title, .wa-mail-view p { margin: 0; }
.wa-mail-frame { width: 100%; height: 520px; border: 1px solid var(--wa-border); border-radius: 12px; background: #fff; }
.wa-pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; background: var(--wa-bg); padding: 12px 14px; border-radius: 10px; margin: 8px 0 0; }
.wa-sessions { list-style: none; margin: 0 0 4px; padding: 0; }
.wa-sessions li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid #EFEDE7; }
.wa-sessions li:first-child { border-top: none; }
.wa-sessions .wa-icon-badge { width: 40px; height: 40px; border-radius: 12px; flex: none; }
.wa-sessions .wa-icon-badge .bi { font-size: 18px; }
.wa-sessions form { margin: 0; }
.wa-card > .wa-field + .wa-check-line, .wa-card > .wa-check-line + .wa-field { margin-top: 18px; }

/* ---------- 0.4.1: Papierkorb, Schutz vor zu vielen Anfragen ---------- */
.wa-small { font-size: 13px; }
.wa-avatar--muted { background: var(--wa-surface-2); color: var(--wa-muted); }
.wa-trash-item { border-top: 1px solid #EFEDE7; }
.wa-trash-item:first-child { border-top: none; }
.wa-trash-item .wa-list-row { border-top: none; }
.wa-trash-item form { margin: 0; }
.wa-danger-details { padding: 0 22px 14px 76px; }
.wa-danger-details summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--wa-fail); list-style: none; }
.wa-danger-details summary::-webkit-details-marker { display: none; }
.wa-danger-box { margin-top: 12px; padding: 16px 18px; border: 1px solid #F1C4BF; background: #FFF8F7; border-radius: 12px; display: flex; flex-direction: column; gap: 14px; }
.wa-danger-box p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--wa-text-2); }
@media (max-width: 640px) { .wa-danger-details { padding-left: 22px; } .wa-trash-item .wa-list-row { flex-wrap: wrap; } }
.wa-card--danger { border-color: #F1C4BF; }
.wa-card--danger .wa-card-title { color: var(--wa-fail); }
.wa-mt-card { margin-top: 20px; }
.wa-mt-s { margin-top: 12px; margin-bottom: 0; }
.wa-row-static { cursor: default; }
.wa-row-static form { margin: 0; flex: none; }
.wa-inline-form { display: flex; gap: 8px; align-items: center; }
.wa-input--sm { min-height: 36px; height: 36px; padding: 0 30px 0 10px; font-size: 14px; width: auto; }
.wa-alert-action { margin: 0 0 0 auto; flex: none; }
@media (max-width: 640px) { .wa-row-static { flex-wrap: wrap; } }

.wa-nav-item > span.wa-count { flex: none; }
.wa-count--muted { background: var(--wa-surface-2); color: var(--wa-muted); }

/* ---------- 0.5.0: Tarife ---------- */
.wa-master-detail { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1000px) { .wa-master-detail { grid-template-columns: 1fr; } }
.wa-md-list { position: sticky; top: 20px; }
@media (max-width: 1000px) { .wa-md-list { position: static; } }
.wa-md-items { list-style: none; margin: 0; padding: 8px; }
.wa-md-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--wa-text); }
.wa-md-item:hover { background: var(--wa-bg); color: var(--wa-text); }
.wa-md-item.is-active { background: rgba(var(--wa-primary-rgb), .1); }
.wa-md-item.is-active .wa-md-name { color: var(--wa-primary); }
.wa-md-item.is-archived .wa-md-name { color: var(--wa-faint); }
.wa-md-name { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.wa-md-name .wa-pill { font-size: 11px; padding: 1px 8px; }
.wa-md-add { padding: 8px 12px 14px; border-top: 1px solid #EFEDE7; }
.wa-editor-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.wa-editor-title { font-size: 26px; margin: 0 0 6px; }
.wa-editor-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.wa-editor-actions form { margin: 0; }
.wa-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--wa-surface-2); }
.wa-seg-btn { border: none; background: transparent; padding: 6px 12px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--wa-muted); cursor: pointer; }
.wa-seg-btn.is-active { background: var(--wa-surface); color: var(--wa-text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.wa-stack-s { display: flex; flex-direction: column; gap: 16px; }
.wa-stack-s[hidden] { display: none; }
.wa-inline-choices { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; min-height: 46px; }
.wa-inline-choices .wa-check-line { font-weight: 400; }
.wa-inline-num { display: inline-flex; align-items: center; gap: 8px; }
.wa-input--num { width: 110px; }
.wa-input--unit { width: 84px; }
.wa-limits { display: flex; flex-direction: column; }
.wa-limit-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 140px; gap: 16px; align-items: center; padding: 10px 0; border-top: 1px solid #EFEDE7; }
.wa-limit-row:first-child { border-top: none; }
.wa-limit-label { font-size: 15px; }
.wa-limit-input { display: inline-flex; align-items: center; gap: 8px; }
.wa-limit-unit { min-width: 48px; color: var(--wa-muted); font-size: 14px; }
.wa-limit-unl { font-weight: 400; font-size: 14px; }
.wa-input:disabled { background: var(--wa-bg); color: var(--wa-faint); }
@media (max-width: 640px) { .wa-limit-row { grid-template-columns: 1fr; gap: 8px; } }
.wa-pill.is-new { background: var(--wa-secondary); color: var(--wa-on-secondary); font-size: 11px; padding: 1px 8px; }
.wa-switch-row--tight { padding: 10px 0; }
.wa-subtitle + .wa-switch-row { border-top: none; }
.wa-set { display: flex; gap: 18px; flex-wrap: wrap; }
.wa-set .wa-check-line { font-weight: 400; font-size: 14px; }
.wa-perks { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: perk; }
.wa-perk { display: flex; gap: 6px; align-items: center; }
.wa-perk .wa-input { flex: 1; }
.wa-perk .wa-icon-btn { width: 36px; height: 36px; flex: none; }
.wa-sticky-bar { position: sticky; bottom: 0; z-index: 5; padding: 14px 0; background: linear-gradient(to top, var(--wa-bg) 70%, transparent); }
.wa-section-title { font-family: var(--wa-font); font-size: 15px; font-weight: 600; color: var(--wa-muted); margin: 20px 0 10px; }

.wa-input--unit { width: 100px; padding-right: 32px; }
.wa-switch-row > span.wa-set { flex-direction: row; }

/* ---------- 0.5.1: Tarif & Bonus beim Benutzer ---------- */
.wa-meta-line { margin: -8px 0 16px; }
.wa-page-head + .wa-tabs { margin-top: -4px; }
.wa-plan-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid #EFEDE7; }
.wa-plan-tools form { margin: 0; }
.wa-btn--link { background: linear-gradient(currentColor, currentColor) 50% 100% / 0% 1px no-repeat transparent; transition: background-size .25s ease; border-color: transparent; color: var(--wa-muted); text-decoration: none; padding: 0 8px; } .wa-btn--link:hover, .wa-btn--link:focus-visible { background-size: 100% 1px; }
.wa-btn--link:hover { color: var(--wa-text); }
.wa-input--date { width: 170px; max-width: 220px; }
.wa-bonus-list { list-style: none; margin: 0 0 16px; padding: 0; }
.wa-bonus-list li { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid #EFEDE7; }
.wa-bonus-list li:first-child { border-top: none; padding-top: 0; }
.wa-bonus-list li.is-expired strong { color: var(--wa-faint); text-decoration: line-through; }
.wa-bonus-list form { margin: 0; flex: none; }
.wa-add-box > summary { list-style: none; display: inline-flex; }
.wa-add-box > summary::-webkit-details-marker { display: none; }
.wa-add-box[open] > summary { display: none; }
.wa-bonus-form { margin-top: 4px; padding: 18px; border-radius: 14px; background: var(--wa-bg); }
.wa-card-pad { padding: 22px 24px 8px; }
.wa-card-pad .wa-card-title { margin-bottom: 4px; }
.wa-table--may td, .wa-table--may th { padding-top: 10px; padding-bottom: 10px; }
.wa-table-group th { background: var(--wa-bg); font-size: 13px; font-weight: 600; color: var(--wa-muted); text-align: left; text-transform: none; }
.wa-table--may tr.has-bonus td { background: rgba(var(--wa-secondary-rgb), .08); }
.wa-table--may tr.has-bonus td:first-child { box-shadow: inset 3px 0 0 var(--wa-secondary); }

/* ---------- 0.5.2: Dashboard, Mein Tarif, Tarifwahl ---------- */
.wa-tile { display: flex; flex-direction: column; gap: 6px; }
.wa-tile-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.wa-tile-top .wa-tile-title { margin: 0; }
.wa-tile-num { margin: 4px 0 2px; font-family: var(--wa-font-display); font-size: 34px; font-weight: 700; line-height: 1.1; }
.wa-tile-num span { font-family: var(--wa-font); font-size: 15px; font-weight: 500; color: var(--wa-muted); }
.wa-tile-num--text { font-size: 26px; }
.wa-tile-note { margin: 0; font-size: 13px; line-height: 1.45; display: flex; gap: 6px; align-items: baseline; }
.wa-tile-note--warn { background: var(--wa-warn-bg); color: var(--wa-warn); font-weight: 600; border-radius: 10px; padding: 8px 10px; }
.wa-tile-note--warn .bi { color: var(--wa-warn); }
.wa-tile-link { margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 600; text-decoration: none; }
.wa-bar { height: 10px; border-radius: 99px; background: var(--wa-surface-2); overflow: hidden; margin: 6px 0 4px; }
.wa-bar > span { display: block; height: 100%; min-width: 0; border-radius: 99px; background: var(--wa-primary); transition: width .4s; }
.wa-bar > span:not([style*="width: 0%"]) { min-width: 8px; }  /* schon ein wenig belegt → sichtbar */
.wa-bar.is-warn > span { background: var(--wa-secondary); }
.wa-bar.is-full > span { background: #B42318; }
.wa-plan-box { display: flex; flex-direction: column; gap: 2px; margin: auto 4px 14px; padding: 14px 16px; border-radius: 14px; background: var(--wa-surface); border: 1px solid var(--wa-border); text-decoration: none; color: var(--wa-text); }
.wa-plan-box:hover, .wa-plan-box.is-active { border-color: var(--wa-primary); color: var(--wa-text); }
.wa-plan-box strong { font-family: var(--wa-font-display); font-size: 18px; }
.wa-plan-box-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wa-plan-box-top .wa-pill { font-size: 11px; padding: 1px 8px; }
.wa-plan-box-link { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--wa-primary); }
@media (max-width: 860px) { .wa-plan-box { display: none; } }
.wa-sidebar .wa-plan-box + .wa-sidebar-foot { margin-top: 0; }
.wa-note--accent { background: rgba(var(--wa-secondary-rgb), .14); color: #5A3A0C; }
.wa-pill--xs { font-size: 11px; padding: 1px 7px; vertical-align: middle; }
.wa-kv { list-style: none; margin: 0; padding: 0; }
.wa-kv li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid #EFEDE7; font-size: 15px; }
.wa-kv li:first-child { border-top: none; }
.wa-feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wa-feature-list li { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.wa-feature-list li.is-on .bi { color: var(--wa-ok); }
.wa-feature-list li.is-off { color: var(--wa-faint); }
.wa-offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.wa-offer { display: flex; flex-direction: column; gap: 6px; }
.wa-offer.is-current { border-color: var(--wa-primary); }
.wa-offer-price { margin: 0; font-weight: 600; }
.wa-offer-list { margin: 6px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.7; }
.wa-offer-action { margin-top: auto; padding-top: 12px; }
.wa-plan-pick { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wa-plan-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.wa-plan-card span { gap: 3px; }
.wa-plan-price { font-size: 14px; font-weight: 600; color: var(--wa-primary); }

/* ---------- 0.5.3: Zahlungshinweis ---------- */
.wa-pay-box { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; background: rgba(var(--wa-secondary-rgb), .14); border: 1px solid rgba(var(--wa-secondary-rgb), .45); color: #4A3009; }
.wa-pay-box[hidden] { display: none; }
.wa-pay-box > .bi { font-size: 22px; line-height: 1; margin-top: 2px; color: var(--wa-secondary); flex: none; }
.wa-pay-box strong { display: block; font-size: 15px; margin-bottom: 4px; }
.wa-pay-box p { margin: 0; font-size: 14px; line-height: 1.55; }
.wa-plan-paid { display: inline-block; font-size: 12px; font-weight: 600; color: #7A4A0E; }

.wa-choice .wa-plan-paid { display: block; font-size: 12px; font-weight: 600; color: #7A4A0E; }

/* ---------- 0.6.0: Alben ---------- */
.wa-limit-hint { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.wa-toolbar--plain { padding: 0; border: none; margin-bottom: 18px; }
.wa-input--auto { width: auto; min-width: 180px; }
.wa-album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.wa-album-card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--wa-surface); border: 1px solid var(--wa-border); text-decoration: none; color: var(--wa-text); transition: border-color .15s, transform .15s; }
.wa-album-card:hover { border-color: var(--wa-primary); color: var(--wa-text); transform: translateY(-2px); }
.wa-album-cover { position: relative; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(var(--wa-primary-rgb), .14), rgba(var(--wa-secondary-rgb), .18)); color: rgba(var(--wa-primary-rgb), .55); font-size: 38px; }
.wa-album-cover { overflow: hidden; }
.wa-album-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wa-album-body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px 16px; }
.wa-album-body strong { font-size: 16px; }
.wa-album-body .wa-pill { font-size: 12.5px; padding: 3px 9px; }  /* 0.6.9b: größer, gut lesbar */
.wa-modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.wa-modal-head h2 { font-size: 24px; }
.wa-slug-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; overflow-wrap: anywhere; }
.wa-link-btn { border: none; background: none; padding: 0; font: inherit; color: var(--wa-primary); text-decoration: underline; cursor: pointer; }
.wa-input--short-wide { max-width: 320px; margin-top: 6px; }
.wa-rules { padding: 16px 18px; border-radius: 14px; background: var(--wa-bg); border: 1px solid var(--wa-border); display: flex; flex-direction: column; gap: 8px; }
.wa-rules.is-invalid { border-color: var(--wa-fail); }
.wa-rules strong { font-size: 15px; }
.wa-rules ul { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--wa-text-2); }
.wa-rules .wa-check-line { margin-top: 6px; }
.wa-seg--wrap { flex-wrap: wrap; align-self: flex-start; }
.wa-seg-btn .wa-dot { display: inline-block; width: 7px; height: 7px; border-radius: 99px; background: var(--wa-secondary); vertical-align: middle; margin: 0 0 0 4px; }  /* Sprach-Tabs; nicht die Punkte im Systemcheck */
.wa-lock-hint { font-size: 13px; color: var(--wa-faint); display: inline-flex; gap: 4px; align-items: center; }
.wa-locked-field { padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--wa-border-strong); color: var(--wa-faint); font-size: 14px; display: flex; gap: 8px; align-items: center; }
.wa-dropzone { border: 2px dashed var(--wa-border-strong); border-radius: 16px; padding: 30px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--wa-muted); }
.wa-dropzone > .bi { font-size: 32px; color: rgba(var(--wa-primary-rgb), .6); }
.wa-dropzone p { margin: 0; font-weight: 600; color: var(--wa-text-2); }
.wa-dropzone.is-soon { opacity: .75; }
.wa-choice-col { display: flex; flex-direction: column; gap: 10px; }
.wa-choice.is-soon { opacity: .55; cursor: default; }
.wa-tab.is-soon { color: var(--wa-faint); cursor: default; display: inline-flex; gap: 6px; align-items: center; }
.wa-lang-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wa-lang-chips form { margin: 0; }
.wa-pill-x { border: none; background: none; padding: 0 0 0 6px; font-size: 15px; line-height: 1; cursor: pointer; color: inherit; }
.wa-text-warn { color: var(--wa-warn); font-weight: 600; font-size: 14px; }

/* ---------- 0.6.1: Upload & Bilder ---------- */
.wa-upload { display: flex; flex-direction: column; gap: 14px; }
.wa-upload .wa-dropzone { cursor: pointer; transition: border-color .15s, background .15s; }
.wa-upload .wa-dropzone:hover, .wa-upload .wa-dropzone.is-over { border-color: var(--wa-primary); background: rgba(var(--wa-primary-rgb), .05); }
.wa-upload .wa-dropzone.is-busy { opacity: .6; pointer-events: none; }
.wa-link-like { color: var(--wa-primary); text-decoration: none; background: linear-gradient(currentColor, currentColor) 50% 100% / 0% 1px no-repeat; transition: background-size .25s ease; } .wa-link-like:hover { background-size: 100% 1px; }
.wa-exif { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wa-exif legend { grid-column: 1 / -1; }
.wa-exif .wa-help { grid-column: 1 / -1; margin: 0; }
@media (max-width: 760px) { .wa-exif { grid-template-columns: 1fr; } }
.wa-upload-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.wa-upload-list:empty { display: none; }
.wa-upload-list li { display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); gap: 10px; align-items: center; }
.wa-upload-list li.is-summary { display: block; font-weight: 600; font-size: 14px; padding-top: 4px; }
.wa-up-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-up-bar { height: 6px; border-radius: 99px; background: var(--wa-surface-2); overflow: hidden; }
.wa-up-bar span { display: block; height: 100%; width: 0; background: var(--wa-primary); transition: width .2s; }
.wa-upload-list .is-ok .wa-up-state, .wa-upload-list .is-summary.is-ok { color: var(--wa-ok); }
.wa-upload-list .is-fail .wa-up-state, .wa-upload-list li.is-fail:not(.is-summary) { color: var(--wa-fail); }
.wa-upload-list .is-fail .wa-up-bar span { background: var(--wa-fail); }
.wa-upload-list .is-summary.is-fail { color: var(--wa-fail); }
.wa-grid-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.wa-thumbs { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.wa-thumb { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--wa-surface-2); cursor: grab; outline-offset: 2px; }
.wa-thumb.is-dragging { opacity: .35; }
.wa-thumb.is-selected { box-shadow: 0 0 0 3px var(--wa-primary); }
.wa-thumb-link, .wa-thumb-link img { display: block; width: 100%; height: 100%; }
.wa-thumb-link img { object-fit: cover; }
.wa-thumb-check { position: absolute; top: 6px; left: 6px; width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,.9); display: flex; align-items: center; justify-content: center; }
.wa-thumb-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--wa-primary); }
.wa-thumb-badges { position: absolute; left: 6px; bottom: 6px; right: 6px; display: flex; gap: 4px; flex-wrap: wrap; pointer-events: none; }
.wa-thumb .wa-video-play { width: 36px; height: 36px; font-size: 15px; } /* kleinere Kachel im Bearbeiten-Raster als in der öffentlichen Galerie */
.wa-badge { display: inline-block; padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 700; background: rgba(28,27,25,.72); color: #fff; letter-spacing: .02em; }
.wa-badge--ai { background: #5B3FA8; }
.wa-image-edit { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1000px) { .wa-image-edit { grid-template-columns: 1fr; } }
.wa-preview { position: relative; margin: 0; background: #1C1B19; display: flex; align-items: center; justify-content: center; min-height: 240px; }
.wa-preview img { display: block; max-width: 100%; max-height: 70vh; object-fit: contain; }
.wa-preview-badge { position: absolute; top: 12px; left: 12px; }
.wa-preview-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.wa-preview-tools form { margin: 0; }
.wa-form-actions--split { justify-content: space-between; flex-wrap: wrap; }
.wa-actions-right { display: flex; gap: 8px; flex-wrap: wrap; }
.wa-trash-thumb { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex: none; background: var(--wa-surface-2); }
.wa-mb { margin-bottom: 16px; }

.wa-choice span.wa-pill { display: inline-block; flex-direction: row; font-size: 11px; padding: 1px 7px; vertical-align: middle; margin-left: 4px; }
.wa-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- 0.6.2: Veröffentlichen ---------- */
.wa-publish { display: flex; flex-direction: column; gap: 18px; }
.wa-publish .wa-form-actions { margin-top: 0; }
.wa-seg-radio { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 2px; padding: 4px; border-radius: 12px; background: var(--wa-surface-2); }
.wa-seg-radio label { display: block; margin: 0; cursor: pointer; }
.wa-seg-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.wa-seg-radio span { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 4px 8px; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--wa-muted); text-align: center; line-height: 1.2; }
.wa-seg-radio input:checked + span { background: var(--wa-surface); color: var(--wa-primary); font-weight: 600; box-shadow: 0 1px 3px rgba(28, 27, 25, .12); }
.wa-seg-radio input:focus-visible + span { box-shadow: var(--wa-focus); }
.wa-seg-radio input:disabled + span { opacity: .45; cursor: not-allowed; }
.wa-seg-radio label:has(input:disabled) { cursor: not-allowed; }
.wa-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 99px; flex: none; }
.wa-swatch--cream { background: #F3EDE4; border: 1px solid #C9C4BA; }
.wa-swatch--dark { background: #141312; }
.wa-copy--url { padding: 4px 4px 4px 12px; }
.wa-copy--url a { flex: 1; min-width: 0; font-size: 14px; color: var(--wa-text); text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wa-copy--url a:hover { text-decoration: underline; }
.wa-soon-line { margin: 0; font-size: 13px; color: var(--wa-faint); }

/* ---------- 0.6.2: Öffentliches Album ---------- */
body.wa-public { background: #F3EDE4 linear-gradient(170deg, #F3EDE4 0%, #E7ECE9 100%); }
.wa-preview-bar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 16px; background: var(--wa-warn-bg); color: var(--wa-warn); font-size: 14px; font-weight: 500; }
.wa-preview-bar a { color: var(--wa-warn); font-weight: 600; }
.wa-public-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: 1440px; margin: 0 auto; padding: 22px clamp(16px, 4.4vw, 64px); }
.wa-public-owner { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; min-width: 0; }
.wa-public-owner .wa-avatar { width: 36px; height: 36px; font-size: 13px; }
.wa-public .wa-lang-btn, .wa-public .wa-icon-btn { background: rgba(255, 255, 255, .6); border-color: rgba(28, 27, 25, .14); }
.wa-public-main { flex: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding: 12px clamp(16px, 4.4vw, 64px) 48px; }
.wa-album-intro { max-width: 780px; display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(28px, 4vw, 44px); }
.wa-album-intro h1 { font-size: clamp(34px, 5vw, 60px); font-weight: 700; line-height: 1.04; letter-spacing: -.02em; overflow-wrap: anywhere; }
.wa-eyebrow--accent { color: var(--wa-primary); font-size: 14px; }
.wa-album-text { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; color: var(--wa-text-2); }
.wa-album-text p { margin: 0 0 .6em; }
.wa-album-text > :last-child { margin-bottom: 0; }
.wa-album-ai { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--wa-muted); }
.wa-album-actions { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
.wa-album-actions .wa-btn--ghost { background: rgba(255, 255, 255, .7); border-color: rgba(28, 27, 25, .16); }
.wa-album-empty { padding: 40px 0; color: var(--wa-muted); }

.wa-gal-item { position: relative; display: block; overflow: hidden; background: #E3DDD3; color: inherit; }
.wa-gal-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease, opacity .2s; }
.wa-gal-item:hover img { transform: scale(1.015); }
.wa-gal-item:focus-visible { outline: 3px solid var(--wa-primary); outline-offset: 3px; }
/* Reihen: jedes Bild im eigenen Format, Reihen gleich hoch und bündig */
.wa-gal--rows { --wa-row-h: 280px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.wa-gal--rows::after { content: ""; flex-grow: 1000000; }
.wa-gal--rows .wa-gal-item { flex-grow: var(--r); flex-basis: calc(var(--r) * var(--wa-row-h)); aspect-ratio: var(--r); border-radius: 8px; }
/* Raster: gleich große, quadratische Kacheln */
.wa-gal--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.wa-gal--grid .wa-gal-item { aspect-ratio: 1; border-radius: 14px; }
@media (min-width: 1700px) { .wa-gal--rows { --wa-row-h: 320px; } }
@media (max-width: 760px) {
    .wa-gal--rows { --wa-row-h: 130px; gap: 4px; }
    .wa-gal--rows .wa-gal-item { border-radius: 6px; }
    .wa-gal--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .wa-gal--grid .wa-gal-item { border-radius: 10px; }
}
.wa-ai-badge { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 99px; background: #FFFFFF; color: #1C1B19; font-size: 11px; font-weight: 700; line-height: 1.2; box-shadow: 0 1px 4px rgba(28, 27, 25, .25); pointer-events: none; }
.wa-gif-badge { position: absolute; right: 10px; top: 10px; padding: 2px 7px; border-radius: 6px; background: rgba(28, 27, 25, .7); color: #FFFFFF; font-size: 11px; font-weight: 700; pointer-events: none; }
/* ---------- 0.9.0: Video in Alben – Galerie-Kachel ---------- */
.wa-gal-item--video { background: #E3DDD3; }
.wa-video-fallback {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--wa-primary) 20%, #FFFFFF) 0px, color-mix(in srgb, var(--wa-primary) 20%, #FFFFFF) 14px, color-mix(in srgb, var(--wa-primary) 11%, #FFFFFF) 14px, color-mix(in srgb, var(--wa-primary) 11%, #FFFFFF) 28px);
}
.wa-video-badge { position: absolute; left: 10px; top: 10px; padding: 3px 8px; border-radius: 6px; background: rgba(28, 27, 25, .68); color: #FFFFFF; font-size: 11px; font-weight: 700; line-height: 1.2; pointer-events: none; }
.wa-video-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 52px; height: 52px; border-radius: 99px; background: rgba(28, 27, 25, .5); color: #FFFFFF;
    display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; pointer-events: none;
}
.wa-video-play--solid { background: var(--wa-primary); box-shadow: 0 2px 8px rgba(28, 27, 25, .22); }
.wa-video-duration { position: absolute; right: 10px; bottom: 10px; padding: 5px 9px; border-radius: 99px; background: rgba(28, 27, 25, .55); color: #FFFFFF; font-size: 11px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; pointer-events: none; }
@media (max-width: 760px) {
    .wa-video-badge { left: 6px; top: 6px; padding: 3px 7px; font-size: 10px; }
    .wa-video-play { width: 40px; height: 40px; font-size: 16px; }
    .wa-video-duration { right: 6px; bottom: 6px; padding: 4px 7px; font-size: 10px; }
}
.wa-credit {
    position: absolute; top: var(--b-top, auto); bottom: var(--b-bottom, 10px); left: var(--b-left, auto); right: var(--b-right, 10px); transform: var(--b-tf, none);
    display: inline-flex; align-items: center; gap: 5px; padding: calc(var(--b-pad, 9px) * .6) var(--b-pad, 9px); border-radius: var(--b-radius, 99px);
    background: var(--b-bg, rgba(28, 27, 25, .55)); color: var(--b-fg, #FFFFFF); font-size: var(--b-font, 11px); font-weight: 600; line-height: 1.2;
    white-space: nowrap; text-decoration: none; pointer-events: none; box-shadow: var(--b-shadow, none);
    -webkit-backdrop-filter: var(--b-blur, blur(6px)); backdrop-filter: var(--b-blur, blur(6px));
}
.wa-credit[data-wa-badge-link] { pointer-events: auto; cursor: pointer; }
.wa-credit img { display: block; object-fit: cover; border-radius: 3px; }
@media (max-width: 760px) {
    .wa-ai-badge { left: 6px; top: 6px; padding: 3px 7px; font-size: 10px; }
    .wa-gif-badge { right: 6px; top: 6px; font-size: 10px; }
    .wa-credit.wa-credit--shrink {
        padding: calc(var(--b-pad, 9px) * .42) calc(var(--b-pad, 9px) * .7); font-size: calc(var(--b-font, 11px) * .83);
        top: calc(var(--b-top, auto) * .6); bottom: calc(var(--b-bottom, auto) * .6); left: calc(var(--b-left, auto) * .6); right: calc(var(--b-right, auto) * .6);
    }
    /* 0.7.6b: Badge in Reihen-/Mosaik-Kacheln auf dem Handy nicht mehr pauschal aus – der Admin steuert das selbst
       über „In der Galerie anzeigen“ + „Auf dem Handy kleiner“ (siehe .wa-credit--shrink oben) */
}

/* ---------- 0.6.2: Großansicht ---------- */
html.wa-lb-open, html.wa-lb-open body { overflow: hidden; }
.wa-lb {
    --lb-bg: #F3EDE4 linear-gradient(170deg, #F3EDE4 0%, #E7ECE9 100%);
    --lb-fg: #1C1B19; --lb-muted: #5E5B55; --lb-btn: rgba(28, 27, 25, .07); --lb-btn-on: rgba(28, 27, 25, .16);
    --lb-nav: #FFFFFF; --lb-shadow: 0 12px 40px rgba(28, 27, 25, .18); --lb-ring: #1C1B19;
    position: fixed; inset: 0; z-index: 1000; display: flex; background: var(--lb-bg); color: var(--lb-fg); font-family: var(--wa-font);
}
.wa-lb[data-theme="dark"] {
    --lb-bg: #141312; --lb-fg: #F4F1EC; --lb-muted: #A8A39A; --lb-btn: rgba(255, 255, 255, .08); --lb-btn-on: rgba(255, 255, 255, .22);
    --lb-nav: rgba(255, 255, 255, .1); --lb-shadow: none; --lb-ring: #F4F1EC;
}
@media (prefers-color-scheme: dark) {
    .wa-lb[data-theme="auto"] {
        --lb-bg: #141312; --lb-fg: #F4F1EC; --lb-muted: #A8A39A; --lb-btn: rgba(255, 255, 255, .08); --lb-btn-on: rgba(255, 255, 255, .22);
        --lb-nav: rgba(255, 255, 255, .1); --lb-shadow: none; --lb-ring: #F4F1EC;
    }
}
.wa-lb[hidden], .wa-lb [hidden] { display: none !important; }
.wa-lb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wa-lb-top { height: 72px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 20px 0 28px; }
.wa-lb-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wa-lb-album { font-size: 13px; color: var(--lb-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wa-lb-pos { font-size: 15px; font-weight: 600; }
.wa-lb-tools { display: flex; gap: 8px; flex: none; }
.wa-lb-btn { width: 44px; height: 44px; border: none; border-radius: 12px; background: var(--lb-btn); color: var(--lb-fg); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; }
.wa-lb-btn:hover { background: var(--lb-btn-on); color: var(--lb-fg); }
.wa-lb-btn[aria-pressed="true"] { background: var(--lb-btn-on); }
.wa-lb-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 20px; padding: 0 20px; }
.wa-lb-nav { width: 52px; height: 52px; flex: none; border: none; border-radius: 99px; background: var(--lb-nav); color: var(--lb-fg); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 3px rgba(28, 27, 25, .12); }
.wa-lb[data-theme="dark"] .wa-lb-nav { box-shadow: none; }
.wa-lb-nav:disabled { opacity: .3; cursor: default; }
.wa-lb-figure { position: relative; margin: 0; flex: 0 1 auto; min-width: 0; line-height: 0; }
.wa-lb-img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 212px); max-height: calc(100dvh - 212px); border-radius: 6px; box-shadow: var(--lb-shadow); user-select: none; -webkit-user-select: none; transition: filter .25s; }
.wa-lb-img.is-loading { filter: blur(3px); }
/* 0.9.0: Video in der Großansicht – natives <video>-Element, gleiche Maße wie das Bild */
.wa-lb-video { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 212px); max-height: calc(100dvh - 212px); border-radius: 6px; box-shadow: var(--lb-shadow); background: #000; }
.wa-lb-kind { flex: none; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: var(--lb-btn-on); color: var(--lb-fg); white-space: nowrap; }
@media (max-width: 760px) {
    .wa-lb-video { border-radius: 0; max-height: calc(100vh - 76px - var(--lb-sheet, 0px)); max-height: calc(100dvh - 76px - var(--lb-sheet, 0px)); }
}
.wa-lb-ai { left: 14px; top: 14px; font-size: 12px; padding: 5px 11px; }
.wa-lb-credit { right: var(--b-right, 14px); bottom: var(--b-bottom, 14px); left: var(--b-left, auto); top: var(--b-top, auto); }
.wa-lb-strip { height: 116px; flex: none; display: flex; justify-content: safe center; gap: 8px; padding: 18px 28px 26px; overflow-x: auto; scrollbar-width: thin; }
.wa-lb-thumb { position: relative; flex: none; width: 72px; height: 72px; padding: 0; border: none; border-radius: 8px; overflow: hidden; background: transparent; opacity: .55; cursor: pointer; }
.wa-lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wa-lb-thumb:hover { opacity: .85; }
.wa-lb-thumb[aria-current="true"] { opacity: 1; outline: 2px solid var(--lb-ring); outline-offset: 2px; }
/* Infospalte: immer dunkel */
.wa-lb-info { display: none; width: 360px; flex: none; flex-direction: column; gap: 22px; padding: 88px 28px 28px; background: #1E1D1B; color: #F4F1EC; border-left: 1px solid rgba(255, 255, 255, .08); overflow-y: auto; }
.wa-lb.is-info .wa-lb-info { display: flex; }
.wa-lb-title { font-family: var(--wa-font-display); font-size: 26px; font-weight: 700; line-height: 1.15; color: #F4F1EC; overflow-wrap: anywhere; }
.wa-lb-desc { margin: 0; font-size: 15px; line-height: 1.6; color: #D2CDC4; white-space: pre-line; overflow-wrap: anywhere; }
.wa-lb-ainote { padding: 14px; border-radius: 12px; background: rgba(255, 255, 255, .06); font-size: 14px; line-height: 1.5; color: #D2CDC4; }
.wa-lb-ainote strong { color: #F4F1EC; }
.wa-lb-meta { margin: 0; display: grid; grid-template-columns: 110px 1fr; row-gap: 10px; font-size: 14px; }
.wa-lb-meta dt { color: #A8A39A; }
.wa-lb-meta dd { margin: 0; }
.wa-lb-keys { margin: auto 0 0; font-size: 13px; line-height: 1.5; color: #A8A39A; }
.wa-lb .wa-lb-btn:focus-visible, .wa-lb .wa-lb-nav:focus-visible, .wa-lb .wa-lb-thumb:focus-visible { outline: 2px solid var(--lb-ring); outline-offset: 2px; }
@media (max-width: 760px) {
    .wa-lb { flex-direction: column; }
    .wa-lb-main { flex: 1; min-height: 0; }
    .wa-lb-top { height: 60px; padding: 0 8px 0 16px; }
    .wa-lb-album { display: none; }
    .wa-lb-tools { gap: 2px; }
    .wa-lb-btn { background: transparent; }
    .wa-lb-stage { padding: 0; gap: 0; }
    .wa-lb-nav, .wa-lb-strip { display: none; }
    .wa-lb-img { border-radius: 0; box-shadow: none; max-height: calc(100vh - 76px - var(--lb-sheet, 0px)); max-height: calc(100dvh - 76px - var(--lb-sheet, 0px)); }
    .wa-lb-info { width: auto; max-height: 42vh; max-height: 42dvh; padding: 18px 18px 26px; gap: 10px; border-left: none; border-radius: 18px 18px 0 0; }
    .wa-lb.is-info:not(.has-text) .wa-lb-info { display: none; }
    .wa-lb-title { font-size: 22px; }
    .wa-lb-desc { font-size: 15px; line-height: 1.5; }
    .wa-lb-keys { margin-top: 4px; }
}
/* Schmales Fenster, aber Maus (kein Touch): Pfeile über dem Bild statt Wischen */
@media (max-width: 760px) and (hover: hover) and (pointer: fine) {
    .wa-lb-stage { position: relative; }
    .wa-lb-nav { display: inline-flex; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; }
    .wa-lb-nav--prev { left: 8px; }
    .wa-lb-nav--next { right: 8px; }
    .wa-lb-nav:disabled { display: none; }
}
.wa-lb-lock { margin: 0; padding: 12px 14px; border-radius: 12px; border: 1px dashed rgba(255, 255, 255, .18); font-size: 13px; line-height: 1.5; color: #A8A39A; }
.wa-lb-empty { margin: 0; font-size: 14px; color: #A8A39A; }

/* ---------- 0.6.3: Veröffentlichen – Optionen ---------- */
.wa-opt { display: flex; flex-direction: column; gap: 10px; }
.wa-opt .wa-switch-row { padding: 10px 0 0; }
.wa-opt .wa-field[hidden], .wa-stack-s[hidden] { display: none; }
.wa-switch-row--head { border-top: none; padding-top: 0; }
.wa-switch-row--head .wa-card-title { margin: 0; }

/* ---------- 0.6.3: Mosaik ---------- */
.wa-gal--masonry { columns: 4 240px; column-gap: 12px; }
.wa-gal--masonry .wa-gal-item { break-inside: avoid; margin-bottom: 12px; aspect-ratio: var(--r); border-radius: 14px; }
@media (max-width: 760px) {
    .wa-gal--masonry { columns: 2; column-gap: 8px; }
    .wa-gal--masonry .wa-gal-item { margin-bottom: 8px; border-radius: 10px; }
    /* 0.7.6b: Badge nicht mehr pauschal aus, siehe .wa-gal--rows oben */
}

/* ---------- 0.6.3: Passwort-Seite ---------- */
.wa-pw-wrap { display: flex; justify-content: center; padding: clamp(24px, 8vh, 96px) 0; }
.wa-pw-card { width: 100%; max-width: 440px; padding: 36px; border-radius: 22px; background: var(--wa-surface); border: 1px solid var(--wa-border); box-shadow: 0 20px 50px rgba(28, 27, 25, .08); display: flex; flex-direction: column; gap: 20px; }
.wa-pw-icon { width: 52px; height: 52px; border-radius: 16px; background: rgba(var(--wa-primary-rgb), .14); color: var(--wa-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; }
.wa-pw-head { display: flex; flex-direction: column; gap: 8px; }
.wa-pw-head h1 { font-size: 32px; line-height: 1.1; overflow-wrap: anywhere; }
.wa-pw-head p { margin: 0; line-height: 1.55; }
.wa-pw-card .wa-help { margin: 0; }
@media (max-width: 520px) { .wa-pw-card { padding: 24px; border-radius: 18px; } }

/* ---------- 0.6.3: Diashow ---------- */
.wa-ss {
    --ss-bg: #141312; --ss-fg: #F4F1EC; --ss-muted: #A8A39A; --ss-btn: rgba(255, 255, 255, .08); --ss-on: rgba(255, 255, 255, .18);
    --ss-bar: rgba(40, 39, 37, .92); --ss-track: rgba(255, 255, 255, .15); --ss-shadow: none;
    position: fixed; inset: 0; z-index: 1001; background: var(--ss-bg); color: var(--ss-fg); font-family: var(--wa-font); overflow: hidden;
}
.wa-ss[data-theme="cream"] {
    --ss-bg: #F3EDE4 linear-gradient(170deg, #F3EDE4 0%, #E7ECE9 100%); --ss-fg: #1C1B19; --ss-muted: #5E5B55; --ss-btn: rgba(28, 27, 25, .07);
    --ss-on: #FFFFFF; --ss-bar: rgba(255, 255, 255, .92); --ss-track: rgba(28, 27, 25, .12); --ss-shadow: 0 12px 40px rgba(28, 27, 25, .18);
}
@media (prefers-color-scheme: light) {
    .wa-ss[data-theme="auto"] {
        --ss-bg: #F3EDE4 linear-gradient(170deg, #F3EDE4 0%, #E7ECE9 100%); --ss-fg: #1C1B19; --ss-muted: #5E5B55; --ss-btn: rgba(28, 27, 25, .07);
        --ss-on: #FFFFFF; --ss-bar: rgba(255, 255, 255, .92); --ss-track: rgba(28, 27, 25, .12); --ss-shadow: 0 12px 40px rgba(28, 27, 25, .18);
    }
}
.wa-ss[hidden], .wa-ss [hidden] { display: none !important; }
.wa-ss-progress { position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--ss-track); z-index: 3; }
.wa-ss-progress span { display: block; height: 100%; width: 0; background: var(--ss-fg); }
.wa-ss.is-paused .wa-ss-progress span { opacity: .4; }
.wa-ss-close { position: absolute; right: 24px; top: 22px; z-index: 3; width: 44px; height: 44px; border: none; border-radius: 12px; background: var(--ss-btn); color: var(--ss-fg); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity .3s; }
.wa-ss-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 76px 40px 110px; }
.wa-ss-frame { position: relative; width: 100%; height: 100%; }
.wa-ss-img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; opacity: 0; transition: opacity .8s ease; border-radius: 6px; box-shadow: var(--ss-shadow); }
.wa-ss-img.is-on { opacity: 1; }
/* 0.9.0: Video in der Diashow – spielt bis zum Ende, dann weiter (kein fester Timer) */
.wa-ss-video { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; opacity: 0; transition: opacity .8s ease; border-radius: 6px; box-shadow: var(--ss-shadow); background: #000; }
.wa-ss-video.is-on { opacity: 1; }
@media (max-width: 760px) { .wa-ss-video { border-radius: 0; } }
@media (prefers-reduced-motion: reduce) { .wa-ss-video { transition: none; } }
.wa-ss-caption { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); max-width: 70%; padding: 7px 12px; border-radius: 10px; background: rgba(28, 27, 25, .6); color: #FFFFFF; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 2; }
.wa-ss-credit { position: absolute; right: 24px; bottom: 40px; z-index: 2; } /* 0.7.6a: endgültige Position setzt gallery.js (positionCredit) je nach tatsächlicher Bildgröße; das hier gilt nur für den ersten Sekundenbruchteil, bevor das erste Bild geladen ist */
.wa-ss-controls { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 99px; background: var(--ss-bar); box-shadow: 0 8px 30px rgba(28, 27, 25, .18); transition: opacity .3s; }
.wa-ss-btn { width: 44px; height: 44px; border: none; border-radius: 99px; background: transparent; color: var(--ss-fg); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.wa-ss-btn:hover { background: var(--ss-btn); }
.wa-ss-play { width: 52px; height: 52px; border: none; border-radius: 99px; background: var(--wa-primary); color: var(--wa-on-primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.wa-ss-sep { width: 1px; height: 28px; margin: 0 6px; background: var(--ss-track); }
.wa-ss-speed { display: flex; padding: 3px; border-radius: 99px; background: var(--ss-btn); }
.wa-ss-speed button { height: 36px; padding: 0 12px; white-space: nowrap; border: none; border-radius: 99px; background: transparent; font: inherit; font-size: 13px; font-weight: 500; color: var(--ss-muted); cursor: pointer; }
.wa-ss-speed button[aria-checked="true"] { background: var(--ss-on); color: var(--ss-fg); font-weight: 600; }
.wa-ss-pos { padding: 0 10px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wa-ss button:focus-visible { outline: 2px solid var(--ss-fg); outline-offset: 2px; }
.wa-ss.is-idle { cursor: none; }
.wa-ss.is-idle .wa-ss-controls, .wa-ss.is-idle .wa-ss-close { opacity: 0; pointer-events: none; }
@media (max-width: 760px) {
    .wa-ss-stage { padding: 64px 0 96px; }
    .wa-ss-img { border-radius: 0; }
    .wa-ss-close { right: 10px; top: 12px; }
    .wa-ss-controls { bottom: 16px; gap: 2px; }
    .wa-ss-sep, .wa-ss-pos, .wa-ss-controls .wa-ss-btn:last-child:not(:nth-child(3)) { display: none; }
    /* 0.7.6a: Position auf dem Handy setzt jetzt gallery.js (positionCredit), am Bild statt am Bildschirm verankert */
    .wa-ss-speed button { padding: 0 9px; }
}
@media (prefers-reduced-motion: reduce) { .wa-ss-img { transition: none; } }

/* ---------- 0.6.3: Statistik ---------- */
.wa-stats-wrap { position: relative; }
.wa-stats-wrap .wa-stats { display: flex; flex-direction: column; gap: 20px; }  /* nur Statistik-Seite – nicht die Kacheln im Admin */
.wa-stats-wrap.is-locked .wa-stats { filter: blur(6px); opacity: .55; pointer-events: none; user-select: none; }
.wa-stat-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.wa-stat-tile { padding: 20px; border-radius: 16px; background: var(--wa-surface); border: 1px solid var(--wa-border); display: flex; flex-direction: column; gap: 6px; }
.wa-stat-tile span { font-size: 14px; color: var(--wa-muted); }
.wa-stat-tile strong { font-family: var(--wa-font-display); font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.wa-stat-tile small { font-size: 13px; color: var(--wa-faint); }
.wa-stats-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.wa-stats-grid .wa-card { margin: 0; }
.wa-chart { height: 220px; display: flex; align-items: flex-end; gap: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--wa-border); margin-top: 16px; }
.wa-chart-bar { flex: 1 1 0; min-width: 2px; border-radius: 4px 4px 0 0; background: rgba(var(--wa-primary-rgb), .45); }
.wa-chart-bar.is-peak { background: var(--wa-primary); }
.wa-chart-axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--wa-faint); margin-top: 6px; }
.wa-top-list { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.wa-top-list li { display: flex; align-items: center; gap: 12px; }
.wa-top-list img, .wa-top-gone { width: 44px; height: 44px; flex: none; border-radius: 8px; object-fit: cover; background: var(--wa-surface-2); }
.wa-top-list li > span:not(.wa-top-gone) { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wa-top-list strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.wa-stats-lock { position: absolute; left: 50%; top: 110px; transform: translateX(-50%); width: min(440px, 92%); padding: 28px; border-radius: 18px; background: var(--wa-surface); border: 1px solid var(--wa-border); box-shadow: 0 20px 50px rgba(28, 27, 25, .12); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.wa-stats-lock h2 { font-size: 22px; }
.wa-stats-lock p { margin: 0; line-height: 1.5; }
.wa-icon-badge--warm { background: rgba(var(--wa-secondary-rgb), .18); color: #7A4A0E; }
@media (max-width: 1100px) { .wa-stats-grid { grid-template-columns: 1fr; } .wa-stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .wa-stat-tile strong { font-size: 28px; } }

/* ---------- 0.6.4: Profilseite bearbeiten ---------- */
.wa-prof-imgs { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 760px) { .wa-prof-imgs { grid-template-columns: 1fr; } }
.wa-prof-img-col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; min-width: 0; }
.wa-prof-img-col--wide { align-items: stretch; }
.wa-prof-avatar { width: 120px; height: 120px; border-radius: 99px; object-fit: cover; display: flex; align-items: center; justify-content: center; background: rgba(var(--wa-secondary-rgb), .35); color: #fff; font-family: var(--wa-font-display); font-size: 38px; font-weight: 700; }
.wa-inline-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wa-inline-tools form { margin: 0; }
.wa-file-btn { position: relative; }
.wa-file-btn:focus-within { box-shadow: var(--wa-focus); }
.wa-prof-head-sample { height: 140px; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--wa-primary) 70%, #1C1B19) 0%, var(--wa-primary) 55%, color-mix(in srgb, var(--wa-primary) 45%, #F3D9B0) 100%); }
.wa-focus { position: relative; width: fit-content; max-width: 100%; border-radius: 14px; overflow: hidden; cursor: crosshair; background: #1C1B19; line-height: 0; }
.wa-focus img { max-width: 100%; width: auto; height: auto; max-height: 360px; display: block; }
.wa-focus-mark { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 99px; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.35), inset 0 0 0 2px rgba(0,0,0,.25); pointer-events: none; left: 50%; top: 50%; }
.wa-focus-tag { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 8px; background: rgba(28,27,25,.72); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.4; pointer-events: none; }
.wa-focus-status { color: var(--wa-ok); font-weight: 600; }
.wa-focus-previews { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.wa-focus-previews > div { display: flex; flex-direction: column; gap: 4px; }
.wa-focus-prev { display: block; overflow: hidden; border-radius: 10px; border: 1px solid var(--wa-border); background: var(--wa-surface-2); }
.wa-focus-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wa-focus-prev--wide { width: 240px; height: 60px; }
.wa-focus-prev--phone { width: 80px; height: 60px; }
.wa-link-row { display: flex; align-items: center; gap: 10px; }
.wa-link-row[hidden] { display: none; }
.wa-link-ico { width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--wa-bg); display: inline-flex; align-items: center; justify-content: center; color: var(--wa-text-2); }
.wa-link-add { align-self: flex-start; display: inline-flex; gap: 6px; align-items: center; text-decoration: none; font-weight: 600; font-size: 14px; padding: 6px 0; background-image: none !important; }
.wa-prof-albums { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; }
.wa-prof-album { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #EFEDE7; background: var(--wa-surface); }
.wa-prof-album:first-child { border-top: none; }
.wa-prof-album.is-dragging { opacity: .4; }
.wa-grip { color: var(--wa-faint); cursor: grab; }
.wa-prof-album-thumb { width: 44px; height: 44px; flex: none; border-radius: 10px; overflow: hidden; background: var(--wa-surface-2); display: inline-flex; align-items: center; justify-content: center; color: var(--wa-faint); }
.wa-prof-album-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wa-prof-album-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wa-prof-album-main strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-prof-album-main small { font-size: 13px; display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.wa-prof-album-main .bi { font-size: 13px; }
.wa-switch:disabled { opacity: .45; cursor: not-allowed; }
.wa-modal-box--wide { max-width: 760px; }
.wa-pick-list { max-height: 55vh; overflow-y: auto; }
.wa-pick-list .wa-fieldset:first-child { margin-top: 0; }
.wa-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.wa-pick { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--wa-surface-2); }
.wa-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wa-pick input { position: absolute; opacity: 0; }
.wa-pick:has(input:checked) { box-shadow: 0 0 0 3px var(--wa-primary); }
.wa-pick:has(input:focus-visible) { outline: 2px solid var(--wa-primary); outline-offset: 2px; }
.wa-avatar--img { object-fit: cover; padding: 0; }

/* ---------- 0.6.4: Öffentliche Profilseite ---------- */
.wa-prof-hero { position: relative; height: clamp(170px, 22vw, 300px); background: linear-gradient(135deg, color-mix(in srgb, var(--wa-primary) 70%, #1C1B19) 0%, var(--wa-primary) 55%, color-mix(in srgb, var(--wa-primary) 45%, #F3D9B0) 100%); overflow: hidden; }
.wa-prof-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wa-prof-hero-actions { position: absolute; top: 20px; right: clamp(16px, 3.4vw, 48px); display: flex; gap: 8px; }
.wa-profile-page .wa-prof-hero .wa-lang-btn, .wa-profile-page .wa-prof-hero .wa-icon-btn { background: rgba(255,255,255,.88); border-color: transparent; }
.wa-prof-main { flex: 1; width: 100%; max-width: 928px; margin: 0 auto; padding: 0 24px 48px; display: flex; flex-direction: column; gap: 40px; }
.wa-prof-intro { display: flex; flex-direction: column; gap: 24px; position: relative; }
.wa-prof-id { display: flex; align-items: flex-end; gap: 24px; }
.wa-prof-photo { --s: clamp(112px, 14vw, 168px); width: var(--s); height: var(--s); margin-top: calc(var(--s) * -.5); flex: none; border-radius: 99px; border: 6px solid var(--wa-bg); object-fit: cover; background: #D9C3A6; display: flex; align-items: center; justify-content: center; font-family: var(--wa-font-display); font-size: clamp(36px, 4.4vw, 52px); font-weight: 700; color: #fff; }
.wa-prof-name { display: flex; flex-direction: column; gap: 4px; padding: 14px 0 6px; min-width: 0; }
.wa-prof-name h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; overflow-wrap: anywhere; }
.wa-prof-name p { margin: 0; font-size: 17px; color: var(--wa-muted); }
@media (max-width: 560px) { .wa-prof-id { flex-direction: column; align-items: flex-start; gap: 12px; } .wa-prof-name { padding-bottom: 0; } }
.wa-prof-bio { margin: 0; font-size: 18px; line-height: 1.65; color: var(--wa-text-2); max-width: 70ch; }
.wa-prof-chips, .wa-prof-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wa-prof-chips li { font-size: 14px; font-weight: 500; padding: 7px 14px; border-radius: 99px; background: var(--wa-surface); border: 1px solid var(--wa-border); }
.wa-prof-links { gap: 12px; }
.wa-prof-links a { min-height: 46px; padding: 0 16px; display: inline-flex; align-items: center; gap: 10px; border-radius: 12px; background: var(--wa-surface); border: 1px solid var(--wa-border); font-size: 15px; font-weight: 600; color: var(--wa-text); text-decoration: none; }
.wa-prof-links a:hover { border-color: var(--wa-primary); color: var(--wa-text); }
.wa-prof-albums-pub { display: flex; flex-direction: column; gap: 16px; }
.wa-prof-albums-pub h2 { font-size: 24px; }
.wa-prof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.wa-prof-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--wa-text); }
.wa-prof-card:hover { color: var(--wa-text); }
.wa-prof-card-cover { aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(var(--wa-primary-rgb), .14), rgba(var(--wa-secondary-rgb), .18)); color: rgba(var(--wa-primary-rgb), .6); font-size: 34px; }
.wa-prof-card-cover .bi { font-size: 34px; }
.wa-prof-card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.wa-prof-card:hover .wa-prof-card-cover img { transform: scale(1.03); }
.wa-prof-card-title { font-size: 16px; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; margin-top: 4px; }
.wa-prof-card-title .bi { font-size: 14px; color: var(--wa-muted); }
a.wa-public-owner { color: var(--wa-text); text-decoration: none; border-radius: 99px; padding-right: 10px; }
a.wa-public-owner:hover { color: var(--wa-primary); }
.wa-prof-private { margin: 12vh auto; }
.wa-prof-private-icon { width: 76px; height: 76px; border-radius: 99px; background: var(--wa-surface-2); color: var(--wa-muted); display: inline-flex; align-items: center; justify-content: center; }
.wa-prof-private-icon .bi { font-size: 32px; }

/* ---------- 0.6.5: Als Benutzer ansehen ---------- */
.wa-viewas-bar { position: sticky; top: 0; z-index: 60; flex: 0 0 100%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px; padding: 9px 16px; background: #5B3FA8; color: #fff; font-size: 14px; font-weight: 500; }
.wa-viewas-bar form { margin: 0; }
.wa-btn--viewas { background: #fff; color: #3E2A78; min-height: 34px; }
.wa-btn--viewas:hover { background: #EFEAFB; color: #3E2A78; }
body.wa-app[data-wa-readonly] { flex-wrap: wrap; }
body.wa-app[data-wa-readonly] .wa-sidebar { top: 52px; height: calc(100vh - 52px); }
[data-wa-readonly] .wa-app-content button[type=submit]:disabled, [data-wa-readonly] .wa-app-content .wa-file-btn.is-disabled { cursor: not-allowed; }
[data-wa-readonly] .wa-dropzone { opacity: .5; pointer-events: none; }
.wa-head-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wa-head-tools form { margin: 0; }
@media (max-width: 900px) {
    body.wa-app[data-wa-readonly] .wa-sidebar { top: auto; height: auto; }
    body.wa-app[data-wa-readonly] { flex-wrap: nowrap; }
    .wa-viewas-bar { position: static; flex: 0 0 auto; text-align: center; }
    .wa-viewas-bar > span { min-width: 0; }
}
[data-wa-readonly] .wa-app-content button:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- 0.6.6: Automatisch speichern ---------- */
.wa-autosave-on [data-wa-autosave] .wa-save-btn { display: none; }
.wa-save-status { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 99px; font-size: 13px; font-weight: 600; background: var(--wa-surface-2); color: var(--wa-muted); white-space: nowrap; }
.wa-save-status[hidden] { display: none; }
.wa-save-status { transition: opacity .3s; }
.wa-save-status.is-fading { opacity: 0; }  /* 0.6.9f: „Gespeichert“ blendet nach 2 s aus */
.wa-save-status .bi { font-size: 15px; }
.wa-save-status.is-saving .bi { animation: wa-spin 1s linear infinite; }
.wa-save-status.is-saved { background: var(--wa-ok-bg); color: var(--wa-ok); }
.wa-save-status.is-failed { background: var(--wa-warn-bg); color: var(--wa-warn); white-space: normal; max-width: 420px; }
.wa-save-status.is-offline { background: var(--wa-fail-bg); color: var(--wa-fail); }
.wa-save-status--float { position: fixed; right: 20px; bottom: 20px; z-index: 90; box-shadow: 0 6px 20px rgba(28,27,25,.16); }
@keyframes wa-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wa-save-status.is-saving .bi { animation: none; } }
.wa-switch-row > span > .wa-pill.is-new { align-self: flex-start; }
/* 0.6.7b: bei „Als Benutzer ansehen“ gibt es nichts zu speichern → Speichern-Knöpfe ganz ausblenden */
[data-wa-readonly] [data-wa-autosave] .wa-save-btn { display: none; }

/* ---------- 0.6.8: Rechtliches ---------- */
.wa-legal { width: 100%; max-width: 760px; margin: 12px auto 0; display: flex; flex-direction: column; gap: 22px; }
.wa-legal-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.wa-legal-tabs a { padding: 7px 14px; border-radius: 99px; font-size: 14px; font-weight: 500; text-decoration: none; color: var(--wa-text-2); background: var(--wa-surface); border: 1px solid var(--wa-border); }
.wa-legal-tabs a:hover { border-color: var(--wa-primary); color: var(--wa-text); }
.wa-legal-tabs a.is-active { background: var(--wa-primary); border-color: var(--wa-primary); color: var(--wa-on-primary); font-weight: 600; }
.wa-legal-head { display: flex; flex-direction: column; gap: 6px; }
.wa-legal-head h1 { font-size: clamp(32px, 5vw, 44px); letter-spacing: -.02em; line-height: 1.1; overflow-wrap: anywhere; }
.wa-legal-head p { margin: 0; }
.wa-legal-text { background: var(--wa-surface); border: 1px solid var(--wa-border); border-radius: 18px; padding: clamp(20px, 4vw, 32px) clamp(18px, 4vw, 36px); font-size: 16px; line-height: 1.65; color: var(--wa-text-2); overflow-wrap: anywhere; }
.wa-legal-text > :first-child { margin-top: 0; }
.wa-legal-text h1 { font-size: 30px; color: var(--wa-text); margin: 0 0 12px; }
.wa-legal-text h2 { font-size: 22px; color: var(--wa-text); margin: 26px 0 8px; }
.wa-legal-text h3 { font-size: 18px; color: var(--wa-text); margin: 20px 0 6px; }
.wa-legal-text p, .wa-legal-text ul, .wa-legal-text ol { margin: 0 0 12px; }
.wa-legal-text ul, .wa-legal-text ol { padding-left: 22px; }
.wa-legal-text--preview { border: none; padding: 4px 0 0; }
.wa-license-page details { padding: 14px 0; border-top: 1px solid #EFEDE7; }
.wa-license-page details:first-child { border-top: none; padding-top: 0; }
.wa-license-page summary { cursor: pointer; display: flex; align-items: center; gap: 10px; }
.wa-license-page pre { white-space: pre-wrap; font-size: 12px; line-height: 1.5; background: var(--wa-bg); border-radius: 10px; padding: 14px; margin: 8px 0 0; max-height: 360px; overflow: auto; }
.wa-md-editor { border: 1px solid var(--wa-border-strong); border-radius: 12px; overflow: hidden; background: var(--wa-surface); }
.wa-md-editor:focus-within { border-color: var(--wa-primary); box-shadow: var(--wa-focus); }
.wa-md-tools { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid #EFEDE7; background: #F9F8F5; }
.wa-md-tools button { min-width: 36px; height: 34px; padding: 0 8px; border: none; border-radius: 8px; background: transparent; font: inherit; font-size: 14px; color: var(--wa-text-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.wa-md-tools button:hover { background: var(--wa-surface-2); color: var(--wa-text); }
.wa-md-tools-gap { flex: 1; }
.wa-md-tools .wa-md-next { background: var(--wa-warn-bg); color: var(--wa-warn); font-size: 13px; font-weight: 600; }
.wa-md-text { border: none; border-radius: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; line-height: 1.7; min-height: 480px; }
.wa-md-text:focus { box-shadow: none; }
.wa-card--warn { background: #FDF6EC; border-color: #EDD5B0; }
.wa-card--warn .wa-card-title { font-size: 16px; color: #5A3A0C; }
.wa-card--warn .wa-help { color: var(--wa-warn); }
.wa-open-list { margin: 0 0 10px; padding-left: 18px; font-size: 14px; line-height: 1.7; color: #5A3A0C; }
.wa-card--ok { background: var(--wa-ok-bg); border-color: #CBE5D4; padding: 16px 20px; }
.wa-ok-line { margin: 0; display: flex; gap: 8px; align-items: center; color: var(--wa-ok); font-weight: 600; font-size: 14px; }
.wa-count--warn { background: var(--wa-warn-bg); color: var(--wa-warn); }
.wa-auth-legal a[aria-current="page"], .wa-footer a[aria-current="page"] { color: var(--wa-text); font-weight: 600; }

/* ---------- 0.6.8b: Übersicht wieder grafisch (wie Mockup „Benutzer-Dashboard“) ---------- */
.wa-tile-pct { font-size: 13px; font-weight: 600; color: var(--wa-primary); }
.wa-tile-pct.is-warn { color: #9A5B0C; }
.wa-tile-pct.is-full { color: #B42318; }
.wa-stack-bar { display: flex; height: 14px; border-radius: 99px; background: var(--wa-surface-2); overflow: hidden; margin: 6px 0 2px; }
.wa-stack-bar > span { display: block; height: 100%; min-width: 0; transition: width .4s; }
.wa-stack-bar > span:not([style*="width: 0%"]) { min-width: 6px; }
.wa-stack-bar > span + span { border-left: 2px solid var(--wa-surface); }
.wa-stack-bar .is-images, .wa-legend .is-images { background: var(--wa-primary); }
.wa-stack-bar .is-orig, .wa-legend .is-orig { background: rgba(var(--wa-primary-rgb), .45); }
.wa-stack-bar .is-profile, .wa-legend .is-profile { background: #7C8FB3; }
.wa-stack-bar .is-trash, .wa-legend .is-trash { background: var(--wa-secondary); }
.wa-stack-bar .is-library, .wa-legend .is-library { background: #8E6BB0; }  /* 0.7.3d: Mediathek (Admin-Übersicht) */
.wa-legend .is-free { background: var(--wa-surface-2); box-shadow: inset 0 0 0 1px var(--wa-border-strong); }
.wa-stack-bar.is-full .is-images { background: #B42318; }
.wa-legend { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--wa-text-2); }
.wa-legend li { display: inline-flex; align-items: center; gap: 7px; }
.wa-legend li > i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.wa-legend strong { font-weight: 600; color: var(--wa-text); }
.wa-legend--sm { font-size: 13px; gap: 4px 14px; }
.wa-legend--sm .bi { font-size: 14px; color: var(--wa-muted); }
.wa-tile-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid #EFEDE7; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13px; color: var(--wa-text-2); }
.wa-tile-foot > span { display: inline-flex; align-items: center; gap: 6px; }
.wa-tile-foot .bi { font-size: 14px; color: var(--wa-muted); }
.wa-tile-foot a { margin-left: auto; font-weight: 600; text-decoration: none; font-size: 14px; }
.wa-hbars { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wa-hbars li { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) 52px; align-items: center; gap: 12px; font-size: 14px; }
.wa-hbars a { color: var(--wa-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-hbars a:hover { color: var(--wa-primary); }
.wa-hbars strong { text-align: right; font-variant-numeric: tabular-nums; }
.wa-hbar { display: block; height: 8px; border-radius: 99px; background: var(--wa-surface-2); overflow: hidden; }
.wa-hbar > span { display: block; height: 100%; border-radius: 99px; background: rgba(var(--wa-primary-rgb), .7); min-width: 6px; transition: width .4s; }
.wa-tile-icon { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--wa-warn-bg); color: var(--wa-warn); }
.wa-tile-icon.is-ok { background: var(--wa-ok-bg); color: var(--wa-ok); }
.wa-tile-icon .bi { font-size: 22px; }
.wa-section-head { margin: 8px 0 0; align-items: center; }
.wa-section-head h2 { font-size: 22px; }
.wa-album-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .wa-album-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .wa-album-grid--4 { grid-template-columns: 1fr; } .wa-hbars li { grid-template-columns: minmax(0, 1fr) 44px; } .wa-hbars .wa-hbar { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- 0.6.9: Admin-Übersicht grafisch (wie Mockup „Admin-Übersicht – grafisch“) ---------- */
.wa-stack-bar .is-blocked, .wa-legend .is-blocked { background: #B42318; }
.wa-stack-bar .is-private, .wa-legend .is-private { background: #C9C5BC; }
.wa-pill.is-info { background: var(--wa-info-bg); color: var(--wa-info); }
.wa-tile-foot--stack { flex-direction: column; align-items: flex-start; gap: 6px; }
.wa-tile-foot .wa-text-warn { font-size: 13px; }
.wa-hbars--tight { gap: 7px; margin-top: 6px; }
.wa-hbars--tight li { grid-template-columns: minmax(0, 64px) minmax(0, 1fr) 32px; gap: 10px; font-size: 13px; color: var(--wa-text-2); }
.wa-hbars--tight li > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-hbar.is-warn > span { background: var(--wa-secondary); }
.wa-hbar.is-full > span { background: #B42318; }
.wa-tile--accent { background: #FDF6EC; border-color: #EDD5B0; }
.wa-tile--accent .wa-tile-title, .wa-tile--accent .wa-tile-num span, .wa-tile--accent .wa-tile-note { color: #6B4210; }
.wa-tile--accent .wa-tile-link { color: #7A4A0E; }
.wa-initials { display: flex; flex-wrap: wrap; gap: 6px; }
.wa-initials > span { width: 34px; height: 34px; border-radius: 99px; background: var(--wa-surface); border: 1px solid #EDD5B0; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #7A4A0E; }
.wa-adm-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.wa-adm-row--top { align-items: start; }
.wa-adm-row > .wa-card { margin: 0; }
.wa-adm-wide { grid-column: span 3; }
.wa-adm-side { grid-column: span 2; }
.wa-tile-top > a { font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.wa-adm-sum { font-size: 13px; color: var(--wa-text-2); }
.wa-adm-sum strong { font-size: 15px; color: var(--wa-text); }
.wa-adm-cols { height: 180px; display: flex; align-items: stretch; gap: 8px; margin-top: 14px; }
.wa-adm-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
.wa-adm-col-n { font-size: 11px; font-weight: 600; color: var(--wa-text-2); min-height: 14px; }
.wa-adm-col-bar { display: block; width: 100%; max-width: 30px; border-radius: 6px 6px 3px 3px; background: rgba(var(--wa-primary-rgb), .5); max-height: calc(100% - 40px); }
.wa-adm-col.is-today .wa-adm-col-bar { background: var(--wa-primary); }
.wa-adm-col-d { font-size: 11px; color: var(--wa-faint); }
.wa-adm-full { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.wa-adm-full li { display: grid; grid-template-columns: minmax(0, 1fr) auto 48px; align-items: end; gap: 12px; font-size: 14px; }
.wa-adm-full-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.wa-adm-full-main a { font-weight: 600; color: var(--wa-text); text-decoration: none; }
.wa-adm-full-main a:hover { color: var(--wa-primary); }
.wa-adm-pct { text-align: right; font-variant-numeric: tabular-nums; }
.wa-adm-pct.is-warn { color: #9A5B0C; }
.wa-adm-pct.is-full { color: #B42318; }
.wa-adm-thumb { width: 48px; height: 48px; border-radius: 10px; overflow: hidden; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--wa-surface-2); color: var(--wa-muted); }
.wa-adm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wa-adm-dot { width: 10px; height: 10px; border-radius: 99px; background: #C9C5BC; flex: none; }
.wa-adm-dot.is-soon { background: var(--wa-secondary); }
@media (max-width: 1100px) { .wa-adm-row { grid-template-columns: 1fr; } .wa-adm-wide, .wa-adm-side { grid-column: auto; } }
@media (max-width: 560px) { .wa-adm-cols { gap: 3px; } .wa-adm-col-d { font-size: 10px; } .wa-adm-row .wa-list-row { flex-wrap: wrap; } .wa-adm-row .wa-list-main { flex: 1 1 160px; } .wa-adm-cols { height: 150px; } }

/* ---------- 0.6.9b: Album-Kennzeichen auf einen Blick (partials/album-badges.php) ---------- */
.wa-album-badges { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wa-album-badges .wa-pill { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.wa-album-badges .wa-pill .bi { font-size: 13px; }
.wa-pill.is-pw { background: #B42318; color: #FFFFFF; }
.wa-pill.is-private { background: var(--wa-surface-2); color: var(--wa-text-2); }
.wa-album-badges--cover { position: absolute; top: 10px; left: 10px; right: 10px; }
.wa-album-badges--cover .wa-pill { box-shadow: 0 1px 4px rgba(28, 27, 25, .18); }
.wa-album-badges--cover .wa-pill.is-ok, .wa-album-badges--cover .wa-pill.is-private { background: rgba(255, 255, 255, .94); }
.wa-album-body .wa-album-badges { margin-bottom: 2px; }

/* ---------- 0.6.9d: Originale sichtbar ---------- */
.wa-badge--orig { background: var(--wa-primary); display: inline-flex; align-items: center; gap: 4px; }
.wa-badge--orig .bi { font-size: 11px; }
.wa-check-help { margin: -4px 0 0 32px; }
.wa-orig-line { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(var(--wa-primary-rgb), .07); border: 1px solid rgba(var(--wa-primary-rgb), .18); }
.wa-orig-icon { width: 36px; height: 36px; border-radius: 10px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--wa-primary); color: var(--wa-on-primary); }
.wa-orig-icon .bi { font-size: 17px; }
.wa-orig-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 14px; }
.wa-orig-text small { font-size: 13px; color: var(--wa-muted); }

/* ---------- 0.6.9g: Großansicht im Vollbild ---------- */
.wa-lb:fullscreen { width: 100vw; height: 100vh; }
.wa-lb:-webkit-full-screen { width: 100vw; height: 100vh; }
.wa-lb::backdrop { background: #141312; }  /* Fläche hinter dem Vollbild (Safari) */

/* ---------- 0.7.0a: Reiter „Darstellung“ (wie Mockup „Album-Designer“) ---------- */
.wa-design-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-radius: 14px; background: var(--wa-surface); border: 1px solid var(--wa-border); }
.wa-design-bar > span { flex: 1 1 260px; font-size: 14px; color: var(--wa-text-2); }
.wa-design { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 22px; align-items: start; }
.wa-design > form { margin: 0; }
.wa-design > * { min-width: 0; }
.wa-design-side { position: sticky; top: 20px; }
.wa-design-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wa-design-head .wa-card-title { margin: 0 0 2px; }
.wa-design-head .wa-help { margin: 0; }
.wa-design-head .wa-link-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--wa-text-2); padding: 6px 8px; border-radius: 8px; }
.wa-design-head .wa-link-btn:not(:disabled):hover { background: var(--wa-surface-2); color: var(--wa-text); }
.wa-design-head .wa-link-btn:disabled { opacity: .4; cursor: default; }
.wa-design-safe { display: flex; gap: 14px; align-items: flex-start; padding: 18px 22px; border-radius: 18px; background: rgba(var(--wa-primary-rgb), .06); border: 1px solid rgba(var(--wa-primary-rgb), .2); font-size: 14px; color: #2C3A36; }
.wa-design-safe > .bi { font-size: 20px; color: var(--wa-primary); margin-top: 1px; }
.wa-design-safe p { margin: 4px 0 0; line-height: 1.5; }
.wa-design-preview { display: flex; flex-direction: column; gap: 14px; }
.wa-design-frame { position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--wa-border); background: var(--wa-surface-2); }
.wa-design-frame iframe { display: block; border: 0; transform-origin: 0 0; pointer-events: none; background: #fff; }
.wa-design-preview[data-wa-device="phone"] .wa-design-frame { background: transparent; border: 0; }
.wa-design-preview[data-wa-device="phone"] .wa-design-frame iframe { border-radius: 28px; box-shadow: 0 0 0 10px #1C1B19; }
.wa-design-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.wa-design-foot a { font-weight: 600; text-decoration: none; display: inline-flex; gap: 5px; align-items: center; }
.wa-note--dashed { background: transparent; border: 1px dashed var(--wa-border-strong); font-size: 13px; }
.wa-note--link a { font-weight: 600; }
.wa-design-dlg-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.wa-design-dlg-head h2 { margin: 0; font-size: 20px; }
.wa-design-changes { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.wa-design-changes li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 10px; background: var(--wa-surface-2); }
.wa-design-changes s { color: var(--wa-muted); }
.wa-design-keep { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 16px; font-size: 13px; color: var(--wa-ok); }
.wa-undo-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 95; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 14px; background: #1C1B19; color: #FFFFFF; font-size: 14px; box-shadow: 0 10px 30px rgba(28, 27, 25, .3); white-space: nowrap; transition: opacity .3s; }
.wa-undo-toast > .bi { color: #8FD3A8; font-size: 17px; }
.wa-undo-toast.is-gone { opacity: 0; }
.wa-undo-btn { height: 34px; padding: 0 12px; border: none; border-radius: 9px; background: rgba(255, 255, 255, .14); color: #FFFFFF; font: inherit; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.wa-undo-btn:hover { background: rgba(255, 255, 255, .24); }
.wa-undo-count { font-size: 12px; opacity: .6; min-width: 28px; }
body.wa-embed { min-height: 0; }
@media (max-width: 1100px) { .wa-design { grid-template-columns: 1fr; } .wa-design-side { position: static; } }
@media (max-width: 560px) { .wa-undo-toast { left: 12px; right: 12px; transform: none; white-space: normal; } }

/* ---------- 0.7.0b: Hintergrund der Albumseite ---------- */
.wa-bg-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.wa-bg-mode { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 8px; margin: 0; border: 1px solid var(--wa-border-strong); border-radius: 14px; background: var(--wa-surface); cursor: pointer; }
.wa-bg-mode input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.wa-bg-mode:has(input:checked) { border: 2px solid var(--wa-primary); padding: 7px; }
.wa-bg-mode:has(input:focus-visible) { box-shadow: var(--wa-focus); }
.wa-bg-mode.is-locked { cursor: default; }
.wa-bg-mode.is-locked .wa-bg-name { color: var(--wa-muted); }
.wa-bg-swatch { position: relative; display: flex; align-items: center; justify-content: center; height: 60px; border-radius: 10px; border: 1px solid rgba(28, 27, 25, .08); color: var(--wa-muted); }
.wa-bg-mode.is-locked .wa-bg-swatch { opacity: .45; }
.wa-bg-name { font-size: 14px; font-weight: 500; padding: 0 4px 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wa-bg-mode:has(input:checked) .wa-bg-name { font-weight: 600; }
.wa-bg-panel { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 14px; background: #F9F8F5; border: 1px solid #EFEDE7; }
.wa-bg-panel[hidden], .wa-bg-tone[hidden] { display: none; }
.wa-bg-colors { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.wa-color-field { display: flex; flex-direction: column; gap: 6px; margin: 0; flex: 1 1 150px; }
.wa-color-input { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px 0 6px; border: 1px solid var(--wa-border-strong); border-radius: 12px; background: var(--wa-surface); cursor: pointer; }
.wa-color-input input[type="color"] { width: 34px; height: 34px; padding: 0; border: 1px solid rgba(28, 27, 25, .12); border-radius: 8px; background: none; cursor: pointer; }
.wa-color-input input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.wa-color-input input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 7px; }
.wa-color-input input[type="color"]::-moz-color-swatch { border: 0; border-radius: 7px; }
.wa-color-input code { font-size: 14px; color: var(--wa-text-2); background: none; padding: 0; }
.wa-bg-swap { height: 46px; width: 46px; flex: none; }
.wa-bg-row { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.wa-bg-row > .wa-field { margin: 0; }
.wa-bg-row > .wa-field:last-child { flex: 1 1 220px; }
.wa-bg-dirs { display: grid; grid-template-columns: repeat(3, 42px); gap: 6px; }
.wa-bg-dirs label { position: relative; margin: 0; cursor: pointer; }
.wa-bg-dirs input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.wa-bg-dirs label > span[aria-hidden] { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--wa-border-strong); background: var(--wa-surface); font-size: 17px; color: var(--wa-text-2); }
.wa-bg-dirs input:checked + span { border: 2px solid var(--wa-primary); color: var(--wa-primary); background: rgba(var(--wa-primary-rgb), .08); }
.wa-bg-dirs input:focus-visible + span { box-shadow: var(--wa-focus); }
.wa-bg-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.wa-bg-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 5px; border-radius: 99px; border: 1px solid var(--wa-border-strong); background: var(--wa-surface); font: inherit; font-size: 13px; font-weight: 500; color: var(--wa-text-2); cursor: pointer; }
.wa-bg-chip > span { width: 26px; height: 26px; border-radius: 99px; }
.wa-bg-chip:hover { border-color: var(--wa-primary); }
.wa-bg-dot { width: 34px; height: 34px; border-radius: 10px; border: 2px solid var(--wa-surface); box-shadow: 0 0 0 1px var(--wa-border-strong); cursor: pointer; }
.wa-bg-dot:hover { box-shadow: 0 0 0 2px var(--wa-primary); }
.wa-bg-tone { display: flex; flex-direction: column; gap: 12px; }
.wa-bg-read { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; font-size: 14px; }
.wa-bg-read strong { font-weight: 600; }
.wa-bg-read.is-ok { background: var(--wa-ok-bg); color: var(--wa-ok); }
.wa-bg-read.is-warn { background: var(--wa-warn-bg); color: var(--wa-warn); }
@media (max-width: 560px) { .wa-bg-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Öffentliche Seite mit eigenem Hintergrund (Album-Designer) */
body.wa-public.wa-has-bg { background-attachment: scroll; min-height: 100vh; }
body.wa-tone-light .wa-public-top, body.wa-tone-light .wa-album-intro, body.wa-tone-light .wa-footer, body.wa-tone-light .wa-album-empty {
    --wa-text: #FFFFFF; --wa-text-2: rgba(255, 255, 255, .88); --wa-muted: rgba(255, 255, 255, .74);
    color: var(--wa-text);
}
body.wa-tone-light .wa-album-intro .wa-eyebrow--accent { color: rgba(255, 255, 255, .9); }
body.wa-tone-light .wa-album-intro .wa-btn--ghost { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .45); color: #FFFFFF; }
body.wa-tone-light .wa-footer a { color: rgba(255, 255, 255, .78); }
body.wa-tone-light .wa-footer a:hover { color: #FFFFFF; }
.wa-design-last { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 12.5px; color: var(--wa-muted); }  /* 0.7.0c: was „Rückgängig“ zurücknimmt */

/* ---------- 0.7.0c: Mesh-Hintergrund (4 Farbpunkte) ---------- */
.wa-mesh-field { position: relative; height: 220px; border-radius: 14px; border: 1px solid rgba(28, 27, 25, .08); touch-action: none; user-select: none; }
.wa-mesh-dot { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; padding: 0; border-radius: 99px; border: 3px solid #FFFFFF; box-shadow: 0 2px 8px rgba(28, 27, 25, .3); cursor: grab; touch-action: none; }
.wa-mesh-dot:focus-visible { outline: 3px solid var(--wa-primary); outline-offset: 2px; }
.wa-mesh-dot.is-drag { cursor: grabbing; transform: scale(1.15); }
.wa-mesh-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wa-mesh-tools .wa-help { flex: 1 1 160px; margin: 0; padding-left: 4px; }
.wa-mesh-color { display: inline-flex; margin: 0; cursor: pointer; }
.wa-mesh-color input[type="color"] { width: 36px; height: 36px; padding: 0; border: 2px solid var(--wa-surface); border-radius: 10px; box-shadow: 0 0 0 1px var(--wa-border-strong); background: none; cursor: pointer; }
.wa-mesh-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.wa-mesh-color input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 8px; }
.wa-mesh-color input[type="color"]::-moz-color-swatch { border: 0; border-radius: 8px; }

/* ---------- Mein WebAlbum (0.7.1) ---------- */
.wa-myalbum-form { margin: 0; }
.wa-myalbum-card {
    width: 100%; display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px; border-radius: 14px;
    border: 1.5px dashed rgba(var(--wa-primary-rgb), .55); background: var(--wa-surface); color: var(--wa-primary);
    font: inherit; text-align: left; cursor: pointer;
}
.wa-myalbum-card:hover { background: rgba(var(--wa-primary-rgb), .06); }
.wa-myalbum-card.is-linked { border: none; background: var(--wa-primary); color: #fff; }
.wa-myalbum-card.is-linked:hover { filter: brightness(1.07); background: var(--wa-primary); }
.wa-myalbum-card.is-broken { border-color: #D9A45B; color: #7A4A0E; }
.wa-myalbum-ic { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--wa-primary-rgb), .12); color: var(--wa-primary); font-size: 17px; }
.wa-myalbum-card.is-linked .wa-myalbum-ic { background: rgba(255, 255, 255, .18); color: #fff; }
.wa-myalbum-card.is-broken .wa-myalbum-ic { background: var(--wa-warn-bg); color: #7A4A0E; }
.wa-myalbum-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wa-myalbum-text strong { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-myalbum-text small { font-size: 12px; color: var(--wa-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-myalbum-card.is-linked .wa-myalbum-text small { color: rgba(255, 255, 255, .85); }
.wa-myalbum-back {
    display: flex; align-items: center; gap: 10px; margin: auto 4px 10px; padding: 10px 12px; min-height: 44px; box-sizing: border-box;
    border-radius: 10px; border: 1px solid rgba(var(--wa-primary-rgb), .35); background: var(--wa-surface);
    color: var(--wa-primary); font-size: 15px; font-weight: 600; text-decoration: none;
}
.wa-myalbum-back:hover { background: rgba(var(--wa-primary-rgb), .06); color: var(--wa-primary); }
.wa-myalbum-back + .wa-plan-box { margin-top: 0; }
.wa-myalbum-bar { position: sticky; top: 0; z-index: 60; flex: 0 0 100%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px; padding: 9px 16px; background: var(--wa-primary); color: #fff; font-size: 14px; font-weight: 500; }
.wa-myalbum-bar strong { font-weight: 600; }
.wa-btn--myalbum { background: #fff; color: var(--wa-primary); min-height: 34px; }
.wa-btn--myalbum:hover { background: rgba(255, 255, 255, .88); color: var(--wa-primary); }
.wa-myalbum-dlg { gap: 18px; }
.wa-myalbum-head { display: flex; align-items: flex-start; gap: 16px; }
.wa-myalbum-head h2 { font-size: 26px; margin: 0 0 6px; }
.wa-myalbum-head-ic { width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--wa-primary-rgb), .12); color: var(--wa-primary); font-size: 22px; }
.wa-myalbum-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 14px; background: var(--wa-surface-2); }
.wa-myalbum-modes input { position: absolute; opacity: 0; pointer-events: none; }
.wa-myalbum-modes label { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 11px; font-size: 15px; font-weight: 500; color: var(--wa-muted); cursor: pointer; text-align: center; padding: 0 8px; }
.wa-myalbum-modes input:checked + label { background: var(--wa-surface); color: var(--wa-text); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.wa-myalbum-modes input:focus-visible + label { outline: 2px solid var(--wa-primary); outline-offset: 2px; }
.wa-myalbum-pane { display: flex; flex-direction: column; gap: 8px; }
.wa-myalbum-dlg:has(#wa-my-mode-new:checked) .wa-myalbum-pane--existing,
.wa-myalbum-dlg:has(#wa-my-mode-existing:checked) .wa-myalbum-pane--new { display: none; }
.wa-myalbum-list { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; padding: 2px; }
.wa-myalbum-user { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--wa-border); cursor: pointer; }
.wa-myalbum-user:has(input:checked) { border: 2px solid var(--wa-primary); padding: 9px 13px; background: rgba(var(--wa-primary-rgb), .06); }
.wa-myalbum-user input { width: 18px; height: 18px; margin: 0; accent-color: var(--wa-primary); }
.wa-myalbum-user .wa-avatar { width: 34px; height: 34px; }
.wa-myalbum-user-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wa-myalbum-user-text strong { font-size: 15px; font-weight: 600; }
.wa-myalbum-user-text small { font-size: 13px; color: var(--wa-muted); }
.wa-myalbum-empty { padding: 14px; border-radius: 12px; background: var(--wa-surface-2); }
.wa-myalbum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wa-myalbum-note { align-items: flex-start; font-size: 14px; }
.wa-myalbum-foot { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.wa-myalbum-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px; border-radius: 14px; border: 1px solid var(--wa-border); margin-bottom: 14px; }
.wa-myalbum-row form { margin: 0; }
.wa-myalbum-name { display: inline-flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; }
.wa-myalbum-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; background: rgba(var(--wa-primary-rgb), .14); color: var(--wa-primary); }
body.wa-app:has(> .wa-myalbum-bar) { flex-wrap: wrap; }
body.wa-app:has(> .wa-myalbum-bar) .wa-sidebar { top: 52px; height: calc(100vh - 52px); }
@media (max-width: 900px) {
    body.wa-app:has(> .wa-myalbum-bar) { flex-wrap: nowrap; }
    body.wa-app:has(> .wa-myalbum-bar) .wa-sidebar { top: auto; height: auto; }
    .wa-myalbum-bar { position: static; flex: 0 0 auto; text-align: center; }
    .wa-myalbum-bar > span { min-width: 0; }
    .wa-myalbum-card { width: auto; margin: 0; padding: 8px 10px; order: 2; }
    .wa-myalbum-form { order: 2; }
    .wa-myalbum-back { display: none; }
}
@media (max-width: 600px) {
    .wa-myalbum-grid { grid-template-columns: 1fr; }
    .wa-myalbum-card .wa-myalbum-text small { display: none; }
}

/* ---------- Alben & Moderation (0.7.2) ---------- */
.wa-pill.is-locked { background: #2A2522; color: #FFFFFF; }
.wa-album-badges--cover .wa-pill.is-locked { background: #2A2522; }
.wa-stack-bar .is-locked, .wa-legend .is-locked { background: #2A2522; }
.wa-count--dark { background: #2A2522; color: #FFFFFF; }
.wa-modview-bar { background: #2A2522; }
.wa-mod-banner { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 18px; padding: 14px 16px; border-radius: 14px; background: #2A2522; color: #FFFFFF; font-size: 14px; line-height: 1.5; }
.wa-mod-banner > .bi { font-size: 18px; margin-top: 1px; }
.wa-mod-banner-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wa-mod-banner-text strong { font-size: 15px; font-weight: 600; }
.wa-mod-banner-text p { margin: 4px 0 0; color: rgba(255, 255, 255, .88); }
.wa-mod-banner details summary { cursor: pointer; font-weight: 600; }
.wa-mod-banner--admin { margin: 16px 0 12px; }
.wa-publish.is-mod-locked { opacity: .55; }
.wa-mod-tiles { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.wa-mod-soon { margin: 4px 0 0; }
.wa-mod-link { font-size: 14px; font-weight: 600; text-decoration: none; }
.wa-mod-toolbar { justify-content: flex-start; }
.wa-mod-toolbar .wa-search { flex: 0 1 320px; }
.wa-mod-toolbar a.wa-seg-btn { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: 14px; }
.wa-mod-toolbar a.wa-seg-btn:not(.is-active) { font-weight: 500; }
.wa-mod-sort { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--wa-muted); }
.wa-mod-sort .wa-input { min-height: 40px; width: auto; }
.wa-mod-head, .wa-mod-row { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1.1fr) minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, .9fr) auto; align-items: center; gap: 16px; padding: 14px 20px; }
.wa-mod-head { padding-top: 10px; padding-bottom: 10px; background: var(--wa-surface-2); font-size: 13px; font-weight: 600; color: var(--wa-muted); }
.wa-mod-list { list-style: none; margin: 0; padding: 0; }
.wa-mod-row { border-top: 1px solid #EFEDE7; }
.wa-mod-row.is-locked { background: #FBF6F5; }
.wa-mod-album { display: flex; align-items: center; gap: 14px; min-width: 0; }
.wa-mod-thumb { width: 72px; height: 54px; }
.wa-mod-thumb .bi { font-size: 20px; }
.wa-mod-title { font-weight: 600; color: var(--wa-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-mod-title:hover { color: var(--wa-primary); }
.wa-mod-album--big { flex-wrap: wrap; }
.wa-mod-album--big .wa-list-main { flex: 1; min-width: 200px; }
.wa-mod-album--big .wa-mod-thumb { width: 96px; height: 72px; }
.wa-mod-user { display: flex; align-items: center; gap: 8px; font-size: 14px; min-width: 0; }
.wa-mod-user .wa-avatar { width: 26px; height: 26px; font-size: 11px; }
.wa-mod-user a { font-weight: 500; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.wa-mod-views { display: flex; align-items: center; gap: 10px; }
.wa-mod-views .wa-hbar { flex: 1; }
.wa-mod-views strong { font-size: 13px; width: 28px; text-align: right; font-variant-numeric: tabular-nums; }
.wa-mod-since { font-size: 13px; color: var(--wa-muted); }
.wa-mod-since strong { color: #2A2522; }
.wa-mod-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.wa-mod-actions form { margin: 0; }
.wa-mod-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid #EFEDE7; font-size: 14px; flex-wrap: wrap; }
.wa-mod-pager { display: inline-flex; align-items: center; gap: 10px; }
.wa-lock-dlg { gap: 16px; }
.wa-mod-lock-icon { color: var(--wa-fail); background: var(--wa-fail-bg); border-color: transparent; }
.wa-mod-lock-icon:hover { color: var(--wa-fail); }
.wa-lock-head-ic { width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--wa-fail-bg); color: var(--wa-fail); font-size: 22px; }
.wa-lock-album { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: var(--wa-surface-2); }
.wa-lock-thumb { width: 72px; height: 54px; flex: none; border-radius: 10px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--wa-surface); color: var(--wa-muted); font-size: 20px; }
.wa-lock-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wa-lock-album-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wa-lock-album-text small { font-size: 13px; color: var(--wa-muted); }
.wa-lock-reasons { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wa-lock-reasons legend { margin-bottom: 8px; }
.wa-lock-reason { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--wa-border); font-size: 15px; cursor: pointer; }
.wa-lock-reason:has(input:checked) { border: 2px solid #B42318; padding: 9px 13px; background: #FBF1EF; }
.wa-lock-reason input { width: 18px; height: 18px; margin: 0; accent-color: #B42318; }
@media (max-width: 1100px) {
    .wa-mod-head { display: none; }
    .wa-mod-row { grid-template-columns: minmax(0, 1fr) auto; }
    .wa-mod-row > :not(.wa-mod-album):not(.wa-mod-actions) { grid-column: 1 / -1; }
    .wa-mod-since:not(:has(strong)) { display: none; }
    .wa-mod-actions { grid-column: 2; grid-row: 1; }
    .wa-mod-toolbar .wa-seg { flex-wrap: wrap; }
}
@media (max-width: 600px) {
    .wa-mod-actions { grid-column: 1 / -1; grid-row: auto; justify-content: flex-start; }
}
@media (max-width: 900px) {
    .wa-mod-tiles { grid-template-columns: 1fr; }
    .wa-mod-sort { margin-left: 0; }
}

/* ---------- Gesperrtes Album: Hinweis-Leiste + Freigabe-Anfragen (0.7.2b) ---------- */
body.wa-app:has(> .wa-modnote) { flex-wrap: wrap; }
.wa-modnote { flex: 0 0 100%; box-sizing: border-box; display: flex; align-items: center; gap: 16px; padding: 14px 20px 14px 24px; background: #2A2522; color: #FFFFFF; font-size: 14px; }
.wa-modnote--request { background: #3D3935; }
.wa-modnote--ok { background: #1E7A45; padding-top: 10px; padding-bottom: 10px; }
.wa-modnote-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; background: #B42318; font-size: 18px; }
.wa-modnote--request .wa-modnote-ic { background: #6B6560; }
.wa-modnote--ok .wa-modnote-ic { width: 30px; height: 30px; font-size: 15px; background: rgba(255, 255, 255, .18); }
.wa-modnote-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; line-height: 1.45; }
.wa-modnote-text strong { font-size: 15px; font-weight: 600; }
.wa-modnote-text span { color: rgba(255, 255, 255, .85); }
.wa-modnote-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.wa-modnote-actions form { margin: 0; }
.wa-modnote-btn { background: #FFFFFF; color: #2A2522; border: none; min-height: 36px; }
.wa-modnote-btn:hover { background: rgba(255, 255, 255, .88); color: #2A2522; }
.wa-modnote-btn--outline { background: transparent; color: #FFFFFF; border: 1px solid rgba(255, 255, 255, .45); }
.wa-modnote-btn--outline:hover { background: rgba(255, 255, 255, .1); color: #FFFFFF; }
.wa-modnote-btn--text { background: transparent; color: #F4B4AC; }
.wa-modnote-btn--text:hover { background: rgba(255, 255, 255, .08); color: #F4B4AC; }
.wa-modnote-close { margin: 0; flex-shrink: 0; }
.wa-modnote-close button { width: 36px; height: 36px; border: none; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; }
.wa-modnote-close button:hover { background: rgba(255, 255, 255, .2); }
.wa-mod-banner-state { display: inline-flex; gap: 6px; align-items: baseline; color: rgba(255, 255, 255, .9); }
.wa-mod-banner .wa-modnote-btn { margin-top: 6px; }
.wa-modreq-dlg { gap: 16px; }
.wa-modreq-ic { width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--wa-surface-2); font-size: 20px; }
.wa-mod-pending a { margin-left: auto; font-weight: 600; color: inherit; }
.wa-mod-row.has-request { background: #FFF8EE; }
.wa-mod-status { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wa-mod-request { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px; margin-left: 86px; padding: 12px 14px; border-radius: 12px; background: var(--wa-surface); border: 1px solid #F0DEC2; font-size: 14px; line-height: 1.5; }
.wa-mod-request strong { font-weight: 600; }
.wa-mod-request--page { margin: 14px 0 0; align-items: center; background: #FFF8EE; }
.wa-mod-request--page > span { flex: 1; }
@media (max-width: 900px) {
    body.wa-app:has(> .wa-modnote) { flex-wrap: nowrap; }
    .wa-modnote { flex: 0 0 auto; position: relative; flex-wrap: wrap; padding: 14px 52px 14px 16px; }
    .wa-modnote-ic { width: 30px; height: 30px; font-size: 15px; }
    .wa-modnote-text { flex-basis: calc(100% - 50px); }
    .wa-modnote-close { position: absolute; right: 8px; top: 8px; }
    .wa-mod-request { margin-left: 0; }
}

/* ---------- Mediathek (0.7.3a) ---------- */
.wa-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wa-head-actions form { margin: 0; }
.wa-lib { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.wa-lib-grid-card { padding: 20px 22px; }
.wa-lib-grid-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.wa-lib-grid-head strong { font-size: 17px; }
.wa-lib-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.wa-lib-item { display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 10px; border: 1px solid var(--wa-border); border-radius: 14px; text-decoration: none; color: var(--wa-text); background: var(--wa-surface); height: 100%; }
.wa-lib-item:hover { border-color: var(--wa-border-strong); color: var(--wa-text); }
.wa-lib-item.is-selected { border: 2px solid var(--wa-primary); padding: 7px 7px 9px; }
.wa-lib-thumb { display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--wa-surface-2); }
.wa-lib-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wa-lib-name { display: flex; flex-direction: column; gap: 1px; padding: 0 4px; min-width: 0; }
.wa-lib-name strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-lib-name small { font-size: 12px; color: var(--wa-muted); }
.wa-lib-empty { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 20px; border: 2px dashed var(--wa-border-strong); border-radius: 16px; background: transparent; font: inherit; color: var(--wa-text); cursor: pointer; }
.wa-lib-empty .bi { font-size: 28px; color: var(--wa-muted); }
.wa-lib-detail { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; }
.wa-lib-detail form { margin: 0; }
.wa-lib-big { display: block; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--wa-surface-2); }
.wa-lib-big img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wa-lib-title { font-family: var(--wa-font); font-size: 17px; font-weight: 700; margin: 0 0 2px; overflow-wrap: anywhere; }
.wa-lib-detail p.wa-small { margin: 0; }
.wa-lib-used { display: flex; gap: 8px; margin: 0; font-size: 14px; color: var(--wa-text-2); }
.wa-lib-rss { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.wa-rss-card-title { margin-bottom: 2px; }
.wa-rss-reader { margin-top: 14px; border: 1px solid var(--wa-border); border-radius: 14px; overflow: hidden; background: var(--wa-surface); }
.wa-rss-reader-bar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--wa-surface-2); font-size: 12.5px; color: var(--wa-muted); }
.wa-rss-empty { margin: 0; padding: 18px 16px; font-size: 14px; }
.wa-rss-item { display: flex; align-items: center; gap: 12px; margin: 0 16px; padding: 12px 0; border-top: 1px solid #EFEDE7; }
.wa-rss-item.is-big { flex-direction: column; align-items: stretch; border-top: none; padding-top: 16px; }
.wa-rss-img { display: block; width: 110px; aspect-ratio: 16 / 9; flex: none; border-radius: 8px; overflow: hidden; background: var(--wa-surface-2); }
.wa-rss-item.is-big .wa-rss-img { width: 100%; border-radius: 10px; }
.wa-rss-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wa-rss-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wa-rss-text strong { font-size: 15px; }
.wa-rss-item.is-big .wa-rss-text strong { font-size: 17px; }
.wa-rss-text small { font-size: 12.5px; color: var(--wa-muted); }
.wa-lib-rules { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; line-height: 1.5; color: var(--wa-text-2); }
.wa-lib-rules a { text-decoration: none; margin-right: 4px; }
.wa-trash-media { overflow: hidden; }
.wa-trash-media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1100px) {
    .wa-lib, .wa-lib-rss { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .wa-lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Neuigkeiten: Admin (0.7.3b) ---------- */
.wa-news-head, .wa-news-row { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1.2fr) auto; align-items: center; gap: 18px; padding: 14px 20px; }
.wa-news-head { padding-top: 12px; padding-bottom: 12px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--wa-muted); }
.wa-news-list { list-style: none; margin: 0; padding: 0; }
.wa-news-row { border-top: 1px solid #EFEDE7; }
.wa-news-row.is-selected { background: rgba(var(--wa-primary-rgb), .05); }
.wa-news-msg { display: flex; align-items: center; gap: 14px; min-width: 0; }
.wa-news-thumb { width: 84px; height: 48px; flex: none; border-radius: 10px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--wa-surface-2); color: var(--wa-muted); }
.wa-news-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wa-news-msg-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.wa-news-title { font-weight: 700; color: var(--wa-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-news-title:hover { color: var(--wa-primary); }
.wa-news-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wa-news-pills .wa-pill { font-size: 12px; padding: 2px 9px; gap: 4px; }
.wa-news-meta { display: flex; align-items: flex-start; gap: 7px; font-size: 13.5px; color: var(--wa-text-2); }
.wa-news-meta .bi { color: var(--wa-muted); margin-top: 1px; }
.wa-news-read { display: flex; flex-direction: column; gap: 6px; }
.wa-news-read small { font-size: 12.5px; color: var(--wa-muted); }
.wa-news-read small strong { color: var(--wa-text); }
.wa-news-actions { display: flex; justify-content: flex-end; }
.wa-news-editor { display: flex; flex-direction: column; gap: 18px; scroll-margin-top: 16px; }
.wa-news-editor-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.wa-news-editor-head .wa-card-title { margin: 0 0 2px; }
.wa-news-editor-head p { margin: 0; }
.wa-news-image { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.wa-news-image-box { position: relative; width: 240px; aspect-ratio: 16 / 9; flex: none; border-radius: 14px; overflow: hidden; background: var(--wa-surface-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--wa-muted); }
.wa-news-image-box.is-empty { border: 2px dashed var(--wa-border-strong); background: transparent; }
.wa-news-image-box.is-empty .bi { font-size: 24px; }
.wa-news-image-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wa-news-image-cap { position: absolute; left: 10px; bottom: 8px; padding: 2px 8px; border-radius: 99px; background: rgba(28, 27, 25, .55); color: #FFFFFF; font-size: 11.5px; font-weight: 600; }
.wa-news-image-side { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 8px; }
.wa-news-image-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.wa-news-when { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.wa-news-aud-sub { margin-top: 8px; }
.wa-news-flags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.wa-news-flag { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--wa-border); border-radius: 14px; cursor: pointer; }
.wa-news-flag:has(input:checked) { border-color: rgba(var(--wa-primary-rgb), .45); background: rgba(var(--wa-primary-rgb), .04); }
.wa-news-flag-ic { width: 36px; height: 36px; flex: none; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--wa-surface-2); color: var(--wa-text-2); }
.wa-news-flag-text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wa-news-flag-text small { font-size: 13.5px; color: var(--wa-muted); line-height: 1.45; }
.wa-news-flag-text small.wa-news-flag-warn { color: var(--wa-warn); }
.wa-news-flag .wa-switch { margin-top: 2px; }
.wa-news-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.wa-news-preview-wrap { flex: 1 1 420px; max-width: 660px; display: flex; flex-direction: column; gap: 8px; }
.wa-news-mini { display: flex; gap: 14px; padding: 14px; border: 1px solid var(--wa-border); border-radius: 14px; background: var(--wa-surface); }
.wa-news-mini-img { width: 170px; aspect-ratio: 16 / 9; flex: none; border-radius: 10px; overflow: hidden; background: var(--wa-surface-2); }
.wa-news-mini-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wa-news-mini-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wa-news-mini-text strong { font-size: 16px; }
.wa-news-mini-text small { font-size: 13.5px; color: var(--wa-muted); line-height: 1.45; }
.wa-news-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--wa-primary); }
.wa-news-foot-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.wa-news-foot-actions form { margin: 0; }
.wa-news-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 12px 0 4px; }
.wa-news-pick-item { display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 1px solid var(--wa-border); border-radius: 12px; cursor: pointer; }
.wa-news-pick-item:hover { border-color: var(--wa-border-strong); }
.wa-news-pick-item:has(input:checked) { border: 2px solid var(--wa-primary); padding: 5px; }
.wa-news-pick-item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wa-news-pick-item:has(input:focus-visible) { outline: 2px solid var(--wa-primary); outline-offset: 2px; }
.wa-news-pick-img { display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--wa-surface-2); }
.wa-news-pick-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wa-news-pick-item small { font-size: 12px; color: var(--wa-muted); overflow-wrap: anywhere; }
@media (max-width: 1100px) {
    .wa-news-head { display: none; }
    .wa-news-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
    .wa-news-row > .wa-news-meta, .wa-news-row > .wa-news-read { grid-column: 1 / -1; }
    .wa-news-actions { grid-column: 2; grid-row: 1; }
    .wa-news-read { flex-direction: row; align-items: center; }
    .wa-news-read .wa-hbar { flex: 0 1 200px; }
}
@media (max-width: 900px) {
    .wa-news-when, .wa-news-flags { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .wa-news-row { grid-template-columns: minmax(0, 1fr); }
    .wa-news-actions { grid-column: 1; grid-row: auto; justify-content: flex-start; }
    .wa-news-thumb { width: 64px; height: 36px; }
    .wa-news-image-box { width: 100%; }
    .wa-news-mini { flex-direction: column; }
    .wa-news-mini-img { width: 100%; }
}

/* ---------- Neuigkeiten: Benutzer (0.7.3b) ---------- */
.wa-count--primary { background: var(--wa-primary); color: var(--wa-on-primary); }
.wa-news-text { font-size: 15px; line-height: 1.55; color: var(--wa-text-2); overflow-wrap: anywhere; }
.wa-news-text > :first-child { margin-top: 0; }
.wa-news-text > :last-child { margin-bottom: 0; }
.wa-news-text p, .wa-news-text ul, .wa-news-text ol { margin: 0 0 8px; }
.wa-news-text h2 { font-size: 18px; margin: 12px 0 6px; color: var(--wa-text); }
.wa-news-text h3 { font-size: 16px; margin: 10px 0 4px; color: var(--wa-text); }
.wa-news-tile { display: flex; gap: 22px; padding: 18px; background: var(--wa-surface); border: 1px solid var(--wa-border); border-radius: 18px; box-shadow: 0 1px 0 rgba(0, 0, 0, .02); }
.wa-news-tile-img { width: 300px; aspect-ratio: 16 / 9; flex: none; align-self: flex-start; border-radius: 14px; overflow: hidden; background: var(--wa-surface-2); }
.wa-news-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wa-news-tile-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.wa-news-tile-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wa-news-of { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--wa-primary); color: var(--wa-on-primary); }
.wa-news-tile-title { font-size: 22px; line-height: 1.25; }
.wa-news-tile-actions { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }
.wa-news-tile-actions form { margin: 0; }
.wa-news-all { font-size: 14px; font-weight: 600; text-decoration: none; }
body.wa-app:has(> .wa-newsbar) { flex-wrap: wrap; }
.wa-newsbar { flex: 0 0 100%; box-sizing: border-box; display: flex; align-items: center; gap: 16px; padding: 14px 20px 14px 24px; background: var(--wa-primary); color: var(--wa-on-primary); font-size: 14px; }
.wa-newsbar-ic { width: 38px; height: 38px; flex: none; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .18); font-size: 18px; }
.wa-newsbar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; line-height: 1.45; }
.wa-newsbar-text strong { font-size: 15px; font-weight: 600; }
.wa-newsbar-text > span { color: rgba(255, 255, 255, .88); }
.wa-newsbar-of { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 99px; background: rgba(255, 255, 255, .2); font-size: 12px; font-weight: 600; }
.wa-newsbar-actions { display: flex; align-items: center; gap: 10px; flex: none; flex-wrap: wrap; }
.wa-newsbar-actions form { margin: 0; }
.wa-newsbar-more { color: var(--wa-on-primary); font-weight: 600; font-size: 14px; }
.wa-newsbar-more:hover { color: var(--wa-on-primary); }
.wa-newsbar-btn { background: #FFFFFF; color: #2A2522; border: none; min-height: 36px; }
.wa-newsbar-btn:hover { background: rgba(255, 255, 255, .88); color: #2A2522; }
.wa-news-archive { list-style: none; margin: 0; padding: 0; }
.wa-news-archive > li + li { border-top: 1px solid #EFEDE7; }
.wa-news-archive details > summary { list-style: none; }
.wa-news-archive details > summary::-webkit-details-marker { display: none; }
.wa-news-arch-row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; cursor: pointer; }
.wa-news-arch-row:hover { background: var(--wa-bg); }
.wa-news-dot { width: 8px; height: 8px; flex: none; border-radius: 99px; }
.wa-news-dot.is-unread { background: var(--wa-primary); }
.wa-news-arch-thumb { width: 80px; aspect-ratio: 16 / 9; flex: none; border-radius: 8px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--wa-surface-2); color: var(--wa-muted); }
.wa-news-arch-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wa-news-arch-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wa-news-arch-text strong { font-size: 15px; font-weight: 500; }
.wa-news-arch-text strong.is-unread { font-weight: 700; }
.wa-news-arch-text small { font-size: 12.5px; color: var(--wa-muted); }
.wa-news-arch-chev { color: var(--wa-muted); transition: transform .15s; }
.wa-news-archive details[open] .wa-news-arch-chev { transform: rotate(180deg); }
.wa-news-arch-body { display: flex; flex-direction: column; gap: 14px; padding: 4px 20px 20px 40px; }
.wa-news-arch-body form { margin: 0; }
.wa-news-arch-img { width: 100%; max-width: 560px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; }
@media (max-width: 900px) {
    body.wa-app:has(> .wa-newsbar) { flex-wrap: nowrap; }
    .wa-newsbar { flex: 0 0 auto; flex-wrap: wrap; padding: 14px 16px; }
    .wa-newsbar-ic { width: 30px; height: 30px; font-size: 15px; }
    .wa-newsbar-text { flex-basis: calc(100% - 50px); }
    .wa-news-tile { flex-direction: column; gap: 12px; padding: 0 0 14px; overflow: hidden; }
    .wa-news-tile-img { width: 100%; border-radius: 0; }
    .wa-news-tile-body { padding: 0 14px; }
    .wa-news-tile-title { font-size: 18px; }
    .wa-news-arch-body { padding-left: 20px; }
}

/* ---------- Neuigkeiten: öffentliche Seite (0.7.3c) ---------- */
.wa-news-page { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.wa-news-post { padding: 0; overflow: hidden; scroll-margin-top: 16px; }
.wa-news-post-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--wa-surface-2); }
.wa-news-post-body { display: flex; flex-direction: column; gap: 8px; padding: 20px clamp(18px, 4vw, 28px) 24px; }
.wa-news-post-body h2 { font-size: 24px; }

/* ---------- Handy: Kopfzeile der öffentlichen Seiten (0.7.3d) ---------- */
@media (max-width: 600px) {
    .wa-topbar { flex-wrap: wrap; row-gap: 10px; }
    .wa-topbar-actions { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
}

/* ---------- 0.7.4a Branding: Aussehen ---------- */
.wa-logo-own { display: inline-flex; align-items: center; height: 38px; flex-shrink: 0; }
.wa-logo-own img { display: block; height: 38px; width: auto; max-width: 190px; object-fit: contain; }
.wa-brand:has(.wa-logo-own) .wa-brand-name { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wa-tab.is-soon { color: #9A968E; cursor: default; display: inline-flex; align-items: center; gap: 6px; }
.wa-tab.is-soon:hover { color: #9A968E; }
.wa-tab.is-soon .wa-pill { font-size: 11px; padding: 1px 8px; }
.wa-brand-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: -8px; }
.wa-brand-bar .wa-save-status:not([hidden]) { margin-right: 4px; }
.wa-brand-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.wa-brand-preset { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 5px 14px 5px 8px; border: 1px solid var(--wa-border-strong); border-radius: 12px; background: var(--wa-surface); color: var(--wa-text); font: inherit; font-size: 14px; cursor: pointer; }
.wa-brand-preset:hover { border-color: var(--wa-muted); }
.wa-brand-preset.is-active { border: 2px solid var(--wa-primary); padding: 4px 13px 4px 7px; font-weight: 600; }
.wa-brand-star { color: var(--wa-secondary); font-size: 12px; }
.wa-brand-dots { display: inline-flex; }
.wa-brand-dots i { width: 18px; height: 18px; border-radius: 99px; border: 2px solid var(--wa-surface); box-shadow: 0 0 0 1px rgba(28, 27, 25, .12); }
.wa-brand-dots i + i { margin-left: -6px; }
.wa-brand-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
.wa-brand-color { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wa-brand-color-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wa-brand-color-head .wa-label { margin: 0; }
.wa-brand-color-head .wa-link-btn, .wa-brand-logo-actions .wa-link-btn { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; text-decoration: none; font-size: 13px; font-weight: 600; color: var(--wa-text-2); padding: 4px 6px; border-radius: 8px; }
.wa-brand-color-head .wa-link-btn:not(:disabled):hover, .wa-brand-logo-actions .wa-link-btn:not(:disabled):hover { background: var(--wa-surface-2); color: var(--wa-text); }
.wa-brand-color-head .wa-link-btn:disabled, .wa-brand-logo-actions .wa-link-btn:disabled { opacity: .4; cursor: default; }
.wa-brand-color-row { display: flex; gap: 8px; align-items: stretch; }
.wa-brand-swatch { flex: none; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(28, 27, 25, .14); border-radius: 12px; background: none; cursor: pointer; }
.wa-brand-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.wa-brand-swatch::-webkit-color-swatch { border: 0; border-radius: 11px; }
.wa-brand-swatch::-moz-color-swatch { border: 0; border-radius: 11px; }
.wa-brand-hex { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-transform: uppercase; }
.wa-brand-hex::placeholder { text-transform: none; }
.wa-brand-note { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 13px; line-height: 1.35; }
.wa-brand-note.is-ok { color: var(--wa-ok); }
.wa-brand-note.is-warn { color: var(--wa-warn); }
.wa-brand-note .bi { margin-top: 1px; }
.wa-brand-std { margin: 0; font-size: 12.5px; color: var(--wa-faint); }
.wa-brand-more { border-top: 1px solid var(--wa-border); padding-top: 16px; }
.wa-brand-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; font-family: var(--wa-font-display); font-size: 17px; font-weight: 700; margin-bottom: 16px; }
.wa-brand-more > summary::-webkit-details-marker { display: none; }
.wa-brand-more > summary small { font-family: var(--wa-font); font-size: 13px; font-weight: 500; }
.wa-brand-more:not([open]) > summary { margin-bottom: 0; }
.wa-brand-more[open] .is-closed, .wa-brand-more:not([open]) .is-open { display: none; }
.wa-brand-lock { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--wa-surface-2); font-size: 14px; line-height: 1.5; color: var(--wa-text-2); }
.wa-brand-lock > .bi { margin-top: 2px; color: var(--wa-muted); }
.wa-brand-pw { color: var(--wa-fail); }
.wa-brand-logo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.wa-brand-logo-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wa-brand-logo-col .wa-label { margin: 0; }
.wa-brand-logo-col .wa-help { margin: 0; }
.wa-brand-logo-box { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 96px; padding: 12px; border: 1px solid var(--wa-border); border-radius: 14px; background: var(--wa-surface); overflow: hidden; }
.wa-brand-logo-box .wa-brand { pointer-events: none; }
.wa-brand-icon-lg { width: 48px; height: 48px; border-radius: 12px; }
.wa-brand-icon-sm { width: 18px; height: 18px; }
.wa-brand-logo-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wa-brand-upload { cursor: pointer; }
.wa-brand-upload:focus-within { box-shadow: var(--wa-focus); }
.wa-brand-tabbox { display: flex; align-items: flex-end; min-height: 96px; padding: 12px 10px 0; border-radius: 14px; background: var(--wa-surface-2); overflow: hidden; }
.wa-brand-browsertab { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 8px 12px; border-radius: 10px 10px 0 0; background: var(--wa-surface); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-brand-pick-img { aspect-ratio: 3 / 1; background: repeating-conic-gradient(#ECEAE4 0 25%, #FFFFFF 0 50%) 0 0 / 14px 14px; }
.wa-brand-pick-img img { object-fit: contain; }
.wa-brand-type-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: end; }
.wa-brand-type-grid .wa-field { margin: 0; }
.wa-brand-samples { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.wa-brand-samples .wa-btn { pointer-events: none; }
.wa-brand-samples a { font-weight: 600; }
.wa-brand-changes-lead { margin: 0 0 6px; font-size: 14px; color: var(--wa-muted); }
.wa-brand-changes { list-style: none; margin: 0 0 12px; padding: 0; font-size: 14px; }
.wa-brand-changes li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 22px minmax(0, 1.25fr); gap: 8px; align-items: center; padding: 11px 0; border-top: 1px solid var(--wa-border); }
.wa-brand-changes s { color: var(--wa-fail); overflow-wrap: anywhere; }
.wa-brand-changes strong { color: var(--wa-ok); overflow-wrap: anywhere; }
.wa-brand-arrow { color: var(--wa-muted); text-align: center; }
.wa-brand-keep { margin: 0 0 16px; font-size: 13px; line-height: 1.5; color: var(--wa-muted); }
@media (max-width: 1100px) { .wa-brand-logo-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }
@media (max-width: 640px) {
    .wa-brand-grid, .wa-brand-type-grid { grid-template-columns: minmax(0, 1fr); }
    .wa-brand-changes li { grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); }
    .wa-brand-changes li > span:first-child { grid-column: 1 / -1; font-weight: 600; }
}
/* Live-Vorschau (Beispielseite im Rahmen) */
body.wa-bprev { flex-direction: row; min-height: 100vh; font-size: 14px; }
.wa-bprev-side { width: 170px; flex: none; display: flex; flex-direction: column; gap: 16px; padding: 16px 10px; border-right: 1px solid var(--wa-border); background: var(--wa-sidebar, var(--wa-bg)); }
.wa-bprev-side .wa-brand { padding: 0 6px; gap: 8px; }
.wa-bprev-side .wa-logo { width: 30px; height: 30px; border-radius: 9px; }
.wa-bprev-side .wa-brand-name { font-size: 15px; }
.wa-bprev-nav { display: flex; flex-direction: column; gap: 2px; }
.wa-bprev-nav .wa-nav-item { min-height: 34px; font-size: 13px; gap: 8px; padding: 0 8px; }
.wa-bprev-main { flex: 1; min-width: 0; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.wa-bprev-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wa-bprev-head h1 { font-size: 22px; }
.wa-bprev-tiles { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.wa-bprev-tiles .wa-tile { padding: 14px 16px; }
.wa-bprev-tiles .wa-tile-num { font-size: 24px; }
.wa-bprev-text { margin: 0; color: var(--wa-muted); font-size: 13px; }
@media (max-width: 520px) {
    .wa-bprev-side { display: none; }
    .wa-bprev-tiles { grid-template-columns: 1fr; }
}
.wa-design.wa-brand { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .wa-design.wa-brand { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 0.7.4b Branding: Name & Über, Fußzeile & Links ---------- */
.wa-footer-line { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 8px; }
.wa-footer-line a { color: inherit; }
.wa-footer-sep { opacity: .6; }
.wa-heart { color: var(--wa-secondary); }
.wa-help-btn { color: var(--wa-primary); text-decoration: none; }
.wa-about-rows { margin: 0 0 14px; padding: 10px 0; border-top: 1px solid var(--wa-border); border-bottom: 1px solid var(--wa-border); display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.wa-about-rows > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; }
.wa-about-rows dt { color: var(--wa-muted); font-weight: 400; }
.wa-about-rows dd { margin: 0; overflow-wrap: anywhere; }
.wa-about-rows a { font-weight: 600; }
.wa-about-ext { font-size: 11px; }
.wa-brand-langhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wa-brand-copy-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .7fr) minmax(0, 1.2fr); gap: 16px; }
.wa-brand-powered-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.1fr); gap: 16px; align-items: start; }
.wa-brand-copy-grid .wa-field, .wa-brand-powered-grid .wa-field { margin: 0; }
.wa-brand-result { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding: 12px 16px; border-radius: 12px; background: var(--wa-surface-2); font-size: 14px; }
.wa-brand-result .wa-eyebrow { font-size: 12px; }
.wa-brand-result small { margin-left: auto; }
.wa-brand-result a { color: var(--wa-text); text-underline-offset: 2px; }
.wa-brand-prev-title { margin: 0 0 12px; font-size: 13px; }
.wa-brand-prev-title + * + .wa-brand-prev-title, .wa-brand-footer-prev + .wa-brand-prev-title { margin-top: 18px; }
.wa-brand-footer-prev { padding: 14px 16px; border-radius: 12px; background: var(--wa-surface-2); gap: 8px 16px; font-size: 13px; }
.wa-brand-topprev { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; background: var(--wa-surface-2); }
.wa-brand-about { padding: 18px; border: 1px solid var(--wa-border); border-radius: 16px; background: var(--wa-surface); box-shadow: 0 6px 20px rgba(28, 27, 25, .06); font-size: 14px; }
.wa-brand-about .wa-about-head { margin-bottom: 10px; }
.wa-brand-about .wa-about-head h3 { font-size: 20px; }
.wa-brand-about .wa-about-head .wa-logo { width: 44px; height: 44px; border-radius: 13px; }
.wa-brand-about p { margin: 0 0 10px; }
@media (max-width: 640px) {
    .wa-brand-copy-grid, .wa-brand-powered-grid { grid-template-columns: minmax(0, 1fr); }
    .wa-about-rows > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .wa-brand-result small { margin-left: 0; }
}
.wa-brand-powered-grid > .wa-field:first-child { padding-top: 27px; }
@media (max-width: 640px) { .wa-brand-powered-grid > .wa-field:first-child { padding-top: 0; } }

/* ---------- 0.7.4c Branding: Suchmaschinen & Teilen ---------- */
.wa-brand-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.wa-brand-count-wrap { position: relative; display: block; }
.wa-brand-count-wrap .wa-input { padding-right: 76px; }
.wa-brand-count { font-size: 12.5px; color: var(--wa-faint); font-variant-numeric: tabular-nums; }
.wa-brand-count-wrap .wa-brand-count { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.wa-brand-count--below { align-self: flex-end; margin-top: -2px; }
.wa-brand-count.is-over { color: var(--wa-warn); font-weight: 600; }
.wa-brand-og { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 18px; align-items: start; }
.wa-brand-og-img { position: relative; aspect-ratio: 1200 / 630; border-radius: 12px; overflow: hidden; background: var(--wa-surface-2); }
.wa-brand-og-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wa-brand-og-tag { position: absolute; left: 8px; bottom: 8px; padding: 2px 9px; border-radius: 99px; background: rgba(28, 27, 25, .72); color: #FFFFFF; font-size: 11.5px; font-weight: 600; }
.wa-brand-og-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wa-brand-og-side .wa-label, .wa-brand-og-side .wa-help { margin: 0; }
.wa-brand-auto { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; font-size: 14px; }
.wa-brand-auto li { display: flex; gap: 6px; align-items: flex-start; }
.wa-brand-auto .bi { color: var(--wa-ok); margin-top: 2px; }
.wa-brand-code { margin: 0; }
.wa-brand-code summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--wa-primary); margin-bottom: 8px; }
.wa-brand-code pre { margin: 0; padding: 14px 16px; border-radius: 12px; background: #1C1B19; color: #E9E6DF; font-size: 12px; line-height: 1.6; overflow-x: auto; white-space: pre; }
.wa-serp { padding: 14px 16px; border: 1px solid var(--wa-border); border-radius: 14px; background: #FFFFFF; font-family: Arial, Helvetica, sans-serif; }
.wa-serp-site { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.wa-serp-site img { border-radius: 99px; }
.wa-serp-site span { display: flex; flex-direction: column; line-height: 1.25; }
.wa-serp-site strong { font-size: 13px; font-weight: 400; color: #202124; }
.wa-serp-site small { font-size: 12px; color: #4D5156; }
.wa-serp-title { font-size: 18px; color: #1A0DAB; line-height: 1.3; margin-bottom: 3px; overflow-wrap: anywhere; }
.wa-serp-desc { font-size: 13px; color: #4D5156; line-height: 1.45; }
.wa-serp .wa-brand-note { margin-top: 8px; font-family: var(--wa-font); }
.wa-wa-chat { padding: 16px; border-radius: 14px; background: #EFE7DC; }
.wa-wa-bubble { max-width: 320px; margin-left: auto; padding: 4px 4px 6px; border-radius: 10px; background: #D9FDD3; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); font-family: Arial, Helvetica, sans-serif; }
.wa-wa-card { border-radius: 7px; overflow: hidden; background: rgba(0, 0, 0, .05); }
.wa-wa-card img { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; }
.wa-wa-card div { display: flex; flex-direction: column; gap: 1px; padding: 6px 9px 8px; }
.wa-wa-card strong { font-size: 12.5px; color: #111B21; }
.wa-wa-card small { font-size: 11.5px; color: #54656F; line-height: 1.3; }
.wa-wa-card em { font-style: normal; font-size: 11px; color: #8696A0; }
.wa-wa-bubble p { margin: 6px 6px 0; font-size: 12.5px; color: #111B21; overflow-wrap: anywhere; }
.wa-wa-link { color: #027EB5; }
.wa-wa-bubble time { float: right; margin: 4px 0 0 8px; font-size: 10.5px; color: #667781; }
.wa-fb-card { border: 1px solid #DADDE1; border-radius: 10px; overflow: hidden; background: #F0F2F5; font-family: Arial, Helvetica, sans-serif; }
.wa-fb-card img { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; }
.wa-fb-card div { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px 11px; }
.wa-fb-card small { font-size: 11.5px; color: #65676B; }
.wa-fb-card strong { font-size: 14.5px; color: #050505; overflow-wrap: anywhere; }
.wa-fb-card span { font-size: 13px; color: #65676B; }
#brand-seo-previews .wa-brand-prev-title:not(:first-child) { margin-top: 20px; }
@media (max-width: 640px) {
    .wa-brand-og, .wa-brand-auto { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Branding: eigene Schriften (0.7.4d) ---------- */
.wa-font-card { display: flex; flex-direction: column; gap: 16px; }
.wa-font-card .wa-design-head .wa-help { margin: 0; }
.wa-font-drop { display: flex; align-items: center; gap: 16px; padding: 18px; border: 2px dashed var(--wa-border-strong); border-radius: 14px; background: var(--wa-surface-2); cursor: pointer; }
.wa-font-drop:focus-within { box-shadow: var(--wa-focus); }
.wa-font-drop.is-over { border-color: var(--wa-primary); background: rgba(var(--wa-primary-rgb), .06); }
.wa-font-drop-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: rgba(var(--wa-primary-rgb), .12); color: var(--wa-primary); }
.wa-font-drop-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--wa-muted); }
.wa-font-drop-text strong { font-size: 15px; color: var(--wa-text); }
.wa-font-full { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--wa-surface-2); font-size: 14px; color: var(--wa-text-2); }
.wa-font-list { list-style: none; margin: 0; padding: 0; }
.wa-font-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--wa-border); }
.wa-font-main { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.wa-font-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wa-font-name strong { font-size: 15px; }
.wa-pill.wa-font-used { background: rgba(var(--wa-primary-rgb), .12); color: var(--wa-primary); }
.wa-font-sample { margin: 0; font-size: 24px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-font-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wa-font-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.wa-font-del { padding-left: 10px; padding-right: 10px; }
.wa-font-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--wa-border); }
.wa-font-foot a { text-decoration: none; }
.wa-font-dlg { display: flex; flex-direction: column; gap: 14px; max-width: 620px; }
.wa-font-dlg .wa-help, .wa-font-dlg p { margin: 0; }
.wa-font-files ul { list-style: none; margin: 6px 0 0; padding: 0; }
.wa-font-files li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--wa-border); }
.wa-font-files--bad li { grid-template-columns: 20px minmax(0, 1fr); }
.wa-font-file-icon { color: var(--wa-muted); }
.wa-font-file-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wa-font-file-main code { font-size: 13.5px; color: var(--wa-text); overflow-wrap: anywhere; }
.wa-font-ok { font-size: 12.5px; color: var(--wa-ok); }
.wa-font-bad { font-size: 12.5px; color: var(--wa-fail); }
.wa-font-files select { width: auto; min-width: 120px; }
.wa-font-lic { display: flex; flex-direction: column; gap: 10px; }
.wa-font-lic .wa-field { margin: 0; }
.wa-font-lic-grid { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 12px; }
.wa-font-detected { margin: 0; font-size: 12.5px; color: var(--wa-ok); }
.wa-font-result { margin: 0; font-size: 12.5px; color: var(--wa-muted); }
.wa-font-result strong { color: var(--wa-text-2); }
.wa-font-confirm { font-weight: 400; line-height: 1.45; }
.wa-font-need { font-size: 12.5px; }
@media (max-width: 640px) {
    .wa-font-drop { flex-direction: column; align-items: flex-start; }
    .wa-font-row { grid-template-columns: minmax(0, 1fr); }
    .wa-font-actions { justify-content: flex-start; }
    .wa-font-lic-grid { grid-template-columns: minmax(0, 1fr); }
    .wa-font-files li { grid-template-columns: 20px minmax(0, 1fr); }
    .wa-font-files li select { grid-column: 2; }
}

/* ---------- Text-Links (0.7.4e): Unterstrich erst beim Überfahren, wächst von der Mitte nach außen ---------- */
a:not([class]), a.wa-link-btn, button.wa-link-btn, .wa-footer a {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-size: 0% 1px;
    transition: background-size .25s ease, color .15s;
}
a:not([class]):hover, a:not([class]):focus-visible, a.wa-link-btn:hover, a.wa-link-btn:focus-visible,
button.wa-link-btn:not(:disabled):hover, button.wa-link-btn:focus-visible, .wa-footer a:hover, .wa-footer a:focus-visible, .wa-copy--url a:hover {
    text-decoration: none;
    background-size: 100% 1px;
}
/* Links, die wie Knöpfe, Karten oder Reiter aussehen, bekommen keinen Strich */
.wa-design-head .wa-link-btn, .wa-brand-color-head .wa-link-btn, .wa-brand-logo-actions .wa-link-btn,
.wa-mail-list a, .wa-prof-links a, .wa-legal-tabs a, a:not([class]):has(> img) { background-image: none; }
@media (prefers-reduced-motion: reduce) {
    a:not([class]), a.wa-link-btn, button.wa-link-btn, .wa-footer a, .wa-link-small, .wa-link-like, .wa-btn--link { transition: none; }
}
.wa-brand-public-text .wa-brand-langhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }

/* 0.7.6: Admin – Reiter „Hinweis-Badge“ (Symbol-Raster, Positions-Raster, Farbe+Hex, Vorschau) */
.wa-badge-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; max-width: 360px; margin-top: 10px; }
.wa-badge-icon-grid label { display: block; margin: 0; cursor: pointer; }
.wa-badge-icon-grid input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.wa-badge-icon-grid span { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 9px; background: var(--wa-surface-2); color: var(--wa-muted); font-size: 17px; border: 1px solid transparent; }
.wa-badge-icon-grid input:checked + span { background: var(--wa-primary); color: #FFFFFF; border-color: var(--wa-primary); }
.wa-badge-icon-grid input:focus-visible + span { box-shadow: var(--wa-focus); }
.wa-badge-image { margin-top: 10px; }
.wa-badge-pos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 168px; margin-top: 8px; }
.wa-badge-pos-grid label { display: block; margin: 0; cursor: pointer; }
.wa-badge-pos-grid input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.wa-badge-pos-box { position: relative; display: block; aspect-ratio: 1; border-radius: 9px; background: var(--wa-surface-2); border: 1px solid var(--wa-border); }
.wa-badge-pos-dot { position: absolute; width: 9px; height: 9px; border-radius: 99px; background: var(--wa-muted); }
input:checked + .wa-badge-pos-box { border-color: var(--wa-primary); background: rgba(var(--wa-primary-rgb), .08); }
input:checked + .wa-badge-pos-box .wa-badge-pos-dot { background: var(--wa-primary); }
input:focus-visible + .wa-badge-pos-box { box-shadow: var(--wa-focus); }
.wa-badge-pos-box--tl .wa-badge-pos-dot, .wa-badge-pos-box--ml .wa-badge-pos-dot, .wa-badge-pos-box--bl .wa-badge-pos-dot { left: 6px; }
.wa-badge-pos-box--tc .wa-badge-pos-dot, .wa-badge-pos-box--mc .wa-badge-pos-dot, .wa-badge-pos-box--bc .wa-badge-pos-dot { left: 50%; margin-left: -4.5px; }
.wa-badge-pos-box--tr .wa-badge-pos-dot, .wa-badge-pos-box--mr .wa-badge-pos-dot, .wa-badge-pos-box--br .wa-badge-pos-dot { right: 6px; }
.wa-badge-pos-box--tl .wa-badge-pos-dot, .wa-badge-pos-box--tc .wa-badge-pos-dot, .wa-badge-pos-box--tr .wa-badge-pos-dot { top: 6px; }
.wa-badge-pos-box--ml .wa-badge-pos-dot, .wa-badge-pos-box--mc .wa-badge-pos-dot, .wa-badge-pos-box--mr .wa-badge-pos-dot { top: 50%; margin-top: -4.5px; }
.wa-badge-pos-box--bl .wa-badge-pos-dot, .wa-badge-pos-box--bc .wa-badge-pos-dot, .wa-badge-pos-box--br .wa-badge-pos-dot { bottom: 6px; }
.wa-badge-color-row { display: flex; align-items: center; gap: 10px; }
.wa-badge-color-row .wa-input { flex: 1 1 auto; }
.wa-badge-preview-frame { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, #7C6A58, #3A4A42); }
.wa-badge-preview-frame .wa-credit { pointer-events: none; }