/* =========================================================================
   KLAMBT Design CI — Basis- & Komponenten-Styles
   Benoetigt tokens/tokens.css. Wird von den statischen HTML-Beispielen UND
   von den Angular-Beispielen unveraendert eingebunden -> garantiert identische
   Optik in beiden Welten. Keine Ad-hoc-Werte: ausschliesslich var(--k-*).
   ========================================================================= */

/* ---------------------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--k-font-sans);
  font-size: var(--k-fs-16);
  line-height: var(--k-lh-normal);
  color: var(--k-text);
  background: var(--k-surface);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--k-focus-ring); }

a { color: var(--k-blue); text-decoration: none; }
a:hover { color: var(--k-blue-hover); text-decoration: underline; }

/* ------------------------------------------------------------- Layout */
.k-page {
  width: 100%;
  max-width: var(--k-container-max);
  margin-inline: auto;
  padding-inline: var(--k-gutter);
}
.k-main { flex: 1 1 auto; padding-block: var(--k-space-8) var(--k-space-10); }
.k-main--centered { display: flex; flex-direction: column; align-items: center; }
.k-stack   { display: flex; flex-direction: column; gap: var(--k-space-6); }
.k-stack-4 { display: flex; flex-direction: column; gap: var(--k-space-4); }
.k-row     { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-space-3); }
.k-spread  { display: flex; flex-wrap: wrap; align-items: flex-end;
             justify-content: space-between; gap: var(--k-space-4); }

@media (min-width: 1024px) {
  .k-page { padding-inline: var(--k-gutter-lg); }
}

/* --------------------------------------------------------- Typografie */
.k-eyebrow {
  margin: 0 0 var(--k-space-2);
  font-size: var(--k-fs-12);
  font-weight: var(--k-fw-bold);
  letter-spacing: var(--k-ls-eyebrow);
  text-transform: uppercase;
  color: var(--k-blue);
}
.k-h1 {
  margin: 0;
  font-size: var(--k-fs-30);
  font-weight: var(--k-fw-extrabold);
  line-height: var(--k-lh-tight);
  letter-spacing: var(--k-ls-tight);
  color: var(--k-text-strong);
  text-wrap: pretty;
}
.k-h2 {
  margin: 0;
  font-size: var(--k-fs-20);
  font-weight: var(--k-fw-bold);
  line-height: var(--k-lh-snug);
  color: var(--k-text-strong);
}
.k-h3 {
  margin: 0;
  font-size: var(--k-fs-16);
  font-weight: var(--k-fw-bold);
  color: var(--k-text-strong);
}
.k-subline {
  margin: var(--k-space-3) 0 0;
  font-size: var(--k-fs-15);
  font-weight: var(--k-fw-regular);
  color: var(--k-text-muted);
  text-wrap: pretty;
}
.k-text  { margin: 0; font-size: var(--k-fs-15); color: var(--k-text-muted); line-height: var(--k-lh-relaxed); }
.k-meta  { font-size: var(--k-fs-14); color: var(--k-text-muted); }
.k-caps  { font-size: var(--k-fs-12); font-weight: var(--k-fw-semibold);
           letter-spacing: var(--k-ls-caps); text-transform: uppercase;
           color: var(--k-text-muted); }
.k-dimmed { color: var(--k-text-subtle); }
.k-link { color: var(--k-blue); text-decoration: none; }
.k-link:hover { color: var(--k-blue-hover); text-decoration: underline; }
.k-link--underlined { text-decoration: underline; font-weight: var(--k-fw-semibold); }

/* .k-h1/.k-subline sind seit der Metrik-Angleichung (24.08.2026) auf allen
   Breakpoints fest 30px/15px (wie Paket Service) — keine Desktop-Vergrößerung
   mehr. */

/* --------------------------------------------------------- Page-Header */
.k-pagehead { margin-bottom: var(--k-space-7); }

/* -------------------------------------------------------- App-Header */
.k-header {
  background: var(--k-surface);
  border-bottom: var(--k-border-width) solid var(--k-border);
}
.k-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-space-4);
  min-height: var(--k-header-h);
}
.k-brand { display: flex; align-items: center; gap: var(--k-space-3);
           text-decoration: none; flex: 0 0 auto; }
.k-brand:hover { text-decoration: none; }
.k-brand__logo   { height: 26px; width: auto; }
.k-brand__signet { height: 30px; width: 30px; }
.k-brand__appicon { height: 30px; width: 30px; border-radius: var(--k-radius-sm); }
.k-brand__divider {
  width: 1px; align-self: center; height: 22px;
  background: var(--k-border-strong);
}
.k-brand__app {
  display: flex; flex-direction: column;
  font-size: var(--k-fs-brand);
  font-weight: var(--k-fw-semibold);
  letter-spacing: var(--k-ls-brand);
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--k-text-brand);
}
.k-header__end {
  display: flex; align-items: center; gap: var(--k-space-3);
  flex-wrap: wrap; justify-content: flex-end;
  margin-left: auto;
}
.k-nav { display: flex; align-items: center; gap: var(--k-space-3); flex-wrap: wrap; }

/* ------------------------------------------------ User-Menü (Avatar) */
.k-usermenu { position: relative; flex: 0 0 auto; }
.k-avatarbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--k-control-h); height: var(--k-control-h); padding: 0;
  border: var(--k-border-width) solid var(--k-border);
  border-radius: var(--k-radius-pill);
  background: var(--k-blue-050); color: var(--k-text-strong);
  font-family: inherit; font-size: var(--k-fs-14);
  font-weight: var(--k-fw-bold); letter-spacing: var(--k-ls-caps);
  text-transform: uppercase;
  cursor: pointer; overflow: hidden;
}
.k-avatarbtn:hover { border-color: var(--k-border-strong); }
.k-avatarbtn img { width: 100%; height: 100%; object-fit: cover; }
.k-usermenu__panel {
  position: absolute; top: calc(100% + var(--k-space-2)); right: 0; z-index: 30;
  min-width: 260px; padding: var(--k-space-3);
  background: var(--k-surface);
  border: var(--k-border-width) solid var(--k-border);
  border-radius: var(--k-radius-lg);
  box-shadow: var(--k-shadow-dropdown);
  display: flex; flex-direction: column;
}
.k-usermenu__panel[hidden] { display: none; }
.k-usermenu__head {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--k-space-3);
  padding: var(--k-space-3) var(--k-space-4);
}
.k-usermenu__name { margin: 0; font-size: var(--k-fs-16);
                    font-weight: var(--k-fw-bold); color: var(--k-text-strong); }
.k-usermenu__divider { height: 1px; margin: var(--k-space-2) 0;
                       background: var(--k-border); }
.k-usermenu__item {
  padding: var(--k-space-3) var(--k-space-4);
  border-radius: var(--k-radius-md);
  font-size: var(--k-fs-15); font-weight: var(--k-fw-semibold);
  color: var(--k-text-strong); text-decoration: none;
}
.k-usermenu__item:hover { background: var(--k-blue-050); color: var(--k-blue);
                          text-decoration: none; }
