/* ==========================================================================
   Kreidekasten · components.css
   Benötigt tokens.css davor. Alle Werte kommen aus Tokens.
   Klassen: kk-<komponente>, kk-<komponente>__<teil>, kk-<komponente>--<variante>.
   Zustände über echte Attribute: :checked, :disabled, aria-current,
   aria-selected, aria-pressed, aria-invalid. Kein Inline-Style nötig.

   Inhalt
     1  Grundlage (base)          8  Hinweise, Bestätigung, Laden
     2  Raster (layout)           9  Schrittleiste
     3  Flächen, Kopf, Fuß       10  Bausteinliste, Diktat
     4  Text                     11  Seitenleiste „Dein Auftrag“
     5  Knöpfe                   12  Fortschritt, Ergebnis, Blatt
     6  Formularfelder           13  Start, Tabelle, Rückmeldung
     7  Auswahl: Karten, Pillen, 14  Niveaus (Sterne), Abzeichen
        Schalter, Zähler, Liste  15  Hilfsklassen, Druck
   ========================================================================== */

/* 1  Grundlage ============================================================= */
@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    font-size: 100%; /* respektiert die Schriftgröße des Browsers */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background: var(--kk-bg);
  }

  body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--kk-bg);
    color: var(--kk-ink);
    font-family: var(--kk-font-sans);
    font-size: var(--kk-fs-md);
    line-height: var(--kk-lh-text);
  }

  h1,
  h2,
  h3,
  h4 {
    margin: 0;
    font-weight: var(--kk-fw-bold);
    line-height: var(--kk-lh-tight);
    text-wrap: balance;
  }

  h1 { font-size: var(--kk-fs-2xl); }
  h2 { font-size: var(--kk-fs-xl); }
  h3 { font-size: var(--kk-fs-lg); }
  h4 { font-size: var(--kk-fs-md); }

  p,
  figure,
  dl,
  dd,
  blockquote {
    margin: 0;
  }

  a {
    color: var(--kk-link);
    text-decoration-color: var(--kk-link-line);
    text-decoration-thickness: var(--kk-line-thin);
    text-underline-offset: 0.22em;
  }

  a:hover {
    text-decoration-thickness: var(--kk-line-bold);
  }

  :focus-visible {
    outline: var(--kk-focus-width) solid var(--kk-focus);
    outline-offset: var(--kk-focus-offset);
  }

  main:focus {
    outline: none; /* Sprungziel des Skip-Links */
  }

  img,
  svg {
    max-width: 100%;
  }

  img {
    display: block;
    height: auto;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }

  fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
  }

  legend {
    padding: 0;
  }

  ::selection {
    background: var(--kk-selection-bg);
    color: var(--kk-selection-ink);
  }
}

/* 2  Raster ================================================================ */
@layer layout {
  .kk-container {
    width: 100%;
    max-width: var(--kk-width-page);
    margin-inline: auto;
    padding-inline: var(--kk-gutter);
  }

  .kk-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-7);
    padding-block: var(--kk-space-6) var(--kk-space-8);
  }

  /* Stapel: Kinder untereinander mit gleichem Abstand */
  .kk-stack {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-4);
  }

  .kk-stack--xs { gap: var(--kk-space-1); }
  .kk-stack--sm { gap: var(--kk-space-2); }
  .kk-stack--lg { gap: var(--kk-space-5); }
  .kk-stack--xl { gap: var(--kk-space-6); }

  /* Reihe: nebeneinander, bricht um */
  .kk-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-3);
  }

  .kk-cluster--sm { gap: var(--kk-space-2); }
  .kk-cluster--lg { gap: var(--kk-space-4) var(--kk-space-6); }
  .kk-cluster--between { justify-content: space-between; }
  .kk-cluster--end { justify-content: flex-end; }
  .kk-cluster--top { align-items: flex-start; }

  /* Formular + Seitenleiste: daneben ab ~960 px, sonst darunter */
  .kk-split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--kk-space-6);
  }

  .kk-split__main {
    flex: 999 1 var(--kk-width-main-min);
    min-width: 0;
  }

  .kk-split__aside {
    flex: 1 1 var(--kk-width-aside);
    min-width: 0;
  }

  @media (min-width: 60em) {
    .kk-split__aside {
      position: sticky;
      top: var(--kk-space-4);
    }
  }

  /* Felder nebeneinander (ersetzt flex-Angaben im Prototyp) */
  .kk-fieldrow {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-4);
  }

  .kk-fieldrow > * {
    flex: 1 1 12rem;
    min-width: 0;
  }

  .kk-fieldrow > .kk-field--narrow {
    flex: 0 1 8rem;
  }

  .kk-fieldrow > .kk-field--wide {
    flex: 2 1 16rem;
  }

  .kk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--kk-width-card-min)), 1fr));
    gap: var(--kk-space-5);
  }
}

