/* FISI-Wiki · wiki.css — Layout. Farben/Größen kommen aus theme.css. */

/* Rückfallwerte für alles, was ältere theme.css-Dateien noch nicht kennen.
   :where() hat Spezifität 0 — theme.css (:root) gewinnt hier immer, egal in
   welcher Reihenfolge geladen wird. Ohne :where() wäre es umgekehrt. */
:where(:root) {
  --header-hoehe: 58px;
  --zeilenhoehe: 1.65;
  --rahmen-staerke: 1px;

  /* Kästen */
  --c-merke: #003882;
  --c-merke-flaeche: #EBEFF5;
  --c-warn: #C8102E;
  --c-warn-flaeche: #FDF0F0;
  --c-rechnung-flaeche: #F7F9FC;

  /* Tabellen */
  --c-th-flaeche: #F0F7FC;
  --c-zebra: #F7FAFC;

  /* Belegzeichen */
  --c-b-ap-flaeche: #EDF3FA;        --c-b-ap-text: #0C447C;
  --c-b-katalog-flaeche: #E1F5EE;   --c-b-katalog-text: #0F6E56;
  --c-b-bw-flaeche: #F0F6E7;        --c-b-bw-text: #3B6D11;
  --c-b-rp-flaeche: #EEEDFE;        --c-b-rp-text: #3C3489;
  --c-b-sek-flaeche: #F4F5F2;       --c-b-sek-text: #5F5E5A;
  --c-b-ungeprueft-flaeche: #F4F5F2; --c-b-ungeprueft-text: #5F5E5A;
  --c-b-dauer-flaeche: #FDF0F0;     --c-b-dauer-text: #A32D2D;
  --c-b-regel-flaeche: #FAEEDA;     --c-b-regel-text: #854F0B;
  --c-b-gel-flaeche: #F4F5F2;       --c-b-gel-text: #5F5E5A;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--schrift);
  font-size: var(--schriftgroesse);
  line-height: var(--zeilenhoehe);
  color: var(--c-text);
  background: var(--c-seite);
}
a { color: var(--c-primaer); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--c-akzent); outline-offset: 2px; }
.skiplink { position: absolute; left: -9999px; }
.skiplink:focus { left: 8px; top: 8px; background: #fff; padding: 6px 10px; z-index: 60; }

/* ---------- Kopf ---------- */
.kopf {
  position: sticky; top: 0; z-index: 30;
  height: var(--header-hoehe);
  background: var(--c-karte);
  border-bottom: 1px solid var(--c-linie);
}
.kopf-innen {
  max-width: var(--inhalt-breite); margin: 0 auto; height: 100%;
  padding: 0 16px; display: flex; align-items: center; gap: 12px;
}
.marke { color: var(--c-primaer); font-size: 1.05em; font-weight: 700; white-space: nowrap; }
.marke span { color: var(--c-akzent); }
.marke:hover { text-decoration: none; }
.marke-sub { color: var(--c-text-hauch); font-size: .78em; white-space: nowrap; }

/* Hamburger — nur mobil sichtbar */
.hamburger {
  display: none; width: 36px; height: 36px; flex-shrink: 0;
  border: none; background: none; cursor: pointer; border-radius: var(--radius);
  flex-direction: column; justify-content: center; align-items: center; gap: 4px;
}
.hamburger:hover { background: var(--c-aktiv-flaeche); }
.hamburger span { display: block; width: 20px; height: 2px; background: var(--c-primaer); border-radius: 2px; }

/* Anmeldung — von konto.js erzeugt, steht links neben der Suche.
   Das margin-left:auto wandert dabei von der Suche hierher; der
   Geschwister-Selektor greift nur, wenn der Kasten wirklich da ist.
   Ohne konto.js bleibt der Kopf also unverändert. */
.kopf-konto { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.kopf-konto ~ .suche { margin-left: 0; }
.konto-name {
  font-size: .85em; font-weight: 700; color: var(--c-primaer);
  /* Lange Namen werden gekürzt, aber nie bis zur Unkenntlichkeit:
     unter 4,5 ch bliebe auf sehr schmalen Geräten nur die Ellipse übrig. */
  min-width: 4.5ch; max-width: 10ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.konto-knopf {
  flex-shrink: 0; padding: 6px 12px; min-height: 32px;
  background: var(--c-karte); color: var(--c-primaer);
  border: 1px solid var(--c-linie); border-radius: 999px;
  font-family: inherit; font-size: .8em; font-weight: 700; white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.konto-knopf:hover { background: var(--c-aktiv-flaeche); text-decoration: none; }

/* Suche */
.suche {
  position: relative; margin-left: auto;
  display: flex; align-items: center;
  background: var(--c-seite); border: 1px solid var(--c-linie);
  border-radius: 999px; padding: 6px 14px; width: 100%; max-width: 280px;
}
.suche svg { flex-shrink: 0; margin-right: 8px; color: var(--c-text-blass); }
.suche input {
  border: none; background: none; outline: none; width: 100%;
  font-family: inherit; font-size: .85em; color: var(--c-text);
}
.suchergebnisse {
  position: absolute; right: 0; top: calc(100% + 6px); width: 340px; max-width: 90vw;
  background: var(--c-karte); border: 1px solid var(--c-linie); border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0, 40, 90, .10); z-index: 40; max-height: 60vh; overflow: auto;
}
.suchergebnisse a { display: block; padding: 8px 12px; font-size: .85em; border-bottom: 1px solid var(--c-linie); }
.suchergebnisse a:last-child { border-bottom: none; }
.suchergebnisse a:hover { background: var(--c-aktiv-flaeche); text-decoration: none; }
.suchergebnisse .wo { display: block; color: var(--c-text-hauch); font-size: .85em; }
.suchergebnisse .leer { padding: 10px 12px; color: var(--c-text-hauch); font-size: .85em; }

/* ---------- Grundraster: Sidebar + Inhalt ---------- */
.rahmen { max-width: var(--inhalt-breite); margin: 0 auto; }
.layout { display: grid; grid-template-columns: var(--leiste-breite) minmax(0, 1fr); }

.sidebar {
  background: var(--c-karte); border-right: 1px solid var(--c-linie);
  padding: 18px 12px; align-self: start;
  position: sticky; top: var(--header-hoehe);
  max-height: calc(100vh - var(--header-hoehe)); overflow-y: auto;
  /* Am Ende der Liste nicht die Seite dahinter mitscrollen. */
  overscroll-behavior: contain;
}
.sidebar h3 {
  font-size: .7em; text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-text-blass); font-weight: 700; margin: 20px 0 8px 8px;
}
.sidebar h3:first-child { margin-top: 0; }

.modul-liste { list-style: none; margin: 0; padding: 0; }
.modul-liste a {
  display: flex; gap: 8px; align-items: baseline;
  color: var(--c-text); font-size: .82em; padding: 7px 8px;
  border-radius: var(--radius); border-left: 3px solid transparent;
}
.modul-liste .nr { color: var(--c-text-hauch); font-variant-numeric: tabular-nums; font-size: .95em; }
.modul-liste a:hover { background: var(--c-aktiv-flaeche); text-decoration: none; }
.modul-liste a.aktiv {
  background: var(--c-aktiv-flaeche); border-left-color: var(--c-akzent);
  color: var(--c-primaer); font-weight: 600;
}
.modul-liste .extern::after { content: " \2197"; color: var(--c-text-hauch); font-size: .85em; }
.dd-hinweis { padding: 6px 8px; font-size: .75em; color: var(--c-text-hauch); }

/* Inhaltsverzeichnis der aktuellen Seite */
.toc { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--c-linie); }
.toc a {
  display: block; color: var(--c-text-blass); font-size: .8em;
  padding: 5px 8px; border-radius: var(--radius);
}
.toc li.unter a { padding-left: 20px; font-size: .76em; }
.toc a:hover { background: var(--c-aktiv-flaeche); color: var(--c-text-stark); text-decoration: none; }
.toc a.aktiv { background: var(--c-aktiv-flaeche); color: var(--c-primaer); font-weight: 600; }

/* Overlay hinter dem mobilen Drawer */
.overlay { display: none; }

/* ---------- Inhalt ---------- */
.inhalt { background: var(--c-inhalt); padding: 22px 28px 48px; min-height: 60vh; min-width: 0; }
.inhalt.breit { padding: 24px 28px 48px; }
.brotkrumen { font-size: .78em; color: var(--c-text-hauch); margin-bottom: 10px; }
.titelzeile {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  border-bottom: 1px solid var(--c-linie); padding-bottom: 12px; margin-bottom: 4px;
}
h1 {
  color: var(--c-text-stark); font-size: 1.8em; margin: 0; font-weight: 700;
  line-height: 1.25;
}
.intro { color: var(--c-text-blass); font-size: .9em; margin: 12px 0 18px; }

/* Schnellübersicht — aus den Angaben der Seite erzeugt (layout.js).
   Bündelt Intro, Kennzahlen und Relevanzfilter in einem Kasten. */
.infobox {
  background: var(--c-karte); border: var(--rahmen-staerke) solid var(--c-linie);
  border-radius: var(--radius); overflow: hidden; margin: 12px 0 16px;
}
.infobox-kopf {
  background: var(--c-primaer); color: #fff; font-weight: 700;
  font-size: .8em; padding: 9px 14px;
  cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 9px;
}
/* Eigenes Dreieck statt der uneinheitlichen Browser-Markierung */
.infobox-kopf::-webkit-details-marker { display: none; }
.infobox-kopf { list-style: none; }
.infobox-kopf::before {
  content: "\25B8"; display: inline-block; font-size: 1.1em; line-height: 1;
  transition: transform .15s ease;
}
.infobox[open] .infobox-kopf::before { transform: rotate(90deg); }
.infobox-kopf:hover { filter: brightness(1.15); }
.infobox-koerper { padding: 12px 14px; }
.infobox .intro { margin: 0 0 12px; }
.infobox dl {
  margin: 0; display: grid; gap: 10px 20px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.infobox .relevanz-leiste {
  border: none; border-top: 1px solid var(--c-linie); border-radius: 0;
  background: none; padding: 10px 0 0; margin: 12px 0 0;
}
.infobox dt {
  font-size: .68em; text-transform: uppercase; letter-spacing: .04em;
  color: var(--c-text-blass); font-weight: 700;
}
.infobox dd { margin: 3px 0 0; font-size: .85em; color: var(--c-text-stark); }
.infobox dd .badge { margin-right: 4px; }
h2 { color: var(--c-text-stark); font-size: 1.08em; margin: 0; font-weight: 600; }
h3 { color: var(--c-text-stark); font-size: .95em; margin: 16px 0 4px; font-weight: 600; }
p { margin: 8px 0; }
ul, ol { margin: 8px 0; padding-left: 22px; }
li { margin: 3px 0; }
.blass { color: var(--c-text-blass); }

/* Karten */
.karte {
  background: var(--c-karte); border: var(--rahmen-staerke) solid var(--c-linie); border-radius: var(--radius);
  padding: 14px 18px; margin-bottom: 14px; font-size: .92em;
  scroll-margin-top: calc(var(--header-hoehe) + 12px);
}
.karten-kopf { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-bottom: 4px; }
.karte.notiz { border-style: dashed; }
.tiefe { font-size: .9em; color: var(--c-text-blass); margin: 2px 0 10px; }

/* Aufzählungen mit blauen Marken (aus Design1Muster.html) */
.karte ul, .karte ol { list-style: none; padding-left: 0; }
.karte ul li, .karte ol li { position: relative; padding-left: 22px; }
.karte ul li::before {
  content: "\2022"; color: var(--c-primaer); font-weight: 700; font-size: 1.1em;
  position: absolute; left: 4px; top: -1px;
}
/* Zweite Ebene: offener Ring statt Punkt, kleiner und gedämpft */
.karte li ul { margin: 5px 0 2px; }
.karte li ul li { padding-left: 18px; margin: 2px 0; font-size: .96em; }
.karte li ul li::before {
  content: "\25E6"; color: var(--c-text-blass); font-size: 1em;
  left: 3px; top: 0;
}

.karte ol { counter-reset: schritt; }
.karte ol li { counter-increment: schritt; padding-left: 28px; }
.karte ol li::before {
  content: counter(schritt) "."; color: var(--c-primaer); font-weight: 700;
  position: absolute; left: 0;
}
.karte li strong { color: var(--c-text-stark); }

/* Zwischenüberschriften innerhalb von Karten — größer, Serife, fett, dünne
   Trennlinie darunter. Bis 2026-09-07 normale Stärke statt fett (Wikipedia-
   Vorbild); auf fett geändert, weil sich die Überschriften mit den vielen
   neuen h3-Abschnitten (02.1–02.3) zu wenig vom Fließtext abhoben. Bewusst
   nur für Karteninhalte, NICHT die allgemeine h3-Regel oben: Die
   Sidebar-Überschriften (Module, Werkzeuge, Auf dieser Seite …) behalten
   ihre bisherige kompakte Form. Reiner Systemschrift-Stapel, keine externen
   Schriftdateien (Regel 4: muss offline laufen). */
.karte h3 {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 1.35em;
  font-weight: 700;
  margin: 24px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--c-linie);
}
/* Zusätzlicher Abstand für dicht aufeinanderfolgende Rechenschritte (03.3
   "Schritt für Schritt rechnen", subnetzberechnung.html) — nur dort, nicht
   an der allgemeinen h3-Regel, damit andere Abschnitte (CPU/RAM/Mainboard
   in 02.1 etc.) ihren normalen Abstand behalten. */
.karte h3.schritt-h3 { margin-top: 44px; }
/* h3 mit einem Querverweis-Link in derselben Zeile (z. B. 03.3 "Beispiele"
   -> eigene Seite). Übernimmt Rand/Linie von h3, die h3 selbst wird dafür
   randlos. */
.h3-zeile {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin: 24px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--c-linie);
}
.h3-zeile h3 { margin: 0; padding: 0; border: none; }
.h3-zeile a { font-size: .68rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }

