/*
 * Enthaelt AUSSCHLIESSLICH Abweichungen/Ergaenzungen zu Bootstrap - niemals Bootstrap-Regeln
 * duplizieren. Lade-Reihenfolge im Layout: zuerst bootstrap.min.css, danach diese Datei.
 */

/* ---- Farbvariablen fuer Dark/Light-Mode -----------------------------------------------
   Default folgt der Systemeinstellung des Browsers (prefers-color-scheme); das serverseitig
   gesetzte data-theme-Attribut (siehe ThemeController) ueberschreibt das gezielt, wenn der
   Besucher den Footer-Umschalter genutzt hat. Beides funktioniert komplett ohne JavaScript. */
/* Markenfarben dieser Demo-Instanz (warmes Braun, passend zum Firmennamen "Beispiel Tonholz
   GmbH") - bewusst NUR Farbwerte, KEINE fest einprogrammierte Grafik/Textur mehr (Nutzer-Vorgabe:
   Bob The Website soll als generisches CMS fuer beliebige Branchen einsetzbar bleiben; ein
   fest im Produkt verankertes Holz-Hintergrundmuster widerspraeche dem UND kollidierte mit der
   bestehenden Admin-Funktion fuer individuelle Hintergruende, siehe /admin/settings). */
:root {
    --bw-bg: #ffffff;
    --bw-text: #1c1a17;
    --bw-surface: #f7f3ec;
    --bw-accent: #8a5a30;
    --bw-accent-contrast: #ffffff;
    --bw-border: #e3dbcb;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bw-bg: #16140f;
        --bw-text: #ece6d9;
        --bw-surface: #221f18;
        --bw-accent: #c98a3e;
        --bw-accent-contrast: #16140f;
        --bw-border: #3a352a;
    }
}

html[data-theme="light"] {
    --bw-bg: #ffffff;
    --bw-text: #1c1a17;
    --bw-surface: #f7f3ec;
    --bw-accent: #8a5a30;
    --bw-accent-contrast: #ffffff;
    --bw-border: #e3dbcb;
}

html[data-theme="dark"] {
    --bw-bg: #16140f;
    --bw-text: #ece6d9;
    --bw-surface: #221f18;
    --bw-accent: #c98a3e;
    --bw-accent-contrast: #16140f;
    --bw-border: #3a352a;
}

/* ---- Grundtypografie & modernes, nicht bildschirmfuellendes Layout --------------------
   Bootstraps .container wird auf eine etwas schmalere Lesebreite gedeckelt, damit Inhalte
   auf breiten Desktop-Monitoren nicht ueber die ganze Bildschirmbreite laufen - wirkt sonst
   auf grossen Screens unruhig/altbacken statt modern. */
/* Kein fest einprogrammiertes Hintergrundmuster mehr (Nutzer-Vorgabe) - "background-color" ist
   bewusst eine ganz normale Regel ohne Bild/Textur, damit sie von der bestehenden Admin-Funktion
   fuer individuelle Hintergruende (Farbe/Bild, siehe PageService.BackgroundStyle, Inline-"style"
   auf <body> in index.html/page.html) jederzeit sauber per Inline-Style ueberschrieben wird, ohne
   dass irgendeine zusaetzliche CSS-Ebene durchscheint. */
body {
    background-color: var(--bw-bg);
    color: var(--bw-text);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
}

.container {
    max-width: 1140px;
}

/* Auf sehr breiten Desktop-Monitoren etwas mehr Platz nutzen (mehr Kacheln pro Zeile, siehe
   .tile-card-Grid in index.html), aber weiterhin bewusst NICHT bildschirmfuellend - die
   Lesebreite bleibt gedeckelt, nur der Kachel-Bereich bekommt mehr Raum. */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

