/* ============================================================
   SKAG Partnerportal – Oberfläche
   Umgesetzt nach „SKAG Dashboard" (newDesign.zip, erste Fassung).

   Der Entwurf ist eine Arbeitskonsole, keine Broschüre. Alles, was
   hier steht, folgt aus vier Beobachtungen am gerenderten Entwurf:

     Hell und flächig   Grund #FAFAFA, Karten #FFFFFF. Kein Schatten
                        auf ruhenden Flächen.
     Feine Linien       1 px #E4E4E7 trennt Karten, 1 px #F1F1F2
                        trennt Zeilen innerhalb einer Karte.
     Kein Radius        Im gesamten Entwurf kommt keine einzige
                        border-radius-Angabe vor. Alles ist eckig.
     Zahlen sind Daten  Jede Zahl, Kennung und jedes Datum steht in
                        IBM Plex Mono: Beträge, Policen, Broker-Codes,
                        Kennzahlen, Zähler in der Navigation. Fließtext
                        steht in der Proportionalen.

   Der Burgunder #6B2334 ist streng rationiert. Er erscheint an fünf
   Stellen: Wortmarke, primäre Schaltfläche, gewählte Kachel, gewählter
   Navigationspunkt, hervorgehobener Balken im Diagramm. Sonst nirgends.

   Abweichungen vom Entwurf:

   1. Schriften vom eigenen Server statt von Google Fonts. Beim
      Einbinden über fremde CDNs geht die IP-Adresse jedes Besuchers
      dorthin – für ein Versicherungsportal in Deutschland keine gute
      Idee (LG München I, 3 O 17493/20).

   2. Der Entwurf lädt ausdrücklich nur IBM Plex Mono; die
      Proportionale bleibt offen und rendert mit der Systemschrift.
      Das sähe auf jedem Betriebssystem anders aus, deshalb hier
      IBM Plex Sans – die Schwester der einen Schrift, die der
      Entwurf festlegt.

   3. Ein Dunkelmodus fehlt im Entwurf. Übertragen heißt hier: dieselbe
      Zinn-Grauleiter, von unten gelesen. Der Burgunder wird dabei
      aufgehellt, weil #6B2334 auf dunklem Grund nicht mehr trägt.
   ============================================================ */

/* --- Schriften ------------------------------------------------
   Plex Sans ist ein Variable Font: eine Datei je Zeichensatz deckt
   400 bis 700 ab. Plex Mono liefert Google als Einzelschnitte.
   Geladen sind nur latin und latin-ext; Kyrillisch, Griechisch und
   Vietnamesisch wären rund 300 KB, die das Portal nie braucht. */
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('fonts/plexsans-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('fonts/plexsans-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; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/plexmono-400-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/plexmono-400-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; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/plexmono-500-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/plexmono-500-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; }

/* --- Token: hell (aus dem Entwurf gemessen) ------------------- */
:root {
  --grund:      #FAFAFA;   /* Seiten- und Inhaltsgrund, Seitenleiste */
  --flaeche:    #FFFFFF;   /* Karten, Tabellenzeilen, Kopfleiste */
  --flaeche-2:  #F4F4F5;   /* gedämpfte Füllung: Felder, neutrale Chips */
  --flaeche-3:  #E4E4E7;   /* eine Stufe tiefer: Schwebezustand darauf */

  --linie:       #E4E4E7;  /* Kartenrand */
  --linie-fein:  #F1F1F2;  /* Zeilentrenner innerhalb einer Karte */
  --linie-stark: #D4D4D8;

  --text:   #18181B;
  --text-2: #3F3F46;
  --text-3: #52525B;
  --leise:  #63636B;
  --fein:   #6E6E77;

  --burgund:       #6B2334;
  --burgund-tief:  #4E1826;
  --burgund-tint:  #F6EFF0;   /* Grund der gewählten Kachel */
  --burgund-linie: #D8C3C8;
  /* Diagrammserien: validierte Zwei-Stufen-Rampe (dieses Jahr, Vorjahr) */
  /* Produktlinien-Kennfarben ("Signal", gewählt 01.08.2026). Als
     kategoriale Palette geprüft: ΔE 20,3 bei normalem Sehen, 15,5 bei
     Rot-Grün-Schwäche. Eine vierte Linie braucht eine neue Prüfung –
     nicht einfach einen weiteren Farbton dazuerfinden. */
  --linie-element:    #A32B44;
  --linie-wb:         #2C6FA8;
  --linie-creditlife: #96690D;
  --diagramm-1: #6B2334;
  --diagramm-2: #C9A2AB;

  --invert:      #18181B;     /* gewählte Pille, Sprachschalter */
  --invert-text: #FFFFFF;

  /* Zustandsfarben, ebenfalls am Entwurf gemessen (Status-Chips). */
  --gut:#255C43;      --gut-flaeche:#DCEBE3;
  --warn:#6E5411;     --warn-flaeche:#F2E9CE;
  --schlecht:#8A2626; --schlecht-flaeche:#F4DEDE;
  --storno:#7A2E2E;   --storno-flaeche:#F4DEDE;
  --info:#274F79;     --info-flaeche:#DEE8F3;
  --neutral:#3F3F46;  --neutral-flaeche:#E7E7E9;

  --schatten-pop: 0 12px 28px rgba(24,24,27,.10);
  color-scheme: light;
}

/* --- Token: dunkel ------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grund:     #18181B;
    --flaeche:   #1F1F23;
    --flaeche-2: #26262A;
    --flaeche-3: #33333A;
    --linie:       #2E2E34;
    --linie-fein:  #26262A;
    --linie-stark: #3F3F46;
    --text:   #FAFAFA;
    --text-2: #D4D4D8;
    --text-3: #B4B4BC;
    --leise:  #8E8E97;
    --fein:   #8A8A93;
    --burgund:       #C97C8D;
    --burgund-tief:  #8E3247;
    --burgund-tint:  #2A1A1F;
    --burgund-linie: #6B3B46;
    --linie-element:    #CF6E85;
    --linie-wb:         #74A9DB;
    --linie-creditlife: #D4A33C;
    --diagramm-1: #C97C8D;
    --diagramm-2: #7E4552;
    --invert:      #FAFAFA;
    --invert-text: #18181B;
    --gut:#7FBE9C;      --gut-flaeche:#16241D;
    --warn:#D0AE5E;     --warn-flaeche:#282112;
    --schlecht:#DE8A8A; --schlecht-flaeche:#2B1919;
    --storno:#D08585;   --storno-flaeche:#2B1919;
    --info:#88AAD4;     --info-flaeche:#181F28;
    --neutral:#B4B4BC;  --neutral-flaeche:#26262A;
    --schatten-pop: 0 12px 28px rgba(0,0,0,.45);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --grund:     #18181B;
  --flaeche:   #1F1F23;
  --flaeche-2: #26262A;
  --flaeche-3: #33333A;
  --linie:       #2E2E34;
  --linie-fein:  #26262A;
  --linie-stark: #3F3F46;
  --text:   #FAFAFA;
  --text-2: #D4D4D8;
  --text-3: #B4B4BC;
  --leise:  #8E8E97;
  --fein:   #8A8A93;
  --burgund:       #C97C8D;
  --burgund-tief:  #8E3247;
  --burgund-tint:  #2A1A1F;
  --burgund-linie: #6B3B46;
  --linie-element:    #CF6E85;
  --linie-wb:         #74A9DB;
  --linie-creditlife: #D4A33C;
  --diagramm-1: #C97C8D;
  --diagramm-2: #7E4552;
  --invert:      #FAFAFA;
  --invert-text: #18181B;
  --gut:#7FBE9C;      --gut-flaeche:#16241D;
  --warn:#D0AE5E;     --warn-flaeche:#282112;
  --schlecht:#DE8A8A; --schlecht-flaeche:#2B1919;
  --storno:#D08585;   --storno-flaeche:#2B1919;
  --info:#88AAD4;     --info-flaeche:#181F28;
  --neutral:#B4B4BC;  --neutral-flaeche:#26262A;
  --schatten-pop: 0 12px 28px rgba(0,0,0,.45);
  color-scheme: dark;
}

/* --- Grundlagen ----------------------------------------------
   Der Radius steht global auf null: Im ganzen Entwurf kommt keine
   einzige Rundung vor, und eine einzelne durchgerutschte fiele
   sofort auf. */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }

body {
  margin: 0; min-height: 100vh;
  background: var(--grund); color: var(--text);
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
h1 { font-size: 41px; line-height: 1.02; letter-spacing: -0.028em; font-weight: 700; }
h2 { font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 12px; }
h3 { font-size: 16px; line-height: 1.3; letter-spacing: -0.01em; }
p  { margin: 0; }

a { color: var(--burgund); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Links im Fließtext dauerhaft in Burgund unterstreichen: Farbe allein
   hebt sie im Absatz zu wenig ab. Knöpfe und Kacheln bleiben außen vor. */
.karte p a:not(.knopf), .karte li a:not(.knopf), .karte td a:not(.knopf), .block a {
  text-decoration: underline;
  text-decoration-color: var(--burgund);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Zahlen, Kennungen, Daten: alles, was man vergleicht statt liest. */
.mono, .zahl {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

.lead    { color: var(--text-3); margin: 10px 0 24px; max-width: var(--lesebreite); }
.leise   { color: var(--leise); }
.hinweis { color: var(--leise); font-size: 13px; margin: 12px 0 0; }
.klein   { font-size: 13px; }
.mittig  { text-align: center; }
.abstand { margin-top: 20px; }

/* Etikett: das kleine gesperrte Versalwort. Im Entwurf trägt es
   jede Gliederungsebene – über dem Titel, über jedem Abschnitt,
   über jeder Navigationsgruppe, in jedem Tabellenkopf. */
.etikett, .tabelle th, .kachel-name {
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
/* Die Gruppentitel der Seitenleiste („Element / Parigon", „creditLife",
   „Verwaltung") standen bis 08/2026 in derselben Regel wie Tabellenköpfe
   und Kachelnamen und ließen sich deshalb nicht ändern, ohne die beiden
   mitzuziehen. Jetzt eigenständig: eine Stufe größer, 700 statt 600 und
   eine engere Laufweite, damit die Gliederung der Leiste beim Überfliegen
   sofort trägt. Die Farbe kommt bei Produktlinien aus der Kennfarbe
   (weiter unten), die Verwaltungsgruppe bleibt neutral. */
.seitenleiste-titel {
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
/* Abschnittstitel eine Stufe lauter: Sie gliedern die Seite, die
   Beschriftungen darüber benennen nur Felder. Werte aus dem Entwurf. */
.abschnitt-titel {
  font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.etikett { display: block; margin: 0 0 8px; color: var(--leise); }

/* --- Kopfleiste ---------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 12px 24px;
  background: var(--flaeche); border-bottom: 1px solid var(--linie);
}
.marke { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.marke:hover { text-decoration: none; }
.marke-zeichen {
  font-size: 16px; font-weight: 700; letter-spacing: .06em; color: var(--burgund);
}
/* Der senkrechte Strich zwischen Wortmarke und Zusatz. */
.marke-unter {
  padding-left: 14px; border-left: 1px solid var(--linie);
  font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--leise);
}

.kopf-werkzeuge { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 13px; }
.kopf-werkzeuge > a { color: var(--text-2); }
.kopf-werkzeuge > a:hover { color: var(--text); text-decoration: none; }
.kopf-partner { display: inline-flex; align-items: baseline; gap: 10px; color: var(--text-2); }
.kopf-partner strong { font-weight: 500; color: var(--text); }
.kopf-partner a { color: var(--text-2); text-decoration: underline; }

/* Sprach- und Darstellungswahl: Schalterkasten mit Rand, gewählter
   Zustand invertiert – im Entwurf schwarz auf weiß. */
.schaltergruppe { display: inline-flex; border: 1px solid var(--linie); }
.schalter {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; margin: 0; padding: 4px 8px;
  font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: .04em;
  color: var(--leise); background: var(--flaeche);
  border: 0; cursor: pointer; text-decoration: none;
}
.schalter + .schalter { border-left: 1px solid var(--linie); }
.schalter:hover { background: var(--flaeche-2); color: var(--text); text-decoration: none; }
.schalter[aria-pressed="true"] { background: var(--invert); color: var(--invert-text); }

/* --- Gerüst -------------------------------------------------- */
.rahmen { display: grid; grid-template-columns: 196px minmax(0, 1fr); align-items: start; }
@media (max-width: 1024px) { .rahmen { grid-template-columns: minmax(0, 1fr); } }

.seitenleiste {
  position: sticky; top: 46px;
  padding: 20px 0 24px; display: grid; gap: 22px; align-content: start;
  background: var(--grund); border-right: 1px solid var(--linie); min-height: calc(100vh - 46px);
}
@media (max-width: 1024px) {
  .seitenleiste { position: static; min-height: 0; border-right: 0; border-bottom: 0; padding: 8px 0 12px; }
}
.seitenleiste-gruppe { display: grid; gap: 1px; }
.seitenleiste-titel { margin: 0 0 6px; padding: 0 20px; color: var(--leise); }
.seitenleiste-liste { display: grid; }

.nav-punkt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 20px; color: var(--text-2); text-decoration: none; font-size: 14px;
  border-left: 3px solid transparent;
}
.nav-punkt:hover { background: var(--flaeche); color: var(--text); text-decoration: none; }
/* Wo man steht, muss man aus dem Augenwinkel sehen. Bis 08/2026 trug der
   aktive Punkt dieselbe Fläche wie der Schwebezustand – im Vorbeigehen war
   beides dasselbe. Jetzt tragen ihn vier Merkmale gemeinsam: eigene Fläche,
   kräftige Kante, halbfette Schrift und die Textfarbe des Titels. */
.nav-punkt-aktiv, .nav-punkt-aktiv:hover {
  background: var(--burgund-tint); color: var(--burgund); font-weight: 600;
  border-left-color: var(--burgund);
}
.nav-zahl {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px;
  font-variant-numeric: tabular-nums; color: var(--fein);
}
.nav-punkt-aktiv .nav-zahl { color: var(--burgund); }

.seitenleiste-fuss {
  margin: 6px 20px 0; color: var(--fein); font-size: 12px; line-height: 1.45;
  overflow-wrap: anywhere;
}

/* Impressum und Datenschutz. Seit die Fußzeile im angemeldeten Bereich weg
   ist, sind das hier die Pflichtlinks – zurückhaltend gesetzt, aber auf
   jeder Seite vorhanden und ohne Umweg erreichbar. */
.seitenleiste-recht {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  margin: 10px 20px 0; font-size: 12px;
}
.seitenleiste-recht a { color: var(--fein); text-decoration: none; }
.seitenleiste-recht a:hover { color: var(--text-2); text-decoration: underline; }

/* --- Inhalt -------------------------------------------------- */
main { min-width: 0; padding: 24px 32px 48px; }
@media (max-width: 600px) { main { padding: 16px 16px 32px; } }

/* Auch verschachtelt: Ein Abschnitt mit .karte innerhalb eines
   Plattenstapels braucht dieselbe Fläche und Kante wie eine Seitenkarte. */
.karte { background: var(--flaeche); border: 1px solid var(--linie); padding: 20px 24px 24px; }
main > .karte { padding: 24px 24px 32px; }

/* Breite Seiten: kein Kartenkasten, sondern gestapelte Abschnitte. */
main > .karte-breit { background: none; border: 0; padding: 0; display: grid; gap: 22px; }
main > .karte-breit > * { margin: 0; }

/* Seitenkopf: Etikett, Titel, rechts die Einordnung. */
.seitenkopf {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding-bottom: 16px; border-bottom: 1px solid var(--linie);
}
.seitenkopf-zahl {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; color: var(--leise); white-space: nowrap; padding-bottom: 4px;
}
.ruecksprung { margin: 0 0 8px; font-size: 12px; }
.ruecksprung a { color: var(--leise); }

/* Abschnittsüberschrift mit rechtsbündigem Hinweis. */
.abschnitt-titel {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  margin: 0 0 10px; color: var(--text);
}
.abschnitt-titel .leise { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; }

/* Anmeldung, Einrichtung, Hinweise: schmale Spalte. */
.schmal { max-width: 420px; margin: 48px auto; padding: 0 20px; }
.schmal > .karte { padding: 32px 28px; }
.schmal h1 { font-size: 26px; }

.fuss {
  padding: 16px 32px 24px; color: var(--fein); font-size: 12px;
  border-top: 1px solid var(--linie);
}
.fuss a { color: var(--leise); }
.fuss-schmal { max-width: 420px; margin: 0 auto; padding: 16px 20px 24px; border-top: 0; }

/* --- Formulare ----------------------------------------------- */
.feld + .feld { margin-top: 14px; }
.feld label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--text-2); }

input[type=text], input[type=email], input[type=password], input[type=search],
input[type=url], input[type=tel], input[type=number], input[type=date],
input[type=file], select, textarea {
  width: 100%; padding: 8px 12px;
  font-size: 14px; font-family: inherit; line-height: 1.45;
  color: var(--text); background: var(--flaeche);
  border: 1px solid var(--linie); appearance: none;
}
select {
  padding-right: 32px;
  background-image: linear-gradient(45deg, transparent 50%, var(--leise) 50%),
                    linear-gradient(135deg, var(--leise) 50%, transparent 50%);
  background-position: calc(100% - 16px) 53%, calc(100% - 11px) 53%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
textarea { min-height: 110px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--fein); }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--text-3); box-shadow: inset 0 0 0 1px var(--text-3); }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--burgund); }
input[type=file] { padding: 8px 10px; font-size: 13px; color: var(--text-3); }