@layer components {
  /* 3  Flächen, Kopf, Fuß ================================================== */

  /* Papier: Arbeitsfläche, dunkel auf hell */
  .kk-paper {
    background: var(--kk-bg);
    color: var(--kk-ink);
    border-radius: var(--kk-radius);
    padding: var(--kk-pad-paper);
  }

  .kk-paper--tight {
    padding: var(--kk-space-4);
  }

  /* Abschnitt innerhalb einer Fläche, mit Linie zum vorigen */
  .kk-section {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-4);
  }

  .kk-section + .kk-section {
    padding-top: var(--kk-space-5);
    border-top: var(--kk-line-thin) solid var(--kk-line);
  }

  /* Eingerückter Zusatzbereich (z. B. „Andere Lerngruppe“) */
  .kk-subpanel {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
    padding: var(--kk-space-4);
    border: var(--kk-line-thin) dashed var(--kk-line-strong);
    border-radius: var(--kk-radius);
  }

  /* Kasten mit Linie (Nachbessern, Als Standard merken, Standards) */
  .kk-box {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
    padding: var(--kk-space-4) var(--kk-space-5);
    border: var(--kk-line-thin) solid var(--kk-line);
    border-radius: var(--kk-radius);
  }

  .kk-box--tinted {
    background: var(--kk-sel);
    border-color: transparent;
  }

  .kk-skip {
    position: absolute;
    left: var(--kk-space-2);
    top: -5rem;
    z-index: var(--kk-z-skip);
    padding: var(--kk-space-2) var(--kk-space-4);
    background: var(--kk-skip-bg);
    color: var(--kk-skip-ink);
    border: var(--kk-line-bold) solid var(--kk-skip-ink);
    border-radius: var(--kk-radius);
    font-weight: var(--kk-fw-bold);
  }

  .kk-skip:focus {
    top: var(--kk-space-2);
  }

  /* Kopfleiste: immer Tafel, darunter die gelbe Doppellinie der Klapptafel */
  .kk-header {
    background: var(--kk-bg);
    color: var(--kk-ink);
  }

  .kk-header::after {
    content: "";
    display: block;
    height: 5px;
    border-block: var(--kk-line-thin) solid var(--kk-raster);
    opacity: 0.75;
  }

  .kk-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-2) var(--kk-space-6);
    padding-block: var(--kk-space-3);
  }

  .kk-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-2);
    color: var(--kk-ink);
    font-size: var(--kk-fs-xl);
    font-weight: var(--kk-fw-bold);
    line-height: 1;
    text-decoration: none;
  }

  .kk-brand:hover {
    text-decoration: underline;
    text-decoration-color: var(--kk-mark-line);
  }

  .kk-nav {
    flex: 1 1 auto;
  }

  .kk-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--kk-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .kk-nav__link {
    display: inline-block;
    padding-block: var(--kk-space-2) calc(var(--kk-space-2) - var(--kk-line-mark));
    border-bottom: var(--kk-line-mark) solid transparent;
    color: var(--kk-ink);
    text-decoration: none;
    transition: border-color var(--kk-duration) var(--kk-ease);
  }

  .kk-nav__link:hover {
    border-bottom-color: var(--kk-line-strong);
  }

  .kk-nav__link[aria-current="page"] {
    font-weight: var(--kk-fw-bold);
    border-bottom-color: var(--kk-mark-line);
  }

  .kk-credit {
    color: var(--kk-muted);
    font-size: var(--kk-fs-sm);
    text-decoration: none;
  }

  .kk-credit__value {
    color: var(--kk-ink);
    font-variant-numeric: tabular-nums;
    font-size: var(--kk-fs-md);
  }

  .kk-credit:hover .kk-credit__value {
    text-decoration: underline;
    text-decoration-color: var(--kk-link-line);
  }

  .kk-footer {
    padding-block: var(--kk-space-4);
    border-top: var(--kk-line-thin) solid var(--kk-line);
    color: var(--kk-muted);
    font-size: var(--kk-fs-sm);
  }

  /* 4  Text ================================================================ */
  .kk-overline {
    color: var(--kk-muted);
    font-size: var(--kk-fs-xs);
    letter-spacing: var(--kk-tracking-caps);
    text-transform: uppercase;
  }

  .kk-pagehead {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
  }

  .kk-lead {
    max-width: var(--kk-measure);
    color: var(--kk-muted);
  }

  .kk-prose {
    max-width: var(--kk-measure);
  }

  .kk-prose > * + * {
    margin-top: var(--kk-space-4);
  }

  .kk-icon {
    flex: none;
    width: var(--kk-icon);
    height: var(--kk-icon);
  }

  .kk-icon--sm {
    width: var(--kk-icon-sm);
    height: var(--kk-icon-sm);
  }

  /* 5  Knöpfe ============================================================== */
  .kk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kk-space-2);
    min-height: var(--kk-target);
    padding: var(--kk-space-2) var(--kk-space-5);
    border: var(--kk-line-thin) solid var(--kk-line-strong);
    border-radius: var(--kk-radius);
    background: var(--kk-btn-bg);
    color: var(--kk-ink);
    font-weight: var(--kk-fw-bold);
    line-height: var(--kk-lh-tight);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
      background-color var(--kk-duration) var(--kk-ease),
      border-color var(--kk-duration) var(--kk-ease),
      color var(--kk-duration) var(--kk-ease);
  }

  .kk-btn:not(:disabled, [aria-disabled="true"]):hover {
    background: var(--kk-sel);
    border-color: var(--kk-ink);
  }

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

  .kk-btn--primary:not(:disabled, [aria-disabled="true"]):hover {
    background: var(--kk-accent-hover);
    border-color: var(--kk-accent-hover);
  }

  /* Textknopf: sieht aus wie ein Link (Nachbessern, ändern) */
  .kk-btn--quiet {
    padding-inline: var(--kk-space-2);
    border-color: transparent;
    background: transparent;
    color: var(--kk-link);
    text-decoration: underline;
    text-decoration-color: var(--kk-link-line);
    text-underline-offset: 0.22em;
  }

  .kk-btn--quiet:not(:disabled, [aria-disabled="true"]):hover {
    border-color: transparent;
  }

  /* Hinzufügen (+ Baustein, + Lerngruppe) */
  .kk-btn--add {
    border-style: dashed;
    background: transparent;
  }

  .kk-btn--small {
    min-height: var(--kk-target-sm);
    padding: var(--kk-space-1) var(--kk-space-3);
    font-size: var(--kk-fs-sm);
  }

  .kk-btn--large {
    padding: var(--kk-space-4) var(--kk-space-6);
    font-size: var(--kk-fs-lg);
  }

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

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

  .kk-icon-btn {
    display: inline-grid;
    place-items: center;
    width: var(--kk-target);
    height: var(--kk-target);
    padding: 0;
    border: var(--kk-line-thin) solid var(--kk-line);
    border-radius: var(--kk-radius);
    background: var(--kk-btn-bg);
    color: var(--kk-ink);
    cursor: pointer;
    transition:
      background-color var(--kk-duration) var(--kk-ease),
      border-color var(--kk-duration) var(--kk-ease);
  }

  .kk-icon-btn:not(:disabled):hover {
    background: var(--kk-sel);
    border-color: var(--kk-line-strong);
  }

  .kk-icon-btn:disabled {
    border-color: transparent;
    background: transparent;
    cursor: default;
    opacity: 0.35;
  }

  .kk-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--kk-space-3);
    padding-top: var(--kk-space-5);
    border-top: var(--kk-line-thin) solid var(--kk-line);
  }

  .kk-actions--end {
    justify-content: flex-end;
  }

  /* 6  Formularfelder ===================================================== */
  .kk-field {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
    min-width: 0;
  }

  .kk-label {
    font-weight: var(--kk-fw-bold);
  }

  legend.kk-label {
    margin-bottom: var(--kk-space-2);
  }

  .kk-label__extra {
    font-weight: var(--kk-fw-regular);
    color: var(--kk-muted);
  }

  .kk-hint {
    color: var(--kk-muted);
    font-size: var(--kk-fs-sm);
  }

  .kk-input,
  .kk-select,
  .kk-textarea {
    width: 100%;
    min-height: var(--kk-target);
    padding: var(--kk-space-2) var(--kk-space-3);
    border: var(--kk-line-thin) solid var(--kk-line-strong);
    border-radius: var(--kk-radius);
    background-color: var(--kk-field);
    color: var(--kk-ink);
    line-height: var(--kk-lh-snug);
    transition: border-color var(--kk-duration) var(--kk-ease);
  }

  .kk-input:not(:disabled):hover,
  .kk-select:not(:disabled):hover,
  .kk-textarea:not(:disabled):hover {
    border-color: var(--kk-ink);
  }

  .kk-input::placeholder,
  .kk-textarea::placeholder {
    color: var(--kk-muted);
    opacity: 1;
  }

  .kk-input:focus-visible,
  .kk-select:focus-visible,
  .kk-textarea:focus-visible {
    outline-offset: 1px;
  }

  .kk-input--strong {
    font-weight: var(--kk-fw-bold);
  }

  .kk-input--mono {
    font-family: var(--kk-font-mono);
  }

  .kk-input--compact,
  .kk-select.kk-input--compact {
    min-height: var(--kk-target-sm);
    padding-block: var(--kk-space-1);
  }

  .kk-select {
    appearance: none;
    padding-right: calc(var(--kk-space-3) * 2 + var(--kk-icon));
    background-image: var(--kk-chevron);
    background-repeat: no-repeat;
    background-position: right var(--kk-space-3) center;
    background-size: var(--kk-icon-sm);
  }

  .kk-textarea {
    min-height: 8rem;
    line-height: var(--kk-lh-text);
    resize: vertical;
  }

  .kk-textarea--short {
    min-height: 5.5rem;
  }

  /* Fehlerzustand: aria-invalid="true" plus Meldung mit aria-describedby */
  .kk-input[aria-invalid="true"],
  .kk-select[aria-invalid="true"],
  .kk-textarea[aria-invalid="true"] {
    border-color: var(--kk-err);
    box-shadow: inset 0 0 0 var(--kk-line-thin) var(--kk-err);
  }

  .kk-field__error {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
    color: var(--kk-err);
    font-size: var(--kk-fs-sm);
    font-weight: var(--kk-fw-bold);
  }

  .kk-input:disabled,
  .kk-select:disabled,
  .kk-textarea:disabled {
    background-color: var(--kk-sel);
    cursor: not-allowed;
    opacity: 0.7;
  }

  .kk-charcount {
    color: var(--kk-muted);
    font-variant-numeric: tabular-nums;
    font-size: var(--kk-fs-sm);
    white-space: nowrap;
  }

  /* Einzelnes Häkchen mit längerem Text */
  .kk-check {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-3);
    cursor: pointer;
  }

  .kk-check__input {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0.22em 0 0;
    accent-color: var(--kk-accent);
  }

  /* Datei-Upload */
  .kk-upload {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-3);
    padding: var(--kk-space-4);
    border: var(--kk-line-thin) dashed var(--kk-line-strong);
    border-radius: var(--kk-radius);
    background: var(--kk-field);
  }

  .kk-upload:focus-within {
    border-color: var(--kk-focus);
  }

  .kk-upload__input {
    max-width: 100%;
    color: var(--kk-muted);
    font-size: var(--kk-fs-sm);
  }

  .kk-upload__input::file-selector-button {
    min-height: var(--kk-target-sm);
    margin-right: var(--kk-space-3);
    padding: var(--kk-space-1) var(--kk-space-4);
    border: var(--kk-line-thin) solid var(--kk-line-strong);
    border-radius: var(--kk-radius);
    background: var(--kk-bg);
    color: var(--kk-ink);
    font: inherit;
    font-weight: var(--kk-fw-bold);
    cursor: pointer;
  }

  .kk-upload__file {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-2);
  }

  .kk-upload__ok {
    color: var(--kk-ok);
  }

  /* 7  Auswahl ============================================================ */

  /* Auswahlkarten: echtes Radio sichtbar, die Karte zeigt Zustand und Fokus.
     Ohne :has() bleibt das Radio selbst als Anzeige. */
  .kk-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--kk-width-card-min)), 1fr));
    gap: var(--kk-space-3);
  }

  .kk-choices--inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
  }

  .kk-choice {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-3);
    padding: var(--kk-space-4);
    border: var(--kk-line-thin) solid var(--kk-line-strong);
    border-radius: var(--kk-radius);
    background: var(--kk-btn-bg);
    cursor: pointer;
    transition:
      background-color var(--kk-duration) var(--kk-ease),
      border-color var(--kk-duration) var(--kk-ease);
  }

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

  .kk-choice:has(:checked) {
    border-color: var(--kk-accent);
    background: var(--kk-sel);
    box-shadow: inset 0 0 0 var(--kk-line-thin) var(--kk-accent);
  }

  .kk-choice:has(:focus-visible) {
    outline: var(--kk-focus-width) solid var(--kk-focus);
    outline-offset: var(--kk-focus-offset);
  }

  .kk-choice:has(:disabled) {
    cursor: not-allowed;
    opacity: 0.55;
  }

  .kk-choice__input {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.15em 0 0;
    accent-color: var(--kk-accent);
  }

  @supports selector(:has(*)) {
    .kk-choice__input:focus-visible {
      outline: none;
    }
  }

  .kk-choice__body {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-1);
    min-width: 0;
  }

  .kk-choice__title {
    font-weight: var(--kk-fw-bold);
  }

  .kk-choice__desc {
    color: var(--kk-muted);
    font-size: var(--kk-fs-sm);
  }

  .kk-choice__meta {
    color: var(--kk-muted);
    font-size: var(--kk-fs-sm);
  }

  /* kleine Karte, z. B. Lerngruppen */
  .kk-choice--compact {
    align-items: center;
    padding: var(--kk-space-2) var(--kk-space-4) var(--kk-space-2) var(--kk-space-3);
  }

  .kk-choice--compact .kk-choice__input {
    margin: 0;
  }

  .kk-choice--compact .kk-choice__body {
    flex-direction: row;
    align-items: baseline;
    gap: var(--kk-space-2);
  }

  /* Häkchen als Pille (Vorwissen, Weiteres) */
  .kk-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
  }

  .kk-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-2);
    min-height: 2.5rem;
    padding: var(--kk-space-1) var(--kk-space-4) var(--kk-space-1) var(--kk-space-3);
    border: var(--kk-line-thin) solid var(--kk-line-strong);
    border-radius: var(--kk-radius-pill);
    background: var(--kk-btn-bg);
    cursor: pointer;
    transition:
      background-color var(--kk-duration) var(--kk-ease),
      border-color var(--kk-duration) var(--kk-ease);
  }

  .kk-pill:hover {
    border-color: var(--kk-ink);
  }

  .kk-pill:has(:checked) {
    border-color: var(--kk-accent);
    background: var(--kk-sel);
  }

  .kk-pill:has(:focus-visible) {
    outline: var(--kk-focus-width) solid var(--kk-focus);
    outline-offset: var(--kk-focus-offset);
  }

  .kk-pill__input {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    accent-color: var(--kk-accent);
  }

  @supports selector(:has(*)) {
    .kk-pill__input:focus-visible {
      outline: none;
    }
  }

  .kk-pill__meta {
    color: var(--kk-muted);
    font-size: var(--kk-fs-xs);
  }

  /* Segmentschalter: Radios unsichtbar über dem Text, Zustand am Text */
  .kk-segment {
    display: inline-flex;
    flex-wrap: wrap;
    max-width: 100%;
    border: var(--kk-line-thin) solid var(--kk-line-strong);
    border-radius: var(--kk-radius);
    background: var(--kk-btn-bg);
    overflow: hidden;
  }

  .kk-segment__option {
    position: relative;
    display: flex;
  }

  .kk-segment__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  .kk-segment__label {
    display: flex;
    align-items: center;
    min-height: var(--kk-target);
    padding: var(--kk-space-2) var(--kk-space-4);
    border-left: var(--kk-line-thin) solid var(--kk-line-strong);
    transition: background-color var(--kk-duration) var(--kk-ease);
  }

  .kk-segment__option:first-child .kk-segment__label {
    border-left: 0;
  }

  .kk-segment__input:not(:checked):hover + .kk-segment__label {
    background: var(--kk-sel);
  }

  .kk-segment__input:checked + .kk-segment__label {
    background: var(--kk-accent);
    color: var(--kk-on-accent);
    font-weight: var(--kk-fw-bold);
  }

  .kk-segment__input:focus-visible + .kk-segment__label {
    outline: var(--kk-focus-width) solid var(--kk-focus);
    outline-offset: calc(var(--kk-focus-width) * -1 - 2px);
  }

  .kk-segment__input:checked:focus-visible + .kk-segment__label {
    outline-color: var(--kk-on-accent);
  }

  /* Zähler (− 2 Seiten +) */
  .kk-counter {
    display: inline-flex;
    align-items: center;
    border: var(--kk-line-thin) solid var(--kk-line-strong);
    border-radius: var(--kk-radius);
    background: var(--kk-btn-bg);
  }

  .kk-counter__btn {
    width: var(--kk-target);
    height: var(--kk-target);
    padding: 0;
    border: 0;
    border-radius: var(--kk-radius);
    background: transparent;
    color: var(--kk-accent);
    font-size: var(--kk-fs-xl);
    line-height: 1;
    cursor: pointer;
  }

  .kk-counter__btn:not(:disabled):hover {
    background: var(--kk-sel);
  }

  .kk-counter__btn:disabled {
    cursor: default;
    opacity: 0.35;
  }

  .kk-counter__value {
    min-width: 6.5rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
  }

  /* Autovervollständigung (role=combobox + role=listbox) */
  .kk-combobox {
    position: relative;
  }

  .kk-listbox {
    position: absolute;
    top: calc(100% + var(--kk-space-1));
    left: 0;
    right: 0;
    z-index: var(--kk-z-popover);
    max-height: 20rem;
    margin: 0;
    padding: var(--kk-space-1);
    overflow: auto;
    list-style: none;
    border: var(--kk-line-thin) solid var(--kk-line-strong);
    border-radius: var(--kk-radius);
    background: var(--kk-field);
    box-shadow: var(--kk-shadow-overlay);
  }

  /* nur für Dokumentation: Liste im Fluss statt darüber */
  .kk-listbox--static {
    position: static;
    margin-top: var(--kk-space-1);
    box-shadow: none;
  }

  .kk-listbox__group {
    padding: var(--kk-space-2) var(--kk-space-3) var(--kk-space-1);
    color: var(--kk-muted);
    font-size: var(--kk-fs-xs);
    letter-spacing: var(--kk-tracking-caps);
    text-transform: uppercase;
    cursor: default;
  }

  .kk-listbox__option {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0 var(--kk-space-3);
    padding: var(--kk-space-2) var(--kk-space-3);
    border-radius: var(--kk-radius-sm);
    cursor: pointer;
  }

  .kk-listbox__option:hover {
    background: var(--kk-sel);
  }

  .kk-listbox__option[aria-selected="true"] {
    background: var(--kk-sel);
    outline: var(--kk-line-bold) solid var(--kk-focus);
    outline-offset: calc(var(--kk-line-bold) * -1);
  }

  .kk-listbox__meta {
    color: var(--kk-muted);
    font-size: var(--kk-fs-sm);
    white-space: nowrap;
  }

  .kk-listbox__empty {
    padding: var(--kk-space-2) var(--kk-space-3);
    color: var(--kk-muted);
  }

  /* 8  Hinweise, Bestätigung, Laden ======================================= */
  .kk-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-3);
    padding: var(--kk-space-3) var(--kk-space-4);
    border: var(--kk-line-thin) solid var(--kk-line-strong);
    border-radius: var(--kk-radius);
    background: var(--kk-info-soft);
  }

  .kk-notice__icon {
    flex: none;
    width: var(--kk-icon);
    height: var(--kk-icon);
    margin-top: 0.15em;
    color: var(--kk-accent);
  }

  .kk-notice__title {
    font-weight: var(--kk-fw-bold);
  }

  .kk-notice--ok {
    border-color: var(--kk-ok);
    background: var(--kk-ok-soft);
  }

  .kk-notice--warn {
    border-color: var(--kk-warn);
    background: var(--kk-warn-soft);
  }

  .kk-notice--error {
    border-color: var(--kk-err);
    background: var(--kk-err-soft);
  }

  .kk-notice--ok .kk-notice__icon,
  .kk-notice--ok .kk-notice__title { color: var(--kk-ok); }
  .kk-notice--warn .kk-notice__icon,
  .kk-notice--warn .kk-notice__title { color: var(--kk-warn); }
  .kk-notice--error .kk-notice__icon,
  .kk-notice--error .kk-notice__title { color: var(--kk-err); }

  /* Bestätigungsleiste („ersetzen / abbrechen“) */
  .kk-confirm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-3);
    padding: var(--kk-space-3) var(--kk-space-4);
    border: var(--kk-line-thin) solid var(--kk-warn);
    border-radius: var(--kk-radius);
    background: var(--kk-warn-soft);
  }

  .kk-confirm__text {
    flex: 1 1 15rem;
  }

  .kk-confirm__icon {
    flex: none;
    width: var(--kk-icon);
    height: var(--kk-icon);
    color: var(--kk-warn);
  }

  /* Ladezustand */
  .kk-loading {
    display: flex;
    align-items: center;
    gap: var(--kk-space-3);
    color: var(--kk-muted);
  }

  .kk-spinner {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    border: 3px solid var(--kk-line);
    border-top-color: var(--kk-accent);
    border-radius: 50%;
    animation: kk-spin 900ms linear infinite;
  }

  @keyframes kk-spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* 9  Schrittleiste ====================================================== */
  .kk-steps {
    position: relative; /* hält versteckte Hilfstexte im Scrollbereich */
    overflow-x: auto;
  }

  .kk-steps__list {
    display: flex;
    gap: var(--kk-space-5);
    min-width: max-content;
    margin: 0;
    padding: 0 0 var(--kk-space-1);
    list-style: none;
  }

  .kk-step {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    padding-block: var(--kk-space-2) calc(var(--kk-space-2) - var(--kk-line-mark));
    border-bottom: var(--kk-line-mark) solid transparent;
    color: var(--kk-muted);
    text-decoration: none;
    transition: border-color var(--kk-duration) var(--kk-ease);
  }

  a.kk-step {
    color: var(--kk-ink);
  }

  a.kk-step:hover {
    border-bottom-color: var(--kk-line-strong);
  }

  .kk-step__num {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border: var(--kk-line-bold) solid var(--kk-line-strong);
    border-radius: 50%;
    font-variant-numeric: tabular-nums;
    font-size: var(--kk-fs-sm);
    line-height: 1;
  }

  .kk-step__tag {
    font-size: var(--kk-fs-xs);
    font-style: italic;
    color: var(--kk-muted);
  }

  .kk-step--done .kk-step__num {
    border-color: var(--kk-ok);
    color: var(--kk-ok);
  }

  a.kk-step--skipped {
    color: var(--kk-muted);
  }

  .kk-step--skipped .kk-step__num {
    border-style: dashed;
  }

  .kk-step[aria-current="step"] {
    border-bottom-color: var(--kk-mark-line);
    color: var(--kk-ink);
    font-weight: var(--kk-fw-bold);
  }

  .kk-step[aria-current="step"] .kk-step__num {
    border-color: var(--kk-mark);
    background: var(--kk-mark);
    color: var(--kk-on-mark);
  }

  /* 10  Bausteinliste, Diktat ============================================= */
  .kk-blocks {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--kk-line-thin) solid var(--kk-line);
  }

  .kk-block {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "letter fields tools";
    align-items: start;
    gap: var(--kk-space-3) var(--kk-space-4);
    padding-block: var(--kk-space-4);
    border-bottom: var(--kk-line-thin) solid var(--kk-line);
  }

  .kk-block__letter {
    grid-area: letter;
    width: 1.75rem;
    padding-top: var(--kk-space-2);
    color: var(--kk-accent);
    font-size: var(--kk-fs-xl);
    font-weight: var(--kk-fw-bold);
    line-height: 1;
  }

  .kk-block__fields {
    grid-area: fields;
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
    min-width: 0;
  }

  .kk-block__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
  }

  .kk-block__row > * {
    flex: 1 1 auto; /* Breite nach Inhalt, bricht um statt abzuschneiden */
    max-width: 100%;
  }

  .kk-block__share {
    color: var(--kk-muted);
    font-variant-numeric: tabular-nums;
    font-size: var(--kk-fs-sm);
  }

  .kk-block__tools {
    grid-area: tools;
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-1);
  }

  @media (max-width: 30em) {
    .kk-block {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        "letter tools"
        "fields fields";
    }

    .kk-block__tools {
      flex-direction: row;
    }
  }

  /* Textfeld mit Mikrofon */
  .kk-dictate {
    position: relative;
  }

  .kk-dictate .kk-textarea {
    padding-right: calc(var(--kk-target) + var(--kk-space-5));
  }

  .kk-mic {
    position: absolute;
    top: var(--kk-space-2);
    right: var(--kk-space-2);
    display: grid;
    place-items: center;
    width: var(--kk-target);
    height: var(--kk-target);
    padding: 0;
    border: var(--kk-line-thin) solid var(--kk-line-strong);
    border-radius: 50%;
    background: var(--kk-bg);
    color: var(--kk-accent);
    cursor: pointer;
    transition:
      background-color var(--kk-duration) var(--kk-ease),
      color var(--kk-duration) var(--kk-ease);
  }

  .kk-mic--inline {
    position: static;
  }

  .kk-mic:not(:disabled):hover {
    background: var(--kk-sel);
  }

  .kk-mic__stop {
    display: none;
  }

  /* Aufnahme läuft: JS setzt aria-pressed="true" */
  .kk-mic[aria-pressed="true"] {
    border-color: var(--kk-err);
    background: var(--kk-err);
    color: var(--kk-on-err);
    box-shadow: 0 0 0 4px var(--kk-err-soft);
  }

  .kk-mic[aria-pressed="true"] .kk-mic__stop {
    display: block;
  }

  .kk-mic[aria-pressed="true"] .kk-mic__rec {
    display: none;
  }

  .kk-mic:disabled {
    border-style: dashed;
    cursor: not-allowed;
    opacity: 0.5;
  }

  .kk-dictate__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--kk-space-1) var(--kk-space-3);
  }

  .kk-dictate__status {
    min-height: 1.5em;
    color: var(--kk-muted);
    font-size: var(--kk-fs-sm);
  }

  .kk-dictate__status--error {
    color: var(--kk-err);
    font-weight: var(--kk-fw-bold);
  }

  /* 11  Seitenleiste „Dein Auftrag“ ======================================= */
  .kk-order {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-4);
  }

  .kk-order__section {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
  }

  .kk-order__section + .kk-order__section {
    padding-top: var(--kk-space-4);
    border-top: var(--kk-line-thin) solid var(--kk-line);
  }

  .kk-order__title {
    font-size: var(--kk-fs-lg);
  }

  .kk-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--kk-space-1) var(--kk-space-4);
  }

  .kk-summary dt {
    color: var(--kk-muted);
  }

  .kk-summary dd {
    overflow-wrap: anywhere;
  }

  .kk-doclist {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .kk-doclist__item {
    display: flex;
    justify-content: space-between;
    gap: var(--kk-space-2);
  }

  .kk-doclist__pages {
    color: var(--kk-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .kk-estimate {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--kk-space-1) var(--kk-space-3);
  }

  .kk-estimate__value {
    font-variant-numeric: tabular-nums;
    font-size: var(--kk-fs-xl);
    white-space: nowrap;
  }

  .kk-estimate--over .kk-estimate__value {
    color: var(--kk-err);
  }

  /* 12  Fortschritt, Ergebnis, Blatt ====================================== */
  .kk-progress {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .kk-progress__item {
    display: flex;
    align-items: center;
    gap: var(--kk-space-3);
    color: var(--kk-muted);
  }

  .kk-progress__dot {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border: var(--kk-line-bold) solid var(--kk-line-strong);
    border-radius: 50%;
  }

  .kk-progress__item--done {
    color: var(--kk-ok);
  }

  .kk-progress__item--done .kk-progress__dot {
    border-color: var(--kk-ok);
    background: var(--kk-ok);
    color: var(--kk-on-ok);
  }

  .kk-progress__item[aria-current="step"] {
    color: var(--kk-ink);
    font-weight: var(--kk-fw-bold);
  }

  .kk-progress__item[aria-current="step"] .kk-progress__dot {
    border-width: 3px;
    border-color: var(--kk-line);
    border-top-color: var(--kk-accent);
    border-right-color: var(--kk-accent);
    animation: kk-spin 900ms linear infinite;
  }

  /* Fortschrittsbalken: natives <progress>, Wert per value-Attribut (CSP-sicher) */
  .kk-bar {
    appearance: none;
    display: block;
    width: 100%;
    height: 0.75rem;
    border: var(--kk-line-thin) solid var(--kk-line-strong);
    border-radius: var(--kk-radius-pill);
    background: var(--kk-field);
    color: var(--kk-accent);
    overflow: hidden;
  }

  .kk-bar::-webkit-progress-bar {
    background: var(--kk-field);
  }

  .kk-bar::-webkit-progress-value {
    background: var(--kk-accent);
  }

  .kk-bar::-moz-progress-bar {
    background: var(--kk-accent);
  }

  .kk-livecost {
    display: flex;
    justify-content: space-between;
    gap: var(--kk-space-3);
  }

  .kk-livecost__value {
    font-variant-numeric: tabular-nums;
  }

  .kk-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--kk-width-sheet-min)), 1fr));
    gap: var(--kk-space-5);
  }

  .kk-result {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-2);
  }

  .kk-result__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--kk-space-1) var(--kk-space-2);
    font-weight: var(--kk-fw-bold);
  }

  /* Blattvorschau: immer Papierweiß, auch auf der Tafel */
  .kk-sheet {
    display: block;
    width: 100%;
    aspect-ratio: 210 / 297;
    overflow: hidden;
    border: var(--kk-line-thin) solid var(--kk-line);
    border-radius: var(--kk-radius-sm);
    background: var(--kk-sheet-bg);
  }

  .kk-sheet img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .kk-sheet--pending {
    display: grid;
    place-items: center;
    border-style: dashed;
    border-color: var(--kk-line-strong);
    background: transparent;
    color: var(--kk-muted);
    font-size: var(--kk-fs-sm);
  }

  /* 13  Start, Tabelle, Rückmeldung ======================================= */
  .kk-start {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--kk-space-5) var(--kk-space-7);
  }

  .kk-start__main {
    flex: 2 1 22rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--kk-space-4);
  }

  .kk-start__side {
    flex: 1 1 14rem;
    padding-top: var(--kk-space-4);
    border-top: var(--kk-line-thin) solid var(--kk-line);
  }

  @media (min-width: 48em) {
    .kk-start__side {
      padding-top: 0;
      padding-left: var(--kk-space-5);
      border-top: 0;
      border-left: var(--kk-line-thin) solid var(--kk-line);
    }
  }

  .kk-stat {
    display: flex;
    flex-direction: column;
    gap: var(--kk-space-1);
  }

  .kk-stat__label,
  .kk-stat__meta {
    color: var(--kk-muted);
    font-size: var(--kk-fs-sm);
  }

  .kk-stat__value {
    font-variant-numeric: tabular-nums;
    font-size: var(--kk-fs-2xl);
    line-height: var(--kk-lh-tight);
  }

  .kk-recent {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--kk-line-thin) solid var(--kk-line);
  }

  .kk-recent__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-2) var(--kk-space-5);
    padding-block: var(--kk-space-3);
    border-bottom: var(--kk-line-thin) solid var(--kk-line);
  }

  .kk-recent__main {
    flex: 1 1 16rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .kk-recent__title {
    font-weight: var(--kk-fw-bold);
  }

  .kk-recent__meta {
    color: var(--kk-muted);
    font-size: var(--kk-fs-sm);
  }

  .kk-recent__levels {
    flex: 0 1 12rem;
    font-size: var(--kk-fs-sm);
  }

  .kk-recent__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-2);
  }

  .kk-table-wrap {
    position: relative;
    overflow-x: auto;
  }

  .kk-table {
    width: 100%;
    border-collapse: collapse;
  }

  .kk-table th {
    padding: var(--kk-space-2) var(--kk-space-3);
    border-bottom: var(--kk-line-thin) solid var(--kk-line-strong);
    color: var(--kk-muted);
    font-size: var(--kk-fs-xs);
    font-weight: var(--kk-fw-bold);
    letter-spacing: var(--kk-tracking-caps);
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .kk-table td {
    padding: var(--kk-space-2) var(--kk-space-3);
    border-bottom: var(--kk-line-thin) solid var(--kk-line);
    vertical-align: middle;
  }

  .kk-table th:first-child,
  .kk-table td:first-child {
    padding-left: 0;
  }

  .kk-table th:last-child,
  .kk-table td:last-child {
    padding-right: 0;
  }

  /* Kurze Rückmeldung unten („Gespeichert“), role="status" */
  .kk-toast {
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--kk-space-5));
    z-index: var(--kk-z-toast);
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    max-width: calc(100vw - 2 * var(--kk-gutter));
    padding: var(--kk-space-3) var(--kk-space-5);
    border-radius: var(--kk-radius);
    background: var(--kk-toast-bg);
    color: var(--kk-toast-ink);
    box-shadow: var(--kk-shadow-overlay);
    transform: translateX(-50%);
  }

  /* nur für Dokumentation: im Fluss statt unten fixiert */
  .kk-toast--static {
    position: static;
    transform: none;
    box-shadow: none;
  }

  /* Aufklappbereich (z. B. „Was an den Skill geht“) */
  .kk-details > summary {
    font-weight: var(--kk-fw-bold);
    cursor: pointer;
  }

  .kk-code {
    max-height: 22rem;
    margin: var(--kk-space-3) 0 0;
    padding: var(--kk-space-3);
    overflow: auto;
    border: var(--kk-line-thin) solid var(--kk-line);
    border-radius: var(--kk-radius);
    background: var(--kk-field);
    font-family: var(--kk-font-mono);
    font-size: var(--kk-fs-sm);
    line-height: var(--kk-lh-snug);
  }

  /* 14  Niveaus (Sterne), Abzeichen ======================================= */
  /* Sterne als SVG: Anzahl trägt die Bedeutung, Farbe nur zusätzlich.
     <span class="kk-level" role="img" aria-label="Niveau 2"> + 2 × <svg class="kk-level__star"> */
  .kk-level {
    display: inline-flex;
    align-items: center;
    gap: 0.06em;
    color: var(--kk-star);
    vertical-align: -0.08em;
    white-space: nowrap;
  }

  .kk-level__star {
    width: 0.95em;
    height: 0.95em;
    fill: currentColor;
  }

  .kk-levels {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-1) var(--kk-space-3);
  }

  .kk-levels__item {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-1);
  }

  .kk-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-1);
    padding: 0 var(--kk-space-2);
    border: var(--kk-line-thin) solid currentColor;
    border-radius: var(--kk-radius-sm);
    color: var(--kk-muted);
    font-size: var(--kk-fs-xs);
    font-weight: var(--kk-fw-bold);
    line-height: 1.6;
    white-space: nowrap;
    vertical-align: 0.1em;
  }

  .kk-badge--ok {
    background: var(--kk-ok-soft);
    color: var(--kk-ok);
  }

  .kk-badge--warn {
    background: var(--kk-warn-soft);
    color: var(--kk-warn);
  }

  .kk-badge--info {
    color: var(--kk-accent);
  }
}