/* Kapitel-Überschriften (die h2 im Karten-Kopf, z. B. "01.1 · Zahlensysteme")
   ebenfalls in Serife, etwas größer als der bisherige Wert (1.08em). Die
   Modul-Überschrift (h1) bleibt bewusst unverändert. */
.karte h2 {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 2em;
  font-weight: 400;
}

/* Diagramme (Inline-SVG, damit offline nichts nachgeladen werden muss).
   Die Farben kommen über CSS-Klassen, nicht über SVG-Attribute — nur so
   greifen die Variablen aus theme.css. */
.diagramm { margin: 14px 0; }
.diagramm svg { width: 100%; max-width: 430px; height: auto; display: block; }
.diagramm figcaption { font-size: .8em; color: var(--c-text-blass); margin-top: 6px; }
.dg-achse { stroke: var(--c-text-stark); stroke-width: 1.2; fill: none; }
.dg-hilf  { stroke: var(--c-text-blass); stroke-width: .8; stroke-dasharray: 3 3; fill: none; }
.dg-a     { stroke: var(--c-primaer); stroke-width: 2; fill: none; }
.dg-n     { stroke: var(--c-warn); stroke-width: 2; fill: none; }
.dg-n2    { stroke: var(--c-warn); stroke-width: 2; stroke-dasharray: 5 4; fill: none; }
.dg-pfeil { fill: var(--c-text-stark); }
.dg-pkt   { fill: var(--c-text-stark); }
.dg-txt   { fill: var(--c-text-stark); font-family: var(--schrift); font-size: 11px; }
.dg-txt.blass { fill: var(--c-text-blass); font-size: 10px; }

