/* ==========================================================================
   style.css – Oberfläche Sales Quality
   Nutzt die Vodafone-Tokens aus brand.css (immer zuerst brand.css laden).

   Aufbau
     1. Flächen-Tokens & Grundlagen
     2. Layout (Topbar, Seite, Footer)
     3. Bausteine (Karten, Buttons, Pills, Meldungen, Links)
     4. Formulare
     5. Shop-Picker
     6. Tabellen & Reiter
     7. Karussell (Desktop: Raster, mobil: Wischen mit Pfeilen + Punkten)
     8. Anmeldeseite
     9. Pull-to-Refresh

   Grundsätze: mobile-first, volle Desktopbreite, Dark Mode überall mitgedacht.
   ========================================================================== */

/* ==========================================================================
   1. Flächen-Tokens & Grundlagen
   ========================================================================== */

:root {
    /* Flächen: die Seite liegt zurückgenommen, Karten stehen davor.
       Diese Schichtung ist in beiden Modi dieselbe – hell wird sie heller nach
       vorn (15 % Black -> Weiß), dunkel heller nach vorn (Slate Grey ->
       Vodafone Grey). Alle vier Werte sind Farben aus den Brand Guidelines,
       siehe brand.css; eigene Grautöne gibt es hier nicht mehr. */
    --app-bg:      var(--vf-15-black);
    --card-bg:     var(--vf-white);
    --input-bg:    var(--vf-white);
    /* Fläche der Menü-Schublade: leicht abgesetzt von der Kopfzeile. Die
       Hover-Fläche liegt darauf und muss die Gegenrichtung gehen, sonst wäre
       sie auf dem Grau nicht zu sehen. Im Dark Mode gilt die Kartenfarbe. */
    --nd-bg:       #FEFEFE;
    --nd-hover:    var(--vf-15-black);
    --card-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 8px 24px rgb(0 0 0 / 0.05);

    /* Zustandsfarben für Formulare. */
    --ok:   var(--vf-success);
    --warn: var(--vf-fresh-orange);
    --err:  var(--vf-red);

    /* Rot beim Überfahren – Links und Buttons werden dunkler statt
       unterstrichen. Im Dark Mode wäre "dunkler" unlesbar, dort geht es
       daher einen Ton heller (Red Text, die Dark-Mode-Farbe der Guidelines). */
    --accent-hover: var(--vf-dark-red);

    /* Rahmen und Hover-Fläche des zurückhaltenden Knopfes: das gedämpfte
       Grau des jeweiligen Modus (hell Vodafone Grey, dunkel dessen helle
       Entsprechung) – eine Zeile für beide, --fg-muted wechselt selbst mit. */
    --btn-ghost-edge: var(--fg-muted);

    --radius-lg: 6px;
    --radius:    6px;
    --radius-sm: 4px;

    /* Buttons: leicht abgerundetes Rechteck (Vodafone-Look), keine Pille.
       Gilt für die GANZE Seite – jeder Button nutzt diesen Wert. */
    --radius-btn: 4px;

    --gap:    1.25rem;
    --gap-lg: 2rem;

    /* Inhalt steht zentriert und in begrenzter Breite – Kästen laufen nur
       dann über die volle Breite, wenn der Inhalt es wirklich braucht
       (z. B. Tabellen, dafür .page-inner--wide). */
    --page-max:  46rem;
    --page-pad:  1rem;
    --header-h:  60px;
}

@media (min-width: 700px) {
    :root { --page-pad: 2rem; }
}

/* Dark Mode: dieselben Rollen, dunklere Flächen. Beide Signale bedienen –
   Systemvorgabe und die ausdrückliche Auswahl aus dem Profil. */
:root[data-theme="dark"] {
    --app-bg:      var(--vf-slate-grey);
    --card-bg:     var(--vf-grey);
    --nd-bg:       var(--vf-grey);
    --nd-hover:    var(--vf-slate-grey);
    --input-bg:    var(--vf-slate-grey);
    --card-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
    --ok:          var(--vf-success-dk);
    --err:         var(--vf-red-text);
    --accent-hover: var(--vf-red-text);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --app-bg:      var(--vf-slate-grey);
        --card-bg:     var(--vf-grey);
        --nd-bg:       var(--vf-grey);
        --nd-hover:    var(--vf-slate-grey);
        --input-bg:    var(--vf-slate-grey);
        --card-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
        --ok:          var(--vf-success-dk);
        --err:         var(--vf-red-text);
        --accent-hover: var(--vf-red-text);
    }
}

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

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

body.app {
    font-family: var(--vf-font);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    background: var(--app-bg);
    color: var(--fg);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

/* Links sind rot und NIE unterstrichen – beim Überfahren werden sie
   dunkler. Gilt auf allen Seiten, auch für .link-arrow und .btn--link. */
a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.12s ease;
}

a:hover { color: var(--accent-hover); }

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

/* Nur für Screenreader – z. B. Beschriftungen in Tabellen-Checkboxen. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.text-muted { color: var(--fg-muted); }

/* Sichtbarer Fokus für Tastaturbedienung – nie wegoptimieren. */
:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/* ==========================================================================
   2. Layout
   ========================================================================== */

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--header-h);
    padding: 0 var(--page-pad);
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
}

/* Ab Tablet rücken Logo und Icon-Menü etwas weiter in die Mitte.
   Auf schmalen Displays bleibt es beim normalen Seitenrand. */
@media (min-width: 768px) {
    .topbar { padding: 0 3rem; }
}

/* Links steht nur das Logo – es ist zugleich der Weg zur Startseite. */
.topbar-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    border-radius: var(--radius-sm);
}

.topbar-brand img { display: block; }

/* --- Icon-Menü rechts ------------------------------------------------------ */

.icon-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.icon-form { display: inline-flex; }

.icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    color: var(--fg-muted);
    /* Zurücksetzen, weil .icon-btn für <a> UND <button> genutzt wird. */
    background: none;
    border: 0;
    appearance: none;
    font: inherit;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.icon-btn:link,
.icon-btn:visited { color: var(--fg-muted); }

.icon-btn:hover,
.icon-btn:focus-visible {
    background: var(--app-bg);
    color: var(--accent);
}

.icon-btn.is-active { color: var(--accent); }

.icon-btn svg {
    width: 24px;
    height: 24px;
    display: block;
}

/* Kurzer Hinweis, wofür das Icon steht (Hover und Tastaturfokus). */
.icon-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--vf-slate-grey);
    color: var(--vf-white);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 10;
}

.icon-btn:hover::after,
.icon-btn:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

/* Auf Touch-Geräten gibt es kein Hover – dort stört der Hinweis nur. */
@media (hover: none) {
    .icon-btn::after { display: none; }
}

/* --- Hinweis auf offene Vorgänge ("hier wartet was auf dich") ---------------
   Roter Kreis mit Anzahl, wie die Mitteilungszähler auf dem Telefon. Steht in
   der Menüzeile rechts; mit .nav-badge--float klebt er oben rechts am Symbol.
   Gefüllt wird er in includes/notifications.php.
   ------------------------------------------------------------------------- */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--vf-white);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* In der Menüzeile klebt der Kreis klein und hochgestellt am Wortende –
   nicht am rechten Rand, damit der Bezug zum Eintrag klar bleibt. */
.nd-row .nav-badge {
    margin-left: -0.55rem;          /* frisst einen Teil der Zeilenlücke */
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 0.62rem;
    transform: translateY(-0.5em);
}

/* Am Symbol: oben rechts überlappend. Der Ring in Kartenfarbe hält den Kreis
   auch über dunklen Symbolen erkennbar. */
.nav-badge--float {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.68rem;
    box-shadow: 0 0 0 2px var(--card-bg);
}

/* --- Menü-Schublade --------------------------------------------------------
   Ein Knopf oben rechts ("Menü"), dahinter eine Spalte, die aus der rechten
   Seite von oben nach unten herauswächst. Links daneben bleibt immer ein
   Streifen der Seite frei – ein Tippen dorthin schließt wieder.
   Markup: includes/header.php · Verhalten: assets/js/navdrawer.js
   ------------------------------------------------------------------------- */

/* Der Knopf: Burger plus das Wort "Menü", ohne eigene Fläche. */
.nd-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 44px;
    padding: 0 0.7rem;
    border: 0;
    border-radius: var(--radius-btn);
    background: none;
    appearance: none;
    font: inherit;
    font-weight: 500;
    color: var(--fg-muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.nd-btn:hover,
.nd-btn:focus-visible,
.nd-btn.is-open {
    /* Keine Fläche: sonst säße ein grauer Klotz in der sonst einfarbigen
       Kopfzeile. Die Rückmeldung macht allein die Farbe. */
    color: var(--accent);
}

.nd-btn svg { width: 24px; height: 24px; display: block; }

.nd-btn-text { line-height: 1; }

/* Auf sehr schmalen Displays reicht das Symbol – der Platz oben ist knapp. */
@media (max-width: 380px) {
    .nd-btn-text { display: none; }
}

/* Bei offener Schublade stehen die Hinweise an den Einträgen selbst. */
.nd-btn.is-open .nav-badge { opacity: 0; }

/* Die drei Striche werden bei offenem Menü zum X. */
.hmenu-burger path {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.22s ease, opacity 0.16s ease;
}

.nd-btn.is-open .hb-top { transform: translateY(51.75px) rotate(45deg); }
.nd-btn.is-open .hb-mid { opacity: 0; }
.nd-btn.is-open .hb-bot { transform: translateY(-52.31px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
    .hmenu-burger path { transition: none; }
}

/* --- Die Schublade selbst --------------------------------------------------- */

.navdrawer {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;   /* zu: die Seite darunter bleibt bedienbar */
    /* Die geschlossene Schublade steht rechts NEBEN dem Bild – ohne das hier
       bekäme die Seite dadurch einen waagerechten Rollbalken. */
    overflow: hidden;
}

/* Der freie Streifen links: fängt Klicks ab und schließt. Vollständig
   unsichtbar – die Seite daneben bleibt so hell, wie sie ist. */
.nd-backdrop {
    position: absolute;
    inset: 0;
    background: none;
    pointer-events: auto;
}

/* Hinter der Schublade soll die Seite nicht mitscrollen. */
body.nd-locked { overflow: hidden; }

.nd-panel {
    position: absolute;
    top: var(--header-h);
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    /* Bewusst schmal gehalten – 10 % weniger als die erste Fassung. */
    width: min(20.7rem, calc(100vw - 3.5rem));
    background: var(--nd-bg);
    border-left: 1px solid var(--border);
    box-shadow: -12px 0 32px rgb(0 0 0 / 0.12);
    pointer-events: auto;

    /* Fährt von rechts herein und steht dann fest am Rand – über die volle
       Höhe unterhalb der Kopfzeile. Links bleibt ein Streifen der Seite
       sichtbar und anklickbar (schließt). */
    transform: translateX(100%);
    /* Zu ist zu: sonst bliebe der Inhalt für Vorlesehilfen und die
       Tabulatortaste erreichbar, obwohl er neben dem Bild steht. */
    visibility: hidden;
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0.26s;
}

.navdrawer.is-open .nd-panel {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
    .nd-panel { transition: none; }
}

/* --- Suche ----------------------------------------------------------------- */

/* Das Feld selbst ist der gewohnte Baustein .search-field (Lupe links,
   X im Kreis rechts, sobald etwas drinsteht) – hier nur der Rahmen darum. */
.nd-search {
    flex: 0 0 auto;
    padding: 0.75rem 0.75rem 0.5rem;
}

/* --- Inhalt ---------------------------------------------------------------- */

.nd-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.25rem 0.75rem 0.75rem;
}

.nd-headrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0.6rem 0 0.45rem;
}

.nd-headrow .nd-head { margin: 0; }

/* Auge rechts in der Zeile: blendet die Liste darunter aus. Gleiche Größe
   wie der Stern an den Einträgen, damit die rechte Kante ruhig bleibt. */
.nd-eye {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--fg-muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.12s ease;
}

.nd-eye span { display: inline-flex; }
.nd-eye svg { width: 18px; height: 18px; display: block; }
.nd-eye:hover { color: var(--accent); }

/* Ausgeblendet: das durchgestrichene Auge steht für "wieder einblenden". */
.nd-eye .nd-eye-off,
.nd-eye.is-off .nd-eye-on { display: none; }
.nd-eye.is-off .nd-eye-off { display: inline-flex; }

.nd-head {
    margin: 0.6rem 0 0.45rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

/* Der graue Balken zwischen den Abschnitten. */
.nd-rule {
    height: 1px;
    margin: 0.75rem 0;
    background: var(--border);
}

.nd-empty {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: var(--fg-muted);
}

.nd-empty.is-hidden { display: none; }

.nd-list { display: flex; flex-direction: column; gap: 0.25rem; }

/* Ausgeblendet heißt ausgeblendet: die display-Regeln oben sind sonst
   stärker als das hidden-Attribut, und die Liste bliebe stehen. */
.nd-list[hidden],
.nd-item[hidden],
.nd-group[hidden],
.nd-results[hidden],
.nd-default[hidden] { display: none; }

/* --- Eine Zeile ------------------------------------------------------------
   Kleine Kachel mit Symbol, Name und Winkel. Der Stern liegt rechts darüber,
   deshalb hält die Zeile dort Platz frei.
   ------------------------------------------------------------------------- */

.nd-item { position: relative; }

.nd-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.6rem 0.65rem;
    /* Derselbe feine Rahmen wie an den Favoriten-Kacheln – keine Füllung,
       die Zeilen stehen auf der Farbe der Kopfzeile. */
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    background: none;
    appearance: none;
    font: inherit;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    color: var(--fg);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.nd-row:link,
.nd-row:visited { color: var(--fg); }

.nd-row:hover,
.nd-row:focus-visible {
    background: var(--nd-hover);
    color: var(--accent);
}

.nd-row.is-active {
    color: var(--accent);
    border-color: var(--accent);
}

/* Reihenfolge rechts: erst der Stern, ganz außen der Winkel. Beide sitzen
   fest am rechten Rand der Zeile, deshalb hält der Text dort Platz frei. */
.nd-item:has(.nd-star) .nd-row { padding-right: 3.8rem; }

.nd-item:has(.nd-star) .nd-chev {
    position: absolute;
    top: 50%;
    right: 0.65rem;
    transform: translateY(-50%);
}

.nd-ico {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--fg-muted);
}

.nd-ico svg { width: 20px; height: 20px; display: block; }

.nd-row:hover .nd-ico,
.nd-row.is-active .nd-ico { color: inherit; }

.nd-label {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

/* Herkunft eines Suchtreffers ("Kontrollzentrum"), damit gleichnamige
   Punkte auseinanderzuhalten sind. */
.nd-parent {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--fg-muted);
}

.nd-chev {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--fg-muted);
}

.nd-chev svg { width: 14px; height: 14px; display: block; }

.nd-chev--down { transition: transform 0.18s ease; }

/* --- Aufklappbarer Bereich -------------------------------------------------- */

.nd-group { display: flex; flex-direction: column; gap: 0.25rem; }
.nd-group[hidden] { display: none; }

.nd-group.is-open > .nd-row .nd-chev--down { transform: rotate(180deg); }

.nd-sub {
    display: none;
    flex-direction: column;
    gap: 0.25rem;
    /* Die Unterpunkte hängen sichtbar am Bereich darüber. */
    margin-left: 0.85rem;
    padding-left: 0.7rem;
    border-left: 2px solid var(--border);
}

.nd-group.is-open .nd-sub { display: flex; }

.nd-sub .nd-row { font-weight: 400; }

/* --- Stern ------------------------------------------------------------------ */

.nd-star {
    position: absolute;
    top: 50%;
    right: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--fg-muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.12s ease, transform 0.12s ease;
}

.nd-star svg { width: 16px; height: 16px; display: block; }

.nd-star:hover { color: var(--accent); }

/* Gemerkt: rot und ausgefüllt. */
.nd-star.is-on { color: var(--accent); }
.nd-star.is-on svg { fill: currentColor; }

.nd-star:active { transform: translateY(-50%) scale(0.88); }

/* --- Favoriten-Kacheln ------------------------------------------------------ */

.nd-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Gleich hohe Reihen: eine Kachel mit Herkunftszeile darf die daneben
       nicht kürzer aussehen lassen. */
    grid-auto-rows: 1fr;
    gap: 0.5rem;
}

.nd-tile {
    position: relative;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* Umsortieren: lange drücken, dann ziehen (assets/js/navdrawer.js). Solange
   gezogen wird, darf der Finger die Leiste nicht scrollen. */
.navdrawer.nd-dragging .nd-scroll { touch-action: none; overflow: hidden; }

.nd-tile.is-dragging {
    z-index: 5;
    background: var(--nd-bg);
    border-radius: var(--radius);
    box-shadow: 0 10px 24px rgb(0 0 0 / 0.18);
    transition: none;
    cursor: grabbing;
}

/* Die Stelle, an der die Kachel landen würde. */
.nd-tile.is-drop .nd-tile-link {
    border-color: var(--accent);
    border-style: dashed;
}

.nd-tile-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Von oben aufgebaut statt mittig: so stehen Symbol, Name und die graue
       Zeile in jeder Kachel an derselben Stelle. */
    justify-content: flex-start;
    gap: 0.45rem;
    height: 100%;
    min-height: 4.9rem;
    padding: 0.8rem 0.6rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: none;
    text-align: center;
    text-decoration: none;
    color: var(--fg);
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.nd-tile-link:link,
.nd-tile-link:visited { color: var(--fg); }

/* Beim Überfahren dieselbe Rückmeldung wie an den Zeilen darunter: dezente
   Fläche, roter Text – der Rahmen bleibt grau. */
.nd-tile-link:hover,
.nd-tile-link:focus-visible {
    background: var(--nd-hover);
    color: var(--accent);
}

/* Die gerade geöffnete Seite bleibt am roten Rahmen erkennbar. */
.nd-tile-link.is-active {
    border-color: var(--accent);
    color: var(--accent);
}

.nd-tile-ico { color: var(--fg-muted); height: 26px; }
.nd-tile-ico svg { width: 26px; height: 26px; display: block; }

.nd-tile-link:hover .nd-tile-ico,
.nd-tile-link.is-active .nd-tile-ico { color: inherit; }

.nd-tile-label {
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.25;
}

/* Herkunft der Kachel ("Kontrollzentrum", "Sales Quiz" …) – klein und grau,
   damit zwei Kacheln namens "Dashboard" unterscheidbar bleiben. Die Zeile
   steht auch leer im Markup und hält dort ihren Platz. */
.nd-tile-parent {
    display: block;
    min-height: 0.95rem;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 0.95rem;
    color: var(--fg-muted);
}

/* In der Kachel sitzt der Stern oben rechts, nicht mittig. */
.nd-tile .nd-star {
    top: 0.15rem;
    right: 0.15rem;
    transform: none;
}

.nd-tile .nd-star:active { transform: scale(0.88); }

/* --- Fußzeile --------------------------------------------------------------- */

.nd-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-top: 1px solid var(--border);
}

.nd-me {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.3rem;
    border-radius: var(--radius-btn);
    text-decoration: none;
    color: var(--fg);
}

.nd-me:link,
.nd-me:visited { color: var(--fg); }
.nd-me:hover { color: var(--accent); }

.nd-me-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nd-foot-form { margin: 0; display: inline-flex; }

.nd-foot-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--radius-btn);
    background: none;
    appearance: none;
    color: var(--fg-muted);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.nd-foot-btn svg { width: 20px; height: 20px; display: block; }

.nd-foot-btn:hover,
.nd-foot-btn:focus-visible {
    background: var(--nd-hover);
    color: var(--accent);
}

.nd-foot-btn--danger:hover,
.nd-foot-btn--danger:focus-visible {
    background: rgb(230 0 0 / 0.08);
    color: var(--accent);
}

/* Sonne/Mond: sichtbar ist immer das Ziel des Klicks – im Hellen der Mond,
   im Dunklen die Sonne. Dieselbe Dreier-Regel wie bei img-light/img-dark:
   erst der Normalfall, dann die ausdrückliche Einstellung, zuletzt die
   Gerätevorgabe für "Wie das Gerät". */
.nd-theme-btn .nd-theme-light { display: none; }
.nd-theme-btn .nd-theme-dark  { display: block; }

:root[data-theme="dark"] .nd-theme-btn .nd-theme-dark  { display: none; }
:root[data-theme="dark"] .nd-theme-btn .nd-theme-light { display: block; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .nd-theme-btn .nd-theme-dark  { display: none; }
    :root:not([data-theme="light"]) .nd-theme-btn .nd-theme-light { display: block; }
}

/* Kurzes Einblenden – genutzt von den Aufklappmenüs (.dropdown-panel). */
@keyframes hmenu-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.page {
    flex: 1;
    width: 100%;
    padding: var(--gap-lg) var(--page-pad);
}

.page-inner {
    width: 100%;
    max-width: var(--page-max);
    margin: 0 auto;
}

/* Für Seiten mit breiten Tabellen (z. B. Benutzerverwaltung). */
.page-inner--wide { max-width: 76rem; }

/* Schmaler, zentrierter Textblock – wie auf der Anmeldeseite. */
.narrow { max-width: 34rem; margin: 0 auto; }

.page-head {
    display: flex;
    /* NICHT umbrechen: "Zurück" bleibt neben dem Titel – auch wenn der Titel
       lang ist bricht dann sein Text um, statt den Link nach unten zu drücken. */
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gap);
}

.page-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    flex: 1 1 auto;
    min-width: 0;   /* darf schrumpfen, sonst schiebt der Titel den Link raus */
}

/* "Zurück" in der Titelzeile: mittig auf Höhe der ersten Titelzeile. */
.page-head > .back-link {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: calc(clamp(1.5rem, 3vw, 2rem) * 1.2);
}

.sitefoot {
    padding: 1.5rem var(--page-pad);
    color: var(--fg-muted);
    font-size: 0.85rem;
    text-align: center;
}

/* Vertikaler Abstand zwischen Blöcken. */
.stack {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.grid { display: grid; gap: var(--gap); }

@media (min-width: 900px) {
    .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

.section-title {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

/* ==========================================================================
   3. Bausteine
   ========================================================================== */

.card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
    padding: clamp(1.25rem, 3vw, 2rem);
}

.card-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.card-subtitle {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.card-title + .text-muted,
.card-subtitle + .text-muted { margin-bottom: 1rem; }

/* Schmale Karten stehen immer mittig auf der Seite. */
.card--narrow { max-width: 40rem; margin-left: auto; margin-right: auto; }

/* Regelkarte des Quiz-Starts: etwas breiter als .card--narrow, damit die
   Highlights nicht so gedrängt wirken. */

/* Hervorgehobene Karte: dünner Rahmen ringsum statt Balken an der Seite. */
.card--accent { border: 1px solid var(--accent); }

/* Hero-Karte: Text links, Bild rechts (wie in der Vorlage). */
.card--hero {
    display: grid;
    gap: var(--gap);
    align-items: center;
}

@media (min-width: 700px) {
    .card--hero { grid-template-columns: 1fr auto; }
}

.hero-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    margin: 0.5rem 0;
}

.hero-text {
    color: var(--fg-muted);
    margin-bottom: 1rem;
}

/* --- Begrüßung auf der Startseite -------------------------------------------
   Nutzt die volle Inhaltsbreite (beginnt dadurch weiter links) und steht
   etwas tiefer, damit die Seite nicht direkt unter der Kopfzeile anfängt.
   ------------------------------------------------------------------------- */
.greeting { padding-top: clamp(0.25rem, 2vh, 1rem); }

.greeting-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 400;
    letter-spacing: -0.015em;
    margin-bottom: 0.4rem;
}

.greeting-text {
    color: var(--fg-muted);
    margin-bottom: 2rem;
}

/* --- Kleine Tour auf der Startseite -----------------------------------------
   Zu jedem Einstieg gehört ein geschwungener Pfeil und ein kurzer Satz am
   anderen Ende. Der Pfeil selbst ist ein SVG, das immer nach rechts oben
   zeigt; die Richtung macht hier die Drehung.

   Pfeil und Text schweben: sie hängen absolut an ihrem Ziel (bzw. fest an
   der Kopfzeile) statt im Textfluss zu stehen. Dadurch zeigen sie auf jeder
   Bildschirmbreite auf dieselbe Stelle und schieben nichts weg.
   ------------------------------------------------------------------------- */
/* Beide Würfel nebeneinander. Der Platz oben und unten gehört den
   schwebenden Hinweisen – die stehen nicht im Fluss. */
.tour-dice {
    display: flex;
    align-items: flex-start;
    gap: clamp(1.5rem, 9vw, 4.5rem);
    margin-top: clamp(2.5rem, 9vh, 5rem);
    margin-bottom: clamp(5.5rem, 18vh, 9rem);
}

/* Nur so breit wie der Würfel – daran hängt der schwebende Hinweis. */
.tour-row {
    position: relative;
    width: max-content;
}

.tour-hint {
    position: absolute;
    left: 60%;
    display: flex;
    gap: 0.9rem;
    width: max-content;
    /* So breit wie rechts noch Platz ist – der Satz soll erst umbrechen,
       wenn es wirklich eng wird. */
    max-width: min(24rem, calc(100vw - 12rem));
    pointer-events: none;
}

/* Innerhalb des schwebenden Hinweises gibt die Box die Breite vor. */
.tour-hint .tour-note {
    max-width: none;
    text-wrap: balance;
}

/* Quiz: Pfeil kommt von oben rechts herunter auf den Würfel. Der Text
   steht am Schwanz, also oben rechts – der Ausgleich hebt ihn auf dessen
   Höhe (im gedrehten SVG sitzt der Schwanz knapp unter der Oberkante). */
.tour-row--quiz .tour-hint {
    bottom: calc(100% + 0.15rem);
    align-items: flex-start;
}

.tour-row--quiz .tour-note { margin-top: -0.55rem; }

/* Empfehlen: Pfeil kommt von unten rechts hoch auf den Würfel – Text
   entsprechend unten rechts. */
.tour-row--share .tour-hint {
    top: calc(100% + 0.15rem);
    align-items: flex-end;
}

.tour-row--share .tour-note { margin-bottom: 0.15rem; }

/* Hinweis auf das Menü: klebt unter dem Menüknopf oben rechts, der Pfeil
   zeigt von dort schräg hoch aufs Symbol. */
.tour-menu {
    position: fixed;
    top: calc(var(--header-h) + 0.5rem);
    right: var(--page-pad);
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none;
}

/* Der Text hängt unter dem Pfeil. Der Vorsprung nach oben lässt Platz für
   den Schwanz, der durch die Drehung unter dem Kasten des Pfeils endet. */
.tour-menu .tour-note {
    margin-top: 1.2rem;
    text-align: right;
    max-width: 12rem;
}

.tour-note {
    display: block;
    color: var(--fg-muted);
    font-size: 0.95rem;
    line-height: 1.4;
    max-width: 15rem;
    transform: rotate(-2deg);
}

/* Der Satz zum Quiz ist der wichtigste – der darf größer sein. */
.tour-note--lead {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    color: var(--fg);
}

/* --- Tour aus: Beschriftung statt Pfeil -------------------------------------
   Ohne Tour verschwinden Pfeile und Sätze; damit die Würfel trotzdem
   erklärt sind, steht dann eine kurze Beschriftung darunter.
   ------------------------------------------------------------------------- */
.tour-label {
    display: none;
    margin-top: 0.6rem;
    color: var(--fg-muted);
    font-size: 0.9rem;
    text-align: center;
}

body.tour-hidden .tour-hint,
body.tour-hidden .tour-menu { display: none; }

body.tour-hidden .tour-label { display: block; }

/* Ohne den Menühinweis braucht die Überschrift auch keinen Platz rechts. */
body.tour-hidden .greeting-title { padding-right: 0; }

/* Ein-/Ausschalter unten rechts – rot, klein, wackelt dezent. */
.tour-toggle {
    position: fixed;
    right: var(--page-pad);
    bottom: calc(var(--page-pad) + 1.15rem + env(safe-area-inset-bottom, 0px));
    z-index: 45;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    font-size: 1.05rem;
    cursor: pointer;
    animation: tour-toggle-wiggle 3.2s ease-in-out infinite;
}

.tour-toggle:hover,
.tour-toggle:focus-visible { text-decoration: underline; }

@keyframes tour-toggle-wiggle {
    0%, 82%, 100% { transform: rotate(0deg); }
    86% { transform: rotate(-4deg); }
    90% { transform: rotate(4deg); }
    94% { transform: rotate(-3deg); }
    97% { transform: rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
    .tour-toggle { animation: none; }
}

/* Die Würfel sind die Knöpfe – einer fürs Quiz, einer fürs Empfehlen. */
.dice-launch {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.dice-launch img {
    display: block;
    width: clamp(4.5rem, 16vw, 7rem);
    height: auto;
}

.dice-launch:hover,
.dice-launch:focus-visible { transform: scale(1.05); }

.tour-arrow {
    display: block;
    flex: none;
    width: 6.5rem;
    color: var(--accent);
}

.tour-arrow-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.28));
}

/* Zeigt von unten steil hoch aufs Menüsymbol. */
.tour-arrow--menu {
    width: 4rem;
    margin-right: 0.35rem;
    transform: rotate(-48deg);
}

/* Quiz: um 180° gedreht – Schwanz oben rechts beim Text, Spitze unten
   links auf dem Würfel. */
.tour-arrow--quiz {
    width: clamp(3.5rem, 12vw, 5.5rem);
    transform: scale(-1, -1);
}

/* Empfehlen: gespiegelt – Schwanz unten rechts, Spitze oben links. */
.tour-arrow--share {
    width: clamp(3.5rem, 12vw, 5.5rem);
    transform: scaleX(-1);
}

/* --- Teilen-Kreise am Würfel ------------------------------------------------
   Statt eines Klappmenüs springen drei Kreise rechts aus dem Würfel heraus –
   gleiche Optik wie die Kacheln, nur das Symbol drin.
   ------------------------------------------------------------------------- */
.share-pop {
    position: absolute;
    top: 50%;
    left: calc(100% + 0.6rem);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.share-dot {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--vf-white);
    color: var(--vf-slate-grey);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    /* Zustand „im Würfel": klein und nach links geschoben. */
    opacity: 0;
    transform: translateX(-2.2rem) scale(0.3);
    transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.35);
}

/* Im Dark Mode andersherum: dunkler Kreis, helles Symbol. */
:root[data-theme="dark"] .share-dot {
    background: var(--vf-grey);
    color: var(--vf-white);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .share-dot {
        background: var(--vf-grey);
        color: var(--vf-white);
    }
}

.share-dot svg {
    width: 1.7rem;
    height: 1.7rem;
    display: block;
}

/* Aufgeklappt: einer nach dem anderen heraus. */
.share-pop.open .share-dot {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.share-pop.open .share-dot:nth-child(2) { transition-delay: 0.06s; }
.share-pop.open .share-dot:nth-child(3) { transition-delay: 0.12s; }

.share-dot:hover,
.share-dot:focus-visible { transform: scale(1.08); }

/* Beschriftung nur als kurzer Hinweis unter dem Kreis. */
.share-dot::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--vf-slate-grey);
    color: var(--vf-white);
    font-size: 0.75rem;
    line-height: 1.5;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 4px);
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.share-dot:hover::after,
.share-dot:focus-visible::after { opacity: 1; }

/* Wer weniger Bewegung möchte, bekommt sie nur eingeblendet. */
@media (prefers-reduced-motion: reduce) {
    .share-dot {
        transform: none;
        transition: opacity 0.2s ease;
    }

    .share-dot:hover,
    .share-dot:focus-visible { transform: none; }
}

/* Schmale Geräte: die Würfel bleiben nebeneinander, nur alles etwas
   kleiner. Der Menühinweis hängt oben rechts – die Begrüßung rückt dafür
   ein Stück nach unten, damit sich beides nicht überlagert. */
@media (max-width: 40rem) {
    /* Der Menühinweis schwebt – er darf die Begrüßung nicht nach unten
       schieben. Stattdessen bricht die Überschrift vorher um. */
    .greeting-title { padding-right: 11rem; }

    .tour-menu .tour-note {
        font-size: 0.8rem;
        max-width: 10rem;
    }

    .tour-hint {
        left: 45%;
        max-width: max(9rem, calc(100vw - 10rem));
    }

    .tour-note { font-size: 0.85rem; }
    .tour-note--lead { font-size: 0.95rem; }
    .tour-label { font-size: 0.85rem; }
    .tour-toggle { font-size: 0.95rem; }

    .share-pop { left: calc(100% + 0.4rem); gap: 0.35rem; }

    .share-dot {
        width: 2.2rem;
        height: 2.2rem;
    }

    .share-dot svg {
        width: 1.45rem;
        height: 1.45rem;
    }
}

