/* Kit des Ticketsystems: gemeinsame Bausteine für Shop, Verwaltung, Scanner und Serverseiten.
 *
 * HERKUNFT
 *   Vanilla-Port des Kits aus dem KI-Kompass (kfa-kompass/src/components/ui, Kit-Vertrag B1).
 *   · Knopf, Hinweis: übernommen aus fluid-functionalism, MIT License, Copyright (c) 2026 Micka Touillaud.
 *   · Auswahl, DatumFeld: Muster aus shadcn/ui (select, popover, calendar), MIT License, Copyright (c) 2023 shadcn.
 *   · Icons: exakte Knoten aus Lucide 1.23.0 (lucide-react), ISC License, Copyright (c) 2026 Lucide Icons and Contributors.
 *   · Feld, Segment, Dialog, StatusPille, Leerzustand, Skelett, Toast, Schrittleiste: hauseigen (KFA-Kit).
 *
 * ABWEICHUNGEN VON DER QUELLE
 *   · Kein React, kein Radix, kein Tailwind: Klassen + natives `popover`/`<dialog>`, Verhalten in kit.js.
 *   · Der Knopf heißt weiter `.btn` (`.btn-primary` = primär, `.btn-ghost` = umriss, `.btn-quiet` = still,
 *     `.btn-danger` = gefahr), damit alle Aufrufer und `data-act`-Hooks bleiben.
 *   · Farben kommen aus den Seiten-Tokens (shop.css / admin.css): `--k-*` ist nur eine Rollen-Schicht mit Fallbacks
 *     auf beide Namenswelten. KEIN Farbwert in dieser Datei.
 *
 * PFLICHTEN (Kit-Vertrag): eine Hauptaktion je Fläche · Bedeutung nie nur über Farbe (Icon + Wort) · eine Kurve ·
 * nie `transition: all` · reduzierte Bewegung beachtet · Trefferfläche ≥ 44 px · Hover nur mit Zeiger.
 */

