@charset "UTF-8";
/* ============================================================================
   Orbis — Produktseite
   Farben, Schriftgrade und Abstände stammen aus den Merkmalen des Produkts
   (Orbis/Neuer Stand/src/Gestaltung/merkmale.mjs, gebaut nach dist/). Wer sie
   hier ändert, ändert sie überall. Hier stand bis zum 14.09.2026 der Pfad des
   Prototyps (packages/design-tokens); die Werte sind dieselben, die Quelle nicht.
   Kein externer Request: keine Webfonts, keine Skripte von fremden Servern.
   ========================================================================= */

:root {
  /* Flächen und Linien */
  --papier:      #fcfaf5;
  --flaeche:     #ffffff;
  --flaeche-2:   #f7f1e6;
  --flaeche-3:   #efe5d0;
  --linie:       #efe5d0;
  /* --linie-stark umrandet Eingabefelder, Zweitknoepfe, den Schema-Knopf und den
     Mengenwaehler. Stand bis zum 24.08.2026 auf #e2d2b2 und trug damit 1,43:1
     gegen das Papier und 1,49:1 gegen die Karte — WCAG 2.1, 1.4.11 verlangt fuer
     die Erkennbarkeit eines Bedienelements 3:1. Der Feldgrund allein traegt das
     nicht (gemessen 1,04:1 hell, 1,09:1 dunkel), der Rahmen muss es leisten.
     Verworfen: der Wert der Merkmalsquelle, creme[500] #b8a173 — der kommt nur
     auf 2,50:1 und faellt damit ebenfalls durch; die Quelle hat an dieser Stelle
     denselben Fehler. Verworfen auch: eine zweite Rolle nur fuer Bedienelemente,
     damit die zierenden Linien leise bleiben. Entschieden wurde bewusst dagegen,
     nach visuellem Vergleich beider Fassungen: eine Linienstaerke, ueberall. */
  --linie-stark: #7a6249;

  /* Schrift */
  --tinte:   #241b12;
  --tinte-2: #46372a;
  --tinte-3: #5d4b3a;
  --tinte-4: #7a6249;

  /* ---- Die Umkehrflaeche ---------------------------------------------------
     Fusszeile, Ausrufeblock, Sprechblase der Vorschau und der Sprungverweis
     liegen auf espressodunklem Grund. Diese Werte wechseln bewusst NICHT mit dem
     Farbschema — darin liegt ihr Sinn.

     Bis zum 24.08.2026 war der Grund var(--tinte). Der kippt im Dunkelmodus von
     fast schwarz auf fast weiss, die Vordergrundfarben aber nicht: Der Verweis
     im Fuss traf mit #f7f1e6 auf einen Grund von #f7f1e6 — gemessen 1,00:1,
     unsichtbar. Ein erster Anlauf hat die Vordergruende mitkippen lassen; das
     schloss vier Faelle und liess Gold (1,77:1), das Rot der Wortmarke (2,63:1
     hell und 3,39:1 dunkel) und den Knopfrahmen offen. Jede weitere Farbe, die
     dort landet, waere wieder eine Falle gewesen.

     Deshalb jetzt eine feste Flaeche: Was hell traegt, traegt auch dunkel — mit
     einem Wert statt zweien. Gemessen gegen --um-grund, gilt in beiden Modi:
     --um-tinte 16,23:1 · --um-2 10,56:1 · --um-3 4,61:1 · --um-gold 6,63:1
     --um-rot 7,04:1 · --um-rand 6,76:1.

     Was das kostet: Im Dunkelmodus setzt sich der Fuss nur noch mit 1,12:1 vom
     Blatt ab. Das ist kein Ausreisser, sondern das hausuebliche Mass — die Karte
     steht bei 1,09:1, die gedeckte Flaeche bei 1,03:1.

     Hier weicht die Seite bewusst von merkmale.mjs ab: Dort kippt
     `flaeche-umkehr` (hell espresso[900], dunkel creme[100]). Die Quelle regelt
     damit Sprechblasen in der Anwendung, nicht eine seitenbreite Fusszeile. Wer
     das spaeter bemerkt, soll es nicht stillschweigend zurueckdrehen. */
  --um-grund: #241b12;   /* espresso[900] — die Flaeche selbst */
  --um-tinte: #fcfaf5;   /* creme[50]     — Ueberschriften und Verweise */
  --um-2:     #d7cbb5;   /* espresso[150] — Fliesstext */
  --um-3:     #94836a;   /* espresso[350] — Rubriken und Kleingedrucktes */
  --um-gold:  #c69c3b;   /* gold[500]     — die Rubrik im Ausrufeblock */
  --um-rot:   #ec8d88;   /* rot[300]      — das Rot der Wortmarke */
  --um-linie: #42372a;   /* nacht[600]    — zierende Trennlinie, darf leise sein */
  --um-rand:  #b8a173;   /* creme[500]    — Knopfrahmen, braucht die 3:1 */
  --um-schub: #332920;   /* espresso[800] — Flaeche unter dem Zeiger */

  /* Bedeutungsfarben — dieselben wie in Orbis selbst.
     Getrennt nach Rolle: `--rot` ist Flaeche und Kante, `--rot-schrift` ist
     gelesener Text. Dieselbe Trennung fuehrt merkmale.mjs als `tat-haupt`
     gegen `kritisch-schrift`. Vorher gab es nur `--rot`, und im Dunkelmodus
     musste ein Ton beides leisten — was er nicht kann: Als Knopfflaeche muss er
     dunkel genug fuer helle Beschriftung sein, als Schrift hell genug gegen den
     dunklen Grund. `--rot-hell` stand hier ungenutzt und ist in dieser Rolle
     aufgegangen. */
  --rot:         #b81f28;   /* rot[600] — Flaeche des Hauptknopfs, Kanten */
  --tat-schrift: #fcfaf5;   /* creme[50] — Beschriftung auf dem roten Knopf.
                               Steht in beiden Modi gleich: Die Flaeche ist in
                               beiden Modi dunkles Rot. Stand vorher als fester
                               Hexwert in der Regel und war damit unauffindbar. */
  --rot-schrift: #971722;   /* rot[700] — Rot als Text */
  --rot-weich:   #fdf1f0;
  --gold:        #c69c3b;
  --gold-tief:   #7f5e1e;
  --gold-weich:  #f0dfae;
  --oliv:        #616f3e;
  --oliv-weich:  #eef0e2;
  /* `--azur` ist Marke und Bildzeichen, `--azur-schrift` ist Fahnentext auf
     weichem Azur: dort mass azur[500] nur 4,08:1 statt 4,5. azur[600] traegt
     mit 5,01:1. Im Dunkeln fallen beide Rollen zusammen — auf Nahschwarz traegt
     der Markenton bereits von allein, so steht es auch in der Quelle. */
  --azur:         #256abf;
  --azur-schrift: #1c5cab;
  --azur-weich:   #cde2fb;
  --ki:         #6b4fa8;
  /* Schrift AUF der violetten Flaeche — nicht zu verwechseln mit `--ki`, das
     die Flaeche und die Schrift auf weichem Violett ist. Im Dunkelmodus wird
     die Flaeche hell (violett[350]), also muss die Beschriftung dunkel werden:
     #fcfaf5 darauf mass 2,64:1. */
  --ki-schrift: #fcfaf5;
  --ki-weich:   #efe9f9;
  --ernst:      #9c4a22;
  --ernst-weich:#fbe3d6;

  /* Fokus: ein Doppelring, außen Gold, innen Espresso. Beide Werte wechseln
     bewusst NICHT mit dem Farbschema — genau darin liegt ihr Sinn: zwei Töne
     an entgegengesetzten Enden der Helligkeitsleiter, zwischen die kein Grund
     fällt. Deshalb stehen sie hier und nicht in den Schema-Blöcken. */
  --fokusring:       #d9b355;
  --fokusring-innen: #241b12;

  /* Schriftfamilien. Anzeige serifenbetont wie in den Orbis-Dokumenten,
     Fließtext in der Systemschrift wie in der Anwendung selbst. */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans:  "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --sans-anzeige: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono:  ui-monospace, "Cascadia Mono", "SF Mono", Consolas, Menlo, monospace;

  --schatten:   0 1px 2px rgba(36,27,18,.05), 0 10px 28px -18px rgba(36,27,18,.28);
  --schatten-2: 0 2px 6px rgba(36,27,18,.07), 0 24px 60px -30px rgba(36,27,18,.4);
  --rund: 4px;
  --rund-gross: 8px;
  --schwung: cubic-bezier(.16,1,.3,1);
  --breite: 1140px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-schema="hell"]) {
    --papier:      #12100c;
    --flaeche:     #1e1912;
    --flaeche-2:   #1a130d;
    --flaeche-3:   #241d16;
    --linie:       #332a20;
    /* espresso[350]. War #42372a und trug damit nur 1,51:1 gegen die Karte.
       Die Begruendung steht oben im Hellmodus. */
    --linie-stark: #94836a;
    --tinte:   #f7f1e6;
    --tinte-2: #d7cbb5;
    --tinte-3: #b0a189;
    --tinte-4: #94836a;
    /* Die Umkehrflaeche (--um-*) steht bewusst NICHT in diesem Block: Sie ist
       modusfest. Siehe die Begruendung oben in :root. */
    /* rot[500] statt rot[400]. Auf #de554f mass die Knopfbeschriftung 3,65:1
       statt der noetigen 4,5 — heller konnte sie nicht werden (creme[50] ist
       fast Weiss; selbst reines Weiss kaeme dort nur auf 3,81:1), also musste
       die Flaeche dunkler. Jetzt 4,92:1, und die Flaeche traegt gegen jeden
       Grund die 3:1 aus 1.4.11: 3,70:1 auf dem Blatt, 3,40:1 auf der Karte,
       3,58:1 auf der gedeckten Flaeche. rot[400] ist danach in keiner Rolle
       mehr in Gebrauch — dieselbe Runde hat merkmale.mjs am 24.08.2026 gedreht.
       Verworfen: #c54b46, der hellste Rotton, der die Beschriftung gerade noch
       traegt (4,50:1) — er unterscheidet sich vom Ruhezustand nur um 1,09:1. */
    --rot:         #cf2e31;
    --rot-schrift: #ec8d88;   /* rot[300] — Rot als Text, siehe :root */
    --rot-weich:   #3a1a1a;
    --gold:       #d9b355;
    --gold-tief:  #e6c877;
    --gold-weich: #3a2f16;
    --oliv:       #a0ad6f;
    --oliv-weich: #232a17;
    /* Marke und Text fallen im Dunkeln zusammen: Auf Nahschwarz traegt
       azur[300] bereits 6,34:1. So haelt es auch merkmale.mjs. */
    --azur:         #6da7ec;
    --azur-schrift: #6da7ec;
    --azur-weich:   #10233a;
    --ki:         #a88fdc;
    --ki-schrift: #241b12;   /* helle Flaeche, also dunkle Beschriftung: 6,15:1 */
    --ki-weich:   #241c38;
    --ernst:      #ec835a;
    --ernst-weich:#33200f;
    --schatten:   0 1px 2px rgba(0,0,0,.45), 0 10px 28px -18px rgba(0,0,0,.85);
    --schatten-2: 0 2px 6px rgba(0,0,0,.5), 0 24px 60px -30px rgba(0,0,0,.9);
  }
}
:root[data-schema="dunkel"] {
  --papier:#12100c; --flaeche:#1e1912; --flaeche-2:#1a130d; --flaeche-3:#241d16;
  --linie:#332a20; --linie-stark:#94836a;
  --tinte:#f7f1e6; --tinte-2:#d7cbb5; --tinte-3:#b0a189; --tinte-4:#94836a;
  /* Kein --um-* hier: die Umkehrflaeche ist modusfest, siehe :root. */
  --rot:#cf2e31; --rot-schrift:#ec8d88; --rot-weich:#3a1a1a;
  --gold:#d9b355; --gold-tief:#e6c877; --gold-weich:#3a2f16;
  --oliv:#a0ad6f; --oliv-weich:#232a17;
  --azur:#6da7ec; --azur-schrift:#6da7ec; --azur-weich:#10233a;
  --ki:#a88fdc; --ki-schrift:#241b12; --ki-weich:#241c38;
  --ernst:#ec835a; --ernst-weich:#33200f;
  --schatten:0 1px 2px rgba(0,0,0,.45), 0 10px 28px -18px rgba(0,0,0,.85);
  --schatten-2:0 2px 6px rgba(0,0,0,.5), 0 24px 60px -30px rgba(0,0,0,.9);
}

