/* ===========================================================================
   sistenta.css — Design-System, Paket B1.
   Eine Datei fuer Website UND Dashboard. Zwei Dateien laufen auseinander.

   Umfang bewusst klein gehalten (Minimalfassung nach Abschnitt 3 des
   Drei-Wochen-Plans, 5 h): drei Farben plus Grau, EINE Schrift, eine
   Abstandsskala, sechs Komponenten, Hell und Dunkel. Was fehlt, steht als
   B1+ auf der Streichliste: Zustaende im Detail, Formularvalidierung,
   dokumentierter Animationsverzicht.

   Keine externen Ressourcen. Keine Verbindung nach aussen. Kein Framework.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Schrift — Inter, variabel, lokal.

   EINE Schrift, wie im Paket vorgegeben. Inter deckt als variable Schrift
   den gesamten Gewichtsbereich in einer Datei ab; ein zweiter Schnitt fuer
   Ueberschriften waere eine zweite Datei und ein zweiter Ladevorgang.
   Zahlenkolonnen im Dashboard loest `font-variant-numeric: tabular-nums`,
   nicht eine zweite Schrift.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------------
   Marken — hell ist die vollstaendige Festlegung, dunkel tauscht nur Werte.

   Der Grundton ist WARM-neutral, nicht kaltes Grau. Sistenta liest
   Kommentare von Menschen; eine Oberflaeche in Blaugrau haette den Ton
   einer Systemkonsole.
   --------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* --- Grund und Text ------------------------------------------------- */
  --grund:          #f5efe4;   /* Seitenhintergrund, warmes Creme */
  --grund-erhoben:  #fdfbf6;   /* Karten, Tabellenkopf, alles was "obenauf" liegt */
  --grund-gesenkt:  #efe7d7;   /* Eingabefelder, ruhige Flaechen, Fussbereich */
  --text:           #1a1814;   /* Fliesstext, Ueberschriften */
  --text-leise:     #5c544a;   /* Beschriftungen, Sekundaeres */
  --text-still:     #756b5d;   /* Platzhalter, Zeitangaben */
  /* Zwei Linienrollen, und die Trennung ist keine Feinheit:
     --linie ist rein dekorativ (Trenner zwischen Absaetzen, Tabellenzeilen)
     und hat keinen Kontrastanspruch. --linie-stark umrandet BEDIENELEMENTE
     -- Eingabefelder, stille Knoepfe -- und faellt damit unter WCAG 1.4.11
     mit 3:1 gegen JEDE Flaeche, auf der sie liegt. Geprueft wird beides,
     Grund und gesenkte Flaeche. */
  --linie:          #e7dcc8;   /* dekorative Trenner */
  --linie-stark:    #8a8175;   /* Rahmen von Bedienelementen, 3,68:1 / 3,40:1 */

  /* --- Die drei Farben ------------------------------------------------- */

  /* 1. Akzent: Gold-Tinte, uebernommen von commentory.de (16.09.2026,
        Ansage Jonas). Ersetzt das fruehere Petrol #14544e. Traegt Verweise,
        Rubrikzeilen und Auswahl; die Hauptknoepfe tragen --dunkel. */
  --akzent:         #7e5f2b;
  --akzent-hell:    #96723a;
  --akzent-still:   #f0e7d6;   /* Flaeche hinter Akzent-Text */
  --auf-akzent:     #fdfbf6;

  /* Der dunkle Knopfton und das Gold der Raender. Beides kommt aus der
     Commentory-Sprache: Hauptknoepfe sind fast schwarz, Raender und
     Hervorhebungen goldfarben. */
  --dunkel:         #241e16;
  --auf-dunkel:     #f7f2e8;
  --gold-rand:      rgba(184, 147, 90, 0.46);

  /* 2. Bestaetigt: Freigabe erteilt, Antwort gesendet, Kaufsignal. */
  --gut:            #2f6b3a;
  --gut-still:      #e6f0e6;

  /* 3. Achtung: Kritik, Quota-Fehler, abgelehnt. Gedaempftes Rost, kein
        Alarmrot -- es steht im Dashboard neben Kommentaren echter Menschen. */
  --acht:           #9c4221;
  --acht-still:     #f7eae3;

  /* --- Abstaende: eine Skala, Faktor ~1,5 ------------------------------ */
  --raum-1: 0.25rem;
  --raum-2: 0.5rem;
  --raum-3: 0.75rem;
  --raum-4: 1rem;
  --raum-5: 1.5rem;
  --raum-6: 2rem;
  --raum-7: 3rem;
  --raum-8: 4.5rem;

  /* --- Form ------------------------------------------------------------ */
  --rund-1: 8px;
  --rund-2: 14px;
  --rund-3: 22px;

  --schatten-1: 0 20px 46px rgba(74, 55, 26, 0.10);

  /* --- Schrift ---------------------------------------------------------- */
  --schrift: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
             'Helvetica Neue', Arial, sans-serif;

  /* Zweite Schrift, seit 16.09.2026: die Serife traegt die Ueberschriften.
     B1 hatte EINE Schrift festgelegt, um eine zweite Datei zu sparen. Die
     Vorgabe "wie Commentory" schlaegt das; die Datei laedt nur den einen
     zusaetzlichen Schnitt. */
  --serife: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;

  /* Drei Groessen plus Fliesstext und Kleintext. Mehr Stufen heisst, dass
     jede Stufe beliebig wird. */
  --gross:  clamp(2.45rem, 1.5rem + 3.4vw, 4.05rem);
  --mittel: clamp(1.6rem, 1.25rem + 1.4vw, 2.25rem);
  --klein:  1.05rem;
  --text-groesse: 1.0625rem;
  --winzig: 0.8125rem;

  --zeile: 1.65;
  --zeile-eng: 1.25;

  --breite: 46rem;      /* Lesebreite fuer Fliesstext */
  --breite-weit: 73.75rem; /* Dashboard, Tabellen, Fussbereich */
}

