/* =================================================================================================
   Das Erscheinungsbild des Portals - Schriften, Farbtokens und ihre Abbildung auf Bootstrap.

   Geladen NACH bootstrap.min.css und VOR site.css (siehe Pages/Shared/_Layout.cshtml). Die
   Reihenfolge ist keine Bequemlichkeit: Die Regeln hier ueberschreiben Bootstrap-Variablen bei
   gleicher Spezifitaet und gewinnen nur, weil sie spaeter stehen. site.css darf danach einzelne
   Seitenregeln setzen und greift dafuer ausschliesslich auf die Tokens hier zu.

   WAS HIER HINEINGEHOERT und was nicht:
     - Jede Farbe des Portals steht hier und nirgends sonst. Eine Seite oder site.css nennt nie
       einen Hex-Wert, sondern immer ein Token (siehe CLAUDE.md, Abschnitt "Design").
     - Die Tokennamen und ihre Werte stammen aus dem Entwurf
       docs/design/Landingpage-Richtung-D.dc.html (der style-Block darin). Abweichungen davon sind
       an der betroffenen Zeile begruendet - es gibt genau eine, und zwar wegen Kontrast.

   ZWEI DESIGNS, EIN ATTRIBUT. Umgeschaltet wird mit data-bs-theme am html-Element
   ("dark" oder "light", siehe wwwroot/js/theme.js). Dasselbe Attribut wertet Bootstrap 5.3 selbst
   aus und bringt damit die Dinge mit, die sich nicht ueber eine Variable loesen lassen: den Pfeil
   im Akkordeon, das Dreieck im Auswahlfeld, das Symbol im Burger-Knopf, den Schieber im
   form-switch. Genau dafuer wurde von Bootstrap 5.1 auf 5.3 aktualisiert.

   DIE ABBILDUNG STEHT IN EINEM EINZIGEN BLOCK (der ":root"-Block weiter unten), nicht zweimal je
   Design. Das geht, weil :root und html[data-bs-theme=...] DASSELBE Element sind: Ein
   "--bs-body-bg: var(--bg)" auf :root loest --bg an genau dem Element auf, an dem der Block
   darueber es gesetzt hat. Zwei Abbildungen nebeneinander waeren zwei Stellen, die
   auseinanderlaufen koennen.
   ================================================================================================= */

/* -------------------------------------------------------------------------------------------------
   Schriften

   Selbst gehostet und ausdruecklich NICHT von fonts.googleapis.com: Ein link dorthin schickt die
   IP-Adresse jedes Besuchers an Google, bevor die Seite steht. Die Seite /Cookies sagt zu, dass
   dieses Portal keine Inhalte von fremden Servern laedt, und ExternalResourcesTests prueft das
   ueber alle Seiten hinweg. Woher die Dateien kommen: wwwroot/fonts/HERKUNFT.txt.

   font-display: swap, damit der Text in der Rueckfallschrift sofort steht und nicht erst, wenn die
   Datei da ist. Vorgeladen werden nur die beiden Schnitte, die auf jeder Seite sofort gebraucht
   werden (Sora 400 fuer den Text, Sora 800 fuer Ueberschriften und Marke) - siehe den Kopf im
   Layout.

   Je Schnitt zwei Dateien mit unicode-range: Der Browser holt latin-ext nur, wenn ein Zeichen
   daraus wirklich vorkommt. Umlaute und das Eurozeichen liegen in latin, diese Datei kommt also
   ohnehin; latin-ext bleibt auf deutschen Seiten meist ungeladen. Die Bereiche sind aus
   unicode.json der npm-Pakete uebernommen und nicht geschaetzt.
   ------------------------------------------------------------------------------------------------- */

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

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/sora-latin-ext-400-normal.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: "Sora";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/sora-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/sora-latin-ext-600-normal.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: "Sora";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/sora-latin-800-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/sora-latin-ext-800-normal.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/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-ext-400-normal.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/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-ext-500-normal.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: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-ext-600-normal.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;
}

/* -------------------------------------------------------------------------------------------------
   Die Tokens, dunkles Design

   Auch auf :root und nicht nur auf [data-bs-theme="dark"]: Das dunkle Design ist die Vorgabe,
   unabhaengig von der Systemeinstellung des Besuchers (bewusst kein prefers-color-scheme - das
   Portal hat ein Erscheinungsbild, und wer das andere will, klickt). Steht am html-Element gar
   kein Attribut - etwa in einem Markup-Schnipsel aus einem Test -, gilt trotzdem dunkel.

   .fenster-dunkel ist derselbe Satz fuer ein einzelnes Element: ein Fenster (Live-Anzeige, Code,
   Terminal auf der Startseite), das in BEIDEN Designs dunkel bleibt, weil es einen Bildschirm
   zeigt und keine Seite. Eigene Werte gibt es dafuer nicht - die Tokens im Fenster sind die des
   dunklen Designs, auch wenn die Seite darum herum gerade hell ist. Der Selektor steht VOR dem
   Attribut-Selektor, weil ThemeContrastTests den Block ueber dessen Ende findet.
   ------------------------------------------------------------------------------------------------- */