/* ---------- Grundlagen ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body {
  margin: 0; background: var(--papier); color: var(--tinte);
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: inherit; }
::selection { background: var(--gold-weich); color: var(--tinte); }
/* Der Fokus ist ein Doppelring: außen Gold als `outline` (2 px ab dem Rand),
   innen Espresso als `box-shadow`-Spreizung, die genau den `outline-offset`
   füllt — kein Spalt, keine Überlappung. Es genügt, dass einer von beiden
   trägt: auf hellem Grund der innere, auf dem roten Knopf der äußere.

   Hier stand bis zum 24.08.2026 ein einzelner Goldring. Der trug im Hellmodus
   auf KEINEM Grund die nach WCAG 2.1, 1.4.11 nötigen 3:1 — 2,45:1 gegen das
   Papier, 2,55:1 gegen die Karte, 2,52:1 auf dem roten Knopf, 2,04:1 auf der
   eingelassenen Fläche; im Dunkelmodus 1,91:1 auf dem roten Knopf. Diese Seite
   wirbt mit „Tastaturbedienung durchgehend", und die ist nichts wert, wenn man
   den Fokus nicht sieht. Schlechtester gemessener Fall ist jetzt 3,18:1. */
:focus-visible {
  outline: 2px solid var(--fokusring); outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--fokusring-innen); border-radius: 2px;
}