.code-feld {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 23px; letter-spacing: 9px; text-align: center; font-weight: 500;
}
.code-feld-wort {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 16px; letter-spacing: 2px; text-align: center; font-weight: 400;
}

button, .knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 16px; padding: 8px 16px;
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--invert-text); background: var(--burgund);
  border: 1px solid var(--burgund); cursor: pointer; text-align: center; text-decoration: none;
}
button, .knopf { color: #fff; }
button:hover, .knopf:hover { background: var(--burgund-tief); border-color: var(--burgund-tief); color: #fff; text-decoration: none; }

button.zweitrangig, .knopf.zweitrangig {
  margin-top: 8px;
  color: var(--text-2); background: var(--flaeche); border-color: var(--linie);
}
button.zweitrangig:hover, .knopf.zweitrangig:hover { background: var(--flaeche-2); color: var(--text); border-color: var(--linie-stark); }

.knopf-schmal { width: auto; margin-top: 10px; padding: 6px 12px; font-size: 12px; }

.wahl, .kontrollfeld { display: flex; align-items: center; gap: 9px; padding: 6px 0; color: var(--text-2); cursor: pointer; }

/* --- Meldungen ----------------------------------------------- */
.meldung { padding: 12px 14px; margin: 0 0 12px; border: 1px solid transparent; font-size: 13px; }
.meldung-fehler  { background: var(--schlecht-flaeche); color: var(--schlecht); border-color: var(--schlecht-flaeche); }
.meldung-neutral { background: var(--neutral-flaeche);  color: var(--neutral);  border-color: var(--neutral-flaeche); }
.meldung-erfolg  { background: var(--gut-flaeche);      color: var(--gut);      border-color: var(--gut-flaeche); }
.meldung-warnung { background: var(--warn-flaeche);     color: var(--warn);     border-color: var(--warn-flaeche); }
.meldung a { color: inherit; text-decoration: underline; }
/* In Meldungen erbt auch die Unterstreichung die Meldungsfarbe – die
   Burgund-Regel für Fließtext-Links greift hier sonst hinein. */
.karte p.meldung a { text-decoration-color: currentColor; }

/* --- Blöcke (Listen ohne Tabelle) ----------------------------
   Aufeinanderfolgende Blöcke teilen sich ihre Kante, damit keine
   doppelte Linie entsteht. */
.block { background: var(--flaeche); border: 1px solid var(--linie); padding: 14px 16px; }
.block + .block { border-top: 0; }
/* Überschrift direkt nach einer Block-Liste braucht Luft nach oben
   (h2 hat global keinen oberen Rand), z. B. „Kollegen einladen" im Team. */
.block + h2 { margin-top: 28px; }
.block-gestrichelt { background: var(--grund); color: var(--text-3); }
.block-mitteilung { border-color: var(--burgund-linie); background: var(--burgund-tint); }
.block a { color: var(--text); }
.block a:hover { color: var(--burgund); }

/* --- Kennzahl-Kacheln ----------------------------------------
   Ein umrandeter Kasten, innen durch 1-px-Fugen geteilt: Der
   Behälter liefert die Linienfarbe, die Kacheln decken sie ab. */
/* Die Linien sitzen an den Kacheln, nicht als Grund unter einer Fuge.
   Sonst bliebe in der letzten Reihe die unbesetzte Zelle als grauer
   Block stehen – die Zahl der Kacheln schwankt, weil Gruppen ohne
   Vorgänge ausgelassen werden. */
.kacheln {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--linie); border-left: 1px solid var(--linie);
}
@media (max-width: 1024px) { .kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.kachel {
  /* Spalte statt Block: Bricht ein langer Name auf zwei Zeilen
     ("Storniert (Nichtzahlung)"), bleibt die Zahl trotzdem auf der
     Grundlinie aller anderen Kacheln. */
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
  background: var(--flaeche); padding: 12px 16px 16px;
  color: inherit; text-decoration: none;
  border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
}
a.kachel:hover { background: var(--grund); text-decoration: none; }

.kachel-name { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; color: var(--text-2); }
.kachel-name::before { content: ''; width: 6px; height: 6px; flex: 0 0 auto; background: var(--neutral); }
.kachel-wert {
  display: block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 26px; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.kachel-unter { display: block; margin-top: 4px; font-size: 12px; color: var(--leise); }

/* Die gewählte Kachel ist der Filter, der gerade greift. */
.kachel-aktiv, a.kachel-aktiv:hover {
  background: var(--burgund-tint); box-shadow: inset 0 0 0 1px var(--burgund);
}
.kachel-aktiv .kachel-wert { color: var(--burgund); }
.kachel-aktiv .kachel-name { color: var(--burgund); }
.kachel-aktiv .kachel-name::before { background: var(--burgund); }

.kachel-gut     .kachel-name::before { background: var(--gut); }
.kachel-warn    .kachel-name::before { background: var(--warn); }
.kachel-bad     .kachel-name::before { background: var(--schlecht); }
.kachel-info    .kachel-name::before { background: var(--info); }
.kachel-neutral .kachel-name::before { background: var(--neutral); }

/* Der Zustand trug bisher ein 6×6-Punkt allein; über eine Reihe von
   zehn Kacheln hinweg war er kaum zu sehen. Jetzt zusätzlich eine
   Kante an der Oberseite: Die Reihe lässt sich überfliegen, ohne die
   Namen zu lesen. Der Name steht weiterhin daneben – Farbe ist nie
   der einzige Träger der Aussage. */
.kachel { border-top: 3px solid var(--linie); }
.kachel-gut     { border-top-color: var(--gut); }
.kachel-warn    { border-top-color: var(--warn); }
.kachel-bad     { border-top-color: var(--schlecht); }
.kachel-info    { border-top-color: var(--info); }
.kachel-neutral { border-top-color: var(--linie-stark); }
.kachel-aktiv   { border-top-color: var(--burgund); }
/* Die Kacheln sitzen in einem Raster, dessen Linien aus den Kacheln
   selbst kommen – die obere Kante ersetzt dort die Rasterlinie. */
.kacheln { border-top: 0; }

/* --- Bereichs-Kacheln auf der Startseite --------------------- */
.bereichs-kacheln {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  border-top: 1px solid var(--linie); border-left: 1px solid var(--linie);
}
.bereichs-kachel {
  display: block; background: var(--flaeche); padding: 16px 16px 16px;
  color: inherit; text-decoration: none;
  border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
}
.bereichs-kachel:hover { background: var(--grund); text-decoration: none; }
.bereichs-kachel .kachel-name { margin: 0 0 8px; }
.bereichs-kachel-titel { display: block; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }

/* --- Datentabellen ------------------------------------------- */
.tabellen-rahmen { overflow-x: auto; background: var(--flaeche); border: 1px solid var(--linie); }
.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabelle th {
  text-align: left; padding: 10px 14px; white-space: nowrap;
  color: var(--leise); border-bottom: 1px solid var(--linie);
}
.tabelle td { padding: 12px 14px; vertical-align: top; color: var(--text-2); border-bottom: 1px solid var(--linie-fein); }
.tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle tbody tr:hover td { background: var(--grund); }
.zeilenklick-aktiv tbody tr { cursor: pointer; }
/* Eingangsdatum, Police, Broker und Beträge sind Daten, kein Text. */
.tabelle td:first-child { color: var(--text); }
.tabelle td.zahl, .tabelle td:first-child {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.tabelle .rechts, .tabelle th.rechts { text-align: right; }

.blaettern { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: center; margin-top: 14px; font-size: 13px; }

/* Seitenauswahl in der Blätterleiste. Das Auswahlfeld bleibt schmal – es
   trägt nur eine Zahl –, damit die Zeile nicht auseinanderfällt. */
.seitenwahl { display: flex; align-items: center; gap: 8px; margin: 0; }
.seitenwahl label, .seitenwahl > span { color: var(--leise); white-space: nowrap; }
.seitenwahl select {
  padding: 4px 6px; font: inherit; font-family: 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--text); background: var(--flaeche);
  border: 1px solid var(--linie-stark); border-radius: 0;
}
.seitenwahl select:focus-visible { outline: 2px solid var(--burgund); outline-offset: 1px; }

/* --- Statusanzeigen ------------------------------------------ */
.status {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 4px 8px; font-size: 12px; font-weight: 500;
  background: var(--neutral-flaeche); color: var(--neutral);
}
.status::before { content: ''; width: 6px; height: 6px; flex: 0 0 auto; background: currentColor; }

.status-aktiv, .status-cl-abgeschlossen,
.status-tick-wartet_auf_partner              { background: var(--gut-flaeche);      color: var(--gut); }
.status-lead, .status-cl-neu,
.status-tick-offen                           { background: var(--info-flaeche);     color: var(--info); }
.status-pruefung, .status-datenfehler, .status-cl-angesehen,
.status-tick-in_arbeit                       { background: var(--warn-flaeche);     color: var(--warn); }
.status-abgelehnt, .status-widerruf,
.status-cl-abgebrochen                       { background: var(--schlecht-flaeche); color: var(--schlecht); }
.status-nichtzahlung                         { background: var(--storno-flaeche);   color: var(--storno); }
.status-doublette, .status-gekuendigt, .status-test,
.status-sonstige, .status-cl-unbekannt,
.status-tick-geschlossen                     { background: var(--neutral-flaeche);  color: var(--neutral); }
/* Vorprüfung (db/007): zweite Achse neben dem Lebenszyklus. „offen" ist
   kein Mangel, sondern ein Noch-nicht – deshalb neutral und nicht warnend. */
.status-vorpruefung-ok                             { background: var(--gut-flaeche);      color: var(--gut); }
.status-vorpruefung-offen                          { background: var(--neutral-flaeche);  color: var(--neutral); }
.status-vorpruefung-korrigierbar                   { background: var(--warn-flaeche);     color: var(--warn); }
.status-vorpruefung-abgelehnt                      { background: var(--schlecht-flaeche); color: var(--schlecht); }
.status-vorpruefung-fehler                         { background: var(--info-flaeche);     color: var(--info); }

/* Sperrliste: aktiv = wirksame Sperre (rot), abgelaufen/beendet = Historie. */
.status-sperr-aktiv                          { background: var(--schlecht-flaeche); color: var(--schlecht); }
.status-sperr-abgelaufen                     { background: var(--neutral-flaeche);  color: var(--neutral); }
.status-sperr-beendet                        { background: var(--neutral-flaeche);  color: var(--neutral); }

.marke-neu, .marke-vermerk, .marke-dringend, .marke-orga, .marke-mail {
  display: inline-flex; align-items: center; padding: 2px 8px; vertical-align: 1px;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.marke-neu      { background: var(--burgund-tint);     color: var(--burgund); }
.marke-orga     { background: var(--neutral-flaeche);   color: var(--neutral); }
.marke-vermerk  { background: var(--warn-flaeche);     color: var(--warn); }
.marke-dringend { background: var(--schlecht-flaeche); color: var(--schlecht); }
/* Zurückhaltend: Der Weg einer Nachricht ist eine Randnotiz, kein Warnhinweis. */
.marke-mail     { background: var(--neutral-flaeche);  color: var(--neutral); }

/* --- Werkzeugzeile (Suche, Filter) ---------------------------
   Im Entwurf sitzt sie als Leiste oben in der Tabellenkarte. */
.werkzeuge {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  background: var(--flaeche); border: 1px solid var(--linie); padding: 10px 12px;
}
.werkzeuge input[type=search], .werkzeuge select { flex: 1 1 220px; width: auto; }
.werkzeuge button { width: auto; margin: 0; padding: 8px 16px; }
/* Suchleiste und Tabelle sind im Entwurf ein Kasten. Ohne das hier
   stünden zwei 1-px-Kanten aufeinander und ergäben einen 2-px-Strich. */
main > .karte-breit > .werkzeuge + .tabellen-rahmen { border-top: 0; }
main > .karte-breit > .werkzeuge { margin-bottom: -24px; }

/* --- Einrichtung: Fortschritt und Codes ---------------------- */
.schritte { display: flex; gap: 3px; margin: 0 0 20px; }
.schritte span { height: 3px; flex: 1; background: var(--flaeche-3); }
.schritte .erledigt { background: var(--burgund-linie); }
.schritte .aktiv { background: var(--burgund); }

.codes {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 16px; font-weight: 400; letter-spacing: .04em;
  margin: 16px 0; padding-left: 24px; color: var(--text);
}
.codes li { margin-bottom: 8px; }

/* --- Zweiter Faktor ------------------------------------------ */
/* Der QR-Code behält im Dunkelmodus seinen weißen Grund: Scanner
   erwarten dunkle Module auf hellem Feld. */
.qr { display: block; width: 200px; height: 200px; margin: 24px auto; padding: 10px; background: #fff; border: 1px solid var(--linie); }
.geheim {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 14px; letter-spacing: .04em; word-break: break-all; text-align: center;
  background: var(--flaeche-2); border: 1px solid var(--linie); padding: 12px; margin: 10px 0 0;
}
details > summary { cursor: pointer; }
details[open] > summary { margin-bottom: 6px; }

/* --- Passwortstärke ------------------------------------------ */
.pw-staerke { margin-top: 8px; padding: 14px 16px; background: var(--grund); border: 1px solid var(--linie); font-size: 13px; }
.pw-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pw-titel { color: var(--leise); }
.pw-label { font-weight: 600; }
.pw-balken { height: 3px; margin: 8px 0 12px; background: var(--flaeche-3); }
.pw-balken span { display: block; height: 100%; width: 0; background: var(--fein); transition: width .18s ease, background-color .18s ease; }
.pw-balken .stufe-0, .pw-balken .stufe-1 { background: var(--schlecht); }
.pw-balken .stufe-2 { background: var(--warn); }
.pw-balken .stufe-3, .pw-balken .stufe-4 { background: var(--gut); }
.pw-tipp { margin: 0 0 10px; padding: 8px 12px; background: var(--warn-flaeche); color: var(--warn); }
.pw-merkmale-titel { margin: 0 0 6px; color: var(--leise); }
.pw-merkmale { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.pw-merkmale li { display: flex; align-items: center; gap: 7px; color: var(--fein); }
.pw-merkmale li::before { content: ''; width: 5px; height: 5px; flex: 0 0 auto; background: var(--fein); }
.pw-merkmale li.erfuellt { color: var(--text-2); }
.pw-merkmale li.erfuellt::before { background: var(--gut); }
.pw-treffer { margin: 10px 0 0; }
.pw-treffer.ok { color: var(--gut); }
.pw-treffer.nein { color: var(--leise); }

/* --- Bereichsauswahl (Teamverwaltung) ------------------------ */
.bereiche-linie { background: var(--flaeche); border: 1px solid var(--linie); padding: 14px 16px; margin: 0 0 8px; }
.bereiche-linie legend { float: left; width: 100%; padding: 0; margin: 0 0 8px; font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.broker-wahl { margin-top: 10px; padding: 12px 12px; background: var(--grund); border: 1px solid var(--linie); }
.broker-wahl > summary { cursor: pointer; }

/* --- Anliegen: Verlauf --------------------------------------- */
.verlauf { display: grid; gap: 8px; }
/* „Antworten"-Überschrift unter dem Verlauf braucht Luft nach oben
   (h2 hat global keinen oberen Rand). */
.verlauf + h2 { margin-top: 28px; }
.nachricht { background: var(--flaeche); border: 1px solid var(--linie); padding: 14px 16px; }
.nachricht-skag { background: var(--grund); }
.nachricht-vermerk { background: var(--warn-flaeche); border-color: var(--warn-flaeche); }
.nachricht-kopf { margin: 0 0 6px; font-size: 13px; color: var(--leise); }
.nachricht-text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-2); }
.nachricht-dateien { margin: 10px 0 0; font-size: 13px; display: flex; flex-wrap: wrap; gap: 5px 16px; }

/* --- Themenpflege -------------------------------------------- */
.themenzeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.themenzeile .zeilenfeld { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; }
.themenzeile .zeilenfeld-zahl { flex: 0 0 90px; }
.themenzeile .zeilenfeld input { width: 100%; }
.themenzeile .kontrollfeld { padding-bottom: 8px; }
.themenzeile button { margin: 0; width: auto; padding: 8px 14px; }

/* --- Reiter (per Skript aus data-reiter-Abschnitten gebaut) --- */
.reiter-leiste { display: flex; flex-wrap: wrap; gap: 4px; margin: 26px 0 0; border-bottom: 1px solid var(--linie); }
.reiter-leiste .reiter {
  width: auto; margin: 0; padding: 9px 14px;
  font-size: 14px; font-weight: 500;
  color: var(--text-2); background: none; border: 0; border-bottom: 2px solid transparent;
}
.reiter-leiste .reiter:hover { color: var(--text); background: var(--grund); border-color: transparent; }
.reiter-leiste .reiter-aktiv, .reiter-leiste .reiter-aktiv:hover { color: var(--burgund); border-bottom-color: var(--burgund); background: none; }
.reiter-an [data-reiter] > .abschnitt-titel { display: none; }
/* Reiter direkt in der Kartenspalte (z. B. API-Doku): die Container
   übernehmen das Raster, sonst kleben die Karten aneinander. */
.karte-breit > .reiter-bereich,
.karte-breit > .reiter-bereich > [data-reiter] { display: grid; gap: 22px; }
.karte-breit > .reiter-bereich > .reiter-leiste { margin: 0; }
/* Muss NACH der Grid-Regel stehen: display:grid würde sonst das
   hidden-Attribut überstimmen, mit dem das Skript Reiter verbirgt. */
.reiter-bereich > [data-reiter][hidden] { display: none; }

/* HTTP-Statuscodes in der API-Doku: Maschinenschrift, Ampelfarbe
   (2xx grün, 4xx orange, 5xx rot; 3xx informativ). */
.http { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500; }
.http-2xx { color: var(--gut); }
.http-3xx { color: var(--info); }
.http-4xx { color: var(--warn); }
.http-5xx { color: var(--schlecht); }

.zurueck { margin: 16px 0 0; font-size: 13px; }
.zurueck a { color: var(--leise); }
.stapel-titel { margin: 0 0 10px !important; color: var(--text); }

/* --- Wiederherstellungs-Codes: Bildschirm und Ausdruck ------- */
.nur-druck { display: none; }

@media print {
  /* Der Ausdruck landet in einem Ordner oder Safe. Alles, was auf
     Papier nichts nützt, fällt weg. */
  .kopf, .fuss, .seitenleiste, .schritte, .ohne-druck, form, .meldung { display: none !important; }
  .nur-druck { display: block; }

  body { background: #fff; color: #000; font-size: 12pt; }
  .rahmen { display: block; }
  main, .schmal { padding: 0; margin: 0; max-width: none; }
  main > .karte, .schmal > .karte { border: 0; padding: 0; background: none; }
  h1 { font-size: 15pt; margin: 0 0 6mm; letter-spacing: 0; }
  .druck-marke { font-size: 9pt; letter-spacing: .04em; margin: 0 0 2mm; }
  .nur-druck h2 { font-size: 13pt; margin: 0 0 2mm; }
  .nur-druck p { margin: 0 0 1mm; font-size: 10pt; }
  .druck-hinweis { margin-top: 6mm !important; font-size: 10pt; }
  .codes { font-size: 13pt; letter-spacing: .06em; margin: 5mm 0; padding-left: 8mm; }
  .codes li { margin: 0 0 2.5mm; break-inside: avoid; }
  .codes-block { break-inside: avoid; }
  a[href]::after { content: ''; }
}

:focus-visible { outline: 2px solid var(--burgund); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Beanstandungen der Entwurfsprüfung: die Prüfung liefert eine Liste,
   also steht hier auch eine Liste. */
.beanstandungen { margin: 4px 0 0; padding-left: 16px; font-size: 13px; color: var(--text-3); }
.beanstandungen li { margin-bottom: 2px; }

/* --- Dashboard: Handlungsbedarf ------------------------------
   Drei gleich breite Karten in einem umrandeten Kasten, wie die
   Kennzahl-Kacheln. Jede ist ein Link in die gefilterte Liste. */
.bedarfs-karten {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--linie); border-left: 1px solid var(--linie);
}
@media (max-width: 1024px) { .bedarfs-karten { grid-template-columns: minmax(0, 1fr); } }

/* --- Überblickskacheln (Kopf des Dashboards) ------------------
   Vier gleich schwere Zahlen ohne Abschnittstitel: Sie sind die
   Antwort auf „wie steht es gerade", nicht ein Abschnitt unter
   anderen. Deshalb ohne Überschrift, direkt unter dem Seitenkopf.
   Ein Rahmenraster wie bei den Bedarfskarten, damit die vier als
   eine Zeile lesen und nicht als vier Karten. */
.ueberblick-kacheln {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--linie); border-left: 1px solid var(--linie);
  margin-bottom: 24px;
}
.ueberblick-kachel {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 18px; text-decoration: none;
  background: var(--flaeche);
  border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
}
.ueberblick-kachel:hover { background: var(--flaeche-2); text-decoration: none; }
.ueberblick-kachel .kachel-wert { font-size: 27px; line-height: 1.1; }
/* Der Betrag ist die längste Zahl der Reihe; ohne eigene Größe sprengt
   er auf schmalen Schirmen seine Spalte. */
@media (max-width: 1600px) { .ueberblick-kachel .kachel-wert { font-size: 23px; } }
@media (max-width: 1024px) { .ueberblick-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .ueberblick-kacheln { grid-template-columns: minmax(0, 1fr); } }

.bedarfs-karte {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--flaeche); padding: 16px 16px 14px; text-decoration: none; color: inherit;
  border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
}
.bedarfs-karte:hover { background: var(--grund); text-decoration: none; }
/* Handlungsbedarf trägt die kräftigste Kante des Portals – hier ist
   die Farbe die Nachricht: Diese drei Karten verlangen etwas. */
.bedarfs-karte { border-left: 4px solid var(--linie-stark); }
.bedarfs-karte.kachel-bad     { border-left-color: var(--schlecht); }
.bedarfs-karte.kachel-warn    { border-left-color: var(--warn); }
.bedarfs-karte.kachel-gut     { border-left-color: var(--gut); }
.bedarfs-karte.kachel-neutral { border-left-color: var(--linie-stark); }
/* Ist nichts offen, tritt auch die Kante zurück. */
.bedarfs-karte-leer { border-left-color: var(--linie); }
.bedarfs-karte .kachel-name { margin: 0; }
.bedarfs-zeile { display: flex; align-items: baseline; gap: 12px; }
.bedarfs-fuss {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-top: 12px; border-top: 1px solid var(--linie-fein);
}
.bedarfs-pfeil { font-size: 13px; font-weight: 500; color: var(--burgund); white-space: nowrap; }
/* Eine Null ist eine gute Nachricht und soll nicht schreien. */
.bedarfs-karte-leer .kachel-wert { color: var(--fein); }
.bedarfs-karte-leer .bedarfs-pfeil { color: var(--leise); }

/* --- Dashboard: Diagramme ------------------------------------
   Bis 08/2026 war der Eingangsverlauf ein reines CSS-Raster; die
   Bibliothek dafür schien zu teuer. Inzwischen ist Chart.js selbst
   gehostet, wird nur auf Seiten mit Leinwand geladen und trägt
   Auszahlungs- wie Eingangsdiagramm – die alte Abwägung ist damit
   entschieden. Serienfarben: --diagramm-1/-2 (validierte Rampe).
   Die Leinwand braucht einen Rahmen mit fester Höhe, sonst rechnet
   Chart.js beim responsiven Umbruch die Seite in eine Endlosschleife. */
.diagramm-karte { position: relative; }
.diagramm-rahmen { position: relative; height: 260px; margin-top: 10px; }
.diagramm-rahmen > canvas { max-width: 100%; }
.diagramm-tabelle { margin-top: 10px; }
.diagramm-tabelle > summary { cursor: pointer; color: var(--leise); font-size: 13px; padding: 4px 0; }
.diagramm-pillen { margin: 2px 0 0; }

/* --- Filter --------------------------------------------------
   Die Werkzeugleiste trägt links die Sichten als Pillen, rechts
   die Suche. Beides in einem Kasten, wie im Entwurf. */
.werkzeuge { justify-content: space-between; }
.werkzeuge-suche { display: flex; gap: 8px; flex: 1 1 320px; align-items: center; }
.pillen { display: flex; gap: 6px; flex-wrap: wrap; }
.pille {
  display: inline-flex; align-items: center; padding: 8px 12px;
  font-size: 13px; font-weight: 500; color: var(--text-2);
  background: var(--flaeche); border: 1px solid var(--linie); text-decoration: none;
}
.pille:hover { background: var(--grund); color: var(--text); text-decoration: none; }
.pille-aktiv, .pille-aktiv:hover {
  background: var(--invert); color: var(--invert-text); border-color: var(--invert);
}

.feinfilter { margin-top: -24px; background: var(--flaeche); border: 1px solid var(--linie); border-top: 0; }
.feinfilter > summary {
  padding: 8px 12px; font-size: 13px; color: var(--leise);
  list-style-position: inside;
}
.feinfilter[open] > summary { margin: 0; border-bottom: 1px solid var(--linie-fein); color: var(--text-2); }
.filterzeile { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 12px; }
.filterfeld { display: grid; gap: 4px; }
.filterfeld > span { font-size: 12px; color: var(--leise); }
.filterfeld input, .filterfeld select { width: auto; min-width: 150px; }
.filterzeile button { margin: 0; }

/* --- Freischaltung -------------------------------------------
   Die Erklärungen sind der Kern des Antrags: Kästchen links,
   Überschrift und Text rechts, damit man sie liest statt sie
   abzuhaken. */
.erklaerung {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--flaeche); border: 1px solid var(--linie); padding: 12px 16px;
  cursor: pointer;
}
/* Der Rahmen sitzt am Block, nicht mehr an der Beschriftung: Zu einer
   Erklärung kann ein Freitextfeld gehören, und Kasten plus Feld sollen wie
   ein Stück aussehen. */
.erklaerung-block + .erklaerung-block .erklaerung { border-top: 0; }

/* --- Seitenblöcke im Freischaltungs-Antrag -------------------- */
/* Ein Antrag kann mehrere Landingpages nennen. Jede bekommt einen eigenen
   Rahmen, damit sichtbar bleibt, welche Bildschirmfotos zu welcher Adresse
   gehören – lose untereinander wäre das nicht zu erkennen. */
.seiten { display: grid; gap: 12px; margin-top: 14px; }
.seite {
  position: relative; margin: 0; padding: 14px 16px 4px;
  border: 1px solid var(--linie); background: var(--flaeche);
}
.seite-nummer {
  padding: 0 6px; margin-left: -6px;
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--leise);
}
/* Oben rechts, damit er nicht zwischen den Feldern steht und versehentlich
   getroffen wird. */
.seite-weg {
  position: absolute; top: 12px; right: 12px;
  background: none; border: 0; padding: 2px 4px;
  font-size: 12px; color: var(--leise); text-decoration: underline; cursor: pointer;
}
.seite-weg:hover { color: var(--schlecht); }
.seite-mehr { margin-top: 12px; }
/* Eingerückt bis unter den Text der Erklärung, damit sichtbar bleibt, worauf
   sich die Angabe bezieht. */
.erklaerung-hinweis {
  background: var(--flaeche); border: 1px solid var(--linie); border-top: 0;
  padding: 0 16px 14px 40px; display: grid; gap: 4px;
}
.erklaerung-hinweis textarea { width: 100%; }
.erklaerung-hinweis .hinweis { margin: 0; }
.erklaerung:hover { background: var(--grund); }
.erklaerung input { margin-top: 4px; flex: 0 0 auto; }
.erklaerung > span { display: grid; gap: 3px; }
.erklaerung strong { font-weight: 600; }

.erklaerungsliste { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
.erklaerungsliste li { display: grid; gap: 3px; background: var(--flaeche); padding: 12px 14px 12px 32px; position: relative; }
.erklaerungsliste li::before {
  content: ''; position: absolute; left: 14px; top: 15px;
  width: 8px; height: 8px; background: var(--linie-stark);
}
.erklaerungsliste li.erfuellt::before { background: var(--gut); }
/* Eine fehlende Bestätigung darf nicht übersehen werden – sie ist
   der Unterschied zwischen einem Nachweis und einem Formular. */
.erklaerungsliste li.offen { background: var(--schlecht-flaeche); }
.erklaerungsliste li.offen::before { background: var(--schlecht); }
/* Angabe des Partners zu einer Erklärung: abgesetzt, weil sie von ihm
   stammt und nicht von uns. */
.hinweis-des-partners {
  margin: 6px 0 0; padding: 8px 10px;
  background: var(--grund); border-left: 2px solid var(--linie-stark);
}

.angaben { display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: 8px 20px; margin: 14px 0 0; }
.angaben dt { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); padding-top: 2px; }
.angaben dd { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }
@media (max-width: 600px) { .angaben { grid-template-columns: 1fr; gap: 2px 0; } .angaben dd { margin-bottom: 10px; } }

.belege { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin-top: 14px; align-items: start; }
@media (max-width: 600px) { .belege { grid-template-columns: 1fr; } }
.belege figure { margin: 0; display: grid; gap: 6px; }
.belege img { display: block; width: 100%; height: auto; border: 1px solid var(--linie); background: var(--grund); }

.entscheidung { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.entscheidung button { width: auto; margin: 0; }

/* --- Partnerübersicht ----------------------------------------
   Broker-Codes sind Kennungen: Monospace, in ein Raster, damit
   fünfzehn Stück noch überschaubar bleiben. */
/* Linien an den Kacheln, nicht als Grund unter einer Fuge: Sonst bliebe
   in der letzten Reihe die unbesetzte Zelle als grauer Block stehen. */
.brokerliste {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  border-top: 1px solid var(--linie); border-left: 1px solid var(--linie); margin-top: 14px;
}
.brokerkachel {
  display: grid; gap: 2px; background: var(--flaeche); padding: 8px 12px;
  border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
}
.brokerkachel .mono { font-size: 14px; color: var(--text); }

/* --- API-Dokumentation ---------------------------------------
   Lange Referenzseite: Abschnitte als Karten, Code in der Mono.
   Inline-Code sitzt in Fließtext UND Tabellenzellen, deshalb kein
   eigener Hintergrundkasten in Zellen (dort trägt schon die Zeile). */
.doku h2 { margin: 0 0 4px; }
.doku h3 { margin: 20px 0 4px; font-size: 14px; letter-spacing: -0.01em; }
.doku p  { color: var(--text-2); max-width: var(--lesebreite); margin: 8px 0 0; }
.doku ul { color: var(--text-2); max-width: var(--lesebreite); margin: 8px 0 0; padding-left: 16px; }
.doku li { margin: 4px 0; }
.doku code {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 13px; color: var(--text);
  background: var(--flaeche-2); padding: 1px 6px;
}
.doku td code, .doku th code { background: none; padding: 0; }
.doku .tabellen-rahmen { margin: 12px 0 0; }
.doku .tabellen-rahmen .tabelle td { vertical-align: top; }
.codeblock {
  display: block; margin: 12px 0 0; padding: 12px 14px;
  background: var(--flaeche-2); border: 1px solid var(--linie);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 13px; line-height: 1.6; color: var(--text-2);
  white-space: pre; overflow-x: auto;
}
.doku .codeblock code { background: none; padding: 0; }
/* Methode-und-Pfad-Zeile am Abschnittskopf */
.endpunkt { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 2px 0 0; }
.endpunkt .methode {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; font-weight: 500;
  letter-spacing: .08em; color: var(--burgund); border: 1px solid var(--burgund-linie, var(--linie));
  padding: 2px 8px; background: var(--burgund-tint);
}
.endpunkt .pfad { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 14px; color: var(--text); }

/* --- Seitenaktionen und Leerzustände -------------------------
   Knöpfe sind formularbreit gedacht; als Seitenaktion (etwa „Neues
   Anliegen") wäre die volle Breite ein Balken ohne Anlass. Und ein
   leerer Bestand ist kein Warnfall: Die gelbe Meldung bleibt für
   Fehlschläge, das Nichts bekommt eine ruhige, erklärende Fläche. */
.knopf-zeile { width: auto; margin-top: 0; padding: 8px 16px; }
.leerhinweis {
  background: var(--flaeche); border: 1px dashed var(--linie-stark);
  padding: 32px 24px; text-align: center; color: var(--text-3);
}
.leerhinweis a { color: var(--burgund); }
.leerhinweis .klein { display: block; margin-top: 6px; color: var(--leise); }

/* --- FAQ ------------------------------------------------------
   Einträge als natives <details>: auf, zu, kein JavaScript. Die
   Antwortbreite ist wie in der Doku auf Lesbarkeit begrenzt. */
.faq-eintrag { border-top: 1px solid var(--linie-fein); padding: 8px 0; }
.faq-eintrag:first-of-type { border-top: 0; }
.faq-eintrag > summary { cursor: pointer; font-weight: 500; color: var(--text); }
.faq-eintrag > summary:hover { color: var(--burgund); }
.faq-eintrag[open] > summary { margin-bottom: 6px; }
.faq-antwort { color: var(--text-2); max-width: var(--lesebreite); padding: 0 0 4px 0; }
.faq-antwort a { color: var(--burgund); }

/* --- Geschäftsjahr und Aktuelles (Startseite) -----------------
   Geldkarte links, Produktlinien-Tabelle rechts; unter 900px
   übereinander. Delta in den Ampelfarben der Statuschips. */
.jahres-raster { display: grid; grid-template-columns: minmax(280px, 1fr) 2fr; gap: 14px; align-items: stretch; }
@media (max-width: 1024px) { .jahres-raster { grid-template-columns: 1fr; } }
.geld-karte { display: flex; flex-direction: column; gap: 8px; color: inherit; text-decoration: none; }
.geld-karte:hover { background: var(--grund); text-decoration: none; }
.geld-karte .kachel-wert { font-size: 26px; }
.delta { font-weight: 500; white-space: nowrap; }
.delta-gut { color: var(--gut); }
.delta-schlecht { color: var(--schlecht); }
.aeltere-mitteilungen { margin-top: 8px; }
.aeltere-mitteilungen > summary { cursor: pointer; color: var(--text-3); font-size: 13px; padding: 4px 0 8px; }
.aeltere-mitteilungen > .block + .block { margin-top: 1px; }
.mitteilung-datum { color: var(--leise); font-size: 12px; }

/* --- Wegweiser (interner Einstieg) ---------------------------
   Vier bis fünf Gruppen mit je zwei bis drei Zielen. Die Ziele
   sind Zeilen, keine Kacheln: Sie tragen einen Titel und einen
   Halbsatz Zweck, und Zeilen lesen sich schneller als Kästen. */
.wegweiser {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px; background: var(--linie); border: 1px solid var(--linie);
}
.wegweiser-gruppe { background: var(--flaeche); padding: 14px 16px 16px; }
.wegweiser-gruppe h3 {
  margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--leise);
}
.wegweiser-gruppe a {
  display: grid; gap: 2px; padding: 8px 0; color: var(--text); text-decoration: none;
  border-top: 1px solid var(--linie-fein);
}
.wegweiser-gruppe a:first-of-type { border-top: 0; }
.wegweiser-gruppe a:hover { color: var(--burgund); }
.wegweiser-titel { font-weight: 500; }
/* Eine Null ist selten die Nachricht – sie tritt einen Schritt zurück. */
.wert-null { color: var(--fein); }
/* Aktion in einer Tabellenzelle: neben dem Zustand, nicht darunter. */
.zellen-aktion { display: inline-block; margin: 0 0 0 10px; vertical-align: middle; }
.zellen-aktion button { margin-top: 0; }

/* --- Produktlinien-Kennfarben --------------------------------
   Jede Linie trägt ihre Farbe an drei Stellen: Gruppentitel in der
   Seitenleiste, Etikett über dem Seitentitel, Kante an der
   Bereichskachel. Der Name steht überall daneben – die Farbe ordnet
   zu, sie ersetzt keine Beschriftung. */
.linie-element    { color: var(--linie-element); }
.linie-wb_extern,
.linie-wb_direkt  { color: var(--linie-wb); }
.linie-creditlife { color: var(--linie-creditlife); }

/* Bewusst KEINE farbige Kante an den Bereichskacheln: Die Kante ist im
   Portal bereits vergeben – sie zeigt an den Statuskacheln den Zustand.
   Zwei Bedeutungen für dieselbe Form wären eine Falle. Die Produktlinie
   spricht deshalb über Etikett und Punkt, nicht über die Kante. */
.bereichs-kachel.linie-element    .kachel-name { color: var(--linie-element); }
.bereichs-kachel.linie-wb_extern  .kachel-name,
.bereichs-kachel.linie-wb_direkt  .kachel-name { color: var(--linie-wb); }
.bereichs-kachel.linie-creditlife .kachel-name { color: var(--linie-creditlife); }
.bereichs-kachel.linie-element    .kachel-name::before { background: var(--linie-element); }
.bereichs-kachel.linie-wb_extern  .kachel-name::before { background: var(--linie-wb); }
.bereichs-kachel.linie-wb_direkt  .kachel-name::before { background: var(--linie-wb); }
.bereichs-kachel.linie-creditlife .kachel-name::before { background: var(--linie-creditlife); }

/* Gruppentitel der Seitenleiste: die Linie färbt das Wort selbst. */
.seitenleiste-titel.linie-element    { color: var(--linie-element); }
.seitenleiste-titel.linie-wb_extern,
.seitenleiste-titel.linie-wb_direkt  { color: var(--linie-wb); }
.seitenleiste-titel.linie-creditlife { color: var(--linie-creditlife); }

/* --- Umbrüche und Inhaltsbreite ------------------------------
   Ein Raster statt sieben gewachsener Einzelwerte:

     sm  600px   Mobil quer, Tablet hochkant
     md  1024px  Chromebook, iPad Pro hochkant, Tablet quer
     lg  1600px  die meisten Notebooks und Rechner
     xl  2048px  2K und darüber

   Dazu eine Höchstbreite je Stufe: Ohne sie läuft auf einem
   27-Zoll-Schirm eine Tabellenzeile über 2500 Pixel, und das Auge
   verliert beim Sprung ans Zeilenende die Zeile. */
:root { --inhalt-max: 480px; }
@media (min-width: 600px)  { :root { --inhalt-max: 960px; } }
@media (min-width: 1024px) { :root { --inhalt-max: 1280px; } }
@media (min-width: 1600px) { :root { --inhalt-max: 1600px; } }
@media (min-width: 2048px) { :root { --inhalt-max: 1920px; } }
.rahmen { max-width: var(--inhalt-max); margin-inline: auto; }

/* Lesebreite für Fließtext (Einleitungen, FAQ-Antworten, API-Doku).
   Auf Wunsch des Auftraggebers ohne Begrenzung: Der Text läuft über die
   volle Spaltenbreite, begrenzt nur noch durch --inhalt-max oben.
   Bei 1920px Rahmen sind das rund 290 Zeichen je Zeile.

   Vorher stand hier 68ch. Das war doppelt unglücklich: zu schmal für den
   Eindruck, den die Seite machen soll, und die Einheit selbst irreführend –
   ch misst die Ziffer 0 (7,8px), das Durchschnittszeichen ist 5,84px breit,
   also lieferte „68ch" gemessene 91 Zeichen statt 68.

   Wer die Begrenzung zurückholen will, setzt hier einen Pixelwert; sie
   greift dann sofort an allen vier Stellen. 660px wären ~113 Zeichen. */
:root { --lesebreite: none; }

/* --- Schmale Schirme: Kopfzeilen brechen um ------------------
   Die rechte Kennzahl im Seitenkopf steht in Mono und darf nicht
   umbrechen; ohne eigene Zeile schob sie sich unter 1024 Pixel aus
   dem Bild. Ebenso der Zusatz am Abschnittstitel. */
@media (max-width: 1024px) {
  .seitenkopf { align-items: flex-start; gap: 8px; }
  .seitenkopf-zahl { padding-bottom: 0; white-space: normal; overflow-wrap: anywhere; }
  .abschnitt-titel { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* --- Menü auf schmalen Schirmen -------------------------------
   Bis 08/2026 stand die vollständige Navigation als Block über dem
   Inhalt: Auf dem Telefon scrollte man an fünfzehn Zeilen vorbei,
   bevor die Seite begann. Jetzt eine Zeile, die man antippt. */
.nav-schalter { display: none; }
@media (max-width: 1024px) {
  .nav-huelle { border-bottom: 1px solid var(--linie); background: var(--grund); }
  .nav-schalter {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 12px 20px; color: var(--text-2);
    font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  }
  .nav-schalter::before { content: '≡'; font-size: 16px; letter-spacing: 0; }
  .nav-huelle[open] > .nav-schalter { border-bottom: 1px solid var(--linie-fein); }
  /* Im Menü zählt Erreichbarkeit, nicht Dichte: größere Tippflächen. */
  .nav-huelle .nav-punkt { padding: 10px 20px; }
  .nav-huelle .seitenleiste { gap: 14px; }
  .seitenleiste-fuss { padding-top: 8px; }
}
@media (min-width: 1025px) {
  /* Auf breiten Schirmen ist die Hülle nur eine Klammer ohne Wirkung. */
  .nav-huelle { display: contents; }
}

/* --- Statistik ------------------------------------------------
   Zwei Tabellen nebeneinander: „Einlieferung" (Stand bei SKAG) und
   „Bestandsentwicklung" (Rückmeldung des Versicherers). Nebeneinander,
   weil sie zusammen gelesen werden – die zweite Basis ist die letzte
   Zeile der ersten. Unter 1024px untereinander. */
.statistik-raster {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
  align-items: start;
}
/* Die Filterzeile darüber ist eine Karte; ohne eigenen Abstand klebte der
   Abschnittstitel an ihrer Unterkante. */
.werkzeuge + .statistik-raster,
.werkzeuge + section { margin-top: 24px; }
@media (max-width: 1024px) { .statistik-raster { grid-template-columns: minmax(0, 1fr); } }

.tabelle-statistik td, .tabelle-statistik th { vertical-align: baseline; }
/* Die Bezugsgröße trägt die Tabelle oben, halbfett und mit kräftigerer
   Trennlinie darunter – alles Folgende ist ein Anteil davon. */
.tabelle-statistik .stat-basis th { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.tabelle-statistik .stat-basis td { font-weight: 600; }
.tabelle-statistik .stat-basis > * { border-bottom: 1px solid var(--linie-stark); }
/* Das Ergebnis der Einlieferung: die Zeile, auf die alles hinausläuft. */
.tabelle-statistik .stat-ergebnis td { font-weight: 600; }
.tabelle-statistik .stat-ergebnis > * { border-top: 1px solid var(--linie-stark); }
/* Unterzeilen („… davon") rücken ein und bleiben zurückhaltend. */
.tabelle-statistik .stat-unterzeile td:first-child { padding-left: 30px; }
.tabelle-statistik .stat-abgesetzt > * { border-top: 1px solid var(--linie-stark); }

/* Farbpunkt vor der Beschriftung – aus derselben Zustandsleiter wie die
   Kacheln, nicht aus einer eigenen. Eigene Regeln statt currentColor: Die
   kachel-*-Klassen färben nur ::before und border-top-color, sonst wären
   alle Punkte gleich schwarz und damit sinnlos.

   Die Farbe ist Beiwerk, nicht die Aussage – jede Zeile trägt ihren Namen
   ausgeschrieben daneben. */
.stat-punkt {
  display: inline-block; width: 8px; height: 8px; margin-right: 8px;
  background: var(--neutral); vertical-align: baseline;
}
.stat-punkt.kachel-gut     { background: var(--gut); }
.stat-punkt.kachel-warn    { background: var(--warn); }
.stat-punkt.kachel-bad     { background: var(--schlecht); }
.stat-punkt.kachel-info    { background: var(--info); }
.stat-punkt.kachel-neutral { background: var(--linie-stark); }
.stat-punkt.status-cl-neu           { background: var(--info); }
.stat-punkt.status-cl-angesehen     { background: var(--warn); }
.stat-punkt.status-cl-abgeschlossen { background: var(--gut); }
.stat-punkt.status-cl-abgebrochen   { background: var(--linie-stark); }

/* --- Splitbutton: Zeitraum-Voreinstellungen -------------------
   Links die Tat (aktuelle Spanne anwenden), rechts das Menü. Ein
   <details>, damit es ohne JavaScript funktioniert – der Aufklapper ist
   ein natives Bedienelement, keine Nachbildung. */
.splitknopf { display: inline-flex; align-items: stretch; position: relative; }
.splitknopf-tat {
  display: inline-flex; align-items: center; padding: 7px 12px;
  font-size: 13px; color: var(--text); text-decoration: none;
  background: var(--flaeche); border: 1px solid var(--linie-stark);
}
.splitknopf-tat:hover { background: var(--flaeche-2); text-decoration: none; }
.splitknopf-menue { position: relative; }
.splitknopf-menue > summary {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 100%; cursor: pointer; list-style: none;
  background: var(--flaeche); border: 1px solid var(--linie-stark); border-left: 0;
}
.splitknopf-menue > summary::-webkit-details-marker { display: none; }
/* Das Dreieck zeichnet die Regel selbst: Ein Textpfeil säße je nach
   Schriftschnitt anders auf der Grundlinie. */
.splitknopf-menue > summary::after {
  content: ''; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--text-2);
}
.splitknopf-menue > summary:hover { background: var(--flaeche-2); }
.splitknopf-menue[open] > summary { background: var(--flaeche-3); }
.splitknopf-liste {
  position: absolute; right: 0; top: calc(100% + 2px); z-index: 20;
  min-width: 190px; display: grid;
  background: var(--flaeche); border: 1px solid var(--linie-stark);
  box-shadow: var(--schatten-pop);
}
.splitknopf-liste a {
  padding: 8px 14px; font-size: 13px; color: var(--text-2); text-decoration: none;
  border-bottom: 1px solid var(--linie-fein);
}
.splitknopf-liste a:last-child { border-bottom: 0; }
.splitknopf-liste a:hover { background: var(--flaeche-2); color: var(--text); text-decoration: none; }
.splitknopf-liste a[aria-current="true"] { background: var(--burgund-tint); color: var(--burgund); font-weight: 600; }

/* --- Fehleraufschlüsselung ------------------------------------ */
.fehler-aufschluss { margin-top: 12px; }
.fehler-aufschluss > summary {
  padding: 8px 0; cursor: pointer; font-size: 13px; color: var(--burgund);
}
.fehler-aufschluss > summary:hover { text-decoration: underline; }
.fehler-aufschluss[open] > summary { margin-bottom: 8px; }

/* --- Rücklastschriften als eigene Karte -----------------------
   Bewusst außerhalb der Statustabelle: Eine Police mit Rücklastschrift
   steht oben zusätzlich in ihrer Statuszeile. In derselben Tabelle hätte
   die Prozentspalte behauptet, die Zahl gehöre in dieselbe Aufteilung. */
.rls-karte { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.rls-karte .kachel-wert { font-size: 23px; line-height: 1.1; }

/* --- Sinnbilder in der Seitenleiste (Versuch, 02.08.2026) -----
   Strichzeichnungen ohne Füllung, damit sie die Textfarbe erben und im
   Dunkelmodus, im Schwebezustand und beim aktiven Punkt automatisch
   mitgehen – eine zweite Farbleiter für Symbole wäre eine Fehlerquelle
   ohne Nutzen.

   1,5px Strich und eckige Enden: Die Oberfläche kennt keinen einzigen
   border-radius; runde Enden sähen daneben fremd aus.

   Zurücknehmen: diesen Block, templates/nav_icons.php, den require in
   layout.php und 'icon' in der NavigationMiddleware entfernen. */
.nav-icon {
  width: 16px; height: 16px; flex: 0 0 16px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: square; stroke-linejoin: miter;
  /* Halb so kräftig wie der Text: Das Symbol begleitet den Namen, es
     ersetzt ihn nicht. Beim aktiven Punkt zieht es voll mit. */
  opacity: .55;
}
.nav-punkt > span { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nav-punkt:hover .nav-icon { opacity: .8; }
.nav-punkt-aktiv .nav-icon { opacity: 1; }

/* --- creditLife-Guidelines ------------------------------------ */
/* Auf der langen Seite tragen die Abschnittstitel die Gliederung über
   viel Text – eine Stufe lauter als die 13px im restlichen Portal. */
.doku .abschnitt-titel { font-size: 16px; }
/* Die Abschnitte folgen unmittelbar aufeinander; ohne eigenen Abstand
   klebte jede Überschrift an der letzten Zeile des vorigen Blocks. */
.doku section + section,
.doku section + .reiter-bereich,
.doku .reiter-bereich + section { margin-top: 32px; }
/* Im Reiterbetrieb gleicher Abstand unter der Leiste, egal welcher
   Reiter offen ist (die section-Folgeregel träfe nur den zweiten). */
.reiter-an > [data-reiter] { margin-top: 18px; }
.doku h3 { margin-top: 24px; }
/* Kopfkarte: Erklärung links, Herunterladen rechts. Unter 1024px
   untereinander, damit der Knopf nicht zur Briefmarke wird. */
.clg-start {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.clg-start p { margin: 0; }
.clg-start > div { flex: 1 1 320px; min-width: 0; }

/* Die Feldnamen als Reihe von Marken: Sie sind eine Liste, keine Prosa. */
.clg-feldliste { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.clg-feldliste code { background: var(--flaeche-2); padding: 3px 7px; }

/* Der Ordnerbaum. Eigene Regel statt <pre> im Fließtext, damit die
   Erklärungen rechts an derselben Stelle stehen. */
.clg-baum {
  margin: 8px 0 0; padding: 14px 16px; overflow-x: auto;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px;
  line-height: 1.9; color: var(--text-2);
  background: var(--flaeche-2); border: 1px solid var(--linie);
}

/* Musterseite im Rahmen. Die Vorlage bringt eigenes CSS mit – ohne den
   Rahmen kollidierte es mit dem Portal-Stylesheet. Feste Höhe, weil ein
   fremdes Dokument seine Höhe nicht von aussen melden kann; darin wird
   gescrollt. */
.clg-rahmen {
  margin-top: 12px; border: 1px solid var(--linie-stark);
  background: #FFFFFF; /* fest weiss: die Vorlage rechnet mit hellem Grund */
}
.clg-rahmen iframe { display: block; width: 100%; height: 620px; border: 0; }
@media (max-width: 600px) { .clg-rahmen iframe { height: 420px; } }

/* --- Guidelines: die zwei Wege und die Pflichttexte -----------
   Zwei gleich schwere Karten nebeneinander: Der Partner soll die Wahl
   als Wahl sehen, nicht als Reihenfolge mit einem Favoriten. */
.clg-wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 12px; }
@media (max-width: 1024px) { .clg-wege { grid-template-columns: minmax(0, 1fr); } }
.clg-weg p { margin: 8px 0 0; }
.clg-wer { margin: 12px 0 0; padding-left: 16px; font-size: 13px; color: var(--text-2); }
.clg-wer li { margin-top: 4px; }

/* Verbindlicher Wortlaut. Abgesetzt und in der Monospace, damit man auf
   einen Blick sieht: Das ist zu übernehmen, nicht zu paraphrasieren. */
.clg-wortlaut {
  margin: 8px 0 0; padding: 12px 14px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; line-height: 1.7;
  color: var(--text); background: var(--flaeche-2);
  border-left: 3px solid var(--linie-creditlife);
}
.clg-haken { margin-top: 16px; }
.clg-gruppe { margin: 20px 0 6px; font-size: 14px; font-weight: 600; }