/* Dunkel, am 16.09.2026 auf dieselbe Sprache gezogen wie hell: warmes
   Fast-Schwarz statt Neutralgrau, Gold statt Petrol. Vorher sah die
   dunkle Fassung aus wie ein anderes Produkt.

   Nur die Werte werden getauscht, nie die Bedeutung: --gut bleibt
   "bestaetigt", --acht bleibt "Achtung". Wer hier die Rollen vertauscht,
   bricht jede Komponente, die sie benutzt.

   Die Reihenfolge ist Absicht: erst die Systemeinstellung, dann die
   ausdrueckliche Wahl -- so gewinnt ein gesetztes data-theme in beide
   Richtungen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --grund:          #191510;
    --grund-erhoben:  #221d16;
    --grund-gesenkt:  #120f0b;
    --text:           #f4eee3;
    --text-leise:     #b8ad9b;
    --text-still:     #948976;
    --linie:          #332c22;
    --linie-stark:    #837767;

    --akzent:         #dcb87c;
    --akzent-hell:    #ecca92;
    --akzent-still:   #2b2318;
    --auf-akzent:     #191510;

    --dunkel:         #f2ebdd;
  --auf-dunkel:     #191510;
  --gold-rand:      rgba(220, 184, 124, 0.46);

  --gut:            #6fbf7a;
    --gut-still:      #172a19;

    --acht:           #e08a5f;
    --acht-still:     #2e1d13;

    --schatten-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --grund:          #191510;
  --grund-erhoben:  #221d16;
  --grund-gesenkt:  #120f0b;
  --text:           #f4eee3;
  --text-leise:     #b8ad9b;
  --text-still:     #948976;
  --linie:          #332c22;
  --linie-stark:    #837767;

  --akzent:         #dcb87c;
  --akzent-hell:    #ecca92;
  --akzent-still:   #2b2318;
  --auf-akzent:     #191510;

  --dunkel:         #f2ebdd;
  --auf-dunkel:     #191510;
  --gold-rand:      rgba(220, 184, 124, 0.46);

  --gut:            #6fbf7a;
  --gut-still:      #172a19;

  --acht:           #e08a5f;
  --acht-still:     #2e1d13;

  --schatten-1: 0 1px 2px rgba(0, 0, 0, 0.4);
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: var(--text-groesse);
  line-height: var(--zeile);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  line-height: var(--zeile-eng);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 var(--raum-4);
  text-wrap: balance;
}

h1 { font-size: var(--gross); }
h2 { font-size: var(--mittel); margin-top: var(--raum-7); }
h3 { font-size: var(--klein); margin-top: var(--raum-5); }

p { margin: 0 0 var(--raum-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--akzent); text-underline-offset: 0.2em; }
a:hover { color: var(--akzent-hell); }

img, video { max-width: 100%; height: auto; }

hr {
  border: 0;
  border-top: 1px solid var(--linie);
  margin: var(--raum-7) 0;
}

code, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--grund-gesenkt);
  border: 1px solid var(--linie);
  border-radius: var(--rund-1);
  padding: 0.1em 0.35em;
}

/* Ein sichtbarer Fokusring, ueberall, immer. Wer ihn entfernt, macht die
   Oberflaeche fuer Tastaturbedienung unbrauchbar. */
:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
  border-radius: var(--rund-1);
}

/* Wer Bewegung abbestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------------------
   Rahmen und Raster
   --------------------------------------------------------------------------- */

.s-rahmen {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--raum-5);
}

.s-rahmen--weit { max-width: var(--breite-weit); }

.s-stapel > * + * { margin-top: var(--raum-4); }
.s-stapel--weit > * + * { margin-top: var(--raum-6); }

.s-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-3);
  align-items: center;
}

/* ---------------------------------------------------------------------------
   Komponente 1 — Knopf
   --------------------------------------------------------------------------- */

.s-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--raum-2);
  padding: 0.65em 1.25em;
  border: 1px solid transparent;
  border-radius: var(--rund-2);
  background: var(--akzent);
  color: var(--auf-akzent);
  font: inherit;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.s-knopf:hover { background: var(--akzent-hell); color: var(--auf-akzent); }
.s-knopf:active { transform: translateY(1px); }