.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 24px; }
.huelle--schmal { max-width: 780px; }
.zum-inhalt {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--um-grund); color: var(--um-tinte); padding: 12px 18px; border-radius: 0 0 var(--rund) 0;
}
.zum-inhalt:focus { left: 0; }

/* ---------- Typografie ---------------------------------------------------- */
/* `overflow-wrap: break-word` ist das Sicherheitsnetz für ein einzelnes Wort, das
   breiter ist als sein Behälter: Es bricht NUR dann, wenn sonst nichts mehr geht,
   und lässt normalen Umbruch unberührt. Anlass: „Datenschutzerklärung" als H1 bei
   375 px (371 px Wort, 327 px Behälter) — das Blatt wurde waagerecht scrollbar.
   Das Wort trägt jetzt zusätzlich ein weiches Trennzeichen; diese Zeile fängt den
   nächsten Fall, an den heute niemand denkt. Verworfen: `hyphens: auto` für
   Überschriften — die Trennstellen der Browser sind im Deutschen unzuverlässig. */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; margin: 0; text-wrap: balance; overflow-wrap: break-word; }
h1 { font-size: clamp(2.35rem, 5.4vw, 3.65rem); line-height: 1.03; letter-spacing: -.018em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); line-height: 1.12; letter-spacing: -.012em; }
h3 { font-size: 1.14rem; line-height: 1.3; }
h4 { font-size: 1rem; line-height: 1.35; }
p  { margin: 0; }
.marke {
  font-family: var(--mono); font-size: .67rem; letter-spacing: .17em;
  text-transform: uppercase; color: var(--tinte-4);
}
/* Gelesener Text, also die Schriftrolle: `--rot` mass im Dunkelmodus nur
   3,70:1 auf dem Blatt. Mit rot[300] sind es 7,90:1. */
