/* ==========================================================================
   einfach vollstrecken – Gestaltung
   Herkunft: eigene Gestaltung
   Tintenblau, Papier- und Kalkweiß, Messing als sparsamer Akzent,
   Serifen-Titel, feine Linien; doppelter Abschlussstrich (Bildzeichen, Summen).
   --------------------------------------------------------------------------
   Aufbau
   - Wird auf jeder Seite NACH basis.css geladen und steht außerhalb der
     Cascade Layers. Darum gewinnt sie immer gegen basis.css – ohne !important.
   - Alle Regeln beginnen mit :root[data-vorschlag="a"] (steht fest im Markup).
   - Teil 1: Token (Farben, Schrift, Formen). Teil 2: gezielte Komponenten.
   - Formen im Prozess: Quadrat = Software, Kreis = Sie, Raute = andere
     Beteiligte. Fallakten-Ausschnitte (.ui-fallakte) tragen einen Aktenreiter.
   - Nur Farben, Hintergründe, Linien, Radien, Schatten, Schrift, Laufweite
     und dekorative ::before/::after; keine externen URLs oder Webfonts.
   - Farbpaare nach WCAG 2.2 AA (Kontrastwerte an den Token).
   ========================================================================== */

/* ==========================================================================
   1. TOKEN
   ========================================================================== */