/* Anhang: externe Bildvorschau (Peters Grafiken). Klick öffnet die
   Originaldatei in einem neuen Tab — bewusst ohne Lightbox-JS, passt zum
   "kein Build-Schritt"-Ansatz des Projekts. */
.anhang-bild { margin: 14px 0; }
.anhang-bild img {
  display: block; width: 220px; max-width: 100%; height: auto;
  border: var(--rahmen-staerke) solid var(--c-linie); border-radius: var(--radius);
}
.anhang-bild-link:hover img { border-color: var(--c-primaer); }
.anhang-bild-oeffnen {
  display: inline-block; margin-top: 6px; font-size: .8em; color: var(--c-primaer);
}
.anhang-bild-oeffnen:hover { text-decoration: underline; }
.dg-txt.a { fill: var(--c-primaer); font-weight: 700; }
.dg-txt.n { fill: var(--c-warn); font-weight: 700; }

/* Belegzeichen */
.badge {
  font-size: .68rem; padding: 2px 7px; border-radius: 4px; white-space: nowrap;
  cursor: help; line-height: 1.6;
}
.b-ap        { background: var(--c-b-ap-flaeche);        color: var(--c-b-ap-text); }
.b-katalog   { background: var(--c-b-katalog-flaeche);   color: var(--c-b-katalog-text); }
.b-bw        { background: var(--c-b-bw-flaeche);        color: var(--c-b-bw-text); }
.b-rp        { background: var(--c-b-rp-flaeche);        color: var(--c-b-rp-text); }
.b-sek       { background: var(--c-b-sek-flaeche);       color: var(--c-b-sek-text); }
.b-ungeprueft{ background: var(--c-b-ungeprueft-flaeche); color: var(--c-b-ungeprueft-text);
               border: 1px dashed var(--c-linie); }