/* ---------- Rollen ---------- */
:root{
  --k-grund:var(--bg);
  --k-flaeche:var(--surface);
  --k-flaeche-2:var(--surface-2);
  --k-feld:var(--input, var(--bg));
  --k-linie:var(--line);
  --k-text:var(--text-strong, var(--text));
  --k-text-2:var(--muted);
  --k-text-3:var(--faint);
  --k-akzent:var(--accent);
  --k-akzent-text:var(--accent-text, var(--accent));
  --k-primaer:var(--primary, var(--accent));
  --k-primaer-hover:var(--primary-hover, var(--accent-hover, var(--accent)));
  --k-auf-primaer:var(--on-primary, var(--on-accent));
  --k-gut:var(--ok);
  --k-gut-flaeche:var(--ok-bg, color-mix(in srgb, var(--ok) 12%, var(--surface)));
  --k-warnung:var(--warn, var(--k-akzent-text));
  --k-warnung-flaeche:var(--warn-bg, color-mix(in srgb, var(--accent) 12%, var(--surface)));
  --k-gefahr:var(--danger, var(--bad));
  --k-gefahr-flaeche:var(--bad-bg, color-mix(in srgb, var(--danger) 10%, var(--surface)));
  --k-info:var(--info, var(--text));
  --k-info-flaeche:var(--info-bg, var(--surface-2));
  --k-neutral-flaeche:var(--muted-bg, var(--surface-2));
  /* Kante eines Bedienelements: ≥ 3:1 gegen das Feld (WCAG 1.4.11), abgeleitet, keine neue Farbe */
  --k-kante:color-mix(in srgb, var(--text) 56%, var(--k-feld));
  --k-hover:color-mix(in srgb, var(--text) 6%, transparent);
  /* Gefahr voll: Schrift ist die Grundfläche (hell auf Rot im Tag, dunkel auf Lachs in der Nacht); Hover rückt das Rot
     zur Schrift hin (dunkler im Tag, heller in der Nacht); die Schrift bleibt in jedem Zustand dieselbe. */
  --k-auf-gefahr:var(--k-grund);
  --k-gefahr-hover:color-mix(in srgb, var(--k-gefahr) 82%, var(--k-text));
  /* Gesperrt: feste Farben statt Deckkraft, lesbar (≥ 4,5:1), aber erkennbar ruhend */
  --k-gesperrt-flaeche:var(--k-flaeche-2);
  --k-gesperrt-text:var(--k-text-2);
  --k-gesperrt-kante:var(--k-linie);

  /* Nicht-Farb-Rollen */
  --k-1:4px; --k-2:8px; --k-3:12px; --k-4:16px; --k-5:24px; --k-6:32px; --k-7:48px; --k-8:64px;
  --k-radius-steuerung:8px; --k-radius-flaeche:14px; --k-radius-pille:999px;
  --k-hoehe:44px;
  --k-kurve:cubic-bezier(.23,1,.32,1);
  --k-kurz:120ms; --k-mittel:200ms;
  --k-druck:.97;
  --k-fokusring:0 0 0 2px var(--k-grund), 0 0 0 4px var(--k-akzent-text);
  --k-schatten-1:0 1px 2px color-mix(in srgb, var(--k-text) 8%, transparent), 0 8px 24px -8px color-mix(in srgb, #000 30%, transparent);
  --k-schatten-2:0 24px 64px -12px color-mix(in srgb, #000 45%, transparent);
}

/* ---------- Grundlagen ---------- */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}
button,a,[role=radio],[role=option],label{touch-action:manipulation}
.k-skip{position:fixed;left:16px;top:-64px;z-index:3000;padding:12px 16px;border-radius:8px;background:var(--k-text);color:var(--k-grund);font-weight:600;text-decoration:none;transition:transform var(--k-kurz) var(--k-kurve)}
.k-skip:focus{transform:translateY(80px);outline:none;box-shadow:var(--k-fokusring)}
:focus-visible{outline:2px solid var(--k-akzent-text);outline-offset:2px}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.k-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
.k-icon{flex-shrink:0;vertical-align:-0.15em}

/* ---------- Knopf ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--k-2);min-height:var(--k-hoehe);padding:0 var(--k-4);
  border-radius:var(--k-radius-pille);border:1px solid var(--k-kante);background:transparent;color:var(--k-text);
  font:inherit;font-weight:500;font-size:15px;line-height:1.2;text-decoration:none;cursor:pointer;white-space:nowrap;user-select:none;
  transition:background-color var(--k-kurz) var(--k-kurve),border-color var(--k-kurz) var(--k-kurve),color var(--k-kurz) var(--k-kurve),transform var(--k-kurz) var(--k-kurve)}
.btn:active:not(:disabled):not([aria-disabled=true]){transform:scale(var(--k-druck))}
.btn:focus-visible{outline:none;box-shadow:var(--k-fokusring)}
/* Zustandsmatrix: je Variante Ruhe · Hover · Aktiv · Fokus · Gesperrt · Lädt. Jede Hover-Regel setzt Fläche UND Schrift,
   damit nie eine Schriftfarbe aus einer anderen Variante stehen bleibt (sonst etwa dunkle Schrift auf Hover-Rot). */
.btn-primary{background:var(--k-primaer);border-color:var(--k-primaer);color:var(--k-auf-primaer);font-weight:600}
.btn-ghost{background:transparent}
.btn-quiet{border-color:transparent;color:var(--k-text-2)}
.btn-danger{border-color:var(--k-gefahr);color:var(--k-gefahr)}
.btn.btn-danger.btn-primary{background:var(--k-gefahr);border-color:var(--k-gefahr);color:var(--k-auf-gefahr)}
.btn-sm{min-height:36px;padding:0 var(--k-3);font-size:14px}
.btn-lg{min-height:52px;padding:0 var(--k-5);font-size:16px}
.btn-block{width:100%}
/* Lange Beschriftungen brechen um statt über den Knopf hinauszuragen (Pflichtwortlaut im Checkout, schmale Panels) */
.btn{max-width:100%}
.btn-block,.btns .btn{white-space:normal;text-wrap:balance;text-align:center;line-height:1.3;padding-block:8px}
.btns .btn-sm{padding-block:4px}
.btn.btn:disabled,.btn.btn[aria-disabled=true]{background:var(--k-gesperrt-flaeche);border-color:var(--k-gesperrt-kante);border-style:dashed;color:var(--k-gesperrt-text);cursor:not-allowed;box-shadow:none}
.btn[aria-busy=true]{cursor:progress}
.btn[aria-busy=true]:disabled{border-style:solid}
/* Lädt: Hauptknöpfe behalten ihre Gestalt (der Kreisel sagt „lädt“, nicht „gesperrt“) */
.btn.btn-primary[aria-busy=true]:disabled{background:var(--k-primaer);border-color:var(--k-primaer);color:var(--k-auf-primaer)}
.btn.btn-danger.btn-primary[aria-busy=true]:disabled{background:var(--k-gefahr);border-color:var(--k-gefahr);color:var(--k-auf-gefahr)}
@media (hover:hover) and (pointer:fine){
  .btn:hover:not(:disabled){border-color:var(--k-text-2);background:var(--k-hover);color:var(--k-text)}
  .btn-primary:hover:not(:disabled){background:var(--k-primaer-hover);border-color:var(--k-primaer-hover);color:var(--k-auf-primaer)}
  .btn-quiet:hover:not(:disabled){border-color:transparent;background:var(--k-hover);color:var(--k-text)}
  .btn-danger:hover:not(:disabled){background:var(--k-gefahr-flaeche);border-color:var(--k-gefahr);color:var(--k-gefahr)}
  .btn.btn-danger.btn-primary:hover:not(:disabled){background:var(--k-gefahr-hover);border-color:var(--k-gefahr-hover);color:var(--k-auf-gefahr)}
}
/* Trefferfläche: klein aussehen darf er, klein treffbar nie */
.btn-sm::after,.k-icon-btn::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
.k-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:k-dreh .6s linear infinite}
@keyframes k-dreh{to{transform:rotate(360deg)}}