/* Übersicht-Button im Header (nur Beispielseiten). */
.k-overviewbtn { flex: 0 0 auto; }
.k-brand + .k-overviewbtn { margin-left: auto; }
/* Theme-Umschalt-Button im Header: Icon folgt dem aktiven Modus. */
.k-thememode { flex: 0 0 auto; }
.k-brand + .k-thememode { margin-left: auto; }
.k-thememode-icon { display: none; }
:root:not([data-theme]) .k-thememode-icon--system { display: block; }
:root[data-theme="light"] .k-thememode-icon--light { display: block; }
:root[data-theme="dark"] .k-thememode-icon--dark { display: block; }
@media (max-width: 1023px) {
  .k-thememode { margin-left: auto; }
  .k-header__inner > .k-overviewbtn { margin-left: auto; }
  .k-header__inner > .k-overviewbtn ~ .k-thememode { margin-left: 0; }
  /* Avatar/Burger bilden immer eine feste rechte Gruppe (Fix-Runde 4,
     Task 12 Punkt 1): sobald ein Usermenü vorhanden ist, uebernimmt es die
     "margin-left:auto"-Fuehrung der rechten Gruppe von Übersicht-Button/
     Theme-Umschalter — sonst spreizt @media(max-width:1023px) den Avatar bei
     Zeilenumbruch (2. Zeile) per space-between mittig zwischen
     Theme-Umschalter und Burger auseinander (Ist-Fehler, per Playwright/
     DevTools nachgemessen: 375px-Breite, admin-table.html). */
  .k-header__inner:has(> .k-usermenu) > .k-overviewbtn,
  .k-header__inner:has(> .k-usermenu) > .k-thememode {
    margin-left: 0;
  }
  .k-header__inner > .k-usermenu { margin-left: auto; }
}

/* Burger: nur < Desktop sichtbar */
.k-burger {
  display: none;
  width: var(--k-control-h); height: var(--k-control-h);
  align-items: center; justify-content: center;
  background: var(--k-surface);
  border: var(--k-border-width) solid var(--k-border);
  border-radius: var(--k-radius-md);
  color: var(--k-text-strong);
  cursor: pointer;
}
.k-burger:hover { border-color: var(--k-border-strong); }

@media (max-width: 1023px) {
  .k-burger {
    display: inline-flex;
    /* Task 12 Punkt 1: kleiner, fester Abstand zum Avatar statt des
       generischen --k-space-4-Zeilenabstands (Entscheidung Andrej:
       Avatar+Burger als eng gruppiertes Paar). */
    margin-left: calc(var(--k-space-3) - var(--k-space-4));
  }
  .k-header__end {
    display: none;
    order: 3; width: 100%;
    flex-direction: column; align-items: stretch;
    gap: var(--k-space-3);
    padding-bottom: var(--k-space-4);
  }
  .k-header__end.is-open { display: flex; }
  .k-header__inner { flex-wrap: wrap; }
  /* Task 12 Punkt 4: erste Zeile (Brand/Avatar/Burger) bekommt einen
     festen oberen Abstand statt der Höhe/Zentrierung, die
     "min-height + align-items:center" bisher aus der freien Höhe des
     *gesamten* (ein- oder zweizeiligen) Containers ableiteten — mit
     align-content:normal("stretch", wenn Inhalt < --k-header-h) zentrierte
     sich die erste Zeile NUR, solange sie allein in den 64px passte;
     wuchs der Container beim Aufklappen über min-height hinaus (2./3. Zeile
     durch Nav bzw. bereits durch Overview-/Theme-Icons), packte
     align-content stattdessen von oben — Logo/Avatar/Burger ruckten nach
     oben (per Playwright nachgemessen: 768px, 19px -> 9px). Nur Header MIT
     Burger (also solche, die überhaupt auf-/zuklappen) bekommen die feste
     Zeilenhöhe via :has(); Login-/Übersichtsseiten ohne Burger bleiben
     unveraendert. Fixe padding-top + align-content:flex-start halten die
     erste Zeile jetzt unabhaengig vom Auf-/Zuklappen exakt an derselben
     y-Position (siehe task-12-report.md). */
  .k-header__inner:has(> .k-burger) {
    align-content: flex-start;
    padding-top: calc((var(--k-header-h) - var(--k-control-h)) / 2);
  }
  .k-nav { flex-direction: column; align-items: stretch; gap: 0; }
  /* Task 12 Punkt 2 (Entscheidung Andrej): aufgeklappte Burger-Navigation
     wird zur linksbuendigen Menue-Liste statt volle-Breite-Outline-Buttons
     — Optik wie .k-usermenu__item (siehe DESIGN.md §7.1/§7.35). Markup
     bleibt unveraendert (.k-nav .k-btn k-btn--secondary auf allen 10
     Seiten mit Navigation); die MQ neutralisiert vollstaendig die Button-Optik
     (Rahmen/Flaeche/Ausrichtung) statt sie zu ergaenzen. */
  .k-nav .k-btn {
    width: 100%;
    justify-content: flex-start;
    padding: var(--k-space-3) var(--k-space-4);
    border-color: transparent;
    border-radius: var(--k-radius-md);
    background: none;
    font-weight: var(--k-fw-semibold);
    color: var(--k-text-strong);
  }
  .k-nav .k-btn:hover,
  .k-nav .k-btn:focus-visible {
    background: var(--k-blue-050);
    border-color: transparent;
    color: var(--k-blue);
  }
  .k-nav .k-btn.is-active,
  .k-nav .k-btn[aria-current] {
    background: var(--k-blue-050);
    border-color: transparent;
    color: var(--k-blue);
  }
}

/* ------------------------------------------------ Kategorie-Navigation */
.k-catnav {
  background: var(--k-surface);
  border-bottom: var(--k-border-width) solid var(--k-border);
}
.k-catnav__list {
  display: flex; align-items: stretch; gap: var(--k-space-6);
  margin: 0; padding-block: 0; list-style: none;
  overflow-x: auto; scrollbar-width: none;
}
.k-catnav__list::-webkit-scrollbar { display: none; }
.k-catnav__item { position: relative; flex: 0 0 auto; }
.k-catnav__link {
  display: inline-flex; align-items: center; gap: var(--k-space-2);
  padding: var(--k-space-4) 0;
  border: 0; border-bottom: 2px solid transparent;
  background: none;
  font-size: var(--k-fs-16); font-weight: var(--k-fw-semibold);
  color: var(--k-text-strong); white-space: nowrap; cursor: pointer;
  text-decoration: none;
}
.k-catnav__link:hover { color: var(--k-blue); text-decoration: none; }
.k-catnav__link.is-active { color: var(--k-blue); border-bottom-color: var(--k-blue); }
.k-catnav__chevron { width: 14px; height: 14px; }
.k-dropdown {
  position: absolute; top: 100%; left: 0; z-index: 20;
  min-width: 260px; padding: var(--k-space-3);
  background: var(--k-surface);
  border: var(--k-border-width) solid var(--k-border);
  border-top: 2px solid var(--k-blue);
  border-radius: 0 0 var(--k-radius-lg) var(--k-radius-lg);
  box-shadow: var(--k-shadow-dropdown);
  display: flex; flex-direction: column;
}
.k-dropdown__item {
  padding: var(--k-space-3) var(--k-space-4);
  border-radius: var(--k-radius-sm);
  font-size: var(--k-fs-16); color: var(--k-text-strong); text-decoration: none;
}
.k-dropdown__item:hover { background: var(--k-blue-050); color: var(--k-blue);
                          text-decoration: none; }