.s-knopf--still {
  background: transparent;
  color: var(--text);
  border-color: var(--linie-stark);
}
.s-knopf--still:hover {
  background: var(--grund-gesenkt);
  color: var(--text);
  border-color: var(--text-leise);
}

.s-knopf--schlicht {
  background: transparent;
  color: var(--akzent);
  padding-inline: var(--raum-2);
}
.s-knopf--schlicht:hover { background: var(--akzent-still); color: var(--akzent); }

.s-knopf--achtung { background: var(--acht); color: #fff; }
.s-knopf--achtung:hover { background: var(--acht); filter: brightness(1.1); color: #fff; }

.s-knopf[disabled],
.s-knopf[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Komponente 2 — Karte
   --------------------------------------------------------------------------- */

.s-karte {
  background: var(--grund-erhoben);
  border: 1px solid var(--linie);
  border-radius: var(--rund-3);
  padding: var(--raum-5);
  box-shadow: var(--schatten-1);
}

.s-karte__kopf {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-3);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--raum-3);
}

.s-karte__titel {
  font-size: var(--klein);
  font-weight: 600;
  margin: 0;
  line-height: var(--zeile-eng);
}

.s-karte__zeit {
  font-size: var(--winzig);
  color: var(--text-still);
  font-variant-numeric: tabular-nums;
}

.s-karte__fuss {
  margin-top: var(--raum-4);
  padding-top: var(--raum-4);
  border-top: 1px solid var(--linie);
}

/* Zitat eines echten Kommentars. Im Morgenstapel steht links das Original,
   rechts der Entwurf -- das Original bekommt deshalb eine eigene Form,
   damit man die beiden nie verwechselt. */
.s-zitat {
  border-left: 3px solid var(--linie-stark);
  padding: var(--raum-1) 0 var(--raum-1) var(--raum-4);
  margin: 0 0 var(--raum-4);
  color: var(--text-leise);
}

/* ---------------------------------------------------------------------------
   Komponente 3 — Tabelle
   --------------------------------------------------------------------------- */

/* Immer in diesen Behaelter wickeln. Eine Tabelle darf scrollen, die Seite
   nicht. */
.s-tabelle-huelle {
  overflow-x: auto;
  border: 1px solid var(--linie);
  border-radius: var(--rund-2);
  background: var(--grund-erhoben);
}

.s-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.s-tabelle th,
.s-tabelle td {
  text-align: left;
  padding: var(--raum-3) var(--raum-4);
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}

.s-tabelle thead th {
  background: var(--grund-gesenkt);
  font-size: var(--winzig);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-leise);
  white-space: nowrap;
  position: sticky;
  top: 0;
}

.s-tabelle tbody tr:last-child td { border-bottom: 0; }
.s-tabelle tbody tr:hover td { background: var(--grund-gesenkt); }

/* Zahlen gehoeren rechts und in gleiche Breite, sonst kann man Spalten
   nicht vergleichen. Genau dafuer braucht es keine zweite Schrift. */
.s-zahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Komponente 4 — Formular
   --------------------------------------------------------------------------- */

.s-feld { margin-bottom: var(--raum-5); }

.s-feld__marke {
  display: block;
  font-size: var(--winzig);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-bottom: var(--raum-2);
}

.s-feld__hinweis {
  font-size: var(--winzig);
  color: var(--text-still);
  margin-top: var(--raum-2);
}

.s-eingabe,
.s-auswahl,
.s-flaeche {
  width: 100%;
  padding: 0.6em 0.75em;
  background: var(--grund-gesenkt);
  color: var(--text);
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund-2);
  font: inherit;
  line-height: 1.4;
}

.s-flaeche { min-height: 8rem; resize: vertical; }

.s-eingabe::placeholder,
.s-flaeche::placeholder { color: var(--text-still); }

.s-eingabe:focus,
.s-auswahl:focus,
.s-flaeche:focus {
  border-color: var(--akzent);
  background: var(--grund-erhoben);
}

.s-eingabe[aria-invalid="true"],
.s-flaeche[aria-invalid="true"] { border-color: var(--acht); }

.s-wahl {
  display: flex;
  align-items: flex-start;
  gap: var(--raum-3);
  cursor: pointer;
  padding: var(--raum-2) 0;
}

.s-wahl input { margin-top: 0.3em; accent-color: var(--akzent); flex-shrink: 0; }

/* ---------------------------------------------------------------------------
   Komponente 5 — Hinweis

   Vier Toene. Jeder traegt seine Bedeutung im Namen, nicht in der Farbe --
   wer nur die Farbe liest, liest bei Farbenblindheit nichts.
   --------------------------------------------------------------------------- */

.s-hinweis {
  display: flex;
  gap: var(--raum-3);
  padding: var(--raum-4);
  border: 1px solid var(--linie);
  border-left-width: 3px;
  border-radius: var(--rund-2);
  background: var(--grund-erhoben);
  font-size: 0.95rem;
}

.s-hinweis__wort {
  font-weight: 600;
  white-space: nowrap;
}

.s-hinweis p:last-child { margin-bottom: 0; }

