/*
 * paschel-konsole.css
 * erzeugt aus tokens.json, nicht von Hand ändern
 * (Komponententeil aus css/komponenten.css: dort ändern, dann das Skript ausführen)
 * Quelle: assets/tokens.json (Paschel ECM & KI, Version 1)
 * Erzeugt mit: uv run python scripts/tokens_nach_css.py
 */

/* === Token-Teil Anfang (erzeugt) === */

/* Schrift Inter (Datei im Paket, kein Abruf von außen) */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/InterVariable.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/InterVariable-Italic.woff2") format("woff2");
}

:root {
  /* Farben: Grundpalette und Rollen (helles Theme, Standard der Konsolen) */
  --pk-navy: #1F2A44;
  --pk-navy-raised: #243150;
  --pk-teal: #0F6B6F;
  --pk-light-teal: #5FB7BB;
  --pk-steel-grey: #6B7280;
  --pk-light-grey: #E5E7EB;
  --pk-white: #FFFFFF;
  --pk-copper: #B87333;
  --pk-surface: #FFFFFF;
  --pk-surface-raised: #E5E7EB;
  --pk-inverse-surface: #1F2A44;
  --pk-ink: #1F2A44;
  --pk-ink-muted: #6B7280;
  --pk-accent: #0F6B6F;
  --pk-accent-line: #0F6B6F;
  --pk-grid-line: rgba(31,42,68,0.05);
  --pk-status-ok: #1F6B45;
  --pk-status-ok-bg: #E3F1E8;
  --pk-status-warn: #8A5A00;
  --pk-status-warn-bg: #FBF0D9;
  --pk-status-error: #A63A32;
  --pk-status-error-bg: #F8E4E2;
  --pk-on-status-error: #FFFFFF;
  --pk-status-info: #2C5A8C;
  --pk-status-info-bg: #E3ECF5;
  --pk-konfidenz-sicher: #1F6B45;
  --pk-konfidenz-mittel: #8A5A00;
  --pk-konfidenz-unsicher: #A63A32;
  --pk-border: #878D98;
  --pk-focus-ring: #0F6B6F;
  --pk-nav-active-bg: #E6F1F1;

  /* Farben: Rollen auf Navy (Navy-Fassung, z. B. Kopfleiste) */
  --pk-auf-navy-surface: #1F2A44;
  --pk-auf-navy-surface-raised: #243150;
  --pk-auf-navy-inverse-surface: #E5E7EB;
  --pk-auf-navy-ink: #FFFFFF;
  --pk-auf-navy-ink-muted: #E5E7EB;
  --pk-auf-navy-accent: #5FB7BB;
  --pk-auf-navy-accent-line: #0F6B6F;
  --pk-auf-navy-grid-line: rgba(255,255,255,0.03);
  --pk-auf-navy-status-ok: #7CC79B;
  --pk-auf-navy-status-ok-bg: #1C3A36;
  --pk-auf-navy-status-warn: #E6BC63;
  --pk-auf-navy-status-warn-bg: #3A3528;
  --pk-auf-navy-status-error: #F29A90;
  --pk-auf-navy-status-error-bg: #46293A;
  --pk-auf-navy-on-status-error: #1F2A44;
  --pk-auf-navy-status-info: #93B7E3;
  --pk-auf-navy-status-info-bg: #243A5C;
  --pk-auf-navy-konfidenz-sicher: #7CC79B;
  --pk-auf-navy-konfidenz-mittel: #E6BC63;
  --pk-auf-navy-konfidenz-unsicher: #F29A90;
  --pk-auf-navy-border: #717E9A;
  --pk-auf-navy-focus-ring: #5FB7BB;
  --pk-auf-navy-nav-active-bg: #213A4E;

  /* Schrift */
  --pk-font-sans: Inter, "Source Sans 3", Montserrat, system-ui, sans-serif;
  /* Schriftstile: Marke */
  --pk-text-headline-size: 40px;
  --pk-text-headline-line-height: 48px;
  --pk-text-headline-weight: 600;
  --pk-text-zwischenzeile-size: 24px;
  --pk-text-zwischenzeile-line-height: 32px;
  --pk-text-zwischenzeile-weight: 500;
  --pk-text-text-size: 16px;
  --pk-text-text-line-height: 24px;
  --pk-text-text-weight: 400;
  --pk-text-claim-size: 24px;
  --pk-text-claim-line-height: 32px;
  --pk-text-claim-weight: 300;
  /* Schriftstile: Social (1080 px breit) */
  --pk-text-slide-hook-size: 84px;
  --pk-text-slide-hook-line-height: 1.1;
  --pk-text-slide-hook-weight: 600;
  --pk-text-slide-headline-size: 72px;
  --pk-text-slide-headline-line-height: 1.1;
  --pk-text-slide-headline-weight: 600;
  --pk-text-slide-text-size: 42px;
  --pk-text-slide-text-line-height: 1.35;
  --pk-text-slide-text-weight: 400;
  --pk-text-slide-eyebrow-size: 28px;
  --pk-text-slide-eyebrow-line-height: 1.2;
  --pk-text-slide-eyebrow-weight: 500;
  --pk-text-slide-claim-size: 48px;
  --pk-text-slide-claim-line-height: 1.3;
  --pk-text-slide-claim-weight: 300;
  --pk-text-slide-page-size: 26px;
  --pk-text-slide-page-line-height: 1.2;
  --pk-text-slide-page-weight: 500;
  /* Schriftstile: Anwendung */
  --pk-text-app-h1-size: 24px;
  --pk-text-app-h1-line-height: 32px;
  --pk-text-app-h1-weight: 600;
  --pk-text-app-h2-size: 18px;
  --pk-text-app-h2-line-height: 26px;
  --pk-text-app-h2-weight: 600;
  --pk-text-app-text-size: 14px;
  --pk-text-app-text-line-height: 20px;
  --pk-text-app-text-weight: 400;
  --pk-text-app-klein-size: 12px;
  --pk-text-app-klein-line-height: 16px;
  --pk-text-app-klein-weight: 400;
  --pk-text-app-tabelle-size: 13px;
  --pk-text-app-tabelle-line-height: 18px;
  --pk-text-app-tabelle-weight: 400;
  --pk-text-app-label-size: 13px;
  --pk-text-app-label-line-height: 18px;
  --pk-text-app-label-weight: 500;

  /* Abstände */
  --pk-space-1: 8px;
  --pk-space-2: 16px;
  --pk-space-3: 24px;
  --pk-space-4: 32px;
  --pk-space-6: 48px;
  --pk-space-raster: 72px;
  --pk-slide-margin: 110px;
  --pk-accent-line-width: 110px;
  --pk-app-header-height: 56px;
  --pk-app-nav-width: 240px;
  --pk-app-content-max: 1280px;

  /* Radien */
  --pk-radius-sm: 6px;
  --pk-radius-md: 12px;
  --pk-radius-pill: 60px;
}