/* ----------------------------------------------------- Sub-Tab-Leiste */
.k-tabs {
  display: flex; gap: var(--k-space-7);
  border-bottom: var(--k-border-width) solid var(--k-border);
  overflow-x: auto; scrollbar-width: none;
  margin-bottom: var(--k-space-7);
}
.k-tabs::-webkit-scrollbar { display: none; }
.k-tab {
  padding: var(--k-space-3) 0;
  border: 0; border-bottom: 2px solid transparent;
  background: none;
  font-size: var(--k-fs-16); font-weight: var(--k-fw-semibold);
  color: var(--k-text-muted); white-space: nowrap; cursor: pointer;
  text-decoration: none;
}
.k-tab:hover { color: var(--k-text-strong); text-decoration: none; }
.k-tab.is-active { color: var(--k-blue); border-bottom-color: var(--k-blue); }

/* ------------------------------------------------------- Login-Tabs */
/* Maße von magazine.klambt.services (gemessen 21.08.2026) */
.k-logintabs { display: flex; gap: 6px; }
.k-logintab {
  padding: 11px 22px;
  background: var(--k-surface-muted);
  border: var(--k-border-width) solid var(--k-border);
  border-bottom: 0;
  border-radius: var(--k-radius-xs) var(--k-radius-xs) 0 0;
  font-size: var(--k-fs-15); font-weight: var(--k-fw-semibold);
  color: var(--k-text-muted); cursor: pointer;
}
.k-logintab:hover { color: var(--k-text-strong); }
.k-logintab.is-active {
  background: var(--k-surface);
  color: var(--k-text-strong);
  font-weight: var(--k-fw-bold);
  position: relative; z-index: 2; margin-bottom: -1px;
}
.k-loginpanel {
  background: var(--k-surface);
  border: var(--k-border-width) solid var(--k-border);
  border-radius: 0 var(--k-radius-lg) var(--k-radius-lg) var(--k-radius-lg);
  padding: 28px;
}

/* ---------------------------------------------------------- Buttons */
.k-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--k-space-2);
  min-height: var(--k-control-h);
  padding: 0 var(--k-space-4);
  border: var(--k-border-width) solid transparent;
  border-radius: var(--k-radius-sm);
  background: var(--k-surface);
  font-size: var(--k-fs-14); font-weight: var(--k-fw-semibold);
  color: var(--k-text-strong); text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background var(--k-duration) var(--k-ease),
              border-color var(--k-duration) var(--k-ease),
              color var(--k-duration) var(--k-ease);
}
.k-btn:hover { text-decoration: none; }
.k-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

.k-btn--primary { background: var(--k-navy); border-color: var(--k-text-strong);
                  color: var(--k-text-invert); }
.k-btn--primary:hover  { background: var(--k-navy-hover); border-color: var(--k-navy-hover);
                         color: var(--k-text-invert); }
.k-btn--primary:active { background: var(--k-navy-active); border-color: var(--k-navy-active); }

.k-btn--accent { background: var(--k-blue); border-color: var(--k-blue);
                 color: var(--k-text-invert); }
.k-btn--accent:hover  { background: var(--k-blue-hover); border-color: var(--k-blue-hover);
                        color: var(--k-text-invert); }
.k-btn--accent:active { background: var(--k-blue-active); border-color: var(--k-blue-active); }

.k-btn--secondary { background: var(--k-surface); border-color: var(--k-border);
                    color: var(--k-text-strong); }
.k-btn--secondary:hover  { border-color: var(--k-border-strong); background: var(--k-surface-muted); }
.k-btn--secondary:active { background: var(--k-surface-sunken); }
.k-btn--secondary.is-active { border-color: var(--k-blue); color: var(--k-blue); }

.k-btn--ghost { background: none; border-color: transparent; color: var(--k-blue); }
.k-btn--ghost:hover { background: var(--k-blue-050); }

.k-btn--danger { background: var(--k-surface); border-color: var(--k-border);
                 color: var(--k-danger); }
.k-btn--danger:hover { background: var(--k-danger-bg); border-color: var(--k-danger); }

/* --sm: gemessen magazine.stage 24.08.2026 ("Ansehen" auf Covern,
   Header-Schnellaktionen) — 32px/12px/600, Padding 7 12, Radius 4px
   (Fix-Runde 1, ersetzt die zuvor geschaetzte Proportional-Verkleinerung).
   min-height auf --k-btn-sm-h umgestellt (Owner-Fix Runde 2): 32px Desktop,
   44px Touch (@media (pointer: coarse) in tokens.css), §8.5-Touch-Garantie. */
.k-btn--sm { min-height: var(--k-btn-sm-h);
             padding: 0 var(--k-space-3); font-size: var(--k-fs-12);
             font-weight: var(--k-fw-semibold); border-radius: var(--k-radius-xs); }
/* --lg (Fix-Runde 1, Task 9 Concern 3: eigener --k-control-h-xl-Token statt
   Wiederverwendung von --k-control-h-lg, das jetzt primär die Input-Höhe
   (40px) definiert — --lg/--sso brauchen eine eigene, groessere Stufe). */
.k-btn--lg { min-height: var(--k-control-h-xl); padding: 0 var(--k-space-6);
             font-size: var(--k-fs-15); font-weight: var(--k-fw-semibold);
             border-radius: var(--k-radius-sm); }
.k-btn--block { width: 100%; }

.k-btn--icon { width: var(--k-control-h); min-height: var(--k-control-h);
               padding: 0; background: var(--k-surface);
               border-color: var(--k-border); color: var(--k-text-strong); }
.k-btn--icon:hover { border-color: var(--k-border-strong); background: var(--k-surface-muted); }

.k-btn--sso {
  width: 100%; min-height: var(--k-control-h-xl); /* Fix-Runde 1: eigener --k-control-h-xl-Token, siehe .k-btn--lg oben */
  gap: var(--k-space-3) var(--k-space-4);
  padding: var(--k-space-3) var(--k-space-4);
  background: var(--k-navy); border-color: var(--k-text-strong);
  color: var(--k-text-invert);
  border-radius: var(--k-radius-sm); /* 8px, verifiziert gegen paketservice.dev.klambt.de/login (24.08.2026) */
  font-size: var(--k-fs-15); font-weight: var(--k-fw-semibold);
  flex-wrap: wrap; white-space: normal; text-align: center;
}
.k-btn--sso:hover { background: var(--k-navy-hover); border-color: var(--k-navy-hover);
                    color: var(--k-text-invert); }
.k-btn--sso img { height: 20px; width: auto; }

.k-btn[disabled], .k-btn.is-disabled, .k-btn:disabled {
  background: var(--k-disabled-bg);
  border-color: var(--k-disabled-border);
  color: var(--k-disabled-text);
  cursor: not-allowed;
}
.k-btn[disabled]:hover, .k-btn.is-disabled:hover {
  background: var(--k-disabled-bg); border-color: var(--k-disabled-border);
  color: var(--k-disabled-text);
}

/* ------------------------------------------------------------ Badges */
/* Rollen-Badge: klein, Pill, uppercase — angeglichen an paketservice.dev.klambt.de
   (gemessen 24.08.2026: 18px/10px/700, Padding 3x8, ls 0.6px = --k-ls-caps bei 10px). */
.k-badge {
  display: inline-flex; align-items: center;
  height: var(--k-badge-h); padding: var(--k-badge-pad-y) var(--k-space-2);
  border-radius: var(--k-radius-pill);
  font-size: var(--k-fs-10); font-weight: var(--k-fw-bold);
  letter-spacing: var(--k-ls-caps); text-transform: uppercase;
  color: var(--k-text-invert); white-space: nowrap;
}
.k-badge--admin       { background: var(--k-dk-red); }
.k-badge--mitarbeiter { background: var(--k-blue); }
.k-badge--partner     { background: var(--k-navy); }
.k-badge--neutral     { background: var(--k-surface-muted); color: var(--k-text-muted); }
.k-badge--success { background: var(--k-success-bg); color: var(--k-success); }
.k-badge--warning { background: var(--k-warning-bg); color: var(--k-warning); }
.k-badge--danger  { background: var(--k-danger-bg);  color: var(--k-danger); }