.s-hinweis--info    { border-left-color: var(--akzent); background: var(--akzent-still); }
.s-hinweis--gut     { border-left-color: var(--gut);    background: var(--gut-still); }
.s-hinweis--achtung { border-left-color: var(--acht);   background: var(--acht-still); }
.s-hinweis--still   { border-left-color: var(--linie-stark); }

.s-hinweis--info .s-hinweis__wort    { color: var(--akzent); }
.s-hinweis--gut .s-hinweis__wort     { color: var(--gut); }
.s-hinweis--achtung .s-hinweis__wort { color: var(--acht); }

/* Marke fuer einen Zustand in Listen und Tabellen */
.s-marke {
  display: inline-block;
  padding: 0.15em 0.55em;
  border-radius: 999px;
  font-size: var(--winzig);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--grund-gesenkt);
  color: var(--text-leise);
  border: 1px solid var(--linie);
}

.s-marke--gut     { background: var(--gut-still);    color: var(--gut);    border-color: transparent; }
.s-marke--achtung { background: var(--acht-still);   color: var(--acht);   border-color: transparent; }
.s-marke--akzent  { background: var(--akzent-still); color: var(--akzent); border-color: transparent; }

/* ---------------------------------------------------------------------------
   Komponente 6 — Navigation
   --------------------------------------------------------------------------- */

.s-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--grund) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
}

/* Fallback fuer Browser ohne color-mix: lieber deckend als unlesbar. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .s-nav { background: var(--grund); }
}

.s-nav__innen {
  display: flex;
  align-items: center;
  gap: var(--raum-5);
  min-height: 3.75rem;
  flex-wrap: wrap;
}

.s-wortmarke {
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  color: var(--text);
  text-decoration: none;
  margin-right: auto;
}

.s-nav__verweise {
  display: flex;
  gap: var(--raum-1);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.s-nav__verweise a {
  display: block;
  padding: var(--raum-2) var(--raum-3);
  border-radius: var(--rund-2);
  color: var(--text-leise);
  text-decoration: none;
  font-size: 0.95rem;
}

.s-nav__verweise a:hover {
  background: var(--grund-gesenkt);
  color: var(--text);
}

.s-nav__verweise a[aria-current="page"] {
  color: var(--akzent);
  background: var(--akzent-still);
  font-weight: 500;
}

.s-nav__konto {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  margin: 0;
}

.s-fuss {
  border-top: 1px solid var(--linie);
  margin-top: var(--raum-8);
  padding-block: var(--raum-5);
  font-size: var(--winzig);
  color: var(--text-leise);
}

.s-fuss a { color: inherit; }

/* ---------------------------------------------------------------------------
   Dashboard-Rahmen (Paket D2)

   Kein eigenes Layout-System, nur die vier Bausteine, die eine Bereichsseite
   braucht: Inhaltsbereich, Seitenkopf, Abschnitt, leerer Zustand. Alles
   andere sind die sechs Komponenten von oben.
   --------------------------------------------------------------------------- */

.s-inhalt { padding-block: var(--raum-6) var(--raum-7); }

.s-seitenkopf {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-3);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--raum-5);
}

.s-seitenkopf h1 {
  font-size: var(--mittel);
  margin: 0;
}

.s-seitenkopf__marke {
  font-size: var(--winzig);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-still);
  margin: 0 0 var(--raum-1);
}

.s-seitenkopf__zeit {
  font-size: var(--winzig);
  color: var(--text-still);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.s-abschnitt { margin-top: var(--raum-6); }
.s-abschnitt > h2 { margin-top: 0; }

/* Zahlenkacheln. Bewusst ohne Verlauf gegen die Vorperiode: Eine Zahl, die
   sich selbst bewertet, braucht eine Grundlage -- die gibt es erst nach
   zwei Wochen Betrieb. */
.s-zahlenreihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--raum-4);
}

.s-kachel {
  background: var(--grund-erhoben);
  border: 1px solid var(--linie);
  border-radius: var(--rund-3);
  padding: var(--raum-4);
}

.s-kachel__zahl {
  display: block;
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.s-kachel__marke {
  display: block;
  font-size: var(--winzig);
  color: var(--text-leise);
  margin-top: var(--raum-1);
}

/* Der leere Zustand ist ein eigener Baustein, kein Notbehelf: Der haeufigste
   Zustand eines gut laufenden Morgenstapels ist "nichts zu tun", und der
   darf nicht wie ein Fehler aussehen. */
.s-leerer-zustand {
  text-align: center;
  padding: var(--raum-7) var(--raum-4);
  border: 1px dashed var(--linie-stark);
  border-radius: var(--rund-3);
  background: var(--grund-erhoben);
}

.s-karte .s-leerer-zustand {
  border: 0;
  background: transparent;
  padding: var(--raum-5) 0;
}

.s-leerer-zustand__titel {
  font-weight: 600;
  margin: 0 0 var(--raum-2);
}

.s-leerer-zustand p { margin-left: auto; margin-right: auto; max-width: 26rem; }

.s-tabelle__leer {
  text-align: center;
  color: var(--text-leise);
  padding-block: var(--raum-6);
}

/* Filterzeile ueber einer Tabelle */
.s-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-4);
  align-items: flex-end;
}