.fenster-dunkel,
:root,
[data-bs-theme="dark"] {
  color-scheme: dark;

  /* Flaechen, von hinten nach vorn: --bg die Seite, --bg2 ein abgesetzter Streifen darauf,
     --panel eine Karte darueber, --row eine getoente Zeile in einer Tabelle. */
  --bg: #0B1220;
  --bg2: #0E182C;
  --panel: #142039;
  --row: #101B30;

  /* Linien: --line die Haarlinie zwischen Flaechen (dekorativ), --line2 der Rahmen eines
     BEDIENELEMENTS (Knopf, Eingabefeld, Umschalter) und damit kontrastpflichtig, --grid das
     Raster im Hintergrund.

     --line2 weicht vom Entwurf ab (dort #34486B): Gegen --panel kam der Wert auf 1,8:1, und
     fuer den Rahmen eines Bedienelements verlangt WCAG 3:1. #5273A8 ist derselbe Farbton,
     nur heller, und erreicht gegen alle vier Flaechen oben mindestens 3,38:1 - nachgerechnet
     von ThemeContrastTests. Die Haarlinie --line und das Raster --grid tragen keine Aussage
     und bleiben deshalb beim Wert aus dem Entwurf. */
  --line: #22314F;
  --line2: #5273A8;
  --grid: #131F36;

  /* Text, von kraeftig nach leise. --dim ist die leiseste Stufe und erreicht gegen --panel
     noch 4,97:1 - auch sie ist also voller Text und keine Andeutung. */
  --ink: #EEF3FB;
  --ink2: #D3DDEE;
  --mute2: #B7C4DB;
  --mute: #A9B7D0;
  --dim: #7E8FB0;

  /* Bedeutungsfarben. Welche wofuer steht, ist im ganzen Portal dieselbe Zuordnung:
     --bad der Protokollfehler, --warn der Hinweis, --ok der Erfolg, --teal der gemeldete
     Vorgangsausgang (Ablehnung, Abbruch - ausdruecklich NICHT rot, siehe site.css),
     --vio das Sprungziel und sonst nichts. */
  --teal: #1FD1B0;
  --bad: #FF8A96;
  --warn: #FFC857;
  --ok: #4ADE80;
  --vio: #8FA8FF;
  --vio2: #B9C8FF;

  /* Dieselben Toene als RGB-Tripel. Doppelt gefuehrt, weil es nicht anders geht: Jede
     Bootstrap-Utility, die mit Deckkraft arbeitet (.bg-*, .text-*, .border-*), setzt
     rgba(var(--bs-*-rgb), var(--bs-*-opacity)) zusammen und kann einen Hex-Wert dort nicht
     verwenden. Beim Aendern eines Tons oben gehoert das Tripel hier mitgezogen. */
  --bad-rgb: 255, 138, 150;
  --warn-rgb: 255, 200, 87;
  --ok-rgb: 74, 222, 128;
  --teal-rgb: 31, 209, 176;
  --vio-rgb: 143, 168, 255;
  --mute-rgb: 169, 183, 208;
  --ink-rgb: 238, 243, 251;
  --bg-rgb: 11, 18, 32;

  /* Die getoenten Flaechen zu den Bedeutungsfarben: der Grund eines Befundkastens, einer
     Meldung, einer markierten Akkordeon-Zeile. Je Paar so gewaehlt, dass die zugehoerige
     Schriftfarbe darauf mindestens 4,5:1 erreicht UND --ink darauf ebenfalls - in einem
     Meldungskasten steht beides. --bad-soft und --warn-soft sind die Werte aus dem Entwurf
     (dort die Kaesten "Abgelehnt" und "keine Antwort"), die uebrigen sind danach gebildet. */
  --bad-soft: #1A1220;
  --bad-line: #5A2C38;
  --on-bad: #0B1220;
  --warn-soft: #1B1A12;
  --warn-line: #5A4A1E;
  --ok-soft: #0E1F17;
  --ok-line: #1F5236;
  --teal-soft: #0C1F21;
  --teal-line: #1A4B4A;
  --vio-soft: #141A33;
  --vio-line: #2F3C6B;
  --mute-soft: #121C2F;
  --mute-line: #2A3A58;

  /* Die Richtung eines Telegramms (siehe .from-ecr und .from-pt in site.css): zwei ruhige
     Toene, die sich voneinander unterscheiden, ohne eine dritte Bedeutung mitzubringen. */
  --ecr: #111A2B;
  --pt: #0F1F23;

  /* Der Akzent. Die Fuellung ist in beiden Designs dieselbe, der Text darauf immer --accent-ink
     (10,25:1). Als SCHRIFTFARBE auf dunklem Grund taugt das Gelb selbst (8,88:1 gegen --panel);
     im hellen Design ist es dafuer zu hell und wird dort ersetzt. */
  --accent: #FFB02E;
  --accent-ink: #0B1220;
  --accent-text: #FFB02E;

  /* Auch die Schriftfarbe des Akzents braucht ihr Tripel: Bootstrap 5.3 faerbt JEDEN Link ueber
     rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)) und nicht ueber --bs-link-color.
     Wer nur den Hex-Wert setzt, hat eine Variable ueberschrieben, die kein Selektor liest - und
     die Links bleiben Bootstrap-Blau. */
  --accent-text-rgb: 255, 176, 46;

  /* Der Fokusring. Derselbe Ton wie der Akzent - er ist die eine Farbe, die im Portal nichts
     ueber einen Inhalt sagt und deshalb fuer "hier steht die Tastatur" frei ist. */
  --focus: #FFB02E;

  --schatten: 0 24px 48px rgba(0, 0, 0, 0.45);
  --schatten-klein: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* -------------------------------------------------------------------------------------------------
   Die Tokens, helles Design

   Nicht die invertierten Werte von oben, sondern eigene: Ein aufgehelltes Dunkeldesign wird grau
   und die Bedeutungsfarben werden darin unlesbar. Die kraeftigen Toene (--teal, --bad, --ok, --vio)
   sind hier deutlich dunkler als oben, weil sie gegen eine helle Flaeche stehen.
   ------------------------------------------------------------------------------------------------- */

[data-bs-theme="light"] {
  color-scheme: light;

  --bg: #F5F7FC;
  --bg2: #EAEFF8;
  --panel: #FFFFFF;
  --row: #F1F4FB;

  /* --line2 weicht aus demselben Grund wie oben vom Entwurf ab (dort #7F90B1): Gegen --bg2
     kam der Wert auf 2,79:1. #73859F erreicht gegen alle vier Flaechen mindestens 3,26:1. */
  --line: #D5DDEC;
  --line2: #73859F;
  --grid: #E6ECF6;

  --ink: #0E1730;
  --ink2: #26324D;
  --mute2: #3B4866;
  --mute: #4A5775;
  --dim: #5C6987;

  --teal: #0B7A66;
  --bad: #B3243A;
  --warn: #8A5A00;
  --ok: #12713B;
  --vio: #3A4FD6;
  --vio2: #3A4FD6;

  --bad-rgb: 179, 36, 58;
  --warn-rgb: 138, 90, 0;
  --ok-rgb: 18, 113, 59;
  --teal-rgb: 11, 122, 102;
  --vio-rgb: 58, 79, 214;
  --mute-rgb: 74, 87, 117;
  --ink-rgb: 14, 23, 48;
  --bg-rgb: 245, 247, 252;

  --bad-soft: #FCE9EC;
  --bad-line: #EFB9C2;
  --on-bad: #FFFFFF;
  --warn-soft: #FBF2DC;
  --warn-line: #E6CF95;
  --ok-soft: #E4F3EA;
  --ok-line: #A9D6BB;
  --teal-soft: #E8F5F2;
  --teal-line: #9ED4C9;
  --vio-soft: #E8EBFB;
  --vio-line: #B6BFF0;
  --mute-soft: #EDF1F8;
  --mute-line: #C7D1E4;

  --ecr: #EEF0F5;
  --pt: #E8F1EC;

  /* Die Fuellung bleibt das Gelb des Entwurfs - sie ist die Marke. Als Schriftfarbe wird daraus
     ein dunkles Ocker: #FFB02E auf Weiss kaeme auf 1,7:1 und waere nicht zu lesen. */
  --accent: #FFB02E;
  --accent-ink: #0B1220;
  --accent-text: #8A5A00;
  --accent-text-rgb: 138, 90, 0;

  --focus: #8A5A00;

  --schatten: 0 24px 48px rgba(10, 20, 40, 0.18);
  --schatten-klein: 0 8px 20px rgba(10, 20, 40, 0.12);
}

/* =================================================================================================
   Abbildung auf Bootstrap

   Ein einziger Block fuer beide Designs - siehe die Begruendung im Kopf dieser Datei. Er steht auf
   :root und damit bei gleicher Spezifitaet wie Bootstraps eigene Bloecke; dass er gewinnt, liegt
   allein an der Ladereihenfolge im Layout.
   ================================================================================================= */

:root {
  /* Schriften. system-ui als Rueckfall, damit die Seite auch lesbar ist, bevor (oder falls) die
     woff2-Dateien da sind. Sora fuer Text, IBM Plex Mono fuer alles, was eine Kennung ist:
     Telegramm-Bytes, Ports, Session-IDs, Code, Kicker. */
  --bs-font-sans-serif: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-font-monospace: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --bs-body-font-family: var(--bs-font-sans-serif);

  /* Flaechen und Text */
  --bs-body-bg: var(--bg);
  --bs-body-bg-rgb: var(--bg-rgb);
  --bs-body-color: var(--ink2);
  --bs-body-color-rgb: var(--ink-rgb);
  --bs-emphasis-color: var(--ink);
  --bs-emphasis-color-rgb: var(--ink-rgb);
  --bs-heading-color: var(--ink);

  /* .text-muted und .text-body-secondary haengen beide hieran. */
  --bs-secondary-color: var(--mute);
  --bs-secondary-color-rgb: var(--mute-rgb);
  --bs-secondary-bg: var(--bg2);
  --bs-tertiary-color: var(--dim);
  --bs-tertiary-color-rgb: var(--mute-rgb);
  --bs-tertiary-bg: var(--row);

  --bs-border-color: var(--line);
  --bs-border-color-translucent: var(--line);

  /* Links tragen den Akzent und nicht das Bootstrap-Blau. Beide Schreibweisen: Die Regel fuer
     <a> in Bootstrap 5.3 liest das Tripel, einzelne Bauteile (.btn-link, .page-link) lesen den
     Hex-Wert. */
  --bs-link-color: var(--accent-text);
  --bs-link-color-rgb: var(--accent-text-rgb);
  --bs-link-hover-color: var(--accent-text);
  --bs-link-hover-color-rgb: var(--accent-text-rgb);

  /* Code im Fliesstext (<code>) - dieselbe Farbe wie der uebrige Text, die Schrift macht den
     Unterschied. Bootstraps Pink waere eine Aussage, die ein Port oder ein Hex-Byte nicht hat. */
  --bs-code-color: var(--ink);
  --bs-highlight-color: var(--ink);
  --bs-highlight-bg: var(--warn-soft);

  /* "primary" ist im Portal der Akzent. Beides setzen: -rgb braucht jede Utility, die mit
     Deckkraft arbeitet (.bg-primary, .border-primary, .text-primary). */
  --bs-primary: var(--accent);
  --bs-primary-rgb: 255, 176, 46;

  /* Die uebrigen Bootstrap-Rollen auf die Bedeutungsfarben. --bs-*-rgb braucht .bg-*, und die
     drei "subtle"/"emphasis"-Varianten speisen saemtliche .alert-* (siehe bootstrap.css:
     .alert-danger setzt nur --bs-alert-color: var(--bs-danger-text-emphasis) usw.). Damit sind
     die Meldungskaesten in beiden Designs erledigt, ohne eine einzige .alert-Regel. */
  --bs-danger: var(--bad);
  --bs-danger-rgb: var(--bad-rgb);
  --bs-danger-text-emphasis: var(--bad);
  --bs-danger-bg-subtle: var(--bad-soft);
  --bs-danger-border-subtle: var(--bad-line);

  --bs-warning: var(--warn);
  --bs-warning-rgb: var(--warn-rgb);
  --bs-warning-text-emphasis: var(--warn);
  --bs-warning-bg-subtle: var(--warn-soft);
  --bs-warning-border-subtle: var(--warn-line);

  --bs-success: var(--ok);
  --bs-success-rgb: var(--ok-rgb);
  --bs-success-text-emphasis: var(--ok);
  --bs-success-bg-subtle: var(--ok-soft);
  --bs-success-border-subtle: var(--ok-line);

  --bs-info: var(--teal);
  --bs-info-rgb: var(--teal-rgb);
  --bs-info-text-emphasis: var(--teal);
  --bs-info-bg-subtle: var(--teal-soft);
  --bs-info-border-subtle: var(--teal-line);

  --bs-secondary: var(--mute);
  --bs-secondary-rgb: var(--mute-rgb);
  --bs-secondary-text-emphasis: var(--mute2);
  --bs-secondary-bg-subtle: var(--mute-soft);
  --bs-secondary-border-subtle: var(--mute-line);

  --bs-primary-text-emphasis: var(--accent-text);
  --bs-primary-bg-subtle: var(--warn-soft);
  --bs-primary-border-subtle: var(--warn-line);

  /* Radien. Der Entwurf arbeitet mit zwei Groessen: 24 bis 28 Pixel fuer eine Karte und 20 fuer
     ein Fenster (Live-Anzeige, Dialog). Dazwischen liegt mit 12 das, was ein Eingabefeld oder
     ein Meldungskasten bekommt - ein Feld mit 24 Pixel Radius sieht wie eine Kapsel aus. */
  --bs-border-radius: 12px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 20px;
  --bs-border-radius-xl: 24px;
  --bs-border-radius-xxl: 28px;
  --bs-border-radius-pill: 999px;

  /* Der Fokusring in Bootstraps eigener Sprache - .btn, .form-control und .accordion-button
     bilden ihren Ring aus dieser Variablen. */
  --bs-focus-ring-color: var(--focus);
  --bs-focus-ring-width: 3px;
  --bs-focus-ring-opacity: 1;
}

/* -------------------------------------------------------------------------------------------------
   Grundtypografie
   ------------------------------------------------------------------------------------------------- */

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-weight: 800;
  letter-spacing: -0.02em;
}