/* Status-Badge (Tint-Muster): eigenständiges, größeres Pill-Muster für
   Zustandsanzeigen (z. B. Paket-Status) — kräftige Textfarbe auf ~13-14%-
   Alpha-Hintergrund derselben Farbe, KEIN Uppercase (im Gegensatz zum
   Rollen-Badge oben). Gemessen paketservice.dev.klambt.de/suche 24.08.2026. */
.k-badge--success-tint,
.k-badge--warning-tint,
.k-badge--danger-tint {
  height: var(--k-badge-tint-h);
  padding: var(--k-badge-tint-pad-y) var(--k-badge-tint-pad-x);
  font-size: var(--k-fs-12); font-weight: var(--k-fw-bold);
  letter-spacing: normal; text-transform: none;
}
.k-badge--success-tint { background: var(--k-success-tint); color: var(--k-success-tint-text); }
.k-badge--warning-tint { background: var(--k-warning-tint); color: var(--k-warning-tint-text); }
.k-badge--danger-tint  { background: var(--k-danger-tint);  color: var(--k-danger-tint-text); }

.k-counter {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 var(--k-space-2);
  border-radius: var(--k-radius-pill);
  background: var(--k-blue); color: var(--k-text-invert);
  font-size: var(--k-fs-13); font-weight: var(--k-fw-bold);
}

/* ------------------------------------------------------------- Chips */
.k-chips { display: flex; flex-wrap: wrap; gap: var(--k-space-3); }
.k-chip {
  display: inline-flex; align-items: center;
  height: var(--k-chip-h); padding: var(--k-chip-pad-y) var(--k-chip-pad-x);
  border: var(--k-border-width) solid var(--k-border);
  border-radius: var(--k-radius-pill);
  background: var(--k-surface);
  font-size: var(--k-fs-13); font-weight: var(--k-fw-semibold);
  color: var(--k-text-strong); cursor: pointer; white-space: nowrap;
}
.k-chip:hover { border-color: var(--k-border-strong); background: var(--k-surface-muted); }
.k-chip.is-active {
  background: var(--k-blue); border-color: var(--k-blue); color: var(--k-text-invert);
}
.k-chip[disabled] {
  background: var(--k-disabled-bg); border-color: var(--k-disabled-border);
  color: var(--k-disabled-text); cursor: not-allowed;
}

/* --------------------------------------------------- Formular / Input */
.k-field { display: flex; flex-direction: column; gap: var(--k-space-2); }
.k-label { font-size: var(--k-fs-15); font-weight: var(--k-fw-bold); color: var(--k-text-strong); }
.k-input {
  width: 100%; min-height: var(--k-control-h-lg);
  padding: 0 var(--k-space-4);
  border: var(--k-border-width) solid var(--k-border);
  border-radius: var(--k-radius-xs);
  background: var(--k-surface);
  font-family: inherit; font-size: var(--k-fs-15); color: var(--k-text-strong);
}
.k-input::placeholder { color: var(--k-text-subtle); }
.k-input:hover { border-color: var(--k-border-strong); }
.k-input:focus { outline: none; border-color: var(--k-blue); box-shadow: var(--k-focus-ring); }
.k-input[disabled] { background: var(--k-surface-muted); color: var(--k-disabled-text);
                     cursor: not-allowed; }
.k-input.is-error { border-color: var(--k-danger); }
.k-input.is-error:focus { box-shadow: 0 0 0 3px rgba(194, 16, 28, 0.25); }
.k-error { font-size: var(--k-fs-14); color: var(--k-danger); }
.k-hint  { font-size: var(--k-fs-14); color: var(--k-text-muted); }

.k-check { display: flex; align-items: flex-start; gap: var(--k-space-3);
           font-size: var(--k-fs-16); color: var(--k-text); cursor: pointer; }
.k-check input {
  width: 20px; height: 20px; margin: 2px 0 0;
  accent-color: var(--k-blue); flex: 0 0 auto; cursor: pointer;
}
.k-note {
  padding: var(--k-space-5);
  background: var(--k-surface-muted);
  border: var(--k-border-width) solid var(--k-border);
  border-radius: var(--k-radius-lg);
}
.k-note__title { margin: 0 0 var(--k-space-3); font-size: var(--k-fs-16);
                 font-weight: var(--k-fw-bold); color: var(--k-text-strong); }
.k-note__body  { margin: 0; font-size: var(--k-fs-15); color: var(--k-text-muted);
                 line-height: var(--k-lh-relaxed); }

/* ---------------------------------------------- Floating-Label-Feld */
/* Label steht im leeren Feld und wandert bei Fokus oder Inhalt in die
   Rahmenlinie. Placeholder erscheint erst, wenn das Label oben ist.
   Jedes .k-float-Input braucht ein placeholder-Attribut (notfalls " "). */
.k-float { position: relative; display: block; }
.k-float__label {
  position: absolute; left: var(--k-space-3); top: 50%;
  transform: translateY(-50%);
  max-width: calc(100% - var(--k-space-6));
  padding: 0 var(--k-space-1);
  background: transparent;
  font-size: var(--k-fs-15); font-weight: var(--k-fw-regular);
  color: var(--k-text-subtle);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
  transition: top var(--k-duration) var(--k-ease),
              left var(--k-duration) var(--k-ease),
              font-size var(--k-duration) var(--k-ease),
              color var(--k-duration) var(--k-ease),
              background-color var(--k-duration) var(--k-ease);
}
.k-float .k-input::placeholder,
.k-float .k-search__input::placeholder {
  color: transparent;
  transition: color var(--k-duration) var(--k-ease);
}
.k-float:focus-within .k-input::placeholder,
.k-float:focus-within .k-search__input::placeholder { color: var(--k-text-subtle); }
.k-float:focus-within > .k-float__label,
.k-float > .k-input:not(:placeholder-shown) ~ .k-float__label,
.k-float--select > .k-float__label,
.k-float--date > .k-float__label,
.k-float--search:has(.k-search__input:not(:placeholder-shown)) > .k-float__label {
  top: 0; left: var(--k-space-3);
  font-size: var(--k-fs-12); font-weight: var(--k-fw-semibold);
  color: var(--k-text-muted);
  background: var(--k-surface);
}
.k-float:focus-within > .k-float__label { color: var(--k-blue); }
.k-float > .k-input.is-error ~ .k-float__label { color: var(--k-danger); }
/* Suchfeld-Variante: Label startet rechts vom Lupen-Icon. */
.k-float--search > .k-float__label { left: calc(var(--k-space-9) - var(--k-space-1)); }
.k-float--search:focus-within > .k-float__label,
.k-float--search:has(.k-search__input:not(:placeholder-shown)) > .k-float__label {
  left: var(--k-space-3);
}