h1, h2, h3 {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Bootstrap-Links/Buttons uebernehmen nicht automatisch unsere Markenfarbe. */
a {
    color: var(--bw-accent);
}

.btn-brand {
    background-color: var(--bw-accent);
    border-color: var(--bw-accent);
    color: var(--bw-accent-contrast);
}

/* Runder Zaehler-Badge auf dem Warenkorb-Icon (siehe nav.html) - Bootstrap bringt keine
   Icon-Badge-Komponente mit, daher hier ergaenzt. */
.cart-badge {
    position: absolute;
    top: -0.4rem;
    right: -0.6rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background-color: var(--bw-accent);
    color: var(--bw-accent-contrast);
    font-size: 0.65rem;
    line-height: 1.1rem;
    text-align: center;
    font-weight: 600;
}

/* ---- Navbar: Schatten + "immer oben sichtbar" beim Scrollen ----------------------------
   Bewusst "position: fixed" statt "sticky": sticky scheiterte bei mindestens einem Nutzer
   trotz nachweislich korrektem CSS (computed position:sticky bestaetigt, kein overflow auf
   body/header/html, kein Erweiterungs-/Zoom-/Responsive-Mode-Einfluss - Ursache liess sich
   trotz ausfuehrlicher Live-Diagnose per DevTools nicht zweifelsfrei feststellen). "fixed"
   haengt von deutlich weniger Umgebungsfaktoren ab (nur transform/filter/perspective auf einem
   Vorfahren koennten es noch stoeren - das setzen wir nirgends) und ist deshalb robuster.
   Da "fixed" die Navbar komplett aus dem normalen Fluss herausnimmt, braucht die Seite einen
   Platzhalter in passender Hoehe (siehe ".site-header" weiter unten), sonst wuerde der erste
   Seiteninhalt direkt unter der Leiste starten. Das mobile Ausklapp-Menue (siehe
   ".nav-toggle:checked ~ .navlinks" weiter unten) bleibt dabei automatisch ein Overlay ueber
   dem Seiteninhalt statt ihn zu verschieben, da es Teil derselben "fixed"-Box ist, die beim
   Ausklappen einfach hoeher wird, statt im normalen Dokumentfluss zu stehen. */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1020;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    /* Bootstraps ".bg-body"-Utility nutzt "--bs-body-bg" (eigenes Bootstrap-Farbsystem, folgt
       NICHT unseren "--bw-*"-Variablen) - ohne diese Ueberschreibung bliebe die Navbar auch nach
       Einfuehrung der warmen Holzoptik schlicht Bootstrap-weiss/-dunkelgrau statt zum Kartenton
       (--bw-surface) zu passen. !important noetig, da Bootstraps Utility-Klasse selbst bereits
       !important setzt. */
    background-color: var(--bw-surface) !important;
}

/* Gleicht aus, dass die jetzt "fixed" positionierte Navbar keinen Platz mehr im normalen
   Fluss belegt - ohne dies wuerde der erste Seiteninhalt direkt unter der Leiste verdeckt
   starten. Zwei Faelle, da die oeffentliche Seite die Navbar in eine <header class="site-
   header"> huellt (siehe fragments/layout.html), der Admin-Bereich die Navbar dagegen direkt
   ohne Huelle vor <main> setzt (siehe admin-layout.html) - in beiden Faellen folgt auf das
   jeweils aeussere Element direkt <main>, daher reicht ein einfacher Geschwister-Selektor statt
   eines generischen ":has()" (nicht in jedem Browser verlaesslich unterstuetzt). */
.site-header + main,
.navbar + main {
    margin-top: 4.9rem;
}

/* ---- Grosse Kachel-Komponente -------------------------------------------------------
   Bootstrap-Cards bringen von sich aus keinen Hover-Lift und keine einheitliche
   Bildhoehe - hier gezielt ergaenzt fuer die grosse, moderne Kachel-Optik der Startseite. */
.tile-card {
    display: block;
    background-color: var(--bw-surface);
    border: 1px solid var(--bw-border);
    border-radius: 0.75rem;
    overflow: hidden;
    text-decoration: none;
    color: var(--bw-text);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    height: 100%;
}