.greeting-actions .btn {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.greeting-actions .btn svg {
    position: absolute;
    right: 1rem;
    width: 1.15rem;
    height: 1.15rem;
    flex: none;
}

.greeting-intro-text {
    color: var(--fg-muted);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* --- Bilder mit eigener Dark-Mode-Fassung -----------------------------------
   theme_image_html() gibt beide Dateien aus ("bild.png" + "bild-dark.png");
   welche zu sehen ist, entscheidet sich hier – inklusive der Nutzer-
   Einstellung aus dem Profil (data-theme), nicht nur der Systemvorgabe.
   Der img-Vorsatz ist Absicht: Die Motive bringen eigene display-Regeln mit
   (.result-trophy, .quiz-intro-visual), die sonst weiter unten gewinnen.
   ------------------------------------------------------------------------- */
img.img-dark { display: none; }

:root[data-theme="dark"] img.img-light { display: none; }
:root[data-theme="dark"] img.img-dark  { display: block; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) img.img-light { display: none; }
    :root:not([data-theme="light"]) img.img-dark  { display: block; }
}

.hero-visual { justify-self: center; }

/* Gelbes Label wie "Nur online mit … Cashback" in der Vorlage. */
.badge {
    display: inline-block;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: var(--vf-lemon-yellow);
    color: var(--vf-black);
    font-weight: 700;
    font-size: 0.9rem;
}

.pill {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: var(--app-bg);
    color: var(--fg-muted);
    font-size: 0.78rem;
    font-weight: 600;
    font-style: normal;
    white-space: nowrap;
}

.pill--accent   { background: var(--accent); color: var(--on-accent); }
.pill--active   { background: rgb(168 180 0 / 0.22); color: var(--fg); }
.pill--pending  { background: rgb(235 151 0 / 0.25); color: var(--fg); }
.pill--disabled { background: rgb(230 0 0 / 0.16);   color: var(--fg); }

/* Roter Pfeil-Link – ohne Linie, beim Überfahren dunkler. */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
}

.link-arrow:hover { color: var(--accent-hover); }

/* Schlichte Variante – gleiche Optik, aber nicht fett. */
.link-arrow--plain { font-weight: 400; }

.link-arrow::after {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.link-arrow:hover::after { transform: rotate(45deg) translate(2px, -2px); }

/* --- Buttons --------------------------------------------------------------- */

/* Einheitliche Button-Form für die GANZE Seite: leicht abgerundetes
   Rechteck, kein Pillen-Look. Neue Buttons immer mit .btn aufbauen. */
/* Ein ausgeblendeter Knopf bleibt ausgeblendet: .btn setzt display, und eine
   Klassenregel schlägt das [hidden] des Browsers (siehe .dock-btn[hidden]). */
.btn[hidden] { display: none; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;                 /* bequem per Finger treffbar */
    padding: 0.7rem 2rem;
    border: 2px solid transparent;
    border-radius: var(--radius-btn);
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 400;                 /* Vodafone-Buttons sind nicht fett */
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    /* Die Farbe beim Überfahren blendet weich ein, statt hart umzuspringen. */
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn--primary {
    background: var(--accent);
    color: var(--on-accent);
}

.btn--primary:hover,
.btn--primary:focus-visible {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    /* Explizit, sonst gewinnt die globale a:hover-Regel (dunkelroter Text
       auf dunkelrotem Grund = unsichtbar), da .btn ein <a> sein kann. */
    color: var(--on-accent);
}

/* Zurückhaltender Knopf: klarer Umriss in Textfarbe, beim Überfahren dreht
   er sich um (gefüllt, Schrift in Flächenfarbe). Funktioniert in beiden
   Farbschemata, weil beide Werte Tokens sind. */
/* Rahmen und Hover-Fläche in einem eigenen Ton (nicht in der Textfarbe):
   das gedämpfte Grau des Modus (--btn-ghost-edge = --fg-muted). Auf Hell ist
   das Vodafone Grey, auf Dunkel dessen helle Entsprechung – ein dunkles Grau
   wäre auf der dunklen Karte praktisch unsichtbar. */
.btn--ghost {
    background: transparent;
    color: var(--fg);
    border-color: var(--btn-ghost-edge);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
    background: var(--btn-ghost-edge);
    color: var(--card-bg);
}

.btn--danger {
    background: transparent;
    color: var(--err);
    border-color: currentColor;
}

.btn--danger:hover,
.btn--danger:focus-visible {
    background: var(--err);
    color: var(--vf-white);
    border-color: var(--err);
}

/* Textknopf sieht aus wie ein Link: ohne Linie, beim Überfahren dunkler. */
.btn--link {
    background: none;
    color: var(--accent);
    padding: 0.5rem 0;
    min-height: 0;
    font-weight: 400;
    text-decoration: none;
}

.btn--link:hover { color: var(--accent-hover); }

.btn--sm {
    min-height: 38px;
    padding: 0.35rem 1.1rem;
    font-size: 0.9rem;
}

.btn--block { width: 100%; }

.btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* --- Runde Icon-Knöpfe (in Tabellen) ----------------------------------------
   In Listen stehen keine Textknöpfe, sondern Icons im Kreis. Standard ist
   der Umriss; --solid (gefüllt) bleibt endgültigen Aktionen vorbehalten.
   ------------------------------------------------------------------------- */
.icon-action {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--fg-muted);
    /* Zurücksetzen, weil .icon-action für <a> UND <button> genutzt wird –
       sonst steht der Kurzhinweis im Knopf in der Systemschrift. */
    appearance: none;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
}

/* Grau wie der Filterknopf – beim Überfahren rot (nur Umriss/Icon). */
.icon-action:hover,
.icon-action:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
}

.icon-action svg { width: 18px; height: 18px; display: block; }

/* Größere, quadratische Variante – z. B. neben einem .btn (48px hoch), damit
   beide gleich hoch sind statt der kleinen Standardgröße. */
.icon-action--lg { width: 48px; height: 48px; }
.icon-action--lg svg { width: 22px; height: 22px; }

/* Löschen: gefüllt in Vodafone Rot. */
.icon-action--solid {
    background: var(--accent);
    border-color: transparent;
    color: var(--on-accent);
}

.icon-action--solid:hover,
.icon-action--solid:focus-visible {
    background: var(--accent-hover);
    border-color: transparent;
    color: var(--on-accent);
}

/* Kurzhinweis – exakt wie bei den Kopfzeilen-Icons (.icon-btn::after). */
.icon-action::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--vf-slate-grey);
    color: var(--vf-white);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 20;
}

.icon-action:hover::after,
.icon-action:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (hover: none) {
    .icon-action::after { display: none; }
}

/* --- Meldungen -------------------------------------------------------------- */

/* --- Meldungen & Hinweise ---------------------------------------------------
   EINE Komponente für alles, was der Seite etwas mitteilt: zierlicher Kasten,
   dünner Rahmen, links das Info-Icon. Standard ist Aqua Blue aus der
   Sekundärpalette; nur echte Fehler werden rot.

       <p class="hint"><svg …/><span>…</span></p>
       <p class="hint hint--error" …>

   Flash-Meldungen bekommen zusätzlich data-autohide="5000" – app.js blendet
   sie dann nach fünf Sekunden aus.
   ------------------------------------------------------------------------- */
.hint {
    display: flex;
    align-items: center;      /* Icon auf einer Höhe mit dem Text */
    gap: 0.7rem;
    /* Luft nach unten, damit der folgende Text nicht am Kasten klebt.
       In .stack regelt der gap den Abstand – dort wieder abschalten. */
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--vf-aqua-blue);
    border-radius: var(--radius-sm);
    background: rgb(0 176 202 / 0.08);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--fg);
    transition: opacity 0.4s ease;
}

/* display:flex oben schlägt sonst das hidden-Attribut: ein ausgeblendeter
   Hinweis bliebe als leerer Kasten stehen (z. B. die Fehlerzeile in den
   Modals, die erst bei einem Problem gefüllt wird). */
.hint[hidden] { display: none; }

.hint svg {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    color: var(--vf-turquoise);
}

/* Bestätigung – Spring Green aus der Sekundärpalette. Das Icon nimmt den
   dunkleren Statusgrünton, sonst wäre der dünne Strich auf Hell kaum zu
   erkennen (Spring Green hat nur rund 2:1 Kontrast auf Weiß). */
.hint--success {
    border-color: var(--vf-spring-green);
    background: rgb(168 180 0 / 0.12);
}

.hint--success svg { color: var(--vf-success); }

.hint--error {
    border-color: var(--err);
    background: rgb(230 0 0 / 0.06);
}

.hint--error svg { color: var(--err); }

/* Wird von app.js gesetzt, kurz bevor die Meldung entfernt wird. */
.hint.is-fading { opacity: 0; }

.stack > .hint { margin-bottom: 0; }

/* Meldung mit Schaltfläche am rechten Rand. */
.hint--action { justify-content: space-between; }
.hint--action > span { flex: 1; }

/* Dark Mode: hellerer Türkiston, damit das Icon auf Dunkel trägt. */
:root[data-theme="dark"] .hint svg { color: var(--vf-turquoise-dark); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .hint svg { color: var(--vf-turquoise-dark); }
}

:root[data-theme="dark"] .hint--error svg { color: var(--err); }
:root[data-theme="dark"] .hint--success svg { color: var(--vf-success-dk); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .hint--success svg { color: var(--vf-success-dk); }
}

/* Waagerechte Trennlinie innerhalb einer Karte. */
.rule {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 1.5rem 0;
}

/* --- Kacheln ---------------------------------------------------------------- */

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--gap);
}

.tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 1.25rem;
    min-height: 11rem;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    color: var(--fg);
    text-align: center;
    text-decoration: none;
    transition: box-shadow 0.15s ease;
}

.tile:hover { box-shadow: 0 6px 20px rgb(0 0 0 / 0.12); }

.tile-icon {
    display: block;
    color: var(--fg-muted);
}

.tile-icon svg { width: 64px; height: 64px; display: block; }

.tile-group {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-muted);
}

.tile-title {
    font-size: 1.2rem;
    font-weight: 400;
}

/* --- Auswahlkacheln auf der Anmeldeseite ------------------------------------ */

.choice {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1.1rem 1.25rem;
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.choice:hover { border-color: var(--accent); }

.choice + .choice { margin-top: 0.75rem; }

.choice-body { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; }

.choice-title { font-weight: 700; font-size: 1.05rem; }

.choice-text { color: var(--fg-muted); font-size: 0.9rem; }

.choice-arrow {
    flex: 0 0 auto;
    width: 0.6rem;
    height: 0.6rem;
    border-top: 2px solid var(--accent);
    border-right: 2px solid var(--accent);
    transform: rotate(45deg);
}

/* ==========================================================================
   4. Formulare
   ========================================================================== */

.form > * + * { margin-top: 0.75rem; }

.form-label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 1rem;
}

.form > .form-label:first-child { margin-top: 0; }

.form-input {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 0.65rem 0.9rem;
    font-family: inherit;
    font-size: 1rem;
    color: var(--fg);
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease;
}

/* display: block oben würde das hidden-Attribut sonst aushebeln. */
.form-input[hidden] { display: none; }

.form-input:focus {
    border-color: var(--accent);
    outline: none;
}

.form-input:disabled {
    color: var(--fg-muted);
    background: var(--app-bg);
    cursor: not-allowed;
}

/* Größerer Abstand vor einer neuen Gruppe von Einstellungen (fetter Zwischentitel). */
.form-label--section { margin-top: 1.75rem; font-size: 1.05rem; }

/* Beschriftung links, Feld rechts – z. B. eine kurze Zahl neben ihrem Label. */
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.setting-row .form-label { margin-top: 0; }

/* Kompaktes Eingabefeld – rechtsbündig, so hoch wie ein Schiebeschalter (.switch-track). */
.form-input--compact {
    width: 3.75rem;
    min-height: 32px;
    padding: 0.35rem 0.5rem;
    text-align: right;
    flex: none;
    /* Eigene Pfeile statt der klobigen System-Spinner. */
    appearance: textfield;
    -moz-appearance: textfield;
}
.form-input--compact::-webkit-inner-spin-button,
.form-input--compact::-webkit-outer-spin-button {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}

select.form-input {
    appearance: none;
    padding-right: 2.5rem;
    /* Pfeil als Inline-SVG (data-URI) – keine zusätzliche Datei nötig. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%234A4D4E' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px 8px;
}

/* Live-Prüfung: grüner Rahmen + Haken, wenn die Eingabe passt; roter Rahmen
   + Ausrufezeichen, solange nicht. Die Symbole stehen als Inline-SVG im
   Hintergrund rechts im Feld – kein zusätzliches Markup nötig.
   Die Farben in den SVGs sind fest, weil data-URIs keine CSS-Variablen
   auswerten können: Rot = Vodafone Red #E60000, Grün = --vf-success. */
.form-input.is-valid,
.form-input.is-invalid {
    padding-right: 3.25rem;
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 24px 24px;
}

.form-input.is-valid {
    border-color: var(--ok);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23008A00'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='m6.8 12.4 3.6 3.6 6.8-7.4'/%3E%3C/svg%3E");
}

.form-input.is-invalid {
    border-color: var(--err);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E60000' d='M12.9 2.6a1 1 0 0 0-1.8 0L.7 21a1 1 0 0 0 .9 1.5h20.8a1 1 0 0 0 .9-1.5z'/%3E%3Cpath fill='%23fff' d='M11 8.5h2v7h-2zM11 17h2v2.2h-2z'/%3E%3C/svg%3E");
}

/* Dark Mode: derselbe Haken, nur heller, damit er auf Dunkel trägt. */
:root[data-theme="dark"] .form-input.is-valid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%234CAF50'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='m6.8 12.4 3.6 3.6 6.8-7.4'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .form-input.is-valid {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%234CAF50'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='m6.8 12.4 3.6 3.6 6.8-7.4'/%3E%3C/svg%3E");
    }
}

/* --- Sechs Einzelfelder für den Anmelde-Code ------------------------------ */

.code-inputs {
    display: flex;
    gap: 0.5rem;
    min-width: 0;
    margin-top: 0.35rem;
    margin-bottom: 0.5rem;
}

.code-input {
    /* flex-basis 0 + min-width 0: die Felder teilen sich den Platz und
       schrumpfen auf schmalen Displays mit, statt überzulaufen.
       max-width hält sie auf dem Desktop in vernünftiger Größe. */
    flex: 1 1 0;
    min-width: 0;
    max-width: 3.75rem;
    width: auto;
    height: 3.5rem;
    min-height: 0;
    padding: 0 0.25rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 500;
}

.form-hint {
    font-size: 0.85rem;
    color: var(--fg-muted);
    margin-top: 0.35rem;
    min-height: 1.2em;
}

.form-hint.is-error { color: var(--err); }
.form-hint.is-ok    { color: var(--ok); }

.form-inline { display: inline-block; }

/* Fußzeile eines Formulars: Knopf rechts, mit etwas Abstand nach oben. */
/* Knöpfe stehen mittig – wie im Bestätigungs-Dialog und in den Fenstern. */
/* Wie bei .btn: .form-foot setzt display, deshalb braucht [hidden] eine
   eigene Zeile – sonst bliebe das Ausblenden wirkungslos. */
.form-foot[hidden] { display: none; }

.form-foot {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

/* Ankreuzfeld, das etwas mehr Luft nach oben braucht (z. B. „Administrator“). */
.form-check-spaced { margin-top: 1.25rem; }

.field-row { display: grid; gap: 0.75rem; }

@media (min-width: 560px) {
    .field-row { grid-template-columns: 1fr 1fr; }
}

/* --- Ankreuzfeld -------------------------------------------------------------
   Eigenes Kästchen statt des Browser-Standards: beim Anhaken springt es kurz
   auf und der Haken zeichnet sich ein. Das echte <input> bleibt erhalten und
   liegt nur unsichtbar darunter – Tastatur und Screenreader unverändert.
   Markup baut checkbox_field() in includes/icons.php.
   ------------------------------------------------------------------------- */
.check {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.check input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.check-box {
    position: relative;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border: 2px solid var(--border);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--on-accent);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.check:hover .check-box { border-color: var(--fg-muted); }

.check input:checked + .check-box {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 4px 10px rgb(230 0 0 / 0.25);
    animation: check-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.check input:focus-visible + .check-box {
    box-shadow: 0 0 0 3px rgb(230 0 0 / 0.25);
}

.check-mark {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 3px;
    opacity: 0;
    transform: scale(0.2);
    transform-origin: center;
}

.check input:checked + .check-box .check-mark {
    animation: check-mark 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both;
}

.check-text { flex: 1; font-size: 0.95rem; }

/* Nur Kästchen, ohne sichtbare Beschriftung (z. B. in der Rechte-Matrix). */
.check--bare { display: inline-flex; justify-content: center; gap: 0; }

@keyframes check-pop {
    0%   { transform: scale(0.55); }
    50%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

@keyframes check-mark {
    0%   { opacity: 0; transform: scale(0.2); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: scale(1); }
}

/* Wer Bewegung reduziert haben will, sieht den Haken trotzdem – nur ohne Sprung. */
@media (prefers-reduced-motion: reduce) {
    .check input:checked + .check-box { animation: none; }
    .check input:checked + .check-box .check-mark {
        animation: none;
        opacity: 1;
        transform: scale(1);
    }
}

.checklist { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }

.checklist--plain { color: var(--fg-muted); }

/* Zweite Zeile am Häkchen: Einordnung („Kontrollzentrum“, „Dashboard“). */
.check-sub { display: block; color: var(--fg-muted); font-size: 0.8rem; }

/* Passwort ein-/ausblenden: Augen-Icon rechts im Feld. */
.input-reveal { position: relative; }

.input-reveal .form-input { padding-right: 3.25rem; }

.input-reveal-btn {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--fg-muted);
    cursor: pointer;
    transition: color 0.12s ease, background-color 0.12s ease;
}

.input-reveal-btn:hover { color: var(--accent); background: var(--app-bg); }

.input-reveal-btn svg { width: 22px; height: 22px; display: block; }

/* Umschalten der beiden Augen-Icons – app.js setzt .is-visible. */
.input-reveal-btn .reveal-hide { display: none; }
.input-reveal-btn.is-visible .reveal-show { display: none; }
.input-reveal-btn.is-visible .reveal-hide { display: block; }

/* --- Info-Blase am Label ----------------------------------------------------
   Kleines Info-Icon, das bei Hover oder Tastaturfokus einen Erklärtext zeigt.

       <span class="info-tip" tabindex="0" data-tip="…">…icon…</span>
   ------------------------------------------------------------------------- */
.label-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.info-tip {
    position: relative;
    display: inline-flex;
    color: var(--fg-muted);
    cursor: help;
}

.info-tip svg { width: 18px; height: 18px; display: block; }

.info-tip:hover, .info-tip:focus-visible { color: var(--vf-turquoise); }

.info-tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: -0.5rem;
    width: max-content;
    max-width: 16rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--vf-slate-grey);
    color: var(--vf-white);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.45;
    white-space: pre-line;
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 30;
}

.info-tip:hover::after,
.info-tip:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

/* Honeypot: für Menschen unsichtbar, für Bots ein verlockendes Feld. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Such- und Filterleiste --------------------------------------------------
   Suchfeld mit Lupe, daneben das Filter-Icon. Die Suche läuft live per
   JavaScript (assets/js/live-search.js) – ohne Absenden.
   ------------------------------------------------------------------------- */
.filterbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: var(--gap);
}

.search-field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

/* Nur die Lupe (direktes Kind) – nicht das Icon im Lösch-Knopf. */
.search-field > svg {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--fg-muted);
    pointer-events: none;
}

.search-field .form-input { padding-left: 2.9rem; padding-right: 2.6rem; }

/* X im Kreis zum Leeren der Suche – erscheint nur, wenn Text drinsteht. */
.search-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: var(--app-bg);
    border: 0;
    border-radius: 50%;
    color: var(--fg-muted);
    cursor: pointer;
    transition: color 0.12s ease, background-color 0.12s ease;
}

.search-clear:hover,
.search-clear:focus-visible { color: var(--fg); background: var(--border); }

.search-clear svg { width: 14px; height: 14px; display: block; }

/* Sichtbar, sobald das Feld nicht mehr nur den Platzhalter zeigt. */
.search-field .form-input:not(:placeholder-shown) ~ .search-clear {
    display: inline-flex;
}

/* --- Freischwebende Such-/Filterleiste ("Dock") ------------------------------
   Suche + Filter liegen nicht mehr in der Karte, sondern schweben unten in
   der Mitte über der Seite. Wiederverwendbar: einfach ein .searchdock mit
   .searchdock-inner ans Ende des Live-Such-Formulars setzen.
   ------------------------------------------------------------------------- */
.searchdock {
    position: fixed;
    left: 50%;
    /* --kb-inset ist die Höhe der Bildschirmtastatur (searchdock.js) – ist sie
       offen, fährt die Leiste darüber, statt sich verdecken zu lassen. */
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem + var(--kb-inset, 0px));
    transform: translateX(-50%);
    z-index: 60;
    width: min(42rem, calc(100vw - 2rem));
    pointer-events: none;   /* nur die Leiste selbst fängt Klicks */
}

.searchdock-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgb(0 0 0 / 0.22);
    pointer-events: auto;
}

/* Ohne Suchfeld gibt es kein .search-field, das per JS auf eine gemessene
   Breite wächst (siehe searchdock.js) – dann schrumpft die Leiste auf ihren
   Inhalt, statt bis zur vollen .searchdock-Breite leer zu bleiben. */
.searchdock-inner:not(:has(.search-field)) { width: fit-content; margin: 0 auto; }

/* Kurzer Hinweis über der Leiste (z. B. „Symbol anheften – auf ein Ergebnis
   klicken"). Sitzt im selben schwebenden Kasten, steht also automatisch direkt
   über der Leiste und bleibt beim Scrollen sichtbar. Wiederverwendbar: ein
   .searchdock-note als erstes Kind des .searchdock. */
.searchdock-note {
    display: flex;
    align-items: center;          /* „Fertig“ mittig zum Text */
    justify-content: space-between;
    gap: 0.75rem;
    /* Genauso breit wie die Leiste darunter (searchdock.js setzt --dock-w) –
       langer Text wird also höher, nicht breiter. */
    width: var(--dock-w, 100%);
    max-width: 100%;
    margin: 0 auto 0.5rem;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgb(0 0 0 / 0.22);
    font-size: 0.88rem;
    pointer-events: auto;
    animation: searchdock-note-in 0.24s cubic-bezier(0.22, 1, 0.36, 1);
    /* Klappt die Suche auf, wächst die Leiste – der Hinweis geht mit. */
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.searchdock-note[hidden] { display: none; }

/* Der Text nimmt den Platz links, der Schließknopf bleibt rechts stehen. */
.searchdock-note > :first-child { min-width: 0; }

/* Kreuz zum Beenden – wie im Fenster-Kopf das gedrehte Plus. */
.searchdock-note-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: var(--radius-btn);
    background: none;
    color: var(--fg-muted);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.searchdock-note-close:hover,
.searchdock-note-close:focus-visible { background: var(--app-bg); color: var(--fg); }

@keyframes searchdock-note-in {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .searchdock-note { animation: none; }
}

/* Im Dock wirkt das Suchfeld randlos – der Rahmen kommt von der Leiste. */
.searchdock .search-field .form-input {
    border-color: transparent;
    background: transparent;
}

.searchdock .search-field .form-input:focus { border-color: var(--accent); }

/* --- Ausklappbare Suche im Dock ----------------------------------------------
   Im Ruhezustand ist die Suche nur eine Lupe neben den anderen Werkzeugen.
   Ein Klick darauf lässt das Suchfeld aus der Lupe herauswachsen; die übrigen
   Werkzeuge werden dabei "verschluckt". searchdock.js baut das Markup dafür
   selbst um (Lupenknopf + .searchdock-tools) und setzt die Breiten in Pixeln,
   damit sie sich weich verändern lassen – jeder Dock bekommt das also von
   allein, ohne Zutun der Seite.
   ------------------------------------------------------------------------- */
.searchdock-inner.is-toggleable {
    /* Breite kommt als Inline-Wert aus dem Skript; zentriert schweben. */
    margin: 0 auto;
    /* Die gemessene Ruhebreite rundet großzügig auf – ohne das hier bliebe der
       Überschuss komplett rechts stehen und die Symbole hingen aus der Mitte. */
    justify-content: center;
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Die Werkzeuge stehen gemeinsam in einem Behälter, damit sie sich als Block
   zusammenschieben lassen. Auf schmalen Displays dürfen sie umbrechen. */
.searchdock-tools {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
    overflow: hidden;
    transition: max-width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.22s ease,
                transform 0.3s ease,
                margin-left 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Ein aufgeklapptes Filtermenü ragt aus der Leiste heraus – dann darf hier
   nichts abgeschnitten werden. */
.searchdock-tools:has(.dropdown.is-open),
.searchdock-tools:has(.dock-btn:hover),
.searchdock-tools:has(.dock-btn:focus-visible),
.searchdock-tools:has(.dropdown-btn:hover),
.searchdock-tools:has(.dropdown-btn:focus-visible) { overflow: visible; }

/* Während des Zuklappens sind die Werkzeuge noch schmal beschnitten – dürften
   sie dabei umbrechen, würde die Leiste kurz in die Höhe springen. */
.searchdock-inner.is-closing > .searchdock-tools { flex-wrap: nowrap; }

/* Ruhezustand: Lupe wie jedes andere Symbol, Suchfeld hat keine Breite.
   Das Feld liegt zwischen Lupe und Werkzeugen; ohne den negativen Rand stünde
   dort die Lücke der Leiste doppelt und die Lupe hinge scheinbar allein. */
.searchdock-inner.is-toggleable > .search-field {
    flex: 0 0 0;
    width: 0;
    margin-right: -0.5rem;
    opacity: 0;
    overflow: hidden;
    transition: opacity 0.18s ease;
}

/* Im ausklappbaren Dock schließt das X die Suche (siehe .searchdock-close) –
   ein zweites x im Feld wäre daneben nur verwirrend. */
.searchdock-inner.is-toggleable .search-clear { display: none !important; }

/* Ausgeklappt ist das Feld die ganze Leiste – ein farbiger Fokusrahmen wirkt
   hier störend (die aufgeklappte Leiste zeigt ja schon, dass geschrieben wird),
   deshalb bleibt der Rahmen ruhig. */
.searchdock-inner.is-toggleable .search-field .form-input:focus { border-color: transparent; }

/* Im Ruhezustand schrumpft nichts – dann darf der Kurzhinweis herausragen.
   Beim Auf- und Zuklappen bleibt der Schnitt bestehen (siehe unten). */
.searchdock-inner:not(.is-open):not(.is-closing) > .searchdock-toggle:hover,
.searchdock-inner:not(.is-open):not(.is-closing) > .searchdock-toggle:focus-visible {
    overflow: visible;
}

.searchdock-toggle {
    overflow: hidden;   /* damit die Lupe beim Schrumpfen abgeschnitten wird */
    transition: width 0.34s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.18s ease,
                margin-right 0.34s cubic-bezier(0.22, 1, 0.36, 1),
                border-width 0.34s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.12s ease, color 0.12s ease;
}

/* Offener Zustand: Feld füllt die Leiste, Lupe und Werkzeuge schrumpfen auf
   null Breite – das Feld wächst genau dort heraus, wo die Lupe stand. */
.searchdock-inner.is-open > .search-field {
    flex: 1 1 auto;
    width: auto;
    margin-right: 0;
    opacity: 1;
    transition: opacity 0.25s ease 0.1s;
}

/* X am rechten Rand: schließt die Suche wieder (und leert sie dabei).
   Es klappt spiegelbildlich zur Lupe auf – die eine geht, das andere kommt. */
.searchdock-inner.is-toggleable > .searchdock-close {
    overflow: hidden;
    width: 0;
    min-width: 0;
    border-width: 0;   /* sonst blieben die 2 px der Ränder als Lücke stehen */
    opacity: 0;
    margin-left: -0.5rem;
    pointer-events: none;
    transition: width 0.34s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.18s ease 0.08s,
                margin-left 0.34s cubic-bezier(0.22, 1, 0.36, 1),
                border-width 0.34s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.12s ease, color 0.12s ease;
}

.searchdock-inner.is-open > .searchdock-close {
    width: 48px;
    border-width: 1px;
    opacity: 1;
    margin-left: 0;
    pointer-events: auto;
}

.searchdock-inner.is-open > .searchdock-toggle {
    width: 0;
    min-width: 0;
    padding: 0;
    border-width: 0;
    opacity: 0;
    margin-right: -0.5rem;   /* frisst die Lücke der Leiste mit */
    pointer-events: none;
}

.searchdock-inner.is-open > .searchdock-tools {
    max-width: 0 !important;   /* schlägt die gemessene Pixelbreite */
    flex-wrap: nowrap;         /* sonst würde jedes Symbol eine Zeile hoch bauen */
    opacity: 0;
    transform: scale(0.8);
    margin-left: -0.5rem;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .searchdock-inner.is-toggleable,
    .searchdock-inner.is-toggleable > .search-field,
    .searchdock-tools,
    .searchdock-toggle { transition: none; }
}

/* Damit die letzten Zeilen nicht hinter dem Dock verschwinden, hält ein
   Abstandhalter am Seitenende Platz frei. */
.searchdock-spacer { height: 5.5rem; }

/* Zusatzknopf im Dock (z. B. "+" neu anlegen) – wie der Filterknopf:
   dezenter Umriss, beim Überfahren rot. */
.dock-btn[hidden] { display: none; }
.dock-btn {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--fg-muted);
    text-decoration: none;
    transition: border-color 0.12s ease, color 0.12s ease;
}

.dock-btn:hover,
.dock-btn:focus-visible { border-color: var(--accent); color: var(--accent); }

/* Platzhalter für ein Werkzeug, das noch nicht steht: sichtbar, aber grau und
   ohne Reaktion – so bleibt die Leiste ruhig, statt Knöpfe wandern zu lassen. */
.dock-btn[disabled] {
    opacity: 0.4;
    cursor: default;
}

.dock-btn[disabled]:hover,
.dock-btn[disabled]:focus-visible {
    border-color: var(--border);
    color: var(--fg-muted);
}

/* Dünner Strich zwischen zwei Gruppen von Werkzeugen in der Leiste. */
.dock-sep {
    flex: 0 0 auto;
    width: 1px;
    height: 28px;
    background: var(--border);
}

.dock-btn svg { width: 24px; height: 24px; display: block; }

/* Kurzhinweis über dem Knopf (der Dock sitzt unten). */
.dock-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--vf-slate-grey);
    color: var(--vf-white);
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.dock-btn:hover::after,
.dock-btn:focus-visible::after { opacity: 1; transform: translateX(-50%); }

@media (hover: none) { .dock-btn::after { display: none; } }

/* --- "…"-Menü für überzählige Werkzeuge --------------------------------------
   Auf schmalen Displays passen nicht alle Symbole nebeneinander. searchdock.js
   schiebt die letzten in dieses Menü; dort stehen dieselben Knöpfe untereinander
   mit Beschriftung, sehen also aus wie normale Menüeinträge. Auf dem Desktop
   passt alles in die Leiste – dann ist das Menü ausgeblendet.
   ------------------------------------------------------------------------- */
.searchdock-overflow[hidden] { display: none; }

/* Der Text zum Symbol – nur im Menü sichtbar, in der Leiste zählt das Symbol. */
.dock-btn-label { display: none; }

.searchdock-overflow .dropdown-panel .dock-btn {
    justify-content: flex-start;
    gap: 0.6rem;
    width: 100%;
    height: auto;
    padding: 0.55rem 0.75rem;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--fg);
    white-space: nowrap;
}

.searchdock-overflow .dropdown-panel .dock-btn:hover,
.searchdock-overflow .dropdown-panel .dock-btn:focus-visible {
    background: var(--app-bg);
    color: var(--fg);
}

.searchdock-overflow .dropdown-panel .dock-btn svg { width: 20px; height: 20px; }
.searchdock-overflow .dropdown-panel .dock-btn-label { display: inline; }

/* Im Menü sitzt der Text schon daneben – der Kurzhinweis wäre doppelt. */
.searchdock-overflow .dropdown-panel .dock-btn::after { display: none; }

/* Aus dem senkrechten Strich der Leiste wird im Menü eine Trennlinie. */
.searchdock-overflow .dropdown-panel .dock-sep {
    width: auto;
    height: 1px;
    margin: 0.35rem 0.25rem;
}

.searchdock-overflow .dropdown-panel .dock-sep:first-child,
.searchdock-overflow .dropdown-panel .dock-sep:last-child { display: none; }

/* Das native "x" von type=search stört im eigenen Layout. */
.search-field .form-input::-webkit-search-decoration,
.search-field .form-input::-webkit-search-cancel-button { appearance: none; }

/* --- Menü zum Aufklappen (Filter u. Ä.) --------------------------------------
   Gleiche Optik wie das Burger-Menü im Kopfbereich, damit alle
   Auswahl-Einblendungen der Seite gleich aussehen.
   ------------------------------------------------------------------------- */
.dropdown { position: relative; display: inline-flex; }

.dropdown-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--fg-muted);
    cursor: pointer;
    font: inherit;   /* sonst erbt der Kurzhinweis die Browser-Standardschrift */
    transition: border-color 0.12s ease, color 0.12s ease;
}