/* ---------------------------------------------------------- Suchfeld */
.k-search { position: relative; display: block; width: 100%; }
.k-search__icon {
  position: absolute; left: var(--k-space-4); top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--k-text-subtle); pointer-events: none;
}
.k-search__input {
  width: 100%; min-height: var(--k-control-h-lg);
  padding: 0 var(--k-space-4) 0 var(--k-space-9);
  border: var(--k-border-width) solid var(--k-border);
  border-radius: var(--k-radius-xs);
  background: var(--k-surface);
  font-family: inherit; font-size: var(--k-fs-15); color: var(--k-text-strong);
}
.k-search__input::placeholder { color: var(--k-text-subtle); }
.k-search__input:hover { border-color: var(--k-border-strong); }
.k-search__input:focus { outline: none; border-color: var(--k-blue);
                         box-shadow: var(--k-focus-ring); }
.k-search--lg .k-search__input {
  min-height: var(--k-search-lg-h); /* 46px Desktop/48px Touch, gemessen PS /suche 24.08.2026, kein 4px-Raster-Wert — vorher --k-control-h-xl (44px), dann literal ohne Touch-Skalierung (Fix-Runde 1, Task-11-Review) */
  padding-left: 44px; /* gemessen PS /suche 24.08.2026, Icon-Abstand groß statt --k-space-9 (48px) */
  border-radius: var(--k-radius-lg);
  font-size: var(--k-fs-16);
}

/* -------------------------------------------------------- Card/Panel */
.k-card {
  background: var(--k-surface);
  border: var(--k-border-width) solid var(--k-border);
  border-radius: var(--k-radius-xl);
  box-shadow: var(--k-shadow-card);
  padding: var(--k-space-6);
}
@media (min-width: 1024px) { .k-card { padding: var(--k-space-7); } }
.k-card--flush { padding: 0; overflow: hidden; }
.k-card__title { margin: 0 0 var(--k-space-2); font-size: var(--k-fs-20);
                 font-weight: var(--k-fw-bold); color: var(--k-text-strong); }
.k-card__desc  { margin: 0; font-size: var(--k-fs-15); color: var(--k-text-muted);
                 line-height: var(--k-lh-relaxed); }

.k-stat__label { margin: 0 0 var(--k-space-3); font-size: var(--k-fs-13);
                 font-weight: var(--k-fw-semibold); letter-spacing: var(--k-ls-eyebrow);
                 text-transform: uppercase; color: var(--k-blue); }
.k-stat__value { margin: 0 0 var(--k-space-4); font-size: var(--k-fs-40);
                 font-weight: var(--k-fw-extrabold); line-height: 1;
                 color: var(--k-text-strong); }
.k-stat__desc  { margin: 0; font-size: var(--k-fs-15); color: var(--k-text-muted);
                 line-height: var(--k-lh-relaxed); }

.k-grid-cards { display: grid; grid-template-columns: 1fr; gap: var(--k-space-6); }
@media (min-width: 640px)  { .k-grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .k-grid-cards { grid-template-columns: repeat(4, 1fr); } }

/* ------------------------------------------------------ Empty-State */
.k-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--k-space-4);
  min-height: 260px; padding: var(--k-space-8) var(--k-space-6);
  text-align: center;
}
.k-empty__text { margin: 0; font-size: var(--k-fs-13); font-weight: var(--k-fw-regular);
                 color: var(--k-text-muted); } /* 13.5px gemessen MP /teilen 24.08.2026, gerundet auf --k-fs-13 (kein 0.5px-Token) */
.k-empty__icon {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: var(--k-radius-pill);
  background: var(--k-blue-050); color: var(--k-blue);
}
.k-empty__icon svg { width: 28px; height: 28px; }

/* ---------------------------------------------------------- Tabellen */
/* Mobile-Variante projektweit: horizontal scrollbarer Container. */
.k-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.k-table { width: 100%; min-width: 720px; border-collapse: collapse;
           font-size: var(--k-fs-14); }
.k-table th {
  padding: var(--k-th-pad-y) var(--k-table-pad-x);
  border-bottom: var(--k-border-width) solid var(--k-border);
  text-align: left; font-size: var(--k-fs-12); font-weight: var(--k-fw-bold);
  letter-spacing: var(--k-ls-table); text-transform: uppercase;
  color: var(--k-text-muted); white-space: nowrap;
}
.k-table td {
  padding: var(--k-space-2) var(--k-table-pad-x);
  border-bottom: var(--k-border-width) solid var(--k-border);
  color: var(--k-text-strong); vertical-align: middle;
}
.k-table tbody tr:last-child td { border-bottom: 0; }
.k-table tbody tr:hover td { background: var(--k-surface-muted); }
.k-table tbody tr[data-href] { cursor: pointer; }
.k-table tbody tr[data-href]:focus-visible td { background: var(--k-surface-muted); }
.k-table__num  { text-align: center; }
.k-table__act  { text-align: right; white-space: nowrap; }
.k-table__dim  { color: var(--k-text-subtle); }
.k-table__check { color: var(--k-success); font-weight: var(--k-fw-bold); }

/* ------------------------------------------- Tabellen-Erweiterungen */
/* Sticky-Kopfzeile innerhalb des Scroll-Containers. */
.k-table--sticky-head thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--k-surface);
}
/* Sticky erste Spalte: Orientierung beim horizontalen Scrollen. */
.k-table--sticky-first th:first-child,
.k-table--sticky-first td:first-child {
  position: sticky; left: 0; z-index: 1;
  background: var(--k-surface);
  border-right: var(--k-border-width) solid var(--k-border);
}
.k-table--sticky-first thead th:first-child { z-index: 3; }
/* Sortierbare Spaltenköpfe */
.k-th-sort {
  display: inline-flex; align-items: center; gap: var(--k-space-1);
  margin: 0; padding: 0; border: 0; background: none;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: inherit; cursor: pointer; white-space: nowrap;
}
.k-th-sort:hover { color: var(--k-text-strong); }
.k-th-sort svg { width: 14px; height: 14px; opacity: 0.4; flex: 0 0 auto; }
.k-th-sort.is-asc,
.k-th-sort.is-desc { color: var(--k-blue); }
.k-th-sort.is-asc svg,
.k-th-sort.is-desc svg { opacity: 1; }
.k-th-sort.is-desc svg { transform: rotate(180deg); }
/* Aufklappbare Zeilen (Master-Detail) */
.k-table__expcell { width: 44px; padding-right: 0; }
.k-expander {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: 0;
  background: none; border-radius: var(--k-radius-sm);
  color: var(--k-text-muted); cursor: pointer;
}
.k-expander:hover { color: var(--k-text-strong); background: var(--k-surface-muted); }
.k-expander svg { width: 16px; height: 16px;
                  transition: transform var(--k-duration) var(--k-ease); }
.k-expander[aria-expanded="true"] svg { transform: rotate(90deg); }
.k-table__subrow > td { background: var(--k-surface-sunken); }
.k-table tbody tr.k-table__subrow:hover td { background: var(--k-surface-sunken); }
/* Spalten-Priorität: sekundäre Spalten erst ab Tablet/Desktop einblenden. */
.k-col--md, .k-col--lg { display: none; }
@media (min-width: 640px)  { .k-col--md { display: table-cell; } }
@media (min-width: 1024px) { .k-col--lg { display: table-cell; } }
/* Kleine Logo-Box für Tabellenzellen (Kürzel statt Bild-Asset). */
.k-magazine__logo--sm {
  width: 64px; height: 40px;
  padding: var(--k-space-1);
  font-size: var(--k-fs-11);
}
/* Titelzelle: Logo-Box + Name nebeneinander, bricht nicht um. */
.k-cell-title {
  display: flex; align-items: center; gap: var(--k-space-3);
  min-width: 220px; font-weight: var(--k-fw-semibold);
  white-space: nowrap;
}