.marke b { color: var(--rot-schrift); font-weight: 700; }
.vorspann { font-size: clamp(1.06rem, 1.6vw, 1.19rem); color: var(--tinte-3); max-width: 64ch; line-height: 1.62; }
.hinweis { font-size: .83rem; color: var(--tinte-4); line-height: 1.55; }
.gross { font-size: 1.06rem; color: var(--tinte-2); }
strong { font-weight: 650; color: var(--tinte); }
.zahl { font-variant-numeric: tabular-nums; }

/* ---------- Kopfleiste ---------------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--linie);
}
.kopf__linie { height: 2px; background: var(--rot); width: 0; transition: width .1s linear; }
.kopf__reihe { display: flex; align-items: center; gap: 20px; height: 62px; }
.wortmarke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.wortmarke svg { width: 26px; height: 26px; flex: none; }
.wortmarke span { font-family: var(--serif); font-size: 1.24rem; font-weight: 600; letter-spacing: -.01em; }
.wortmarke small {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinte-4); border-left: 1px solid var(--linie-stark); padding-left: 9px; margin-left: 3px;
}
.kopf nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.kopf nav a {
  text-decoration: none; font-size: .875rem; color: var(--tinte-3);
  padding: 8px 11px; border-radius: var(--rund); transition: color .2s, background .2s;
}
.kopf nav a:hover { color: var(--tinte); background: var(--flaeche-2); }
.kopf nav a[aria-current="page"] { color: var(--tinte); font-weight: 600; }
.knopf-schema {
  border: 1px solid var(--linie-stark); background: transparent; color: var(--tinte-3);
  width: 34px; height: 34px; border-radius: var(--rund); cursor: pointer; flex: none;
  display: inline-flex; align-items: center; justify-content: center; margin-left: 6px;
}
.knopf-schema:hover { background: var(--flaeche-2); color: var(--tinte); }
/* Der Schema-Umschalter steht im HTML als leerer Knopf und wird erst vom Skript
   mit Zeichen und Beschriftung gefüllt. Ohne Skript bliebe ein leeres Kästchen
   stehen, das nichts tut — dann lieber gar nicht. Der Menüknopf trägt dieselbe
   Klasse, ist aber nie leer (er hat sein Zeichen im HTML). */