.tile-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.15);
}

.tile-card .tile-card-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background-color: var(--bw-border);
}

.tile-card .tile-card-body {
    padding: 1.25rem;
}

/* ---- Mobile Navigation ohne JavaScript (Checkbox-Hack) ------------------------------
   Bootstrap-JS (bundle.js) wird auf oeffentlichen Seiten bewusst NICHT geladen; das klappbare
   mobile Menue wird deshalb rein ueber CSS mittels einer versteckten Checkbox umgesetzt. */
.nav-toggle {
    display: none;
}

.navlinks-toggle {
    display: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--bw-text);
}

@media (max-width: 767.98px) {
    .navlinks-toggle {
        display: inline-block;
    }

    .navlinks {
        display: none;
        flex-direction: column;
        width: 100%;
    }

    .nav-toggle:checked ~ .navlinks {
        display: flex;
    }

    /* Admin-Tabellen (Seiten/Produkte/Bestellungen/Anbieter-Listen usw.) sind oft breiter als ein
       Smartphone-Bildschirm - statt das Layout zu sprengen, werden sie horizontal scrollbar. Generisch
       auf alle Tabellen im Admin-<main> angewendet, damit nicht jede einzelne Listen-Vorlage separat
       angepasst werden muss. */
    main table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ---- Icon-Gruppe oben rechts (Sprach-Flagge + Dark/Light-Icon + Hamburger) ------------ */
/* display:flex + align-items:center sorgen dafuer, dass Flagge, Theme-Icon und Hamburger-Label
   immer auf einer gemeinsamen Grundlinie stehen ("in einer Flucht") statt wie zuvor je nach
   Zeilenhoehe des Emojis/Icons leicht versetzt zu wirken. */
.nav-icons {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.flag-icon {
    width: 1.5rem;
    height: 1.125rem;
    object-fit: cover;
    border-radius: 0.15rem;
    border: 1px solid var(--bw-border);
    vertical-align: middle;
}

/* Sprachdropdown als natives <details>: Trigger zeigt nur die aktuelle Flagge, das Panel mit den
   uebrigen Sprachen wird erst bei [open] eingeblendet - komplett ohne JavaScript. */
.lang-dropdown {
    position: relative;
}

.lang-dropdown summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
}

/* Versteckt das Aufklapp-Dreieck browseruebergreifend: ::-webkit-details-marker fuer Chrome/Safari,
   ::marker (modernes CSS, inkl. Firefox) als zusaetzliche Regel, da list-style:none allein in
   Firefox bei <summary> nicht zuverlaessig greift. */
.lang-dropdown summary::-webkit-details-marker,
.lang-dropdown summary::marker {
    display: none;
    content: "";
}

/* Jede Sprachoption in einer Zeile: Flagge links, Name rechts, vertikal zentriert ("in einer Flucht").
   text-decoration:none noetig, da dies ein <a> ist und die globale "a {...}"-Regel oben zwar die
   Markenfarbe setzt, aber die Standard-Browser-Unterstreichung von Links nicht entfernt. Gilt
   gleichermassen fuer <button> (siehe admin-layout.html, dort ein POST-Formular statt eines reinen
   GET-Links) - die Reset-Eigenschaften direkt darunter sorgen dafuer, dass ein <button> hier optisch
   nicht von einem <a> zu unterscheiden ist (sonst Browser-Standard-Buttonrahmen/-hintergrund/-schrift). */
.lang-dropdown-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    text-decoration: none;
    color: var(--bw-text);
    background: none;
    border: none;
    padding: 0;
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.lang-dropdown-option:hover {
    color: var(--bw-accent);
}

.lang-dropdown-panel {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background-color: var(--bw-surface);
    border: 1px solid var(--bw-border);
    border-radius: 0.5rem;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    z-index: 1030;
}

/* ---- Generisches Aufklapp-Overlay fuer Menuepunkte mit Unterpunkten -------------------
   Gleiches Prinzip wie .lang-dropdown, aber wiederverwendbar fuer jedes <details>, dessen Panel
   als schwebendes Overlay statt als simple Einrueckung erscheinen soll - genutzt vom
   oeffentlichen Hauptmenue (nav.html, Menuepunkte mit Unterpunkten) UND vom Admin-"Shop"-Menue
   (admin-layout.html). Ohne diese Klassen wuerde ein <details>-Panel nur den Seitenfluss nach
   unten verschieben statt sichtbar über dem restlichen Inhalt zu schweben. */
.nav-dropdown {
    position: relative;
}

.nav-dropdown > summary {
    list-style: none;
    cursor: pointer;
    /* <summary> ist kein <a> - bekommt die globale Linkfarbe/-unterstreichung (siehe "a {...}"
       oben bzw. Bootstraps Standard-Linkformat) nicht automatisch. Ohne dies faellt "Shop" im
       Admin-Menue (und Menuepunkte mit Unterpunkten im oeffentlichen Hauptmenue) optisch gegenueber
       den uebrigen, einfachen Menuepunkten ab. */
    color: var(--bw-accent);
    text-decoration: underline;
}

.nav-dropdown > summary::-webkit-details-marker,
.nav-dropdown > summary::marker {
    display: none;
    content: "";
}

.nav-dropdown-panel {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.5rem;
    min-width: 12rem;
    background-color: var(--bw-surface);
    border: 1px solid var(--bw-border);
    border-radius: 0.5rem;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    z-index: 1030;
}

.nav-dropdown-panel a {
    white-space: nowrap;
    padding: 0.25rem 0.5rem;
    border-radius: 0.3rem;
}

.nav-dropdown-panel a:hover {
    background-color: var(--bw-border);
}

/* ---- Hauptmenue-Punkte selbst als Kacheln statt reiner Textlinks ---------------------
   Nutzer-Vorgabe ("besonders das Menue in Kacheln unterbringen"): nicht nur die aufklappbaren
   Unterpunkte (siehe .nav-tile weiter unten), sondern jeder Top-Level-Menuepunkt der
   Hauptnavigation (oeffentlich: Shop/Ueber uns/Holzarten/.../Admin: Inhalte/Shop/Sprachen/...)
   wirkt wie eine kleine, abgerundete Kachel - konsistent mit dem Kartenraster-Prinzip der
   Listenansichten, statt wie zuvor ein einfacher unterstrichener Link. Wird sowohl auf <a> als
   auch auf das <summary> eines <details>-Dropdowns angewendet (ist dort der sichtbare,
   klickbare Menuepunkt). Die zusammengesetzten Selektoren ueberschreiben gezielt die
   generische ".nav-dropdown > summary"-Farbe/-Unterstreichung weiter oben. */
.nav-link-tile {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    border-radius: 0.6rem;
    background-color: var(--bw-surface);
    border: 1px solid var(--bw-border);
    color: var(--bw-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.nav-link-tile:hover,
.nav-dropdown > summary.nav-link-tile:hover {
    background-color: var(--bw-border);
    color: var(--bw-text);
    transform: translateY(-2px);
    box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.1);
}

.nav-dropdown > summary.nav-link-tile {
    color: var(--bw-text);
    text-decoration: none;
}

/* ---- Dropdown-Panels als Kachel-Raster statt reiner Linkliste ------------------------
   Nutzer-Vorgabe ("Flaches Kartenraster ueberall") gilt auch fuer die Menues selbst: die
   Unterpunkte von "Inhalte"/"Shop"/"Einstellungen" (Admin) sowie Hauptmenuepunkten mit
   Unterpunkten (oeffentliche Navigation) erscheinen als kleine Kacheln mit Icon statt als
   einfache Linkliste. Ueber "a.nav-tile" (statt nur ".nav-tile") bewusst spezifischer als
   die generische ".nav-dropdown-panel a"-Regel oben, damit deren Padding/Radius/Nowrap hier
   nicht durchschlagen. */
.nav-tile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(7rem, 1fr));
    gap: 0.5rem;
    min-width: 16rem;
}

