/* Corporate Design Kreis Siegen-Wittgenstein für KERN UX 2.7.2 - wie im
 * Online-Service Amtsärztlicher Dienst (selbstservice-amtsarzt/backend/app/
 * static/theme.css) und im Masernschutz-Portal.
 *
 * Vorgabe: nur die vier CD-Farben, **ohne Abstufungen**. Gelb und Ocker nur,
 * wo die Grüntöne nicht reichen.
 *   Waldgrün     #00594F - Aktion, Marke, Fokus, Info/Erfolg-Rahmen
 *   Mintgrün     #AADAB3 - nur als Fläche unter dunklem Text (Hover, Erfolg)
 *   Zitronengelb #FBE122 - nur Warnung
 *   Ocker        #AF0900 - nur Fehler
 * Text ist das Schwarz aus dem Logo (#1D1D1B), Flächen sind weiß. Übrige
 * Grautöne (gedämpfter Text, Rahmen) sind neutral, nicht aus den CD-Farben.
 *
 * Gemessen (WCAG 2.1): Weiß/Waldgrün 8,26:1, #1D1D1B/Mintgrün 10,76:1,
 * Ocker/Weiß 7,34:1, #4D4D4D/Weiß 8,45:1. Mintgrün auf Weiß hat nur 1,57:1
 * und trägt deshalb nie allein eine Information.
 *
 * Bewusst ohne Dunkelmodus: KERN schaltet bei `prefers-color-scheme: dark`
 * um, das bräuchte dunkle Abstufungen der CD-Farben. `base.html` setzt
 * deshalb `data-kern-theme="light"`. Die Selektoren hier sind mit
 * `html[data-kern-theme]` spezifischer als KERNs `:root`/Theme-Regeln und
 * gewinnen unabhängig von der Ladereihenfolge.
 *
 * Schrift und Logo liegen unter static/design/ - Kopie aus
 * frontend/public/design/ (Quelle: design/ im Repo-Wurzelverzeichnis), weil
 * dieser Dienst ohne JS-Build aus backend/ als Build-Kontext gebaut wird.
 */

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('design/fonts/atkinson/AtkinsonHyperlegibleNext-VariableFont_wght.ttf')
    format('truetype');
}

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('design/fonts/atkinson/AtkinsonHyperlegibleNext-Italic-VariableFont_wght.ttf')
    format('truetype');
}

html[data-kern-theme='light'] {
  color-scheme: light;
  --siwi-waldgruen: #00594f;
  --siwi-mintgruen: #aadab3;
  --siwi-zitronengelb: #fbe122;
  --siwi-ocker: #af0900;
  --siwi-schwarz: #1d1d1b;

  --kern-typography-font-family-default: 'Atkinson Hyperlegible Next', system-ui,
    -apple-system, sans-serif;

  --kern-color-action-default: var(--siwi-waldgruen);
  --kern-color-action-on-default: #ffffff;
  --kern-color-action-focus-default: var(--siwi-waldgruen);
  --kern-color-action-visited: var(--siwi-waldgruen);
  --kern-color-decorative-brand-default: var(--siwi-waldgruen);
  /* KERN mischt Hover/Aktiv per color-mix aus der Aktionsfarbe - das wären
   * Abstufungen. Stattdessen die volle Mintgrün-Fläche. */
  --kern-color-action-state-indicator-shade-hover: var(--siwi-mintgruen);
  --kern-color-action-state-indicator-shade-active: var(--siwi-mintgruen);
  --kern-color-action-state-indicator-tint-hover-opacity: var(--siwi-mintgruen);
  --kern-color-action-state-indicator-tint-active-opacity: var(--siwi-mintgruen);

  --kern-color-layout-background-default: #ffffff;
  --kern-color-layout-text-default: var(--siwi-schwarz);
  /* KERNs Neutrale sind leicht blaustichig; Flächen von Eingabefeldern
   * (``layer-surface``) bekommen ein reines Grau. */
  --kern-color-layout-background-default-surface: #f2f2f2;
  --kern-color-layout-background-level-1-surface: #f2f2f2;
  --kern-color-layout-background-level-2-surface: #f2f2f2;
  --kern-color-form-input-border: var(--siwi-schwarz);
  --kern-color-layout-border: #767676;
  /* AAA auch auf #F2F2F2 (7,55:1). */
  --kern-color-layout-text-muted: #4d4d4d;
  --kern-color-layout-layer-surface: #f2f2f2;

  --kern-color-feedback-info: var(--siwi-waldgruen);
  --kern-color-feedback-info-background: #ffffff;
  --kern-color-feedback-success: var(--siwi-waldgruen);
  --kern-color-feedback-success-background: var(--siwi-mintgruen);
  --kern-color-feedback-danger: var(--siwi-ocker);
  --kern-color-feedback-danger-background: #ffffff;
  --kern-color-feedback-warning: var(--siwi-schwarz);
  --kern-color-feedback-warning-background: var(--siwi-zitronengelb);
}