:root[data-vorschlag="a"] {
  /* ---- Eigene Hilfsfarben (nur Grafik, nie für Text) ---- */
  --a-messing: #b0853a;               /* Messing: Linien, Abschlussstrich (3,1:1 auf Grund) */
  --a-messing-hell: #e2bc6e;          /* Messing auf Tintenblau */
  --a-logo-akzent: var(--a-messing);  /* doppelter Strich im Bildzeichen */

  /* ---- Farben nach Rollen ---- */
  --farbe-grund: #f7f5ef;             /* Kalkweiß, leicht warm */
  --farbe-flaeche: #fffefb;           /* Papierweiß für Karten und Felder */
  --farbe-flaeche-2: #efebe2;         /* Aktendeckel hell: Tabellenkopf, Fußzeile */
  --farbe-getoent: #e8ebf1;           /* zart tintenblau getönt */
  --farbe-text: #131a2b;              /* Tinte (Blauschwarz) */
  --farbe-text-leise: #4a5162;        /* Nebentext */
  --farbe-linie: #d8d2c4;             /* feine, warme Linie */
  --farbe-linie-stark: #807a6c;       /* Feldränder */
  --farbe-marke: #1c2f56;             /* Tintenblau */
  --farbe-marke-kontrast: #fffefb;
  --farbe-akzent: #81581a;            /* Messing, dunkle Textstufe (AA): Dachzeilen, „Sie“ */
  --farbe-akzent-kontrast: #fffefb;
  --farbe-link: var(--farbe-marke);
  --farbe-fokus: #2357c6;             /* klares Blau, deutlich vom Tintenblau unterscheidbar */

  /* Abgeleitete Farben – hier fest gesetzt, damit die Kontraste exakt stimmen */
  --farbe-marke-hover: #13223f;
  --farbe-marke-zart: #e5e9f1;
  --farbe-akzent-zart: #f4ead6;
  --farbe-auswahl: rgb(176 133 58 / 0.28);   /* Textmarker in Messing */

  /* Status (Text + zarte Fläche) */
  --farbe-erfolg: #1d6a3a;
  --farbe-erfolg-zart: #e4f1e6;
  --farbe-warnung: #894904;
  --farbe-warnung-zart: #faeed6;
  --farbe-fehler: #a3231c;
  --farbe-fehler-zart: #fbe7e4;
  --farbe-info: #1e4e9c;
  --farbe-info-zart: #e6ecf8;

  /* Dunkel: Tintenblau-Nacht mit Messing */
  --farbe-dunkel-grund: #101b33;
  --farbe-dunkel-flaeche: #182644;
  --farbe-dunkel-text: #f4f1e9;
  --farbe-dunkel-text-leise: #b9c0ce;
  --farbe-dunkel-linie: #2e3d5f;
  --farbe-dunkel-marke: #e2bc6e;          /* Primärknopf auf dunkel: Messing */
  --farbe-dunkel-marke-kontrast: #101b33;
  --farbe-dunkel-akzent: #e8cc93;
  --farbe-dunkel-fokus: #8fb5ff;
  --farbe-dunkel-erfolg: #8fd9a8;
  --farbe-dunkel-warnung: #f1c56c;
  --farbe-dunkel-fehler: #f6a8a3;
  --farbe-dunkel-info: #aac4f3;

  /* Handlungsband: klare Tintenblau-Nacht ohne Textur, hellerer Nebentext */
  --cta-text-leise: #c9d0dc;              /* 11,0 : 1 auf #101b33 */

  /* Kopfzeile */
  --kopf-grund: rgb(247 245 239 / 0.92);
  --kopf-rand: var(--farbe-linie);
  --kopf-unschaerfe: 10px;

  /* Mockups: Papier, kleine Radien, Aktenschatten */
  --ui-radius: 0.3125rem;
  --ui-papier: #fffdf6;
  --ui-schatten: 0 1px 0 rgb(19 26 43 / 0.04), 0 2px 4px rgb(19 26 43 / 0.05), 0 22px 40px -22px rgb(19 26 43 / 0.32);

  /* ---- Schriften ---- */
  --schrift-titel: "Source Serif 4", var(--schrift-serif);  /* Source Serif 4 (OFL, lokal), Rückfall System-Serife */
  --schrift-zahl: var(--schrift-text);         /* Beträge in Inter mit gleich breiten Ziffern */
  --schrift-merkmale: "kern", "calt";
  --titel-merkmale: "kern", "liga", "lnum";

  --zeilenhoehe-text: 1.62;
  --zeilenhoehe-titel: 1.14;
  --titel-gewicht: 600;
  --titel-laufweite: -0.012em;
  --dachzeile-groesse: var(--text-xs);
  --dachzeile-gewicht: 600;
  --dachzeile-laufweite: 0.14em;
  --dachzeile-transform: uppercase;
  --dachzeile-farbe: var(--farbe-akzent);

  /* ---- Formen: kleine Radien, feine Linien, kaum Schatten ---- */
  --radius-s: 0.1875rem;
  --radius-m: 0.3125rem;
  --radius-l: 0.5rem;
  --radius-xl: 0.75rem;
  --knopf-radius: 0.1875rem;
  --karte-radius: 0.3125rem;
  --chip-radius: 0.125rem;
  --eingabe-radius: 0.1875rem;
  --rahmen-breite: 1px;
  --schatten-1: 0 1px 0 rgb(19 26 43 / 0.05);
  --schatten-2: 0 1px 0 rgb(19 26 43 / 0.05), 0 10px 22px -12px rgb(19 26 43 / 0.22);
  --schatten-3: 0 2px 4px rgb(19 26 43 / 0.05), 0 24px 44px -20px rgb(19 26 43 / 0.28);
  --karte-schatten: none;
  --karte-schatten-hover: var(--schatten-2);
  --karte-rand: var(--rahmen-breite) solid var(--farbe-linie);

  /* ---- Knöpfe ---- */
  --knopf-gewicht: 600;
  --knopf-laufweite: 0.01em;

  /* ---- Icons, Bewegung ---- */
  --icon-strich: 1.6;
  --dauer: 180ms;
  --kurve: cubic-bezier(0.3, 0.1, 0.2, 1);
}

/* Logo-Akzent in dunklen Bereichen: helles Messing */
:root[data-vorschlag="a"] :is(.sektion--dunkel, .dunkel, .cta-band) {
  --a-logo-akzent: var(--farbe-dunkel-marke);
}