/* === Token-Teil Ende === */

/* === Komponententeil Anfang (aus css/komponenten.css) === */

/*
 * Komponententeil von paschel-konsole.css (handgeschrieben).
 *
 * Regeln:
 * - Nur Token-Variablen (--pk-…) für Farben, Schrift, Abstände und Radien; keine Farbwerte
 *   (kein #, rgb, hsl, keine Farbnamen), keine Verläufe, keine Schatten, keine ID-Selektoren.
 * - Klassen mit Präfix pk-; Markup siehe templates/konsole/makros.html.
 * - Kontrast-Anmerkungen für scripts/kontrast_pruefen.py stehen als Kommentar in der Regel:
 *     kontrast: auf --pk-…  Hintergrund(e), auf denen die Regel steht (ohne eigenen Hintergrund)
 *     kontrast: gross       große Schrift (ab 24 px bzw. 18,66 px fett), Minimum 3:1
 *     kontrast: dekorativ   Linien ohne Bedeutung für die Bedienung (keine 3:1-Pflicht)
 *     kontrast: nur-flaeche Regel setzt nur eine Fläche; Textfarbe kommt aus einer geprüften Regel
 * - Nach jeder Änderung: uv run python scripts/tokens_nach_css.py
 *   und uv run python scripts/kontrast_pruefen.py
 */

/* ---------- Grundlagen ---------- */

.pk-seite,
.pk-seite *,
.pk-seite *::before,
.pk-seite *::after {
  box-sizing: border-box;
}

.pk-seite {
  margin: 0;
  min-height: 100vh;
  background-color: var(--pk-surface);
  color: var(--pk-ink);
  font-family: var(--pk-font-sans);
  font-size: var(--pk-text-app-text-size);
  line-height: var(--pk-text-app-text-line-height);
  font-weight: var(--pk-text-app-text-weight);
  -webkit-text-size-adjust: 100%;
}