.s-filter__feld { flex: 1 1 11rem; min-width: 0; }
.s-filter__feld .s-feld__marke { margin-bottom: var(--raum-2); }

/* ---------------------------------------------------------------------------
   Startseite (Paket C2)
   --------------------------------------------------------------------------- */

.s-held { padding-block: var(--raum-8) var(--raum-7); }
.s-held__marke { display: block; font-size: 1.1rem; margin-bottom: var(--raum-6); }
.s-held h1 { font-size: var(--gross); margin-bottom: var(--raum-5); }
.s-held__satz {
  font-size: var(--mittel);
  line-height: 1.5;
  color: var(--text-leise);
  margin-bottom: var(--raum-6);
}
.s-held__satz strong { color: var(--text); }

/* Quellenangabe unter Zahlen. Sie steht klein, aber sie steht da -- eine
   Zahl ohne Herkunft ist auf einer Verkaufsseite eine Behauptung. */
.s-quelle {
  font-size: var(--winzig);
  color: var(--text-still);
  margin-top: var(--raum-3);
  margin-bottom: var(--raum-5);
}

.s-schritte {
  counter-reset: schritt;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--raum-5);
}
.s-schritte li {
  counter-increment: schritt;
  position: relative;
  padding-left: 2.75rem;
  margin-bottom: var(--raum-5);
}
.s-schritte li::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.9rem;
  height: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--akzent-still);
  color: var(--akzent);
  font-size: 0.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.s-karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--raum-4);
}
.s-karten .s-karte__titel { margin-top: 0; }
.s-karten .s-karte p:last-child { margin-bottom: 0; }

.s-abschluss {
  border-top: 1px solid var(--linie);
  padding-top: var(--raum-6);
  margin-top: var(--raum-8);
}

/* ---------------------------------------------------------------------------
   Kleinkram
   --------------------------------------------------------------------------- */

.s-leise  { color: var(--text-leise); }
.s-still  { color: var(--text-still); }
.s-winzig { font-size: var(--winzig); }
.s-mitte  { text-align: center; }

/* Nur fuer Screenreader. */
.s-nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Videoplatz (Paket C3) ------------------------------------------------
   Ein Rahmen mit festem Seitenverhaeltnis, damit die Seite nicht springt,
   sobald spaeter wirklich ein Video darinsteht. Ohne `aspect-ratio`
   waechst der Kasten beim Einsetzen und schiebt alles darunter nach
   unten -- genau in dem Moment, in dem jemand liest. */
.s-video {
  aspect-ratio: 16 / 9;
  max-width: 100%;
  border: 1px solid var(--linie);
  /* --rund-3 wie bei der Karte, nicht --rund: Die Variable --rund gibt es
     nicht, die Skala heisst --rund-1 bis --rund-3. Der Browser meldet eine
     unbekannte Variable nicht, er laesst die Eigenschaft einfach weg -- der
     Kasten hatte deshalb scharfe Ecken neben lauter runden. Gefunden von
     scripts/pruefe_design.py am 14.09.2026. */
  border-radius: var(--rund-3);
  background: var(--grund-gesenkt);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.s-video__platz {
  max-width: 32rem;
  padding: var(--raum-5);
  text-align: center;
}
.s-video__wort {
  font-weight: 600;
  margin-bottom: var(--raum-3);
}
.s-video iframe, .s-video video {
  width: 100%; height: 100%; border: 0; display: block;
}

/* --- Zustaende, ausgeschrieben (Paket B1+) --------------------------------
   Die drei, die sonst fehlen und erst auffallen, wenn jemand mit der
   Tastatur navigiert oder ein Formular falsch ausfuellt. */

/* 1. Tastaturfokus. `:focus-visible` und nicht `:focus` -- sonst
      bekommt auch ein Mausklick den Ring, und Gestalter entfernen ihn
      daraufhin ganz. Genau so verschwindet Barrierefreiheit. */
a:focus-visible,
button:focus-visible,
.s-knopf:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 2. Formularfehler mit Text, nicht nur mit Farbe. Rot allein ist fuer
      rund acht Prozent der Maenner keine Information. */
.s-feld__fehler {
  display: flex; gap: var(--raum-2); align-items: baseline;
  color: var(--acht);
  font-size: var(--klein);
  margin-top: var(--raum-2);
}
.s-feld__fehler::before { content: "Fehler:"; font-weight: 600; }
.s-eingabe[aria-invalid="true"]:focus,
.s-flaeche[aria-invalid="true"]:focus { outline-color: var(--acht); }

/* 3. Der Wartezustand. Ein Knopf, der nach dem Klick aussieht wie
      vorher, wird zweimal gedrueckt -- und dann laeuft alles zweimal. */
.s-knopf[aria-busy="true"] {
  opacity: 0.7;
  pointer-events: none;
}
.s-knopf[aria-busy="true"]::after {
  content: " …";
}

/* Pflichtfeld sichtbar machen, ohne allein auf das Sternchen zu bauen. */
.s-feld__marke[data-pflicht]::after {
  content: " Pflichtfeld";
  font-weight: 400;
  color: var(--text-still);
  font-size: var(--winzig);
}

@media (max-width: 30rem) {
  :root { --text-groesse: 1rem; }
  .s-rahmen { padding-inline: var(--raum-4); }
  .s-karte { padding: var(--raum-4); }
  /* Auf dem Telefon nimmt ein 16:9-Kasten sonst ein Drittel des
     Bildschirms fuer einen Platzhalter ein. */
  .s-video { aspect-ratio: 4 / 3; }
}

/* ===========================================================================
   COMMENTORY-SPRACHE, angehaengt am 16.09.2026 auf Ansage Jonas.

   Anlass: "man kann die Webseite so wie sie jetzt ist nicht ernst nehmen".
   Die Vorgabe war ausdruecklich, es genauso zu machen wie commentory.de,
   einschliesslich der grossen Wortmarke unten.

   Warum als Schicht und nicht als Umbau: sistenta.css ist die EINZIGE
   Stilquelle fuer alle dreizehn Seiten UND fuer das Dashboard, und
   scripts/pruefe_sistenta_web.py verlangt, dass jede im HTML benutzte
   s-Klasse hier definiert ist. Getauscht werden deshalb die Werte der
   Marken-Tokens, nicht die Klassennamen -- damit erbt jede Seite die neue
   Optik, ohne dass eine einzige Klasse umbenannt wird.

   Was sich gegenueber Paket B1 bewusst aendert:
   - ZWEI Schriften statt einer. Newsreader traegt die Ueberschriften, Inter
     den Fliesstext. B1 hatte eine Schrift festgelegt, um eine zweite Datei
     zu sparen; die Vorgabe "wie Commentory" schlaegt das. scripts/pruefe_design.py
     prueft die alte Regel und meldet das, siehe Bericht.
   - Petrol (#14544e) weicht dem Gold-Ton von Commentory. Die drei
     Signalfarben gut/achtung bleiben unangetastet, die haengen am Dashboard.
   =========================================================================== */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/newsreader-300_700-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/newsreader-300_700-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
                 U+A720-A7FF;
}