.dropdown-btn:hover,
.dropdown.is-open .dropdown-btn {
    border-color: var(--accent);
    color: var(--accent);
}

.dropdown-btn svg { width: 22px; height: 22px; display: block; }

/* Kurzhinweis wie beim Dock-Knopf (.dock-btn::after) – nur wenn ein
   data-tooltip gesetzt ist (die reinen Filterknöpfe haben keins). */
.dropdown-btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--vf-slate-grey);
    color: var(--vf-white);
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.dropdown-btn[data-tooltip]:hover::after,
.dropdown-btn[data-tooltip]:focus-visible::after { opacity: 1; transform: translateX(-50%); }

/* Zeigt an, dass ein Filter aktiv ist. */
.dropdown-btn .dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}

.dropdown-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 14rem;
    padding: 0.4rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.16);
    display: none;
    z-index: 40;
}

.dropdown.is-open .dropdown-panel {
    display: block;
    animation: hmenu-in 0.14s ease;
}

/* Nach oben aufklappen (z. B. in der schwebenden Suchleiste unten). */
.dropdown--up .dropdown-panel {
    top: auto;
    bottom: calc(100% + 12px);
}

/* Sehr lange Listen (viele Vergleiche, viele Marker) scrollen in sich, statt
   oben aus dem Bild zu laufen. */
.dropdown-panel { max-height: min(60vh, 26rem); overflow-y: auto; }

/* Vergleichsliste: kleinere Schrift und schmalere Zeilen, damit deutlich mehr
   Namen ohne Scrollen passen – lange Namen ("Connect Shop Test FY 26/27")
   brauchen sonst zwei Zeilen und die Liste wird schnell unhandlich lang. */
.dropdown-panel--layouts { min-width: 15rem; max-width: 18rem; }
.dropdown-panel--layouts .dropdown-item {
    padding: 0.4rem 0.65rem;
    font-size: 0.85rem;
    line-height: 1.25;
}

/* --- Menü mittig über/unter dem Knopf, mit Zipfel ----------------------------
   Die Menüs stehen zentriert am Knopf und tragen ein kleines Dreieck, damit man
   sieht, wo sie herauskommen. Sie wachsen aus dieser Spitze heraus – wie das
   Suchfeld aus der Lupe. Ragt ein Menü seitlich aus dem Bild, verschiebt es
   app.js über --dd-shift; das Dreieck bleibt am Knopf, die Spitze wandert nur
   im Menü mit (transform-origin).

   Ausgenommen sind die eigenen Auswahlfelder (.select-wrap): dort füllt das
   Menü die Feldbreite, ein Zipfel wäre dort sinnlos.
   ------------------------------------------------------------------------- */
.dropdown:not(.select-wrap) > .dropdown-panel {
    --dd-shift: 0px;
    left: 50%;
    right: auto;
    max-width: calc(100vw - 1.5rem);
    transform: translateX(calc(-50% + var(--dd-shift)));
    transform-origin: calc(50% - var(--dd-shift)) top;
}

/* Gleicher Abstand wie beim Zipfel nach oben (Platz für die Spitze). */
.dropdown:not(.select-wrap):not(.dropdown--up) > .dropdown-panel {
    top: calc(100% + 12px);
}

.dropdown--up:not(.select-wrap) > .dropdown-panel {
    transform-origin: calc(50% - var(--dd-shift)) bottom;
}

.dropdown:not(.select-wrap).is-open > .dropdown-panel {
    animation: dropdown-grow-in 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Das Dreieck hängt am Knopf (nicht am Menü) – das Menü scrollt in sich und
   würde es abschneiden. Ein um 45° gedrehtes Quadrat, von dem nur die zwei
   äußeren Kanten einen Rand tragen; die Hälfte im Menü deckt dessen Rand ab. */
.dropdown:not(.select-wrap).is-open::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(100% + 7px);
    width: 10px;
    height: 10px;
    background: var(--card-bg);
    border-left: 1px solid var(--border);
    border-top: 1px solid var(--border);
    border-top-left-radius: 2px;
    transform: translateX(-50%) rotate(45deg);
    z-index: 41;
    animation: dropdown-tip-in 0.16s ease;
}

.dropdown--up:not(.select-wrap).is-open::after {
    top: auto;
    bottom: calc(100% + 7px);
    border-left: 0;
    border-top: 0;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-top-left-radius: 0;
    border-bottom-right-radius: 2px;
}

@keyframes dropdown-grow-in {
    from {
        opacity: 0;
        transform: translateX(calc(-50% + var(--dd-shift))) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(calc(-50% + var(--dd-shift))) scale(1);
    }
}

@keyframes dropdown-tip-in {
    from { opacity: 0; transform: translateX(-50%) rotate(45deg) scale(0.4); }
    to   { opacity: 1; transform: translateX(-50%) rotate(45deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .dropdown:not(.select-wrap).is-open > .dropdown-panel,
    .dropdown:not(.select-wrap).is-open::after { animation: none; }
}

.dropdown-title {
    padding: 0.35rem 0.75rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

/* Eingabezeile in einem Aufklappmenü (Ergebnisvorschau im Quiz-Dock):
   Zahlenfeld, Einheit und Knopf nebeneinander. */
.preview-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem 0.5rem;
}

.preview-unit { color: var(--fg-muted); }

.dropdown-item[hidden] { display: none; }
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    appearance: none;
    font: inherit;
    text-align: left;
    color: var(--fg);
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.dropdown-item:hover { background: var(--app-bg); }

.dropdown-item.is-active { color: var(--accent); font-weight: 600; }

/* Häkchen vor dem aktiven Eintrag – der Platz bleibt immer reserviert. */
.dropdown-item::before {
    content: "";
    flex: 0 0 auto;
    width: 0.5em;
    height: 0.85em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    opacity: 0;
}

.dropdown-item.is-active::before { opacity: 1; }

/* Eintrag mit Symbol: das Icon nimmt den Platz des Häkchens ein, statt ihn
   leer stehen zu lassen (z. B. „Einzelansicht öffnen“ mit Auge). */
.dropdown-item--icon::before { display: none; }

.dropdown-item-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.1em;
    color: var(--fg-muted);
}

.dropdown-item-icon svg { width: 100%; height: auto; }

.dropdown-item--icon:hover .dropdown-item-icon { color: inherit; }

/* --- Eigenes Auswahlfeld ------------------------------------------------------
   Ersetzt das native <select>-Popup, das sich nicht gestalten lässt und im
   Dark Mode fremd wirkt. app.js baut es aus dem vorhandenen <select> – ohne
   JavaScript bleibt einfach das native Feld stehen.
   ------------------------------------------------------------------------- */
.select-wrap { display: block; position: relative; }

/* Das echte <select> bleibt im Formular (trägt den Wert), wird aber
   ausgeblendet, sobald das eigene Feld daneben steht. */
.select-wrap + select.is-enhanced,
select.is-enhanced { display: none; }

.select-btn {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 0.65rem 2.5rem 0.65rem 0.9rem;
    background: var(--input-bg);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 1rem;
    color: var(--fg);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.select-btn:hover,
.dropdown.is-open .select-btn { border-color: var(--accent); }

/* Pfeil rechts, dreht sich beim Aufklappen. */
.select-btn::after {
    content: "";
    position: absolute;
    right: 1rem;
    top: 50%;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--fg-muted);
    border-bottom: 2px solid var(--fg-muted);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.2s ease;
    pointer-events: none;
}

.dropdown.is-open .select-btn::after { transform: translateY(-30%) rotate(-135deg); }

/* Das Menü füllt die Feldbreite und öffnet unter dem Feld. */
.select-wrap .dropdown-panel {
    left: 0;
    right: 0;
    min-width: 0;
    max-height: 16rem;
    overflow-y: auto;
}

@media (prefers-reduced-motion: reduce) {
    .select-btn::after { transition: none; }
}

/* --- Aufklappbare Kästen ------------------------------------------------------
   Native <details>/<summary> – funktioniert auch ohne JavaScript.
   ------------------------------------------------------------------------- */
/* Kein overflow:hidden – sonst schneidet der Kasten aufklappende Menüs
   (z. B. das Auswahlfeld "Design" oder den Shop-Picker) ab. */
.acc {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
}

.acc-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}

/* Standard-Dreieck der Browser abschalten. */
.acc-head::-webkit-details-marker { display: none; }
.acc-head::marker { content: ""; }

.acc-head:hover { color: var(--accent); }

/* Eigener Pfeil rechts, dreht sich beim Aufklappen. */
.acc-head::after {
    content: "";
    margin-left: auto;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.2s ease;
}

.acc[open] .acc-head::after { transform: rotate(-135deg) translate(-2px, -2px); }

.acc-body {
    padding: 0 1.25rem 1.5rem;
}

.acc-body > .text-muted:first-child { margin-bottom: 1rem; }

@media (prefers-reduced-motion: reduce) {
    .acc-head::after { transition: none; }
}

/* ==========================================================================
   5. Shop-Picker (Suchfeld mit Vorschlagsliste)
   ========================================================================== */

.shop-picker { position: relative; }

.shop-picker-menu {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 16rem;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--card-shadow);
}

.shop-picker-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.7rem 0.9rem;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--fg);
    text-align: left;
    cursor: pointer;
}

.shop-picker-item:hover,
.shop-picker-item.is-active { background: var(--app-bg); }

.shop-picker-meta { color: var(--fg-muted); font-size: 0.85rem; }

.shop-picker-empty {
    padding: 0.8rem 0.9rem;
    color: var(--fg-muted);
    font-size: 0.9rem;
}

/* Hinweis unter der Trefferliste ("bitte verfeinern"). */
.shop-picker-more {
    border-top: 1px solid var(--border);
    font-size: 0.82rem;
}

/* ==========================================================================
   6. Tabellen & Reiter
   ========================================================================== */

/* Breite Tabellen scrollen in sich – die Seite selbst nie horizontal. */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.table th,
.table td {
    /* Kompakte Zeilen: bei vielen Konten bleibt die Liste überschaubar. */
    padding: 0.35rem 0.75rem;
    text-align: left;
    vertical-align: middle;
    /* Bewusst haarfein: die Linien sollen die Zeilen trennen, nicht rahmen. */
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
    white-space: nowrap;
}

.table thead th {
    font-size: 0.7rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg-muted);
}

.table tbody tr:hover { background: var(--app-bg); }

/* th/td-Kombi ist spezifischer als .table-num allein – daher hier explizit,
   sonst gewinnt das linksbündige .table th/td und die Häkchen stehen links. */
.table th.table-num,
.table td.table-num { text-align: center; }

/* Aktionsspalte: Überschrift und Icons stehen mittig. */
.table th.col-actions { text-align: center; }

/* Die Icons stehen mittig nebeneinander – die Zelle bleibt dabei aber eine
   ZELLE: display:flex nimmt einer <td> ihren Platz im Tabellenraster, die
   Zeile fällt rechts aus der Reihe und Trennlinie wie Hover-Fläche knicken
   an der Spaltengrenze ab. Deshalb inline-flex an den Kindern statt flex an
   der Zelle. */
.table td.col-actions {
    text-align: center;
    white-space: nowrap;
}

.table td.col-actions > *,
.table-actions > * {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

/* Abstand zwischen den Icons – gap gibt es ohne Flex-Container nicht. */
.table td.col-actions > * + *,
.table-actions > * + * { margin-left: 0.5rem; }

/* Außerhalb einer Tabellenzelle (eigener Kasten) bleibt es eine Flex-Reihe. */
.table-actions:not(td) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.table-actions:not(td) > * + * { margin-left: 0; }

.table .text-muted { display: block; font-weight: 400; font-size: 0.8rem; }

/* ===========================================================================
   Benutzerverwaltung als Explorer
   ---------------------------------------------------------------------------
   Drei Spalten nebeneinander: Baum, Liste, Details. Wird der Platz knapp,
   rutschen sie untereinander – zuerst die Details unter die Liste, dann auch
   der Baum. Jede Spalte ist eine eigene Kachel – keine umschließende Karte,
   getrennt wird über den Abstand dazwischen.
   ======================================================================== */
.explorer {
    display: grid;
    grid-template-columns: minmax(210px, 250px) minmax(0, 1fr) minmax(290px, 330px);
    gap: clamp(0.75rem, 1.6vw, 1.25rem);
    align-items: start;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.explorer-col {
    min-width: 0;
    padding: clamp(1.1rem, 2.2vw, 1.6rem);
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
}

.explorer-tree {
    padding-inline: clamp(0.7rem, 1.4vw, 1rem);
}

/* Kleine Bereichsüberschrift statt Kartentitel – wie die Rubriken in der
   Seitenleiste eines Datei-Explorers. */
.explorer-label {
    margin: 0 0 0.6rem;
    padding-inline: 0.35rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

/* Ohne gewähltes Konto trägt die rechte Spalte nur den Hinweis – dafür
   braucht es keine eigene Kachel. */
.explorer-detail:not(:has(.udetail)) {
    background: none;
    box-shadow: none;
}

/* Titel und Anzahl stehen nebeneinander in einer Zeile – gleiche Größe wie
   das Label der Seitenleiste, damit beide Spalten oben auf einer Höhe sind. */
.explorer-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.explorer-head .explorer-label { margin-bottom: 0; }

.explorer-head-meta {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-muted);
    opacity: 0.75;
}

@media (max-width: 1200px) {
    .explorer { grid-template-columns: minmax(190px, 230px) minmax(0, 1fr); }

    /* Die Details rücken als eigene Kachel unter Baum und Liste. */
    .explorer-detail { grid-column: 1 / -1; }
}

@media (max-width: 800px) {
    .explorer { grid-template-columns: minmax(0, 1fr); }
}

/* --- Baum ------------------------------------------------------------------
   Eingerückt wird über --depth am Zeilenrahmen, nicht über verschachtelte
   Innenabstände: so bleibt die Klickfläche über die ganze Breite bestehen.
   ------------------------------------------------------------------------- */
.tree-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Zugeklappt heißt: die Kinder sind nicht da. */
.tree-item > .tree-list { display: none; }
.tree-item.is-open > .tree-list { display: block; }

.tree-row {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    padding-left: calc(var(--depth, 0) * 0.85rem);
    border-radius: 4px;
}

.tree-row:hover { background: var(--app-bg); }

.tree-row.is-active {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.tree-row.is-active .tree-label { color: var(--accent); font-weight: 500; }

.tree-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--fg-muted);
    cursor: pointer;
}

.tree-toggle svg {
    width: 12px;
    height: 12px;
    display: block;
    transform: rotate(-90deg);
    transition: transform 0.15s ease;
}

.tree-item.is-open > .tree-row > .tree-toggle svg { transform: rotate(0deg); }

.tree-toggle--empty { cursor: default; }

.tree-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.3rem 0.45rem 0.3rem 0.1rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.9rem;
}

.tree-btn:hover { text-decoration: none; }

.tree-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* GL / PM / RSSM – sagt, in welcher Rolle die Person hier steht. */
.tree-tag {
    flex: 0 0 auto;
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--fg-muted) 14%, transparent);
    color: var(--fg-muted);
    font-size: 0.65rem;
    letter-spacing: 0.03em;
}

.tree-count {
    flex: 0 0 auto;
    color: var(--fg-muted);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

/* --- Benutzerliste ---------------------------------------------------------
   Name und E-Mail stehen übereinander in einer Zelle; rechts daneben nur noch
   Funktion, Status und die letzte Anmeldung.
   ------------------------------------------------------------------------- */
.table--users { table-layout: fixed; }

.table--users th,
.table--users td {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Der Name hat keine feste Breite – er bekommt, was Funktion, Status und
   letzte Anmeldung übrig lassen. Die beiden rechten Spalten sind deshalb so
   schmal wie ihr Inhalt es zulässt. */
.table--users .col-hier   { width: 20%; }
.table--users .col-status { width: 5.75rem; }
.table--users .col-login  { width: 7.25rem; }

/* Die Pille soll ganz bleiben – die … gehören zu Name und Funktion. */
.table--users .col-status { overflow: visible; text-overflow: clip; }

.user-row { cursor: pointer; }

.user-row.is-selected {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.user-row.is-selected th,
.user-row.is-selected td { border-color: transparent; }

.user-cell {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.user-cell:hover { text-decoration: none; }

.user-cell-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.user-cell-name {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-cell-mail {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--fg-muted);
    font-size: 0.78rem;
    font-weight: 400;
}

.role-badge {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--accent);
}

.role-badge svg { width: 15px; height: 15px; display: block; }

/* --- Initialen-Kugel -------------------------------------------------------
   Steht in der Liste vor dem Namen und oben in den Details groß. Schrumpft
   nie (flex: 0 0 auto), damit sie auch neben langen Namen rund bleibt.
   ------------------------------------------------------------------------- */
.avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    user-select: none;
}

.avatar--lg {
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1.05rem;
}

/* Große Fassung im Profil, neben dem Upload-Feld. */
.avatar--xl {
    width: 5.5rem;
    height: 5.5rem;
    font-size: 1.6rem;
}

/* Mit Profilbild füllt das Bild die Kugel randlos aus (includes/avatar.php).
   object-fit: cover schneidet mittig zu, statt zu verzerren. */
.avatar.has-img { background: var(--app-bg); overflow: hidden; }

.avatar.has-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Profilbild ändern (Mein Profil) --------------------------------------- */

.avatar-edit {
    display: flex;
    align-items: center;
    gap: var(--gap);
    flex-wrap: wrap;
    margin-bottom: var(--gap);
}

.avatar-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 14rem;
    min-width: 0;
}

.avatar-form .form-label { margin: 0; }
.avatar-form .btn { align-self: flex-start; }

/* --- Sortierbare Spaltentitel ---------------------------------------------- */
.th-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    color: inherit;
    text-decoration: none;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.th-sort:hover { color: var(--fg); text-decoration: none; }

.th-sort > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Der Pfeil steht nur bei der aktiven Spalte – sonst wäre der Kopf unruhig. */
.th-sort-arrow {
    display: inline-flex;
    flex: 0 0 auto;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.th-sort-arrow svg { width: 11px; height: 11px; display: block; }

.th-sort:hover .th-sort-arrow { opacity: 0.45; }
.th-sort.is-sorted { color: var(--fg); }
.th-sort.is-sorted .th-sort-arrow { opacity: 1; color: var(--accent); }
.th-sort.is-desc .th-sort-arrow { transform: rotate(180deg); }

/* --- Blätterleiste --------------------------------------------------------- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.pagination-info { font-size: 0.85rem; color: var(--fg-muted); }

.pagination-pages { display: flex; align-items: center; gap: 0.25rem; }

.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0 0.4rem;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--fg);
    text-decoration: none;
    font-size: 0.85rem;
    cursor: pointer;
}

.page-btn:hover { background: var(--app-bg); text-decoration: none; }

.page-btn.is-active {
    border-color: var(--accent);
    color: var(--accent);
}

.page-btn.is-off { opacity: 0.35; cursor: default; }
.page-btn.is-off:hover { background: none; }

.page-btn svg { width: 13px; height: 13px; display: block; }

/* Der Pfeil nach rechts ist derselbe wie nach links, nur gespiegelt. */
.page-btn .flip { display: inline-flex; transform: scaleX(-1); }

.page-gap { padding: 0 0.15rem; color: var(--fg-muted); }

@media (max-width: 520px) {
    .pagination { justify-content: center; }
    .pagination-info { width: 100%; text-align: center; }
}

/* --- Benutzerdetails (rechte Spalte) --------------------------------------- */
.udetail-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.udetail-ident { min-width: 0; }

.udetail-name {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.udetail-role {
    margin: 0.1rem 0 0;
    color: var(--fg-muted);
    font-size: 0.85rem;
}

.udetail-status { margin: 0.75rem 0 0; }

.udetail-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.9rem 0 1.1rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

/* Der eingeschaltete Zustand des Schlüssel-Symbols: die Zugriffsrechte sind
   gerade zu sehen. */
.udetail-actions .icon-action.is-on {
    border-color: var(--accent);
    color: var(--accent);
}

/* Löschen ist die einzige Aktion ohne Rückweg – nur sie trägt Rot. */
.udetail-danger { color: var(--err); }

.udetail-danger:hover,
.udetail-danger:focus-visible {
    border-color: var(--err);
    color: var(--err);
}

/* Zwischenüberschrift innerhalb der Details – klein und ruhig, sie soll die
   Felder gliedern, nicht mit ihnen konkurrieren. */
.udetail-section {
    margin: 1.25rem 0 0.5rem;
    color: var(--fg-muted);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.udetail-panel > .udetail-section:first-of-type { margin-top: 0; }

.udetail-facts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.15rem;
    margin: 0;
}

.udetail-facts dt {
    color: var(--fg-muted);
    font-size: 0.78rem;
}

.udetail-facts dd {
    margin: 0 0 0.6rem;
    font-size: 0.9rem;
}

.udetail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 2rem 1rem;
    text-align: center;
}

.udetail-empty svg { width: 28px; height: 28px; opacity: 0.5; }

/* --- Spalten ausblenden, wenn der Platz knapp wird -------------------------
   Reihenfolge nach Wichtigkeit: zuerst die letzte Anmeldung, dann die
   Funktion, zuletzt der Status. Der Name bleibt immer stehen – mit E-Mail
   darunter steht das Wichtigste ohnehin in einer Zelle.
   ------------------------------------------------------------------------- */
@media (max-width: 1000px) { .table .col-login  { display: none; } }
@media (max-width: 760px)  { .table .col-hier   { display: none; } }
@media (max-width: 480px)  { .table .col-status { display: none; } }

/* --- Gruppierte Liste (nach Shop oder Funktion) -----------------------------
   Jede Gruppe klappt auf; die erste steht offen, damit die Seite nicht leer
   wirkt.
   ------------------------------------------------------------------------- */
.grouplist { display: flex; flex-direction: column; gap: 0.5rem; }

.group {
    border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
    border-radius: var(--radius);
    overflow: hidden;
}

.group-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    background: var(--app-bg);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.group-head::-webkit-details-marker { display: none; }

/* Pfeil ganz rechts, neben der Anzahl – dreht sich beim Aufklappen.
   Als Icon (nicht als gedrehtes Kästchen), damit er sauber auf der Höhe
   der Zahl sitzt. */
.group-chevron {
    display: inline-flex;
    flex: 0 0 auto;
    margin-left: 0.2rem;
    color: var(--fg-muted);
    transition: transform 0.15s ease;
}

.group-chevron svg { width: 16px; height: 16px; display: block; }

.group[open] > .group-head .group-chevron { transform: rotate(180deg); }

.group-title { font-weight: 600; flex: 1 1 auto; min-width: 0; }

.group .table-scroll { padding: 0 0.25rem; }

.group .table tbody tr:last-child th,
.group .table tbody tr:last-child td { border-bottom: none; }

/* --- Umschalter (Segmented Control) ------------------------------------------
   Zwei bis drei gleichrangige Ansichten. Der aktive Eintrag hebt sich als
   weiße Fläche ab – nicht als roter Knopf, sonst konkurriert er mit den
   echten Aktionen der Seite.
   ------------------------------------------------------------------------- */
.switch {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--app-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.switch-item {
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--fg-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.switch-item:hover { color: var(--fg); }

.switch-item.is-active {
    background: var(--card-bg);
    color: var(--fg);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
}

/* --- Zurück-Verweis ----------------------------------------------------------
   Ruhig in Textgrau, damit er nicht mit den Aktionen der Seite konkurriert –
   beim Überfahren färbt er sich aber wie jeder Link rot, damit sofort klar
   ist, dass er anklickbar ist. Gilt für alle "Zurück"-Verweise und den
   Konfigurations-Verweis im Sales Audit.
   ------------------------------------------------------------------------- */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.05rem;
    color: var(--fg-muted);
    text-decoration: none;
    transition: color 0.12s ease;
}

.back-link:link,
.back-link:visited { color: var(--fg-muted); }

.back-link:hover,
.back-link:focus-visible { color: var(--accent); }

.back-link svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* --- Sortierleiste unter Suche und Filter – mittig unter dem Suchfeld ------- */
.sortbar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: var(--gap);
}

.sortbar .switch-item {
    border: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

.sortbar .switch-item.is-active { background: var(--card-bg); }

/* ==========================================================================
   7. Karussell
   Desktop: normales Raster. Schmale Displays: horizontal wischen, dazu
   Pfeile und Punkte (siehe assets/js/app.js).
   ========================================================================== */

.carousel { position: relative; }

.carousel-track {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--gap);
}

.carousel-controls { display: none; }

@media (max-width: 767px) {
    .carousel-track {
        display: flex;
        gap: 0.75rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding-bottom: 0.25rem;
    }

    .carousel-track::-webkit-scrollbar { display: none; }

    .carousel-track > * {
        flex: 0 0 82%;
        scroll-snap-align: center;
    }

    .carousel-controls {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-top: 1rem;
    }

    /* Bleibt aus, solange nur eine Kachel da ist (JS entfernt das Attribut). */
    .carousel-controls[hidden] { display: none; }
}

.carousel-dots { display: flex; gap: 0.5rem; }

.carousel-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--border);
    cursor: pointer;
}

.carousel-dot.is-active { background: var(--accent); }

.carousel-arrows { display: flex; gap: 0.5rem; }

.carousel-arrow {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: var(--card-bg);
    border: 2px solid var(--fg);
    border-radius: 50%;
    cursor: pointer;
}

.carousel-arrow::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-top: 2px solid var(--fg);
    border-right: 2px solid var(--fg);
}

.carousel-arrow--next::before { transform: rotate(45deg)   translate(-1px, 1px); }
.carousel-arrow--prev::before { transform: rotate(-135deg) translate(-1px, 1px); }

.carousel-arrow[disabled] { opacity: 0.35; cursor: default; }

/* ==========================================================================
   8. Anmeldeseite
   ========================================================================== */

/* Bewusst OHNE Karte: der Inhalt steht frei auf der Seite. Der Block ist
   im Fenster zentriert, die Texte darin bleiben linksbündig. */
.auth-body { background: var(--bg); }

.auth-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(2rem, 8vh, 5rem) var(--page-pad);
}

.auth-card {
    width: 100%;
    max-width: 34rem;
}

/* Logo und Schriftzug bilden eine Zeile. Die Schriftgröße steht auf dem
   Container, damit sich die Logohöhe per em daran koppeln kann – so
   bleiben beide in jeder Fenstergröße gleich hoch. */
.auth-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    margin-bottom: 1.25rem;
}

.auth-logo {
    flex: 0 0 auto;
    height: 1.3em;
    width: auto;
}

.auth-title {
    font-size: 1em;               /* folgt .auth-brand */
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.auth-sub {
    font-size: clamp(1.1rem, 2.5vw, 1.375rem);
    font-weight: 400;
    color: var(--fg);
    margin-bottom: clamp(2rem, 6vh, 3.5rem);
}

/* Folgt eine Erläuterung, rückt sie direkt unter die Zeile. */
.auth-sub:has(+ .auth-note) { margin-bottom: 0.4rem; }

/* Folgt ein Hinweiskasten, rückt er nah an den Text – der große Abstand
   zum Formular übernimmt dann der Kasten. */
.auth-note:has(+ .hint) { margin-bottom: 0.9rem; }
.auth-card .hint { margin-bottom: clamp(2rem, 6vh, 3.5rem); }

.auth-note {
    color: var(--fg-muted);
    margin-bottom: clamp(2rem, 6vh, 3.5rem);
}

.auth-note strong { font-weight: 700; color: var(--fg); }

/* Felder auf der Anmeldeseite etwas größer als im Rest der Anwendung. */
.auth-card .form-label { font-size: 1.0625rem; font-weight: 400; }
.auth-card .form-input { min-height: 56px; font-size: 1.0625rem; }

/* Die Code-Felder behalten ihre eigene Größe (steht hier, damit die Regel
   die allgemeine .auth-card-Vorgabe darüber überschreibt). */
.auth-card .code-input { min-height: 0; height: 3.5rem; font-size: 1.5rem; }

.auth-card .alert { margin-bottom: 1.75rem; }

.auth-card .btn--block { margin-top: 1.75rem; }

/* Zeile mit Nebenaktionen unter dem Formular. Bei zwei Links steht der
   erste links, der zweite bündig zur rechten Kante der Buttons darüber. */
.auth-alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

/* Einzelner Link: rechtsbündig. */
.auth-alt--end { justify-content: flex-end; }

/* Zweite Zeile direkt darunter – ohne eigene Trennlinie. */
.auth-alt--plain { border-top: 0; margin-top: 0.25rem; padding-top: 0; }

/* ==========================================================================
   9. Pull-to-Refresh (nur in der installierten App)
   Indikator wird per JS erzeugt; horizontal über left/right/margin zentriert,
   damit das JS die transform-Eigenschaft allein für die Y-Achse nutzt.
   ========================================================================== */

/* Natives Rubber-Band unterdrücken. Beide Ebenen, weil je nach Browser mal
   das <html>-, mal das <body>-Element das scrollende Element ist. */
.is-standalone,
.is-standalone body { overscroll-behavior-y: contain; }

.ptr-indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--card-bg);
    border: 1px solid var(--border);
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
    transform: translateY(-50px);
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
}

.ptr-indicator.ptr-animate { transition: transform 0.3s ease, opacity 0.3s ease; }

.ptr-logo { display: block; height: 26px; width: auto; }

.ptr-indicator .ptr-logo {
    filter: grayscale(0.4);
    transition: filter 0.2s ease;
}

.ptr-indicator.is-ready .ptr-logo,
.ptr-indicator.is-refreshing .ptr-logo { filter: none; }

@media (prefers-reduced-motion: reduce) {
    /* Knopf-Farbwechsel ohne Bewegung: einfach da oder nicht. */
    .btn,
    .icon-action { transition: none; }

    .ptr-indicator.ptr-animate { transition-duration: 0.01ms; }
    .carousel-track { scroll-behavior: auto; }
    .link-arrow:hover::after { transform: rotate(45deg); }
}

/* ==========================================================================
   Bestätigungs-Dialog (assets/js/confirm-dialog.js)
   Ersetzt das native confirm() – Rückfragen sehen aus wie der Rest der Seite.
   ========================================================================== */

.confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--page-pad);
    background: rgb(0 0 0 / 0.45);
    animation: confirm-fade 0.15s ease;
}

.confirm-overlay[hidden] { display: none; }

.confirm-box {
    width: 100%;
    max-width: 26rem;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgb(0 0 0 / 0.25);
    animation: confirm-pop 0.16s ease;
}

.confirm-msg {
    margin-bottom: 1.25rem;
    font-size: 1.05rem;
    color: var(--fg);
}

.confirm-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: -0.5rem 0 1.25rem;
    font-size: 0.9rem;
    color: var(--fg-muted);
    cursor: pointer;
}

.confirm-check[hidden] { display: none; }

.confirm-check-input {
    flex: none;
    margin-top: 0.15rem;
    width: 1.1rem;
    height: 1.1rem;
}

.confirm-actions {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
}

/* Der Dialog fokussiert den OK-Knopf automatisch beim Öffnen – der globale
   rote Fokusring (:focus-visible, Zeile ~146) läge dann auf rotem Grund
   (Knopf = --accent) und wirkt wie ein zweiter Rahmen. Hier stattdessen die
   Knopf-Textfarbe, das bleibt sichtbar und passt zum Knopf selbst. */
.confirm-ok:focus-visible {
    outline-color: var(--on-accent);
}

/* Die Knöpfe des Dialogs sind die normalen der Seite: bestätigen als
   btn--primary, abbrechen als btn--ghost. Früher stand hier eine Sonderfarbe
   fürs Löschen – die setzte beim Überfahren einen dunkelroten Rahmen um die
   rote Fläche und sah dadurch aus wie ein doppelter Rand. */

/* Seite dahinter nicht mitscrollen lassen. */
body.confirm-open { overflow: hidden; }

@keyframes confirm-fade { from { opacity: 0; } to { opacity: 1; } }

@keyframes confirm-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 420px) {
    .confirm-actions { flex-direction: column-reverse; }
    .confirm-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .confirm-overlay,
    .confirm-box { animation: none; }
}

/* ==========================================================================
   Frei schwebende Kurzmeldungen (Toasts) – assets/js/toast.js
   Erscheinen oben rechts, blenden sich von selbst aus, verschieben nichts.
   ========================================================================== */
.toast-stack {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 1rem);
    right: 1rem;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: min(24rem, calc(100vw - 2rem));
    pointer-events: none;   /* Klicks gehen durch, nur die Toasts selbst fangen sie */
}