.pk-seite :focus-visible {
  /* kontrast: auf --pk-surface --pk-surface-raised --pk-nav-active-bg */
  outline: 2px solid var(--pk-focus-ring);
  outline-offset: 2px;
}

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

/* ---------- Sprunglink ---------- */

.pk-sprunglink {
  /* kontrast: auf --pk-navy */
  position: absolute;
  top: calc(-1 * var(--pk-app-header-height) - var(--pk-space-2));
  left: var(--pk-space-2);
  z-index: 100;
  padding: var(--pk-space-1) var(--pk-space-2);
  background-color: var(--pk-surface);
  color: var(--pk-accent);
  border-radius: var(--pk-radius-sm);
  font-weight: 600;
  text-decoration: underline;
}

.pk-sprunglink:focus {
  top: var(--pk-space-1);
}

.pk-seite .pk-sprunglink:focus-visible {
  /* kontrast: auf --pk-navy */
  outline-color: var(--pk-auf-navy-focus-ring);
}

/* ---------- Kopfleiste (Navy) ---------- */

.pk-kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--pk-space-2);
  height: var(--pk-app-header-height);
  padding: 0 var(--pk-space-3);
  background-color: var(--pk-navy);
  color: var(--pk-auf-navy-ink);
}

.pk-seite .pk-kopf :focus-visible {
  /* kontrast: auf --pk-navy */
  outline-color: var(--pk-auf-navy-focus-ring);
}

.pk-kopf__marke {
  /* kontrast: auf --pk-navy */
  display: flex;
  align-items: center;
  gap: var(--pk-space-1);
  min-width: 0;
  color: var(--pk-auf-navy-ink);
  text-decoration: none;
}

.pk-kopf__bildmarke {
  flex: none;
  width: var(--pk-space-4);
  height: var(--pk-space-4);
}