/* Einspaltige Variante (Nutzer-Vorgabe: "Seiten" und "Menü" im "Inhalte"-Dropdown untereinander
   statt im 2-Spalten-Raster nebeneinander) - nur auf das "Inhalte"-Dropdown angewendet (siehe
   admin-layout.html), "Shop"/"Einstellungen" bleiben beim 2-Spalten-Raster. */
.nav-tile-grid--stacked {
    grid-template-columns: 1fr;
}

.nav-dropdown-panel a.nav-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.75rem 0.5rem;
    border-radius: 0.6rem;
    background-color: var(--bw-bg);
    border: 1px solid var(--bw-border);
    text-align: center;
    font-size: 0.8rem;
    white-space: normal;
}

.nav-dropdown-panel a.nav-tile:hover {
    background-color: var(--bw-border);
    transform: translateY(-2px);
}

.nav-tile-icon {
    display: block;
    font-size: 1.4rem;
    line-height: 1;
}

/* Dark/Light als einzelnes Icon statt zwei Links - zeigt den aktuell aktiven Modus. */
.theme-toggle-icon {
    text-decoration: none;
    font-size: 1.25rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    height: 1.5rem;
}

.navlinks-toggle {
    line-height: 1;
}

/* ---- Cookie-Einwilligungs-Banner ------------------------------------------------------
   Fixiert am unteren Bildschirmrand, rein serverseitig ein-/ausgeblendet je nach Cookie-Status
   (siehe GlobalModelAttributes.cookieConsentGiven) - keine JavaScript-Logik notwendig. */