/* ==========================================================================
   2. KOMPONENTEN (gezielt, sparsam)
   ========================================================================== */

/* ---------- Logo und Deskriptor ---------- */
:root[data-vorschlag="a"] .logo { gap: 0.55em; }
:root[data-vorschlag="a"] .logo__zeichen { block-size: 1.9em; }
:root[data-vorschlag="a"] .logo .logo__akzent { stroke: var(--a-logo-akzent); }
:root[data-vorschlag="a"] .logo__wort { letter-spacing: -0.005em; font-weight: 400; }
:root[data-vorschlag="a"] .logo__wort b { font-weight: 700; }
:root[data-vorschlag="a"] :is(.kopf, .fuss) .logo__wort { font-size: 1.1875rem; }
/* Sehr schmale Geräte (bis 360 px): Logo etwas kleiner, damit „Menü“ neben dem Logo Platz hat */
@media (width < 22.6rem) {
  :root[data-vorschlag="a"] .kopf .logo__wort { font-size: 1.0625rem; }
  :root[data-vorschlag="a"] .kopf .logo__zeichen { block-size: 1.75em; }
}
:root[data-vorschlag="a"] .fuss .logo { font-size: var(--text-m); }
:root[data-vorschlag="a"] :is(.sektion--dunkel, .dunkel, .cta-band) .logo__zeichen { color: var(--farbe-text); }
:root[data-vorschlag="a"] .kopf__deskriptor { letter-spacing: 0.01em; }

/* ---------- Kopfzeile: Aktendeckel-Kante ---------- */
:root[data-vorschlag="a"] .kopf { border-block-start: 3px solid var(--farbe-marke); }
:root[data-vorschlag="a"] .kopf__menue-knopf { border-color: var(--farbe-linie-stark); }
@media (width >= 64rem) {
  :root[data-vorschlag="a"] .nav__panel { border-block-start: 3px solid var(--farbe-marke); }
  :root[data-vorschlag="a"] .nav__panel-titel { color: var(--farbe-akzent); letter-spacing: 0.12em; }
}

/* ---------- Dachzeile: kurzer Vorstrich wie in einem Aktenvermerk ---------- */
:root[data-vorschlag="a"] .dachzeile::before {
  content: "";
  flex: none;
  inline-size: 1.25rem;
  border-block-start: 1px solid currentColor;
}
:root[data-vorschlag="a"] .sektion__kopf--mitte .dachzeile::after {
  content: "";
  flex: none;
  inline-size: 1.25rem;
  border-block-start: 1px solid currentColor;
}

/* ---------- Hero: ruhiger Papiergrund, ohne Muster ---------- */
:root[data-vorschlag="a"] .hero {
  background-image: linear-gradient(180deg, var(--farbe-grund) 0%, var(--farbe-grund) 45%, color-mix(in oklab, var(--farbe-getoent) 55%, var(--farbe-grund)) 100%);
  border-block-end: var(--rahmen-breite) solid var(--farbe-linie);
}
:root[data-vorschlag="a"] .hero__titel { letter-spacing: -0.015em; }
:root[data-vorschlag="a"] .hero__titel em { font-style: italic; color: var(--farbe-marke); }
/* Hero-Titel am Desktop 3–4 Zeilen: Textspalte etwas breiter, Größe begrenzt (keine Trennung, siehe basis.css) */
@media (width >= 64rem) {
  :root[data-vorschlag="a"] .hero:not(.hero--zentriert) .hero__text { max-inline-size: 42rem; }
  :root[data-vorschlag="a"] .hero:not(.hero--klein) .hero__titel { font-size: min(var(--text-5xl), 4rem); }
}
/* Hinweise im Hero: schlichte Zeilen mit Symbol, untereinander, unter einer feinen Linie */
:root[data-vorschlag="a"] .hero__hinweis {
  flex-direction: column;
  gap: var(--abstand-1);
  padding-block-start: var(--abstand-4);
  border-block-start: var(--rahmen-breite) solid var(--farbe-linie);
}
:root[data-vorschlag="a"] .hero--zentriert .hero__hinweis { align-items: center; }
:root[data-vorschlag="a"] .hero__hinweis li { gap: var(--abstand-3); }
:root[data-vorschlag="a"] .hero__hinweis .icon { --icon-groesse: 1.125rem; }
/* Aktenstapel hinter den Produktausschnitten */
:root[data-vorschlag="a"] .hero__visual::before {
  content: "";
  position: absolute;
  inset: 1.25rem -0.625rem -0.625rem 1.25rem;
  border: var(--rahmen-breite) solid var(--farbe-linie);
  border-radius: var(--radius-m);
  background: var(--farbe-flaeche-2);
}
:root[data-vorschlag="a"] .hero__visual > * { position: relative; z-index: 1; }