.knopf-schema:empty { display: none; }
.kopf__menue { display: none; }
@media (max-width: 900px) {
  /* 65 px = 2 px Fortschrittslinie + 62 px Reihe + 1 px Unterkante. Hier stand 62,
     und das ausgeklappte Menü überdeckte die untere Kante der Kopfzeile. */
  .kopf nav { position: fixed; inset: 65px 0 auto 0; flex-direction: column; align-items: stretch;
    background: var(--papier); border-bottom: 1px solid var(--linie); padding: 8px 16px 18px; gap: 0;
    max-height: calc(100vh - 65px); overflow-y: auto; }
  .kopf nav:not(.offen) { display: none; }
  .kopf nav a { padding: 13px 6px; border-bottom: 1px solid var(--linie); border-radius: 0; font-size: 1rem; }
  .kopf__menue { display: inline-flex; margin-left: auto; }
}

/* ---------- Knöpfe -------------------------------------------------------- */
.tat, .tat-2 {
  display: inline-flex; align-items: center; gap: 9px; justify-content: center;
  font: inherit; font-size: .93rem; font-weight: 600; text-decoration: none;
  padding: 12px 20px; border-radius: var(--rund); cursor: pointer;
  border: 1px solid transparent; transition: transform .18s var(--schwung), background .2s, border-color .2s;
}
.tat { background: var(--rot); color: var(--tat-schrift); }
.tat:hover { background: color-mix(in srgb, var(--rot) 88%, #000); transform: translateY(-1px); }
.tat-2 { background: transparent; color: var(--tinte); border-color: var(--linie-stark); }
.tat-2:hover { background: var(--flaeche-2); transform: translateY(-1px); }
.tat[disabled], .tat-2[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.tatreihe { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Abschnitte ---------------------------------------------------- */
section { padding: 84px 0; }
section.eng { padding: 60px 0; }
.abschnittskopf { display: flex; flex-direction: column; gap: 12px; margin-bottom: 36px; max-width: 68ch; }
.abschnittskopf .strich { height: 1px; background: var(--linie); margin-top: 6px; }
.gedeckt { background: var(--flaeche-2); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }

/* ---------- Karten -------------------------------------------------------- */
.raster { display: grid; gap: 16px; }
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.raster--4 { grid-template-columns: repeat(auto-fit, minmax(214px, 1fr)); }
.karte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund);
  padding: 24px 24px 26px; box-shadow: var(--schatten);
  display: flex; flex-direction: column; gap: 11px;
  transition: transform .28s var(--schwung), box-shadow .28s var(--schwung), border-color .2s;
}
.karte--hebt:hover { transform: translateY(-3px); box-shadow: var(--schatten-2); border-color: var(--linie-stark); }
.karte p { font-size: .92rem; color: var(--tinte-3); }
.karte__zeichen {
  width: 38px; height: 38px; border-radius: var(--rund); display: inline-flex;
  align-items: center; justify-content: center; margin-bottom: 3px;
}
.z-rot { background: var(--rot-weich); color: var(--rot-schrift); }
.z-gold { background: var(--gold-weich); color: var(--gold-tief); }
.z-oliv { background: var(--oliv-weich); color: var(--oliv); }
.z-azur { background: var(--azur-weich); color: var(--azur-schrift); }
.z-ki  { background: var(--ki-weich); color: var(--ki); }

/* ---------- Kennzahlen ---------------------------------------------------- */
.belege {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--rund); overflow: hidden;
}
.beleg { background: var(--flaeche); padding: 20px 20px 22px; }
.beleg dt { font-family: var(--mono); font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; color: var(--tinte-4); margin-bottom: 8px; }
.beleg dd { margin: 0; font-family: var(--serif); font-size: 1.62rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.beleg dd small { display: block; font-family: var(--sans); font-size: .78rem; color: var(--tinte-3); margin-top: 6px; line-height: 1.45; font-variant-numeric: normal; }

/* ---------- Listen -------------------------------------------------------- */
.striche { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.striche li { font-size: .93rem; color: var(--tinte-3); padding-left: 22px; position: relative; }
.striche li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 9px; height: 2px; background: var(--gold); }
.striche li b { color: var(--tinte); font-weight: 650; }
.haken li::before { content: ""; left: 3px; top: .35em; width: 6px; height: 11px; background: none;
  border: solid var(--oliv); border-width: 0 2px 2px 0; transform: rotate(42deg); }
.kreuze li::before { content: "\00d7"; background: none; left: 2px; top: 0; width: auto; height: auto;
  color: var(--tinte-4); font-size: 1.05rem; line-height: 1.5; }

/* ---------- Tabellen ------------------------------------------------------ */
.tafel { overflow-x: auto; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); box-shadow: var(--schatten); }
table { border-collapse: collapse; width: 100%; min-width: 540px; font-size: .91rem; }
thead th { text-align: left; padding: 13px 18px; font-family: var(--mono); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinte-4); background: var(--flaeche-2); border-bottom: 1px solid var(--linie); white-space: nowrap; }
tbody td { padding: 14px 18px; border-bottom: 1px solid var(--linie); vertical-align: top; color: var(--tinte-3); }
tbody tr:last-child td { border-bottom: 0; }
tbody td:first-child { color: var(--tinte); font-weight: 600; }