.b-dauer     { background: var(--c-b-dauer-flaeche);     color: var(--c-b-dauer-text); }
.b-regel     { background: var(--c-b-regel-flaeche);     color: var(--c-b-regel-text); }
.b-gel       { background: var(--c-b-gel-flaeche);       color: var(--c-b-gel-text); }

/* Termine-Tabelle (Startseite): chronologisch, mit optischer Trennung
   zwischen den Phasen (Betriebspraktikum / P1 / AP2) über einen kräftigeren
   oberen Rand auf der ersten Zeile jeder neuen Phase. */
.termine tr.phase-start td { border-top: 2px solid var(--c-primaer); }

/* Relevanzfilter */
.relevanz-leiste {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--c-karte); border: var(--rahmen-staerke) solid var(--c-linie); border-radius: var(--radius);
  padding: 8px 14px; margin: 6px 0 18px; font-size: .85em;
}
.relevanz-titel { color: var(--c-text-blass); font-weight: 600; }
.relevanz-option { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; padding: 2px 8px; border-radius: 4px; }
.relevanz-option input { cursor: pointer; }
.relevanz-b-dauer { background: var(--c-b-dauer-flaeche); color: var(--c-b-dauer-text); }
.relevanz-b-regel { background: var(--c-b-regel-flaeche); color: var(--c-b-regel-text); }
.relevanz-b-gel   { background: var(--c-b-gel-flaeche); color: var(--c-b-gel-text); }
.relevanz-ohne    { background: var(--c-b-ungeprueft-flaeche); color: var(--c-b-ungeprueft-text); border: 1px dashed var(--c-linie); }
.relevanz-zaehler { margin-left: auto; color: var(--c-text-hauch); font-size: .85em; }