.pk-kopf__name {
  overflow: hidden;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pk-kopf__zusatz {
  /* kontrast: auf --pk-navy */
  color: var(--pk-auf-navy-accent);
  white-space: nowrap;
}

.pk-kopf__benutzer {
  /* kontrast: auf --pk-navy */
  display: flex;
  align-items: center;
  gap: var(--pk-space-2);
  margin-left: auto;
  color: var(--pk-auf-navy-ink-muted);
  white-space: nowrap;
}

.pk-kopf__formular {
  margin: 0;
}

.pk-kopf__knopf {
  /* kontrast: auf --pk-navy */
  display: inline-flex;
  align-items: center;
  gap: var(--pk-space-1);
  padding: calc(var(--pk-space-1) / 2) var(--pk-space-1);
  background-color: transparent;
  color: var(--pk-auf-navy-accent);
  border: 1px solid var(--pk-auf-navy-border);
  border-radius: var(--pk-radius-sm);
  font-family: inherit;
  font-size: var(--pk-text-app-text-size);
  line-height: var(--pk-text-app-text-line-height);
  font-weight: 500;
  cursor: pointer;
}

.pk-kopf__knopf:hover {
  background-color: var(--pk-navy-raised);
  color: var(--pk-auf-navy-ink);
}

.pk-kopf__menue {
  display: none;
}

/* ---------- Rahmen: Navigation und Inhalt ---------- */

.pk-rahmen {
  display: grid;
  grid-template-columns: var(--pk-app-nav-width) minmax(0, 1fr);
  min-height: calc(100vh - var(--pk-app-header-height));
}

.pk-rahmen--ohne-nav {
  grid-template-columns: minmax(0, 1fr);
}

.pk-nav {
  /* kontrast: dekorativ */
  padding: var(--pk-space-2) 0;
  background-color: var(--pk-surface);
  color: var(--pk-ink);
  border-right: 1px solid var(--pk-light-grey);
}

.pk-nav__gruppe + .pk-nav__gruppe {
  margin-top: var(--pk-space-2);
}

.pk-nav__gruppentitel {
  /* kontrast: auf --pk-surface */
  margin: 0 var(--pk-space-2) var(--pk-space-1);
  color: var(--pk-ink-muted);
  font-size: var(--pk-text-app-klein-size);
  line-height: var(--pk-text-app-klein-line-height);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pk-nav__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pk-nav__link {
  /* kontrast: auf --pk-surface */
  display: block;
  margin: 0 var(--pk-space-1);
  padding: var(--pk-space-1) var(--pk-space-1);
  color: var(--pk-ink);
  border-left: 3px solid transparent;
  border-radius: var(--pk-radius-sm);
  text-decoration: none;
}

.pk-nav__link:hover {
  background-color: var(--pk-surface-raised);
  color: var(--pk-ink);
  text-decoration: underline;
}

.pk-nav__link--aktiv,
.pk-nav__link[aria-current="page"] {
  background-color: var(--pk-nav-active-bg);
  color: var(--pk-accent);
  border-left-color: var(--pk-accent-line);
  font-weight: 600;
}

.pk-inhalt {
  width: 100%;
  min-width: 0;
  max-width: var(--pk-app-content-max);
  padding: var(--pk-space-3);
}

.pk-inhalt:focus {
  outline: none;
}

/* ---------- Typografie ---------- */

.pk-h1,
.pk-inhalt h1 {
  /* kontrast: auf --pk-surface */
  margin: 0;
  color: var(--pk-ink);
  font-size: var(--pk-text-app-h1-size);
  line-height: var(--pk-text-app-h1-line-height);
  font-weight: var(--pk-text-app-h1-weight);
}

.pk-h2,
.pk-inhalt h2 {
  /* kontrast: auf --pk-surface --pk-surface-raised */
  margin: var(--pk-space-3) 0 var(--pk-space-1);
  color: var(--pk-ink);
  font-size: var(--pk-text-app-h2-size);
  line-height: var(--pk-text-app-h2-line-height);
  font-weight: var(--pk-text-app-h2-weight);
}

.pk-h3,
.pk-inhalt h3 {
  /* kontrast: auf --pk-surface --pk-surface-raised */
  margin: var(--pk-space-2) 0 var(--pk-space-1);
  color: var(--pk-ink);
  font-size: var(--pk-text-app-text-size);
  line-height: var(--pk-text-app-text-line-height);
  font-weight: var(--pk-text-app-label-weight);
}

.pk-inhalt p {
  margin: 0 0 var(--pk-space-2);
}

.pk-inhalt a:not([class]) {
  /* kontrast: auf --pk-surface --pk-surface-raised */
  color: var(--pk-accent);
  text-decoration: underline;
}

.pk-text-leise {
  /* kontrast: auf --pk-surface */
  color: var(--pk-ink-muted);
}

.pk-text-klein {
  font-size: var(--pk-text-app-klein-size);
  line-height: var(--pk-text-app-klein-line-height);
}

.pk-inhalt code {
  padding: 0 calc(var(--pk-space-1) / 2);
  background-color: var(--pk-surface-raised);
  color: var(--pk-ink);
  border-radius: var(--pk-radius-sm);
  font-size: 0.95em;
}

/* Codeblock (K5, z. B. Abfragen aus lieferungen.yaml, Meldungen): scrollt im eigenen Rahmen */

.pk-codeblock {
  /* kontrast: dekorativ */
  max-width: 100%;
  margin: 0 0 var(--pk-space-2);
  padding: var(--pk-space-2);
  overflow-x: auto;
  background-color: var(--pk-surface-raised);
  color: var(--pk-ink);
  border: 1px solid var(--pk-light-grey);
  border-radius: var(--pk-radius-sm);
  font-size: var(--pk-text-app-klein-size);
  line-height: var(--pk-text-app-klein-line-height);
  white-space: pre;
}

.pk-codeblock code {
  padding: 0;
  background-color: var(--pk-surface-raised);
  color: var(--pk-ink);
  font-size: inherit;
}

.pk-abschnitt {
  margin: 0 0 var(--pk-space-6);
}

.pk-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pk-space-1);
  margin: 0 0 var(--pk-space-2);
}

/* ---------- Seitentitel mit Aktionen ---------- */

.pk-seitentitel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pk-space-2);
  margin: 0 0 var(--pk-space-3);
}

.pk-seitentitel__text {
  min-width: 0;
}

.pk-seitentitel__untertitel {
  /* kontrast: auf --pk-surface */
  margin: calc(var(--pk-space-1) / 2) 0 0;
  color: var(--pk-ink-muted);
}

.pk-inhalt .pk-seitentitel__untertitel {
  margin: calc(var(--pk-space-1) / 2) 0 0;
}

.pk-seitentitel__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pk-space-1);
}

/* ---------- Buttons ---------- */

