/* kla.ng Designsystem: Grundstil der Komponenten (docs/konzept.md, „Komponenten“). Referenz für jede Umsetzung –
   React-Apps bauen eigene Komponenten, die genau so aussehen; die Website und schlichte Seiten nutzen diese Klassen.
   Nur Tokens, keine Rohwerte. */

/* Knopf: Primär gefüllt im Akzent, Sekundär grau gefüllt, Leise ohne Fläche. Druck gibt federnd nach. */
.kla-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--kla-space-8);
  min-height: var(--kla-tap); padding: 0 var(--kla-space-16);
  border: 0; border-radius: var(--kla-radius-md);
  background: var(--kla-color-accent); color: var(--kla-color-on-accent);
  font-weight: var(--kla-weight-medium); font-size: var(--kla-text-sub); line-height: 1;
  box-shadow: var(--kla-shadow-btn); cursor: pointer; text-decoration: none;
  transition: transform var(--kla-dur-slow) var(--kla-ease-bounce), background var(--kla-dur-fast) var(--kla-ease-out);
}
.kla-btn:hover { background: var(--kla-color-accent-hover); }
.kla-btn:active { transform: scale(.96); transition-duration: var(--kla-dur-press); }
.kla-btn:disabled { opacity: .45; cursor: default; transform: none; }
.kla-btn--secondary { background: var(--kla-color-fill); color: var(--kla-color-fg); box-shadow: none; }
.kla-btn--secondary:hover { background: var(--kla-color-fill-2); }
.kla-btn--quiet { background: transparent; color: var(--kla-color-link); box-shadow: none; }
.kla-btn--quiet:hover { background: var(--kla-color-fill); }
.kla-btn--danger { background: var(--kla-color-err); color: #FFFFFF; }
.kla-btn--danger:hover { background: var(--kla-color-err-ink); }
.kla-btn--small { min-height: 32px; padding: 0 var(--kla-space-12); font-size: var(--kla-text-meta); border-radius: var(--kla-radius-sm); }
.kla-btn[aria-busy="true"]::before {
  content: ""; width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: kla-spin .7s linear infinite;
}
@keyframes kla-spin { to { transform: rotate(1turn); } }

/* Feld: grau gefüllt, ohne Rand; Beschriftung klein darüber; 16 px, sonst zoomt iOS hinein */
.kla-label { display: block; font-size: var(--kla-text-tiny); color: var(--kla-color-muted); font-weight: var(--kla-weight-medium); margin-bottom: var(--kla-space-6); }
.kla-field {
  display: block; width: 100%; min-height: var(--kla-tap); padding: var(--kla-space-12) var(--kla-space-12);
  border: 0; border-radius: var(--kla-radius-md); background: var(--kla-color-fill);
  font-size: var(--kla-text-body); color: var(--kla-color-fg);
  transition: box-shadow var(--kla-dur-fast) var(--kla-ease-out), background var(--kla-dur-fast);
}
.kla-field::placeholder { color: var(--kla-color-faint); }
.kla-field:focus { outline: none; background: var(--kla-color-panel); box-shadow: 0 0 0 var(--kla-focus) var(--kla-color-accent); }
.kla-field[aria-invalid="true"] { box-shadow: 0 0 0 var(--kla-focus) var(--kla-color-err); }
.kla-hint { font-size: var(--kla-text-tiny); color: var(--kla-color-faint); margin-top: var(--kla-space-6); }
.kla-hint--err { color: var(--kla-color-err-ink); }

/* Chip: Filter und Auswahl; gewählt = Hauch Akzent */
.kla-chip {
  display: inline-flex; align-items: center; gap: var(--kla-space-6); min-height: 32px; padding: 0 var(--kla-space-12);
  border: 0; border-radius: var(--kla-radius-full); background: var(--kla-color-fill); color: var(--kla-color-fg);
  font-size: var(--kla-text-meta); font-weight: var(--kla-weight-medium); cursor: pointer;
  transition: transform var(--kla-dur-slow) var(--kla-ease-bounce), background var(--kla-dur-fast);
}
.kla-chip:active { transform: scale(.95); transition-duration: var(--kla-dur-press); }
.kla-chip[aria-pressed="true"] { background: var(--kla-color-tint); color: var(--kla-color-link); }

/* Plakette: Status mit Punkt; Farbe trägt immer Bedeutung */
.kla-badge {
  display: inline-flex; align-items: center; gap: var(--kla-space-6); padding: var(--kla-space-2) var(--kla-space-8);
  border-radius: var(--kla-radius-sm); font-size: var(--kla-text-tiny); font-weight: var(--kla-weight-medium);
  background: var(--kla-color-fill); color: var(--kla-color-muted);
}
.kla-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.kla-badge--ok { background: var(--kla-color-ok-bg); color: var(--kla-color-ok-ink); }
.kla-badge--busy { background: var(--kla-color-busy-bg); color: var(--kla-color-busy-ink); }
.kla-badge--wait { background: var(--kla-color-wait-bg); color: var(--kla-color-wait-ink); }
.kla-badge--err { background: var(--kla-color-err-bg); color: var(--kla-color-err-ink); }

/* Karte: nur, wo etwas herausragen soll. Ordnung entsteht sonst aus Abstand und feinen Linien */
.kla-card {
  background: var(--kla-color-panel); border-radius: var(--kla-radius-xl); padding: var(--kla-space-16);
  box-shadow: var(--kla-shadow-raised);
}

/* Abschnittskopf: klein, Versal, leise */
.kla-section {
  font-size: var(--kla-text-tiny); font-weight: var(--kla-weight-medium); color: var(--kla-color-faint);
  text-transform: uppercase; letter-spacing: var(--kla-tracking-caps); margin: var(--kla-space-24) 0 var(--kla-space-8);
}

/* Liste: Zeilen mit Symbol, Titel, Detail, rechts Wert oder Pfeil; Trennlinie eingerückt */
.kla-list { list-style: none; margin: 0; padding: 0; background: var(--kla-color-panel); border-radius: var(--kla-radius-xl); overflow: hidden; }
.kla-row {
  display: flex; align-items: center; gap: var(--kla-space-12); min-height: var(--kla-tap);
  padding: var(--kla-space-8) var(--kla-space-16); position: relative; color: inherit; text-decoration: none;
  transition: background var(--kla-dur-fast);
}
.kla-row + .kla-row::before { content: ""; position: absolute; top: 0; left: 52px; right: 0; border-top: 1px solid var(--kla-color-line); }
.kla-row:is(a, button):hover { background: var(--kla-color-fill); }
.kla-row[aria-current="true"] { background: var(--kla-color-tint); }
.kla-row__icon {
  flex: none; width: 28px; height: 28px; border-radius: var(--kla-radius-md); display: grid; place-items: center;
  background: var(--kla-color-fill); color: var(--kla-color-accent);
}
.kla-row__main { flex: 1; min-width: 0; }
.kla-row__title { font-size: var(--kla-text-body); }
.kla-row__detail { font-size: var(--kla-text-meta); color: var(--kla-color-muted); }
.kla-row__end { color: var(--kla-color-faint); font-size: var(--kla-text-meta); }

/* Segmente: zwei bis vier gleichrangige Ansichten */
.kla-seg { display: inline-flex; padding: 2px; border-radius: var(--kla-radius-md); background: var(--kla-color-fill); }
.kla-seg button {
  border: 0; background: transparent; min-height: 32px; padding: 0 var(--kla-space-12); border-radius: var(--kla-radius-sm);
  font-size: var(--kla-text-meta); font-weight: var(--kla-weight-medium); color: var(--kla-color-muted); cursor: pointer;
}
.kla-seg button[aria-pressed="true"] { background: var(--kla-color-panel); color: var(--kla-color-fg); box-shadow: var(--kla-shadow-btn); }

/* Schalter: role="switch" auf einem button, rechts in der Zeile */
.kla-switch {
  flex: none; width: 51px; height: 31px; border: 0; padding: 2px; border-radius: var(--kla-radius-full);
  background: var(--kla-color-fill-2); cursor: pointer; transition: background var(--kla-dur-base) var(--kla-ease-out);
}
.kla-switch::after {
  content: ""; display: block; width: 27px; height: 27px; border-radius: 50%; background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .22); transition: transform var(--kla-dur-slow) var(--kla-ease-bounce);
}
.kla-switch[aria-checked="true"] { background: var(--kla-color-accent); }
.kla-switch[aria-checked="true"]::after { transform: translateX(20px); }