.toast {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 1rem;
    /* Look wie hint_box: getönter Hintergrund in der Farbe des Hinweises,
       dünner Rahmen ringsum. Aqua für allgemein, Spring Green fürs Speichern,
       Rot für Löschen/Fehler. Die weiße Karte liegt darunter, damit die
       Tönung auch im Dark Mode trägt. */
    background:
        linear-gradient(var(--toast-tint, transparent), var(--toast-tint, transparent)),
        var(--card-bg);
    border: 1px solid var(--toast-edge, var(--vf-aqua-blue));
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 30px rgb(0 0 0 / 0.18);
    color: var(--fg);
    font-size: 0.9rem;
    line-height: 1.4;
    pointer-events: auto;
    opacity: 0;
    transform: translateX(12px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Standard: Aqua Blue aus der Sekundärpalette, leicht durchscheinend. */
.toast--info {
    --toast-tint: rgb(0 176 202 / 0.10);
    --toast-edge: var(--vf-aqua-blue);
}

.toast.is-in { opacity: 1; transform: none; }

.toast.is-leaving { opacity: 0; transform: translateX(12px); }

.toast-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: var(--vf-turquoise);
}

.toast-msg { flex: 1 1 auto; min-width: 0; margin: 0; }

.toast-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 50%;
    color: var(--fg-muted);
    cursor: pointer;
    transition: color 0.12s ease, background-color 0.12s ease;
}

.toast-close:hover { color: var(--fg); background: var(--app-bg); }

.toast-close svg { width: 14px; height: 14px; display: block; }

/* Speichern/Erfolg: Spring Green. */
.toast--success {
    --toast-tint: rgb(168 180 0 / 0.14);
    --toast-edge: var(--vf-spring-green);
}
.toast--success .toast-icon { color: var(--vf-success); }

/* Löschen/Fehler: Rot. */
.toast--error {
    --toast-tint: rgb(230 0 0 / 0.08);
    --toast-edge: var(--err);
}
.toast--error .toast-icon { color: var(--err); }

:root[data-theme="dark"] .toast--info .toast-icon { color: var(--vf-turquoise-dark); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .toast--info .toast-icon { color: var(--vf-turquoise-dark); }
}
:root[data-theme="dark"] .toast--success .toast-icon { color: var(--vf-success-dk); }

/* Auf sehr schmalen Geräten den ganzen oberen Rand nutzen. */
@media (max-width: 480px) {
    .toast-stack { left: 1rem; right: 1rem; width: auto; }
}

/* Auf dem Smartphone etwas mehr Abstand nach unten, damit der Dock nicht
   von der abgerundeten Display-Ecke gedrückt wirkt. */
@media (max-width: 600px) {
    .searchdock {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 2.25rem + var(--kb-inset, 0px));
    }
    .searchdock-spacer { height: 7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .toast { transition: opacity 0.2s ease; transform: none; }
    .toast.is-leaving { transform: none; }
}

/* ==========================================================================
   Shop-Verwaltung (admin_shops.php)
   ========================================================================== */

/* Hinweis "Mindestens N Zeichen" – mit Lupe, dezent. */
.sd-hint {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.25rem;
}

.sd-hint svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--fg-muted); }

/* --- Tabelle mit Inline-Feldern ------------------------------------------ */
.table--shops { table-layout: fixed; }

/* Menüs (Marker) öffnen nach oben aus der Zeile heraus – daher NICHT
   abschneiden. Die Felder schrumpfen mit, sodass kein Querscrollen nötig ist. */
.table--shops-wrap { overflow: visible; }

/* Spaltenbreiten nach dem, was wirklich drinsteht: RMSID ist immer neun
   Ziffern, die PLZ fünf – beide brauchen keinen Vorrat. Die Namensspalten
   (GL, PM, RSSM) werden bei Bedarf gekürzt und beim Hineinklicken ohnehin
   scrollbar. Alles Gesparte geht an die Straße: sie ist mit Abstand das
   längste Feld ("Gerold-Janssen-Str. 5-7") und soll ohne Kürzen lesbar sein.
   Deshalb bekommt auch der Ort eine feste Breite – sonst würde er sich den
   frei gewordenen Platz zur Hälfte greifen. */
.table--shops .col-rmsid  { width: 6.5rem; }
.table--shops .col-plz    { width: 4.25rem; }
.table--shops .col-city   { width: 9rem; }
.table--shops .col-nl     { width: 6.5rem; }
.table--shops .col-gl     { width: 7.5rem; }
.table--shops .col-pm     { width: 7.5rem; }
.table--shops .col-actions{ width: 11.5rem; }
/* Die Straße bekommt als einzige keine Breite – ihr gehört der ganze Rest. */

.table--shops th,
.table--shops td { vertical-align: middle; }

.table--shops td { padding: 0.35rem 0.4rem; }

.table--shops th.col-actions { text-align: center; }

/* Eingabefeld in der Zelle: wirkt ruhig, Rahmen erst bei Hover/Fokus. */
.sd-field {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 0.4rem 0.55rem;
    font-size: 0.9rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    transition: border-color 0.12s ease, background-color 0.12s ease;
}

.sd-field:hover { border-color: var(--border); }

.sd-field:focus {
    border-color: var(--accent);
    background: var(--input-bg);
    outline: none;
}

/* --- Marker-Knopf mit Zähler --------------------------------------------- */
.sd-markers { position: relative; }

/* --- Bild des Shops ------------------------------------------------------
   Der Knopf in der Aktionsspalte trägt einen Punkt, sobald ein Foto
   hinterlegt ist – so ist auf einen Blick zu sehen, wo noch eines fehlt. */
.sd-photo { position: relative; }

.sd-photo.has-image::after {
    content: "";
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--vf-success);
    box-shadow: 0 0 0 2px var(--card-bg);
}

/* Vorschau im Modal: fester Rahmen, das Bild füllt ihn beschnitten aus –
   dieselbe Wirkung wie später im Blatt des Shops. */
.shopimg-preview {
    margin: 0.75rem 0;
    aspect-ratio: 16 / 9;
    max-height: 15rem;
    border-radius: var(--radius-sm);
    background: var(--app-bg);
    overflow: hidden;
}

.shopimg-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shopimg-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 100%;
    color: var(--fg-muted);
    font-size: 0.9rem;
}

.shopimg-empty svg { width: 32px; height: 32px; }

.sd-marker-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--card-bg);
}

/* --- Marker-Menü ---------------------------------------------------------- */
.sd-marker-menu { min-width: 15rem; }

.sd-marker-row { display: flex; align-items: center; gap: 0.25rem; }

.sd-marker-row .sd-marker-item { flex: 1 1 auto; }

/* Papierkorb neben eigenen Markern – klein und dezent. */
.sd-marker-del {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--fg-muted);
    cursor: pointer;
    transition: color 0.12s ease, background-color 0.12s ease;
}

.sd-marker-del:hover { color: var(--err); background: var(--app-bg); }

.sd-marker-del svg { width: 16px; height: 16px; display: block; }

/* Trennlinie im Menü. */
.dropdown-sep {
    height: 1px;
    margin: 0.35rem 0.25rem;
    background: var(--border);
}

/* "Neuer Zusatz": Eingabefeld + eckiger Plus-Knopf (wie der Filterknopf). */
.sd-marker-new {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.25rem 0.15rem;
}

.sd-marker-new-input { min-height: 40px; padding: 0.4rem 0.6rem; font-size: 0.9rem; }

.sd-marker-new-ok {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--fg-muted);
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease;
}

.sd-marker-new-ok:hover,
.sd-marker-new-ok:focus-visible { border-color: var(--accent); color: var(--accent); }

.sd-marker-new-ok svg { width: 20px; height: 20px; display: block; }

/* --- Responsiv: Spalten wegnehmen, wenn es eng wird ---------------------- */
/* Die Zuordnungen fallen zuerst weg – die Adresse zählt: erst PM, dann GL. */
@media (max-width: 1100px) { .table--shops .col-pm    { display: none; } }
@media (max-width: 980px)  { .table--shops .col-gl    { display: none; } }
@media (max-width: 800px) { .table--shops .col-nl    { display: none; } }
@media (max-width: 640px) { .table--shops .col-rmsid { display: none; } }
@media (max-width: 520px) { .table--shops .col-plz   { display: none; } }

/* ==========================================================================
   11. Sales Audit (/audit/, /admin_audit/)
   Die Vergleichs-Tabelle ist bewusst dichter als die übrigen Tabellen der
   Seite: sie zeigt viele Zahlen nebeneinander und soll auf einen Blick
   lesbar bleiben. Ampelfarben laufen über eigene Tokens, damit Light und
   Dark Mode dieselben Regeln nutzen.
   ========================================================================== */

:root {
    /* Ampelstufen: Spring Green wäre als "Grün" zu hell, daher der dunklere
       Statuston aus brand.css; Warnung = Fresh Orange, Fehler = Vodafone Rot. */
    --lv-ok:  var(--vf-success);
    --lv-mid: var(--vf-fresh-orange-mid);
    --lv-bad: var(--vf-red);
}

:root[data-theme="dark"] {
    --lv-ok:  var(--vf-success-dk);
    --lv-mid: var(--vf-fresh-orange-warn);
    --lv-bad: var(--vf-red-text);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --lv-ok:  var(--vf-success-dk);
        --lv-mid: var(--vf-fresh-orange-warn);
        --lv-bad: var(--vf-red-text);
    }
}

:root {
    --radius-sq: 4px;   /* sichtbare Eckenrundung der Spalten-Kacheln */
}

/* Der Vergleich braucht mehr Platz als jede andere Seite – deutlich breiter
   als die normale Inhaltsspalte, aber weiterhin mit Seitenrand. */
.page-inner--xwide { max-width: 104rem; }

/* --- Kopfbereich der Karte ------------------------------------------------ */
.audit-card { position: relative; }

/* In der Listen-Ansicht ist jede Spalte eine eigene Kachel – der Kasten
   drumherum entfällt dann. In der Gruppierung und beim Einrichten bleibt er,
   dort steht die Tabelle als Ganzes. */
.audit-card.is-plain {
    background: none;
    box-shadow: none;
    padding: 0;
}

.audit-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1rem;
}

.audit-legend {
    display: flex;
    gap: 0.9rem;
    font-size: 0.78rem;
    color: var(--fg-muted);
}

.audit-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }

.audit-dot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; }
.audit-dot--ok  { background: var(--lv-ok); }
.audit-dot--mid { background: var(--lv-mid); }
.audit-dot--bad { background: var(--lv-bad); }

/* Die Ampel-Legende steht unter der Liste, rechtsbündig und ein Stück von der
   Kante weg – über der Tabelle nahm sie nur Platz weg, bevor irgendetwas zu
   sehen war. */
.audit-head {
    justify-content: flex-end;
    margin: 0.6rem 10px 0 0;
}

/* Untertitel unter dem Seitentitel – was gerade gezeigt wird. */
.page-head-main { flex: 1 1 auto; min-width: 0; }
.page-sub { color: var(--fg-muted); font-size: 0.95rem; margin-top: 0.15rem; }

/* Art der Ansicht (Vergleich, Gruppenleiter, Niederlassung …) als Plakette. */
.page-sub-kind {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.05rem 0.45rem;
    border-radius: 5px;
    background: var(--app-bg);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    vertical-align: 2px;
}

/* --- Start ohne Auswahl (Abteilungsleiter, Zentrale) ----------------------
   Bewusst ohne Karte: nur Icon, Überschrift und Hinweistext frei auf der
   Seite, damit der Blick direkt an der Suchleiste unten landet.
   ------------------------------------------------------------------------- */
.audit-start {
    max-width: 34rem;
    margin: 3rem auto;
    padding: 0 1rem;
    text-align: center;
}

.audit-start-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 0.9rem;
    border-radius: 999px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--fg-muted);
}

.audit-start-icon svg { width: 26px; height: 26px; }

.audit-start-title {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
}

.audit-start-text {
    margin: 0;
    color: var(--fg-muted);
    line-height: 1.6;
}

/* --- Auswahlliste der Suche in der Leiste ---------------------------------
   Schwebt als eigener Kasten ÜBER der Leiste (wie .searchdock-note): im
   Suchfeld selbst würde sie beim Zusammenklappen der Leiste abgeschnitten.
   ------------------------------------------------------------------------- */
.scope-picker-menu {
    width: var(--dock-w, 100%);
    max-width: 100%;
    max-height: min(24rem, 50vh);
    overflow-y: auto;
    margin: 0 auto 0.5rem;
    padding: 0.35rem 0;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgb(0 0 0 / 0.22);
    pointer-events: auto;
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.scope-picker-menu[hidden] { display: none; }

.scope-picker-head {
    padding: 0.5rem 0.9rem 0.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.scope-picker-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.9rem;
    color: var(--fg);
    text-decoration: none;
    font-size: 0.92rem;
}

.scope-picker-item:hover,
.scope-picker-item.is-active { background: var(--app-bg); }

.scope-picker-meta {
    flex: none;
    color: var(--fg-muted);
    font-size: 0.8rem;
}

.scope-picker-empty {
    padding: 0.8rem 0.9rem;
    color: var(--fg-muted);
    font-size: 0.9rem;
}

/* --- Kennzahlen-Kacheln ---------------------------------------------------
   Vier gleich breite Karten über der Liste. Unter 760px wird daraus ein
   Wischbereich mit Einrastpunkten, Punktleiste und Weiter-Knopf – vier
   Kacheln nebeneinander wären auf dem Telefon nicht mehr lesbar.
   ------------------------------------------------------------------------- */
/* Volle Breite des page-inner – dieselbe wie die Tabelle darunter (die
   Kacheln der Liste füllen ihre Spalten ebenfalls per width:100%). */
.kpi-strip { width: 100%; }

.kpi-track {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap);
}

@media (max-width: 1080px) {
    .kpi-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.kpi-tile { padding: 0.9rem clamp(0.9rem, 2vw, 1.25rem); }

.kpi-label {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.55rem;
}

.kpi-body {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    /* Alle vier Kacheln gleich hoch – egal ob zwei oder drei Textzeilen. */
    min-height: 4.6rem;
}

/* Der Text sitzt mittig zum Kreis und baut wie in den dreizeiligen Kacheln
   von oben nach unten auf. */
.kpi-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
    min-width: 0;
}

/* Kreis mit Icon (Pokal, Verlauf, Warnung) – Fläche in der Ampelfarbe. */
.kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 3.3rem;
    height: 3.3rem;
    border-radius: 999px;
}

.kpi-icon svg { width: 28px; height: 28px; }

.kpi-icon--ok {
    color: var(--lv-ok);
    background: color-mix(in srgb, var(--lv-ok) 12%, transparent);
}

.kpi-icon--bad {
    color: var(--lv-bad);
    background: color-mix(in srgb, var(--lv-bad) 12%, transparent);
}

.kpi-big {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.kpi-big--ok  { color: var(--lv-ok); }
.kpi-big--mid { color: var(--lv-mid); }
.kpi-big--bad { color: var(--lv-bad); }

.kpi-name {
    font-weight: 600;
    font-size: 0.95rem;
    margin-top: 0.2rem;
    overflow-wrap: anywhere;
}

.kpi-note { font-size: 0.8rem; color: var(--fg-muted); }

/* Veränderung gegenüber der ersten Welle: Dreieck und Zahl, keine Fläche. */
.kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.kpi-delta-tri { font-size: 0.7em; line-height: 1; }

.kpi-delta--up   { color: var(--lv-ok); }
.kpi-delta--down { color: var(--lv-bad); }
.kpi-delta--flat { color: var(--fg-muted); }

/* --- Ø-Kachel: Kreis mit echter Wellenfüllung -----------------------------
   Wie eine halbvolle Flasche: die Füllhöhe ist der Prozentwert, die
   Oberfläche selbst läuft ständig leicht weiter (zwei SVG-Wellenzüge, die
   endlos nach links bzw. rechts wandern – siehe waveEl()/buildWavePath() in
   audit.js). Jede Ebene besteht aus zwei identischen 100 Einheiten breiten
   Kacheln nebeneinander (0 und +100); eine Verschiebung um genau eine
   Kachelbreite läuft dadurch nahtlos in sich weiter, ohne Sprung. */
.kpi-wave-slot { flex: 0 0 auto; line-height: 0; }

.kpi-wave {
    position: relative;
    width: 68px;
    height: 68px;
}

.kpi-wave-svg { display: block; width: 100%; height: 100%; overflow: visible; }

.kpi-wave-bg { fill: var(--app-bg); }

.kpi-wave-path--ok  { fill: var(--lv-ok); }
.kpi-wave-path--mid { fill: var(--lv-mid); }
.kpi-wave-path--bad { fill: var(--lv-bad); }

/* Hintere Ebene: langsamer, blasser und eine andere Wellenlänge als die
   vordere – zusammen wirkt die Oberfläche unregelmäßig statt mechanisch. */
.kpi-wave-group--back  { opacity: 0.55; animation: kpi-wave-scroll-l 7s linear infinite; }
.kpi-wave-group--front { opacity: 1;    animation: kpi-wave-scroll-r 4.5s linear infinite; }

/* Je EINE Kachelbreite (100 SVG-Einheiten) – am Ende deckungsgleich mit dem
   Anfang, daher kein sichtbarer Sprung beim Zurückspringen auf 0. */
@keyframes kpi-wave-scroll-l { from { transform: translateX(0); } to { transform: translateX(-100px); } }
@keyframes kpi-wave-scroll-r { from { transform: translateX(-100px); } to { transform: translateX(0); } }

.kpi-wave-text {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fg);
    font-size: 15px;
    font-weight: 700;
    transition: color 0.2s ease;
    pointer-events: none;
}

/* Steht das Wasser hoch genug, sitzt die Zahl auf der Farbfläche statt auf
   dem hellen Grund – dann wird sie weiß. */
.kpi-wave.is-high .kpi-wave-text { color: var(--vf-white); }

@media (prefers-reduced-motion: reduce) {
    .kpi-wave-group--back,
    .kpi-wave-group--front { animation: none; }
}

/* Punkte und Weiter-Knopf gehören zum Wischbereich – sonst weg. */
.kpi-nav { display: none; }

@media (max-width: 760px) {
    .kpi-track {
        display: flex;
        gap: 0.75rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .kpi-track::-webkit-scrollbar { display: none; }

    .kpi-track > .kpi-tile {
        flex: 0 0 100%;
        scroll-snap-align: start;
    }

    /* Punkte mittig, die beiden Pfeile außen – drei Spalten, damit die Punkte
       wirklich in der Mitte stehen und nicht von den Pfeilen verschoben werden. */
    .kpi-nav {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 0.75rem;
        margin-top: 0.75rem;
    }

    .kpi-dots { display: flex; justify-content: center; gap: 0.5rem; }

    .kpi-dot {
        width: 10px;
        height: 10px;
        padding: 0;
        border: none;
        border-radius: 999px;
        background: var(--fg-muted);
        opacity: 0.35;
        cursor: pointer;
    }

    .kpi-dot.is-active {
        background: var(--vf-red);
        opacity: 1;
        transform: scale(1.3);
    }

    .kpi-prev,
    .kpi-next {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.9rem;
        height: 1.9rem;
        padding: 0;
        border: 1px solid var(--fg);
        border-radius: 999px;
        background: none;
        color: var(--fg);
        cursor: pointer;
    }

    .kpi-prev svg,
    .kpi-next svg { width: 11px; height: 11px; }
    .kpi-next svg { transform: rotate(180deg); }
}

/* Der Hinweis im Anheft-Modus schwebt über der Leiste unten: .searchdock-note. */

/* --- Kurzinfo beim Überfahren eines Ergebnisses ---------------------------
   Kleine Karte über der Zelle: Prüfdatum und die groben Abschnitte des Bogens.
   Fängt keine Klicks ab, damit Anheften und Bearbeiten weiter funktionieren.
   ------------------------------------------------------------------------- */
.aud-hover {
    position: absolute;
    z-index: 190;             /* unter den Menüs (200), über der Tabelle */
    min-width: 13rem;
    max-width: 20rem;
    padding: 0.5rem 0.65rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 10px 28px rgb(0 0 0 / 0.18);
    font-size: 0.8rem;
    pointer-events: none;
    animation: aud-hover-in 0.14s ease;
}

.aud-hover-head {
    margin: 0 0 0.35rem;
    font-weight: 600;
    color: var(--fg);
}

.aud-hover-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.1rem 0;
}

.aud-hover-name { color: var(--fg-muted); }

.aud-hover-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.aud-hover-val--ok  { color: var(--lv-ok); }
.aud-hover-val--mid { color: var(--lv-mid); }
.aud-hover-val--bad { color: var(--lv-bad); }

.aud-hover-note { margin: 0; color: var(--fg-muted); }

/* Abschnitt gerade ausgeblendet: bleibt in der Kurzinfo stehen, damit zu
   sehen ist, was NICHT im Wert steckt – durchgestrichen und ohne Ampelfarbe. */
.aud-hover-row.is-off { opacity: 0.45; }
.aud-hover-row.is-off .aud-hover-name,
.aud-hover-row.is-off .aud-hover-val {
    color: var(--fg-muted);
    text-decoration: line-through;
}

@keyframes aud-hover-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .aud-hover { animation: none; }
}

.audit-empty { color: var(--fg-muted); font-size: 0.92rem; padding: 0.5rem 0; }

/* --- Auswertung unter der Liste ------------------------------------------
   Zwei Karten nebeneinander: links die Zusammenfassung je Welle (früher die
   Fußzeile der Tabelle), rechts der Verlauf der Ø Ergebnisse. Auf schmalen
   Bildschirmen stehen sie untereinander. */
/* display:grid würde das hidden-Attribut überstimmen – deshalb ausdrücklich. */
.audit-bottom[hidden] { display: none; }

.audit-bottom {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--gap);
    align-items: start;
}

@media (max-width: 900px) {
    .audit-bottom { grid-template-columns: minmax(0, 1fr); }
}

.audit-summary-wrap { overflow-x: auto; }

.audit-sum-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.audit-sum-table th,
.audit-sum-table td { padding: 0.45rem 0.5rem; }

.audit-sum-table th {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--fg-muted);
    text-align: right;
    white-space: nowrap;
}

.audit-sum-table th.aud-sum-wave { text-align: left; }
.audit-sum-table thead th { border-bottom: 1px solid var(--border); }

.audit-sum-table .aud-sum-wave { text-align: left; white-space: nowrap; }
.audit-sum-table .aud-sum-num  { text-align: right; font-variant-numeric: tabular-nums; }

.audit-sum-table tbody tr + tr td { border-top: 1px solid var(--border-soft, var(--border)); }

.audit-sum-table tfoot td {
    border-top: 2px solid var(--border);
    font-weight: 700;
    padding-top: 0.6rem;
}

/* Das Diagramm ist eine eigene Karte: Überschrift links, Legende rechts. */
.audit-chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    margin-bottom: 0.75rem;
}

.audit-chart-head .card-title { margin-bottom: 0; }

.audit-chart-foot {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: var(--fg-muted);
}

.audit-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    font-size: 0.85rem;
    color: var(--fg-muted);
}

.audit-chart-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }

.audit-chart-legend-swatch {
    display: inline-block;
    width: 14px;
    height: 3px;
    border-radius: 2px;
}

.audit-chart-plot { width: 100%; }
.audit-chart-svg { display: block; max-width: 100%; overflow: visible; }

.audit-chart-line { fill: none; stroke-width: 2; }

.audit-chart-dot { stroke: var(--card-bg); stroke-width: 2; }

.audit-chart-point-label { font-size: 11px; font-weight: 600; }

.audit-chart-gridline { stroke: var(--border); stroke-width: 1; }

.audit-chart-y-label { fill: var(--fg-muted); font-size: 11px; }

.audit-chart-axis-label { fill: var(--fg-muted); font-size: 12px; }
.audit-chart-axis-label--sub { fill: var(--fg-muted); opacity: 0.75; font-size: 11px; }
/* Datum des Tests, dritte Zeile unter der Welle – noch etwas leiser. */
.audit-chart-axis-label--date { fill: var(--fg-muted); opacity: 0.6; font-size: 10.5px; }

/* --- Scroll-Kasten -------------------------------------------------------
   NUR waagerecht scrollen – senkrecht scrollt die Seite wie gewohnt. Die
   Kopfzeile kann deshalb NICHT per position:sticky kleben (ein Scroll-
   Container fängt Sticky ab); sie wird als fliegende Kopie eingeblendet
   (.aud-float, siehe assets/js/audit.js).
   ------------------------------------------------------------------------- */
.audit-wrap {
    overflow-x: auto;
    padding-bottom: 14px;
}

/* --- Tabelle -------------------------------------------------------------- */
.audit-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.92rem;
}

.audit-table th,
.audit-table td { padding: 0.4rem 0.25rem; }

.audit-table thead th {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--fg-muted);
    vertical-align: bottom;
    padding-top: 0.9rem;
    padding-bottom: 0.7rem;
}

/* --- Spalten als eigene Kacheln -------------------------------------------
   Jede Spaltengruppe (Platz + Shop, jede Welle, Trend, Entwicklung, Gesamt)
   steht auf einer eigenen weißen Fläche. Umgesetzt über die Zellenfarbe: die
   Zellen einer Gruppe tragen die Kartenfarbe, die Lücke dazwischen entsteht
   aus einem DURCHSICHTIGEN linken Rand (background-clip: padding-box) – so
   bleibt die Tabelle eine ganz normale Tabelle und die Spaltenbreiten
   rechnen sich weiter automatisch aus.
   ------------------------------------------------------------------------- */
.audit-table th,
.audit-table td {
    background: var(--card-bg);
    background-clip: padding-box;
}

.audit-table .is-gstart { border-left: 10px solid transparent; }

/* Zwischenräume und Randspalten bleiben frei. */
.audit-table .aud-spacer,
.audit-table .aud-rowmenu,
.audit-table .aud-th-rowmenu,
.audit-table .aud-th-add { background: none; }

/* Ecken: oben an der Kopfzeile, unten an der letzten Zeile.
   Bei background-clip:padding-box rechnet der Browser die INNERE (sichtbare)
   Rundung als radius MINUS Randbreite je Achse aus. Die linke Lücke
   (.is-gstart) legt links 10px Rand an, oben/unten aber 0 – ohne Ausgleich
   würde die sichtbare Ecke dadurch oval statt rund ("nicht sauber"). Der
   außen gesetzte Wert gleicht das für die LINKEN Ecken aus: 10px mehr in der
   Breite, damit am Ende überall dieselbe sichtbare Rundung (14px) steht. */
.audit-table thead .is-gstart { border-top-left-radius: calc(var(--radius-sq) + 10px) var(--radius-sq); }
.audit-table thead .is-gend,
.audit-table thead .is-gstart.is-gend { border-top-right-radius: var(--radius-sq); }
.audit-table tbody .aud-lastrow .is-gstart { border-bottom-left-radius: calc(var(--radius-sq) + 10px) var(--radius-sq); }
.audit-table tbody .aud-lastrow .is-gend,
.audit-table tbody .aud-lastrow .is-gstart.is-gend { border-bottom-right-radius: var(--radius-sq); }

/* Trennlinie zwischen den Zeilen – als innerer Schatten, damit sie die
   abgerundeten Ecken nicht überzeichnet. */
.audit-table tbody tr + tr th,
.audit-table tbody tr + tr td { box-shadow: inset 0 1px 0 var(--border); }
.audit-table tbody tr + tr .aud-spacer,
.audit-table tbody tr + tr .aud-rowmenu { box-shadow: none; }

/* Die Tabelle ist width:100%, bei wenigen Wellen bleibt also Breite übrig. Der
   Browser verteilt sie bei table-layout:auto PROPORTIONAL zu den angegebenen
   Breiten – ohne Angabe landete das meiste in der Shop-Spalte und Name und
   Marker rutschten weit auseinander. (max-width hilft nicht, das ist für
   Tabellenzellen nur ein Vorschlag.)
   Mit width:1px bekommen beide Spalten fast nichts vom Rest ab und schrumpfen
   auf ihre Inhaltsbreite; min-width bleibt als Untergrenze wirksam. Der Rest
   geht damit an die Wellen-Spalten – die dürfen sich ruhig ausbreiten. */
.aud-th-rank    { width: 38px; text-align: center; vertical-align: top; }
.aud-th-shop    { text-align: left; min-width: 168px; width: 1px; }

.aud-th-wave  { text-align: center; min-width: 82px; }
.aud-th-group { text-align: center; min-width: 120px; }
.aud-th-add   { width: 10px; padding: 0; }
.aud-th-avg   { width: 116px; text-align: center; vertical-align: top; }
.aud-spacer   { width: 10px; padding: 0; }

/* Kleingestellte Welle: bleibt sichtbar, nimmt aber deutlich weniger Platz
   ein (nur die Zahl, kein Balken). */
.aud-th-wave--off { min-width: 52px; width: 1px; }

/* Trend, Entwicklung und Zeilenmenü – feste, schmale Spalten.
   Die Wellen-Köpfe sind zweizeilig (Name, darunter das Geschäftsjahr). Damit
   diese Beschriftungen nicht am unteren Rand kleben, richten sie sich oben
   aus – also auf der Zeile des Wellen-NAMENS. */
.aud-th-trend   { width: 116px; text-align: center; vertical-align: top; }
.aud-th-spark   { width: 116px; text-align: center; vertical-align: top; }
.aud-th-rowmenu { width: 34px;  padding: 0; }

/* Sortier-Köpfe (Shop / Ø) */
.aud-sort-btn {
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--fg-muted);
    background: none;
    border: none;
    appearance: none;
    padding: 0.15rem 0.3rem;
    border-radius: var(--radius-btn);
    cursor: pointer;
    white-space: nowrap;
}

.aud-sort-btn:hover { background: var(--app-bg); color: var(--fg); }
.aud-sort-btn.is-active { color: var(--fg); }

.aud-shop-count {
    margin-left: 0.4rem;
    font-size: 0.72rem;
    color: var(--fg-muted);
    white-space: nowrap;
}

/* Das "+" für die Marker sitzt direkt hinter der Shop-Zahl. */
.aud-th-shop .aud-add-mcol { margin-left: 0.9rem; vertical-align: middle; }

/* Zweite Zeile in einem Spaltenkopf („Gesamt“ / „Ø Ergebnis“). */
.aud-th-sub {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--fg-muted);
    line-height: 1.2;
}

/* --- Ø-Zeile unter allen Shops ------------------------------------------- */
.aud-avgrow td { padding-top: 0.55rem; padding-bottom: 0.55rem; }
.aud-avgrow-cell { text-align: center; }

.aud-avgrow-label {
    font-weight: 700;
    font-size: 0.85rem;
    padding-left: 0.45rem !important;
}

/* Kräftigere Linie über der Ø-Zeile als zwischen zwei Shops. */
.audit-table tbody tr.aud-avgrow th,
.audit-table tbody tr.aud-avgrow td { box-shadow: inset 0 2px 0 var(--border); }
.audit-table tbody tr.aud-avgrow .aud-spacer,
.audit-table tbody tr.aud-avgrow .aud-rowmenu { box-shadow: none; }

/* Wellenkopf als Knopf (öffnet das Spalten-Menü): Name oben, FY klein darunter */
.aud-wave-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    width: 100%;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--fg);
    background: none;
    border: none;
    appearance: none;
    padding: 0.15rem;
    border-radius: var(--radius-btn);
    cursor: pointer;
    /* Senkrecht scrollen bleibt möglich, waagerecht ziehen wir die Spalte. */
    touch-action: pan-y;
}

/* Beim Überfahren dasselbe graue Feld wie bei Shopnamen und Einzelwerten –
   so ist der Kopf erkennbar ein Knopf, ohne aus der Reihe zu fallen. */
.aud-wave-btn { transition: background-color 0.12s; }

.aud-wave-btn:hover,
.aud-wave-btn:focus-visible {
    background: color-mix(in srgb, var(--fg) 6%, var(--card-bg));
}

.aud-wave-btn.is-active { background: var(--app-bg); }

/* Der Wellenkopf öffnet sein Menü auch ohne Konfig-Recht, solange die Ansicht
   eine eigene ist (GL, PM, RSSM, NL – CAN_WAVES in audit.js). Stumpf wird er
   nur im Vergleich ohne Rechte und in der leeren Ansicht. Der Shopname
   bleibt bewusst einer: er führt in jeder Ansicht ins Blatt des Shops. */
.audit-card[data-can-config="0"][data-scope-kind="layout"] .aud-wave-btn,
.audit-card[data-can-config="0"][data-scope-kind="none"] .aud-wave-btn {
    cursor: default;
    touch-action: auto;
}

.audit-card[data-can-config="0"][data-scope-kind="layout"] .aud-wave-btn:hover,
.audit-card[data-can-config="0"][data-scope-kind="none"] .aud-wave-btn:hover {
    background: none;
}

/* Ohne Ziehen an der Spalte braucht die Shop-Zeile auch keine Touch-Sperre. */
.audit-card[data-can-config="0"] .aud-shop-btn { touch-action: auto; }

.aud-wave-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

.aud-wave-fy { font-size: 0.66rem; color: var(--fg-muted); line-height: 1.1; }

/* Kleiner Sortier-Pfeil – nur an der aktiv sortierten Spalte */
.aud-caret { margin-left: 0.15em; font-size: 0.7em; color: var(--fg-muted); }

/* Kleiner Plus-Knopf in der Tabelle. Wellen kommen inzwischen über die Leiste
   dazu – geblieben ist er beim Einrichten einer Gruppierung (.aud-add-group,
   "Gruppe hinzufügen"). */
.aud-add-wave {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    background: var(--input-bg);
    color: var(--fg-muted);
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease;
}

.aud-add-wave:hover,
.aud-add-wave:focus-visible { border-color: var(--accent); color: var(--accent); }
.aud-add-wave svg { width: 16px; height: 16px; display: block; }