.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    background-color: var(--bw-surface);
    border-top: 1px solid var(--bw-border);
    padding: 1rem;
}

/* ---- Admin-Uebersetzungs-Warnhinweis --------------------------------------------------- */
.translation-warning {
    font-size: 0.85rem;
}

/* ---- Modernes Karten-Raster fuer Listenansichten (ersetzt klassische <table>) ---------
   Nutzer-Vorgabe ("flaches Kartenraster ueberall"): jede Admin-Listenansicht (Seiten,
   Produkte, Bestellungen, Kategorien, Anbieter, Sprachen, Menue, Bildbibliothek,
   Fehlermeldungen) sowie die oeffentlichen Listen (Warenkorb, Bestelluebersicht) nutzen
   dieses gemeinsame Kartenmuster statt Tabellenzeilen. auto-fill statt fester Spaltenzahl,
   damit sich das Raster ohne Breakpoint-Mediaqueries an jede Bildschirmbreite anpasst. */
.data-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.data-card {
    background-color: var(--bw-surface);
    border: 1px solid var(--bw-border);
    border-radius: 0.9rem;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.data-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1.2rem rgba(0, 0, 0, 0.12);
}

/* Formular-Gruppierungen (fieldset.border.rounded, z.B. Produkt-/Seiten-/Zahlungsanbieter-
   Formulare) nutzten bisher nur die blasse Bootstrap-Standardbox (duenne graue Linie ohne
   Hintergrund) - das wirkte neben den farbig hinterlegten .data-card-Kacheln kontrastarm/
   uneinheitlich. Gleiche Flaeche/Schatten wie .data-card, damit Listen- und Formularseiten
   optisch zusammenpassen. */
fieldset.border {
    background-color: var(--bw-surface);
    box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.06);
}

fieldset.border > legend {
    color: var(--bw-accent);
}

.data-card-title {
    font-weight: 600;
    font-size: 1.05rem;
    overflow-wrap: anywhere;
}

.data-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.9rem;
    font-size: 0.85rem;
}

.data-card-meta-item {
    display: flex;
    gap: 0.3rem;
}

.data-card-meta-item dt {
    font-weight: 600;
    opacity: 0.65;
}