/* ---------- Seitenkopf: kurzer doppelter Abschlussstrich unter der Einleitung ---------- */
:root[data-vorschlag="a"] .seitenkopf {
  border-block-end: var(--rahmen-breite) solid var(--farbe-linie);
  background-image: linear-gradient(180deg, var(--farbe-grund), color-mix(in oklab, var(--farbe-flaeche-2) 45%, var(--farbe-grund)));
}
:root[data-vorschlag="a"] .seitenkopf > .container::after {
  content: "";
  display: block;
  inline-size: 3.5rem;
  block-size: 5px;
  margin-block-start: var(--abstand-5);
  border-block: 1.5px solid var(--a-messing);
}

/* ---------- Sektionen ---------- */
:root[data-vorschlag="a"] .sektion--getoent,
:root[data-vorschlag="a"] .sektion--flaeche {
  border-block: var(--rahmen-breite) solid var(--farbe-linie);
}

/* ---------- Karten: ruhig, ohne Reiter (Reiter nur an Fallakten-Ausschnitten) ---------- */
:root[data-vorschlag="a"] .karte--hervor { border-block-start: 3px solid var(--farbe-marke); }
:root[data-vorschlag="a"] .karte__titel { font-weight: 600; }
:root[data-vorschlag="a"] .karte--rolle .karte__rolle { letter-spacing: 0.12em; }
:root[data-vorschlag="a"] .karte--rolle .karte__fragen li::before { border-radius: var(--radius-s); }
:root[data-vorschlag="a"] .karte--link:hover { border-color: var(--farbe-marke); }
:root[data-vorschlag="a"] .icon-box {
  border-radius: var(--radius-s);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--farbe-marke) 16%, transparent);
}
:root[data-vorschlag="a"] .icon-box--akzent {
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--farbe-akzent) 22%, transparent);
}

/* ---------- Knöpfe ---------- */
:root[data-vorschlag="a"] .knopf--primaer { box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.18); }
:root[data-vorschlag="a"] .knopf--sekundaer {
  background: transparent;
  color: var(--farbe-marke);
  border-color: var(--farbe-marke);
}
:root[data-vorschlag="a"] .knopf--sekundaer:hover {
  background: var(--farbe-marke-zart);
  border-color: var(--farbe-marke);
}
:root[data-vorschlag="a"] .mobil-cta .knopf--sekundaer { background: var(--farbe-flaeche); }

/* ---------- Chips: Etiketten statt Pillen ---------- */
:root[data-vorschlag="a"] .chip { font-family: var(--schrift-text); letter-spacing: 0.02em; }