/* 15  Hilfsklassen ========================================================= */
@layer utilities {
  /* steht im letzten Layer und schlägt damit jedes display der Komponenten */
  [hidden] {
    display: none;
  }

  .kk-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .kk-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .kk-tabular {
    font-variant-numeric: tabular-nums;
  }

  .kk-muted {
    color: var(--kk-muted);
  }

  .kk-small {
    font-size: var(--kk-fs-sm);
  }

  .kk-strong {
    font-weight: var(--kk-fw-bold);
  }

  .kk-nowrap {
    white-space: nowrap;
  }

  .kk-grow {
    flex: 1 1 auto;
  }

  .kk-self-start {
    align-self: flex-start;
  }

  @media (prefers-reduced-motion: reduce) {
    .kk-spinner,
    .kk-progress__item[aria-current="step"] .kk-progress__dot {
      animation: none;
    }
  }

  /* Druck ---------------------------------------------------------------- */
  @media print {
    body {
      font-size: 11pt;
    }

    .kk-skip,
    .kk-nav,
    .kk-credit,
    .kk-steps,
    .kk-btn,
    .kk-icon-btn,
    .kk-mic,
    .kk-toast,
    .kk-block__tools,
    .kk-header::after {
      display: none;
    }

    .kk-paper {
      padding: 0;
    }

    .kk-split__aside {
      position: static;
    }

    .kk-block,
    .kk-result,
    .kk-notice,
    .kk-recent__item,
    .kk-table tr {
      break-inside: avoid;
    }

    a[href^="http"]::after {
      content: " (" attr(href) ")";
      font-size: 9pt;
    }
  }
}