/* Spalten per Long-Press verschieben: alle wackeln, die gezogene klebt am Zeiger */
@keyframes aud-wiggle {
    0%   { transform: rotate(-1.1deg); }
    50%  { transform: rotate(1.1deg); }
    100% { transform: rotate(-1.1deg); }
}

.audit-table.is-reordering .aud-wave-btn {
    animation: aud-wiggle 0.24s ease-in-out infinite;
    cursor: grab;
}

.audit-table.is-reordering .aud-wave-btn.is-dragging {
    animation: none;
    position: relative;
    z-index: 5;
    cursor: grabbing;
    background: var(--card-bg);
    box-shadow: 0 8px 20px rgb(0 0 0 / 0.18);
}

.audit-table th.is-drop {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

@media (prefers-reduced-motion: reduce) {
    .audit-table.is-reordering .aud-wave-btn { animation: none; }
}

/* --- Shop-Spalte ---------------------------------------------------------
   Name + Straße stehen ganz links, der Papierkorb hängt absolut daneben und
   kostet damit KEINE Spaltenbreite. Der Flex-Kasten liegt IM td – das td
   selbst darf nicht display:flex sein, das zerschießt die Spalten.
   ------------------------------------------------------------------------- */
.aud-shop { padding-left: 0.3rem; }

.aud-shop-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.aud-shop-btn {
    display: block;
    min-width: 0;
    flex: 1;
    text-align: left;
    font: inherit;
    background: none;
    border: none;
    appearance: none;
    padding: 0.15rem 0.25rem;
    border-radius: var(--radius-btn);
    cursor: pointer;
    color: var(--fg);
}

.aud-shop-btn:hover { background: var(--app-bg); }

/* Beide Zeilen einzeilig halten: zu langer Text wird gekürzt (…), statt die
   Tabelle auseinanderzuziehen. */
.aud-city,
.aud-street {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aud-city { font-weight: 600; line-height: 1.25; }

.aud-street {
    color: var(--fg-muted);
    font-size: 0.76rem;
    padding-left: 0.5rem;
    line-height: 1.2;
}


/* Marker-Badge rechts neben dem Namen (Farbe kommt inline aus dem Hex-Wert) */
/* Name + Anhänger in einer Zeile: der Anhänger klebt am Namen, statt am
   rechten Rand der Spalte zu stehen. Der Name darf davor kürzen (…). */
/* Mittig ausgerichtet – das Kürzel bekommt seinen Feinversatz über .aud-tag
   (Grundlinien-Ausrichtung scheidet aus: der Name kürzt per overflow und
   hätte damit keine echte Grundlinie mehr). */
.aud-name-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
}

.aud-name-row .aud-city { flex: 0 1 auto; }

/* Das Kürzel des Vertriebswegs steht schlicht als Text neben dem Namen:
   dünner und eine Spur kleiner, damit der Name die Zeile führt. Die Farbe
   kommt inline aus dem Kontrollzentrum (leer = gedämpftes Grau). */
.aud-tag {
    flex: none;
    position: relative;
    /* Versalien wirken mittig ausgerichtet zu hoch – 1,5px tiefer sitzt das
       Kürzel optisch auf der Zeile des Namens. */
    top: 1.5px;
    color: var(--fg-muted);
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* --- Freie Marker-Spalten -------------------------------------------------
   Angelegt über das "+" links neben den Wellen, je Zelle eine Plakette in der
   gewählten Farbe. Weiße Schrift darauf trägt in hell wie dunkel, deshalb
   ohne eigene Regel für den Dark Mode.
   ------------------------------------------------------------------------- */
/* Die Marker stehen seit dem Umbau als Plakette hinter der Straße – sie haben
   keine eigene Spalte mehr (angelegt werden sie über das "+" neben der
   Shop-Zahl). Ein leerer Platz zeigt nur ein blasses "+". */
.aud-mcell {
    display: inline-flex;
    align-items: center;
    flex: none;
    border-radius: 5px;
    cursor: pointer;
}

.audit-card[data-can-config="0"] .aud-mcell { cursor: default; }
.aud-mcell--inline:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.audit-card[data-can-config="0"] .aud-mcell:hover { background: none; }

/* Straße und Marker in einer Zeile; die Adresse kürzt vor den Plaketten. */
.aud-street-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
}

/* Die Straße beginnt an derselben Kante wie der Ort – kein Einzug. */
.aud-street-row .aud-street { padding-left: 0; min-width: 0; }

.aud-marker {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 5px;
    background: var(--vf-red);
    color: var(--vf-white);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.5;
    white-space: nowrap;
}

/* Kopf einer Marker-Spalte – wie ein Wellenkopf, nur einzeilig. */
.aud-mcol-btn {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--fg);
    background: none;
    border: none;
    appearance: none;
    padding: 0.15rem 0.3rem;
    border-radius: var(--radius-btn);
    cursor: pointer;
}

.aud-mcol-btn:hover { background: var(--app-bg); }
.audit-card[data-can-config="0"] .aud-mcol-btn { cursor: default; }
.audit-card[data-can-config="0"] .aud-mcol-btn:hover { background: none; }

/* Das "+" der Marker-Spalten ist etwas kleiner als das der Wellen. */
.aud-add-mcol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    background: var(--input-bg);
    color: var(--fg-muted);
    /* Zurückhaltend: es ist ein Werkzeug, keine Aussage über den Shop. */
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.aud-add-mcol:hover,
.aud-add-mcol:focus-visible { opacity: 1; border-color: var(--accent); color: var(--accent); }
.aud-add-mcol svg { width: 11px; height: 11px; display: block; }

/* --- Platzierung (ganz links) ---------------------------------------------
   Platz 1 bis 3 tragen eine Medaille, danach steht nur die Zahl. Die Farben
   sind bewusst die erwarteten (Gold, Silber, Bronze) statt der Marken-Palette:
   hier zählt, dass man sie ohne Legende versteht.
   ------------------------------------------------------------------------- */
.aud-rankcol { text-align: center; padding-left: 0.62rem; padding-right: 0; }

.aud-rank {
    display: inline-block;
    min-width: 22px;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 22px;
    color: var(--fg);
    font-variant-numeric: tabular-nums;
}

.aud-rank--none { color: var(--fg-muted); font-weight: 400; }

.aud-rank--medal {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    color: var(--vf-white);
    font-size: 0.8rem;
    box-shadow: inset 0 -1px 2px rgb(0 0 0 / 0.18);
}

.aud-rank--m1 { background: var(--vf-medal-gold); }
.aud-rank--m2 { background: var(--vf-medal-silver); }
.aud-rank--m3 { background: var(--vf-medal-bronze); }

/* --- Zeilenmenü (drei Punkte, ganz rechts) -------------------------------
   Anders als der frühere Papierkorb steht es IMMER da – man soll nicht erst
   mit der Maus über die Zeile fahren müssen, um zu ahnen, dass es etwas gibt.
   ------------------------------------------------------------------------- */
.aud-rowmenu { text-align: center; padding: 0; }

.aud-row-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    /* Eckig wie alle Icon-Knöpfe der Seite – nicht rund. */
    border-radius: var(--radius-sm);
    background: none;
    color: var(--fg-muted);
    cursor: pointer;
}

.aud-row-menu svg { width: 15px; height: 15px; display: block; }

/* Der Knopf steht neben den Kacheln auf dem Seitenhintergrund – ein Hover in
   var(--app-bg) wäre dort Grau auf Grau und damit unsichtbar. Deshalb eine
   getönte Fläche, die auf beiden Untergründen trägt. */
.aud-row-menu:hover,
.aud-row-menu:focus-visible {
    background: color-mix(in srgb, var(--fg) 12%, transparent);
    color: var(--fg);
}

/* --- Wert-Zellen ---------------------------------------------------------- */
.aud-cell { text-align: center; cursor: pointer; }
.audit-card[data-can-config="0"] .aud-cell { cursor: default; }
.audit-card[data-can-config="0"] .aud-cell:hover { background-color: var(--card-bg); }

/* Bezugspunkt für das Symbol: der Inhalt selbst, nicht die Zelle. Sonst
   säße das Symbol auf breiten Spalten weit rechts statt an der Pille. */
.aud-cell-inner { position: relative; display: inline-block; }
.aud-cell:hover { background-color: color-mix(in srgb, var(--fg) 6%, var(--card-bg)); }

.aud-cell-plus { display: inline-flex; opacity: 0.3; color: var(--fg-muted); }
.aud-cell-plus svg { width: 14px; height: 14px; }
.aud-cell:hover .aud-cell-plus { opacity: 0.9; }

/* Symbol liegt auf der rechten Kante der Pille, mehr darauf als daneben –
   es verschiebt nichts. Der PNG-Export nutzt denselben Versatz
   (siehe assets/js/audit.js). */
.aud-sticker {
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.25));
}

.audit-table.is-stickering .aud-cell { cursor: copy; }
/* background-color statt der Kurzform: sonst fiele background-clip zurück auf
   border-box und die Farbe liefe in die Lücken zwischen den Spalten-Kacheln. */
.audit-table.is-stickering .aud-cell:hover {
    background-color: color-mix(in srgb, var(--accent) 14%, var(--card-bg));
}

/* --- Ergebnis: Zahl mit Fortschrittsbalken --------------------------------
   Statt einer Pille steht die Zahl für sich, darunter ein Balken, der sich
   mit dem Prozentwert füllt. Zwei Zeilen mit gleichem Ergebnis sehen damit
   gleich aus, ein Unterschied fällt über die Balkenlänge sofort auf.
   ------------------------------------------------------------------------- */
.aud-val {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.22rem;
    min-width: 62px;
    text-align: center;
}

/* Die Zahl steht am linken Anfang des Balkens – so beginnen Zahl und Balken
   in jeder Zeile an derselben Kante und die Spalte liest sich von links. */
.aud-val-num {
    font-weight: 700;
    font-size: 0.86rem;
    line-height: 1.15;
    text-align: left;
    padding-left: 0.1rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.aud-val-num--ok    { color: var(--lv-ok); }
.aud-val-num--mid   { color: var(--lv-mid); }
.aud-val-num--bad   { color: var(--lv-bad); }
.aud-val-num--empty { color: var(--fg-muted); font-weight: 400; }

.aud-val-bar {
    display: block;
    height: 3px;
    border-radius: 999px;
    background: var(--app-bg);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.05);
    overflow: hidden;
}

.aud-val-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width 0.25s ease;
}

.aud-val-fill--ok  { background: var(--lv-ok); }
.aud-val-fill--mid { background: var(--lv-mid); }
.aud-val-fill--bad { background: var(--lv-bad); }

/* Ohne Balken (Ø-Spalte) und kleingestellte Spalte: die Zahl steht dann für
   sich und darf wieder mittig sitzen. Kleingestellte Wellen rechnen ganz
   normal mit, sie nehmen nur weniger Platz ein. */
.aud-val--nobar .aud-val-num,
.aud-val--sm .aud-val-num { text-align: center; padding-left: 0; }

.aud-val--sm { min-width: 0; }
.aud-val--sm .aud-val-num { font-size: 0.72rem; font-weight: 600; opacity: 0.75; }

@media (prefers-reduced-motion: reduce) {
    .aud-val-fill { transition: none; }
}

/* Ergebnis ohne Einzelwerte, während Abschnitte ausgeblendet sind: sichtbar,
   aber deutlich zurückgenommen – es zählt in keiner Rechnung mit. Der
   PNG-Export nutzt dieselbe Deckkraft (siehe value() in assets/js/audit.js). */
.aud-val--ghost { opacity: 0.3; }

/* --- Kleingestellte Wellen-Spalte ---------------------------------------- */
/* Kleingestellte Welle: die Kachel dieser Spalte wird gedämpft – deshalb auf
   Kartenfarbe gemischt, nicht auf durchsichtig (sonst schiene die Seite durch). */
.aud-cell--off,
.audit-table thead th.aud-th-wave--off,
.aud-foot--off { background-color: color-mix(in srgb, var(--app-bg) 60%, var(--card-bg)); }

.aud-th-wave--off .aud-wave-btn.is-off {
    font-size: 0.68rem;
    font-weight: 400;
    color: var(--fg-muted);
    padding-inline: 0.1rem;
}

.aud-th-wave--off .aud-wave-fy { font-size: 0.6rem; }
.aud-cell--off .aud-dist-n     { font-size: 0.72rem; opacity: 0.75; }

/* Das kleine „i“ dazu sitzt oben links am Wert und schiebt nichts. */
.aud-cell-info {
    position: absolute;
    left: -7px;
    top: -5px;
    display: flex;
    color: var(--fg-muted);
    cursor: help;
}

.aud-cell-info svg { width: 13px; height: 13px; }

/* Kurzhinweis wie bei den Icon-Knöpfen (.icon-btn::after). */
.aud-cell-info::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--vf-slate-grey);
    color: var(--vf-white);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 12;
}

.aud-cell-info:hover::after { opacity: 1; transform: translateX(-50%); }

@media (hover: none) { .aud-cell-info::after { display: none; } }

/* Eingabefeld in der Zelle. .form-input ist ein Block-Element: das
   text-align:center der Zelle zentriert nur den TEXT darin, nicht das Feld
   selbst – deshalb die automatischen Seitenränder. Sonst klebt das Feld in
   leeren Zellen links, während die Pille daneben mittig steht. */
/* Beim Bearbeiten sitzt das Feld genau auf dem Platz der Zahl: gleiche Breite
   wie .aud-val, gleiche Schriftgröße – nur eben oval und mit Rahmen. */
.aud-edit {
    width: 62px;
    max-width: 100%;
    padding: 0.14rem 0.3rem;
    margin: 0 auto;
    text-align: center;
    font-size: 0.86rem;
    font-weight: 700;
    border-radius: 999px;
    min-height: 0;
}

/* --- Trend und Entwicklung ------------------------------------------------
   Zwischen dem "+" und dem Ø: erst wie sich der Shop bewegt hat, dann wo er
   steht. Beides bezieht sich auf die eingeblendeten Wellen.
   ------------------------------------------------------------------------- */
.aud-trendcol { text-align: center; white-space: nowrap; }
.aud-sparkcol { text-align: center; line-height: 0; }

.aud-trend {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Alle Plaketten gleich breit: nebeneinander liest sich die Spalte sonst
       wie ein Flickenteppich, weil „-1 %“ und „-10,3 %“ verschieden breit
       ausfallen. Der Wert reicht für die längste vorkommende Beschriftung. */
    min-width: 72px;
    gap: 0.25rem;
    padding: 0.16rem 0.4rem;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.aud-trend-arrow { display: inline-flex; }
.aud-trend-arrow svg { width: 11px; height: 11px; display: block; }

.aud-trend--up {
    color: var(--lv-ok);
    background: color-mix(in srgb, var(--lv-ok) 12%, transparent);
}

.aud-trend--up .aud-trend-arrow svg { transform: rotate(-45deg); }

.aud-trend--down {
    color: var(--lv-bad);
    background: color-mix(in srgb, var(--lv-bad) 12%, transparent);
}

.aud-trend--down .aud-trend-arrow svg { transform: rotate(45deg); }

.aud-trend--flat {
    color: var(--fg-muted);
    background: var(--app-bg);
}

.aud-trend--none { color: var(--fg-muted); font-weight: 400; background: none; }

.aud-spark { display: inline-block; vertical-align: middle; overflow: visible; }
.aud-spark-line { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.aud-spark-dot  { stroke: none; }

.aud-spark--ok  .aud-spark-line { stroke: var(--lv-ok); }
.aud-spark--mid .aud-spark-line { stroke: var(--lv-mid); }
.aud-spark--bad .aud-spark-line { stroke: var(--lv-bad); }

.aud-spark--ok  .aud-spark-dot { fill: var(--lv-ok); }
.aud-spark--mid .aud-spark-dot { fill: var(--lv-mid); }
.aud-spark--bad .aud-spark-dot { fill: var(--lv-bad); }

.aud-spark-none { color: var(--fg-muted); font-size: 0.8rem; line-height: 1.6; }

/* Beschriftung ohne Sortierung (Trend, Entwicklung) mit „i“ daneben. */
.aud-th-label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--fg-muted);
    white-space: nowrap;
}


/* Auf schmalen Geräten fliegt die Entwicklung raus: die Tabelle scrollt
   ohnehin waagerecht, und Trend plus Ø sagen dort das Wesentliche. Beide
   Regeln greifen auch im Klon der fliegenden Kopfzeile – die Spalten
   bleiben dadurch deckungsgleich. */
@media (max-width: 720px) {
    .aud-th-spark,
    .aud-sparkcol { display: none; }
}

/* --- Ø-Spalte und Fußzeile ------------------------------------------------ */
.aud-avg { text-align: center; border-left: 1px dashed var(--border); }
.aud-foot { text-align: center; }
.aud-foot-total { border-left: 1px dashed var(--border); }

/* Trennstrich nur über der OBERSTEN Fußzeile (es sind mehrere). */
.audit-table tfoot tr.aud-foot-first td {
    border-top: 2px solid var(--border);
    padding-top: 0.6rem;
}

.aud-foot-label {
    font-weight: 600;
    font-size: 0.82rem;
    text-align: left;
    padding-left: 0.4rem;
}

.aud-foot-n { font-size: 0.7rem; color: var(--fg-muted); }
.aud-foot-lvl { display: inline-flex; align-items: center; gap: 0.4rem; }

/* Zahlen der Verteilung – exakt im Maß der Ergebnis-Zahlen, damit die Spalten
   fluchten. Ohne Fläche wie diese: die Fußzeile soll die Tabelle nicht
   überstimmen. */
.aud-dist-n {
    display: inline-block;
    min-width: 62px;
    font-size: 0.86rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.aud-dist-n--ok  { color: var(--lv-ok); }
.aud-dist-n--mid { color: var(--lv-mid); }
.aud-dist-n--bad { color: var(--lv-bad); }

/* --- Fliegende Kopfzeile -------------------------------------------------
   Exakte Kopie der Tabelle, auf Kopfzeilenhöhe beschnitten. pointer-events:
   none – sie ist reine Orientierung, geklickt wird in der echten Tabelle.
   WICHTIG: der Rahmen läuft über inset-Schatten, NICHT über border – ein
   echter Rahmen würde den Inhalt um 1px verschieben und die Spalten gegen
   die Tabelle darunter verdrehen.
   ------------------------------------------------------------------------- */
.aud-float {
    position: fixed;
    z-index: 40;                 /* unter der Kopfleiste (50) */
    overflow: hidden;
    box-sizing: border-box;
    padding: 4px 0;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--card-bg) 78%, transparent);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.14), inset 0 0 0 1px var(--border);
    pointer-events: none;
}

.aud-float[hidden] { display: none; }
.aud-float .audit-table { margin: 0; }

/* Die Kopfzellen sind sonst deckend – im Glas müssen sie durchlassen.
   Senkrecht schlanker, die WAAGERECHTE Polsterung bleibt unangetastet
   (sonst wandern die Spalten gegen die echte Tabelle). */
.aud-float .audit-table thead th {
    background: transparent;
    box-shadow: none;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    vertical-align: middle;
}

/* Das "+" führt im Klon ins Leere – ausblenden. visibility statt display:
   die BREITE muss erhalten bleiben, sonst rechnet das Auto-Layout andere
   Spaltenbreiten als in der echten Tabelle. Die HÖHE dagegen kollabiert,
   sonst macht der Knopf die Leiste unnötig hoch. */
.aud-float .aud-add-wave,
.aud-float .aud-add-mcol {
    visibility: hidden;
    height: 0;
    min-height: 0;
    padding: 0;
    border: 0;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .aud-float { background: var(--card-bg); }
}

/* --- Gruppen-Ansicht ------------------------------------------------------ */
.audit-groupview[hidden] { display: none; }

.audit-table--groups .aud-th-shop { min-width: 140px; }

.aud-group-name { display: block; font-weight: 600; color: var(--fg); font-size: 0.85rem; }

.aud-grow { cursor: pointer; }
.aud-grow:hover td { background-color: var(--app-bg); }

.aud-grow-label {
    font-weight: 600;
    text-align: left;
    padding-left: 0.4rem;
    white-space: nowrap;
}

.aud-grow-caret {
    /* Glyph horizontal in seiner Box zentrieren, damit die 90°-Drehung im
       aufgeklappten Zustand um die Mitte läuft und nicht seitlich verspringt.
       inline-block (nicht -flex) hält die vertikale Lage wie im zugeklappten
       Zustand. */
    display: inline-block;
    width: 1em;
    text-align: center;
    color: var(--fg-muted);
    transition: transform 0.15s ease;
    transform-origin: 50% 50%;
}

.aud-grow.is-open .aud-grow-caret { transform: rotate(90deg); }

.aud-gcell { text-align: center; white-space: nowrap; }

.aud-gcell-name {
    display: block;
    max-width: 16rem;
    margin: 0 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.74rem;
    color: var(--fg-muted);
    line-height: 1.2;
}

.aud-gsub td { padding-top: 0.15rem; padding-bottom: 0.15rem; }
.aud-gsub .aud-val { min-width: 54px; }
.aud-gsub .aud-val-num { font-size: 0.74rem; }
.aud-gcell--sub .aud-gcell-name { font-size: 0.72rem; }

.aud-group-empty { color: var(--fg-muted); padding: 1rem 0.4rem; text-align: center; }

/* --- Kriterien-Vergleich unter der Gruppierung ----------------------------
   Zwei Blöcke: erst die größten Rückstände der Referenzgruppe (linkeste
   Spalte), dann ihre größten Vorsprünge. Jede Zelle ist eine Zahl auf einem
   eingefärbten Balken – die Länge zeigt den Wert, die Farbe die Ampelstufe.
   ------------------------------------------------------------------------- */
.aud-crit { margin-top: 2rem; }

.aud-crit-table { margin-top: 1.4rem; }
.aud-crit-table:first-child { margin-top: 0; }

.aud-crit-table thead th {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
    vertical-align: bottom;
    white-space: nowrap;
}

.aud-crit-th-nr    { width: 52px; }
.aud-crit-th-text  { width: auto; }
.aud-crit-th-group { width: 150px; }
.aud-crit-th-delta { width: 170px; text-align: right; }

.aud-crit-nr {
    color: var(--fg-muted);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.aud-crit-text {
    max-width: 30rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.86rem;
}

.aud-crit-cellcol { padding-right: 0.6rem; }

/* Der Balken liegt HINTER der Zahl: so bleibt die Zahl immer lesbar, auch
   wenn der Balken kurz ist. */
.aud-crit-cell {
    position: relative;
    display: inline-block;
    min-width: 118px;
    padding: 0.2rem 0.45rem;
    border-radius: 5px;
    background: var(--app-bg);
    overflow: hidden;
    font-size: 0.82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.aud-crit-cell--empty {
    background: none;
    color: var(--fg-muted);
    font-weight: 400;
    min-width: 0;
}

.aud-crit-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 5px;
}

.aud-crit-fill--ok  { background: color-mix(in srgb, var(--lv-ok) 22%, transparent); }
.aud-crit-fill--mid { background: color-mix(in srgb, var(--lv-mid) 22%, transparent); }
.aud-crit-fill--bad { background: color-mix(in srgb, var(--lv-bad) 22%, transparent); }

.aud-crit-num { position: relative; }

.aud-crit-delta {
    text-align: right;
    font-weight: 700;
    font-size: 0.84rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.aud-crit-delta--up   { color: var(--lv-ok); }
.aud-crit-delta--down { color: var(--lv-bad); }
.aud-crit-delta--flat { color: var(--fg-muted); }

.aud-crit-empty { color: var(--fg-muted); padding: 1rem 0.4rem; }

/* --- Gruppierung einrichten -----------------------------------------------
   Dieselbe Tabelle wie die fertige Ansicht, aber ohne Wellen und Werte: die
   Spaltenköpfe werden zu Knöpfen (Menü), in den Zellen stehen die Shops als
   Chips mit × zum Herausnehmen, unter jeder Spalte der Picker-Auslöser.
   ------------------------------------------------------------------------- */
/* Der Kopf trägt die Gruppenfarbe als leicht durchscheinenden Grund (kommt
   inline aus audit.js) – kein Rahmen, kein Strich darunter. */
.aud-group-btn {
    display: block;
    width: 100%;
    padding: 0.3rem 0.5rem;
    border: 0;
    border-radius: 4px;
    background: none;
    cursor: pointer;
    font: inherit;
    text-align: center;
}

/* Beim Überfahren eine Spur kräftiger – ohne die Farbe zu wechseln. */
.aud-group-btn:hover,
.aud-group-btn:focus-visible { filter: saturate(1.35) brightness(0.97); }

.audit-table--edit td { vertical-align: top; }

.aud-gcell--edit { padding: 0.2rem 0.35rem; }

.aud-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    padding: 0.22rem 0.3rem 0.22rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--card-bg);
    font-size: 0.8rem;
}

.aud-chip-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aud-chip-x {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--fg-muted);
    cursor: pointer;
}

.aud-chip-x svg { width: 13px; height: 13px; transform: rotate(45deg); }
.aud-chip-x:hover, .aud-chip-x:focus-visible { color: var(--accent); }

.aud-pickbtn {
    width: 100%;
    margin-bottom: 0.3rem;
    padding: 0.3rem 0.4rem;
    border: 1px dashed var(--border);
    border-radius: 4px;
    background: none;
    color: var(--fg-muted);
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}

.aud-pickbtn:hover,
.aud-pickbtn:focus-visible { border-style: solid; color: var(--fg); background: var(--app-bg); }

.aud-edit-note {
    margin: 0.8rem 0 0;
    color: var(--fg-muted);
    font-size: 0.82rem;
}

/* Beim Einrichten stehen keine Werte in der Tabelle – die Ampel-Legende hätte
   dort nichts zu erklären. */
.audit-card.is-editing-groups .audit-legend { display: none; }

/* --- Popover-Menü (Wellenkopf, Shop, Symbole) -----------------------------
   Trägt zusätzlich .dropdown-panel: Rahmen, Innenabstand, Titel und Einträge
   sind damit dieselben wie im Filtermenü der schwebenden Leiste. Hier stehen
   nur die Dinge, die dort der .dropdown-Rahmen erledigt – die Lage setzt
   audit.js von Hand (die Knöpfe stehen in der Tabelle). Ohne Zipfel: an einer
   Tabellenzelle zeigte er ins Leere und wirkte wie ein eigenes Symbol.
   ------------------------------------------------------------------------- */
.aud-menu {
    display: block;   /* .dropdown-panel ist erst im offenen Menü sichtbar */
    right: auto;      /* nur left/top aus dem Skript zählen */
    min-width: 240px;
    z-index: 200;     /* über der schwebenden Leiste unten (60) */
    /* Diese Menüs tragen auch Formulare (Name, Adresse, Marker …) und dürfen
       deshalb höher werden als ein reines Auswahlmenü. Die genaue Höhe setzt
       audit.js nach dem freien Platz am Knopf. */
    max-height: min(85vh, 48rem);
    animation: aud-menu-in 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes aud-menu-in {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .aud-menu { animation: none; }
}

.aud-menu-note { padding: 0 0.75rem 0.5rem; font-size: 0.72rem; color: var(--fg-muted); }

/* --- Details ein-/ausblenden (Auge im Dock) ------------------------------
   Zeile: Name links, Ø rechts. Das Häkchen der Dropdown-Zeile bedeutet hier
   „wird eingerechnet“ – es steht also andersherum als sonst und verschwindet,
   sobald der Eintrag abgewählt ist.

   Zwei Ebenen: Abschnitte des Bogens, darunter die Themen (kleiner, weil sie
   quer dazu liegen und die Abschnitte die Gliederung vorgeben).
   ------------------------------------------------------------------------- */
.aud-detail-item { padding-top: 0.4rem; padding-bottom: 0.4rem; }
.aud-detail-item::before { opacity: 1; }
.aud-detail-item.is-off::before { opacity: 0; }

.aud-detail-name {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.aud-detail-val {
    flex: none;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Farbpunkt des Themas – dieselbe Farbe wie das Kürzel in der Konfiguration. */
.aud-detail-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 999px;
}

.aud-sec-item,
.aud-sec-item .aud-detail-val { font-size: 0.85rem; }

.aud-topic-item,
.aud-topic-item .aud-detail-val { font-size: 0.78rem; }

.aud-topic-item::before { width: 0.45em; height: 0.75em; }

.aud-detail-item.is-off .aud-detail-name { text-decoration: line-through; }

.aud-detail-item.is-off .aud-detail-name,
.aud-detail-item.is-off .aud-detail-val {
    color: var(--fg-muted);
    opacity: 0.7;
}

/* Steht über der Tabelle, sobald Details abgewählt sind – die Zahlen darunter
   sind dann nicht mehr das gespeicherte Gesamtergebnis. Nutzt den normalen
   Hinweis-Kasten (.hint, Aqua Blue), nur etwas enger an der Tabelle. */
.audit-filter-note { margin-bottom: 1rem; }

/* Nur das Auge-Menü: schmaler halten. Der Hinweis oben ist der längste Inhalt
   und würde das Menü sonst unnötig breit ziehen – er darf ruhig umbrechen. */
.aud-menu--sections { max-width: 26rem; }

/* Blauer Melder im Auge-Menü, oben über der Auswahl: bleibt stehen, solange es
   Ergebnisse ohne Einzelwerte gibt. Bewusst als eigener Kasten mit Luft ringsum
   (wie .hint auf den Seiten) statt als Band über die volle Breite – so ist er
   als Hinweis von uns zu erkennen und nicht als Teil der Liste. */
.aud-menu-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.35rem 0.35rem 0.7rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--vf-aqua-blue);
    border-radius: var(--radius-sm);
    background: rgb(0 176 202 / 0.08);
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--fg);
}

.aud-menu-hint svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin-top: 1px;
    color: var(--vf-turquoise);
}

.aud-menu-fields { padding: 0.3rem 0.45rem 0.45rem; }
.aud-menu-fields-row { display: flex; gap: 0.4rem; margin-bottom: 0.4rem; }
.aud-menu-fields .form-input { min-width: 0; margin: 0; }
.aud-menu-fields .aud-f-name { flex: 2; }
.aud-menu-fields .aud-f-fy   { flex: 1; }
.aud-menu-fields .btn { width: 100%; }

.aud-menu-form { padding: 0.15rem 0.45rem 0.5rem; }
.aud-menu-form .form-input { width: 100%; min-width: 0; margin: 0; }

.aud-menu-label {
    display: block;
    margin: 0.5rem 0 0.2rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--fg-muted);
}

.aud-menu-save { width: 100%; margin-top: 0.7rem; }

/* Trennlinien im Shop-Menü: über der Geschlossen-Angabe und über den
   festen Daten aus der Shop-Datenbank. */
.aud-menu-rule {
    height: 0;
    margin: 0.75rem 0;
    border: 0;
    border-top: 1px solid var(--border);
}

/* Reine Information (RMSID, Niederlassung) – nicht bearbeitbar, geändert
   wird das in der Shop-Verwaltung. */
.aud-menu-info { display: flex; flex-direction: column; gap: 0.2rem; }

.aud-menu-inforow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.78rem;
    color: var(--fg-muted);
}

.aud-menu-infoval {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--fg);
}

.aud-menu-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    line-height: 1.25;
    cursor: pointer;
}

.aud-menu-check input {
    flex: none;
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* --- Farbwahl ------------------------------------------------------------- */
.aud-swatches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

/* Sieht aus wie der Farbwähler daneben: dünner Rahmen, innen ein schmaler
   heller Rand, darin die Farbfläche mit kleineren Ecken. Der helle Rand ist
   ein Inset-Schatten – er folgt dem Radius, dadurch rundet sich die Farbfläche
   automatisch mit (genau wie ::-webkit-color-swatch im nativen Feld). */
.aud-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 2px var(--input-bg);
    color: var(--vf-white);
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    appearance: none;
}

.aud-swatch:hover { border-color: var(--fg-muted); }

/* Gewählt: kräftigerer Rahmen – sonst identisch zum Wähler. */
.aud-swatch.is-on { border-color: var(--fg); }

/* In der Marker-Reihe steht der Wähler direkt neben den drei Marken-Farben –
   gleiche Größe und gleiche Ecken, damit die Reihe wie aus einem Guss wirkt. */
.aud-swatches .aud-color-input { width: 26px; height: 26px; margin-left: 0.15rem; }

.aud-color-input {
    flex: none;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
}

.aud-color-input::-webkit-color-swatch-wrapper { padding: 2px; }
.aud-color-input::-webkit-color-swatch { border: none; border-radius: 4px; }
.aud-color-input::-moz-color-swatch { border: none; border-radius: 4px; }

/* --- Dock der Audit-Seite -------------------------------------------------
   Mehr Werkzeuge als sonst – auf schmalen Geräten darf die Leiste umbrechen,
   das Suchfeld nimmt dann die erste Zeile für sich.
   ------------------------------------------------------------------------- */