h1, .h1 {
  letter-spacing: -0.03em;
}

/* Eine Kennung ist kein Fliesstext: Bytes, Ports, Session-IDs und Code stehen in der
   Schreibmaschinenschrift, auch wenn sie mitten im Satz stehen. */
code, kbd, samp, pre, .font-monospace {
  font-family: var(--bs-font-monospace);
}

/* Code im Fliesstext bekommt einen leisen Grund, damit er als Kennung erkennbar bleibt, ohne
   die Zeilenhoehe zu sprengen. */
:not(pre) > code {
  padding: 0.1em 0.35em;
  background-color: var(--mute-soft);
  border-radius: 6px;
}

/* Der Kicker ueber einer Ueberschrift - die kleine Zeile in Schreibmaschinenschrift, die im
   Entwurf jeden Abschnitt eroeffnet. */
.kicker {
  font-family: var(--bs-font-monospace);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--teal);
  margin-bottom: 0.5rem;
}

.lead {
  color: var(--mute2);
}

/* -------------------------------------------------------------------------------------------------
   Fokus

   Sichtbar in BEIDEN Designs und auf jeder Flaeche: ein Ring aus zwei Lagen - innen die Farbe der
   Flaeche, aussen --focus. Eine Lage allein verschwindet, sobald das Bedienelement selbst die
   Farbe des Rings traegt (ein Akzentknopf mit Akzentring).

   :focus-visible und nicht :focus - sonst steht der Ring nach jedem Mausklick da, und wer mit der
   Maus arbeitet, hat ihn nicht angefordert. Fuer .btn kommt :focus-visible dazu, weil Bootstrap
   dort selbst auf :focus-visible umgestellt hat.
   ------------------------------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.accordion-button:focus,
.page-link:focus,
.list-group-item-action:focus-visible,
.btn-check:focus-visible + .btn {
  outline: 0;
  border-color: var(--focus);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 5px var(--focus);
}

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

   Pillenform und fette Schrift, wie im Entwurf. .btn-primary ist die Akzentfuellung mit
   --accent-ink darauf; alle .btn-outline-* tragen einen 2 Pixel starken Rahmen in --line2 und
   behalten ihre Bedeutung in der SCHRIFTFARBE - ein Knopf "Widerrufen" bleibt damit als der
   gefaehrliche erkennbar, ohne dass der Rahmen aus der Reihe faellt.
   ------------------------------------------------------------------------------------------------- */