.pk-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pk-space-1);
  padding: var(--pk-space-1) var(--pk-space-2);
  border: 1px solid transparent;
  border-radius: var(--pk-radius-sm);
  font-family: inherit;
  font-size: var(--pk-text-app-text-size);
  line-height: var(--pk-text-app-text-line-height);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.pk-button--klein {
  padding: calc(var(--pk-space-1) / 2) var(--pk-space-1);
  font-size: var(--pk-text-app-tabelle-size);
  line-height: var(--pk-text-app-tabelle-line-height);
}

.pk-button--primaer {
  /* kontrast: auf --pk-surface --pk-surface-raised */
  background-color: var(--pk-teal);
  color: var(--pk-white);
  border-color: var(--pk-teal);
}

.pk-button--primaer:hover {
  /* kontrast: auf --pk-surface --pk-surface-raised */
  background-color: var(--pk-navy);
  color: var(--pk-white);
  border-color: var(--pk-navy);
}

.pk-button--sekundaer {
  /* kontrast: auf --pk-surface --pk-surface-raised */
  background-color: var(--pk-surface);
  color: var(--pk-accent);
  border-color: var(--pk-accent-line);
}

.pk-button--sekundaer:hover {
  /* kontrast: auf --pk-surface */
  background-color: var(--pk-surface-raised);
  color: var(--pk-accent);
  text-decoration: underline;
}

.pk-button--gefahr {
  /* kontrast: auf --pk-surface --pk-surface-raised */
  background-color: var(--pk-status-error);
  color: var(--pk-on-status-error);
  border-color: var(--pk-status-error);
}

.pk-button--gefahr:hover {
  text-decoration: underline;
}

.pk-button:disabled,
.pk-button[aria-disabled="true"] {
  /* kontrast: auf --pk-surface */
  background-color: var(--pk-surface);
  color: var(--pk-ink-muted);
  border-color: var(--pk-border);
  border-style: dashed;
  text-decoration: none;
  cursor: not-allowed;
}

/* ---------- Formularfelder ---------- */

.pk-formular {
  max-width: 40em;
}

/* Anmeldeseite (K2) */

.pk-anmeldung {
  max-width: 32em;
}

.pk-anmeldung__entra {
  margin: var(--pk-space-3) 0;
}

.pk-feld {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pk-space-1) / 2);
  margin: 0 0 var(--pk-space-2);
}

.pk-feld__label {
  /* kontrast: auf --pk-surface */
  color: var(--pk-ink);
  font-size: var(--pk-text-app-label-size);
  line-height: var(--pk-text-app-label-line-height);
  font-weight: var(--pk-text-app-label-weight);
}

.pk-feld__pflicht {
  /* kontrast: auf --pk-surface */
  color: var(--pk-status-error);
}

.pk-feld__eingabe {
  /* kontrast: auf --pk-surface */
  width: 100%;
  padding: var(--pk-space-1);
  background-color: var(--pk-surface);
  color: var(--pk-ink);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-sm);
  font-family: inherit;
  font-size: var(--pk-text-app-text-size);
  line-height: var(--pk-text-app-text-line-height);
}

textarea.pk-feld__eingabe {
  min-height: 6em;
  resize: vertical;
}

.pk-feld__eingabe:disabled {
  /* kontrast: auf --pk-surface */
  background-color: var(--pk-surface);
  color: var(--pk-ink-muted);
  border-style: dashed;
  cursor: not-allowed;
}

.pk-feld--fehler .pk-feld__eingabe {
  /* kontrast: auf --pk-surface */
  border-color: var(--pk-status-error);
  border-width: 2px;
}

.pk-feld__hilfe {
  /* kontrast: auf --pk-surface */
  margin: 0;
  color: var(--pk-ink-muted);
  font-size: var(--pk-text-app-klein-size);
  line-height: var(--pk-text-app-klein-line-height);
}

.pk-feld__fehler {
  /* kontrast: auf --pk-surface */
  margin: 0;
  color: var(--pk-status-error);
  font-size: var(--pk-text-app-klein-size);
  line-height: var(--pk-text-app-klein-line-height);
  font-weight: 600;
}

.pk-feld--checkbox {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pk-space-1);
}

.pk-feld--checkbox .pk-feld__hilfe,
.pk-feld--checkbox .pk-feld__fehler {
  flex-basis: 100%;
}

