/* ==========================================================================
   Kerwago Design-System – Grundlagen
   --------------------------------------------------------------------------
   Native App-Optik (Systemschrift, gruppierte Listen, Sheets) in
   Kerwago-Grün. Übernommen aus der App-Demo (KERWAGO_App-Demo.html).

   Aufbau:
   1. Design-Tokens (Farben, Schrift, Radien) – hell
   2. Dark Mode – nur auf Seiten mit <html data-theme="auto|dark">
   3. Basis
   4. Komponenten (alle mit Präfix kw-, damit nichts mit bestehendem
      CSS kollidiert): Buttons, Abschnittslabel, gruppierte Listen, Chips,
      Schalter, Segment-Umschalter, Feldgruppen, Karten, Banner, Kacheln,
      Seitenkopf, Avatar, Bottom-Sheets, Toast

   Siehe DESIGN.md für Verwendung und Beispiele, /design für die Übersicht.
   ========================================================================== */

/* ---------- 1. Tokens (hell) ---------- */
:root {
    /* Flächen & Text */
    --bg: #f2f2f7;
    --surface: #ffffff;
    --surface-2: #f2f4f3;
    --fill: #e9ecea;
    --line: #d9ddda;
    --fg: #111814;
    --muted: #6b736f;
    --faint: #9aa29e;

    /* Marke */
    --brand: #00a82d;
    --brand-2: #14af3e;
    --brand-ink: #ffffff;
    --brand-soft: #dcf5e3;
    --navy: #1e3a5f;
    --navy-ink: #ffffff;

    /* Status */
    --ok: #0f7a37;
    --ok-soft: #dcf3e3;
    --warn: #9a5b00;
    --warn-soft: #fff0d4;
    --bad: #c62828;
    --bad-soft: #fde3e0;

    /* Akzente für Icon-Kacheln (keine fachliche Bedeutung) */
    --accent-blue: #1f6fd1;
    --accent-purple: #8a3fd1;
    --accent-orange: #d9620b;
    --accent-pink: #d1306f;
    --accent-teal: #0f8a8a;

    /* Overlays & Bon-Papier */
    --scrim: rgba(0, 0, 0, 0.32);
    --paper: #fdfcf8;
    --ink: #141414;
    --ink-2: #6a6a6a;

    /* Schrift */
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Formen */
    --r-s: 10px;
    --r-m: 14px;
    --r-l: 18px;
    --r-xl: 22px;
    --shadow-float: 0 12px 30px rgba(0, 0, 0, 0.28);
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- 2. Dark Mode ----------
   Bestehende Seiten haben noch fest eingetragene Farben und bleiben daher
   hell. Eine Seite schaltet den Dark Mode erst frei, wenn sie vollständig
   auf die Tokens umgestellt ist: data-theme="auto" folgt dem System,
   data-theme="dark" erzwingt dunkel. */
:root[data-theme="dark"] {
    --bg: #000000;
    --surface: #1c1c1e;
    --surface-2: #232625;
    --fill: #2c2f2e;
    --line: #38403c;
    --fg: #f2f5f3;
    --muted: #a0a8a4;
    --faint: #6f7773;
    --brand: #1fc552;
    --brand-2: #34d166;
    --brand-ink: #03140a;
    --brand-soft: #12351f;
    --navy: #9cbcf0;
    --navy-ink: #0b1626;
    --ok: #5fd68a;
    --ok-soft: #133020;
    --warn: #f3b64e;
    --warn-soft: #3a2a0c;
    --bad: #ff7b72;
    --bad-soft: #3c1613;
    --accent-blue: #3d7fe0;
    --accent-purple: #9a5ae0;
    --accent-orange: #e0742a;
    --accent-pink: #e0508a;
    --accent-teal: #1f9e9e;
    --scrim: rgba(0, 0, 0, 0.55);
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] {
        --bg: #000000;
        --surface: #1c1c1e;
        --surface-2: #232625;
        --fill: #2c2f2e;
        --line: #38403c;
        --fg: #f2f5f3;
        --muted: #a0a8a4;
        --faint: #6f7773;
        --brand: #1fc552;
        --brand-2: #34d166;
        --brand-ink: #03140a;
        --brand-soft: #12351f;
        --navy: #9cbcf0;
        --navy-ink: #0b1626;
        --ok: #5fd68a;
        --ok-soft: #133020;
        --warn: #f3b64e;
        --warn-soft: #3a2a0c;
        --bad: #ff7b72;
        --bad-soft: #3c1613;
        --accent-blue: #3d7fe0;
        --accent-purple: #9a5ae0;
        --accent-orange: #e0742a;
        --accent-pink: #e0508a;
        --accent-teal: #1f9e9e;
        --scrim: rgba(0, 0, 0, 0.55);
        color-scheme: dark;
    }
}