.btn {
  --bs-btn-border-radius: 999px;
  --bs-btn-font-weight: 600;
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-focus-shadow-rgb: 255, 176, 46;
}

.btn-sm {
  --bs-btn-border-radius: 999px;
  --bs-btn-padding-x: 0.9rem;
}

.btn-lg {
  --bs-btn-border-radius: 999px;
  --bs-btn-padding-x: 1.75rem;
  --bs-btn-font-weight: 800;
}

.btn-primary {
  --bs-btn-font-weight: 800;
  --bs-btn-color: var(--accent-ink);
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-color: var(--accent-ink);
  --bs-btn-hover-bg: #FFC25C;
  --bs-btn-hover-border-color: #FFC25C;
  --bs-btn-active-color: var(--accent-ink);
  --bs-btn-active-bg: #E89A18;
  --bs-btn-active-border-color: #E89A18;
  --bs-btn-disabled-color: var(--accent-ink);
  --bs-btn-disabled-bg: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
}

/* Die gefuellten Varianten, die das Portal benutzt: Text in --accent-ink, weil jede dieser
   Fuellungen hell ist (Bootstraps Vorgabe waere Weiss und damit unlesbar). */
.btn-danger {
  --bs-btn-color: var(--on-bad);
  --bs-btn-bg: var(--bad);
  --bs-btn-border-color: var(--bad);
  --bs-btn-hover-color: var(--on-bad);
  --bs-btn-hover-bg: var(--bad);
  --bs-btn-hover-border-color: var(--bad);
  --bs-btn-active-color: var(--on-bad);
  --bs-btn-active-bg: var(--bad);
  --bs-btn-active-border-color: var(--bad);
  --bs-btn-disabled-color: var(--on-bad);
  --bs-btn-disabled-bg: var(--bad);
  --bs-btn-disabled-border-color: var(--bad);
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-dark,
.btn-outline-light {
  --bs-btn-border-width: 2px;
  --bs-btn-border-color: var(--line2);
  --bs-btn-hover-border-color: var(--line2);
  --bs-btn-active-border-color: var(--line2);
  --bs-btn-disabled-border-color: var(--line);
  --bs-btn-bg: transparent;
}

.btn-outline-primary {
  --bs-btn-color: var(--accent-text);
  --bs-btn-hover-color: var(--accent-ink);
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-active-color: var(--accent-ink);
  --bs-btn-active-bg: var(--accent);
  --bs-btn-active-border-color: var(--accent);
  --bs-btn-disabled-color: var(--dim);
}

.btn-outline-secondary {
  --bs-btn-color: var(--ink2);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--mute-soft);
  --bs-btn-active-color: var(--ink);
  --bs-btn-active-bg: var(--mute-soft);
  --bs-btn-disabled-color: var(--dim);
}