/* -------------------------------------------------------- Breadcrumb */
.k-breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--k-space-2);
  margin: 0 0 var(--k-space-6); padding: 0; list-style: none;
  font-size: var(--k-fs-14);
}
.k-breadcrumb__item { display: flex; align-items: center; gap: var(--k-space-2); }
.k-breadcrumb__link { color: var(--k-text-muted); text-decoration: none; }
.k-breadcrumb__link:hover { color: var(--k-blue); text-decoration: none; }
.k-breadcrumb__sep { width: 14px; height: 14px; color: var(--k-text-subtle);
                     flex: 0 0 auto; }
.k-breadcrumb__current { color: var(--k-text-strong); font-weight: var(--k-fw-semibold); }

/* ------------------------------------------------------------ Select */
.k-selectwrap { position: relative; display: block; width: 100%; }
.k-selectwrap__chevron {
  position: absolute; right: var(--k-space-4); top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--k-text-muted); pointer-events: none;
}
.k-select {
  appearance: none; -webkit-appearance: none;
  width: 100%; min-height: var(--k-control-h-lg);
  padding: 0 var(--k-space-9) 0 var(--k-space-4);
  border: var(--k-border-width) solid var(--k-border);
  border-radius: var(--k-radius-xs);
  background: var(--k-surface);
  font-family: inherit; font-size: var(--k-fs-15); color: var(--k-text-strong);
  cursor: pointer;
}
.k-select:hover { border-color: var(--k-border-strong); }
.k-select:focus { outline: none; border-color: var(--k-blue);
                  box-shadow: var(--k-focus-ring); }
.k-select[disabled] { background: var(--k-surface-muted);
                      color: var(--k-disabled-text); cursor: not-allowed; }
.k-select.is-placeholder { color: var(--k-text-subtle); }
/* min-height auf --k-select-sm-h umgestellt (Owner-Fix Runde 2): 36px
   Desktop, 44px Touch (@media (pointer: coarse) in tokens.css). */
.k-select--sm { min-height: var(--k-select-sm-h); font-size: var(--k-fs-14);
                padding: 0 var(--k-space-8) 0 var(--k-space-3); }
.k-selectwrap--auto { width: auto; }
.k-selectwrap--auto .k-select { width: auto; }

/* ------------------------------------------------------------- Radio */
.k-radiogroup { display: flex; flex-wrap: wrap; align-items: center;
                gap: var(--k-space-3) var(--k-space-5); }
.k-radiogroup__label { font-size: var(--k-fs-15); font-weight: var(--k-fw-bold);
                       color: var(--k-text-strong); }
.k-radio { display: flex; align-items: center; gap: var(--k-space-3);
           font-size: var(--k-fs-16); color: var(--k-text); cursor: pointer; }
.k-radio input {
  width: 20px; height: 20px; margin: 0;
  accent-color: var(--k-blue); flex: 0 0 auto; cursor: pointer;
}
.k-radio input[disabled] { cursor: not-allowed; }

/* --------------------------------------------------------- Filterbar */
.k-filterbar {
  display: flex; flex-direction: column; gap: var(--k-space-5);
  padding: var(--k-space-5);
  background: var(--k-surface);
  border: var(--k-border-width) solid var(--k-border);
  border-radius: var(--k-radius-xl);
}
.k-filterbar__grid { display: grid; grid-template-columns: 1fr;
                     gap: var(--k-space-3) var(--k-space-4); /* 12x16, gemessen PS Detail 24.08.2026 */ }
.k-filterbar__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--k-space-4);
}
@media (min-width: 640px) {
  .k-filterbar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .k-filterbar__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* -------------------------------------------------------- Pagination */
.k-pagination {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: flex-end;
  gap: var(--k-space-4) var(--k-space-6);
  padding: var(--k-space-4) var(--k-space-5);
  border-top: var(--k-border-width) solid var(--k-border);
  font-size: var(--k-fs-14); color: var(--k-text-muted);
}
.k-pagination__size { display: flex; align-items: center; gap: var(--k-space-3);
                      white-space: nowrap; }
.k-pagination__range { white-space: nowrap; font-variant-numeric: tabular-nums; }
.k-pagination__nav { display: flex; gap: var(--k-space-2); }

/* ----------------------------------------------------------- Tooltip */
.k-tip { position: relative; }
.k-tip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + var(--k-space-2)); left: 50%;
  transform: translateX(-50%);
  padding: var(--k-space-1) var(--k-space-3);
  background: var(--k-navy); color: var(--k-text-invert);
  border-radius: var(--k-radius-sm);
  font-size: var(--k-fs-12); font-weight: var(--k-fw-semibold);
  letter-spacing: normal; text-transform: none; white-space: nowrap;
  display: none; pointer-events: none;
  z-index: 30;
}
.k-tip:hover::after, .k-tip:focus-visible::after { display: block; }
/* Tooltip unterhalb (für Buttons am oberen Seitenrand, z. B. im Header) */
.k-tip--bottom::after { bottom: auto; top: calc(100% + var(--k-space-2)); }
/* Tooltip rechtsbündig (für Buttons am rechten Seitenrand) */
.k-tip--end::after { left: auto; right: 0; transform: none; }

/* --------------------------------------------- Suchfeld: Leeren-Knopf */
.k-search--clearable .k-search__input { padding-right: var(--k-space-10); }
.k-search__clear {
  position: absolute; right: var(--k-space-3); top: 50%;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 0;
  background: none; border-radius: var(--k-radius-sm);
  color: var(--k-text-muted); cursor: pointer;
}
.k-search__clear:hover { color: var(--k-text-strong); background: var(--k-surface-muted); }
.k-search__clear svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------- KV-Liste */
.k-kv { display: grid; grid-template-columns: 1fr;
        gap: var(--k-space-5) var(--k-space-6); margin: 0; }
.k-kv dt {
  font-size: var(--k-fs-12); font-weight: var(--k-fw-semibold);
  letter-spacing: var(--k-ls-caps); text-transform: uppercase;
  color: var(--k-text-muted);
}
.k-kv dd { margin: var(--k-space-1) 0 0; font-size: var(--k-fs-16);
           color: var(--k-text-strong); overflow-wrap: anywhere; }