/* IconKnopf mit eigener Blase statt title= */
.k-icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--k-radius-steuerung);
  border:1px solid transparent;background:transparent;color:inherit;cursor:pointer;padding:0;transition:background-color var(--k-kurz) var(--k-kurve),transform var(--k-kurz) var(--k-kurve)}
.k-icon-btn:active{transform:scale(var(--k-druck))}
.k-icon-btn:focus-visible{outline:none;box-shadow:var(--k-fokusring)}
@media (hover:hover) and (pointer:fine){
  .k-icon-btn:hover{background:var(--k-hover)}
}
/* Tooltip-Blase (kit.js, eine für alle [data-tip]) */
.k-tip{position:fixed;inset:auto;margin:0;border:0;padding:5px 9px;border-radius:6px;background:var(--k-text);color:var(--k-grund);font-size:13px;font-weight:500;line-height:1.35;
  max-width:min(280px,calc(100vw - 16px));pointer-events:none;z-index:3000;opacity:0;transform:translateY(-2px);
  transition:opacity 125ms var(--k-kurve),transform 125ms var(--k-kurve),display 125ms allow-discrete,overlay 125ms allow-discrete;display:none}
.k-tip[data-seite=rechts]{transform:translateX(-2px)}
.k-tip:popover-open,.k-tip.k-offen{display:block;opacity:1;transform:none}
@starting-style{.k-tip:popover-open,.k-tip.k-offen{opacity:0;transform:translateY(-2px)}}
.k-tip[data-sofort]{transition-duration:0ms}

/* ---------- Feld ---------- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.field .k-label{font-size:14px;font-weight:500;color:var(--k-text-2)}
.field input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.field textarea{width:100%;min-height:var(--k-hoehe);padding:10px 14px;font:inherit;font-size:16px;
  color:var(--k-text);background:var(--k-feld);border:1px solid var(--k-kante);border-radius:var(--k-radius-steuerung);
  transition:border-color var(--k-kurz) var(--k-kurve),box-shadow var(--k-kurz) var(--k-kurve)}
.field textarea{min-height:96px;resize:vertical;line-height:1.5}
.field input:focus-visible,.field textarea:focus-visible{outline:none;border-color:var(--k-akzent-text);box-shadow:0 0 0 1px var(--k-akzent-text)}
.field input::placeholder,.field textarea::placeholder{color:var(--k-text-3);opacity:1}
/* gleiche Spezifität wie die Feldregel oben, sonst gewinnt deren Hintergrund */
.field input:not([type=checkbox]):not([type=radio]):not([type=hidden])[readonly]{background:var(--k-flaeche-2);color:var(--k-text-2)}
.field .hint{font-size:13px;color:var(--k-text-3);margin:0}
.field .msg{display:flex;gap:6px;align-items:flex-start;font-size:14px;color:var(--k-gefahr);font-weight:500}
.field .msg:empty{display:none}
.field .msg svg{margin-top:2px}
.field [aria-invalid=true],.field.err .k-ausloeser{border-color:var(--k-gefahr)!important}
.field [aria-invalid=true]:focus-visible{box-shadow:0 0 0 1px var(--k-gefahr)!important}

/* Kontrollkästchen: native Semantik, eigene Gestalt */
.check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;min-height:var(--k-hoehe);padding:var(--k-2) 0;font-size:15px;line-height:1.5}
.check input{appearance:none;-webkit-appearance:none;flex-shrink:0;width:22px;height:22px;margin:1px 0 0;border:1.5px solid var(--k-kante);border-radius:6px;background:var(--k-feld);
  display:grid;place-content:center;cursor:pointer;transition:background-color var(--k-kurz) var(--k-kurve),border-color var(--k-kurz) var(--k-kurve)}