.btn-outline-danger {
  --bs-btn-color: var(--bad);
  --bs-btn-hover-color: var(--bad);
  --bs-btn-hover-bg: var(--bad-soft);
  --bs-btn-hover-border-color: var(--bad);
  --bs-btn-active-color: var(--bad);
  --bs-btn-active-bg: var(--bad-soft);
  --bs-btn-active-border-color: var(--bad);
  --bs-btn-disabled-color: var(--dim);
}

.btn-outline-success {
  --bs-btn-color: var(--ok);
  --bs-btn-hover-color: var(--ok);
  --bs-btn-hover-bg: var(--ok-soft);
  --bs-btn-active-color: var(--ok);
  --bs-btn-active-bg: var(--ok-soft);
  --bs-btn-disabled-color: var(--dim);
}

.btn-outline-warning {
  --bs-btn-color: var(--warn);
  --bs-btn-hover-color: var(--warn);
  --bs-btn-hover-bg: var(--warn-soft);
  --bs-btn-active-color: var(--warn);
  --bs-btn-active-bg: var(--warn-soft);
  --bs-btn-disabled-color: var(--dim);
}

.btn-outline-info {
  --bs-btn-color: var(--teal);
  --bs-btn-hover-color: var(--teal);
  --bs-btn-hover-bg: var(--teal-soft);
  --bs-btn-active-color: var(--teal);
  --bs-btn-active-bg: var(--teal-soft);
  --bs-btn-disabled-color: var(--dim);
}

/* .btn-link ist kein Knopf mit Rahmen, sondern ein Link in Knopfform (siehe _LoginPartial). */
.btn-link {
  --bs-btn-color: var(--ink2);
  --bs-btn-hover-color: var(--accent-text);
  --bs-btn-active-color: var(--accent-text);
  --bs-btn-font-weight: 600;
}

/* Die Umschaltgruppe auf /Pricing (monatlich/jaehrlich): btn-check + label. Ausgewaehlt heisst
   Akzentfuellung - sonst waere nicht zu sehen, welcher der beiden gilt. */
.btn-check:checked + .btn-outline-primary {
  --bs-btn-color: var(--accent-ink);
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* -------------------------------------------------------------------------------------------------
   Flaechen: Karten, Akkordeon, Tabellen, Listen, Fenster
   ------------------------------------------------------------------------------------------------- */

.card {
  --bs-card-bg: var(--panel);
  --bs-card-border-color: var(--line);
  --bs-card-border-radius: 24px;
  --bs-card-inner-border-radius: 23px;
  --bs-card-cap-bg: var(--bg2);
  --bs-card-spacer-y: 1.5rem;
  --bs-card-spacer-x: 1.5rem;
  --bs-card-color: var(--ink2);
  --bs-card-title-color: var(--ink);
}

.accordion {
  --bs-accordion-bg: var(--panel);
  --bs-accordion-color: var(--ink2);
  --bs-accordion-border-color: var(--line);
  --bs-accordion-border-radius: 20px;
  --bs-accordion-inner-border-radius: 19px;
  --bs-accordion-btn-color: var(--ink);
  --bs-accordion-active-color: var(--ink);
  --bs-accordion-active-bg: var(--bg2);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 2px var(--bg), 0 0 0 5px var(--focus);
}

.table {
  --bs-table-color: var(--ink2);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--line);
  --bs-table-striped-bg: var(--row);
  --bs-table-hover-bg: var(--row);
  --bs-table-hover-color: var(--ink);
}

.table > thead {
  color: var(--mute);
}

.list-group {
  --bs-list-group-bg: var(--panel);
  --bs-list-group-color: var(--ink2);
  --bs-list-group-border-color: var(--line);
  --bs-list-group-border-radius: 16px;
  --bs-list-group-action-color: var(--ink2);
  --bs-list-group-action-hover-color: var(--ink);
  --bs-list-group-action-hover-bg: var(--bg2);
  --bs-list-group-action-active-color: var(--ink);
  --bs-list-group-action-active-bg: var(--bg2);
  --bs-list-group-active-color: var(--accent-ink);
  --bs-list-group-active-bg: var(--accent);
  --bs-list-group-active-border-color: var(--accent);
}

.modal {
  --bs-modal-bg: var(--panel);
  --bs-modal-color: var(--ink2);
  --bs-modal-border-color: var(--line);
  --bs-modal-border-radius: 20px;
  --bs-modal-inner-border-radius: 19px;
  --bs-modal-header-border-color: var(--line);
  --bs-modal-footer-border-color: var(--line);
  --bs-modal-box-shadow: var(--schatten);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--panel);
  --bs-dropdown-color: var(--ink2);
  --bs-dropdown-border-color: var(--line);
  --bs-dropdown-border-radius: 16px;
  --bs-dropdown-link-color: var(--ink2);
  --bs-dropdown-link-hover-color: var(--ink);
  --bs-dropdown-link-hover-bg: var(--bg2);
  --bs-dropdown-link-active-color: var(--accent-ink);
  --bs-dropdown-link-active-bg: var(--accent);
  --bs-dropdown-header-color: var(--mute);
  --bs-dropdown-box-shadow: var(--schatten-klein);
}