@media (min-width: 640px) {
  .k-kv { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

/* -------------------------------------------------------- Entity-Kopf */
.k-entity__head { display: flex; align-items: center; flex-wrap: wrap;
                  gap: var(--k-space-5); }
.k-entity__actions { display: flex; gap: var(--k-space-2); margin-left: auto; }
.k-entity__rule { height: 1px; background: var(--k-border);
                  margin-block: var(--k-space-5); }

/* -------------------------------------------- Icon-Button klein (32px) */
/* width + min-height beide auf --k-btn-sm-h (Owner-Fix Runde 2): Icon-Buttons
   sind quadratisch, damit muss das Quadrat auf Touch (44px) mitwachsen statt
   nur die Höhe zu skalieren. */
.k-btn--icon.k-btn--sm { width: var(--k-btn-sm-h); min-height: var(--k-btn-sm-h); }

/* -------------------------------------------------------- Cover-Grid */
.k-magazine { display: flex; flex-direction: column; gap: var(--k-space-6); }
.k-magazine__head { display: flex; align-items: center; gap: var(--k-space-5); }
.k-magazine__logo {
  display: flex; align-items: center; justify-content: center;
  width: 128px; height: 68px; flex: 0 0 auto;
  padding: var(--k-space-2);
  background: var(--k-surface);
  border: var(--k-border-width) solid var(--k-border);
  border-radius: var(--k-radius-md);
  font-size: var(--k-fs-13); font-weight: var(--k-fw-bold);
  letter-spacing: var(--k-ls-caps); text-transform: uppercase;
  color: var(--k-text-strong); text-align: center; line-height: 1.25;
}
.k-magazine__title { margin: 0; font-size: var(--k-fs-20);
                     font-weight: var(--k-fw-bold); color: var(--k-text-strong); }
.k-magazine__meta  { margin: var(--k-space-1) 0 0; font-size: var(--k-fs-15);
                     color: var(--k-text-muted); }
.k-magazine__rule  { height: 1px; background: var(--k-border); }

.k-covers { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--k-space-6); }
@media (min-width: 640px)  { .k-covers { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .k-covers { grid-template-columns: repeat(5, 1fr); } }

.k-cover { display: flex; flex-direction: column; gap: var(--k-space-3);
           text-align: center; }
.k-cover__img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  background: var(--k-surface-sunken);
  border: var(--k-border-width) solid var(--k-border);
  border-radius: var(--k-radius-sm);
}
.k-cover__no   { font-size: var(--k-fs-16); font-weight: var(--k-fw-bold);
                 color: var(--k-text-strong); }
.k-cover__date { display: flex; align-items: center; justify-content: center;
                 gap: var(--k-space-2); font-size: var(--k-fs-14);
                 color: var(--k-text-muted); }
.k-cover__date svg { width: 15px; height: 15px; }
.k-cover__size { font-size: var(--k-fs-13); color: var(--k-text-subtle); }

/* ----------------------------------------------------- Panel (Korb) */
.k-panel {
  background: var(--k-surface);
  border: var(--k-border-width) solid var(--k-border);
  border-radius: var(--k-radius-xl);
  overflow: hidden;
}
.k-panel__head {
  display: flex; align-items: center; gap: var(--k-space-3);
  padding: var(--k-space-5) var(--k-space-6);
  background: var(--k-navy); color: var(--k-text-invert);
  font-size: var(--k-fs-18); font-weight: var(--k-fw-bold);
}
.k-panel__head svg { width: 20px; height: 20px; }
.k-panel__head .k-counter { background: var(--k-blue); }
.k-panel__body { padding: var(--k-space-6); }
.k-panel__actions {
  display: flex; flex-direction: column; gap: var(--k-space-3);
  padding: var(--k-space-6);
  border-top: var(--k-border-width) solid var(--k-border);
}

.k-split { display: grid; grid-template-columns: 1fr; gap: var(--k-space-6); }
@media (min-width: 1024px) {
  .k-split { grid-template-columns: minmax(0, 1fr) 420px; gap: var(--k-space-7); }
}

/* ---------------------------------------------------------- Footer */
.k-footer {
  margin-top: auto;
  background: var(--k-footer-bg);
  border-top: var(--k-border-width) solid var(--k-border);
  padding-block: var(--k-space-7); /* 32px, gemessen Paket Service (bestätigt 24.08.2026) */
}
.k-footer__inner { display: flex; flex-direction: column; align-items: center;
                   gap: var(--k-space-4); text-align: center; }
.k-footer__logo  { height: 24px; width: auto; }
.k-footer__links { display: flex; flex-wrap: wrap; justify-content: center;
                   gap: var(--k-space-6); }
.k-footer__links a { font-size: var(--k-fs-16); color: var(--k-text-muted); }
.k-footer__links a:hover { color: var(--k-text-strong); }
.k-footer__legal { display: flex; flex-direction: column; gap: var(--k-space-1);
                   font-size: var(--k-fs-15); color: var(--k-text-muted); }

/* ------------------------------------------- Login / Centered-Screen */
/* Kartenbreite 576px wie magazine.klambt.services (gemessen 21.08.2026) */
.k-authwrap { width: 100%; max-width: 576px; margin-inline: auto;
              text-align: center; }
.k-authwrap .k-eyebrow { margin-bottom: var(--k-space-3); }
.k-authwrap .k-h1 { font-size: var(--k-fs-34); }
.k-authcard { margin-top: var(--k-space-6); text-align: left; }
.k-authcard--centered { text-align: center; }

/* ------------------------------------------------ Alert / Banner */
.k-alert {
  display: flex; align-items: flex-start; gap: var(--k-space-3);
  padding: var(--k-space-4) var(--k-space-5);
  border: var(--k-border-width) solid var(--k-border);
  border-radius: var(--k-radius-lg);
  font-size: var(--k-fs-15);
}
.k-alert__icon { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; }
.k-alert__title { margin: 0; font-size: var(--k-fs-15);
                  font-weight: var(--k-fw-bold); }
.k-alert__body { margin: var(--k-space-1) 0 0; color: var(--k-text-muted);
                 line-height: var(--k-lh-relaxed); }
.k-alert__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; margin-left: auto; border: 0;
  background: none; border-radius: var(--k-radius-sm);
  color: var(--k-text-muted); cursor: pointer; flex: 0 0 auto;
}
.k-alert__close:hover { color: var(--k-text-strong); background: var(--k-surface); }
.k-alert__close svg { width: 16px; height: 16px; }
.k-alert--success { background: var(--k-success-bg); }
.k-alert--success .k-alert__icon, .k-alert--success .k-alert__title { color: var(--k-success); }
.k-alert--warning { background: var(--k-warning-bg); }
.k-alert--warning .k-alert__icon, .k-alert--warning .k-alert__title { color: var(--k-warning); }
.k-alert--danger { background: var(--k-danger-bg); }
.k-alert--danger .k-alert__icon, .k-alert--danger .k-alert__title { color: var(--k-danger); }
.k-alert--info { background: var(--k-info-bg); }
.k-alert--info .k-alert__icon, .k-alert--info .k-alert__title { color: var(--k-info); }

/* --------------------------------------------------- Toast/Snackbar */
.k-toasts {
  position: fixed; right: var(--k-space-6); bottom: var(--k-space-6);
  z-index: 50;
  display: flex; flex-direction: column; gap: var(--k-space-3);
  max-width: calc(100vw - 2 * var(--k-space-6));
}
.k-toast {
  display: flex; align-items: center; gap: var(--k-space-3);
  min-width: 280px; max-width: 380px;
  padding: var(--k-space-4) var(--k-space-5);
  background: var(--k-surface);
  border: var(--k-border-width) solid var(--k-border);
  border-radius: var(--k-radius-lg);
  box-shadow: var(--k-shadow-dropdown);
  font-size: var(--k-fs-15); font-weight: var(--k-fw-semibold);
  color: var(--k-text-strong);
}
.k-toast__icon { width: 20px; height: 20px; flex: 0 0 auto; }
.k-toast--success .k-toast__icon { color: var(--k-success); }
.k-toast--warning .k-toast__icon { color: var(--k-warning); }
.k-toast--danger  .k-toast__icon { color: var(--k-danger); }
.k-toast--info    .k-toast__icon { color: var(--k-info); }

/* -------------------------------------------- Modal / Dialog */
.k-modal {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  padding: var(--k-space-6);
  background: var(--k-overlay);
}
.k-modal[hidden] { display: none; }
.k-modal__card {
  width: 100%; max-width: 480px;
  padding: var(--k-space-6);
  background: var(--k-surface);
  border-radius: var(--k-radius-xl);
  box-shadow: var(--k-shadow-modal);
}
@media (min-width: 1024px) { .k-modal__card { padding: var(--k-space-7); } }
.k-modal__title { margin: 0 0 var(--k-space-3); font-size: var(--k-fs-20);
                  font-weight: var(--k-fw-bold); color: var(--k-text-strong); }