/* ---------- 3. Basis ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

body {
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

.kw-num {
    font-variant-numeric: tabular-nums;
}

/* ---------- 4.1 Buttons ---------- */
.kw-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--r-m);
    color: var(--fg);
    background: var(--fill);
    font: inherit;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.15;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.1s;
}

.kw-btn svg {
    width: 20px;
    height: 20px;
    flex: none;
}

.kw-btn--primary { color: var(--brand-ink); background: var(--brand); }
.kw-btn--navy { color: var(--navy-ink); background: var(--navy); }
.kw-btn--plain { color: var(--fg); background: var(--fill); }
.kw-btn--danger { color: var(--bad); background: var(--bad-soft); }
.kw-btn--soft { color: var(--ok); background: var(--brand-soft); }

/* kompakte Variante, z. B. in Kopfzeilen oder Tabellen */
.kw-btn--small {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 0.875rem;
}

/* nur so breit wie der Inhalt */
.kw-btn--inline {
    display: inline-flex;
    width: auto;
}

.kw-btn:disabled,
.kw-btn[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
}

.kw-btn:active:not(:disabled) {
    filter: brightness(0.92);
}

.kw-btn:focus-visible,
.kw-row:focus-visible,
.kw-switch:focus-visible,
.kw-seg button:focus-visible,
.kw-chip:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
}

/* runder Icon-Button für Kopfzeilen */
.kw-icon-btn {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--fg);
    background: var(--fill);
    cursor: pointer;
}

.kw-icon-btn svg {
    width: 20px;
    height: 20px;
}

.kw-btn-stack {
    display: grid;
    gap: 10px;
}

/* ---------- 4.2 Abschnittslabel ---------- */
.kw-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 18px 4px 8px;
    color: var(--muted);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.kw-label:first-child {
    margin-top: 6px;
}

/* ---------- 4.3 Gruppierte Listen ---------- */
.kw-list {
    overflow: hidden;
    margin: 0;
    padding: 0;
    border-radius: var(--r-m);
    background: var(--surface);
    list-style: none;
}

.kw-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 8px 14px;
    border: 0;
    color: var(--fg);
    background: none;
    font: inherit;
    text-align: left;
    text-decoration: none;
}

a.kw-row,
button.kw-row,
label.kw-row {
    cursor: pointer;
}

a.kw-row:active,
button.kw-row:active {
    background: var(--fill);
}

/* Trennlinie ab dem Text, wie bei iOS */
.kw-row + .kw-row::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 14px;
    border-top: 1px solid var(--line);
}

.kw-row__icon {
    display: grid;
    place-items: center;
    flex: none;
    min-width: 32px;
    height: 32px;
    border-radius: 9px;
    color: #ffffff;
    background: var(--ic, var(--muted));
    font-size: 0.8125rem;
    font-weight: 800;
    white-space: nowrap;
}

.kw-row__icon svg {
    width: 19px;
    height: 19px;
}

/* breite Pille, z. B. „Tisch 12“ */
.kw-row__icon--pill {
    padding: 0 9px;
}

.kw-row__text {
    flex: 1;
    min-width: 0;
}