/* Die Leiste ist auf JEDER Seite gleich breit (siehe .searchdock). Im
   Ruhezustand stehen hier nur Symbole (die Suche klappt erst auf Klick aus,
   siehe searchdock.js) – reicht der Platz auf schmalen Displays nicht, brechen
   sie über .searchdock-tools von allein um. Eigene Regeln braucht es nicht. */

.dropdown-item--danger { color: var(--err); }

/* Rote Einträge brauchen einen eigenen Hover: das gedämpfte Grau der übrigen
   Einträge geht unter der roten Schrift optisch unter. */
.dropdown-item--danger:hover,
.dropdown-item--danger:focus-visible { background: color-mix(in srgb, var(--err) 12%, transparent); }
.dropdown-item[disabled] { opacity: 0.45; cursor: default; }

/* --- Modale Fenster ------------------------------------------------------- */
.sq-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--page-pad);
    background: rgb(0 0 0 / 0.45);
    animation: confirm-fade 0.15s ease;
}

.sq-modal-overlay[hidden] { display: none; }

.sq-modal {
    width: 100%;
    max-width: 30rem;
    max-height: 86vh;
    overflow-y: auto;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgb(0 0 0 / 0.25);
    animation: confirm-pop 0.16s ease;
}

.sq-modal--wide { max-width: 40rem; }

.sq-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.sq-modal-title { font-size: 1.15rem; font-weight: 600; margin: 0; }

.sq-modal-close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: var(--radius-btn);
    background: none;
    color: var(--fg-muted);
    cursor: pointer;
}

.sq-modal-close:hover { background: var(--app-bg); color: var(--fg); }

/* Das Plus-Icon dient gedreht als Schließkreuz – ein Icon weniger. */
.sq-modal-x { width: 20px; height: 20px; transform: rotate(45deg); }

/* Knöpfe stehen in JEDEM Fenster mittig – wie im Bestätigungs-Dialog. */
.sq-modal-actions {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.sq-modal .form-label { margin-top: 1rem; }
.sq-modal .form-label:first-of-type { margin-top: 0; }

/* --- Umschalter mit Radios (Gruppen-Ansicht, Startinhalt) ----------------- */
.audit-seg {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--app-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    flex-wrap: wrap;
}

.audit-seg label { display: inline-flex; }
.audit-seg input { position: absolute; opacity: 0; pointer-events: none; }

.audit-seg span {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border-radius: 4px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--fg-muted);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.audit-seg input:checked + span {
    background: var(--card-bg);
    color: var(--fg);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
}

.audit-seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Umschalter und die dazugehörige Auswahl stehen nebeneinander; die Auswahl
   ist ausgeblendet, solange "Leer" gewählt ist. */
.audit-seg-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.audit-seg-row .audit-seg { flex: none; }

.audit-seg-row .form-input {
    flex: 1;
    min-width: 10rem;
    margin: 0;
}

.audit-seg-row .form-input[hidden] { display: none; }

/* --- Shops hinzufügen ----------------------------------------------------- */

/* Suchfeld im Modal: mit sichtbarem Rahmen (anders als im Dock). */
.search-field--boxed { display: flex; width: 100%; }

.audit-results { max-height: 16rem; overflow-y: auto; margin-top: 0.5rem; }

.audit-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
    font: inherit;
    font-size: 0.9rem;
    background: none;
    border: none;
    appearance: none;
    padding: 0.5rem 0.55rem;
    border-radius: var(--radius-btn);
    cursor: pointer;
    color: var(--fg);
}

.audit-result:hover { background: var(--app-bg); }
.audit-result.is-added { opacity: 0.55; cursor: default; }

/* Zwei Zeilen je Shop: oben Stadt und Straße, darunter klein die
   Vertriebswege. Nebeneinander in einer Zeile drückten drei oder vier Marker
   den Namen sonst bis zur Unkenntlichkeit zusammen. */
.audit-result-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    min-width: 0;
}

.audit-result-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audit-result-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; }

.audit-result-tag {
    flex: none;
    padding: 0.02rem 0.32rem;
    border-radius: 4px;
    background: var(--app-bg);
    border: 1px solid var(--border);
    color: var(--fg-muted);
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.audit-result-add { display: inline-flex; color: var(--fg-muted); font-weight: 700; }
.audit-result-add svg { width: 14px; height: 14px; }

/* --- Listen mit Farbe + Name + Löschen ------------------------------------
   Abschnitte und Themen im Kontrollzentrum (admin_audit.php).
   ------------------------------------------------------------------------- */
.audit-grouplist { display: flex; flex-direction: column; gap: 0.5rem; }

.audit-grouprow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.audit-grouprow .form-input { flex: 1; min-width: 0; margin: 0; }

.audit-groupnew { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }
.audit-groupnew .form-input { flex: 1; min-width: 0; margin: 0; }

/* --- Gruppierung anlegen / einstellen ------------------------------------- */
.audit-switchrow { margin-top: 0.9rem; }

/* --- Shop-Picker ----------------------------------------------------------
   Zwei Spalten nebeneinander: links die Shops ohne Gruppe, rechts die der
   Gruppe. Auf schmalen Geräten stapeln sie sich.
   ------------------------------------------------------------------------- */
.audit-pick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
    margin-top: 0.75rem;
}

.audit-pick-col { min-width: 0; display: flex; flex-direction: column; }

.audit-pick-head {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.audit-pick-list {
    flex: 1;
    min-height: 8rem;
    max-height: 22rem;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.25rem;
}

/* In der rechten Spalte nimmt der Klick den Shop wieder heraus – dasselbe
   Zeichen um 45° gedreht ergibt das ×. */
.audit-result-add--remove svg { transform: rotate(45deg); }
.audit-pick-list .audit-result:hover .audit-result-add--remove { color: var(--accent); }

@media (max-width: 620px) {
    .audit-pick { grid-template-columns: 1fr; }
    .audit-pick-list { max-height: 12rem; }
}

/* --- Konfiguration: Vergleiche umbenennen/löschen -------------------------
   Jede Zeile ist ein eigenes Formular: Name, Umfang, Speichern, Löschen.
   ------------------------------------------------------------------------- */
.stack-sm { display: flex; flex-direction: column; gap: 0.5rem; }

.audit-configrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
}

/* Das Namensfeld nimmt die ganze verbleibende Breite. */
.audit-configrow .form-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 38px;
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
}

/* Zähler stehen als Quadrate rechts – dadurch sind sie in jeder Zeile
   gleich breit und der Papierkorb sitzt überall an derselben Stelle. */
.count-badges { display: flex; gap: 0.3rem; flex: none; }

.icon-action[disabled] { opacity: 0.4; cursor: default; }
.icon-action[disabled]:hover { border-color: var(--border); color: var(--fg-muted); }
.icon-action--solid[disabled]:hover { background: var(--accent); color: var(--on-accent); }

@media (max-width: 560px) {
    .count-badges { display: none; }
}

/* --- Symbol-Bibliothek (Kontrollzentrum) ---------------------------------- */
.audit-sticker-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0 1.5rem; }

.audit-sticker-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    width: 108px;
    padding: 0.8rem 0.4rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.audit-sticker-item img { width: 40px; height: 40px; object-fit: contain; }

.audit-sticker-name {
    font-size: 0.72rem;
    color: var(--fg-muted);
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audit-sticker-item form {
    position: absolute;
    top: -10px;
    right: -10px;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.audit-sticker-item:hover form,
.audit-sticker-item form:focus-within { opacity: 1; }

.audit-upload { margin-top: 0.5rem; }

/* Name, Datei und Knopf stehen ab Tablet nebeneinander; der Knopf sitzt auf
   Höhe der Felder. Darunter fällt alles wieder untereinander, Knopf breit. */
.audit-upload__row { align-items: end; }
.audit-upload__submit .btn { width: 100%; }

@media (min-width: 560px) {
    .audit-upload__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
    .audit-upload__submit { margin-top: 0; }
    .audit-upload__submit .btn { width: auto; }
}

/* Die Werkzeuge im Dock sind hier <button> statt <a> – Zeiger und aktiver
   Zustand (z. B. Anheft-Modus) brauchen daher eigene Regeln. */
.dock-btn { appearance: none; cursor: pointer; font: inherit; }
.dock-btn.is-active { border-color: var(--accent); color: var(--accent); }

/* Kompakte Felder in Menüs und Listen: die Standardhöhe (48px) macht die
   Popover und Zuordnungslisten sonst unnötig hoch. */
.aud-menu .form-input,
.audit-grouprow .form-input,
.audit-groupnew .form-input {
    min-height: 38px;
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
}

/* --- Konfiguration: Fragen, Themen und Abschnitte -------------------------
   Die Fragenliste wird mit jedem Import länger – deshalb kompakte Zeilen,
   nach Abschnitten gruppiert wie im Bogen selbst.
   ------------------------------------------------------------------------- */
.audit-crithead {
    margin: 1.5rem 0 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg-muted);
}

.audit-crithead:first-child { margin-top: 0.5rem; }

.audit-critrow {
    padding: 0.6rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.audit-crittop { display: flex; align-items: center; gap: 0.5rem; }

.audit-crittop .form-input {
    flex: 1;
    min-width: 0;
    min-height: 38px;
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
}

/* Abschnitts-Auswahl: nur der Buchstabe, entsprechend schmal. */
.audit-sectionpick {
    flex: 0 0 5.5rem !important;
    min-width: 0;
    min-height: 38px;
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
}

/* Themen-Kürzel unter der Frage: angeklickt = zugeordnet. */
.audit-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.45rem; }

.audit-topicchip {
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fg-muted);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    cursor: pointer;
    appearance: none;
    transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

.audit-topicchip:hover { border-color: var(--fg-muted); color: var(--fg); }

/* Zugeordnet: gefüllt in der Farbe des Themas (kommt inline aus der DB). */
.audit-topicchip.is-on { color: var(--vf-white); border-color: transparent; }

.audit-alias {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    margin-top: 0.4rem;
    font-size: 0.74rem;
    color: var(--fg-muted);
}

.audit-aliastext { font-style: italic; }

/* Abschnitte an-/abwählen. */
.audit-sectionlist { display: flex; flex-direction: column; gap: 0.15rem; }

.audit-sectionrow {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0;
    font-size: 0.92rem;
    cursor: pointer;
}

.audit-sectionrow input {
    flex: none;
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

.audit-sectioncode {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    background: var(--app-bg);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--fg-muted);
}

/* --- Ergebnisse einspielen: Eingabe und Vorschau -------------------------- */
.audit-json {
    width: 100%;
    min-height: 0;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    resize: vertical;
    white-space: pre;
    overflow-x: auto;
}

.audit-imhead {
    margin: 1.5rem 0 0.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    font-size: 0.95rem;
}

/* Ein Kasten je Bogen – blockierte fallen durch den roten Rand auf. */
.audit-imbox {
    padding: 0.85rem 1rem;
    margin-bottom: 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card-bg);
}

.audit-imbox.is-blocked { border-color: var(--err); }
.audit-imbox.is-superseded { opacity: 0.6; }

.audit-imtop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.audit-imtitle { min-width: 0; }
.audit-imtitle strong { display: block; }

.audit-immeta {
    display: block;
    font-size: 0.78rem;
    color: var(--fg-muted);
    margin-top: 0.1rem;
}

.audit-imrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.2rem 0;
    font-size: 0.88rem;
}

.audit-imlabel {
    flex: 0 0 5rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fg-muted);
}

.audit-imrow .form-input {
    flex: 1;
    min-width: 12rem;
    min-height: 38px;
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
}

/* Marker (Vertriebsweg/Marke) des zugeordneten Shops in der Import-Vorschau. */
.audit-imtag {
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.74rem;
    color: var(--fg-muted);
    background: var(--surface-2, transparent);
}

.audit-imerr  { margin: 0.15rem 0; font-size: 0.86rem; color: var(--err); }
.audit-imwarn { margin: 0.15rem 0; font-size: 0.86rem; color: var(--warn); }

/* Neu anzulegende Fragen: eingeklappt, damit der Kasten kurz bleibt. */
.audit-imnew { margin-top: 0.5rem; font-size: 0.85rem; }
.audit-imnew summary { cursor: pointer; color: var(--fg-muted); }
.audit-imnew ul { margin: 0.4rem 0 0 1.2rem; color: var(--fg-muted); }
.audit-imnew li { margin-bottom: 0.15rem; }

/* --- Zähler-Quadrat --------------------------------------------------------
   Zeigt nur die Zahl; wofür sie steht, sagt der Kurzhinweis beim Überfahren.
   So bleiben Eingabefelder daneben in allen Zeilen gleich breit.
   ------------------------------------------------------------------------- */
.count-badge {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Exakt das Maß der Icon-Knöpfe daneben (.icon-action), damit Zahl und
       Papierkorb dieselbe Kachelgröße haben. */
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--app-bg);
    color: var(--fg-muted);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Kurzhinweis wie bei den Icon-Knöpfen (.icon-action::after). */
.count-badge::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--vf-slate-grey);
    color: var(--vf-white);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 5;
}

.count-badge:hover::after { opacity: 1; transform: translateX(-50%); }

@media (hover: none) { .count-badge::after { display: none; } }

/* In .stack sorgt schon der gap für den Abstand – der eigene Rand des
   Umschalters käme sonst obendrauf. */
.stack > .sortbar { margin-bottom: 0; }

/* ==========================================================================
   Shop-Karte (shop-karte.php) – Portierung aus CST26
   ========================================================================== */

.map-card { overflow: visible; position: relative; }

/* Anzeige-Filter (Kanäle + Name/Straße): Checkbox-Einträge im Dropdown-Menü
   der Werkzeugleiste (icon('filter')) – ausgegraut = ausgeblendet. */
.map-legend-item.is-off { opacity: 0.55; }
.map-legend-item.is-off .map-legend-dot { background: var(--fg-muted) !important; }

.map-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; flex: none; }
.map-legend-dot--fil   { background: var(--map-pin-fil); }
.map-legend-dot--pa    { background: var(--map-pin-pa); }
.map-legend-dot--flag  { background: var(--map-pin-flag); }
.map-legend-dot--state { background: var(--lv-ok); }

.map-legend-count { font-size: 0.75rem; color: var(--fg-muted); }

/* --- Karte selbst ----------------------------------------------------------- */

:root {
    --map-pin-fil:  var(--accent);
    --map-pin-pa:   var(--vf-aqua-blue);
    --map-pin-flag: var(--vf-slate-grey);
}
:root[data-theme="dark"] { --map-pin-flag: var(--vf-white); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --map-pin-flag: var(--vf-white); }
}

.map-wrap { position: relative; margin-top: 1.25rem; }

.map-svg {
    display: block;
    width: 100%;
    max-width: 640px;
    height: auto;
    margin-inline: auto;
}
.map-svg.is-placing { cursor: crosshair; }

.map-state {
    fill: var(--app-bg);
    stroke: var(--card-bg);
    stroke-width: 1.2;
    stroke-linejoin: round;
}

.map-pin { cursor: grab; touch-action: none; }
.map-pin.is-view-only { cursor: pointer; }
.map-pin.is-dragging { cursor: grabbing; }
.map-pin.is-channel-off { display: none; }

.pin-body {
    stroke: var(--card-bg);
    stroke-width: 1.4;
    paint-order: stroke;
}
.map-pin--fil  .pin-body { fill: var(--map-pin-fil); }
.map-pin--pa   .pin-body { fill: var(--map-pin-pa); }
.map-pin--flag .pin-body { fill: var(--map-pin-flag); }
.pin-dot { fill: var(--on-accent); }

.pin-graphic {
    transition: transform 0.15s ease;
    filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.25));
}
.map-pin:hover .pin-graphic,
.map-pin.is-selected .pin-graphic { transform: scale(1.18); }
.map-pin.is-dragging .pin-graphic { transform: scale(1.28); }
.map-pin.is-temp .pin-graphic { opacity: 0.75; }

.pin-label { pointer-events: none; }
.map-svg.map-svg--noname .pin-name { display: none; }
.map-svg.map-svg--noaddr .pin-addr { display: none; }
.map-pin.is-dragging .pin-label { display: none; }

.pin-name {
    font-size: 11px;
    font-weight: 700;
    fill: var(--fg);
    paint-order: stroke;
    stroke: var(--card-bg);
    stroke-width: 3;
    stroke-linejoin: round;
}
.pin-addr {
    font-size: 9px;
    fill: var(--fg-muted);
    paint-order: stroke;
    stroke: var(--card-bg);
    stroke-width: 3;
    stroke-linejoin: round;
}

/* --- Info-/Bearbeiten-Panel -------------------------------------------------
   Read-only auf der Ansichtsseite (nur Name/Adresse/Kanal), mit Formularfeldern
   und Löschen im Kontrollzentrum (.map-panel--edit, siehe assets/js/shopmap.js). */
.map-panel {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: min(320px, calc(100% - 1rem));
    padding: 1rem 1.1rem 1.1rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
    z-index: 5;
}
.map-panel[hidden] { display: none; }

.map-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
}
.map-panel-title { font-size: 1.02rem; margin: 0; }

.map-panel-close {
    border: 0;
    background: transparent;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--fg-muted);
    cursor: pointer;
    padding: 0.1rem 0.3rem;
}
.map-panel-close:hover { color: var(--fg); }

.map-panel .form-label { margin-top: 0.55rem; }
.map-panel .form-input { width: 100%; }
.map-panel-err { margin-top: 0.7rem; }

.map-panel-actions {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

/* Read-only-Panel (Ansichtsseite): reine Textzeilen statt Formularfeldern. */
.map-panel-row { margin: 0.4rem 0; }
.map-panel-row dt { font-size: 0.75rem; color: var(--fg-muted); }
.map-panel-row dd { margin: 0.1rem 0 0; font-weight: 600; }

@media (max-width: 640px) {
    .map-panel {
        position: fixed;
        top: auto;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        z-index: 300;
    }
}

/* --- Platzier-Hinweis (nutzt .searchdock-note) ------------------------------ */
.map-placebar-text { flex: 1 1 auto; min-width: 0; }

/* Wiederholen: dasselbe Pfeil-Icon wie Rückgängig, nur gespiegelt. */
.map-redo-icon { transform: rotate(180deg); }

/* Trefferliste unter dem "Shop hinzufügen"-Suchfeld in der Werkzeugleiste.
   Die Leiste selbst schneidet Inhalte ab (überblendet die Suche ein-/aus) –
   deshalb hängt shopmap.js dieses Element an <body> und positioniert es per
   JS (fixed) exakt über dem Suchfeld, statt es relativ dazu zu verankern. */
.map-search-menu {
    position: fixed;
    max-height: 16rem;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--card-shadow);
    z-index: 200;
}
.map-search-menu[hidden] { display: none; }

.map-search-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.55rem 0.8rem;
    border: 0;
    background: none;
    appearance: none;
    font: inherit;
    text-align: left;
    color: var(--fg);
    cursor: pointer;
}
.map-search-item:hover,
.map-search-item.is-active { background: var(--app-bg); }

.map-search-item-meta { font-size: 0.75rem; color: var(--fg-muted); white-space: nowrap; }
.map-search-empty { padding: 0.6rem 0.8rem; font-size: 0.85rem; color: var(--fg-muted); }

/* --- Einzelshop-Ansicht (/audit/?shop=…) ----------------------------------
   Das Blatt eines Shops statt einer Tabelle: Kopfkarte, vier Kennzahlen
   (dieselben .kpi-* Bausteine wie in der Liste) und darunter drei Karten –
   Verlauf, Abschnitte des Bogens, Stärken und Handlungsfelder.
   Gezeichnet wird nur das Bewegliche, siehe assets/js/audit-shop.js.
   ------------------------------------------------------------------------- */

.shopdash {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

/* --- Kopfkarte: Shop links, Gesamtwertung und Trend rechts ---------------- */
.shopdash-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
}

@media (max-width: 860px) {
    .shopdash-head {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 1rem 1.5rem;
    }
    /* Der Shop bleibt oben über die volle Breite, darunter Wertung + Trend. */
    .shopdash-ident { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .shopdash-head { grid-template-columns: minmax(0, 1fr); }
}

.shopdash-ident {
    display: flex;
    align-items: center;
    gap: clamp(0.9rem, 2.5vw, 1.5rem);
    min-width: 0;
}

/* Bild des Shops – rund, damit es neben dem Namen ruhig wirkt. Fehlt es,
   steht der Platzhalter mit dem Shop-Symbol an derselben Stelle. */
.shopdash-photo {
    flex: none;
    width: clamp(72px, 12vw, 116px);
    height: clamp(72px, 12vw, 116px);
    border-radius: 50%;
    overflow: hidden;
    background: var(--app-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.shopdash-photo img { width: 100%; height: 100%; object-fit: cover; }

.shopdash-photo-ph { display: flex; color: var(--fg-muted); opacity: 0.6; }
.shopdash-photo-ph svg { width: 40px; height: 40px; }

.shopdash-idtext { min-width: 0; }

.shopdash-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    line-height: 1.15;
    margin: 0;
}

/* Vertriebsweg/Marke als Plakette – Farbe kommt aus den Einstellungen
   (--tag-color), ohne gepflegte Farbe bleibt sie gedämpft grau. */
.shopdash-tag {
    --tag-color: var(--fg-muted);
    flex: none;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--tag-color) 14%, transparent);
    color: var(--tag-color);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.shopdash-street { color: var(--fg-muted); margin-top: 0.2rem; }

/* Wer verantwortet den Shop: Beschriftung und Name paarweise, auf schmalen
   Geräten untereinander. */
.shopdash-who {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.1rem 0.75rem;
    margin-top: 0.6rem;
    font-size: 0.85rem;
}
.shopdash-who dt { color: var(--fg-muted); }
.shopdash-who dd { margin: 0; }

@media (max-width: 480px) {
    .shopdash-who { grid-template-columns: 1fr; gap: 0; }
    .shopdash-who dd { margin-bottom: 0.35rem; }
}

.shopdash-when {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--fg-muted);
    opacity: 0.7;
}

.shopdash-when svg { width: 14px; height: 14px; flex: none; }

/* Gesamtwertung: Ø über alle Wellen mit Ergebnis. */
.shopdash-score { text-align: center; }

.shopdash-big {
    font-size: clamp(2.2rem, 6vw, 3.25rem);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.shopdash-val--ok   { color: var(--lv-ok); }
.shopdash-val--mid  { color: var(--lv-mid); }
.shopdash-val--bad  { color: var(--lv-bad); }
.shopdash-val--none { color: var(--fg-muted); }

.shopdash-badge {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.15rem 0.6rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.shopdash-badge--ok  { color: var(--lv-ok);  background: color-mix(in srgb, var(--lv-ok) 14%, transparent); }
.shopdash-badge--mid { color: var(--lv-mid); background: color-mix(in srgb, var(--lv-mid) 14%, transparent); }
.shopdash-badge--bad { color: var(--lv-bad); background: color-mix(in srgb, var(--lv-bad) 14%, transparent); }

.shopdash-scorenote { margin-top: 0.35rem; font-size: 0.8rem; color: var(--fg-muted); }

.shopdash-trend {
    text-align: center;
    padding-left: clamp(0rem, 2vw, 1.5rem);
    border-left: 1px solid var(--border);
}

.shopdash-trend .kpi-delta { font-size: 1.35rem; justify-content: center; }
.shopdash-trend .kpi-note { margin-top: 0.35rem; }

@media (max-width: 560px) {
    .shopdash-trend { border-left: 0; padding-left: 0; }
    .shopdash-score,
    .shopdash-trend { text-align: left; }
    .shopdash-trend .kpi-delta { justify-content: flex-start; }
}

/* Der Kreis im Shop-Blatt darf größer sein – die Kachel trägt nur ihn. */
.kpi-wave--lg { width: 84px; height: 84px; }
.kpi-wave--lg .kpi-wave-text { font-size: 17px; }

/* --- Die Karten unter den Kennzahlen --------------------------------------
   Obere Zeile: Verlauf (breit) neben den Kategorien – beide gleich hoch,
   darunter Stärken & Handlungsfelder über die volle Breite. */
.shopdash-row {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: var(--gap);
    align-items: stretch;
}

.shopdash-strong { grid-column: 1 / -1; }

@media (max-width: 900px) {
    .shopdash-row { grid-template-columns: minmax(0, 1fr); }
}

/* Das Diagramm füllt die Karte, damit sie auf Höhe der Kategorien bleibt. */
.shopdash-chart,
.shopdash-sections { display: flex; flex-direction: column; }
.shopdash-chart .shopdash-plot { flex: 1 1 auto; display: flex; align-items: center; }

.shopdash-plot { width: 100%; }
.shopdash-svg { display: block; max-width: 100%; overflow: visible; }

.shopdash-foot {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: var(--fg-muted);
}

.shopdash-cardhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 0.9rem;
}

.shopdash-cardhead .card-title { margin-bottom: 0; }

/* Schmalerer Umschalter – er sitzt in der Kopfzeile einer Karte. */
.audit-seg--sm { padding: 3px; }
.audit-seg--sm span { padding: 0.25rem 0.6rem; font-size: 0.78rem; }

/* --- Ergebnis nach Kategorie (Balken) ------------------------------------- */
.shopdash-bars {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.shopdash-bar {
    display: grid;
    grid-template-columns: minmax(6rem, 1fr) minmax(4rem, 1.2fr) auto;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.88rem;
}

.shopdash-bar-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.shopdash-bar-track {
    height: 8px;
    border-radius: 999px;
    background: var(--app-bg);
    overflow: hidden;
}

.shopdash-bar-fill { display: block; height: 100%; border-radius: 999px; }
.shopdash-bar-fill--ok  { background: var(--lv-ok); }
.shopdash-bar-fill--mid { background: var(--lv-mid); }
.shopdash-bar-fill--bad { background: var(--lv-bad); }

.shopdash-bar-val {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --- Stärken und Handlungsfelder ------------------------------------------
   Die Karte läuft über die volle Breite, deshalb stehen Stärken und
   Handlungsfelder nebeneinander – getrennt durch eine senkrechte Linie. */
.shopdash-strongcols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.6rem;
}

.shopdash-strongcols > .shopdash-strongcol + .shopdash-strongcol {
    padding-left: 1.6rem;
    border-left: 1px solid var(--border);
}

@media (max-width: 760px) {
    .shopdash-strongcols { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
    .shopdash-strongcols > .shopdash-strongcol + .shopdash-strongcol {
        padding: 1.1rem 0 0;
        border-left: 0;
        border-top: 1px solid var(--border);
    }
}

.shopdash-subhead {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}

.shopdash-subhead + .shopdash-list + .shopdash-subhead,
.shopdash-none + .shopdash-subhead {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border);
}

.shopdash-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.shopdash-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.55rem;
    font-size: 0.88rem;
}

/* Symbol im farbigen Kreis: Häkchen für Stärken, Pfeil für Handlungsfelder. */
.shopdash-mark {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
}

.shopdash-mark svg { width: 12px; height: 12px; stroke-width: 16; }

.shopdash-mark--ok  { color: var(--lv-ok);  background: color-mix(in srgb, var(--lv-ok) 15%, transparent); }
.shopdash-mark--mid { color: var(--lv-mid); background: color-mix(in srgb, var(--lv-mid) 15%, transparent); }
.shopdash-mark--bad { color: var(--lv-bad); background: color-mix(in srgb, var(--lv-bad) 15%, transparent); }

.shopdash-list-text { min-width: 0; }

.shopdash-list-val {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.shopdash-none { font-size: 0.85rem; }

/* ==========================================================================
   11. Sales Quiz (Frontend: Regeln, Frage, Ergebnis) + Fragenverwaltung
   ========================================================================== */

/* --- Regeln ----------------------------------------------------------------- */
.rules { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; margin-top: 1rem; }
.rules li { padding-left: 1.1rem; position: relative; }
.rules li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--accent);
}

.dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; flex: none; }
.dot--correct { background: var(--ok); }
.dot--missed  { background: var(--warn); }
.dot--wrong   { background: var(--err); }

/* --- Startseite: Begrüßung, Bild, Startknopf --------------------------------- */
.quiz-intro {
    max-width: 32rem;
    margin: 0 auto;
    text-align: left;
}

.quiz-intro-hello {
    font-size: 1.0625rem;
    margin-bottom: 0.5rem;
}

.quiz-intro-title {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}

.quiz-intro-title {
    position: relative;
    z-index: 1;
}

.quiz-intro-title span { color: var(--accent); }

/* Für den Dark Mode gibt es das Motiv als eigene Datei (…-dark.png), siehe
   theme_image_html() – deshalb hier keine Helligkeitskorrektur mehr. */
.quiz-intro-visual {
    display: block;
    position: relative;
    z-index: 0;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    margin-top: -50px;
    margin-bottom: 0.75rem;
}

/* Roter Button mit zentriertem Text + rechtsbündigem Pfeil (Start, Antwort
   bestätigen, Weiter/Ergebnis). */
.btn--arrow {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.btn--arrow svg {
    position: absolute;
    right: 2rem;
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
}


/* --- Kopfzeile: Titel + Abbrechen --------------------------------------------- */
.quiz-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.6rem;
}

.quiz-topbar-title { font-size: 1.5rem; font-weight: 700; margin: 0; }

/* --- Fortschritt --------------------------------------------------------------- */
.quiz-head { margin-bottom: -17.6px; }

.quiz-bar-label { display: block; font-size: 0.85rem; color: var(--fg-muted); margin-bottom: 0.4rem; }

.quiz-bar { height: 0.5rem; border-radius: 999px; background: var(--border); overflow: hidden; }
.quiz-bar-fill {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: inherit;
    transition: width 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
    .quiz-bar-fill { transition: none; }
}

/* --- Frage & Antworten -------------------------------------------------------- */
.quiz-card { margin-top: 1.75rem; }

.quiz-category {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    background: var(--border);
    color: var(--fg-muted);
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
}

.quiz-question { font-size: 1.3rem; margin-bottom: 1.25rem; }

.quiz-options { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 2.5rem; }

.quiz-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.95rem 1.1rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    box-shadow: var(--card-shadow);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.quiz-option:has(input:checked) { border-color: var(--accent); }
.quiz-option--result { cursor: default; }