/* Die Tokens stehen im ersten :root-Block ganz oben, nicht hier.
   Ein zweiter Satz daneben laeuft frueher oder spaeter auseinander. */


body { font-size: 1.0625rem; line-height: 1.58; }

h1, h2, h3 {
  font-family: var(--serife);
  font-weight: 400;
  letter-spacing: -.018em;
  line-height: 1.1;
  color: var(--text);
}
h2 { line-height: 1.14; }
h3 { font-size: 1.32rem; line-height: 1.2; letter-spacing: -.012em; }

/* Kornschleier ueber der ganzen Seite. Derselbe Kniff wie auf commentory.de:
   eine Rauschtextur als Data-URI, damit die grosse beige Flaeche nicht
   digital-glatt wirkt. Kein Bild, kein Ladevorgang. */
.s-rauschen {
  position: fixed; inset: 0; pointer-events: none; opacity: .030; z-index: 99;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

/* --- Navigation ------------------------------------------------------- */

.s-nav {
  background: color-mix(in srgb, var(--grund) 86%, transparent);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--linie);
}

/* Die Navigation laeuft ueber die volle Breite, nicht ueber die Lesebreite:
   mit dem Themenschalter passen Marke, Verweise und Knopf sonst nicht mehr
   in eine Zeile. So steht sie wie auf commentory.de. */
.s-nav__innen {
  padding-block: var(--raum-3);
  gap: var(--raum-5);
  max-width: var(--breite-weit);
}

.s-wortmarke {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--serife); font-weight: 500; font-size: 1.44rem;
  letter-spacing: -.01em; color: var(--text); text-transform: none;
}

/* Das Zeichen neben dem Namen: eine Sprechblase mit Lupengriff, dieselbe
   Bauart wie die Marke auf commentory.de, nur ohne Bilddatei. */