/* Tabellen */
.tabellenrahmen { overflow-x: auto; margin: 10px 0; }
table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: .92em; }
.tabellenrahmen table { margin: 0; }

/* Scroll-Hinweis: Farbverlauf am Rand von Tabellen- und Rechenkästen, die
   breiter sind als sichtbar. Blendet sich per JS (layout.js, Klassen
   kann-rechts/kann-links) je nach Scroll-Position ein und aus. Bewusst
   über JS statt background-attachment:local — das hat auf iOS Safari eine
   unzuverlässige Geschichte, und das lässt sich von hier aus nicht
   gegenprüfen. */
.tabellenrahmen, .rechnung { position: relative; }
.tabellenrahmen::before, .tabellenrahmen::after,
.rechnung::before, .rechnung::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 28px;
  pointer-events: none; opacity: 0; transition: opacity .15s ease; z-index: 1;
}
.tabellenrahmen::after  { right: 0; background: linear-gradient(to right, transparent, var(--c-karte)); }
.tabellenrahmen::before { left: 0;  background: linear-gradient(to left,  transparent, var(--c-karte)); }
.rechnung::after  { right: 0; background: linear-gradient(to right, transparent, var(--c-rechnung-flaeche)); }
.rechnung::before { left: 0;  background: linear-gradient(to left,  transparent, var(--c-rechnung-flaeche)); }
.kann-rechts::after { opacity: 1; }
.kann-links::before { opacity: 1; }
/* Untergrenze 1px: bei border-collapse rundet Safari auf dem iPhone
   Rahmen unter 1px auf null ab — die Linien verschwinden dann ganz.
   Außerhalb von Tabellen bleibt --rahmen-staerke unangetastet. */