.pk-feld__checkbox {
  /* kontrast: auf --pk-surface */
  width: 1.25em;
  height: 1.25em;
  margin: 0;
  accent-color: var(--pk-teal);
}

.pk-formular__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pk-space-1);
  margin: var(--pk-space-3) 0 0;
}

/* ---------- Tabelle ---------- */

.pk-tabelle-container {
  /* kontrast: dekorativ */
  /* position: relative hält versteckte Texte (.pk-unsichtbar) im Scroll-Container */
  position: relative;
  width: 100%;
  margin: 0 0 var(--pk-space-2);
  overflow-x: auto;
  border: 1px solid var(--pk-light-grey);
  border-radius: var(--pk-radius-sm);
}

.pk-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--pk-text-app-tabelle-size);
  line-height: var(--pk-text-app-tabelle-line-height);
}

.pk-tabelle caption {
  /* kontrast: auf --pk-surface */
  padding: var(--pk-space-1) var(--pk-space-2);
  color: var(--pk-ink);
  font-weight: 600;
  text-align: left;
}

.pk-tabelle th {
  /* kontrast: dekorativ */
  padding: var(--pk-space-1) var(--pk-space-2);
  background-color: var(--pk-surface);
  color: var(--pk-ink);
  border-bottom: 1px solid var(--pk-border);
  font-size: var(--pk-text-app-label-size);
  line-height: var(--pk-text-app-label-line-height);
  font-weight: var(--pk-text-app-label-weight);
  text-align: left;
  white-space: nowrap;
}

.pk-tabelle td {
  /* kontrast: auf --pk-surface --pk-surface-raised; dekorativ */
  padding: var(--pk-space-1) var(--pk-space-2);
  color: var(--pk-ink);
  border-bottom: 1px solid var(--pk-light-grey);
  vertical-align: top;
}

.pk-tabelle tbody tr:last-child td {
  border-bottom: 0;
}

.pk-tabelle--zebra tbody tr:nth-child(even) td {
  /* kontrast: nur-flaeche */
  background-color: var(--pk-surface-raised);
}

.pk-tabelle .pk-tabelle__zahl {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.pk-tabelle__sortieren {
  /* kontrast: auf --pk-surface */
  display: inline-flex;
  align-items: center;
  gap: calc(var(--pk-space-1) / 2);
  color: var(--pk-ink);
  text-decoration: none;
}

.pk-tabelle__sortieren:hover {
  text-decoration: underline;
}

.pk-tabelle__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--pk-space-1) / 2);
}

.pk-tabelle .pk-leer {
  border: 0;
}

/* ---------- Paginierung ---------- */

.pk-paginierung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pk-space-1);
  margin: 0 0 var(--pk-space-2);
}

.pk-paginierung__info {
  /* kontrast: auf --pk-surface */
  color: var(--pk-ink-muted);
}

.pk-paginierung__liste {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--pk-space-1) / 2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pk-paginierung__link {
  /* kontrast: auf --pk-surface */
  display: inline-flex;
  justify-content: center;
  min-width: 2.25em;
  padding: calc(var(--pk-space-1) / 2) var(--pk-space-1);
  background-color: var(--pk-surface);
  color: var(--pk-accent);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-sm);
  text-decoration: none;
}

.pk-paginierung__link:hover {
  /* kontrast: auf --pk-surface */
  background-color: var(--pk-surface-raised);
  color: var(--pk-accent);
  text-decoration: underline;
}

.pk-paginierung__link[aria-current="page"] {
  /* kontrast: auf --pk-surface */
  background-color: var(--pk-teal);
  color: var(--pk-white);
  border-color: var(--pk-teal);
  font-weight: 600;
}

.pk-paginierung__link--deaktiviert {
  /* kontrast: auf --pk-surface */
  background-color: var(--pk-surface);
  color: var(--pk-ink-muted);
  border-style: dashed;
}

/* ---------- Status- und Konfidenz-Pillen ---------- */

.pk-pille {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--pk-space-1) / 2);
  padding: calc(var(--pk-space-1) / 4) var(--pk-space-1);
  border-radius: var(--pk-radius-pill);
  font-size: var(--pk-text-app-klein-size);
  line-height: var(--pk-text-app-klein-line-height);
  font-weight: 600;
  white-space: nowrap;
}

.pk-pille__symbol {
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border: 1px solid currentColor;
  border-radius: 50%;
  background-color: currentColor;
}