.kw-row__text b,
.kw-row__text strong {
    display: block;
    font-weight: 600;
}

.kw-row__text small {
    display: block;
    color: var(--muted);
    font-size: 0.8125rem;
}

.kw-row__value {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.kw-row__chev {
    color: var(--faint);
    font-size: 1.375rem;
    line-height: 1;
}

.kw-row__chev::before {
    content: "›";
}

.kw-row--selected {
    background: var(--brand-soft);
}

.kw-row--danger .kw-row__text b,
.kw-row--danger .kw-row__text strong {
    color: var(--bad);
}

/* ---------- 4.4 Chips ---------- */
.kw-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border: 0;
    border-radius: 99px;
    color: var(--muted);
    background: var(--fill);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

button.kw-chip {
    min-height: 30px;
    cursor: pointer;
}

.kw-chip--ok { color: var(--ok); background: var(--ok-soft); }
.kw-chip--warn { color: var(--warn); background: var(--warn-soft); }
.kw-chip--bad { color: var(--bad); background: var(--bad-soft); }
.kw-chip--muted { color: var(--muted); background: var(--fill); }
.kw-chip--brand { color: var(--ok); background: var(--brand-soft); }

.kw-chiprow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* ---------- 4.5 Schalter ----------
   Zwei Varianten mit identischer Optik:
   <button class="kw-switch" role="switch" aria-checked="false">  (per JS)
   <input type="checkbox" class="kw-switch">                       (in Formularen) */
.kw-switch {
    position: relative;
    flex: none;
    width: 51px;
    height: 31px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 99px;
    background: var(--fill);
    cursor: pointer;
    transition: background 0.2s;
    -webkit-appearance: none;
    appearance: none;
}

/* überschreibt die allgemeine input-Regel aus vorlage.css */
input.kw-switch {
    width: 51px;
    min-height: 0;
    padding: 0;
    border: 0;
    background: var(--fill);
}

.kw-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}

.kw-switch[aria-checked="true"],
input.kw-switch:checked {
    background: var(--brand);
}

.kw-switch[aria-checked="true"]::after,
input.kw-switch:checked::after {
    transform: translateX(20px);
}

.kw-switch:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ---------- 4.6 Segment-Umschalter ---------- */
.kw-seg {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    gap: 2px;
    padding: 2px;
    border-radius: var(--r-s);
    background: var(--fill);
}

.kw-seg button {
    min-height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    color: var(--muted);
    background: none;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}

.kw-seg button[aria-pressed="true"] {
    color: var(--fg);
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* ---------- 4.7 Feldgruppen (Formular im Listenstil) ---------- */
.kw-field {
    overflow: hidden;
    border-radius: var(--r-m);
    background: var(--surface);
}

.kw-field label {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 14px;
}

.kw-field label + label {
    border-top: 1px solid var(--line);
}

.kw-field label > span {
    flex: none;
    width: 96px;
    color: var(--muted);
    font-size: 0.9375rem;
}

/* überschreibt die allgemeine input-Regel aus vorlage.css */
.kw-field input,
.kw-field select {
    flex: 1;
    min-width: 0;
    width: auto;
    min-height: 50px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--fg);
    background: none;
    font-size: 1.0625rem;
    outline: none;
}

.kw-field input:focus,
.kw-field select:focus {
    border: 0;
    outline: none;
}

.kw-field label:focus-within {
    box-shadow: inset 3px 0 0 var(--brand);
}

.kw-field input:disabled {
    color: var(--faint);
}

/* "Passwort anzeigen"-Auge (_passwort_toggle.html) innerhalb einer Feldzeile */
.kw-field .password-toggle {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    margin-right: -8px;
    padding: 0;
    border: 0;
    border-radius: var(--r-s);
    color: var(--muted);
    background: transparent;
    cursor: pointer;
}

.kw-field .password-toggle:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: -2px;
}