/* ---------- Fuß ----------------------------------------------------------- */
.fuss { background: var(--um-grund); color: var(--um-2); padding: 56px 0 30px; }
.fuss a { color: var(--um-tinte); text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
/* Diese beiden Regeln standen bis zum 24.08.2026 als style="color:#f7f1e6" und
   style="…color:#b0a189" in allen acht Blaettern mit Fusszeile. Feste Hexwerte
   im HTML sind aus zwei Gruenden schlecht: Sie kippen nicht mit dem Modus — der
   erste mass im Dunkelmodus 1,00:1, war also unsichtbar — und wer die Farben
   sucht, findet sie im Stylesheet nicht. */
.fuss .wortmarke { color: var(--um-tinte); }
.fuss__satz { font-size: .88rem; margin-top: 14px; max-width: 30ch; color: var(--um-3); }
.fuss__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 34px; }
.fuss h4 { font-family: var(--mono); font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; color: var(--um-3); font-weight: 600; margin-bottom: 14px; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: .9rem; }
.fuss__unten { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--um-linie); display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: .82rem; color: var(--um-3); align-items: center; }
.fuss__unten .schub { flex: 1; }

/* ---------- Erscheinen ---------------------------------------------------- */
.taucht { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--schwung), transform .7s var(--schwung); }
.taucht.da { opacity: 1; transform: none; }
/* Ohne Skript gäbe es kein `.da`, und die halbe Seite bliebe unsichtbar. Das
   Skript setzt deshalb als Erstes `html.mit-skript`; nur dann wird überhaupt
   ausgeblendet. Bis zum 14.09.2026 hing die Sichtbarkeit allein an einem
   Sicherheitsnetz im Skript — das hilft nicht, wenn das Skript gar nicht läuft. */
html:not(.mit-skript) .taucht { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .taucht { opacity: 1; transform: none; transition: none; } }

/* ---------- Merkmal (Bild + Text nebeneinander) --------------------------- */
.merkmal { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 44px; align-items: center; }
.merkmal--breit { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
@media (max-width: 860px) { .merkmal--breit { grid-template-columns: 1fr; } }
.bildrahmen { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); padding: 20px; box-shadow: var(--schatten); }

/* ---------- Merksatz ------------------------------------------------------ */
.merksatz {
  border-left: 3px solid var(--rot); background: var(--rot-weich);
  padding: 18px 22px; border-radius: 0 var(--rund) var(--rund) 0;
  font-family: var(--serif); font-size: 1.14rem; line-height: 1.45; color: var(--tinte);
}
.merksatz--gold { border-left-color: var(--gold); background: var(--gold-weich); }
.merksatz--oliv { border-left-color: var(--oliv); background: var(--oliv-weich); }
.merksatz--ki   { border-left-color: var(--ki);   background: var(--ki-weich); }

/* ---------- Fahne / Etikett ----------------------------------------------- */
.fahne {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono);
  font-size: .64rem; letter-spacing: .11em; text-transform: uppercase; font-weight: 600;
  padding: 5px 10px; border-radius: 999px; border: 1px solid;
}
.f-rot  { color: var(--rot-schrift); border-color: color-mix(in srgb, var(--rot) 40%, transparent); background: var(--rot-weich); }
.f-gold { color: var(--gold-tief); border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: var(--gold-weich); }
.f-oliv { color: var(--oliv); border-color: color-mix(in srgb, var(--oliv) 40%, transparent); background: var(--oliv-weich); }
.f-azur { color: var(--azur-schrift); border-color: color-mix(in srgb, var(--azur) 35%, transparent); background: var(--azur-weich); }
.f-ki   { color: var(--ki); border-color: color-mix(in srgb, var(--ki) 35%, transparent); background: var(--ki-weich); }
.f-grau { color: var(--tinte-4); border-color: var(--linie-stark); background: var(--flaeche-2); }