.check input::after{content:"";width:12px;height:12px;background:var(--k-auf-primaer);opacity:0;transform:scale(.6);transition:opacity var(--k-kurz) var(--k-kurve),transform var(--k-kurz) var(--k-kurve);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.check input:checked{background:var(--k-primaer);border-color:var(--k-primaer)}
.check input:checked::after{opacity:1;transform:none}
.check input:focus-visible{outline:none;box-shadow:var(--k-fokusring)}
.check.err input{border-color:var(--k-gefahr)}
.check.err{color:var(--k-gefahr)}

/* Beschriftung mit Hinweis-Knopf */
.k-label-zeile{display:flex;align-items:center;gap:4px;color:var(--k-text-2);font-size:14px;font-weight:500}
.k-label-zeile .k-hinweis{color:var(--k-text-3)}
@media (hover:hover) and (pointer:fine){.k-hinweis:hover{color:var(--k-text)}}

/* ---------- Popover-Grundlage (Auswahl, Kalender, Farbe, Hinweis) ---------- */
.k-pop{position:fixed;inset:auto;margin:0;padding:var(--k-1);border:1px solid var(--k-linie);border-radius:12px;background:var(--k-flaeche);color:var(--k-text);
  box-shadow:var(--k-schatten-1);overflow:auto;overscroll-behavior:contain;max-height:min(360px,70vh);z-index:1000;
  transform-origin:top center;transition:opacity var(--k-mittel) var(--k-kurve),transform var(--k-mittel) var(--k-kurve),display var(--k-mittel) allow-discrete,overlay var(--k-mittel) allow-discrete}
.k-pop[data-seite=oben]{transform-origin:bottom center}
.k-pop{display:none;opacity:0;transform:scale(.97)}
.k-pop.k-offen{display:block;opacity:1;transform:none}
.k-pop:popover-open{display:block;opacity:1;transform:none}
@starting-style{.k-pop.k-offen{opacity:0;transform:scale(.97)}}
@starting-style{.k-pop:popover-open{opacity:0;transform:scale(.97)}}

/* ---------- Auswahl ---------- */
.k-auswahl{position:relative;min-width:0}
.k-ausloeser{display:flex;align-items:center;justify-content:space-between;gap:var(--k-2);width:100%;min-height:var(--k-hoehe);padding:0 12px 0 14px;font:inherit;font-size:16px;text-align:left;
  color:var(--k-text);background:var(--k-feld);border:1px solid var(--k-kante);border-radius:var(--k-radius-steuerung);cursor:pointer;
  transition:border-color var(--k-kurz) var(--k-kurve)}
.k-ausloeser .k-wert{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k-ausloeser .k-wert[data-leer]{color:var(--k-text-3)}
.k-ausloeser svg{color:var(--k-text-2);transition:transform var(--k-kurz) var(--k-kurve)}
.k-ausloeser[aria-expanded=true] svg.k-chev{transform:rotate(180deg)}
.k-ausloeser:focus-visible{outline:none;border-color:var(--k-akzent-text);box-shadow:0 0 0 1px var(--k-akzent-text)}
.k-ausloeser:disabled{background:var(--k-gesperrt-flaeche);border-color:var(--k-gesperrt-kante);border-style:dashed;color:var(--k-gesperrt-text);cursor:not-allowed}
.k-kompakt .k-ausloeser{min-height:36px;font-size:14px;padding:0 8px 0 10px}
.k-liste{list-style:none;min-width:180px}
.k-liste:focus{outline:none}
.k-liste li{display:flex;align-items:center;gap:var(--k-2);min-height:var(--k-hoehe);padding:0 12px 0 10px;border-radius:var(--k-radius-steuerung);cursor:pointer;font-size:15px;line-height:1.3}
.k-liste li .k-haken{width:16px;visibility:hidden;color:var(--k-akzent-text)}
.k-liste li[aria-selected=true] .k-haken{visibility:visible}
.k-liste li[data-aktiv]{background:var(--k-hover);outline:1px solid var(--k-kante);outline-offset:-1px}
.k-liste li[aria-disabled=true]{color:var(--k-gesperrt-text);cursor:not-allowed}
.k-opt{display:flex;flex-direction:column;gap:1px;padding:6px 0;min-width:0}
.k-opt small{font-size:13px;color:var(--k-text-2);line-height:1.35}
.k-liste:has(small){max-width:min(420px,calc(100vw - 16px))}
@media (hover:hover) and (pointer:fine){.k-liste li:hover{background:var(--k-hover)}}

/* ---------- DatumFeld ---------- */
.k-kalender{padding:var(--k-3);width:304px;max-height:none}
.k-kal-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--k-2);margin-bottom:var(--k-2)}
.k-kal-kopf strong{font-weight:600;font-size:15px}
.k-kal-raster{width:100%;border-collapse:collapse;table-layout:fixed}
.k-kal-raster th{font-size:12px;font-weight:500;color:var(--k-text-3);padding:4px 0;text-align:center;text-transform:none;letter-spacing:0;background:none;border:0}
.k-kal-raster td{padding:1px;text-align:center;border:0}
.k-tag{width:100%;aspect-ratio:1;max-height:40px;border:0;border-radius:var(--k-radius-steuerung);background:transparent;color:var(--k-text);font:inherit;font-size:14px;cursor:pointer;
  font-variant-numeric:tabular-nums;transition:background-color var(--k-kurz) var(--k-kurve)}