.pk-pille--laeuft .pk-pille__symbol,
.pk-pille--neutral .pk-pille__symbol {
  background-color: transparent;
}

.pk-pille--ok {
  background-color: var(--pk-status-ok-bg);
  color: var(--pk-status-ok);
}

.pk-pille--warnung {
  background-color: var(--pk-status-warn-bg);
  color: var(--pk-status-warn);
}

.pk-pille--fehler {
  background-color: var(--pk-status-error-bg);
  color: var(--pk-status-error);
}

.pk-pille--laeuft {
  background-color: var(--pk-status-info-bg);
  color: var(--pk-status-info);
}

.pk-pille--neutral {
  background-color: var(--pk-surface-raised);
  color: var(--pk-ink);
}

.pk-konfidenz--hoch {
  background-color: var(--pk-status-ok-bg);
  color: var(--pk-konfidenz-sicher);
}

.pk-konfidenz--mittel {
  background-color: var(--pk-status-warn-bg);
  color: var(--pk-konfidenz-mittel);
}

.pk-konfidenz--niedrig {
  background-color: var(--pk-status-error-bg);
  color: var(--pk-konfidenz-unsicher);
}

.pk-konfidenz__wert {
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

/* ---------- Kennzahl-Karten ---------- */

.pk-karten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14em, 1fr));
  gap: var(--pk-space-2);
  margin: 0 0 var(--pk-space-3);
  padding: 0;
  list-style: none;
}

.pk-karte {
  /* kontrast: dekorativ */
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-1);
  padding: var(--pk-space-2);
  background-color: var(--pk-surface);
  color: var(--pk-ink);
  border: 1px solid var(--pk-light-grey);
  border-radius: var(--pk-radius-md);
}

.pk-karte__titel {
  /* kontrast: auf --pk-surface */
  margin: 0;
  color: var(--pk-ink-muted);
  font-size: var(--pk-text-app-label-size);
  line-height: var(--pk-text-app-label-line-height);
  font-weight: var(--pk-text-app-label-weight);
}

.pk-inhalt .pk-karte__titel,
.pk-inhalt .pk-karte__wert,
.pk-inhalt .pk-karte__hinweis {
  margin: 0;
}

.pk-karte__wert {
  /* kontrast: auf --pk-surface */
  margin: 0;
  color: var(--pk-ink);
  font-size: var(--pk-text-app-h1-size);
  line-height: var(--pk-text-app-h1-line-height);
  font-weight: var(--pk-text-app-h1-weight);
  font-variant-numeric: tabular-nums;
}

.pk-karte__einheit {
  /* kontrast: auf --pk-surface */
  color: var(--pk-ink-muted);
  font-size: var(--pk-text-app-text-size);
  line-height: var(--pk-text-app-text-line-height);
  font-weight: 400;
}

.pk-karte__hinweis {
  /* kontrast: auf --pk-surface */
  margin: 0;
  color: var(--pk-ink-muted);
  font-size: var(--pk-text-app-klein-size);
  line-height: var(--pk-text-app-klein-line-height);
}

/* Einziger Copper-Akzent: hervorgehobene Kennzahl, nur in großer Schrift (24 px, 600). */
.pk-karte--akzent .pk-karte__wert {
  /* kontrast: auf --pk-surface; gross */
  color: var(--pk-copper);
}

/* ---------- Hinweisboxen ---------- */

.pk-hinweis {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pk-space-1) / 2);
  margin: 0 0 var(--pk-space-2);
  padding: var(--pk-space-2);
  border-left: 4px solid transparent;
  border-radius: var(--pk-radius-sm);
}

.pk-inhalt .pk-hinweis__titel,
.pk-inhalt .pk-hinweis__text {
  margin: 0;
}

.pk-hinweis__titel {
  font-weight: 600;
}

.pk-hinweis a:not([class]) {
  color: inherit;
  text-decoration: underline;
}

.pk-hinweis--info {
  /* kontrast: auf --pk-surface */
  background-color: var(--pk-status-info-bg);
  color: var(--pk-ink);
  border-left-color: var(--pk-status-info);
}

.pk-hinweis--info .pk-hinweis__titel {
  /* kontrast: auf --pk-status-info-bg */
  color: var(--pk-status-info);
}

.pk-hinweis--warnung {
  /* kontrast: auf --pk-surface */
  background-color: var(--pk-status-warn-bg);
  color: var(--pk-ink);
  border-left-color: var(--pk-status-warn);
}