.pagination {
  --bs-pagination-color: var(--ink2);
  --bs-pagination-bg: var(--panel);
  --bs-pagination-border-color: var(--line);
  --bs-pagination-hover-color: var(--ink);
  --bs-pagination-hover-bg: var(--bg2);
  --bs-pagination-hover-border-color: var(--line);
  --bs-pagination-focus-color: var(--ink);
  --bs-pagination-focus-bg: var(--bg2);
  --bs-pagination-active-color: var(--accent-ink);
  --bs-pagination-active-bg: var(--accent);
  --bs-pagination-active-border-color: var(--accent);
  --bs-pagination-disabled-color: var(--dim);
  --bs-pagination-disabled-bg: var(--bg2);
  --bs-pagination-disabled-border-color: var(--line);
}

.nav-pills {
  --bs-nav-pills-border-radius: 999px;
  --bs-nav-pills-link-active-color: var(--accent-ink);
  --bs-nav-pills-link-active-bg: var(--accent);
}

.nav-link {
  --bs-nav-link-color: var(--ink2);
  --bs-nav-link-hover-color: var(--accent-text);
}

/* -------------------------------------------------------------------------------------------------
   Formulare

   Bootstrap faerbt Rahmen und Ring eines fokussierten Feldes mit festen Werten (#86b7fe und ein
   blauer Schatten) - die stehen direkt in der Regel und nicht in einer Variablen. Der Fokusblock
   weiter oben setzt sie deshalb neu; hier stehen nur die Flaechen.
   ------------------------------------------------------------------------------------------------- */

.form-control,
.form-select {
  background-color: var(--panel);
  border-color: var(--line2);
  color: var(--ink);
}

.form-control::placeholder {
  color: var(--dim);
}

.form-control:disabled,
.form-select:disabled {
  background-color: var(--bg2);
  color: var(--mute);
}

.form-label {
  color: var(--ink);
  font-weight: 600;
}

.form-text {
  color: var(--mute);
}

.form-check-input {
  background-color: var(--panel);
  border-color: var(--line2);
}

.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

/* Das Haekchen im angekreuzten Kaestchen ist ein Hintergrundbild mit fester Farbe. Bootstrap
   liefert eine weisse Fassung; auf der gelben Fuellung braucht es die dunkle. */
.form-check-input:checked[type="checkbox"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230B1220' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input:checked[type="radio"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230B1220'/%3e%3c/svg%3e");
}

.input-group-text {
  background-color: var(--bg2);
  border-color: var(--line2);
  color: var(--mute2);
}

/* Eingabefelder, die Bootstrap als fehlerhaft markiert (jquery-validation setzt .input-validation-error,
   Bootstrap .is-invalid). Beides, weil das Portal beide Wege benutzt. */
.form-control.is-invalid,
.form-select.is-invalid,
.input-validation-error {
  border-color: var(--bad);
}

/* -------------------------------------------------------------------------------------------------
   Meldungskaesten und Plaketten

   Die .alert-* kommen vollstaendig aus der Abbildung oben (siehe --bs-*-text-emphasis und die
   zwei "subtle"-Variablen je Rolle), hier bleibt nur der Radius.

   Die Plaketten werden dagegen umgebaut: Bootstrap faerbt sie flaechig und schreibt Weiss darauf,
   und Weiss ist auf JEDER der Bedeutungsfarben dieses Portals unlesbar - sie sind alle hell (im
   dunklen Design) oder saturiert (im hellen). Stattdessen das Muster aus dem Entwurf: Pille mit
   Rahmen, getoentem Grund und der Bedeutungsfarbe als SCHRIFT. Damit traegt die Aussage nicht mehr
   der Farbton allein, sondern auch der Text darin - und sie bleibt in beiden Designs lesbar.
   ------------------------------------------------------------------------------------------------- */

.alert {
  --bs-alert-border-radius: 14px;
}

.badge {
  --bs-badge-border-radius: 999px;
  --bs-badge-font-weight: 600;
  --bs-badge-padding-x: 0.75em;
  --bs-badge-padding-y: 0.4em;
  --bs-badge-color: var(--ink2);
  border: 1px solid var(--line2);
  background-color: transparent;
}

/* Die Hintergrund-Utilities tragen bei Bootstrap !important; die Regeln hier sind
   spezifischer UND ebenfalls !important, deshalb gewinnen sie. */
.badge.bg-danger {
  color: var(--bad);
  border-color: var(--bad-line);
  background-color: var(--bad-soft) !important;
}

.badge.bg-warning {
  color: var(--warn);
  border-color: var(--warn-line);
  background-color: var(--warn-soft) !important;
}

.badge.bg-success {
  color: var(--ok);
  border-color: var(--ok-line);
  background-color: var(--ok-soft) !important;
}

.badge.bg-info {
  color: var(--teal);
  border-color: var(--teal-line);
  background-color: var(--teal-soft) !important;
}

.badge.bg-primary {
  color: var(--accent-text);
  border-color: var(--warn-line);
  background-color: var(--warn-soft) !important;
}

.badge.bg-vio {
  color: var(--vio);
  border-color: var(--vio-line);
  background-color: var(--vio-soft) !important;
}

.badge.bg-secondary,
.badge.bg-light,
.badge.bg-dark {
  color: var(--ink2);
  border-color: var(--mute-line);
  background-color: var(--mute-soft) !important;
}

/* -------------------------------------------------------------------------------------------------
   Die Flaechen-Utilities

   .bg-light, .bg-white und .bg-dark sind feste Graustufen und sagen damit im dunklen Design das
   Gegenteil von dem, was gemeint war: .bg-light auf einer dunklen Seite ist ein weisser Block.
   Sie werden deshalb auf Tokens gelegt - zusammen mit .text-dark und .text-white, die aus
   denselben Zeiten stammen.

   Neuer Code soll sie nicht mehr benutzen (siehe CLAUDE.md); die Regeln hier sind dafuer da, dass
   eine vergessene Stelle nicht entgleist.
   ------------------------------------------------------------------------------------------------- */