.k-modal__body { margin: 0; font-size: var(--k-fs-15); color: var(--k-text-muted);
                 line-height: var(--k-lh-relaxed); }
.k-modal__actions {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: var(--k-space-3); margin-top: var(--k-space-6);
}

/* ------------------------------------------------ Prozess-Stepper */
.k-steps { display: flex; margin: 0; padding: 0; list-style: none; }
.k-step {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--k-space-2);
  padding: 0 var(--k-space-2);
  text-align: center;
}
.k-step::before, .k-step::after {
  content: ""; position: absolute; top: 13px; height: 2px;
  width: calc(50% - 22px);
  background: var(--k-border);
}
.k-step::before { left: 0; }
.k-step::after { right: 0; }
.k-step:first-child::before, .k-step:last-child::after { display: none; }
.k-step.is-done::before, .k-step.is-done::after,
.k-step.is-current::before { background: var(--k-blue); }
.k-step__dot {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; z-index: 1;
  border: 2px solid var(--k-border);
  border-radius: var(--k-radius-pill);
  background: var(--k-surface);
  font-size: var(--k-fs-13); font-weight: var(--k-fw-bold);
  color: var(--k-text-muted);
}
.k-step__dot svg { width: 14px; height: 14px; }
.k-step.is-done .k-step__dot { border-color: var(--k-blue);
                               background: var(--k-blue); color: var(--k-text-invert); }
.k-step.is-current .k-step__dot { border-color: var(--k-blue); color: var(--k-blue); }
.k-step__label { font-size: var(--k-fs-13); font-weight: var(--k-fw-semibold);
                 color: var(--k-text-muted); max-width: 100%; hyphens: auto; }
.k-step.is-done .k-step__label, .k-step.is-current .k-step__label { color: var(--k-text-strong); }

/* ------------------------------------------------ Skeleton-Loader */
.k-skeleton { display: block; background: var(--k-surface-sunken);
              border-radius: var(--k-radius-sm); }
.k-skeleton--text    { height: 14px; }
.k-skeleton--title   { height: 22px; }
.k-skeleton--circle  { border-radius: var(--k-radius-pill); }
.k-skeleton--control { height: var(--k-control-h); border-radius: var(--k-radius-md); }
/* Puls nur in Apps aktivieren — Referenz-Screenshots bleiben statisch. */
.k-skeleton--pulse { animation: k-skeleton-pulse 1.6s var(--k-ease) infinite; }
@keyframes k-skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .k-skeleton--pulse { animation: none; } }

/* ------------------------------------------- Datei-Upload / Dropzone */
.k-upload {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--k-space-3);
  padding: var(--k-space-8) var(--k-space-6);
  border: 2px dashed var(--k-border-strong);
  border-radius: var(--k-radius-xl);
  background: var(--k-surface);
  text-align: center;
}
.k-upload.is-dragover { border-color: var(--k-blue); background: var(--k-blue-050); }
.k-upload__icon { width: 32px; height: 32px; color: var(--k-text-subtle); }
.k-upload__text { margin: 0; font-size: var(--k-fs-16);
                  font-weight: var(--k-fw-semibold); color: var(--k-text-strong); }
.k-upload__text .k-link { cursor: pointer; }
.k-upload__hint { margin: 0; font-size: var(--k-fs-14); color: var(--k-text-muted); }
/* Datei-Liste unter der Dropzone */
.k-files { display: flex; flex-direction: column; gap: var(--k-space-3);
           margin: 0; padding: 0; list-style: none; }
.k-file {
  display: flex; align-items: center; gap: var(--k-space-3);
  padding: var(--k-space-3) var(--k-space-4);
  border: var(--k-border-width) solid var(--k-border);
  border-radius: var(--k-radius-lg);
}
.k-file__icon { width: 20px; height: 20px; color: var(--k-text-muted); flex: 0 0 auto; }
.k-file__main { flex: 1 1 auto; min-width: 0; }
.k-file__name { margin: 0; font-size: var(--k-fs-15); font-weight: var(--k-fw-semibold);
                color: var(--k-text-strong); overflow: hidden; text-overflow: ellipsis;
                white-space: nowrap; }
.k-file__meta { margin: var(--k-space-1) 0 0; font-size: var(--k-fs-13);
                color: var(--k-text-muted); }
.k-file--error { border-color: var(--k-danger); }
.k-file--error .k-file__meta { color: var(--k-danger); }
/* Fortschrittsbalken */
.k-progress { height: 6px; margin-top: var(--k-space-2);
              border-radius: var(--k-radius-pill);
              background: var(--k-surface-sunken); overflow: hidden; }
.k-progress__bar { height: 100%; border-radius: var(--k-radius-pill);
                   background: var(--k-blue); }

/* ------------------------------------------------ Timeline / Aktivität */
.k-timeline { margin: 0; padding: 0; list-style: none; }
.k-timeline__item { position: relative; padding: 0 0 var(--k-space-6) var(--k-space-7); }
.k-timeline__item::before {
  content: ""; position: absolute; left: 5px; top: 18px; bottom: 0;
  width: 2px; background: var(--k-border);
}
.k-timeline__item:last-child { padding-bottom: 0; }
.k-timeline__item:last-child::before { display: none; }
.k-timeline__dot {
  position: absolute; left: 0; top: 5px;
  width: 12px; height: 12px;
  border-radius: var(--k-radius-pill);
  background: var(--k-blue);
}
.k-timeline__dot--success { background: var(--k-success); }
.k-timeline__dot--danger  { background: var(--k-danger); }
.k-timeline__dot--neutral { background: var(--k-border-strong); }
.k-timeline__meta { margin: 0; font-size: var(--k-fs-13); color: var(--k-text-subtle); }
.k-timeline__title { margin: var(--k-space-1) 0 0; font-size: var(--k-fs-15);
                     font-weight: var(--k-fw-bold); color: var(--k-text-strong); }
.k-timeline__body { margin: var(--k-space-1) 0 0; font-size: var(--k-fs-15);
                    color: var(--k-text-muted); line-height: var(--k-lh-relaxed); }

/* ------------------------------------------------------- Utilities */
.k-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;
}
.k-swatch { height: 72px; border-radius: var(--k-radius-md);
            border: var(--k-border-width) solid var(--k-border); }
.k-demo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
               gap: var(--k-space-4); }
.k-section { padding-block: var(--k-space-8);
             border-top: var(--k-border-width) solid var(--k-border); }
.k-section:first-of-type { border-top: 0; padding-top: 0; }
.k-section__title { margin: 0 0 var(--k-space-6); font-size: var(--k-fs-24);
                    font-weight: var(--k-fw-bold); color: var(--k-text-strong); }
.k-section__sub { margin: 0 0 var(--k-space-4); }

/* ------------------------------------------------------- Dark-Mode */
/* Im Dunkel-Modus das weiße Logo-Asset verwenden (Regel aus DESIGN.md 2). */
:root[data-theme="dark"] .k-brand__logo,
:root[data-theme="dark"] .k-footer__logo {
  content: url("../assets/logo_white.png");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .k-brand__logo,
  :root:not([data-theme="light"]) .k-footer__logo {
    content: url("../assets/logo_white.png");
  }
}