.data-card-meta-item dd {
    margin: 0;
}

.data-card-actions {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding-top: 0.5rem;
}

/* Status-/Aktiv-Kennzeichnung als runde Pille statt Tabellentext - "status-pill-on" markiert
   den positiven Zustand (aktiv/ja/erledigt) farblich mit der Markenfarbe. */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background-color: var(--bw-border);
    white-space: nowrap;
}

.status-pill-on {
    background-color: var(--bw-accent);
    color: var(--bw-accent-contrast);
}

.data-card-empty {
    grid-column: 1 / -1;
}

/* ---- Flaggen-Auswahl im Sprachformular (admin/language-form.html) --------------------
   Optisch wie ein Dropdown (geschlossen: nur die aktuelle Auswahl sichtbar; Klick klappt die
   volle Liste auf), technisch ein natives <details>/<summary> statt eines echten <select> -
   ein <option> kann keine Bilder darstellen, hier sollen aber die echten hochgeladenen
   Flaggenbilder erscheinen (kein JavaScript noetig, <details> braucht keins). Darunter ein
   scrollbares Raster aus echten Radiobuttons - der Admin kann nur Flaggen waehlen, die
   tatsaechlich im Upload-Ordner vorhanden sind. */
.flag-dropdown {
    border: 1px solid var(--bw-border);
    border-radius: 0.5rem;
    background-color: var(--bw-surface);
}

.flag-dropdown-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    list-style: none;
}

.flag-dropdown-summary::-webkit-details-marker {
    display: none;
}

.flag-dropdown-summary::after {
    content: '▾';
    margin-left: auto;
    color: var(--bw-accent);
}

.flag-dropdown[open] > .flag-dropdown-summary::after {
    content: '▴';
}

.flag-dropdown[open] > .flag-dropdown-summary {
    border-bottom: 1px solid var(--bw-border);
}

.flag-picker {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    max-height: 12rem;
    overflow-y: auto;
    padding: 0.5rem;
}

.flag-picker-option {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 0.4rem;
    cursor: pointer;
    font-size: 0.85rem;
}

.flag-picker-option:has(input:checked) {
    border-color: var(--bw-accent);
    background-color: var(--bw-border);
}

.flag-picker-none {
    padding: 0.1rem 0;
}

.flag-picker-status {
    font-size: 0.75rem;
    color: var(--bw-accent);
}

/* ---- Fortschrittsbalken der Massenuebersetzung (admin/pages.html) ---------------------
   Reines CSS, keine Animation per JavaScript: die Breite wird bei jedem Seiten-Neuladen
   (per "meta http-equiv=refresh", siehe pages.html) serverseitig neu gesetzt - der Balken
   "wandert" dadurch alle paar Sekunden ein Stueck weiter, ganz ohne Skript. */
.bulk-translation-progress {
    position: relative;
    width: 260px;
    max-width: 100%;
    height: 2.25rem;
    border: 1px solid var(--bw-border);
    border-radius: 0.375rem;
    background-color: var(--bw-surface);
    overflow: hidden;
}

.bulk-translation-progress-bar {
    height: 100%;
    background-color: var(--bw-accent);
    transition: width 1s linear;
}

.bulk-translation-progress-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bw-text);
    text-shadow: 0 0 3px var(--bw-surface);
}

/* ---- Info-Icons hinter Formular-Labels (admin/fragments/help-icon.html) ---------------
   Bewusst KEIN <details>-Aufklappelement (ueberlagerte frueher benachbarte Formularfelder und
   schloss beim Scrollen/Klicken daneben nicht zuverlaessig) - statt dessen ein modales
   Popup-Overlay per Checkbox-Hack (kein JavaScript): zentriert, mit Hintergrund-Abdunkelung,
   eigenem Scrollbereich fuer laengere Texte (wichtig am Smartphone) und explizitem x-Schliessen. */