/* ---------- Prozess: Formregel Quadrat = Software, Kreis = Sie, Raute = andere ---------- */
:root[data-vorschlag="a"] .schritt__nr { border-radius: var(--radius-s); }
:root[data-vorschlag="a"] .schritt--nutzer .schritt__nr {
  border-radius: 50%;
  background: var(--farbe-flaeche);
  color: var(--farbe-akzent);                         /* 6,2 : 1 auf Papierweiß */
  box-shadow: inset 0 0 0 2px var(--farbe-akzent);
}
:root[data-vorschlag="a"] .schritt--andere .schritt__nr { background: none; box-shadow: none; color: var(--farbe-text); }
:root[data-vorschlag="a"] .schritt--andere .schritt__nr::after {
  content: "";
  position: absolute;
  inset: 0.375rem;
  z-index: -1;
  rotate: 45deg;
  border: 2px solid var(--farbe-text-leise);           /* 7,3 : 1 – Grafik */
  border-radius: 2px;
  background: var(--farbe-flaeche);
}
:root[data-vorschlag="a"] .schritte--neutral .schritt__nr {
  font-family: var(--schrift-titel);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--farbe-marke);
}
:root[data-vorschlag="a"] .schritt__wer { color: var(--farbe-text-leise); letter-spacing: 0.1em; }
:root[data-vorschlag="a"] .schritt--nutzer .schritt__wer { color: var(--farbe-akzent); }
:root[data-vorschlag="a"] .schritt:not(:last-child)::before { inline-size: 1px; inset-inline-start: calc(1.25rem - 0.5px); background: var(--farbe-linie-stark); }
:root[data-vorschlag="a"] .schritte--neutral .schritt:not(:last-child)::before { background: var(--farbe-linie); }
@media (width >= 64rem) {
  :root[data-vorschlag="a"] .schritte--quer .schritt:not(:last-child)::before { inline-size: auto; block-size: 1px; }
}
:root[data-vorschlag="a"] .zeitstrahl__eintrag::before {
  inline-size: 0.8rem;
  block-size: 0.8rem;
  margin-block-start: 0.4rem;
  margin-inline-start: 0.1rem;
  border-radius: 1px;
  rotate: 45deg;
}
:root[data-vorschlag="a"] .zeitstrahl__eintrag:not(:last-child)::after { inline-size: 1px; inset-inline-start: calc(0.5rem - 0.5px); }

/* ---------- Tabellen: Beträge rechtsbündig, doppelter Summenstrich NUR unten ---------- */
:root[data-vorschlag="a"] .tabelle thead th { border-block-end-color: var(--farbe-linie-stark); letter-spacing: 0.06em; }
:root[data-vorschlag="a"] .tabelle tfoot :is(th, td) {
  border-block-start: var(--rahmen-breite) solid var(--farbe-text);
  border-block-end: 3px double var(--farbe-text);
}
:root[data-vorschlag="a"] .ui-tabelle tfoot :is(th, td) {
  border-block-start: var(--rahmen-breite) solid var(--ui-text);
  border-block-end: 3px double var(--ui-text);
}
:root[data-vorschlag="a"] :is(.tabelle, .vergleich, .ui-tabelle) :is(th, td).zahl { letter-spacing: 0; }

/* ---------- Kennzahlen: große Werte in der Titelschrift, Tintenblau-Linie darüber ---------- */
:root[data-vorschlag="a"] .kennzahl__wert { font-feature-settings: "lnum", "tnum"; }
:root[data-vorschlag="a"] .kennzahl--gross { border-block-start: 3px solid var(--farbe-marke); padding-block-start: var(--abstand-5); }
:root[data-vorschlag="a"] .kennzahl--gross .kennzahl__wert {
  font-size: clamp(2.75rem, 2rem + 3.5vw, 4.25rem);   /* kurze Zahlen: keine Trennung möglich, daher ohne --titel-grenze */
  font-family: var(--schrift-titel);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--farbe-marke);
}
:root[data-vorschlag="a"] .kennzahl--gross .kennzahl__einheit { font-family: var(--schrift-titel); font-weight: 400; color: var(--farbe-text); margin-inline-start: 0.2em; }
:root[data-vorschlag="a"] .kennzahl--gross .kennzahl__label { font-family: var(--schrift-titel); font-weight: 600; hyphens: manual; text-wrap: balance; }