.pk-hinweis--warnung .pk-hinweis__titel {
  /* kontrast: auf --pk-status-warn-bg */
  color: var(--pk-status-warn);
}

.pk-hinweis--fehler {
  /* kontrast: auf --pk-surface */
  background-color: var(--pk-status-error-bg);
  color: var(--pk-ink);
  border-left-color: var(--pk-status-error);
}

.pk-hinweis--fehler .pk-hinweis__titel {
  /* kontrast: auf --pk-status-error-bg */
  color: var(--pk-status-error);
}

.pk-seite .pk-hinweis :focus-visible {
  /* kontrast: auf --pk-status-info-bg --pk-status-warn-bg --pk-status-error-bg */
  outline-color: var(--pk-focus-ring);
}

/* ---------- Leerer Zustand ---------- */

.pk-leer {
  /* kontrast: auf --pk-surface */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pk-space-2);
  padding: var(--pk-space-4) var(--pk-space-2);
  color: var(--pk-ink-muted);
  border: 1px dashed var(--pk-border);
  border-radius: var(--pk-radius-md);
  text-align: center;
}

.pk-inhalt .pk-leer__text {
  margin: 0;
}

/* ---------- Fehlerseiten ---------- */

.pk-fehlerseite {
  max-width: 40em;
  padding: var(--pk-space-4) 0;
}

.pk-fehlerseite__code {
  /* kontrast: auf --pk-surface */
  color: var(--pk-ink-muted);
  font-weight: 600;
}

/* ---------- Schmale Fenster ---------- */

/* ---------- Einstellungsseite (K3) ---------- */

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

.pk-einstellungen__gruppe {
  /* kontrast: dekorativ */
  padding: var(--pk-space-3);
  background-color: var(--pk-surface);
  color: var(--pk-ink);
  border: 1px solid var(--pk-light-grey);
  border-radius: var(--pk-radius-md);
}

.pk-einstellungen__rechte {
  /* kontrast: auf --pk-surface */
  margin: 0 0 var(--pk-space-2);
  color: var(--pk-ink-muted);
}

.pk-einstellungen__parameter {
  /* kontrast: auf --pk-surface; dekorativ */
  padding: var(--pk-space-2) 0 0;
  border-top: 1px solid var(--pk-light-grey);
}

.pk-einstellungen__parameter .pk-feld {
  margin-bottom: var(--pk-space-1);
}

.pk-einstellungen__formular .pk-feld__eingabe {
  max-width: 32em;
}

.pk-einstellungen__zusatz,
.pk-einstellungen__geheim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pk-space-1);
  margin: 0 0 var(--pk-space-2);
}

.pk-einstellungen__geheim-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.pk-einstellungen__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pk-space-1);
  padding-top: var(--pk-space-1);
}

.pk-feld--gruppe {
  min-width: 0;
  margin: 0 0 var(--pk-space-1);
  padding: 0;
  border: 0;
}

.pk-feld--gruppe .pk-feld--checkbox {
  margin: 0;
}

/* Filterleiste (K4, z. B. Protokoll): Felder nebeneinander, bricht auf schmalen Fenstern um */

.pk-filter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
  gap: var(--pk-space-2);
  align-items: end;
  margin: 0 0 var(--pk-space-3);
}

.pk-filter .pk-feld {
  margin: 0;
}

.pk-filter__aktionen {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--pk-space-1);
}

@media (max-width: 899px) {
  .pk-kopf {
    padding: 0 var(--pk-space-2);
  }

  .pk-kopf__zusatz,
  .pk-kopf__benutzername {
    display: none;
  }

  .pk-js .pk-kopf__menue {
    display: inline-flex;
  }

  .pk-rahmen {
    grid-template-columns: minmax(0, 1fr);
  }

  .pk-nav {
    /* kontrast: dekorativ */
    border-right: 0;
    border-bottom: 1px solid var(--pk-light-grey);
  }

  .pk-js .pk-nav {
    display: none;
  }

  .pk-js .pk-nav.pk-nav--offen {
    display: block;
  }

  .pk-inhalt {
    padding: var(--pk-space-2);
  }
}

@media print {
  .pk-kopf__benutzer,
  .pk-kopf__menue,
  .pk-nav,
  .pk-sprunglink {
    display: none;
  }

  .pk-rahmen {
    display: block;
  }
}

/* === Komponententeil Ende === */