.k-tag[data-fremd]{color:var(--k-text-3)}
.k-tag[data-heute]{box-shadow:inset 0 0 0 1px var(--k-kante)}
.k-tag[aria-selected=true]{background:var(--k-primaer);color:var(--k-auf-primaer)}
.k-tag:focus-visible{outline:none;box-shadow:var(--k-fokusring)}
@media (hover:hover) and (pointer:fine){.k-tag:hover:not([aria-selected=true]){background:var(--k-hover)}}
.k-kal-fuss{display:flex;align-items:flex-end;gap:var(--k-2);margin-top:var(--k-3);padding-top:var(--k-3);border-top:1px solid var(--k-linie)}
.k-kal-fuss .field{flex:1}
.k-kal-fuss [data-kal=fertig]{margin-left:auto}
.k-kal-fuss .field input{min-height:40px;font-variant-numeric:tabular-nums}

/* ---------- Farbwahl ---------- */
.k-farbe{display:flex;gap:var(--k-2);align-items:stretch}
.k-farbe .k-muster-knopf{flex-shrink:0;width:var(--k-hoehe);min-height:var(--k-hoehe);border-radius:var(--k-radius-steuerung);border:1px solid var(--k-kante);background:var(--k-feld);padding:6px;cursor:pointer}
.k-farbe .k-muster-knopf span{display:block;width:100%;height:100%;border-radius:4px;background:var(--k-muster)}
.k-farbe .k-muster-knopf:focus-visible{outline:none;box-shadow:var(--k-fokusring)}
.k-muster{display:grid;grid-template-columns:repeat(3,auto);gap:var(--k-2);padding:var(--k-3)}
.k-muster button{display:flex;align-items:center;gap:var(--k-2);min-height:var(--k-hoehe);padding:0 10px 0 6px;border:1px solid transparent;border-radius:var(--k-radius-steuerung);background:transparent;color:var(--k-text);font:inherit;font-size:14px;cursor:pointer}
.k-muster button i{width:24px;height:24px;border-radius:50%;background:var(--k-muster);box-shadow:inset 0 0 0 1px color-mix(in srgb, #000 15%, transparent)}
.k-muster button[aria-pressed=true]{border-color:var(--k-kante)}
.k-muster button:focus-visible{outline:none;box-shadow:var(--k-fokusring)}
@media (hover:hover) and (pointer:fine){.k-muster button:hover{background:var(--k-hover)}}
.k-farb-probe{font-size:13px;color:var(--k-text-3);display:flex;gap:6px;align-items:center}

/* ---------- Segment (gleitender Daumen wie Tag | Nacht) ---------- */
.k-segment{position:relative;isolation:isolate;display:flex;flex-wrap:wrap;gap:var(--k-1);padding:var(--k-1);border:1px solid var(--k-kante);border-radius:calc(var(--k-radius-steuerung) + 4px);background:var(--k-feld);width:fit-content;max-width:100%}
.k-segment::before{content:"";position:absolute;z-index:-1;left:0;top:0;width:var(--daumen-b,0);height:var(--daumen-h,0);transform:translate(var(--daumen-x,0),var(--daumen-y,0));
  border-radius:var(--k-radius-steuerung);background:var(--k-text);box-shadow:0 1px 2px color-mix(in srgb, #000 20%, transparent);opacity:0}
.k-segment[data-daumen]::before{opacity:1;transition:transform 220ms var(--k-kurve),width 220ms var(--k-kurve),height 220ms var(--k-kurve)}
.k-segment button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 var(--k-3);border:0;border-radius:var(--k-radius-steuerung);background:transparent;color:var(--k-text-2);
  font:inherit;font-size:14px;font-weight:500;cursor:pointer;position:relative;transition:color 200ms var(--k-kurve),transform var(--k-kurz) var(--k-kurve)}
.k-segment button:active{transform:scale(var(--k-druck))}
.k-segment button::after{content:"";position:absolute;inset:-4px 0}
.k-segment button svg{display:none}
.k-segment button[aria-checked=true]{color:var(--k-grund)} /* Daumen in Tinte wie beim Tag/Nacht-Schalter: Auswahl auf einen Blick */
.k-segment:not([data-daumen]) button[aria-checked=true]{background:var(--k-text)}
.k-segment button:focus-visible{outline:none;box-shadow:var(--k-fokusring)}
.k-segment button:disabled{color:var(--k-gesperrt-text);cursor:not-allowed}
@media (hover:hover) and (pointer:fine){.k-segment button:hover:not([aria-checked=true]):not(:disabled){color:var(--k-text)}}
.k-segment.k-gross button{min-height:52px;padding:0 18px;font-size:16px;gap:var(--k-2)}
.k-segment.k-gross button svg{display:inline}

/* ---------- Thema-Umschalter Tag | Nacht (Segment-Pille mit gleitendem Daumen) ---------- */
.k-thema{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;align-items:stretch;padding:3px;min-height:44px;border:1px solid var(--k-kante);border-radius:var(--k-radius-pille);
  background:var(--k-feld);isolation:isolate;flex-shrink:0}
.k-thema::before{content:"";position:absolute;z-index:-1;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:var(--k-radius-pille);background:var(--k-text);
  box-shadow:0 1px 2px color-mix(in srgb, #000 20%, transparent);transition:transform 200ms var(--k-kurve)}
.k-thema[data-wert=nacht]::before{transform:translateX(100%)}
.k-thema button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 14px;border:0;border-radius:var(--k-radius-pille);
  background:none;color:var(--k-text-2);font:inherit;font-size:14px;font-weight:500;line-height:1;cursor:pointer;transition:color 200ms var(--k-kurve)}
.k-thema button::after{content:"";position:absolute;inset:-4px 0}
.k-thema button[aria-checked=true]{color:var(--k-grund)}
.k-thema button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--k-grund),0 0 0 4px var(--k-akzent-text)}
@media (hover:hover) and (pointer:fine){.k-thema button[aria-checked=false]:hover{color:var(--k-text)}}
@media (max-width:420px){.k-thema button{padding:0 10px;font-size:13px;gap:4px}}

/* ---------- Dialog / Blatt ---------- */
dialog.k-dialog{border:1px solid var(--k-linie);border-radius:var(--k-radius-flaeche);padding:0;width:calc(100% - 32px);max-width:640px;max-height:calc(100dvh - 48px);
  background:var(--k-flaeche);color:var(--k-text);box-shadow:var(--k-schatten-2);overflow:hidden;display:flex;flex-direction:column;
  opacity:1;transform:none;transition:opacity var(--k-mittel) var(--k-kurve),transform var(--k-mittel) var(--k-kurve),display var(--k-mittel) allow-discrete,overlay var(--k-mittel) allow-discrete}
dialog.k-dialog:not([open]){display:none;opacity:0;transform:scale(.97)}
@starting-style{dialog.k-dialog[open]{opacity:0;transform:scale(.97)}}
dialog.k-dialog::backdrop{background:color-mix(in srgb, #000 55%, transparent);transition:opacity var(--k-mittel) var(--k-kurve)}
@starting-style{dialog.k-dialog[open]::backdrop{opacity:0}}
dialog.k-dialog.k-klein{max-width:460px}
.k-dlg-kopf{display:flex;justify-content:space-between;align-items:center;gap:var(--k-3);padding:var(--k-4) var(--k-4) var(--k-4) var(--k-5);border-bottom:1px solid var(--k-linie)}
.k-dlg-kopf h2{font-size:24px;margin:0}
.k-dlg-inhalt{padding:var(--k-5);display:flex;flex-direction:column;gap:var(--k-5);overflow:auto;overscroll-behavior:contain}
.k-dlg-fuss{padding:var(--k-4) var(--k-5);border-top:1px solid var(--k-linie);display:flex;justify-content:flex-end;align-items:center;gap:var(--k-2);flex-wrap:wrap;background:var(--k-flaeche-2)}
.k-folge{margin:0;font-size:15px;color:var(--k-text)}
.k-felder{display:flex;flex-direction:column;gap:var(--k-4)}
.k-wahl{display:flex;flex-direction:column;gap:var(--k-2);margin:0;padding:0;border:0}
.k-wahl label{display:grid;grid-template-columns:22px 1fr;gap:4px 12px;padding:var(--k-3) var(--k-4);border:1px solid var(--k-linie);border-radius:var(--k-radius-steuerung);cursor:pointer;
  transition:border-color var(--k-kurz) var(--k-kurve),background-color var(--k-kurz) var(--k-kurve)}
.k-wahl label:has(input:checked){border-color:var(--k-kante);background:var(--k-flaeche-2)}
.k-wahl label:has(input:disabled){border-style:dashed;background:var(--k-gesperrt-flaeche);cursor:not-allowed}
.k-wahl label:has(input:disabled) strong,.k-wahl label:has(input:disabled) small{color:var(--k-gesperrt-text)}
.k-wahl input{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin:2px 0 0;border:1.5px solid var(--k-kante);border-radius:50%;display:grid;place-content:center;background:var(--k-feld)}
.k-wahl input::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--k-text);transform:scale(0.6);opacity:0;transition:opacity var(--k-kurz) var(--k-kurve),transform var(--k-kurz) var(--k-kurve)}
.k-wahl input:checked::after{opacity:1;transform:none}
.k-wahl input:focus-visible{outline:none;box-shadow:var(--k-fokusring)}
.k-wahl strong{font-weight:600}
.k-wahl small{grid-column:2;font-size:14px;color:var(--k-text-2)}
@media (max-width:560px){
  dialog.k-dialog{width:100%;max-width:none;margin:auto 0 0;border-radius:var(--k-radius-flaeche) var(--k-radius-flaeche) 0 0;max-height:92dvh}
  .k-dlg-inhalt{padding:var(--k-4)}
}

/* ---------- StatusPille ---------- */
.k-pille{display:inline-flex;align-items:center;gap:5px;padding:2px 10px 2px 7px;border-radius:var(--k-radius-pille);font-size:13px;font-weight:500;line-height:1.5;white-space:nowrap;
  background:var(--k-neutral-flaeche);color:var(--k-text-2)}
.k-pille[data-ton=gut]{background:var(--k-gut-flaeche);color:var(--k-gut)}
.k-pille[data-ton=warnung]{background:var(--k-warnung-flaeche);color:var(--k-warnung)}
.k-pille[data-ton=gefahr]{background:var(--k-gefahr-flaeche);color:var(--k-gefahr)}
.k-pille[data-ton=info]{background:var(--k-info-flaeche);color:var(--k-info)}

/* ---------- Meldung (am Ort, dauerhaft) ---------- */
.k-meldung,.alert{display:flex;gap:10px;align-items:flex-start;padding:var(--k-3) var(--k-4);border-radius:var(--k-radius-steuerung);font-size:15px;line-height:1.5;
  background:var(--k-info-flaeche);color:var(--k-text);border:1px solid var(--k-linie)}
.k-meldung>svg,.alert>svg{margin-top:3px}
/* Meldung nach einer Aktion unter Formular, Liste oder Tabelle: eigener Abstand im Blockfluss. Flex- und Grid-Behälter
   setzen ihn über gap; dort folgt die Meldung auf Felder oder Absätze, nie direkt auf diese Elemente. */
:where(form,ol,ul,table)+:where(.k-meldung,.alert){margin-top:var(--k-4)}
.k-meldung[data-ton=gefahr]{background:var(--k-gefahr-flaeche);border-color:color-mix(in srgb, var(--k-gefahr) 35%, transparent);color:var(--k-gefahr)}
.k-meldung[data-ton=gut]{background:var(--k-gut-flaeche);border-color:color-mix(in srgb, var(--k-gut) 30%, transparent);color:var(--k-gut)}
.k-meldung[data-ton=warnung]{background:var(--k-warnung-flaeche);border-color:color-mix(in srgb, var(--k-warnung) 30%, transparent);color:var(--k-warnung)}
.k-meldung[data-ton=info]{background:var(--k-flaeche-2);border-color:var(--k-linie);color:var(--k-text)}
.k-meldung a,.alert a{color:inherit;font-weight:600}

/* ---------- Leerzustand ---------- */
.k-leer{display:flex;flex-direction:column;align-items:center;gap:var(--k-3);padding:var(--k-7) var(--k-5);text-align:center;color:var(--k-text-2)}
.k-leer strong{font-size:16px;font-weight:600;color:var(--k-text)}
.k-leer p{margin:0;max-width:36em;font-size:15px}

/* ---------- Skelett ---------- */
.k-skelett{display:block;border-radius:6px;background:linear-gradient(90deg,var(--k-flaeche-2) 0%,color-mix(in srgb, var(--k-text) 7%, var(--k-flaeche-2)) 50%,var(--k-flaeche-2) 100%);
  background-size:300% 100%;animation:k-schimmer 1.6s ease-in-out infinite;color:transparent!important;user-select:none}
@keyframes k-schimmer{from{background-position:100% 0}to{background-position:0 0}}

/* ---------- Toast ---------- */
.k-toasts{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:2000;display:flex;flex-direction:column;gap:var(--k-2);width:min(440px,calc(100% - 32px));pointer-events:none}
.k-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;padding:12px 8px 12px 14px;border-radius:12px;background:var(--k-text);color:var(--k-grund);font-size:15px;line-height:1.45;
  box-shadow:var(--k-schatten-1);opacity:1;transform:none;transition:opacity var(--k-mittel) var(--k-kurve),transform var(--k-mittel) var(--k-kurve)}
@starting-style{.k-toast{opacity:0;transform:translateY(8px)}}
.k-toast[data-geht]{opacity:0;transform:translateY(4px);transition-duration:var(--k-kurz)}
.k-toast>svg{margin-top:2px}
.k-toast[data-ton=fehler]{background:var(--k-gefahr);color:var(--k-grund)}
.k-toast span{flex:1}
.k-toast .k-icon-btn{width:28px;height:28px;margin:-4px 0 -4px 0;color:inherit}

/* ---------- Schrittleiste ---------- */
.k-schritte{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:var(--k-2);list-style:none;margin:0;padding:0;counter-reset:s}
.k-schritte li{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--k-text-3);min-width:0}
.k-schritte li::before{content:"";height:3px;border-radius:2px;background:var(--k-linie);transition:background-color var(--k-mittel) var(--k-kurve)}
.k-schritte li span{display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-schritte li[data-zustand=erledigt]{color:var(--k-text-2)}
.k-schritte li[data-zustand=erledigt]::before{background:var(--k-akzent)}
.k-schritte li[aria-current=step]{color:var(--k-text)}
.k-schritte li[aria-current=step] span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--k-akzent-text);flex-shrink:0}
.k-schritte li[aria-current=step]::before{background:var(--k-akzent)}
.k-schritte li svg{display:none;color:var(--k-akzent-text)}
.k-schritte li[data-zustand=erledigt] svg{display:inline}
@media (max-width:420px){.k-schritte li:not([aria-current=step]) span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}