th, td {
  border: max(1px, var(--rahmen-staerke)) solid var(--c-linie);
  padding: 6px 9px; text-align: left; vertical-align: top;
}
th { background: var(--c-th-flaeche); color: var(--c-text-stark); font-weight: 600; }
td { background: var(--c-zebra); }

/* Rechenkästen und Merksätze */
.rechnung {
  font-family: var(--schrift-mono); font-size: .86em; background: var(--c-rechnung-flaeche);
  border: var(--rahmen-staerke) solid var(--c-linie); border-radius: 6px; padding: 10px 14px;
  overflow-x: auto; white-space: pre; line-height: 1.7; margin: 10px 0;
}
/* Boxlose Rechenschemata, eingerückt statt im Kasten — wie bei Wikipedia.
   Für Kalkulationsschemata ohne Spaltenausrichtungsbedarf. Echter Code und
   spaltenkritische Inhalte (Subnetting, Divisionsverfahren, ASCII-Diagramme)
   bleiben bei .rechnung. */
.einzug {
  margin: 12px 0; padding: 0 0 0 1.4em;
  font-family: var(--schrift); font-size: 1em; line-height: 1.7;
  white-space: pre-wrap; color: var(--c-text-stark);
}
/* Kalkulationsschema mit wandernder %-Basis: pro Rechenschritt ein Block aus
   Ausgangswert → angewendeter Prozentsatz (rot, .rvorgang) → Ergebnis. Zeigt
   „vom/im/auf Hundert" optisch, statt es nur im Fließtext zu erklären — steht
   die 100 %-Zeile unten statt oben, ist der bekannte Wert nicht die Basis
   (Hundert-Falle). Vorbild: Peters eigene Kalkulations-Grafik (10.2). */