/* ---------- Aufmacher ----------------------------------------------------- */
.aufmacher { padding: 72px 0 60px; position: relative; }
.aufmacher__raster { display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr); gap: 52px; align-items: center; }
@media (max-width: 940px) { .aufmacher__raster { grid-template-columns: 1fr; gap: 40px; } }
.aufmacher h1 span { color: var(--tinte-4); display: block; }
.aufmacher .vorspann { margin-top: 22px; }
.aufmacher .tatreihe { margin-top: 30px; }
.aufmacher__fuss { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; gap: 8px 26px; }
.aufmacher__fuss span { font-size: .82rem; color: var(--tinte-4); display: inline-flex; align-items: center; gap: 8px; }
.punkt { width: 7px; height: 7px; border-radius: 50%; flex: none; }

/* ---------- Kreislauf-Bild ------------------------------------------------ */
.kreis-rahmen { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund-gross); padding: 14px; box-shadow: var(--schatten-2); }
.kreis-rahmen svg { display: block; width: 100%; height: auto; }
/* Die Ware zieht ihre Bahn: eine wandernde Strichelung, nichts sonst. Bei
   `prefers-reduced-motion` bleibt sie stehen — eine Strichelung ohne Bewegung
   ist immer noch ein Kreis. */
.fliess { stroke-dasharray: 5 9; animation: fliessen 2.4s linear infinite; }
@keyframes fliessen { to { stroke-dashoffset: -28; } }
@media (prefers-reduced-motion: reduce) { .fliess { animation: none; } }

/* ---------- Produktzeile -------------------------------------------------- */
.produkt {
  display: grid; grid-template-columns: 178px minmax(0,1fr) 196px; gap: 28px;
  padding: 26px 0; border-bottom: 1px solid var(--linie); align-items: start;
}
.produkt:last-child { border-bottom: 0; }
@media (max-width: 800px) { .produkt { grid-template-columns: 1fr; gap: 12px; } }
.produkt__name { font-family: var(--serif); font-size: 1.22rem; font-weight: 600; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.produkt__text { font-size: .93rem; color: var(--tinte-3); }
.produkt__text b { color: var(--tinte); }
.produkt__stand { font-size: .82rem; color: var(--tinte-4); }

/* ---------- Vergleich zwei Spalten ---------------------------------------- */
.gegen { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .gegen { grid-template-columns: 1fr; } }
.spalte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); padding: 22px 24px 24px; box-shadow: var(--schatten); display: flex; flex-direction: column; gap: 14px; }
.spalte--nachher { border-color: color-mix(in srgb, var(--rot) 42%, var(--linie)); }
.spalte h3 { display: flex; align-items: baseline; gap: 10px; }
.spalte h3 em { font-family: var(--mono); font-style: normal; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-4); }
.schritte { display: flex; flex-direction: column; gap: 6px; counter-reset: s; }
.schritte div { font-size: .87rem; color: var(--tinte-3); padding: 8px 12px 8px 34px; position: relative; background: var(--flaeche-2); border-radius: 2px; }
.schritte div::before { counter-increment: s; content: counter(s); position: absolute; left: 12px; top: 8px; font-family: var(--mono); font-size: .7rem; color: var(--tinte-4); }
.spalte--nachher .schritte div { background: var(--rot-weich); color: var(--tinte-2); }
/* Die Ziffer wird gelesen: auf weichem Rot mass `--rot` im Dunkeln 4,11:1. */
.spalte--nachher .schritte div::before { color: var(--rot-schrift); }
.spalte .summe { font-family: var(--serif); font-size: 1.42rem; margin-top: auto; padding-top: 8px; }
.spalte .summe small { display: block; font-family: var(--sans); font-size: .82rem; color: var(--tinte-3); margin-top: 3px; }