/* ---------- Akkordeon ---------- */
:root[data-vorschlag="a"] .akkordeon__frage { font-family: var(--schrift-titel); font-weight: 600; }
:root[data-vorschlag="a"] .akkordeon__frage::after { border-radius: var(--radius-s); }

/* ---------- Recht und Vertrauen ---------- */
:root[data-vorschlag="a"] .quellenbox { border-inline-start-width: 3px; }
:root[data-vorschlag="a"] .quellenbox__titel { font-family: var(--schrift-titel); font-size: var(--text-m); font-weight: 600; }
:root[data-vorschlag="a"] .hinweis { border-inline-start-width: 3px; }
:root[data-vorschlag="a"] .hinweis__titel { font-family: var(--schrift-titel); font-weight: 600; }
:root[data-vorschlag="a"] .zitat__text { font-family: var(--schrift-titel); font-style: italic; font-weight: 400; }
:root[data-vorschlag="a"] .prosa blockquote { border-inline-start-color: var(--a-messing); font-family: var(--schrift-titel); font-style: italic; }
:root[data-vorschlag="a"] .tarif--hervorgehoben { border-block-start-width: 4px; }

/* ---------- Mockups: Aktendeckel-Kante, Serifen-Name ---------- */
:root[data-vorschlag="a"] .ui-fenster__leiste { border-block-start: 3px solid var(--ui-marke); }
:root[data-vorschlag="a"] .ui-titel { font-family: var(--schrift-titel); font-size: 1rem; font-weight: 600; letter-spacing: 0; }
:root[data-vorschlag="a"] .ui-blatt__titel { font-family: var(--schrift-titel); font-weight: 600; }
/* Aktenreiter: nur an der Fallakte. Das Fenster darf dafür oben überstehen; Ecken übernimmt die Leiste. */
:root[data-vorschlag="a"] .ui-fenster.ui-fallakte { overflow: visible; margin-block-start: 0.625rem; }
:root[data-vorschlag="a"] .ui-fallakte > .ui-fenster__leiste { border-start-start-radius: var(--ui-radius); border-start-end-radius: var(--ui-radius); }
:root[data-vorschlag="a"] .ui-fallakte::before {
  content: "";
  position: absolute;
  inset-block-start: calc(-0.625rem - 1px);
  inset-inline-start: 1rem;
  inline-size: 4.5rem;
  block-size: 0.75rem;
  background: var(--ui-marke);
  border-start-start-radius: var(--radius-s);
  border-start-end-radius: var(--radius-s);
  pointer-events: none;
}

/* ---------- Handlungsband: Tintenblau-Nacht, klar abgesetzt, Messingkante ---------- */
:root[data-vorschlag="a"] .cta-band {
  border-block-start: 4px solid var(--cta-marke);
  --dachzeile-farbe: var(--farbe-dunkel-akzent);
}
:root[data-vorschlag="a"] .cta-band__titel { font-size: min(var(--text-4xl), var(--titel-grenze)); }
:root[data-vorschlag="a"] .cta-band .knopf--sekundaer {
  color: var(--farbe-dunkel-text);
  border-color: var(--farbe-dunkel-text);
}
:root[data-vorschlag="a"] .cta-band .knopf--sekundaer:hover { background: var(--farbe-dunkel-flaeche); }

/* ---------- Fußzeile: Papier, doppelte Abschlusslinie ---------- */
:root[data-vorschlag="a"] .fuss { border-block-start: 4px double var(--farbe-marke); }
:root[data-vorschlag="a"] .fuss__titel {
  font-family: var(--schrift-titel);
  font-size: var(--text-m);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--farbe-text);
}
:root[data-vorschlag="a"] .fuss__claim { hyphens: none; }
:root[data-vorschlag="a"] .fuss__hinweis {
  background: var(--farbe-flaeche);
  border-inline-start: 3px solid var(--farbe-marke);
  border-radius: var(--radius-s);
}