.quiz-box {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 4px;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.quiz-box--correct { border-color: var(--ok); background: var(--ok); }
.quiz-box--missed   { border-color: var(--warn); background: var(--warn); }
.quiz-box--wrong    { border-color: var(--err); background: var(--err); }
.quiz-box--neutral  { border-color: var(--border); }
.quiz-result-icon { width: 1rem; height: 1rem; animation: quiz-pop 0.25s ease both; }

@keyframes quiz-pop {
    from { transform: scale(0.4); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .quiz-result-icon { animation: none; }
}

.quiz-option-text { flex: 1; }

/* Kachel wechselt Rahmen + leicht eingefärbten Hintergrund je nach Ergebnis. */
.quiz-option--correct {
    border-color: var(--ok);
    background: color-mix(in srgb, var(--ok) 12%, var(--card-bg));
}
.quiz-option--missed {
    border-color: var(--warn);
    background: color-mix(in srgb, var(--warn) 12%, var(--card-bg));
}
.quiz-option--wrong {
    border-color: var(--err);
    background: color-mix(in srgb, var(--err) 12%, var(--card-bg));
}

/* --- Ergebnisseite -----------------------------------------------------------
   Ohne Karte: das Motiv (assets/img/quiz/…) trägt die Aussage, der Prozentwert
   liegt frei darüber. Darunter nur die beiden Knöpfe.
   ------------------------------------------------------------------------- */
.result-page {
    max-width: 32rem;
    margin: 0 auto;
    text-align: center;
}

/* Bezugsrahmen für den Text, der frei über dem Motiv liegt. Genau so breit
   wie das Bild, damit sich alle Prozentangaben darin aufs Bild beziehen. */
.result-visual {
    position: relative;
    width: 90%;
    margin: 0 auto 1.5rem;
}

/* Rückt bewusst nach oben in den Seitenabstand hinein – das Motiv hat oben
   viel Luft, sonst steht es zu tief auf der Seite. Der Wert zieht den ganzen
   Block (Bild UND Text) mit, weil der Text an .result-visual hängt. */
.result-trophy {
    display: block;
    width: 100%;
    height: auto;
    margin: -20px auto 0;
}

/* Ergebniswort + Prozentwert als Block im freien Feld unter dem Podest.
   Die Höhe steckt in --result-percent-y und wird JE MOTIV gesetzt (siehe
   .result-img--* weiter unten): die Podeste enden in den Bildern auf
   unterschiedlicher Höhe, ein fester Wert säße mal zu hoch, mal zu tief.
   Angabe in Prozent der Bildhöhe, damit sie auf jeder Bildschirmbreite
   gleich sitzt. Kleinere Werte = höher, größere = tiefer. */
.result-stamp {
    position: absolute;
    top: var(--result-percent-y, 67%);
    left: 50%;
    /* Senkrecht mittig auf --result-percent-y, plus 30px nach unten. Der
       Spruch zählt nicht mehr zur Blockhöhe (siehe .result-saying), wodurch
       der Block um dessen halbe Höhe kürzer ist – die 16px gleichen das aus,
       damit Wort und Prozentwert genau dort stehen wie zuvor. */
    transform: translate(-50%, calc(-50% + 30px - 16px));
    width: 100%;
}

/* Podest-Unterkante laut Motiv: 100.png 60,6 % · 80.png 62,0 % · 50.png 53,0 %
   – plus knapp 7 % Abstand, damit der Text überall gleich weit darunter steht. */
.result--gold   { --result-percent-y: 67%; }
.result--silber { --result-percent-y: 68.5%; }
.result--bronze { --result-percent-y: 59.5%; }
.result--basis  { --result-percent-y: 67%; }

.result-tier-title {
    margin: 0 0 0.15rem;
    font-family: var(--vf-font);
    font-size: 1.25rem;
    font-weight: 800;                 /* Vodafone ExtraBold */
    color: var(--tier-color, var(--accent));
}

.result-percent {
    font-family: var(--vf-font);
    font-size: 2.75rem;
    font-weight: 800;                 /* Vodafone ExtraBold */
    line-height: 1;
    color: var(--tier-color, var(--accent));
}

.result-percent-sign { font-size: 1.4rem; font-weight: 800; }

/* Wechselnder Spruch – bewusst in normaler Schrift und Textfarbe, damit er
   neben dem fetten Wort und der Zahl nicht mitschreit. Die weiße Kachel im
   Motiv ist 68,5 % breit; 60 % lassen den Text sicher darin umbrechen.
   Er hängt UNTER dem Block statt darin: sonst würde eine zweite Zeile den
   Block höher machen und damit Wort und Prozentwert nach oben schieben –
   so bleibt der obere Text stehen und nur der Spruch wächst nach unten. */
.result-saying {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    margin: 0.5rem 0 0;
    font-weight: 400;
    color: var(--fg);
}

/* Farbe je Bewertungsstufe (siehe quiz_result_grade() in includes/quiz.php).
   Silber und Bronze sind bewusst dunkler als das echte Metall: die hellen
   Originaltöne (#C0C0C0 / #CD7F32) wären auf dem fast weißen Motiv kaum zu
   lesen. So bleibt der Metall-Eindruck, der Text aber kontrastreich. */
.result--gold   { --tier-color: var(--accent); }        /* Vodafone Rot */
.result--silber { --tier-color: var(--vf-medal-silver-text); }   /* Silber */
.result--bronze { --tier-color: var(--vf-medal-bronze-text); }   /* Bronze */
.result--basis  { --tier-color: var(--vf-grey); }       /* neutral, nicht abwertend */

/* Knöpfe schmaler als das Bild, mittig darunter. */
.result-action {
    width: 60%;
    margin: 0 auto;
}

.result-action + .result-action { margin-top: 0.75rem; }

.result-action .btn { width: 100%; }

.share { position: relative; display: inline-block; }
/* Breite kommt vom Umfeld (z. B. .result-action) – hier nur der Umbruch. */
.share--block { display: block; }
.share-menu {
    display: none;
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    min-width: 12rem;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    padding: 0.4rem;
    text-align: left;
}
.share-menu.open { display: block; }

.share-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    appearance: none;
    font: inherit;
    color: var(--fg);
    cursor: pointer;
    text-align: left;
}
.share-item:hover,
.share-item:focus-visible { background: var(--app-bg); }
.share-item svg { width: 18px; height: 18px; flex: none; color: var(--fg-muted); }

/* --- Fragenverwaltung (Kontrollzentrum) ---------------------------------------- */
.answer-row { display: flex; align-items: center; gap: 0.6rem; }
.answer-row .form-input { flex: 1; }

.answer-list { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; }
.answer-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--app-bg);
}
.answer-no { color: var(--fg-muted); }
.answer-ok-icon { width: 18px; height: 18px; flex: none; color: var(--ok); }

/* Fragenliste: eine durchlaufende Liste in EINER Karte statt einzelner
   Kacheln je Frage – mit vielen Fragen sähen lauter kleine Schatten
   nebeneinander unruhig aus. */
.q-list { display: flex; flex-direction: column; }

.q-item { border-bottom: 1px solid var(--border); }
.q-item:last-child { border-bottom: 0; }

.q-summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 0;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}
.q-summary::-webkit-details-marker { display: none; }
.q-summary::marker { content: ""; }

.q-summary::after {
    content: "";
    flex: none;
    width: 0.55rem;
    height: 0.55rem;
    margin-left: 0.2rem;
    border-right: 2px solid var(--fg-muted);
    border-bottom: 2px solid var(--fg-muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.2s ease;
}
.q-item[open] .q-summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.q-body { padding: 0 0 1.1rem; }

@media (prefers-reduced-motion: reduce) {
    .q-summary::after { transition: none; }
}

.q-text { flex: 1; min-width: 0; }

.q-flag {
    flex: none;
    font-size: 0.75rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--app-bg);
    color: var(--fg-muted);
}
.q-flag--expired { color: var(--err); }

/* --- Schiebeschalter (switch_field()) ------------------------------------------
   Rechteckiger Schieber (wie bei CST26) statt Pille – Knopf rutscht auf die
   rechte Hälfte und wird grün. Grün beim Einschalten, wie der Erfolg-Ton
   überall sonst auf der Seite. */
.switch-field {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.switch-field input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-track {
    flex: 0 0 auto;
    position: relative;
    width: 60px;
    height: 32px;
    border-radius: 6px;
    background: var(--border);
    transition: background-color 0.18s ease;
}

.switch-knob {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    border-radius: 4px;
    background: var(--vf-white);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.18);
    transition: transform 0.18s ease, background-color 0.15s ease;
}

:root[data-theme="dark"] .switch-knob { background: var(--fg-muted); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .switch-knob { background: var(--fg-muted); }
}

.switch-field input:checked + .switch-track {
    background: color-mix(in srgb, var(--ok) 22%, var(--card-bg));
}
.switch-field input:checked + .switch-track .switch-knob {
    transform: translateX(100%);
    background: var(--ok);
}

.switch-field input:focus-visible + .switch-track {
    box-shadow: 0 0 0 3px rgb(230 0 0 / 0.25);
}

.switch-text { flex: 1; font-size: 0.95rem; }

/* Nur der Schalter, ohne sichtbare Beschriftung (z. B. neben einer Antwort). */
.switch-field--bare { display: inline-flex; }

@media (prefers-reduced-motion: reduce) {
    .switch-track, .switch-knob { transition: none; }
}

/* --- Datumsfeld im Seiten-Design ------------------------------------------------
   Der native Kalender selbst lässt sich kaum stylen – aber das Feld drumherum
   (schon .form-input) und das kleine Kalender-Symbol lassen sich anpassen,
   damit nichts wie ein Browser-Fremdkörper wirkt. */
input[type="date"].form-input {
    accent-color: var(--accent);
}

input[type="date"].form-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding: 3px;
    opacity: 0.7;
}

input[type="date"].form-input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    background: var(--app-bg);
}

/* Dark Mode: das Symbol ist standardmäßig dunkel gezeichnet und würde sonst
   auf dunklem Grund verschwinden. */
:root[data-theme="dark"] input[type="date"].form-input::-webkit-calendar-picker-indicator {
    filter: invert(1);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) input[type="date"].form-input::-webkit-calendar-picker-indicator {
        filter: invert(1);
    }
}

/* ==========================================================================
   12. Eigener Datums-Picker (datepicker.js) – im Seiten-Design
   Ersetzt das native Kalender-Popup: das lässt sich per CSS nicht anpassen,
   weil es Browser-/OS-Chrome ist, kein Teil des Dokuments.
   ========================================================================== */
.dp { position: relative; }

/* Anzeige-Feld sieht aus wie ein normales Eingabefeld. */
.dp-field {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 48px;
    padding: 0.65rem 2.6rem 0.65rem 0.9rem;
    font: inherit;
    text-align: left;
    color: var(--fg);
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dp-field:hover { border-color: var(--fg-muted); }

.dp--open .dp-field {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgb(230 0 0 / 0.15);
}

.dp-cal { width: 18px; height: 18px; flex: none; color: var(--fg-muted); }

.dp-text.is-placeholder { color: var(--fg-muted); }

/* X zum Löschen (rechts im Feld), nur sichtbar wenn ein Datum gesetzt ist. */
.dp-clear {
    position: absolute;
    top: 50%;
    right: 0.55rem;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--fg-muted);
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
}

.dp--has-value .dp-clear { display: inline-flex; }
.dp-clear:hover { color: var(--accent); transform: translateY(-50%) scale(1.12); }
.dp-clear svg { width: 18px; height: 18px; }

/* Popup-Kalender – fest positioniert, damit es nicht am Kartenrand abschneidet. */
.dp-pop {
    position: fixed;
    z-index: 1000;
    width: 280px;
    max-width: 92vw;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    border: 1px solid var(--border);
    padding: 0.9rem;
    animation: dp-pop 0.14s ease;
}

@keyframes dp-pop {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
}

.dp-title { font-weight: 700; font-size: 1rem; }

.dp-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: var(--app-bg);
    color: var(--fg);
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.dp-nav:hover { background: var(--border); }
.dp-nav svg { width: 16px; height: 16px; }

.dp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.dp-dow {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--fg-muted);
    padding-bottom: 0.3rem;
}

.dp-day {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    font: inherit;
    font-size: 0.9rem;
    color: var(--fg);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.dp-day:hover { background: var(--app-bg); }

.dp-day.is-today {
    box-shadow: inset 0 0 0 1.5px var(--fg-muted);
    font-weight: 700;
}

.dp-day.is-selected {
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 700;
}
.dp-day.is-selected:hover { background: var(--accent); }

/* Monatswähler: zwölf Monate in drei Spalten, oben das Jahr. Dieselben
   Bausteine wie beim Kalenderblatt, nur ein anderes Raster. */
.dp-pop--month { width: 260px; }

.dp-months {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
    margin-top: 0.6rem;
}

.dp-month {
    padding: 0.6rem 0.25rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    font: inherit;
    font-size: 0.92rem;
    color: var(--fg);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.dp-month:hover { background: var(--app-bg); }

.dp-month.is-today {
    box-shadow: inset 0 0 0 1.5px var(--fg-muted);
    font-weight: 700;
}

.dp-month.is-selected {
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 700;
}
.dp-month.is-selected:hover { background: var(--accent); }

.dp-today {
    width: 100%;
    margin-top: 0.7rem;
    padding: 0.5rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--app-bg);
    font: inherit;
    font-weight: 600;
    color: var(--fg);
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.dp-today:hover { background: var(--border); }

@media (prefers-reduced-motion: reduce) {
    .dp-pop { animation: none; }
}

/* ==========================================================================
   13. Menü-Einstellungen (Kontrollzentrum -> Einstellungen)
   ========================================================================== */
.menu-list { display: flex; flex-direction: column; }
.menu-group { display: flex; flex-direction: column; }

.menu-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    background: var(--card-bg);
}
.menu-group:last-child .menu-row:last-child { border-bottom: 0; }

/* Unterseite eines Bereichs (z. B. Kontrollzentrum) – je Ebene eingerückt,
   die Tiefe kommt als --menu-depth aus admin_settings.php. Der Strich links
   zeigt, zu welchem Bereich die Zeile gehört. */
.menu-row--sub {
    position: relative;
    padding-left: calc(var(--menu-depth, 1) * 1.75rem);
}
.menu-row--sub::before {
    content: '';
    position: absolute;
    left: calc(var(--menu-depth, 1) * 1.75rem - 0.9rem);
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border);
}

/* Ziehgriff: lange drücken (siehe admin-settings.js), dann verschieben.
   touch-action: none verhindert, dass der Finger stattdessen die Seite
   scrollt, während gezogen wird. */
.menu-row-handle {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 40px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--fg-muted);
    cursor: grab;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}
.menu-row-handle:hover { color: var(--fg); }
.menu-row-handle svg { width: 18px; height: 18px; }

/* Während des Ziehens: über allen anderen Zeilen, leicht angehoben. */
.menu-row.is-dragging {
    position: relative;
    z-index: 5;
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
    border-radius: var(--radius-sm);
    cursor: grabbing;
}
.menu-row.is-dragging .menu-row-handle { cursor: grabbing; }

/* Zielposition beim Ziehen. */
.menu-row.is-drop { box-shadow: inset 0 2px 0 var(--accent); }

.menu-row-icon { flex: none; color: var(--fg-muted); display: flex; }
.menu-row-icon svg { width: 20px; height: 20px; }

.menu-row-title { flex: 1; min-width: 0; }

/* Beiwerk hinter dem Namen (z. B. das Geschäftsjahr einer Welle) – gehört
   dazu, soll den Namen aber nicht überstimmen. */
.menu-row-sub {
    margin-left: 0.5rem;
    font-size: 0.85rem;
    color: var(--fg-muted);
}

.menu-row-icon-picker { flex: none; width: 5.5rem; position: relative; }
.menu-row-icon-picker .select-btn {
    justify-content: center;
    min-height: 40px;
    padding: 0.4rem 1.6rem 0.4rem 0.6rem;
    font-size: 0.9rem;
}
.menu-row-icon-picker .select-btn svg,
.menu-row-icon-picker .dropdown-item svg { width: 18px; height: 18px; flex: none; }
.menu-row-icon-picker .dropdown-item svg { color: var(--fg-muted); }

/* Ablagefläche einer Zeile ohne Unterseiten: normalerweise unsichtbar, beim
   Ziehen ein gestricheltes Feld, in das die Zeile als Unterpunkt fällt. */
.menu-group--drop { min-height: 0; }
.menu-group--drop.is-target {
    min-height: 30px;
    margin-left: calc(var(--menu-depth, 1) * 1.75rem);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
}

/* Zielmarke beim Ziehen: dünne Linie an der Stelle, an der die Zeile landet. */
.menu-drop-line {
    height: 0;
    border-top: 2px solid var(--accent);
    margin-left: calc(var(--menu-depth, 0) * 1.75rem);
}

/* Trennlinie im Menü: ziehbar wie eine Zeile, mit Kreuz zum Entfernen.
   Sie gehört zum Punkt darunter (pages.nav_divider). */
.menu-divider {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0;
    margin-left: calc(var(--menu-depth, 0) * 1.75rem);
}
.menu-divider-line {
    flex: 1;
    height: 2px;
    border-radius: 1px;
    background: var(--fg-muted);
    opacity: 0.55;
}
.menu-divider-handle {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 26px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--fg-muted);
    cursor: grab;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}
.menu-divider-handle svg { width: 18px; height: 18px; }
.menu-divider.is-dragging {
    position: relative;
    z-index: 5;
    cursor: grabbing;
}
.menu-divider form { display: flex; }

/* Kleine Knöpfe in einer Menüzeile (Trennlinie einfügen, Linie entfernen). */
.menu-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--fg-muted);
    cursor: pointer;
}
.menu-icon-btn:hover { color: var(--fg); background: var(--app-bg); }
.menu-icon-btn svg { width: 16px; height: 16px; }
.menu-row-addsep { flex: none; display: flex; opacity: 0; transition: opacity 0.12s ease; }
.menu-row:hover .menu-row-addsep,
.menu-row-addsep:focus-within { opacity: 1; }
@media (hover: none) {
    .menu-row-addsep { opacity: 1; }
}

/* Info-Zeichen mit der Liste der Berechtigten. */
.menu-row-access { flex: none; position: relative; display: flex; }
.menu-row-info {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--fg-muted);
    cursor: help;
}
.menu-row-info:hover,
.menu-row-access.is-open .menu-row-info { color: var(--accent); }
.menu-row-info svg { width: 18px; height: 18px; }

.menu-access-pop {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 20;
    width: max-content;
    min-width: 15rem;
    max-width: min(22rem, calc(100vw - 2rem));
    max-height: 17rem;
    overflow-y: auto;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
    font-size: 0.85rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease;
}
.menu-row-access:hover .menu-access-pop,
.menu-row-access:focus-within .menu-access-pop,
.menu-row-access.is-open .menu-access-pop { opacity: 1; visibility: visible; }
body.menu-is-dragging .menu-access-pop { display: none; }

.menu-access-head { margin: 0 0 0.35rem; font-weight: 600; }
.menu-access-levels,
.menu-access-empty { margin: 0.25rem 0 0; color: var(--fg-muted); }

.menu-access-list { margin: 0; padding: 0; list-style: none; }
.menu-access-list li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.2rem 0;
    border-top: 1px solid var(--border);
}
.menu-access-name { min-width: 0; }
.menu-access-via { flex: none; color: var(--fg-muted); font-size: 0.8rem; }

/* Zeile ohne Wirkung (Marker ohne Kürzel oder mit zugedrücktem Auge): bleibt
   lesbar, tritt aber zurück – sie taucht im Vergleich nicht auf. */
.menu-row.is-muted .menu-row-title { color: var(--fg-muted); }

/* Marker-Kachel: Kürzelfeld und Auge rechts, das Feld bewusst schmal – mehr
   als acht Zeichen passen ohnehin nicht in den Anhänger. */
.audit-markerrow {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.audit-markerrow .form-input {
    width: 6.5rem;
    min-height: 38px;
    margin: 0;
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
    text-transform: uppercase;
}

/* ==========================================================================
   14. Sales Quiz – Dashboard (/admin_quiz/?view=dashboard)
   Balken je Zeitabschnitt, vier Kennzahlen, Verteilung/Top Quizzer/Kategorien
   und die Liste der Durchläufe. Gerechnet und gezeichnet wird in
   assets/js/quiz-dashboard.js – hier steht nur, wie es aussieht.
   ========================================================================== */

:root {
    /* Leerer Teil eines Rings/Kreises – heller als der Rahmen, damit der
       gefüllte Teil klar hervorsticht. */
    --qd-track: var(--vf-track);

    /* Kategorien: feste Reihenfolge, NIE im Kreis weitervergeben. Ab der
       sechsten Kategorie fasst das Skript zu "Sonstiges" (grau) zusammen.
       Die Töne sind gegen Farbfehlsichtigkeit und Kontrast geprüft. */
    --qd-cat-1: var(--vf-red);
    --qd-cat-2: var(--vf-aqua-blue);
    --qd-cat-3: var(--vf-spring-green);
    --qd-cat-4: var(--vf-red-violet);
    --qd-cat-5: var(--vf-fresh-orange);
    --qd-cat-rest: var(--vf-grey-light);

    /* Punktzahl-Stufen: eine Ampel von gut nach schlecht (keine Identität,
       sondern eine Reihenfolge – deshalb ein durchgehender Verlauf). */
    --qd-s1: var(--vf-success);
    --qd-s2: var(--vf-lemon-yellow-dk);
    --qd-s3: var(--vf-fresh-orange-dk);
    --qd-s4: var(--vf-red);
}

:root[data-theme="dark"] {
    --qd-track: var(--vf-track-dark);
    --qd-cat-1: var(--vf-red-inverse);
    --qd-cat-2: var(--vf-aqua-blue-dark);
    --qd-cat-3: var(--vf-spring-green-dark);
    --qd-cat-4: var(--vf-red-violet-dark);
    --qd-cat-5: var(--vf-fresh-orange-dark);
    --qd-cat-rest: var(--vf-grey-mid);
    --qd-s1: var(--vf-success-dk);
    --qd-s2: var(--vf-lemon-yellow-dark);
    --qd-s3: var(--vf-fresh-orange-warn);
    --qd-s4: var(--vf-red-text);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --qd-track: var(--vf-track-dark);
        --qd-cat-1: var(--vf-red-inverse);
        --qd-cat-2: var(--vf-aqua-blue-dark);
        --qd-cat-3: var(--vf-spring-green-dark);
        --qd-cat-4: var(--vf-red-violet-dark);
        --qd-cat-5: var(--vf-fresh-orange-dark);
        --qd-cat-rest: var(--vf-grey-mid);
        --qd-s1: var(--vf-success-dk);
        --qd-s2: var(--vf-lemon-yellow-dark);
        --qd-s3: var(--vf-fresh-orange-warn);
        --qd-s4: var(--vf-red-text);
    }
}

.quizdash {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

/* --- Kopfzeile einer Karte: Titel links, Bedienung rechts ----------------- */
.qd-cardhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem 1.25rem;
    margin-bottom: 1rem;
}

.qd-cardhead .card-title { margin-bottom: 0; }

.qd-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.qd-count { color: var(--fg-muted); font-weight: 400; font-size: 0.9rem; }

/* --- Bedienung über dem Diagramm ----------------------------------------- */
.qd-controls {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}


/* --- Balkendiagramm ------------------------------------------------------- */
.qd-plot {
    position: relative;
    padding: 0 2.4rem;
}

@media (max-width: 600px) { .qd-plot { padding: 0 1.6rem; } }

.qd-canvas { width: 100%; }
.qd-svg { display: block; max-width: 100%; }

.qd-arrow {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--fg-muted);
    cursor: pointer;
}

.qd-arrow:hover:not([disabled]) { color: var(--accent); border-color: var(--accent); }
.qd-arrow[disabled] { opacity: 0.35; cursor: default; }
.qd-arrow svg { width: 18px; height: 18px; }

.qd-arrow--prev { left: 0; }
.qd-arrow--next { right: 0; }
.qd-arrow--next svg { transform: rotate(180deg); }

.qd-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 5; }
.qd-ylabel { fill: var(--fg-muted); font-size: 11px; }
.qd-xlabel { fill: var(--fg-muted); font-size: 12px; }
.qd-xlabel--sub { opacity: 0.75; font-size: 11px; }

/* Ein Balken je Abschnitt – der, auf den gezeigt wird, wird kräftig. */
.qd-bar {
    fill: var(--accent);
    opacity: 0.45;
    transition: opacity 0.12s ease;
}

.qd-bar.is-active { opacity: 1; }
.qd-hit { fill: transparent; cursor: pointer; }
.qd-bar-dot { fill: var(--accent); stroke: var(--card-bg); stroke-width: 2; }

.qd-tip {
    position: absolute;
    transform: translate(-50%, -100%);
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.14);
    pointer-events: none;
    white-space: nowrap;
    z-index: 5;
}

.qd-tip[hidden] { display: none; }
.qd-tip-when { font-size: 0.75rem; color: var(--fg-muted); }

.qd-tip-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.qd-tip-what { font-size: 0.75rem; color: var(--fg-muted); }

.qd-period {
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: var(--fg-muted);
}

/* --- Zweite Größe im Diagramm: der Durchschnitt als Linie ------------------
   Die Balken zählen, die Linie bewertet. Damit man beides auseinanderhält,
   ist die Linie durchgezogen und kräftig, während die Balken nur getönt sind
   – und sie liest sich an der Skala rechts (immer 0–100 %). */
.qd-line {
    fill: none;
    stroke: var(--lv-mid);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.qd-line-dot { fill: var(--lv-mid); stroke: var(--card-bg); stroke-width: 1.5; }
.qd-ylabel--pct { opacity: 0.85; }

.qd-tip-avg {
    margin-top: 0.15rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--lv-mid);
    font-variant-numeric: tabular-nums;
}

/* Legende über dem Diagramm – erklärt Balken und Linie in einer Zeile. */
.qd-chartlegend {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-size: 0.78rem;
    color: var(--fg-muted);
}

.qd-chartlegend-item { display: inline-flex; align-items: center; gap: 0.35rem; }

.qd-chartlegend-bar {
    width: 10px;
    height: 12px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--accent) 45%, transparent);
}

.qd-chartlegend-line {
    width: 14px;
    height: 2px;
    border-radius: 999px;
    background: var(--lv-mid);
}

/* --- Kennzahlen ----------------------------------------------------------- */
.kpi-icon--accent {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.kpi-big--xl { font-size: 1.9rem; }

.qd-ring-slot { flex: 0 0 auto; line-height: 0; }

.qd-ring {
    position: relative;
    width: 84px;
    height: 84px;
}

.qd-ring svg { display: block; width: 100%; height: 100%; }
.qd-ring-track { fill: none; stroke: var(--qd-track); stroke-width: 11; }

.qd-ring-value {
    fill: none;
    stroke: var(--accent);
    stroke-width: 11;
    stroke-linecap: round;
}

.qd-ring-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* --- Die drei Karten unter den Kennzahlen --------------------------------- */
/* Nicht drei gleiche Spalten: die Verteilung braucht am wenigsten Platz,
   die Namen der Top Quizzer am meisten. */
.qd-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 0.95fr);
    gap: var(--gap);
}

@media (max-width: 1200px) {
    .qd-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Der Ring braucht neben seiner Legende am meisten Platz. */
    .qd-row > :nth-child(3) { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
    .qd-row { grid-template-columns: minmax(0, 1fr); }
    .qd-row > :nth-child(3) { grid-column: auto; }
}

.qd-card { display: flex; flex-direction: column; }

/* Spalte aus zwei Kacheln – zusammen so hoch wie die Nachbarn. Die obere
   Kachel darf dabei nicht mitwachsen, sonst steht die Verteilung in der Luft. */
.qd-col {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    min-width: 0;
}

.qd-col > .qd-card:last-child { flex: 1; }

/* --- Ergebnisse nach Punktzahl -------------------------------------------- */
.qd-bars {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.3rem;
    margin-bottom: 1.05rem;
}

/* Feste Spaltenbreiten statt "auto": sonst richtet sich jede Zeile nach ihrem
   eigenen Text und die Balken fangen auf vier verschiedenen Höhen unter-
   schiedlich weit links an – das wirkt unruhig. So beginnen und enden alle
   Balken exakt übereinander. Einen Farbpunkt braucht es nicht mehr: der
   Balken selbst trägt die Farbe. */
.qd-bar-row {
    display: grid;
    grid-template-columns: 5.2rem minmax(0, 1fr) 2rem 3.5rem;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
}

.qd-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex: none;
}

.qd-bar-label { white-space: nowrap; }

.qd-bar-track {
    /* So hoch wie die Zeile daneben – der Balken ist eine Zeile, kein Block. */
    height: 1rem;
    border-radius: 999px;
    background: var(--app-bg);
    overflow: hidden;
}

.qd-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.qd-bar-fill--s1 { background: var(--qd-s1); }
.qd-bar-fill--s2 { background: var(--qd-s2); }
.qd-bar-fill--s3 { background: var(--qd-s3); }
.qd-bar-fill--s4 { background: var(--qd-s4); }