.kw-field .password-toggle svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.kw-field .eye-closed { display: none; }
.kw-field .password-toggle[aria-pressed="true"] .eye-open { display: none; }
.kw-field .password-toggle[aria-pressed="true"] .eye-closed { display: block; }

.kw-hint {
    margin: 6px 4px 0;
    color: var(--muted);
    font-size: 0.8125rem;
}

.kw-hint--error {
    color: var(--bad);
    font-weight: 600;
}

/* ---------- 4.8 Karten & Banner ---------- */
.kw-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border-radius: var(--r-l);
    background: var(--surface);
}

.kw-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--r-m);
    color: var(--warn);
    background: var(--warn-soft);
    font-size: 0.875rem;
    font-weight: 600;
}

.kw-banner svg {
    width: 20px;
    height: 20px;
    flex: none;
}

.kw-banner > span {
    flex: 1;
}

p.kw-banner {
    margin: 0;
}

.kw-flash {
    display: grid;
    gap: 8px;
    margin: 8px 0;
}

.kw-banner--ok { color: var(--ok); background: var(--ok-soft); }
.kw-banner--bad { color: var(--bad); background: var(--bad-soft); }
.kw-banner--info { color: var(--muted); background: var(--fill); }

/* ---------- 4.9 Seite & Seitenkopf ---------- */
.kw-page {
    width: min(760px, 100%);
    margin: 0 auto;
    padding: max(10px, env(safe-area-inset-top, 0px)) 16px max(40px, env(safe-area-inset-bottom, 0px));
}

.kw-hdr {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0 8px;
}

.kw-hdr__row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
}

.kw-hdr h1 {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.kw-hdr__sub {
    margin: 0;
    color: var(--muted);
    font-size: 0.875rem;
}

.kw-back {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    align-self: flex-start;
    height: 36px;
    margin-left: -6px;
    padding-right: 8px;
    color: var(--brand);
    font-size: 1.0625rem;
    font-weight: 500;
    text-decoration: none;
}

.kw-back svg {
    width: 24px;
    height: 24px;
}

.kw-footnote {
    margin: 20px 0 0;
    color: var(--faint);
    font-size: 0.8125rem;
    text-align: center;
}

/* Instanzkennzeichnung (nur wenn KERWAGO_HEADER_COLOR gesetzt ist) */
.kw-instanzleiste {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 50;
    height: 4px;
    background: linear-gradient(90deg, var(--kerwago-header-color), var(--kerwago-header-color-light));
}

/* ---------- 4.10 Kacheln ----------
   Große Einstiegs-Kacheln, z. B. für die wichtigsten Aktionen. */
.kw-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.kw-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-height: 116px;
    padding: 14px;
    border-radius: var(--r-l);
    color: var(--fg);
    background: var(--surface);
    box-shadow: 0 1px 0 var(--line);
    text-align: left;
    text-decoration: none;
    transition: transform 0.1s;
}

.kw-tile:active {
    transform: scale(0.97);
}

.kw-tile:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
}

.kw-tile__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
    border-radius: 11px;
    color: #ffffff;
    background: var(--ic, var(--brand));
}

.kw-tile__icon svg {
    width: 22px;
    height: 22px;
}