/* Meldung: schwebt unten, kurz, mit einer Aktion */
.kla-toast {
  display: flex; align-items: center; gap: var(--kla-space-12); padding: var(--kla-space-12) var(--kla-space-16);
  border-radius: var(--kla-radius-xl); background: var(--kla-color-panel); box-shadow: var(--kla-shadow-pop);
  font-size: var(--kla-text-sub);
}
.kla-toast .kla-btn--quiet { margin-left: auto; min-height: 32px; }

/* Blatt: Dialog, der von unten (Handy) oder mittig (Rechner) kommt */
.kla-sheet {
  background: var(--kla-color-panel); border-radius: var(--kla-radius-2xl); box-shadow: var(--kla-shadow-sheet);
  padding: var(--kla-space-24);
}

/* Skelett: Listen zeigen Form statt Leere */
.kla-skeleton { border-radius: var(--kla-radius-sm); background: var(--kla-color-fill); animation: kla-pulse 1.4s var(--kla-ease-out) infinite; }
@keyframes kla-pulse { 50% { opacity: .55; } }

/* Ergänzungen für die React-Grundformen (react/index.tsx) und schlichte Seiten */
.kla-symbol { width: 1.25em; height: 1.25em; flex: none; }
.kla-btn .kla-symbol { width: 1.1em; height: 1.1em; }
.kla-list > li { list-style: none; }
.kla-list > li + li > .kla-row::before { content: ""; position: absolute; top: 0; left: 52px; right: 0; border-top: 1px solid var(--kla-color-line); }
button.kla-row { width: 100%; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.kla-row__title, .kla-row__detail { display: block; }
.kla-row__icon .kla-symbol { width: 16px; height: 16px; }
.kla-row__end { display: inline-flex; align-items: center; }
.kla-sheet { display: grid; gap: var(--kla-space-16); }
.kla-sheet__actions { display: flex; flex-wrap: wrap; gap: var(--kla-space-8); justify-content: flex-end; }
.kla-skeleton-group { display: grid; gap: var(--kla-space-8); }
.kla-skeleton-group .kla-skeleton { height: 12px; }
.kla-skeleton-group .kla-skeleton:first-child { width: 60%; height: 14px; }
.kla-skeleton-group .kla-skeleton:last-child:not(:first-child) { width: 40%; }