/* ---------- Hinweis (Info-Knopf mit Blase) ---------- */
.k-hinweis{position:relative;display:inline-flex;align-items:center;gap:4px;border:0;background:none;padding:0 2px;color:inherit;font:inherit;cursor:pointer;vertical-align:middle;min-height:24px}
.k-hinweis::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.k-hinweis:focus-visible{outline:none;box-shadow:var(--k-fokusring);border-radius:6px}
.k-blase{max-width:min(320px,calc(100vw - 32px));padding:var(--k-3) var(--k-4);font-size:14px;line-height:1.5;white-space:normal;text-align:left}
.k-blase strong{display:block;margin-bottom:4px}
.k-blase p{margin:0;color:var(--k-text-2);word-break:break-word}

/* ---------- Datei-Knopf ---------- */
.k-ablage{transition:box-shadow var(--k-kurz) var(--k-kurve)}
.k-ablage[data-ueber]{box-shadow:0 0 0 2px var(--k-akzent-text)}

/* ---------- Ein-/Ausklappen (kit.js aufklappen/zuklappen) ---------- */
.k-klapp{display:grid;grid-template-rows:1fr;opacity:1;margin-top:0;
  transition:grid-template-rows 240ms var(--k-kurve),opacity 200ms var(--k-kurve),margin-top 240ms var(--k-kurve)}
.k-klapp[data-zu]{grid-template-rows:0fr;opacity:0;margin-top:var(--k-klapp-gap,0px)}
.k-klapp-innen{min-height:0;overflow:hidden}
@media (prefers-reduced-motion:reduce){.k-klapp{transition:opacity 160ms linear}.k-klapp[data-zu]{grid-template-rows:0fr}}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-property:opacity,background-color,border-color,color,box-shadow!important;animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .k-spinner{animation:k-dreh 1.2s linear infinite!important;animation-iteration-count:infinite!important;animation-duration:1.2s!important}
  .k-skelett{animation:none!important}
}
/* View Transitions: reduziert nur Überblenden (die Bewegungen definiert admin.css nur für no-preference) */
@media (prefers-reduced-motion:reduce){::view-transition-group(*){animation:none!important}::view-transition-old(*),::view-transition-new(*){animation-duration:120ms!important}}
@media (prefers-reduced-transparency:reduce){dialog.k-dialog::backdrop{background:var(--k-grund)}}