.qd-bar-num {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.qd-bar-share {
    text-align: right;
    color: var(--fg-muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

/* Die Zeilen unter dem Strich sind Nebeninformation – sie stehen dabei,
   drängen sich aber nicht vor die Verteilung darüber. Eng gesetzt, damit die
   drei Angaben die Kachel nicht in die Höhe treiben. */
.qd-bars-foot {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    /* auto schiebt den Fuß ans untere Ende der Kachel. Den Mindestabstand zur
       Linie trägt .qd-bars als margin-bottom – in max() darf kein auto
       stehen, und ohne auto klebte der Fuß direkt unter den Balken. */
    margin-top: auto;
    padding-top: 0.7rem;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--fg-muted);
}

.qd-foot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.qd-bars-foot strong {
    font-weight: 500;
    color: var(--fg);
    font-variant-numeric: tabular-nums;
}

/* --- Top Quizzer ---------------------------------------------------------- */
.qd-rank {
    list-style: none;
    display: flex;
    flex-direction: column;
}

.qd-rank-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0;
}

/* Platz 1 bis 3 tragen eine Medaille – dieselben Farben und dieselbe weiße
   Ziffer wie in der Vergleichstabelle des Sales Audit (.aud-rank--m1/2/3).
   Abweichend sitzt die Ziffer hier über Flexbox mittig statt über eine feste
   Zeilenhöhe: in der dichten Tabelle passt die Zeilenhöhe, in dieser Liste
   stünde die Zahl sonst leicht nach oben versetzt. */
.qd-rank-item .aud-rank {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 0;
    line-height: 1;
    font-size: 0.78rem;
    font-weight: 700;
}

.qd-rank-item .aud-rank--medal { color: var(--vf-white); }

/* Ab Platz 4 nur die Zahl – zurückgenommen, damit die Medaillen oben die
   Aufmerksamkeit behalten. */
.qd-rank-item .aud-rank:not(.aud-rank--medal) {
    color: var(--fg-muted);
    font-weight: 600;
}

.qd-rank-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.qd-rank-name {
    font-weight: 600;
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qd-rank-shop {
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qd-score {
    flex: none;
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-btn);
    background: color-mix(in srgb, var(--lv-ok) 12%, transparent);
    color: var(--lv-ok);
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.qd-rank-empty { padding: 0.35rem 0; font-size: 0.9rem; }

/* --- Quiz nach Kategorie -------------------------------------------------- */
/* Ring und Legende nebeneinander, aber ohne Mindestbreiten, die die Karte
   auseinanderdrücken – sonst schiebt die Kachel die ganze Seite breit. */
.qd-catbody {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.qd-donut {
    position: relative;
    flex: none;
    width: 104px;
    height: 104px;
}

.qd-donut svg { display: block; width: 100%; height: 100%; }
.qd-donut-track { fill: none; stroke: var(--qd-track); stroke-width: 13; }
.qd-donut-seg { fill: none; stroke-width: 13; }

.qd-donut-mid {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

.qd-donut-mid strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
.qd-donut-mid span { font-size: 0.7rem; color: var(--fg-muted); }

.qd-legend {
    list-style: none;
    flex: 1 1 8rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-size: 0.82rem;
}

.qd-legend-item { display: flex; align-items: center; gap: 0.5rem; }

.qd-legend-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qd-legend-val { font-weight: 700; font-variant-numeric: tabular-nums; }

.qd-cattable { margin-top: 0.9rem; }

/* Feste Spaltenbreiten: die Zahlenspalten bekommen genau, was sie brauchen,
   der Rest gehört dem Namen – der bricht lieber um, als die Kachel (und
   damit die ganze Seite) breiter zu machen. */
.qd-cat-table {
    table-layout: fixed;
    width: 100%;
    font-size: 0.8rem;
}

.qd-cat-table col:first-child { width: auto; }
.qd-cat-table col + col { width: 4.6rem; }

.qd-cat-table th,
.qd-cat-table td {
    padding: 0.4rem 0.3rem;
}

.qd-cat-table th:first-child,
.qd-cat-table td:first-child {
    padding-left: 0;
    overflow-wrap: anywhere;
}

.qd-cat-table th:last-child,
.qd-cat-table td:last-child { padding-right: 0; }

.qd-more { margin-top: 1rem; }

/* --- Liste der Durchläufe ------------------------------------------------- */
.qd-search { flex: 0 1 18rem; }

.qd-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
}

.qd-status svg { width: 14px; height: 14px; flex: none; }

.qd-status--ok  { color: var(--lv-ok);  background: color-mix(in srgb, var(--lv-ok) 12%, transparent); }
.qd-status--mid { color: var(--lv-mid); background: color-mix(in srgb, var(--lv-mid) 14%, transparent); }
.qd-status--bad { color: var(--lv-bad); background: color-mix(in srgb, var(--lv-bad) 12%, transparent); }

.qd-table td { font-variant-numeric: tabular-nums; }
.qd-table .text-muted { font-variant-numeric: normal; }

/* Der Shop steht unter dem Namen – eine eigene Spalte dafür wäre dieselbe
   Angabe zweimal und würde nur Platz kosten. */
.qd-cell-shop { display: block; }

/* Auswahlspalte: nur so breit wie das Kästchen, das hier eine Nummer kleiner
   ausfällt als im Formular – in einer Tabellenzeile wären 24 px zu wuchtig. */
.qd-col-check { width: 1px; white-space: nowrap; }

.qd-col-check .check-box {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

.qd-col-check .check-mark { padding: 2px; }

/* Auswahlleiste – erscheint erst, wenn etwas angehakt ist. */
.qd-bulk {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--app-bg);
}

.qd-bulk[hidden] { display: none; }
.qd-bulk-count { margin-right: auto; font-size: 0.9rem; }
.qd-bulk-count strong { font-variant-numeric: tabular-nums; }

/* Ganz schmal reicht das Symbol – das Wort steht im Titel des Feldes. */
@media (max-width: 620px) {
    .qd-status > span { display: none; }
    .qd-status { padding: 0.25rem; }
    .qd-table .qd-col-date { white-space: nowrap; font-size: 0.8rem; }
}

.qd-foot {
    margin-top: 0.6rem;
    font-size: 0.78rem;
    color: var(--fg-muted);
}

/* --- Durchläufe: aufklappbare Liste ---------------------------------------
   Karte im Stil der übrigen Aufklapp-Kästen (.acc). Zugeklappt steht dort nur
   die Überschrift mit der Anzahl im gewählten Zeitraum.
   ------------------------------------------------------------------------- */
.qd-runs .acc-head { font-size: 1.25rem; }
.qd-runs .qd-count { margin-right: 0.25rem; }

/* Suchfeld sitzt im Kasten, nicht mehr in der Kopfzeile. */
.qd-runs .qd-search {
    display: flex;
    max-width: 22rem;
    margin-bottom: 0.9rem;
}

/* ==========================================================================
   14b. Verkaufsbeobachtung – Dashboard (/admin_vbb/?view=dashboard)
   Baut auf denselben Bausteinen auf wie das Sales-Quiz-Dashboard (qd-*);
   hier steht nur, was dort anders ist. Gerechnet wird in
   assets/js/vbb-dashboard.js.
   ========================================================================== */

/* Wer nur einen Shop sieht, bekommt keine Shop-Rangliste – dann teilen sich
   die beiden übrigen Karten die Reihe. */
.qd-row--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

@media (max-width: 760px) {
    .qd-row--two { grid-template-columns: minmax(0, 1fr); }
}

/* Kategorienamen sind länger als "80 – 100 %": mehr Platz links, und was
   trotzdem nicht passt, endet mit … statt den Balken zu verschieben. */
.vd-catbar { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr) 2.6rem 3.6rem; }

.vd-catbar .qd-bar-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ein einzelner Beobachtungspunkt ist ein ganzer Satz – er bekommt eine
   eigene Zeile über dem Balken, statt auf 8 rem gekürzt zu werden. */
.vd-pointbar {
    grid-template-columns: minmax(0, 1fr) 2.6rem 3.6rem;
    grid-template-areas:
        "label label label"
        "track num   share";
    row-gap: 0.25rem;
}

.vd-pointbar .qd-bar-label {
    grid-area: label;
    white-space: normal;
    line-height: 1.3;
}

.vd-pointbar .qd-bar-track { grid-area: track; }
.vd-pointbar .qd-bar-num   { grid-area: num; }
.vd-pointbar .qd-bar-share { grid-area: share; }

/* Zwischen zwei mehrzeiligen Punkten braucht es mehr Luft als zwischen
   zwei Kategorien. */
.vd-points { gap: 0.75rem; }

/* --- Mitarbeiter-Entwicklung ---------------------------------------------
   Rechts steht keine Punktzahl, sondern die Veränderung – mit Dreieck und in
   der Farbe der Richtung, wie bei den Kennzahlen oben. */
.vd-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding-inline: 0.25rem;
    /* Die Farbe kommt von der Richtung, nicht vom Kasten – sonst stünde eine
       rote Zahl auf grünem Grund. */
    background: none;
    white-space: nowrap;
}

.vd-delta--up   { color: var(--lv-ok); }
.vd-delta--down { color: var(--lv-bad); }
.vd-delta--flat { color: var(--fg-muted); }

/* Eine Anzahl ist keine Bewertung: neutral statt grün. */
.vd-neutral { background: var(--app-bg); color: var(--fg); }

/* Ergebnis einer Beobachtung in der Liste: Punkte und Prozent in der
   Ampelfarbe. Anders als beim Quiz steht hier eine Zahl und kein Wort –
   sie bleibt deshalb auch auf schmalen Bildschirmen stehen. */
.vd-result {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.vd-result--ok  { color: var(--lv-ok);  background: color-mix(in srgb, var(--lv-ok) 12%, transparent); }
.vd-result--mid { color: var(--lv-mid); background: color-mix(in srgb, var(--lv-mid) 14%, transparent); }
.vd-result--bad { color: var(--lv-bad); background: color-mix(in srgb, var(--lv-bad) 12%, transparent); }

/* ==========================================================================
   Öffentliche Download-Seite (/downloads/)
   Frei zugänglich – Gäste sehen oben rechts nur das Anmelde-Symbol.
   ========================================================================== */

/* Die Kacheln laufen über die volle Breite der Seite – bündig mit dem Titel. */
.downloads { margin-top: var(--gap); }

.download-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.download-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Pseudoklasse schlägt Klasse – globale Linkfarben hier überstimmen. */
.download-item:link,
.download-item:visited,
.download-item:hover { color: var(--fg); }

.download-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 10px 28px rgb(0 0 0 / 0.12);
}

.download-icon {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 6px;
    background: var(--app-bg);
    color: var(--accent);
}

.download-icon svg { width: 24px; height: 24px; }

/* Endung als kleine Plakette an der Ecke des Symbols. */
.download-ext {
    position: absolute;
    right: -6px;
    bottom: -6px;
    max-width: 3.4em;
    padding: 3px 5px;
    border-radius: 5px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.55rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.download-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.download-title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.download-meta { font-size: 0.82rem; color: var(--fg-muted); }

.download-arrow {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--fg-muted);
    transition: color 0.15s ease, transform 0.15s ease;
}

.download-arrow svg { width: 22px; height: 22px; }

.download-item:hover .download-arrow {
    color: var(--accent);
    transform: translateY(2px);
}

.downloads-cta { text-align: center; }
.downloads-cta .btn { margin-top: 0.25rem; }

/* Auf schmalen Geräten wird es sonst zu eng. */
@media (max-width: 480px) {
    .download-item { gap: 0.75rem; padding: 0.8rem 0.9rem; }
    .download-icon { width: 40px; height: 40px; border-radius: 6px; }
    .download-icon svg { width: 21px; height: 21px; }
}

/* ===========================================================================
   Verkaufsbeobachtung – Startseite (/vbb/)
   Die Felder laufen über die volle Breite der Seite – bündig mit dem Titel –
   und stehen mit deutlichem Abstand unter dem Einleitungstext.

   KEIN `margin-inline: auto` hier: die Form ist ein Flex-Element in .stack,
   und eine automatische Seitenmarge hebt dort das Dehnen auf – das Feld
   schrumpft dann auf seine Inhaltsbreite zusammen.
   =========================================================================== */

.vbb-start {
    width: 100%;
    margin-top: 1.5rem;
}

/* ==========================================================================
   Ansicht von … – die rote Linie am unteren Rand
   Steht in jedem Fenster, das ein Admin mit den Augen eines Benutzers sieht
   (includes/viewas.php). Bewusst schmal und ganz unten: Sie soll erinnern,
   nicht die Seite verdecken.
   ========================================================================== */
.viewas-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;                     /* über allem, auch über der Suchleiste */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    padding: 0.3rem 0.75rem calc(0.3rem + env(safe-area-inset-bottom, 0px));
    background: var(--vf-red);
    border-top: 1px solid var(--vf-dark-red);
    color: var(--vf-white);
    font-size: 0.78rem;
    line-height: 1.3;
    text-align: center;
}

.viewas-text strong { font-weight: 600; }
.viewas-note { opacity: 0.8; }

.viewas-end {
    color: var(--vf-white);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.viewas-end:hover,
.viewas-end:focus-visible { text-decoration: none; }

/* Im Dark Mode ist Vodafone Red Inverse die richtige Rotstufe. */
:root[data-theme="dark"] .viewas-bar { background: var(--vf-red-inverse); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .viewas-bar { background: var(--vf-red-inverse); }
}

/* Die schwebende Suchleiste und der Platzhalter am Seitenende rücken um die
   Höhe der Linie nach oben, damit nichts darunter verschwindet. */
.is-viewas .searchdock {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 2.5rem + var(--kb-inset, 0px));
}

.is-viewas .searchdock-spacer { height: 7rem; }

/* ==========================================================================
   Verkaufsbeobachtung – der Bogen (/admin_vbb/, später auch /vbb/)

   Der gedruckte Bogen steht in vier Spalten nebeneinander; genau so beginnt
   auch die Konfiguration. Ein Umschalter oben stellt stattdessen alle Punkte
   untereinander, getrennt durch die Kategorien – dieselbe Umschaltung
   bekommt später die Beobachtung selbst (assets/js/admin-vbb.js).

   Alle Felder sind rahmenlos, solange man sie nicht anfasst: Der Bogen soll
   auch beim Einrichten wie ein Bogen aussehen und nicht wie ein Formular.
   ========================================================================== */

/* Der Einleitungstext bleibt schmal, auch wenn die Seite für den Bogen
   breiter steht – eine Zeile über 76rem liest sich nicht mehr gut. */
.vbb-intro { max-width: 46rem; }

/* Höchstens vier Kategorien nebeneinander – so ist der Bogen gedruckt, und
   breiter muss die Seite dafür nicht werden. Was nicht mehr in die Reihe
   passt (auch die Kachel zum Anlegen), rutscht eine Reihe tiefer. Auf
   schmaleren Geräten werden von selbst drei, zwei und eine Spalte daraus. */
.vbb-cats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: 1rem;
    /* Alle Kacheln einer Reihe sind so hoch wie die längste – nebeneinander
       sieht das aus wie ein Bogen und nicht wie eine Zettelsammlung. */
    align-items: stretch;
}

/* Die Kachel zum Anlegen macht diesen Zug nicht mit: sie hat keinen Inhalt,
   der die Höhe rechtfertigen würde. */
.vbb-cat--new { align-self: start; }

/* Liste: eine Spalte, mittig – sonst laufen die kurzen Punkte über die
   ganze Bildschirmbreite auseinander. */
.vbb-board--list .vbb-cats {
    grid-template-columns: 1fr;
    max-width: 42rem;
    margin-inline: auto;
}

/* --- Kachel einer Kategorie ---------------------------------------------- */
.vbb-cat {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1rem;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
}

.vbb-cat-head {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

/* Rahmenlose Felder: erst beim Überfahren oder Schreiben wird ein Feld
   daraus. Gemeinsame Grundlage für Buchstabe, Kategoriename und Punkt. */
.vbb-badge,
.vbb-cat-title,
.vbb-text {
    min-width: 0;
    padding: 0.2rem 0.35rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: inherit;
    font: inherit;
    appearance: none;
}

.vbb-badge:hover,
.vbb-cat-title:hover,
.vbb-text:hover {
    background: var(--input-bg);
    border-color: var(--border);
}

.vbb-badge:focus,
.vbb-cat-title:focus,
.vbb-text:focus {
    outline: none;
    background: var(--input-bg);
    border-color: var(--accent);
}

/* Der Buchstabe aus ABBA – groß und rot wie auf dem gedruckten Bogen. */
.vbb-badge {
    flex: none;
    width: 2.1rem;
    color: var(--accent);
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
}

.vbb-cat-title {
    flex: 1;
    color: var(--accent);
    font-weight: 700;
}

/* --- Punkte und Zwischentexte -------------------------------------------- */
.vbb-items {
    display: flex;
    flex-direction: column;
    min-height: 0.5rem;
}

.vbb-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

/* Zwischentext: trennt Punkte innerhalb einer Kategorie. Darüber derselbe
   feine Strich wie unter dem Kategoriekopf, darunter etwas Luft – so gehört
   er sichtbar zu den Punkten, die ihm folgen. */
.vbb-item--heading {
    margin-top: 0.7rem;
    margin-bottom: 0.35rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--border);
}

.vbb-item--heading:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.vbb-item--heading .vbb-text { font-weight: 700; }

/* Im fertigen Bogen ist der Zwischentext leicht eingerückt – halb so weit wie
   die Punkttexte. Bündig wirkte er wie eine zweite Überschrift, ganz auf
   Texthöhe wie ein Punkt ohne Kästchen. */
.vbb-item--heading .vbb-text-static { padding-left: 1.1rem; }


.vbb-text {
    flex: 1;
    font-size: 0.9rem;
}

/* Das Kästchen zum Ankreuzen – bei der Beobachtung wird darin geklickt,
   hier zeigt es nur, dass die Zeile ein Punkt ist. */
.vbb-box {
    flex: none;
    width: 13px;
    height: 13px;
    border: 1.5px solid var(--fg-muted);
    border-radius: 2px;
}

/* --- Griffe und Löschknöpfe ---------------------------------------------- */
/* Sie gehören zur Bearbeitung, nicht zum Bogen: An Zeigergeräten erscheinen
   sie erst, wenn die Zeile berührt wird. Auf dem Touchscreen stehen sie
   dauerhaft da – dort gibt es kein Überfahren. */
.vbb-grip {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 28px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--fg-muted);
    cursor: grab;
    touch-action: none;
    appearance: none;
}

.vbb-grip svg { width: 16px; height: 16px; }
.vbb-grip:hover { color: var(--fg); }
.vbb-cat.is-dragging .vbb-grip { cursor: grabbing; }

.vbb-item .icon-action {
    width: 28px;
    height: 28px;
    background: none;
    border-color: transparent;
}

.vbb-item .icon-action svg { width: 15px; height: 15px; }
.vbb-item .icon-action:hover { color: var(--accent); }

.vbb-cat-head .icon-action { flex: none; }

@media (hover: hover) and (pointer: fine) {
    .vbb-item .vbb-grip,
    .vbb-item .icon-action,
    .vbb-cat-head .vbb-grip {
        opacity: 0;
        transition: opacity 0.12s ease;
    }

    .vbb-item:hover .vbb-grip,
    .vbb-item:hover .icon-action,
    .vbb-item:focus-within .vbb-grip,
    .vbb-item:focus-within .icon-action,
    .vbb-cat:hover .vbb-cat-head .vbb-grip,
    .vbb-cat:focus-within .vbb-cat-head .vbb-grip { opacity: 1; }

    .vbb-item .vbb-grip:focus-visible,
    .vbb-item .icon-action:focus-visible,
    .vbb-cat-head .vbb-grip:focus-visible { opacity: 1; }
}

/* --- Zeile hinzufügen ----------------------------------------------------- */
.vbb-add {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.75rem;
}

.vbb-add-input {
    flex: 1;
    min-width: 0;
    padding: 0.4rem 0.55rem;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: inherit;
    font: inherit;
    font-size: 0.85rem;
    appearance: none;
}

.vbb-add-input:focus {
    outline: none;
    border-color: var(--accent);
}

.vbb-add .dock-btn,
.vbb-newcat-form .dock-btn {
    width: 34px;
    height: 34px;
}

.vbb-add .dock-btn svg,
.vbb-newcat-form .dock-btn svg { width: 16px; height: 16px; }

/* --- Kachel zum Anlegen --------------------------------------------------- */
/* Steht sie allein in einer eigenen Reihe unter den Kategorien, wäre eine
   hohe Kachel nur ein Loch – daher flacher als die anderen. */
.vbb-cat--new {
    justify-content: center;
    min-height: 6rem;
    background: none;
    border: 1px dashed var(--border);
    box-shadow: none;
}

.vbb-newcat-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1;
    padding: 1rem;
    background: none;
    border: 0;
    color: var(--fg-muted);
    cursor: pointer;
    appearance: none;
}

.vbb-newcat-btn svg { width: 28px; height: 28px; }
.vbb-newcat-btn:hover { color: var(--accent); }

.vbb-newcat-form {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.vbb-newcat-form[hidden] { display: none; }

/* In der Liste bleibt die Anlege-Kachel flach – ein großes leeres Feld
   quer über die Breite wäre dort nur Loch. */
.vbb-board--list .vbb-cat--new { min-height: 0; }
.vbb-board--list .vbb-newcat-btn { padding: 0.5rem; }

/* --- Ziehen ---------------------------------------------------------------- */
.vbb-cat.is-dragging,
.vbb-item.is-dragging {
    position: relative;
    z-index: 5;
    opacity: 0.9;
}

.vbb-cat.is-dragging { box-shadow: 0 8px 20px rgb(0 0 0 / 0.18); }

.vbb-cat.is-drop,
.vbb-item.is-drop {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   Verkaufsbeobachtung – der laufende Bogen (/vbb/)

   Dieselben Kacheln wie im Kontrollzentrum, nur zum Ankreuzen statt zum
   Bearbeiten: Die Felder sind hier feste Texte, davor steht ein Kästchen.
   Dazu die Leiste "Weitere Infos", die von rechts hereinfährt.
   ========================================================================== */

/* Wer beobachtet wird und seit wann – etwas größer als der übrige Fließtext,
   denn beim Ausfüllen ist das die wichtigste Zeile der Seite. */
.vbb-meta {
    margin-top: 0.35rem;
    font-size: 1.05rem;
    color: var(--fg-muted);
}

.vbb-meta strong { color: var(--fg); font-weight: 600; }

/* --- Kopf und Texte im festen Bogen -------------------------------------- */
.vbb-badge-static {
    flex: none;
    width: 2.1rem;
    color: var(--accent);
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
}

.vbb-cat-title-static {
    flex: 1;
    min-width: 0;
    color: var(--accent);
    font-weight: 700;
}

.vbb-text-static { flex: 1; min-width: 0; font-size: 0.9rem; }
.vbb-item--heading .vbb-text-static { font-weight: 700; }

/* --- Punkt zum Ankreuzen -------------------------------------------------- */
/* Das Ankreuzfeld ist der Baustein der ganzen Seite (checkbox_field()) – hier
   nur eine Spur kleiner, weil in einer Kachel zehn davon untereinander stehen.
   Die ganze Zeile ist das Label: Ein Klick auf den Text setzt das Kreuz, auf
   dem Handy wäre das Kästchen allein kaum zu treffen.
   Das Kästchen steht mittig zum Text – auch wenn dieser über zwei oder drei
   Zeilen läuft. */
.vbb-item--point .check {
    flex: 1;
    min-width: 0;
    align-items: center;
    gap: 0.55rem;
    padding: 0.3rem 0.35rem;
    border-radius: 4px;
}

.vbb-item--point .check:hover { background: var(--input-bg); }

.vbb-item--point .check-box {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

.vbb-item--point .check-mark { padding: 2px; }

.vbb-item--point .check-text { font-size: 0.9rem; line-height: 1.35; }

/* --- i-Zeichen am Punkt --------------------------------------------------- */
.vbb-info-open {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--fg-muted);
    cursor: pointer;
    appearance: none;
}

.vbb-info-open svg { width: 16px; height: 16px; }
.vbb-info-open:hover { color: var(--accent); }

/* Im Kontrollzentrum bleibt das i sichtbar, sobald ein Hinweis hinterlegt
   ist – sonst sieht man beim Durchsehen nicht, wo einer steckt. */
.vbb-item .icon-action.vbb-info-btn.is-set { opacity: 1; color: var(--accent); }

/* --- Hinweistext (Modal) und der Editor dazu ------------------------------ */
.vbb-info-body { font-size: 0.95rem; line-height: 1.55; }

.vbb-editor {
    margin-top: 0.5rem;
    min-height: 9rem;
    max-height: 22rem;
    overflow-y: auto;
    padding: 0.6rem 0.75rem;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: inherit;
    font-size: 0.92rem;
    line-height: 1.55;
}

.vbb-editor:focus { outline: none; border-color: var(--accent); }

.vbb-editor p,
.vbb-info-body p { margin: 0 0 0.6rem; }

.vbb-editor p:last-child,
.vbb-info-body p:last-child { margin-bottom: 0; }

.vbb-editor ul, .vbb-editor ol,
.vbb-info-body ul, .vbb-info-body ol { margin: 0 0 0.6rem; padding-left: 1.25rem; }

.vbb-editor a,
.vbb-info-body a { color: var(--accent); text-decoration: underline; }

.vbb-editor-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.75rem;
}

.vbb-editor-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 0.55rem;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--fg-muted);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    appearance: none;
}

.vbb-editor-btn:hover { color: var(--fg); border-color: var(--accent); }

.vbb-editor-sep {
    width: 1px;
    height: 20px;
    margin: 0 0.25rem;
    background: var(--border);
}

.vbb-editor-link { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; }
.vbb-editor-link .form-input { flex: 1; min-width: 0; margin: 0; }
.vbb-editor-link[hidden] { display: none; }

/* --- Reiter am rechten Rand ----------------------------------------------- */
/* Steht fest am Bildschirmrand und dreht seine Schrift – so nimmt er kaum
   Platz und ist trotzdem auf jeder Höhe der Seite erreichbar. */
.vbb-sidetab {
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 55;
    transform: translateY(-50%);
    padding: 1rem 0.5rem;
    background: var(--accent);
    border: 0;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    color: var(--vf-white);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    writing-mode: vertical-rl;
    cursor: pointer;
    appearance: none;
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
}

.vbb-sidetab:hover { background: var(--accent-hover); }

/* --- Leiste "Weitere Infos" ----------------------------------------------- */
/* Gleicher Aufbau wie die Menü-Schublade: außen ein Rahmen ohne Farbe, der
   nur Klicks abfängt, innen das Blatt, das hereinfährt. */
.vbb-side {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    overflow: hidden;
}

.vbb-side-backdrop {
    position: absolute;
    inset: 0;
    background: none;
    pointer-events: auto;
}

.vbb-side-panel {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    width: min(26rem, 100vw - 2.5rem);
    height: 100%;
    background: var(--card-bg);
    box-shadow: -8px 0 24px rgb(0 0 0 / 0.18);
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: auto;
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0.26s;
}

.vbb-side.is-open .vbb-side-panel {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
    .vbb-side-panel { transition: none; }
}

.vbb-side-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--border);
}

.vbb-side-title { margin: 0; font-size: 1.1rem; }

.vbb-side-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
}

.vbb-side-body .form-label:first-child { margin-top: 0; }
.vbb-side-body textarea.form-input { resize: none; }

/* --- Gesamteindruck als Regler -------------------------------------------- */
/* Eine Linie mit vier Haltepunkten. Die Radioknöpfe selbst sind unsichtbar;
   sichtbar ist der Punkt darüber – bedienbar bleibt es damit wie gewohnt. */
.vbb-rate {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 0.25rem;
    margin-top: 0.9rem;
}

.vbb-rate-line {
    position: absolute;
    left: 12%;
    right: 12%;
    top: 9px;
    height: 2px;
    background: var(--border);
}

.vbb-rate-step {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
    cursor: pointer;
}

.vbb-rate-step input { position: absolute; opacity: 0; pointer-events: none; }

.vbb-rate-dot {
    width: 18px;
    height: 18px;
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: 50%;
    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.vbb-rate-step:hover .vbb-rate-dot { border-color: var(--accent); }

.vbb-rate-step input:checked + .vbb-rate-dot {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

.vbb-rate-step input:focus-visible + .vbb-rate-dot {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.vbb-rate-label {
    font-size: 0.72rem;
    line-height: 1.25;
    color: var(--fg-muted);
    hyphens: auto;
}

.vbb-rate-step input:checked ~ .vbb-rate-label { color: var(--fg); font-weight: 600; }

/* Ein Knopf in der schwebenden Leiste, der etwas abschickt (Beobachtung
   verwerfen), steckt in einem Formular – ohne das hier bräche es die Reihe. */
.searchdock-inner form { display: inline-flex; align-items: center; }

/* ==========================================================================
   Verkaufsbeobachtung – Auswertung (/vbb/?view=result)

   Der Aufbau des gedruckten Bogens, nur aufgeräumt: oben die Eckdaten samt
   Ergebnis, in der Mitte die Kategorien mit ihren erfüllten Punkten, unten
   das rote Fazit. Gefüllt wird alles von assets/js/vbb-result.js.
   ========================================================================== */

.vbb-result {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

/* --- Eckdaten und Ergebnis ------------------------------------------------ */
.vbb-res-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.vbb-res-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.9rem 2rem;
    flex: 1;
    min-width: min(100%, 18rem);
    margin: 0;
}

/* Jede Angabe ist nur so breit wie ihr Inhalt – so stehen sie dicht
   beieinander links, statt sich über die halbe Karte zu verteilen. */
.vbb-res-facts > div { flex: 0 0 auto; min-width: 0; }

.vbb-res-facts dt {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fg-muted);
}

.vbb-res-facts dd {
    margin: 0.15rem 0 0;
    font-size: 0.95rem;
}

.vbb-res-facts dd.is-empty { color: var(--fg-muted); }

/* Die Adresse bekommt zwei Spalten und wird notfalls gekürzt – der volle
   Name steht im Kurzhinweis. Das Datum braucht dafür kaum Platz. */
/* Die Adresse bekommt eine feste, ruhige Spaltenbreite: breit genug für die
   meisten Filialen, aber ohne in den freien Platz hineinzuwachsen. Was nicht
   hineinpasst, wird gekürzt (der volle Name steht im Kurzhinweis). */
.vbb-res-facts > .vbb-res-fact--wide {
    flex: 0 1 auto;
    min-width: min(100%, 15rem);
    max-width: 20rem;
}

.vbb-res-cut {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}



/* Das Ergebnis steht rechts als Zahl über einem schmalen Balken. */
.vbb-res-score {
    flex: 0 0 auto;
    min-width: 9rem;
    text-align: right;
}

.vbb-res-score-num {
    margin: 0;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    color: var(--accent);
}

.vbb-res-score-of {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--fg-muted);
}

/* Der Prozentwert trägt die Ampel des Sales Audit (90 / 80). */
.vbb-res-pct {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--fg-muted);
}

.vbb-res-score.is-ok  .vbb-res-pct,
.vbb-res-score.is-ok  .vbb-res-score-num { color: var(--ok); }

.vbb-res-score.is-mid .vbb-res-pct,
.vbb-res-score.is-mid .vbb-res-score-num { color: var(--warn); }

.vbb-res-score.is-bad .vbb-res-pct,
.vbb-res-score.is-bad .vbb-res-score-num { color: var(--err); }

/* Der Nenner bleibt in jedem Fall zurückhaltend. */
.vbb-res-score .vbb-res-score-of { color: var(--fg-muted); }

.vbb-res-score.is-ok  .vbb-res-bar-fill { background: var(--ok); }
.vbb-res-score.is-mid .vbb-res-bar-fill { background: var(--warn); }
.vbb-res-score.is-bad .vbb-res-bar-fill { background: var(--err); }

.vbb-res-score .vbb-res-bar { margin-top: 0.5rem; }

.vbb-res-bar {
    height: 6px;
    background: var(--app-bg);
    border-radius: 999px;
    overflow: hidden;
}

.vbb-res-bar-fill {
    height: 100%;
    width: 0;
    background: var(--accent);
    border-radius: 999px;
    transition: width 0.4s ease;
}

/* --- Kategorien in der Auswertung ---------------------------------------- */
.vbb-res-count {
    flex: none;
    padding: 0.1rem 0.5rem;
    background: var(--app-bg);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--fg-muted);
}

/* Eine Kategorie ganz ohne Haken bleibt sichtbar, tritt aber zurück. */
.vbb-res-cats .vbb-cat.is-empty { opacity: 0.72; }

.vbb-res-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.35rem;
    border-radius: 4px;
}

.vbb-res-tick {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-radius: 4px;
    color: transparent;
}

.vbb-res-tick svg { width: 13px; height: 13px; stroke-width: 14; }

.vbb-res-item.is-done .vbb-res-tick {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.vbb-res-text { font-size: 0.9rem; line-height: 1.35; }

/* Nicht erfüllte Punkte bleiben lesbar – sie sind das eigentliche Ergebnis,
   nur eben leiser als die erfüllten. */
.vbb-res-item:not(.is-done) .vbb-res-text { color: var(--fg-muted); }

/* --- Fazit ---------------------------------------------------------------- */
.vbb-fazit {
    padding: clamp(1.25rem, 3vw, 2rem);
    background: var(--accent);
    border-radius: var(--radius-lg);
    color: var(--on-accent);
}

.vbb-fazit-title {
    margin: 0 0 1rem;
    font-size: 1.35rem;
    text-align: center;
}

.vbb-fazit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.vbb-fazit-box {
    padding: 0.9rem 1rem;
    background: var(--card-bg);
    border-radius: var(--radius-sm);
    color: var(--fg);
}

.vbb-fazit-label {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fg-muted);
}

.vbb-fazit-text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    /* Absätze aus dem Textfeld bleiben Absätze. */
    white-space: pre-line;
}

.vbb-fazit-text.is-empty { color: var(--fg-muted); font-style: italic; }

/* Abschließen ist der Weg nach vorn – der Knopf trägt deshalb die Hausfarbe. */
.dock-btn--go {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.dock-btn--go:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* ==========================================================================
   Absatzerfassung (/absatz/ und /admin_absatz/)
   ========================================================================== */

/* --- Die schwebende Leiste ------------------------------------------------
   Aufbau wie im Sales Audit: Shop-Suche (klappt aus der Lupe aus), ein
   Schritt vor/zurück, der Kalender und die Umschaltung Tag/Monat. */

/* Der Pfeil nach vorn steht am heutigen Tag still – sichtbar, aber ohne Ziel. */
.dock-btn.is-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* Das Datumsfeld in der Leiste. Ohne JavaScript ein normales Feld mit einem
   Knopf daneben; mit JavaScript macht assets/js/datepicker.js daraus einen
   Knopf, der genauso aussieht wie die übrigen Symbole der Leiste – ein Klick
   öffnet sofort den Kalender. */
.abs-dock-date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.abs-dock-date .js-date,
.abs-dock-date .js-month { width: 9.5rem; }

.abs-dock-date .dp { flex: 0 0 auto; }

.abs-dock-date .dp-field {
    justify-content: center;
    width: 48px;
    height: 48px;
    min-height: 0;
    padding: 0;
    color: var(--fg-muted);
}

.abs-dock-date .dp-field:hover,
.abs-dock-date .dp--open .dp-field {
    border-color: var(--accent);
    color: var(--accent);
}

/* Im Knopf steht nur noch das Kalenderblatt – Datum und Lösch-X gehören in
   ein Formularfeld, nicht in eine Symbolleiste. */
.abs-dock-date .dp-cal { width: 24px; height: 24px; color: inherit; }

.abs-dock-date .dp-text,
.abs-dock-date .dp-clear { display: none; }

/* Auch der Monatswähler zeigt nur das Blatt: Welcher Monat gilt, steht in
   der Kopfzeile der Seite – zweimal dasselbe wäre einmal zu viel. */

/* Ohne JavaScript steht neben dem Feld ein "Anzeigen"-Knopf; mit JavaScript
   blendet absatz.js ihn aus (die Wahl im Kalender schickt selbst ab). */
.abs-dock-date .btn[hidden] { display: none; }

/* --- Kennzahlen -----------------------------------------------------------
   Vier gleich breite Kacheln, die sich von selbst umbrechen – keine
   Karussell-Mechanik nötig, die Zahlen sind kurz. */
.abs-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: var(--gap);
}

/* Innerhalb einer Karte (Monatsstand) ohne eigenen Kartenrahmen. */
.abs-stats--flat { gap: 1rem 1.5rem; }

.abs-stats--flat .abs-stat {
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.abs-stat-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg-muted);
}

.abs-stat-value {
    font-size: 1.45rem;
    font-weight: 600;
    margin-top: 0.15rem;
    overflow-wrap: anywhere;
}

.abs-stat-note {
    font-size: 0.8rem;
    color: var(--fg-muted);
    margin-top: 0.15rem;
}

/* Weg zum Monatsziel. */
.abs-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--abs-track);
    overflow: hidden;
    margin-top: 0.5rem;
}

.abs-bar-fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--accent);
}

/* Ungefüllter Teil des Balkens – auf Dunkel ein eigener Ton (wie bei den
   Ringen im Quiz-Dashboard). */
:root { --abs-track: var(--vf-track); }

:root[data-theme="dark"] { --abs-track: var(--vf-track-dark); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --abs-track: var(--vf-track-dark); }
}

/* --- Erfassungstabelle ---------------------------------------------------- */
.abs-th-num,
.abs-td-num { text-align: right; }

/* Spezifisch genug, um das linksbündige .table th/td zu schlagen. */
.table th.abs-th-num,
.table td.abs-td-num { text-align: right; }

.abs-tariff { min-width: 14rem; }

.abs-tariff-name { display: block; font-weight: 600; }

.abs-tariff-note {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--fg-muted);
    white-space: normal;
}

/* Die Zahlenfelder bleiben schmal – mehr als drei Stellen kommen selten vor. */
.abs-qty {
    width: 5rem;
    text-align: right;
    margin-left: auto;
}

.abs-row--current { background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* --- Kontrollzentrum ------------------------------------------------------
   Die Tarifliste wird lang: je Zeile nur Name, Umsatz, ein Schalter und der
   Papierkorb. Auf breiten Bildschirmen stehen mehrere Zeilen nebeneinander,
   sonst wären es hundert Zeilen untereinander. */
.abs-tariffs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
    gap: 0.35rem 1.25rem;
}

.abs-trow {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Ein abgeschalteter Tarif ist noch da, taucht in der Erfassung aber nicht
   mehr auf – das zeigt die Zeile, ohne sie unlesbar zu machen. */
.abs-trow.is-off .abs-trow-name,
.abs-trow.is-off .abs-trow-rev { opacity: 0.5; }

.abs-trow-name { flex: 1 1 auto; min-width: 0; }

.abs-trow-rev {
    flex: 0 0 5.5rem;
    width: 5.5rem;
    text-align: right;
}

/* Kompakter als ein normales Feld – hier stehen viele Zeilen untereinander. */
.abs-trow .form-input--compact { min-height: 38px; padding: 0.3rem 0.55rem; }

.abs-trow .icon-action { flex: 0 0 auto; }

.abs-trow .check { flex: 0 0 auto; }

/* Die Zeile zum Anlegen steht abgesetzt unter der Liste. */
.abs-trow--new {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
}

/* Anzahl der Tarife hinter der Überschrift. */
.abs-count { font-size: 0.9rem; font-weight: 400; }

.form-foot--tight { margin-top: 0.9rem; }

/* --- Ziele ----------------------------------------------------------------
   Eine Beschriftung, ein Feld – mehr braucht es nicht. */
.abs-goals {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: 0.5rem 1.25rem;
    margin-bottom: 0.5rem;
}

.abs-goal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.abs-goal-label { font-size: 0.95rem; }

.abs-goal {
    flex: 0 0 6.5rem;
    width: 6.5rem;
    text-align: right;
}

/* Sprungliste zu den Shops mit eigenem Ziel. */
.abs-target-jump {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}