.s-marke__zeichen {
  width: 40px; height: 40px; border-radius: 14px; flex: none; position: relative;
  border: 1px solid var(--gold-rand);
  /* Der Verlauf ist beidseitig gedacht: Gold auf durchscheinend, statt
     Gold auf Weiss. Weiss wuerde in der dunklen Fassung eine helle Kachel
     in die Navigation setzen. */
  background: linear-gradient(145deg, rgba(184,147,90,.26), rgba(184,147,90,.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.s-marke__zeichen:before {
  content: ""; position: absolute; width: 17px; height: 14px;
  border: 2px solid var(--text); border-right-color: rgba(36,30,22,.28);
  border-radius: 9px 6px 9px 9px; left: 8px; top: 9px; transform: rotate(-4deg);
}
.s-marke__zeichen:after {
  content: ""; position: absolute; width: 9px; height: 2px; background: var(--akzent);
  transform: rotate(43deg); right: 5px; bottom: 8px; border-radius: 10px;
  box-shadow: -13px -1px 0 -0.5px rgba(36,30,22,.72);
}

.s-nav__verweise a { font-size: .9rem; font-weight: 500; color: var(--text-leise); }
.s-nav__verweise a:hover,
.s-nav__verweise a[aria-current="page"] { color: var(--akzent); }

/* --- Knoepfe ---------------------------------------------------------- */

.s-knopf {
  min-height: 48px; padding: 0 20px; border-radius: 14px;
  font-weight: 600; font-size: .94rem; letter-spacing: -.01em;
  background: var(--dunkel); border-color: var(--dunkel); color: var(--auf-dunkel);
  box-shadow: 0 12px 28px rgba(74, 55, 26, .18);
  transition: .25s ease;
}
.s-knopf:hover { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); transform: translateY(-2px); }

.s-knopf--still {
  background: var(--grund-erhoben); border-color: var(--linie);
  color: var(--text); box-shadow: none;
}
.s-knopf--still:hover {
  background: var(--akzent-still); border-color: var(--gold-rand);
  color: var(--text); transform: translateY(-2px);
}

/* --- Flaechen --------------------------------------------------------- */

.s-karte, .s-kachel {
  background: var(--grund-erhoben);
  border: 1px solid var(--linie);
  border-radius: var(--rund-3);
  padding: var(--raum-5);
}
.s-karte { transition: .25s ease; }
.s-karte:hover { border-color: var(--gold-rand); box-shadow: var(--schatten-1); }

.s-kachel__zahl {
  font-family: var(--serife); font-size: 2.6rem; font-weight: 400;
  letter-spacing: -.02em; line-height: 1;
}
.s-kachel__marke { color: var(--text-leise); font-size: .9rem; }

.s-hinweis { border-radius: var(--rund-2); background: var(--grund-erhoben); }
.s-hinweis__wort {
  font-family: var(--schrift); font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .11em; color: var(--akzent);
}

.s-abschnitt { margin-top: var(--raum-8); }

/* Rubrikzeile ueber einer Ueberschrift. */
.s-kicker {
  display: block; color: var(--akzent); font-weight: 600; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .11em; margin-bottom: var(--raum-3);
}

/* --- Held und Modell -------------------------------------------------- */

.s-held { padding-block: var(--raum-8) var(--raum-6); }
.s-held h1 { max-width: 20ch; }
.s-held__satz { max-width: 44ch; font-size: 1.22rem; line-height: 1.5; }

/* Das 3D-Modell. Hoehe steuert die Komponente selbst ueber clamp(), hier
   steht nur der Rahmen: volle Textbreite, gerundet wie eine Karte, und auf
   schmalen Geraeten schaltet das Attribut compact die Beschriftung um. */
.s-modell {
  margin-top: var(--raum-6);
  border: 1px solid var(--linie);
  border-radius: var(--rund-3);
  overflow: hidden;
  background: var(--grund-erhoben);
  box-shadow: var(--schatten-1);
}
.s-modell sistenta-landing { display: block; border-radius: inherit; }

.s-modell__unterschrift {
  font-size: var(--winzig); color: var(--text-still);
  margin-top: var(--raum-3);
}

/* Die Leiste ueber dem Modell. Zwei Knoepfe, mehr nicht: die Fassung
   wechseln und den Baustein gross aufziehen. Alles Weitere (drehen,
   anhalten, Knoten waehlen) bedient die Komponente selbst. */
/* Der Baustein: Leiste und Modell gehoeren zusammen und werden zusammen
   gross gezogen. */
.s-modell-block { margin-top: var(--raum-6); }

.s-modell__leiste {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: var(--raum-3);
}
.s-modell__rubrik {
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .11em; color: var(--akzent);
}
.s-modell__werkzeuge { display: flex; gap: var(--raum-2); }

.s-modell__knopf {
  min-height: 36px; padding: 0 13px; border-radius: 10px;
  border: 1px solid var(--linie-stark); background: transparent;
  color: var(--text-leise); font: inherit; font-size: 0.82rem;
  cursor: pointer; transition: .2s ease;
}
.s-modell__knopf:hover {
  border-color: var(--akzent); color: var(--akzent);
  background: var(--akzent-still);
}

.s-modell { margin-top: var(--raum-3); }

/* Gross aufgezogen, auf zwei Wegen. Der Browser mit Vollbild-Schnittstelle
   nimmt :fullscreen, sonst legt sich der Baustein als feste Flaeche ueber
   die Seite. Beide Wege brauchen dieselben Regeln, deshalb stehen sie
   zusammen. */
.s-modell:fullscreen,
.s-modell--gross {
  border-radius: 0; border: 0; box-shadow: none;
  background: var(--grund);
}
/* Feste Hoehe, kein Flex: die Komponente misst ihre Zeichenflaeche selbst
   und bekommt bei flex-Hoehe "auto" eine Flaeche von null gemessen -- der
   Baustein war dann leer. 60px bleiben fuer die Schliessen-Zeile. */
.s-modell:fullscreen sistenta-landing,
.s-modell--gross sistenta-landing {
  height: calc(100vh - 60px); min-height: 0; max-height: none;
}
.s-modell--gross {
  position: fixed; inset: 0; z-index: 200; margin: 0;
}

/* Der Weg zurueck. Er steht nur im aufgezogenen Zustand, denn eingebettet
   gibt es nichts zu schliessen -- und ohne ihn kaeme man nur mit Escape
   wieder heraus, was niemand raet. */
.s-modell__schliessen { display: none; }
.s-modell:fullscreen .s-modell__schliessen,
.s-modell--gross .s-modell__schliessen {
  display: flex; align-items: center; justify-content: center;
  width: fit-content; height: 40px; margin: 10px 14px 10px auto;
  min-height: 36px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--linie-stark); background: var(--grund-erhoben);
  color: var(--text); font: inherit; font-size: 0.82rem; cursor: pointer;
}
.s-modell:fullscreen .s-modell__schliessen:hover,
.s-modell--gross .s-modell__schliessen:hover {
  border-color: var(--akzent); color: var(--akzent);
}
/* Hier stand einmal eine Scroll-Sperre fuer den Koerper (overflow: hidden),
   solange der Baustein den Bildschirm fuellt. Sie ist wieder raus, und der
   Grund ist nicht Geschmack: mit overflow: hidden am Koerper meldet der
   IntersectionObserver der Komponente die feste Ueberlagerung als NICHT
   sichtbar, und die Komponente stellt daraufhin das Zeichnen ein -- der
   aufgezogene Baustein war leer. Gemessen am 16.09.2026, Screenshot mit
   und ohne Sperre. Die Seite darunter mitscrollen zu lassen kostet nichts,
   sie ist ohnehin vollstaendig verdeckt. */

/* Der Umschalter in der Navigation. Bewusst schmal und still: er ist eine
   Einstellung, kein Angebot. */
.s-thema {
  min-height: 36px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--linie); background: transparent;
  color: var(--text-leise); font: inherit; font-size: 0.82rem;
  font-weight: 500; cursor: pointer; transition: .2s ease;
}
.s-thema:hover { border-color: var(--akzent); color: var(--akzent); }