.kw-tile b,
.kw-tile strong {
    font-size: 1rem;
    line-height: 1.2;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.kw-tile small {
    color: var(--muted);
    font-size: 0.8125rem;
    line-height: 1.3;
}

/* hervorgehobene Kachel, z. B. die Hauptaktion */
.kw-tile--primary {
    color: var(--brand-ink);
    background: var(--brand);
    box-shadow: none;
}

.kw-tile--primary small {
    color: inherit;
    opacity: 0.85;
}

.kw-tile--primary .kw-tile__icon {
    color: var(--brand);
    background: var(--brand-ink);
}

@media (min-width: 700px) {
    .kw-tiles {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* ---------- 4.11 Tischkacheln ----------
   Raster aus Tischen (Bestellen, Umziehen, …): kw-tische > kw-tisch (a oder
   button) mit kw-tisch__nr, __wort, __name, __status; Zustände is-frei,
   is-belegt, aria-pressed="true" (gewählt). */
/* Kachelbreite je Schriftgröße (Einstellungen), für Tisch- und Artikelkacheln.
   Das Raster setzt so viele Kacheln nebeneinander, wie bei dieser
   Mindestbreite hineinpassen. Die Werte sind so gewählt, dass auf Handys
   (360–430 px) Klein 4, Mittel 3 und Groß 2 Kacheln ergeben; größere
   Bildschirme zeigen entsprechend mehr – mit etwas breiteren Kacheln. */
:root {
    --kw-kachel-min: 100px;
}

html.kw-schrift-klein {
    --kw-kachel-min: 75px;
}

html.kw-schrift-gross {
    --kw-kachel-min: 140px;
}

@media (min-width: 700px) {
    :root {
        --kw-kachel-min: 140px;
    }

    html.kw-schrift-klein {
        --kw-kachel-min: 110px;
    }

    html.kw-schrift-gross {
        --kw-kachel-min: 190px;
    }
}

.kw-tische {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--kw-kachel-min), 1fr));
    gap: 10px;
    margin-top: 10px;
}

.kw-tisch {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
    min-height: 96px;
    padding: 10px 11px;
    border-radius: var(--r-l);
    color: var(--fg);
    background: var(--surface);
    box-shadow: 0 1px 0 var(--line);
    text-decoration: none;
    transition: transform 0.1s;
    /* Bezugsgröße für die Tischnummer (cqi = Breite dieser Kachel) */
    container-type: inline-size;
}

.kw-tisch:active {
    transform: scale(0.96);
}

.kw-tisch:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
}

.kw-tisch__nr {
    overflow: hidden;
    /* durch die Bildschirmbreite begrenzt, damit auch bei großer Schrift
       zweistellige Tischnummern in die Kachel passen */
    /* wächst mit der Kachel, damit „Tisch 99“ immer hineinpasst */
    font-size: min(2rem, 30cqi);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kw-tisch__wort {
    font-size: 0.62em;
    font-weight: 700;
    letter-spacing: 0;
}

.kw-tisch__name {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kw-tisch__status {
    font-size: 0.8125rem;
    font-weight: 700;
}

.kw-tisch.is-frei .kw-tisch__status {
    color: var(--ok);
}

.kw-tisch.is-belegt {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--warn) 55%, transparent);
}

.kw-tisch.is-belegt .kw-tisch__status {
    color: var(--warn);
}

button.kw-tisch {
    width: 100%;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.kw-tisch[aria-pressed="true"] {
    box-shadow: inset 0 0 0 3px var(--brand);
}

html.kw-schrift-klein .kw-tisch {
    min-height: 84px;
    padding: 9px;
}

html.kw-schrift-klein .kw-tische {
    gap: 8px;
}

/* ---------- 4.11a Filter-Chips ----------
   Waagrecht scrollende Auswahl (z. B. Artikelart), beim Scrollen oben
   angeheftet: kw-filterleiste > button.kw-filter[aria-pressed] mit optionalem small (Anzahl). */
.kw-filterleiste {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    gap: 8px;
    margin: 0 -16px;
    padding: 8px 16px 10px;
    overflow-x: auto;
    background: var(--bg);
    scrollbar-width: none;
}

.kw-filterleiste::-webkit-scrollbar {
    display: none;
}

.kw-filter {
    display: flex;
    flex: none;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 15px;
    border: 0;
    border-radius: 99px;
    color: var(--fg);
    background: var(--surface);
    box-shadow: 0 1px 0 var(--line);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}

.kw-filter small {
    padding: 0 6px;
    border-radius: 99px;
    color: var(--muted);
    background: var(--fill);
    font-size: 0.6875rem;
    font-weight: 700;
}

.kw-filter[aria-pressed="true"] {
    color: var(--bg);
    background: var(--fg);
}

.kw-filter[aria-pressed="true"] small {
    color: inherit;
    background: color-mix(in srgb, var(--bg) 22%, transparent);
}

.kw-filter:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.kw-filter:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
}