/* Auf der Mintgrün-Fläche trägt Schwarz den Text, nicht Weiß (1,57:1). */
html[data-kern-theme='light'] .kern-btn--primary:hover,
html[data-kern-theme='light'] .kern-btn--primary:active {
  color: var(--siwi-schwarz);
}

/* Gesperrte Schaltflächen: neutrales Grau statt ausgeblendetem Waldgrün
 * (wäre eine Abstufung). #1D1D1B auf #C6C6C6: 9,88:1. */
html[data-kern-theme='light'] .kern-btn--primary:is(:disabled, [aria-disabled='true']),
html[data-kern-theme='light'] .kern-btn--primary:is(:disabled, [aria-disabled='true']):hover,
html[data-kern-theme='light'] .kern-btn--primary:is(:disabled, [aria-disabled='true']):active {
  background: #c6c6c6;
  border-color: #c6c6c6;
  color: var(--siwi-schwarz);
  opacity: 1;
}

/* Der KERN-Reset setzt für body bewusst keinen Außenabstand. Für eine echte
 * vollbreite Kopfzeile muss deshalb der Browser-Standard entfernt werden. */
body {
  margin: 0;
  min-block-size: 100vh;
}

/* Lesbarkeit (WCAG 1.4.8): Zeilen höchstens ~70 Zeichen, Zeilenhöhe 1,5,
 * Absatzabstand mindestens das 1,5-Fache, kein Blocksatz. */
.ss-lesebreite {
  max-inline-size: min(46rem, 70ch);
  margin-inline: auto;
}

.ss-haupt :is(p, li, dd, label) {
  line-height: 1.5;
  text-align: start;
}

.ss-haupt p {
  margin-block-end: 1.5em;
}

.ss-haupt :is(.kern-alert, .kern-form-input) p {
  margin-block-end: 0;
}

.ss-kopf {
  border-top: 8px solid var(--siwi-waldgruen);
  padding-block: var(--kern-metric-space-large, 24px);
  border-bottom: var(--kern-metric-border-width-light, 1px) solid
    var(--kern-color-layout-border, #767676);
}

.ss-kopf-inhalt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ss-logo {
  display: block;
  inline-size: auto;
  block-size: auto;
  max-inline-size: min(19rem, 100%);
  max-block-size: 5rem;
  object-fit: contain;
  object-position: left center;
}

.ss-dienstname {
  margin: 0;
  margin-block-start: var(--kern-metric-space-small, 8px);
  font-weight: 700;
}

.ss-haupt {
  padding-block: var(--kern-metric-space-x-large, 32px);
}

.ss-fuss {
  margin-top: var(--kern-metric-space-x-large, 32px);
  padding-bottom: var(--kern-metric-space-large, 24px);
}

.ss-fuss-raster {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(10rem, 1fr);
  gap: var(--kern-metric-space-x-large, 32px);
  margin-block-start: var(--kern-metric-space-large, 24px);
}

.ss-fuss-raster .kern-title {
  margin-block-start: 0;
}

.ss-adresse {
  font-style: normal;
}

.ss-fuss-links {
  margin-block: 0;
  padding-inline-start: var(--kern-metric-space-large, 24px);
}

.ss-abschnitt {
  margin-block: var(--kern-metric-space-x-large, 32px);
}

.ss-termindaten,
.ss-zahlen {
  font-variant-numeric: tabular-nums;
}

.ss-formular {
  margin-block-start: var(--kern-metric-space-x-large, 32px);
}

.ss-upload-button {
  margin-block-start: var(--kern-metric-space-large, 24px);
}

.ss-formular .kern-form-input__input[type="file"] {
  max-inline-size: 100%;
}

/* Sprunglink bleibt außerhalb des Bildes, bis er per Tastatur fokussiert wird. */
.ss-skip {
  position: fixed;
  z-index: 1000;
  inset-block-start: var(--kern-metric-space-small, 8px);
  inset-inline-start: -9999px;
  padding: var(--kern-metric-space-small, 8px)
    var(--kern-metric-space-default, 16px);
  background: var(--kern-color-layout-background-default, #fff);
}

.ss-skip:focus {
  inset-inline-start: var(--kern-metric-space-small, 8px);
}

@media (max-width: 575px) {
  .ss-haupt {
    padding-block: var(--kern-metric-space-large, 24px);
  }

  .ss-abschnitt,
  .ss-formular {
    margin-block-start: var(--kern-metric-space-large, 24px);
  }

  .ss-formular .kern-btn {
    inline-size: 100%;
  }

  .ss-fuss-raster {
    grid-template-columns: 1fr;
    gap: var(--kern-metric-space-large, 24px);
  }
}

@media (forced-colors: active) {
  .ss-kopf {
    border-top-color: CanvasText;
  }
}

/* Erklärungstext der Online-Kostenübernahme: abgesetzt wie ein Zitat. */
.ss-erklaerung {
  border-left: 4px solid var(--siwi-waldgruen);
  padding-left: 1rem;
}

/* --- Selbstanmeldung zur Belehrung --------------------------------------- */

/* Honigtopf gegen Formular-Bots: für Menschen unsichtbar, nicht fokussierbar. */
.ss-honigtopf {
  position: absolute;
  inset-inline-start: -10000px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

.ss-fortschritt {
  margin-block-end: var(--kern-metric-space-x-large, 32px);
}

.ss-fortschritt progress {
  inline-size: 100%;
}

.ss-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--kern-metric-space-default, 16px);
}

.ss-filter .kern-form-input {
  margin-block-end: 0;
}

.ss-termintag,
.ss-gruppe {
  margin-block-end: var(--kern-metric-space-x-large, 32px);
}

.ss-gruppe > legend.kern-title {
  margin-block-end: var(--kern-metric-space-default, 16px);
}

.ss-radio-hinweis {
  margin-block: calc(-1 * var(--kern-metric-space-x-small, 4px)) var(--kern-metric-space-default, 16px);
  padding-inline-start: 2.75rem;
}

.ss-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--kern-metric-space-default, 16px);
}