.rechenschema { border: var(--rahmen-staerke) solid var(--c-linie); border-radius: var(--radius); margin: 14px 0; overflow: hidden; }
.rblock { padding: 7px 14px; }
.rblock + .rblock { border-top: var(--rahmen-staerke) solid var(--c-linie); }
.rzeile { display: grid; grid-template-columns: 3.4em 1.3em 1fr auto; column-gap: 6px; padding: 1px 0; }
.rproz { text-align: right; font-variant-numeric: tabular-nums; }
.rpfeil { text-align: center; color: var(--c-text-blass); }
.rbetrag { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.rvorgang { color: var(--c-akzent); }
.rvorgang .rproz, .rvorgang .rlabel { font-weight: 600; }
@media (max-width: 480px) {
  .rzeile { grid-template-columns: 3em 1.1em 1fr auto; font-size: .94em; }
}

.merke {
  border-left: 3px solid var(--c-merke); background: var(--c-merke-flaeche);
  padding: 8px 12px; border-radius: 0; margin: 10px 0; font-size: .95em;
}
.warn {
  border-left: 3px solid var(--c-warn); background: var(--c-warn-flaeche);
  padding: 8px 12px; border-radius: 0; margin: 10px 0; font-size: .95em;
}

/* 03.3 Subnetting: Adress-Zerlegung, Subnetztabelle und die binären
   Rechenwege in .rechnung. Der jeweils gemeinte/sich ändernde Teil einer
   Adresse ist hervorgehoben statt nur farbig, siehe .zerlegung em/.rechnung
   em — Farbe allein wäre für jemanden mit Rotschwäche keine Information. */
.zerlegung em, .rechnung em {
  font-style: normal; font-weight: 700; color: #b3122c;
  background: #fdeef1; padding: 1px 3px; border-radius: 3px;
}
/* Durchgestrichene, nicht gebrauchte Kandidaten in einer .rechnung-Aufzählung
   (z. B. ungenutzte Subnetze) — abgeblendet statt entfernt, damit sichtbar
   bleibt, dass sie durchgerechnet und bewusst verworfen wurden. */
.rechnung .weg { text-decoration: line-through; opacity: .45; }
.suffix, .maske, .hosts, .bin { font-family: var(--schrift-mono); font-variant-numeric: tabular-nums; }
.hosts { text-align: right; }
.bin { font-size: .92em; letter-spacing: -.02em; color: var(--c-text-blass); white-space: nowrap; }
/* Zeilen, die in Prüfungsaufgaben tatsächlich vorkommen (ab /24) */
tr.oft td { background: var(--c-b-regel-flaeche); }
tr.oft .suffix { color: var(--c-b-regel-text); }

/* Formeln als echter Bruch statt ÷-Zeichen im Fließtext, eingerückt statt im
   Kasten — wie bei Wikipedia. Reines CSS, keine neue Schriftart, keine
   externen Schriftdateien (Regel 4: muss offline laufen). Zähler bekommt den
   Strich über den Nenner per border-bottom. */
.formel {
  display: flex; align-items: center; gap: .5em; flex-wrap: wrap;
  font-weight: 400; font-size: 1em; color: var(--c-text-stark);
  margin: 12px 0; padding: 0 0 0 1.4em;
}
.bruch { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.35; }
.bruch .zaehler { border-bottom: 2px solid currentColor; padding: 0 .3em .12em; }
.bruch .nenner  { padding: .12em .3em 0; }
code { font-family: var(--schrift-mono); font-size: .9em; background: var(--c-seite); padding: 1px 5px; border-radius: 4px; }
.rechnung code { background: none; padding: 0; }

/* Startseite */
.hero {
  background-color: var(--c-karte);
  background-image: var(--hero-bild), radial-gradient(var(--c-muster) 1px, transparent 1px);
  background-size: cover, 22px 22px;
  border: 1px solid var(--c-linie); border-radius: var(--radius);
  padding: 30px 26px; margin-bottom: 18px;
}
/* Logo im Hero: floated, der Intro-Text fließt daneben und wickelt nach der
   Bildhöhe auf volle Breite. ::after räumt den Float, damit „Die elf
   Kernthemen" darunter nicht neben einem zu kurzen Absatz hängen bleibt. */
.hero::after { content: ""; display: block; clear: both; }
.hero-logo { float: left; width: 110px; height: auto; margin: 0 18px 12px 0; }
@media (max-width: 480px) {
  .hero-logo { width: 78px; margin: 0 12px 8px 0; }
}
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 14px 0; }
.kachel {
  display: block; background: var(--c-karte); border: 1px solid var(--c-linie);
  border-radius: var(--radius); padding: 12px 14px; color: var(--c-text);
}
.kachel:hover { border-color: var(--c-primaer); text-decoration: none; }
.kachel .nr { color: var(--c-text-hauch); font-size: .75em; }
.kachel .name { display: block; color: var(--c-text-stark); font-weight: 600; margin: 1px 0 5px; }
.kachel p { font-size: .82em; color: var(--c-text-blass); margin: 0 0 7px; }
.balkenreihe { display: flex; align-items: center; gap: 8px; margin: 5px 0; font-size: .85em; }
.balkenreihe .label { width: 250px; flex-shrink: 0; }
.balken { flex: 1; height: 10px; background: var(--c-aktiv-flaeche); border-radius: 5px; overflow: hidden; }
.balken span { display: block; height: 100%; background: var(--c-primaer); }
.balkenreihe .wert { width: 42px; text-align: right; color: var(--c-text-blass); }