/* --- Der Name, ausgeschrieben ----------------------------------------- */

/* Die acht Buchstaben sind die Gliederung, nicht Schmuck: jeder steht fuer
   ein Wort des Namens. Deshalb eine Reihe aus acht Stuecken und keine
   Aufzaehlung mit Punkten. */
.s-akronym {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: var(--raum-3);
  margin-top: var(--raum-5);
  padding: 0; list-style: none;
}
.s-akronym__stueck {
  border-top: 2px solid var(--gold-rand);
  padding-top: var(--raum-3);
}
.s-akronym__buchstabe {
  display: block; font-family: var(--serife); font-size: 2.1rem;
  font-weight: 400; line-height: 1; color: var(--akzent);
}
.s-akronym__wort {
  display: block; margin-top: var(--raum-2);
  font-size: .96rem; color: var(--text-leise);
}
.s-akronym__wort--klein { color: var(--text-still); font-style: italic; }

/* --- Fussbereich mit grosser Wortmarke -------------------------------- */

.s-fuss {
  margin-top: var(--raum-8);
  padding-block: var(--raum-7) var(--raum-5);
  background: var(--grund-gesenkt);
  border-top: 1px solid var(--linie);
  font-size: .9rem;
}

/* Die Wortmarke in Grossbuchstaben ueber die volle Breite, als Umriss.
   Genau wie unten auf commentory.de: textLength zieht das Wort auf die
   Breite des Rahmens, damit es auf jedem Geraet buendig steht. */
.s-fuss__wortmarke {
  display: block; width: 100%; height: auto; margin-bottom: 8px;
  user-select: none;
}
.s-fuss__wortmarke text {
  font-family: var(--serife); font-weight: 500; font-size: 150px;
  fill: none; stroke: rgba(36, 30, 22, .20); stroke-width: 1;
}

.s-fuss__spalten {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: var(--raum-5) var(--raum-7);
  align-items: start;
  padding-block: var(--raum-6) var(--raum-5);
}
.s-fuss__titel {
  display: block; font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .11em; color: var(--akzent); margin-bottom: var(--raum-3);
}
.s-fuss__spalten a { display: block; color: var(--text-leise); margin-bottom: var(--raum-2); }
.s-fuss__spalten a:hover { color: var(--akzent); }
.s-fuss__text { color: var(--text-leise); max-width: 34ch; margin-top: var(--raum-3); }
.s-fuss__schluss {
  display: flex; flex-wrap: wrap; gap: var(--raum-3); justify-content: space-between;
  border-top: 1px solid var(--linie); padding-top: var(--raum-4);
  color: var(--text-still); font-size: var(--winzig);
}

/* Der Markenname im Fussbereich ist auch ein Verweis und faengt sich sonst
   das display:block der Spaltenverweise ein -- dann klappt das Zeichen
   daneben zusammen. Und Fussverweise tragen erst beim Zeigen einen Strich. */
.s-fuss__spalten .s-wortmarke {
  display: inline-flex; margin-bottom: 0; text-decoration: none;
}
.s-fuss__spalten a { text-decoration: none; }
.s-fuss__spalten a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 46rem) {
  .s-fuss__spalten { grid-template-columns: 1fr; }
}