.bg-light,
.bg-white {
  background-color: var(--bg2) !important;
}

.bg-dark {
  background-color: var(--panel) !important;
}

.bg-body,
.bg-body-tertiary {
  background-color: var(--bg) !important;
}

.text-dark,
.text-white,
.text-body,
.text-body-emphasis {
  color: var(--ink) !important;
}

.text-muted,
.text-body-secondary {
  color: var(--mute) !important;
}

.border {
  border-color: var(--line) !important;
}

.border-primary {
  border-color: var(--accent) !important;
}

.border-danger {
  border-color: var(--bad) !important;
}

.border-info {
  border-color: var(--teal) !important;
}

.text-danger {
  color: var(--bad) !important;
}

.text-success {
  color: var(--ok) !important;
}

.text-warning {
  color: var(--warn) !important;
}

.text-info {
  color: var(--teal) !important;
}

.text-primary {
  color: var(--accent-text) !important;
}

/* -------------------------------------------------------------------------------------------------
   Ein "Fenster" - die Darstellung aus dem Entwurf fuer alles, was Verkehr zeigt: dunkler Rahmen,
   20 Pixel Radius, eine Kopfzeile in Schreibmaschinenschrift darueber. Benutzt von der
   Live-Anzeige auf /Simulator.

   Die Auswertung auf /Mitschnitt-Analyse bekommt es ausdruecklich NICHT: Dort erscheinen
   Gliederung und Kurzprotokoll einzeln und erst nach dem Hochladen (das Skript nimmt ihnen je
   fuer sich d-none ab). Ein Rahmen darum stuende vorher leer da - und ihn mitzuschalten waere
   eine Aenderung am Verhalten der Seite, nicht am Aussehen.
   ------------------------------------------------------------------------------------------------- */

.fenster {
  background-color: var(--panel);
  border: 2px solid var(--line2);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--schatten-klein);
}

.fenster-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.125rem;
  border-bottom: 1px solid var(--line);
  background-color: var(--bg2);
  font-family: var(--bs-font-monospace);
  font-size: 0.8125rem;
  color: var(--mute);
}

.fenster-rumpf {
  padding: 1rem 1.125rem;
}

/* Die drei Punkte links in der Kopfzeile - reine Zier, deshalb aria-hidden im Markup. */
.fenster-punkte {
  display: inline-flex;
  gap: 0.375rem;
}

.fenster-punkte > span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.fenster-punkte > span:nth-child(1) {
  background-color: var(--bad);
}

.fenster-punkte > span:nth-child(2) {
  background-color: var(--warn);
}

.fenster-punkte > span:nth-child(3) {
  background-color: var(--ok);
}

/* -------------------------------------------------------------------------------------------------
   Kopfzeile, Fusszeile, Sprungmarke

   Das Geruest, das auf jeder Seite steht. Es traegt im Markup keine einzige Farbe - was eine
   Flaeche hier zeigt, steht ausschliesslich hier (siehe Pages/Shared/_Layout.cshtml).
   ------------------------------------------------------------------------------------------------- */

/* Die Seite fuellt mindestens den Schirm, der Inhalt dehnt sich. Ohne das stuende die Fusszeile
   auf einer kurzen Seite (etwa /KontoGeloescht) mitten im Bild, und darunter laege ein leerer
   Block in der Seitenfarbe - im dunklen Design faellt das sofort auf. */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.portal-inhalt {
  flex: 1 0 auto;
}

/* Die Sprungmarke liegt ausserhalb des Bildes, bis sie den Fokus bekommt - und zwar ueber die
   Position und ausdruecklich nicht ueber display:none oder visibility:hidden: Beides naehme sie
   auch der Tastatur, und dann waere sie gar nicht mehr da, wofuer sie da ist. */
.sprungmarke {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 1100;
  padding: 0.75rem 1.25rem;
  background-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  border-radius: 0 0 12px 0;
}

.sprungmarke:focus {
  left: 0;
  color: var(--accent-ink);
}

/* -------------------------------------------------------------------------------------------------
   Die Kopfzeile
   ------------------------------------------------------------------------------------------------- */

.portal-kopf {
  --bs-navbar-color: var(--mute);
  --bs-navbar-hover-color: var(--ink);
  --bs-navbar-active-color: var(--ink);
  --bs-navbar-brand-color: var(--ink);
  --bs-navbar-brand-hover-color: var(--ink);
  --bs-navbar-toggler-border-color: var(--line2);
  --bs-navbar-toggler-focus-width: 3px;
  --bs-navbar-padding-y: 1rem;
  --bs-navbar-nav-link-padding-x: 0.9rem;

  background-color: var(--bg);
  border-bottom: 1px solid var(--line);
  margin-bottom: 2rem;
}

.portal-marke {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: 0.06em;
}

.portal-marke img {
  display: block;
}

/* Kein Menuepunkt bricht mitten im Wort um. Bei sechs Punkten plus Anmeldung ist die Zeile auf
   einem 1280er Schirm knapp; ohne das stuende "Mitschnitt-" ueber "Analyse", und das sieht nach
   zwei Punkten aus. Wird es wirklich zu eng, bricht die Zeile als Ganzes um - der Kopf ist
   flex-wrap. */
.portal-kopf .nav-link {
  white-space: nowrap;
}