.help-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    padding-bottom: 0.1rem;
    border-radius: 50%;
    background-color: var(--bw-accent);
    color: var(--bw-accent-contrast);
    /* Serifen-Schrift + kursiv: klassische "i"-Info-Optik statt des unausgewogen wirkenden
       Unicode-Zeichens "ⓘ" (dessen eigener Kreis mit dem CSS-Kreis kollidierte und je nach
       Schriftart sichtbar ausserhalb der Mitte sass). Ein einzelner Buchstabe laesst sich per
       Flexbox zuverlaessig zentrieren. */
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 1rem;
    font-weight: 700;
    margin-left: 0.35rem;
    cursor: pointer;
    vertical-align: middle;
    box-shadow: 0 0 0 1px var(--bw-accent-contrast) inset;
}

.help-icon:hover {
    filter: brightness(1.15);
}

.help-icon-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.help-icon-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1060;
    padding: 1rem;
    overflow-y: auto;
}

.help-icon-toggle:checked ~ .help-icon-overlay {
    display: block;
}

.help-icon-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.help-icon-dialog {
    position: relative;
    margin: 10vh auto 2rem;
    width: min(90vw, 360px);
    max-height: 70vh;
    overflow-y: auto;
    background-color: var(--bw-surface);
    border: 1px solid var(--bw-border);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
    font-weight: normal;
    color: var(--bw-text);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3);
}

.help-icon-close {
    position: sticky;
    top: -1rem;
    float: right;
    margin: -0.5rem -0.75rem 0 0.75rem;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1.5rem;
    color: var(--bw-text);
}

/* ---- WYSIWYG-Editor (nur Admin) -------------------------------------------------------
   Nur im Admin-Bereich geladen (Nutzer-Vorgabe: oeffentliche Seiten bleiben JS-frei). */
.wysiwyg-editor {
    border: 1px solid var(--bw-border);
    border-radius: 0.5rem;
    overflow: hidden;
}

.wysiwyg-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 0.4rem;
    background-color: var(--bw-surface);
    border-bottom: 1px solid var(--bw-border);
    align-items: center;
}

.wysiwyg-toolbar button {
    /* Browser-Vorgabe fuer <button> ist oft ein festes Schwarz (ButtonText), das im Dark Mode auf
       dem dunklen Toolbar-Hintergrund kaum lesbar ist - deshalb Farbe explizit an die Theme-Variable
       koppeln statt sich auf einen Reboot-Reset zu verlassen. */
    border: 1px solid transparent;
    background: none;
    color: var(--bw-text);
    border-radius: 0.3rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
}

.wysiwyg-toolbar button:hover,
.wysiwyg-toolbar button.active {
    background-color: var(--bw-border);
}

.wysiwyg-toolbar select,
.wysiwyg-toolbar input[type="color"] {
    border: 1px solid var(--bw-border);
    border-radius: 0.3rem;
    padding: 0.2rem;
    font-size: 0.85rem;
}

.wysiwyg-content {
    min-height: 200px;
    padding: 0.75rem;
    background-color: var(--bw-bg);
    outline: none;
}

.wysiwyg-content img {
    max-width: 100%;
    height: auto;
}

.wysiwyg-overlay {
    display: none;
    position: absolute;
    z-index: 1045;
    background-color: var(--bw-surface);
    border: 1px solid var(--bw-border);
    border-radius: 0.5rem;
    padding: 0.75rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
    width: 320px;
}

.wysiwyg-overlay.open {
    display: block;
}

.wysiwyg-overlay .wysiwyg-image-library {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    max-height: 160px;
    overflow-y: auto;
    margin-bottom: 0.5rem;
}

.wysiwyg-overlay .wysiwyg-image-library img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border: 2px solid transparent;
    border-radius: 0.3rem;
    cursor: pointer;
}

.wysiwyg-overlay .wysiwyg-image-library img:hover {
    border-color: var(--bw-accent);
}

.wysiwyg-toolbar-group {
    position: relative;
    display: inline-flex;
}