/* ---------- 4.11c Zähl-Liste & Aktionsleiste ----------
   Positionen auswählen durch Antippen (+1) und langes Drücken (0), z. B. Umziehen
   und Üb. Barkasse: kw-row.kw-zaehl mit kw-zaehl__offen (noch offen) und
   kw-zaehl__wahl (ausgewählt); Zustände is-selected, is-complete, is-pressing.
   kw-aktionsleiste: schwebende Leiste über der Tab-Leiste mit __info und __go. */
.kw-zaehl {
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    transition: background 0.12s;
}

.kw-zaehl:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: -3px;
}

.kw-zaehl.is-pressing {
    background: var(--fill);
}

.kw-zaehl.is-selected {
    background: var(--brand-soft);
}

/* noch offen */
.kw-zaehl__offen {
    display: grid;
    place-items: center;
    flex: none;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 10px;
    color: var(--fg);
    background: var(--fill);
    font-weight: 800;
}

.kw-zaehl.is-complete .kw-zaehl__offen {
    color: var(--faint);
}

/* ausgewählt */
.kw-zaehl__wahl {
    display: grid;
    place-items: center;
    flex: none;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 99px;
    color: var(--faint);
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--line);
    font-weight: 800;
}

.kw-zaehl.is-selected .kw-zaehl__wahl {
    color: var(--brand-ink);
    background: var(--brand);
    box-shadow: none;
    animation: kw-pop 0.25s;
}

.kw-aktionsleiste {
    position: fixed;
    right: 12px;
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    z-index: 55;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 16px;
    border-radius: 20px;
    color: var(--navy-ink);
    background: var(--navy);
    box-shadow: var(--shadow-float);
    animation: kw-up 0.25s var(--ease-out);
}

.kw-aktionsleiste[hidden] {
    display: none;
}

.kw-aktionsleiste__info {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.kw-aktionsleiste__info b {
    font-size: 1.1875rem;
}

.kw-aktionsleiste__info > span {
    font-size: 0.8125rem;
    opacity: 0.8;
}

.kw-aktionsleiste__go {
    height: 48px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--r-m);
    color: var(--brand-ink);
    background: var(--brand);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.kw-aktionsleiste__go:focus-visible {
    outline: 3px solid var(--brand-ink);
    outline-offset: -5px;
}

@media (min-width: 700px) {
    .kw-aktionsleiste {
        bottom: 20px;
        left: 104px;
        max-width: 560px;
    }
}

/* ---------- 4.11b Avatar ---------- */
.kw-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--navy-ink);
    background: var(--navy);
    font-weight: 800;
    text-transform: uppercase;
}

/* ---------- 4.12 Tab-Leiste ----------
   Handy: unten fest, ab 700 px: schmale Leiste links. Die Seite bekommt
   automatisch passenden Innenabstand (body:has). */
.kw-tabbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(var(--kw-tabs, 4), minmax(0, 1fr));
    padding: 6px 6px max(10px, env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.8) blur(20px);
    backdrop-filter: saturate(1.8) blur(20px);
}

.kw-tabbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
    padding: 4px 0;
    border-radius: 12px;
    color: var(--faint);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}

.kw-tabbar__item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kw-tabbar__item svg {
    width: 26px;
    height: 26px;
}

.kw-tabbar__item[aria-current="page"] {
    color: var(--brand);
}

.kw-tabbar__item:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: -3px;
}

body:has(.kw-tabbar) {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 700px) {
    .kw-tabbar {
        top: 0;
        right: auto;
        width: 92px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 14px 8px;
        border-top: 0;
        border-right: 1px solid var(--line);
        background: var(--surface);
    }

    .kw-tabbar__item {
        padding: 10px 2px;
        border-radius: var(--r-m);
        font-size: 11px;
        line-height: 1.2;
        text-align: center;
    }

    .kw-tabbar__item span {
        overflow: visible;
        white-space: normal;
    }

    .kw-tabbar__item[aria-current="page"] {
        background: var(--brand-soft);
    }

    body:has(.kw-tabbar) {
        padding-bottom: 0;
        padding-left: 92px;
    }
}