.ss-zeile > .kern-form-input:first-child {
  flex: 1 1 14rem;
}

.ss-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kern-metric-space-large, 24px);
}

.ss-einleitung {
  white-space: pre-line;
}

/* --- Selbstanmeldung: Zusammenfassung, Rechtstexte (2026-11) ------------- */

/* Fortschritt in Waldgrün statt KERN-Blau. */
html[data-kern-theme='light'] .ss-fortschritt progress {
  accent-color: var(--siwi-waldgruen);
}

html[data-kern-theme='light'] .ss-fortschritt progress::-webkit-progress-value {
  background: var(--siwi-waldgruen);
}

html[data-kern-theme='light'] .ss-fortschritt progress::-moz-progress-bar {
  background: var(--siwi-waldgruen);
}

.ss-summary-liste {
  display: flex;
  flex-direction: column;
  gap: var(--kern-metric-space-large, 24px);
  margin-block: var(--kern-metric-space-x-large, 32px);
}

.kern-summary__header .kern-title {
  margin: 0;
}

/* ``kern-summary__actions`` kommt erst mit KERN 2.8; in 2.7.2 ungestylt. */
.kern-summary__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kern-metric-space-default, 16px);
}

/* Button, der wie ein KERN-Link aussieht (POST statt Navigation). KERN setzt
 * Schrift, Farbe und Unterstreichung; hier nur die Button-Vorgaben des Browsers
 * zurücksetzen. Zielgröße 44 px (WCAG 2.5.5). */
.ss-link-knopf {
  background: none;
  border: 0;
  padding: 0;
  min-block-size: 44px;
  align-items: center;
  cursor: pointer;
}

/* Fieldset-Überschriften: Abstand wie eine h2 im Fließtext. */
.ss-gruppe > legend.kern-heading-medium,
.ss-formular fieldset > legend.kern-heading-medium {
  margin-block-end: var(--kern-metric-space-default, 16px);
}

.ss-abhaengig {
  margin-block-start: var(--kern-metric-space-default, 16px);
  padding-inline-start: var(--kern-metric-space-default, 16px);
  border-inline-start: 4px solid var(--kern-color-layout-border, #767676);
}

.ss-rechtstext h2 {
  margin-block-start: var(--kern-metric-space-x-large, 32px);
}

.ss-rechtstext li + li {
  margin-block-start: var(--kern-metric-space-small, 8px);
}

/* Zielgröße mindestens 44 × 44 px für tertiäre Schaltflächen. */
.ss-haupt .kern-btn--tertiary {
  min-block-size: 44px;
}

@media (max-width: 575px) {
  .ss-aktionen {
    flex-direction: column;
    align-items: stretch;
  }

  .ss-aktionen > .kern-btn {
    inline-size: 100%;
    justify-content: center;
  }
}

/* Arbeitgeberangaben nur bei „Mein Arbeitgeber“ (ohne JavaScript, per :has).
 * display: none nimmt den Block auch aus dem Fokus- und Screenreader-Baum. */
.ss-zahlung:has(#zahlungsart-sammelrechnung:not(:checked)) .ss-abhaengig {
  display: none;
}

/* Seitenkopf mit Unterzeile (kern-hgroup): Abstand wie nach einer h1. */
.ss-seitenkopf {
  margin-block-end: var(--kern-metric-space-large, 24px);
}

.ss-haupt .ss-seitenkopf .kern-subline {
  margin-block-end: 0;
}

/* Natives Datumsfeld im Terminfilter: KERN hat nur die Breiten 2 und 4. */
.ss-datum {
  inline-size: 12em;
  max-inline-size: 100%;
}

.ss-nach-liste {
  margin-block-start: var(--kern-metric-space-default, 16px);
}

/* Einleitungssatz gehört zur folgenden Liste: kein voller Absatzabstand. */
.ss-haupt p:has(+ .kern-list) {
  margin-block-end: var(--kern-metric-space-small, 8px);
}

/* Aktionen nicht direkt unter das letzte Feld kleben. */
.ss-formular .ss-aktionen {
  margin-block-start: var(--kern-metric-space-large, 24px);
}

.ss-abhaengig-titel {
  margin-block: 0 var(--kern-metric-space-default, 16px);
}