/* ---------- Zeitstrahl / Fahrplan ---------------------------------------- */
.strahl { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; display: flex; flex-direction: column; gap: 26px; }
.strahl::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--linie); }
.strahl li { position: relative; }
.strahl li::before { content: ""; position: absolute; left: -26px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--papier); border: 2px solid var(--linie-stark); }
.strahl li.fertig::before { background: var(--oliv); border-color: var(--oliv); }
.strahl li.laeuft::before { background: var(--gold); border-color: var(--gold); }
.strahl h4 { margin-bottom: 5px; }
.strahl p { font-size: .91rem; color: var(--tinte-3); }
.strahl .wann { font-family: var(--mono); font-size: .64rem; letter-spacing: .11em; text-transform: uppercase; color: var(--tinte-4); display: block; margin-bottom: 4px; }

/* ---------- Ausrufeblock -------------------------------------------------- */
.finale { background: var(--um-grund); color: var(--um-tinte); border-radius: var(--rund-gross); padding: 46px 44px 48px; }
.finale h2 { color: var(--um-tinte); }
.finale .marke { color: var(--um-gold); }
/* Ohne diese Zeile erbt die Wortmarke `.marke b { color: var(--rot) }` und
   traf mit rot[600] auf die dunkle Flaeche — gemessen 2,63:1. */
.finale .marke b { color: var(--um-rot); }
.finale p { color: var(--um-2); }
.finale .tat-2 { color: var(--um-tinte); border-color: var(--um-rand); }
.finale .tat-2:hover { background: var(--um-schub); }
@media (max-width: 620px) { .finale { padding: 32px 24px 34px; } }

/* ---------- Formular ------------------------------------------------------ */
.feldreihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
label { display: flex; flex-direction: column; gap: 7px; font-size: .84rem; font-weight: 600; color: var(--tinte-2); }
input, textarea, select {
  font: inherit; font-size: .93rem; font-weight: 400; color: var(--tinte);
  background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: var(--rund); padding: 11px 13px;
}
/* Bewusst `:focus` und nicht `:focus-visible`: Ein Eingabefeld darf seinen
   Fokus auch nach dem Mausklick zeigen — man tippt dort weiter. Dieselbe
   Geometrie wie oben, damit der Ring überall gleich aussieht. */
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--fokusring); outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--fokusring-innen); border-color: var(--fokusring);
}
textarea { min-height: 132px; resize: vertical; }

/* ---------- Beispielgespräch (Seite „Assistent“) -------------------------- */
.gespraech { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund);
  box-shadow: var(--schatten); overflow: hidden; }
.gespraech__kopf { padding: 12px 18px; background: var(--flaeche-2); border-bottom: 1px solid var(--linie);
  display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--tinte-3); }
.gespraech__leib { padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.sagt { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 12px; align-items: start; }
.sagt i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-weight: 700; font-size: .66rem; font-family: var(--mono); }
.sagt--mensch i { background: var(--gold-weich); color: var(--gold-tief); }
.sagt--ki i { background: var(--ki-weich); color: var(--ki); }
.sagt p { font-size: .93rem; color: var(--tinte-2); line-height: 1.55; }
.sagt p b { color: var(--tinte); }
.vorabbild { margin-top: 11px; border: 1px solid var(--ki); background: var(--ki-weich);
  border-radius: var(--rund); padding: 13px 15px; font-size: .88rem; color: var(--tinte-2); }
.vorabbild h4 { font-family: var(--mono); font-size: .61rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ki); margin-bottom: 8px; }
.vorabbild ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.vorabbild .knoepfe { display: flex; gap: 8px; margin-top: 12px; }
.vorabbild .knoepfe span { font-size: .8rem; font-weight: 600; padding: 6px 13px; border-radius: var(--rund); }
.vorabbild .ja { background: var(--ki); color: var(--ki-schrift); }
.vorabbild .nein { border: 1px solid var(--linie-stark); color: var(--tinte-3); }

/* ---------- Frage und Antwort -------------------------------------------- */
.fragen { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--linie);
  border-radius: var(--rund); overflow: hidden; background: var(--flaeche); box-shadow: var(--schatten); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen details:last-child { border-bottom: 0; }
.fragen summary { cursor: pointer; padding: 16px 20px; font-family: var(--serif); font-size: 1.04rem;
  font-weight: 600; list-style: none; display: flex; align-items: baseline; gap: 12px; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::before { content: "+"; font-family: var(--mono); color: var(--rot); font-size: 1rem; flex: none; }
.fragen details[open] summary::before { content: "\2212"; }
.fragen summary:hover { background: var(--flaeche-2); }
.fragen .antwort { padding: 0 20px 18px 52px; font-size: .93rem; color: var(--tinte-3); line-height: 1.6;
  display: flex; flex-direction: column; gap: 10px; }