/* Fuß */
.fuss { border-top: 1px solid var(--c-linie); background: var(--c-karte); margin-top: 0; }
.fuss-innen {
  max-width: var(--inhalt-breite); margin: 0 auto; padding: 14px 18px;
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  font-size: .78em; color: var(--c-text-hauch);
}

/* ---------- Mobil: Sidebar wird zum Drawer ---------- */
@media (max-width: 880px) {
  .hamburger { display: flex; }
  .marke-sub { display: none; }
  .suche { max-width: 190px; }

  /* Mit dem Anmeldeknopf im Kopf wird es auf 390 px eng. Die Klassen
     setzt konto.js — kein :has(), das kennt Safari erst ab 15.4. */
  .kopf-innen.hat-konto .suche { max-width: 150px; }
  .konto-knopf { padding: 6px 9px; font-size: .75em; }

  /* Angemeldet kommt der Name dazu: dann weicht das „-Wiki" der Marke
     und die Suche schrumpft weiter. Lieber ein kürzeres Suchfeld als
     ein abgeschnittener Spielername. */
  .kopf-innen.angemeldet .marke span { display: none; }
  .kopf-innen.angemeldet .suche { max-width: 96px; }
  .konto-name { max-width: 8ch; }

  .layout { grid-template-columns: 1fr; }

  /* Höhe bewusst explizit, NICHT über bottom:0. Auf iOS zählt bottom zum
     Layout-Viewport — der Kasten reicht dann unter Safaris Leiste, der
     Inhalt passt rechnerisch hinein, es entsteht kein Überlauf, und die
     Wischgeste landet auf der Seite dahinter statt im Menü.
     dvh rechnet die Leisten mit; die vh-Zeile davor ist der Rückfall
     für iOS vor 15.4. */
  .sidebar {
    position: fixed; top: var(--header-hoehe); left: 0;
    width: 84%; max-width: 320px; max-height: none;
    height: calc(100vh - var(--header-hoehe));
    height: calc(100dvh - var(--header-hoehe));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 40; border-right: 1px solid var(--c-linie);
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 2px 0 18px rgba(0, 0, 0, .12);
  }
  .sidebar.offen { transform: translateX(0); }

  .overlay {
    display: block; position: fixed; inset: var(--header-hoehe) 0 0 0;
    background: rgba(20, 30, 50, .35); z-index: 35;
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
    /* Wischen auf der Abdunklung soll die Seite dahinter nicht bewegen. */
    touch-action: none; overscroll-behavior: contain;
  }
  .overlay.sichtbar { opacity: 1; pointer-events: auto; }

  .inhalt, .inhalt.breit { padding: 18px 16px 44px; }
  h1 { font-size: 1.35em; }
  .balkenreihe .label { width: 150px; }
  .relevanz-zaehler { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sidebar, .overlay { transition: none; }
  .tabellenrahmen::before, .tabellenrahmen::after,
  .rechnung::before, .rechnung::after { transition: none; }
}

/* ---------- Druck ---------- */
@media print {
  .kopf, .sidebar, .overlay, .fuss, .suche, .skiplink, .hamburger,
  .relevanz-leiste { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .layout { display: block; }
  .inhalt, .inhalt.breit { padding: 0; background: #fff; }
  .karte { border: 1px solid #bbb; break-inside: avoid; }
  .tabellenrahmen { overflow: visible; }
  .badge { border: 1px solid #999; background: #fff !important; color: #000 !important; }
  a { color: #000; text-decoration: none; }
  .rechnung { background: #fff; border: 1px solid #bbb; }
}