/* ---------- Schriftgröße (Einstellungen) ----------
   Komponenten verwenden rem und wachsen daher mit. */
html.kw-schrift-klein {
    font-size: 75%;
}

html.kw-schrift-gross {
    font-size: 125%;
}

/* ---------- 4.13 Bottom-Sheets ----------
   Handy: von unten einfahrend; ab 700 px: zentrierter Dialog. */
.kw-layer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: var(--scrim);
    animation: kw-fade 0.2s;
}

.kw-sheet {
    width: 100%;
    max-height: 88vh;
    max-height: 88dvh;
    overflow-y: auto;
    padding: 8px 18px max(30px, env(safe-area-inset-bottom, 0px));
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    color: var(--fg);
    background: var(--bg);
    animation: kw-up 0.3s var(--ease-out);
    overscroll-behavior: contain;
}

.kw-sheet__grab {
    width: 38px;
    height: 5px;
    margin: 0 auto 12px;
    border-radius: 3px;
    background: var(--line);
}

.kw-sheet h2 {
    margin: 4px 0 6px;
    font-size: 1.375rem;
    letter-spacing: -0.01em;
}

.kw-sheet p {
    margin: 0 0 14px;
    color: var(--muted);
}

.kw-sheet__actions {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

/* Bei langem Inhalt bleiben die Aktionen unten sichtbar. */
.kw-sheet .kw-sheet__actions {
    position: sticky;
    bottom: calc(-1 * max(30px, env(safe-area-inset-bottom, 0px)));
    margin-bottom: calc(-1 * max(30px, env(safe-area-inset-bottom, 0px)));
    padding: 12px 0 max(30px, env(safe-area-inset-bottom, 0px));
    background: var(--bg);
}

body.kw-sheet-open {
    overflow: hidden;
}

@media (min-width: 700px) {
    .kw-layer {
        align-items: center;
    }

    .kw-sheet {
        max-width: 480px;
        padding: 22px 24px 24px;
        border-radius: var(--r-xl);
        animation: kw-zoom 0.25s var(--ease-out);
    }

    .kw-sheet__grab {
        display: none;
    }

    .kw-sheet .kw-sheet__actions {
        bottom: -24px;
        margin-bottom: -24px;
        padding-bottom: 24px;
    }
}

/* ---------- 4.14 Toast ---------- */
.kw-toast {
    position: fixed;
    top: max(14px, env(safe-area-inset-top, 0px));
    left: 50%;
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: calc(100% - 32px);
    padding: 11px 18px;
    border-radius: 20px;
    color: var(--bg);
    background: var(--fg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    transform: translate(-50%, 0);
    transition: transform 0.35s var(--ease-out);
}

.kw-toast:not(.is-on) {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -140%);
    transition: transform 0.35s, opacity 0.2s, visibility 0s 0.35s;
}

.kw-toast svg {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--brand);
}

.kw-toast--fehler svg { color: var(--bad); }
.kw-toast--warnung svg { color: var(--warn); }
.kw-toast--hinweis svg { color: var(--faint); }

.kw-toast.has-action {
    cursor: pointer;
}

@media (min-width: 700px) {
    .kw-toast {
        top: 20px;
    }
}

/* ---------- Animationen ---------- */
@keyframes kw-up { from { transform: translateY(100%); } }
@keyframes kw-fade { from { opacity: 0; } }
@keyframes kw-zoom { from { opacity: 0; transform: scale(0.92); } }
@keyframes kw-pop {
    0% { transform: scale(0.4); }
    70% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .kw-layer,
    .kw-sheet,
    .kw-toast,
    .kw-switch,
    .kw-switch::after {
        animation: none !important;
        transition: none !important;
    }
}