/* Der rechte Teil: Name und Abmelden, oder Anmelden und Registrieren. */
.portal-konto {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* Eingeklappt steht alles untereinander, und dort braucht jeder Menuepunkt eine Flaeche, die mit
   dem Finger zu treffen ist - 44 Pixel ist das Mass, das die Zugaenglichkeitsrichtlinien dafuer
   nennen. Aufgeklappt reicht die Polsterung von Bootstrap. */
@media (max-width: 991.98px) {
  .portal-kopf .nav-link {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .portal-konto {
    margin-top: 0.75rem;
  }
}

.portal-kopf .navbar-toggler {
  min-width: 44px;
  min-height: 44px;
}

/* Das Konto-Menue: im Kopf steht nur "Konto" mit dem Anfangsbuchstaben der Adresse. Die Adresse
   selbst steht im Menue, ist dort auf eine Breite begrenzt und endet notfalls mit drei Punkten -
   der vollstaendige Wert steht im title. */
.konto-knopf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 0;
}

.konto-zeichen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid var(--line2);
  border-radius: 50%;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 700;
}

.konto-menue {
  min-width: 14rem;
  max-width: calc(100vw - 2rem);
}

.konto-adresse {
  display: block;
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink2);
  font-weight: 600;
}

/* Abmelden ist ein Knopf im Formular, soll im Menue aber wie die Links darueber aussehen. */
.konto-menue form .dropdown-item {
  width: 100%;
  text-align: left;
}

/* Eingeklappt steht das Menue in der Spalte und darf die Seite nicht verbreitern. */
@media (max-width: 991.98px) {
  .konto-menue {
    position: static;
    float: none;
    width: 100%;
    margin-top: 0.25rem;
  }
}

/* -------------------------------------------------------------------------------------------------
   Der Umschalter zwischen den beiden Designs

   Er steht im Markup VOR dem einklappbaren Teil, damit er auf dem Handy neben dem Burger-Knopf
   sichtbar bleibt. Auf breiten Schirmen gehoert er aber ans rechte Ende, hinter die Anmeldung -
   deshalb die drei order-Angaben weiter unten. Eine zweite Schaltflaeche fuer breite Schirme waere
   die Alternative gewesen; dann gaebe es zwei Knoepfe mit derselben Kennung.
   ------------------------------------------------------------------------------------------------- */

.theme-knopf {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin-left: auto;
  margin-right: 0.5rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--line2);
  border-radius: 50%;
  background-color: transparent;
  color: var(--ink);
}

.theme-knopf:hover {
  border-color: var(--ink);
}

.theme-knopf:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 5px var(--focus);
}

/* Das Sinnbild nennt das ZIEL des Klicks und nicht den Zustand: Im dunklen Design steht die Sonne
   darin, im hellen der Mond. Welches zu sehen ist, entscheidet dieses Attribut und nicht
   JavaScript - damit steht beim ersten Zeichnen schon das richtige da. */
.sinnbild-mond {
  display: none;
}

[data-bs-theme="light"] .sinnbild-sonne {
  display: none;
}

[data-bs-theme="light"] .sinnbild-mond {
  display: block;
}

@media (min-width: 992px) {
  .portal-kopf .navbar-brand {
    order: 1;
  }

  /* Menue und Anmeldung stehen nebeneinander, solange sie nebeneinander passen - und rutschen
     sonst UNTEREINANDER, statt aus der Kopfzeile zu laufen. Ohne das Umbrechen hier schiebt ein
     langer Kontoname (eine E-Mail-Adresse kann beliebig lang sein) den Umschalter rechts aus dem
     Bild: Der einklappbare Teil bekommt nur den Platz, der da ist, und sein Inhalt haengt dann
     darueber hinaus.

     min-width: 0 gehoert dazu - ein Flex-Element schrumpft sonst nicht unter die Breite seines
     laengsten Inhalts, und genau das ist hier der Fall. */
  .portal-kopf .navbar-collapse {
    order: 2;
    flex-wrap: wrap;
    row-gap: 0.5rem;
    min-width: 0;
  }

  .portal-kopf .portal-konto {
    margin-left: auto;
  }

  .portal-kopf .theme-knopf {
    order: 3;
    margin-left: 1rem;
    margin-right: 0;
  }
}

/* -------------------------------------------------------------------------------------------------
   Die Fusszeile
   ------------------------------------------------------------------------------------------------- */

.portal-fuss {
  margin-top: 3rem;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 0.9375rem;
}

.portal-fuss > .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

/* Betreibername und Versionsstand: dezent, eine Zeile, auf dem Handy untereinander. */
.portal-fuss-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0;
  font-size: 0.875rem;
}

/* Die drei Rechtstexte tragen hier nicht den Akzent: In der Fusszeile stehen sie als Liste
   nebeneinander, und drei gelbe Woerter unter jeder Seite waeren lauter als das, was darueber
   steht. --dim erreicht gegen die Seitenfarbe in beiden Designs mehr als 4,5:1. */
.portal-fuss a {
  color: var(--dim);
}

.portal-fuss a:hover,
.portal-fuss a:focus-visible {
  color: var(--ink);
}

.portal-fuss-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* -------------------------------------------------------------------------------------------------
   Kleinteile
   ------------------------------------------------------------------------------------------------- */

hr {
  border-top-color: var(--line);
  opacity: 1;
}

/* Ein Block mit Quelltext, einem Befehl oder einer Beispielzeile aus einem Mitschnitt. Er ersetzt
   das fruehere "bg-light border rounded p-3" auf den <pre>-Elementen der Seiten: Dieselbe Optik,
   aber aus Tokens statt aus Bootstraps festen Graustufen - und eine Klasse, die sagt, was der
   Block ist, statt wie er aussieht. */
.quellblock {
  background-color: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  overflow-x: auto;
}

/* Ein getoenter Block, in dem ein Abschnitt steht - das Gegenstueck zu --bg2 im Entwurf. */
.flaeche {
  background-color: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 1.5rem;
}

::selection {
  background-color: var(--accent);
  color: var(--accent-ink);
}

/* 16 Pixel Seitenrand auf jedem Schirm: Bootstraps Vorgabe (1,5rem Rinne, also 12 Pixel je Seite)
   ist auf dem Handy knapp. Gilt fuer Kopf, Inhalt und Fusszeile gleichermassen. */
.container {
  --bs-gutter-x: 2rem;
}