/* ═══════════════════════════════════════════════════════════════════
   martinberner.at — der Unterschied zum Portal-Stylesheet
   ═══════════════════════════════════════════════════════════════════
   portal-public.css ist eine unveraenderte Kopie aus dem LOG|CONS-Repo.
   Sie bleibt unveraendert, damit ein Abgleich spaeter ein reines
   Kopieren ist und kein Zusammenfuehren. Alles, was hier anders sein
   muss, steht in dieser Datei — und nur hier.

   VERWORFEN: die Kopie direkt anpassen. Beim naechsten Abgleich waere
   jede Aenderung von Hand wiederzufinden; nach dem zweiten Mal weiss
   niemand mehr, was Absicht war und was Rest.
   ═══════════════════════════════════════════════════════════════════ */

/* Das Portal-Stylesheet setzt auf jeder Seite ein festes Wasserzeichen
   „powered by Logcons · www.logcons.at" unten in die Mitte. Auf dem
   Portal ist das richtig — hier waere es falsch: Diese Seite gehoert
   einer Person, nicht der Spedition, und genau diese Verwechslung ist
   das, was hier nicht passieren soll. */
body::after { content: none; }

/* Die Marke ist ein Name, kein Wortbild. Das Portal setzt „LOG|CONS"
   aus zwei Haelften mit Trennstrich zusammen (.brand-log/.brand-cons);
   ein Personenname hat diese Fuge nicht. */
.mb-marke {
  display: inline-flex; align-items: baseline; gap: 10px;
  font: 800 1.15rem/1 Inter, system-ui, sans-serif;
  letter-spacing: -.02em; color: var(--INK); text-decoration: none;
}
.mb-marke span {
  font: 600 .74rem/1 Inter, system-ui, sans-serif;
  letter-spacing: .13em; text-transform: uppercase; color: var(--MUTED);
}

/* Kopfzeile. Die Navigation des Portals (.nav mit Aufklappmenues) traegt
   Mechanik fuer Dutzende Seiten; hier gibt es eine. */
.mb-kopf {
  border-bottom: 1px solid var(--LINE);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 50;
}
.mb-kopf .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 14px; padding-bottom: 14px;
}

/* Die Schlusszeile unter dem Spaltenraster des Fusses.
   .footer-grid des Portals bringt einen border-bottom mit — dort steht
   darunter nichts, und der Strich haengt in der Luft. Hier traegt er die
   Zeile mit Jahr und Rechtsseiten, wofuer diese Regeln schon da waren:
   Sie beschrieben bis zum 05.09.2026 den ganzen Fuss, als er noch aus
   zwei Angaben bestand. Wiederverwendet statt geloescht und neu erfunden —
   Hausregel: vorhandene Klassen vor neuen.
   Der eigene border-top faellt weg; den Strich zieht jetzt das Raster. */
.mb-fuss {
  padding: 2px 0 0; color: var(--MUTED); font-size: .86rem;
}
.mb-fuss .container {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 8px 24px; padding-left: 0; padding-right: 0;
}
.mb-fuss a { color: var(--MUTED); text-decoration: none; }
.mb-fuss a:hover { color: var(--BLUE); text-decoration: underline; }

/* Die Karten der Themenliste sind Verweise. .public-card bringt Rahmen,
   Radius und Schatten mit; was fehlt, ist das Verhalten eines Links. */
a.public-card { display: block; text-decoration: none; color: inherit; }
a.public-card:hover { transform: translateY(-2px); box-shadow: var(--SHADOW-H); }
.public-card :is(h3, h4) { font-size: 1.05rem; letter-spacing: -.02em; margin: 0 0 8px; }
.public-card p  { color: var(--MUTED); font-size: .95rem; line-height: 1.6; margin: 0; }

@media (max-width: 860px) {
  .public-grid--3, .public-grid--2 { grid-template-columns: 1fr; }
}

/* Im Portal steht unter einem Abschnittskopf immer genau ein Absatz —
   .public-section__head p hat deshalb keinen unteren Abstand. Hier stehen
   an zwei Stellen zwei, und die klebten aneinander: Der zweite las sich
   wie die Fortsetzung des ersten Satzes.
   Nur der Zwischenraum, nicht der Abstand nach unten: Ein margin-bottom
   auf jedem p verschoebe auch den Abstand zum Raster darunter, den der
   Kopf selbst schon setzt. */
.public-section__head p + p { margin-top: .9em; }
.public-hero__content .public-lead + .public-lead { margin-top: -14px; }

/* Auf schmalen Geraeten brach der Zusatz neben dem Namen mitten in der
   Aufzaehlung um („AI · BI ·" / „LOGISTIK"). Ein umgebrochener Zusatz
   sieht aus wie ein Fehler, nicht wie eine Zeile — und die Marke ist der
   Name, nicht die Aufzaehlung. Also faellt der Zusatz weg, statt ihn zu
   quetschen. */
.mb-marke span { white-space: nowrap; }
@media (max-width: 460px) { .mb-marke span { display: none; } }

/* Fliesstext der Rechtsseiten. Das Portal hat dafuer keine Klasse — es
   setzt seine Prosa in Karten und Abschnittskoepfe, und beide bringen
   eine Breitenbegrenzung mit. Ein Impressum ist beides nicht: eine
   Ueberschrift, ein Absatz, kein Rahmen.
   66ch ist dieselbe Zeilenlaenge, die .public-section__head p verwendet —
   damit die Rechtsseiten sich lesen wie der Rest und nicht wie ein
   Fremdkoerper. */
.mb-text { max-width: 66ch; }
.mb-text h2 {
  /* 1,15rem war zu leicht: neben einem .public-section__head h2 (bis 2,4rem)
     las sich die Zwischenueberschrift wie ein fetter Satz statt wie eine
     Gliederungsebene. Die Ordnung ist jetzt eindeutig — Held, Abschnittskopf,
     Zwischenueberschrift, Text. */
  font-size: 1.42rem; letter-spacing: -.025em; line-height: 1.2;
  margin: 38px 0 10px; color: var(--INK);
}
.mb-text h2:first-child { margin-top: 0; }
.mb-text p { color: var(--MUTED); line-height: 1.72; margin: 0 0 12px; }
.mb-text a { color: var(--BLUE); }
.mb-text strong { color: var(--INK); }

/* Zwei Kontaktwege nebeneinander, wie die Knoepfe im Helden. */
.mb-wege { display: flex; flex-wrap: wrap; gap: 12px; }

/* Navigation. Das Portal bringt .nav mit Aufklappmenüs und Mega-Menü mit —
   Mechanik für Dutzende Seiten. Hier sind es fünf, die nebeneinander
   passen; unter 760px rutschen sie in eine zweite Zeile, statt sich zu
   quetschen oder hinter einem Menüknopf zu verschwinden.
   VERWORFEN: ein Burger-Menü. Bei fünf Zielen versteckt es den Inhalt
   hinter einem zusätzlichen Griff, ohne Platz zu sparen. */
.mb-nav { display: flex; flex-wrap: wrap; gap: 4px 15px; align-items: center; }
.mb-nav a {
  /* .88rem/18px Abstand liess die Leiste bei 1440px auf zwei Zeilen brechen,
     seit der Sprachknopf dazugekommen ist. Eine umgebrochene Navigation
     sieht aus wie ein Fehler; enger gesetzt passt sie in eine Zeile. */
  font: 700 .82rem/1 Inter, system-ui, sans-serif;
  color: var(--MUTED); text-decoration: none; padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.mb-nav a:hover { color: var(--INK); }
.mb-nav a[aria-current="page"] { color: var(--INK); border-bottom-color: var(--BLUE); }

/* Unter 1180px bekommt die Navigation eine eigene Zeile — das ist ehrlicher
   als sie zu quetschen, bis die Namen unleserlich werden. */
@media (max-width: 1180px) {
  .mb-kopf .container { flex-wrap: wrap; row-gap: 10px; }
  .mb-nav { order: 3; width: 100%; }
}

/* Aufzählungen im Fließtext der Themenseiten. Das Portal setzt seine
   Listen in Karten; hier stehen sie im Text und brauchen die Punkte. */
.mb-text ul { margin: 0 0 14px; padding-left: 20px; color: var(--MUTED); line-height: 1.72; }
.mb-text li { margin-bottom: 6px; }
.mb-text li strong { color: var(--INK); }

/* Der abgesetzte Kasten für den einen Satz, auf den es ankommt. Bewusst
   kein .public-card: eine Karte ist ein Behälter für ein Thema, dieser
   Kasten ist eine Betonung im laufenden Text. */
.mb-merksatz {
  margin: 18px 0; padding: 16px 20px;
  border-left: 3px solid var(--BLUE);
  background: color-mix(in srgb, var(--BLUE) 5%, transparent);
  border-radius: 0 var(--R-SM) var(--R-SM) 0;
  color: var(--INK); font-size: 1.02rem; line-height: 1.6; font-weight: 600;
}

/* Die Schritt-Liste der Best-Practice-Seite. Nummern gehören hierher,
   weil es wirklich eine Reihenfolge ist — anders als bei einer Auswahl. */
.mb-schritte { counter-reset: schritt; list-style: none; padding: 0; margin: 0; }
.mb-schritte li {
  counter-increment: schritt; position: relative;
  padding: 0 0 20px 46px; margin: 0;
}
.mb-schritte li::before {
  content: counter(schritt); position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--BLUE); color: #fff;
  font: 800 .88rem/30px Inter, system-ui, sans-serif; text-align: center;
}
.mb-schritte h3 { font-size: 1.02rem; margin: 4px 0 6px; letter-spacing: -.02em; }
.mb-schritte p { margin: 0 0 8px; }

/* Sprachumschalter und Kontaktknopf sitzen zusammen rechts. Zwei Sprachen
   brauchen keine Auswahlliste — ein Verweis auf die jeweils andere reicht
   und ist einen Griff kürzer als jedes Menü. */
.mb-kopf-rechts { display: flex; align-items: center; gap: 14px; }
.mb-sprache {
  font: 700 .82rem/1 Inter, system-ui, sans-serif;
  letter-spacing: .04em; color: var(--MUTED); text-decoration: none;
  padding: 6px 10px; border: 1px solid var(--LINE); border-radius: var(--R-SM);
  white-space: nowrap;
}
.mb-sprache:hover { color: var(--BLUE); border-color: rgba(37,99,235,.25); }

@media (max-width: 860px) {
  .mb-kopf-rechts { gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Welt-Netz — aus der Startseite des LOG|CONS-Portals, hier kräftiger
   ═══════════════════════════════════════════════════════════════════════
   Im Portal steht sie inline im <style> von index.html. Die Geometrie ist
   dieselbe geblieben — dieselben zwanzig Hauptstädte, dieselben Kanten —,
   Farbe und Tempo sind es nicht mehr.

   ANWENDERWUNSCH 05.09.2026, mit Bildschirmabzug: „mehr nach logcons style
   mehr blau und dynamischer". Auf dem Abzug war die Szene kaum zu erkennen:
   Linien bei 22 % Deckung, Namen bei 36 %, ein Puls über sechs Sekunden. Das
   war weniger als im Portal, nicht mehr — die Namen waren hier eigens
   zurückgenommen worden, damit „London" nicht in der Einleitungszeile
   mitgelesen wird.

   Diese Abwägung bleibt bestehen und wird nur anders entschieden: Die Namen
   dürfen wieder gesehen werden, sie sollen weiterhin nicht mitgelesen
   werden. 46 % statt 36 % ist der Kompromiss — sichtbar als Ortsmarke,
   schwach genug, dass das Auge am Fließtext hängen bleibt. Wird das doch
   als störend empfunden, ist es genau diese eine Zahl.

   VERWORFEN: die Deckkraft der ganzen Ebene hochzuziehen. Dann wären auch
   die Linien hinter den weißen Karten durchgeschlagen und der Text hätte
   an Ruhe verloren. Kräftiger wird gezielt, nicht pauschal.
   ═══════════════════════════════════════════════════════════════════════ */
@keyframes welt-fluss { to { stroke-dashoffset: -14; } }
/* Der Knoten atmet UND pulst. Skaliert wird über transform mit
   transform-box:fill-box — nicht über das SVG-Attribut r: r als
   CSS-Eigenschaft kennen nicht alle Browser, ein Kreis bliebe dort einfach
   stehen. Ein Effekt, der auf einem Drittel der Geräte fehlt, ist keiner. */
@keyframes welt-atmen {
  0%, 100% { opacity: .2;  transform: scale(.88); }
  50%      { opacity: .58; transform: scale(1.16); }
}
/* Die Sendungen auf den Kanten. Sie tauchen auf, laufen durch und
   verschwinden — ein Punkt, der am Ziel einfach erlischt, wirkt wie ein
   Fehler; einer, der ausblendet, wie eine Ankunft. */
@keyframes welt-sendung { 0%, 100% { opacity: 0; } 12%, 82% { opacity: .62; } }

.welt-netz {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: radial-gradient(140% 128% at 50% 40%, #000 58%, transparent);
  mask-image: radial-gradient(140% 128% at 50% 40%, #000 58%, transparent);
}
.welt-netz svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.welt-netz .wk {
  fill: none; stroke: color-mix(in srgb, var(--BLUE) 34%, transparent);
  stroke-width: 1.4; stroke-dasharray: 6 8;
  /* 3,6 s auf 2,1 s: Der Strich lief so langsam, dass die Kante bei
     flüchtigem Blick still stand. Der Versatz bleibt bei -14 — das ist die
     Summe aus Strich und Lücke, alles andere ruckelt beim Sprung. */
  animation: welt-fluss 2.1s linear infinite;
}
.welt-netz .wn  {
  fill: var(--BLUE); opacity: .42;
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: welt-atmen 4.4s ease-in-out infinite;
}
.welt-netz .wl  { fill: color-mix(in srgb, var(--BLUE) 52%, transparent);
                  font: 700 13px Inter, system-ui, sans-serif; opacity: .55; }
.welt-netz .wlkw{ fill: var(--BLUE); opacity: .7; }
.welt-netz .wp  { fill: var(--BLUE); animation: welt-sendung 6s linear infinite; }

/* ── DER AKZENT IST BLAU, NICHT MEHR GRÜN ─────────────────────────────────
   Im Portal tragen die grünen Orte und Lkw eine Aussage: Blau ist der Preis,
   Grün der Ausstoß, und die grünen Fahrten sind genau die, die die grünen
   Orte anfahren. Diese Seite verspricht das nicht — hier war Grün nur
   übernommen, also Schmuck ohne Bedeutung. Zwei Farben ohne Aussage sind
   schlechter als eine.

   Der Akzent bleibt trotzdem: einige Orte dunkler, damit die Karte eine
   Tiefe hat und nicht flächig wirkt. Deshalb ein abgedunkeltes Blau statt
   einer zweiten Farbe. Die Klasse heißt entsprechend akz und nicht mehr gr
   — ein Klassenname, der eine Farbe verspricht, die er nicht mehr hat,
   führt beim nächsten Mal jemanden in die Irre. */
.welt-netz .wn.akz  { fill: color-mix(in srgb, var(--BLUE) 74%, var(--INK)); opacity: .58; }
.welt-netz .wl.akz  { fill: color-mix(in srgb, var(--BLUE) 66%, var(--INK)); }
.welt-netz .wlkw.akz{ fill: color-mix(in srgb, var(--BLUE) 74%, var(--INK)); opacity: .78; }

/* Unter 920px verschwinden die Städtenamen: Bei dieser Breite überlagern
   sie einander und den Text. Die Karte bleibt, die Beschriftung geht. */
@media (max-width: 920px) {
  .welt-netz { opacity: .66; }
  .welt-netz .wl { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .welt-netz .wk, .welt-netz .wn, .welt-netz .wp { animation: none; }
  /* Die Sendungspunkte laufen per animateMotion und liessen sich von CSS
     nicht anhalten — sie stuenden sonst als Punkthaufen am Startpunkt.
     Das JS pausiert sie zusaetzlich; hier werden sie unsichtbar, damit auch
     ohne JS nichts Sinnloses stehen bleibt. */
  .welt-netz .wp { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Kompakte Bausteine — Boxen statt Fließtext
   ═══════════════════════════════════════════════════════════════════════
   Anwenderbefund: „viel zu viel Text … das liest sich niemand durch."
   Der Inhalt bleibt, die Form ändert sich: kurze Kästen mit einer Aussage
   statt Absätzen, die man am Stück lesen muss.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── DIE RADAR-LISTE ──────────────────────────────────────────────────────
   Achtundfünfzig Punkte in sieben Gruppen. Als Karten im Raster wäre jeder
   Punkt gleich laut wie die vier ausführlichen Entwicklungen darüber — die
   Liste ist aber das Register, nicht der Text. Deshalb Zeilen statt Karten:
   schmal, ruhig, überfliegbar.

   VERWORFEN: eine schlichte Aufzählung mit Punkten davor. Bei achtundfünfzig
   Zeilen verschwimmt sie zu einer Wand; der eigene Kasten je Punkt gibt dem
   Auge die Kante, an der es abspringen kann. */
/* Die Gruppe traegt NICHT .mb-text: Dessen Lesebreite von 66ch ist fuer
   Fliesstext richtig und fuer eine Abbildung falsch — die Kette der
   Stationen wird dann schmaler als noetig und die Beschriftung klein.
   Hier also getrennt: Das Bild nutzt die Spalte, die Zeilen bleiben in
   Lesebreite. */
.radar-gruppe > h3 { font-size: 1.15rem; margin: 0 0 10px; }
/* ── DAS RASTER, 06.09.2026 ────────────────────────────────────────────
   Anwender: „wie eine Portfolio-Seite — immer zwei Boxen nebeneinander,
   oben eine Animation und dann darunter die nächsten zwei Boxen." Aus den
   zwei sind am 07.09. drei geworden; das Muster ist dasselbe geblieben.

   ZEILENWEISE gelesen: 1 | 2 | 3, darunter 4 | 5 | 6. Deshalb
   `grid` und nicht `columns` — `columns` füllt erst die linke Spalte von
   oben nach unten und dann die rechte, und der zweite Punkt stünde unter
   dem ersten statt daneben. Das ist auf dieser Seite schon einmal die
   richtige Wahl gewesen (die sieben Schritte, wo die Reihenfolge zählt);
   hier ist es die falsche.

   `align-items: start` STAND HIER als Pflicht und ist es nicht mehr:
   Solange ein tiefer Eintrag 600 px hoch war, hätte das Raster den
   Dreizeiler daneben mitgezogen. Seit der Kern sichtbar ist und der Rest
   aufklappt, sind die Kästen ohnehin ähnlich hoch — und `stretch` (die
   Vorgabe) ist dann das Bessere: Der Rest an Höhe liegt INNERHALB der
   Karte statt als Loch zwischen zweien.

   Die Lesebreite von 74ch fällt weg — sie galt für EINE Spalte.

   DREI SPALTEN UND NICHT ZWEI, seit dem 07.09.2026. Der Anwender hat die
   Fristenreihe im Abzug angestrichen: „Genau diese Kacheln für jeden
   Punkt … auf der ganzen Seite." Zwei Raster nebeneinander auf derselben
   Seite sind dasselbe Problem wie zwei Kartenstile, nur eine Ebene höher.

   DER PREIS IST GEMESSEN UND NICHT GESCHÄTZT, und er ist höher als
   geschätzt: Eine Spalte trägt bei 1280 px 37 Zeichen statt 70. Das ist
   UNTER der Kante, die für Fließtext gilt (45 bis 75) — für den Kern
   eines Punktes trotzdem richtig, denn er ist ein Satz und keine
   Textseite. Wer aufklappt, liest die langen Absätze in derselben Breite;
   das ist der wunde Punkt dieser Entscheidung und gehört benannt, nicht
   weggerechnet.

   Dieselben 37 Zeichen tragen die Fristen darüber, und die hat der
   Anwender angestrichen, weil sie ihm gefallen.

   Raster und Umbrüche stehen deshalb in einer gemeinsamen Klasse, die
   beide benutzen. Zwei Regelsätze mit denselben Zahlen halten, bis jemand
   einen davon anfasst — das ist heute schon zweimal die Lehre gewesen. */
.kachel-raster {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
}
@media (max-width: 1000px) { .kachel-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .kachel-raster { grid-template-columns: 1fr; } }
/* ── EINE BOX IST EINE KARTE ──────────────────────────────────────────────
   Anwender, 06.09.2026, mit Bildschirmabzug: „Bitte klar abgegrenzte Boxen."
   Er hat recht, und es war messbar: Die Einträge trugen eine Haarlinie von
   8 % Deckung auf #fff, und der Seitengrund ist #f2f5fb — zwei Weiß
   nebeneinander mit einem Strich dazwischen. Kein Schatten, 12 px Radius,
   11 px Polster. Das ist ein Streifen, keine Box.

   Jetzt dieselbe Karte, die die Seite überall benutzt — und zwar seit dem
   07.09.2026 auch WIRKLICH: Bis dahin stand hier ein eigener Satz Werte,
   der zufällig dieselben Zahlen trug wie .public-card. Der Kommentar
   behauptete das System, der Code kopierte es. Zwei Regelsätze mit
   demselben Aussehen halten genau so lange, bis jemand einen davon anfasst.

   Der Eintrag trägt jetzt .public-card und daneben nur noch, was ihn vom
   allgemeinen Kasten unterscheidet: die Schriftgröße der einzeiligen Punkte
   und die blaue Kante der eigenen Positionen.

   WAS DABEI AUFFIEL: .public-card p setzt Farbe, Größe und `margin: 0` für
   JEDEN Absatz einer Karte — und ein tiefer Eintrag hat fünf davon, jeder
   mit eigener Rolle. Die Regeln dafür stehen deshalb ab hier mit dem
   Eintrag davor (.radar-punkt .radar-offen statt .radar-offen): Ohne das
   hätte die Systemkarte sie überschrieben und alle fünf Absätze sähen
   gleich aus.

   `align-items: stretch` (die Vorgabe, also keine Zeile dafür) statt
   `start`: Die Boxen einer Zeile sind gleich hoch, das Raster liest sich
   als Raster. Der Rest an Höhe liegt damit INNERHALB der Karte statt als
   Loch zwischen zweien — genau der Unterschied, den der Abzug zeigt. */
.radar-punkt { display: flex; flex-direction: column; }
/* Der Satz bekommt KEINE eigene Größe: .public-card p gilt für die Frist
   wie für den Punkt, und genau das war der Auftrag. Hier steht nur der
   Abstand nach oben, den ein Absatz unter einer Überschrift braucht. */
.radar-punkt .radar-satz { margin: 8px 0 0; }
/* Die eigene Position schreibt dunkler — sie ist der Text, für den die
   Seite existiert, und nicht eine Zusammenfassung fremder Arbeit. */
.radar-punkt--eigen .radar-satz { color: var(--INK); }
/* Die Herkunft steht am Ende der Zeile, nicht davor: Erst die Aussage, dann
   woher sie kommt. Umgekehrt liest man neunundfünfzig Mal „Branchenradar",
   bevor man erfährt, worum es geht. */
/* KEIN `white-space: nowrap` mehr. Es stand hier, damit eine Herkunft nicht
   mitten im Wort umbricht — und hat am 06.09.2026 die ganze Seite auf dem
   Telefon 114 px über das Fenster geschoben: „Branchenradar · Frachtenbörse
   · Kundenmagazin · Marktbericht" sind sechzig Zeichen in einer Zeile, die
   nicht brechen darf. Der Fehler lag schon vorher im Stylesheet; sichtbar
   wurde er erst mit der längsten Angabe.
   Umgebrochen wird jetzt an den Mittelpunkten — also genau dort, wo eine
   Aufzählung ohnehin ihre Fuge hat. */
/* Die eigenen Positionen tragen eine blaue Kante. Kein zweiter Farbton und
   kein Symbol: Die Kante reicht, um sie beim Überfliegen zu finden, und sie
   trägt dieselbe Farbe wie alles andere auf dieser Seite. */
.radar-punkt--eigen { border-left: 3px solid var(--BLUE); background: color-mix(in srgb, var(--BLUE) 3%, var(--CARD)); }

/* Die Einleitung der Gruppe: ein Satz zwischen Überschrift und Abbildung.
   Sie ist kleiner und stiller als die Punkte darunter — sie ordnet ein, sie
   behauptet nichts. */
.radar-einleitung { margin: 0 0 12px; font-size: .86rem; line-height: 1.6; color: var(--MUTED); max-width: 74ch; }

/* ── DIE NEUN EIGENEN THEMEN IN VOLLER TIEFE ──────────────────────────────
   Fünfundfünfzig Punkte tragen einen Satz. Diese neun tragen den offenen
   Punkt, was in der Praxis dazu steht, wo sie in der Abbildung liegen und
   was ein veröffentlichtes Branchenradar dazu sagt.

   WARUM DER UNTERSCHIED SICHTBAR SEIN MUSS: Eine eigene Einschätzung, die
   aussieht wie ein Befund aus einer Studie, ist keine Ungenauigkeit,
   sondern eine falsche Angabe über die Herkunft. Die blaue Kante allein
   trug das, solange alle Punkte gleich lang waren; jetzt tragen es Kante,
   Fläche und die Ziffer, die ins Bild darüber zeigt. */
/* Das Polster stand hier eigens (16/18) und damit anders als bei den
   kurzen Punkten (11/14). Zwei Polster in einem Raster sieht man sofort;
   seit beide dieselbe Karte sind, gilt auch dasselbe Polster — die Zeile
   ist deshalb ersatzlos weg statt auf denselben Wert gesetzt. */
/* Die Ziffer ist die Brücke zwischen Abbildung und Liste. Ohne sie wären es
   zwei Aufzählungen nebeneinander statt eines Bildes mit seiner Legende. */
.radar-znr {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; background: var(--BLUE);
  color: #fff; font-size: .68rem; font-weight: 800; line-height: 1;
}
.radar-punkt .radar-offen, .radar-punkt .radar-praxis, .radar-punkt .radar-ausloeser { margin: 9px 0 0; font-size: .88rem; line-height: 1.65; color: var(--INK); }
.radar-offen > b { color: var(--INK); }
.radar-praxis > b { color: var(--BLUE-D); }
/* Woran ich merke, dass sich ein Thema bewegt. Dieselbe Größe wie die
   beiden Zeilen darüber und keine eigene Auszeichnung: Sie ist Teil des
   Eintrags und nicht sein Höhepunkt — wer sie hervorhebt, bekommt drei
   Absätze, die um Aufmerksamkeit streiten. */
.radar-ausloeser > b { color: var(--BLUE-D); }
/* Die Randzeile: Aufnahmedatum, Feld der Abbildung, Bewegung gegenüber der
   Vorausgabe. Sie macht aus einem Absatz einen Radareintrag — ohne sie
   stünde eine Einschätzung ohne Datum da, und ein Radar ohne Datum ist ein
   Archiv. */
.radar-punkt .radar-meta { margin: 11px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.radar-datum, .radar-feld, .radar-delta {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .7rem; font-weight: 700; letter-spacing: .02em;
}
.radar-datum { background: color-mix(in srgb, var(--BLUE) 9%, transparent); color: var(--BLUE-D); }
.radar-feld  { background: color-mix(in srgb, var(--INK) 6%, transparent); color: var(--INK); }
.radar-delta { background: color-mix(in srgb, var(--INK) 4%, transparent); color: var(--MUTED); }
/* Was das fremde Radar dazu sagt — eingerückt an einer Kante, weil es eine
   fremde Stimme ist und nicht meine. Wo es schweigt, steht das ausdrücklich
   da: Stille ist die schlechteste Antwort. */
.radar-punkt .radar-zeile {
  margin: 10px 0 0; padding-left: 11px; border-left: 2px solid var(--LINE);
  font-size: .84rem; line-height: 1.6; color: var(--MUTED);
}
.radar-zeile b { color: var(--INK); font-weight: 700; }
/* ── „WEITERLESEN" ─────────────────────────────────────────────────────
   Anwender, 06.09.2026: „Nur die Kerninhalte in den Boxen und dann mit
   weiterlesen mehr Text angeboten."

   Der Griff sieht aus wie die Pfeilverweise der Seite und verhält sich
   wie einer — das Dreieck des Browsers ist abgeschaltet, weil es in
   jedem Browser anders aussieht und neben .link-arrow wie ein Fremdkörper
   steht. Der Pfeil dreht sich beim Öffnen; er ist damit auch der Hinweis,
   dass hier etwas ZUklappt und nicht nur auf.

   `list-style: none` UND `::-webkit-details-marker`: Safari hört auf die
   erste Zeile nicht, ältere Chrome-Fassungen auf die zweite nicht. */
.radar-mehr { margin-top: 10px; }
.radar-mehr > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: .84rem; font-weight: 700; color: var(--BLUE);
  padding: 3px 0; border-radius: var(--R-SM);
}
.radar-mehr > summary::-webkit-details-marker { display: none; }
.radar-mehr > summary::after {
  content: ""; width: 7px; height: 7px; margin-left: 1px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px); transition: transform .18s ease;
}
.radar-mehr[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.radar-mehr > summary:hover, .radar-mehr > summary:focus-visible { color: var(--BLUE-D); }
.radar-mehr > summary:focus-visible { outline: 2px solid var(--BLUE); outline-offset: 3px; }
/* Der erste Absatz hinter dem Griff braucht Abstand, sonst klebt er daran. */
.radar-mehr[open] > summary { margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) { .radar-mehr > summary::after { transition: none; } }

.radar-punkt .radar-wege {
  margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--LINE);
  display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: .84rem;
}

/* ── DIE ABBILDUNG ────────────────────────────────────────────────────────
   Eine Karte, darin die Bühne: das SVG und darüber die neun Punkte als HTML.

   WARUM DIE PUNKTE HTML SIND UND NICHT SVG: Ein <a> im SVG lässt sich zwar
   anklicken, aber alles daran ist mühsam — die Sprechblase braucht Text,
   der umbricht, einen Rahmen mit Radius und einen Schatten. Als HTML ist
   das je eine Zeile.

   DIE PROZENTWERTE RECHNET DER GENERATOR aus x und y des Themas, nicht die
   Hand. Wer die Scheibe vergrößert, verschiebt sonst neun Punkte, ohne dass
   die Grafik selbst falsch aussieht. */
.radar-abb {
  margin-top: 6px; background: var(--CARD); border: 1px solid var(--LINE);
  border-radius: var(--R); box-shadow: var(--SHADOW); padding: 22px;
}
/* Auf dem Telefon wird waagrecht gescrollt statt gequetscht: Unter 640px
   Bühnenbreite stehen zwei Punktnamen übereinander und die Achsen sind
   nicht mehr zu lesen. */
.radar-abb__rahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.radar-abb__buehne { position: relative; min-width: 640px; }
.radar-abb__bild { display: block; width: 100%; height: auto; }
.radar-feldflaeche { fill: color-mix(in srgb, var(--BLUE) 5%, transparent); }
.radar-feldflaeche--stark { fill: color-mix(in srgb, var(--BLUE) 11%, transparent); }
.radar-kreis { fill: none; stroke: var(--LINE); stroke-width: 1; }
.radar-achslinie { stroke: var(--LINE); stroke-width: 1; stroke-dasharray: 4 5; }
/* Die Ringe sind KEINE dritte Achse — die gibt es hier nicht, und eine
   vorgetäuschte wäre genau die Sorte Genauigkeit, vor der der Hinweis unter
   der Grafik warnt. Sie zeigen den Abstand vom Schnittpunkt. Ohne den Satz
   dazu in der Legende dürften sie nicht da sein. */
.radar-ring { fill: none; stroke: color-mix(in srgb, var(--INK) 10%, transparent); stroke-width: 1; }
.radar-ring--feld { stroke: var(--LINE); stroke-dasharray: 3 6; }
/* Das äußere Band trägt die vier Pole. Links blass, rechts kräftig: Rechts
   wird jetzt entschieden, und das ist die Hälfte, auf die es ankommt. */
.radar-band { fill: color-mix(in srgb, var(--BLUE) 11%, transparent); }
.radar-band--stark { fill: color-mix(in srgb, var(--BLUE) 25%, transparent); }
/* Die Schriftgrößen stehen in viewBox-Einheiten und schrumpfen mit der
   Grafik mit. In px gesetzt wären sie beim waagrechten Scrollen auf dem
   Telefon riesig gegenüber einer halb so groß gerenderten Grafik. */
.radar-pol { fill: var(--BLUE-D); font: 800 13px Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.radar-achse { fill: var(--MUTED); font: 600 15px Inter, sans-serif; }
.radar-achse--titel { fill: var(--INK); font-weight: 800; letter-spacing: .02em; }
.radar-feldname { fill: var(--MUTED); font: 800 15px Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; }

/* Jeder Punkt IST der Verweis auf seinen Eintrag — kein Verweis IN einer
   Sprechblase. Der Unterschied entscheidet auf dem Telefon: Eine Blase, die
   man erst antippen muss, um darin den Verweis zu treffen, kostet zwei
   Tipps und fängt den ersten ab. */
.radar-pin { position: absolute; left: calc(var(--px) * 1%); top: calc(var(--py) * 1%); transform: translate(-50%, -50%); }
/* Zwei Verweise statt einem, und das ist kein Versehen: Ein <a> im <a> gibt
   es in HTML nicht, und auf einem Gerät ohne Zeiger muss die Blase
   antippbar sein — sonst ist sie dort nie zu erreichen. */
.radar-griff { display: flex; align-items: center; gap: 9px; text-decoration: none; white-space: nowrap; padding: 6px; border-radius: 12px; }
/* In der linken Kreishälfte zeigt der Name nach außen, sonst läuft er quer
   über die Mitte und deckt die Achse zu. */
.radar-pin--namelinks .radar-griff { flex-direction: row-reverse; }
.radar-griff:focus-visible { outline: 2px solid var(--BLUE); outline-offset: 0; }
.radar-marke {
  position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--BLUE); transition: transform .18s ease;
  display: flex; align-items: center; justify-content: center;
}
.radar-marke .radar-nr { color: #fff; font: 800 10px/1 Inter, sans-serif; }
/* Der Ring ist die Radarkeule: Er fährt aus dem Punkt heraus und verblasst.
   Klein gehalten und mit langer Pause — neun laute Punkte wären ein
   Blinklicht, und das liest niemand. */
.radar-marke::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--BLUE); opacity: 0;
  animation: radar-keule 3.6s ease-out infinite; animation-delay: var(--d, 0s);
}
@keyframes radar-keule { 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
.radar-name { font: 700 .84rem/1.2 Inter, sans-serif; color: var(--INK); }
.radar-pin:hover .radar-marke, .radar-pin:focus-within .radar-marke { transform: scale(1.35); }
.radar-pin:hover .radar-name, .radar-pin:focus-within .radar-name { color: var(--BLUE-D); }
/* `visibility` und nicht nur `opacity`: Eine Blase mit opacity 0 fängt
   weiterhin den Zeiger ab und legt sich unsichtbar über den Nachbarpunkt. */
.radar-tip {
  position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%) translateY(4px);
  /* Radius und Polster aus dem System: Der Hinweis ist eine kleine Kachel
     und kein eigenes Bauteil. Vorher 12 px Radius und 11/13 Polster —
     zwei Werte, die es sonst nirgends gibt. */
  width: 250px; white-space: normal; padding: 18px; border-radius: var(--R);
  background: var(--INK); color: #fff; font: 500 .78rem/1.5 Inter, sans-serif;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .22); opacity: 0; visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; z-index: 3;
}
.radar-pin:hover .radar-tip, .radar-pin:focus-within .radar-tip {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); transition-delay: 0s;
}
.radar-pin:hover, .radar-pin:focus-within { z-index: 4; }
/* Am rechten Rand hängt die Blase nach links, unten nach oben — sonst steht
   sie außerhalb der Bühne und wird vom waagrechten Scrollen abgeschnitten. */
.radar-pin--links .radar-tip { left: auto; right: 0; transform: translateX(0) translateY(4px); }
.radar-pin--links:hover .radar-tip, .radar-pin--links:focus-within .radar-tip { transform: translateX(0) translateY(0); }
.radar-pin--oben .radar-tip { top: auto; bottom: calc(100% + 8px); }
/* Beim Laden fahren die Punkte nacheinander auf. Drei Zehntel Versatz je
   Punkt: Der neunte steht nach 2,6 Sekunden. Das Vorbild nimmt vier Zehntel
   und ist bei fünf Punkten damit nach 2 Sekunden fertig — bei neun wären es
   3,6, und wer bis dahin weitergescrollt hat, hat den letzten nie gesehen.
   Der Versatz ist also keine Geschmacksfrage, sondern hängt an der Anzahl. */
@keyframes radar-auftritt {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.radar-pin { opacity: 0; animation: radar-auftritt .5s cubic-bezier(.2, .7, .3, 1) forwards; animation-delay: calc(var(--d, 0s) + .15s); }
@media (prefers-reduced-motion: reduce) {
  .radar-pin { opacity: 1; animation: none; }
  .radar-marke::after { animation: none; opacity: 0; }
  .radar-tip { transition: none; }
}
/* Der Verweis in der Blase trägt .link-arrow — überschrieben wird nur die
   Farbe: Das Blau aus --BLUE ist für helle Flächen gemacht und auf dem
   dunklen Grund der Blase kaum zu lesen. Ein Verweis, den man nicht sieht,
   ist keiner; das ist der einzige Grund, aus dem hier ein fester Farbwert
   steht. */
/* `block` und nicht `inline-block`: Der Satz in der Blase endet ohne
   Umbruch, und der Verweis klebte hinten an — aus dem Punkt und dem
   Weiterlesen wurde ein Wort. Im Vorbild steht dieselbe Zeile und
   derselbe Fehler. */
.radar-tipweg { display: block; margin-top: 7px; font-weight: 700; text-decoration: none; }
.radar-tip .link-arrow { color: #bfdbfe; }
.radar-tip .link-arrow:hover, .radar-tip .link-arrow:focus-visible { color: #fff; text-decoration: underline; }
@media (max-width: 640px) { .radar-tip { width: 200px; } .radar-name { font-size: .78rem; } }
/* Vier Felder, vier Sätze — unter der Grafik und nicht daneben: Neben ihr
   hätte die Legende die Breite gekostet, um die es bei der Abbildung geht. */
.radar-legende {
  list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--LINE);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 22px;
}
.radar-legende li { font-size: .82rem; line-height: 1.5; color: var(--MUTED); padding-left: 11px; border-left: 2px solid var(--LINE); }
.radar-legende b { display: block; color: var(--INK); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 3px; }
.radar-legende--stark { border-left-color: var(--BLUE); }
.radar-legende--stark b { color: var(--BLUE-D); }
/* Der Ring-Eintrag erklärt kein Feld, sondern das Raster — volle Breite
   unter den vieren statt einer eigenen Spalte. */
.radar-legende--weit { grid-column: 1 / -1; border-left-style: dashed; }
.radar-hinweis { margin-top: 14px; font-size: .78rem; line-height: 1.6; color: var(--MUTED); }

/* ── SENKRECHTER RHYTHMUS ZWISCHEN DEN BAUSTEINEN ─────────────────────────
   Anwenderbefund 05.09.2026, mit eingekringeltem Bildschirmabzug: „Mehr
   Abstand das klebt zusammen". Auf dem Abzug stossen die drei Karten und der
   Erklaerfilm darunter fast aneinander.

   Der Grund ist kein Wert, der zu klein waere, sondern einer, den es nicht
   gab: .mb-paar, .mb-regel und .mb-anim bringen einen eigenen Aussenabstand
   mit, .public-grid und .film aus portal-public.css bringen KEINEN. Folgt
   ein Raster auf einen Film, liegen sie bündig aufeinander — und wer den
   naechsten Baustein ergaenzt, faellt in dieselbe Grube.

   Deshalb kein weiterer Einzelwert, sondern eine Regel fuer den Stapel: Was
   im Abschnitt auf etwas anderes folgt, bekommt Abstand nach oben. Das gilt
   auch fuer Bausteine, die es heute noch nicht gibt.

   32px sind bewusst das Doppelte der 16px, mit denen die Karten INNERHALB
   eines Rasters stehen. Der Blick soll sehen, was zusammengehoert und was
   der naechste Gedanke ist; gleicher Abstand innen wie aussen macht aus drei
   Karten und einem Film einen einzigen Block.

   Die vorhandenen Aussenabstaende der Bausteine bleiben stehen und stoeren
   nicht: Benachbarte Aussenabstaende fallen im normalen Fluss zusammen, es
   gilt der groessere. VERWORFEN: sie einzeln auf 0 zu setzen. Das waere eine
   Liste, die jemand pflegen muss, fuer ein Ergebnis, das der Browser
   ohnehin richtig macht. */
.public-section > .container > * + * { margin-top: 32px; }
@media (max-width: 720px) { .public-section > .container > * + * { margin-top: 24px; } }

/* Zwei Spalten: links die Aussage, rechts die Einordnung. Das Muster für
   „was passiert" gegen „was es bedeutet" — nebeneinander gelesen, nicht
   nacheinander. */
.mb-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0; }
.mb-paar > div {
  background: var(--CARD); border: 1px solid var(--LINE);
  border-radius: var(--R-SM); padding: 16px 18px;
}
.mb-paar h4 {
  font: 800 .68rem/1 Inter, system-ui, sans-serif; letter-spacing: .1em;
  text-transform: uppercase; color: var(--BLUE); margin: 0 0 8px;
}
.mb-paar p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--MUTED); }
.mb-paar strong { color: var(--INK); }

/* Die Faustregel-Box: ein Satz, der hängen bleiben soll. Kräftiger als
   .mb-merksatz, weil sie allein steht und nicht im Fließtext. */
.mb-regel {
  display: flex; gap: 14px; align-items: flex-start;
  margin: 18px 0; padding: 16px 20px;
  border: 1px solid rgba(37,99,235,.22); border-radius: var(--R-SM);
  background: color-mix(in srgb, var(--BLUE) 4%, transparent);
}
.mb-regel svg { width: 22px; height: 22px; flex-shrink: 0; stroke: var(--BLUE); margin-top: 1px; }
.mb-regel p { margin: 0; font-size: 1rem; line-height: 1.55; font-weight: 600; color: var(--INK); }

/* Kleine Animation im Text: ein Diagramm, das eine Mechanik zeigt, statt
   sie zu beschreiben. Nutzt die Bewegungsklassen des Portals (.s-flow,
   .s-node), damit sie sich wie die Hintergrundszenen anfühlt. */
.mb-anim {
  margin: 18px 0; padding: 14px 16px 10px;
  border: 1px solid var(--LINE); border-radius: var(--R-SM); background: var(--CARD);
}
.mb-anim svg { display: block; width: 100%; height: auto; }
.mb-anim figcaption {
  margin-top: 8px; font-size: .8rem; line-height: 1.5; color: var(--MUTED);
}
.mb-anim .a-line { fill: none; stroke: var(--BLUE); stroke-width: 2; opacity: .35; }
.mb-anim .a-flow { stroke-dasharray: 6 8; animation: s-fluss 2.6s linear infinite; }
.mb-anim .a-node { fill: var(--BLUE); }
.mb-anim .a-gruen { fill: var(--GREEN); stroke: var(--GREEN); }
.mb-anim .a-amber { fill: var(--AMBER); stroke: var(--AMBER); }
.mb-anim .a-lab {
  font: 700 11px Inter, system-ui, sans-serif; fill: var(--MUTED);
}
@media (prefers-reduced-motion: reduce) { .mb-anim .a-flow { animation: none; } }

@media (max-width: 720px) { .mb-paar { grid-template-columns: 1fr; } }

/* Sicherheitsnetz für die Symbole in der Leiste: Ein Inline-SVG ohne feste
   Größe skaliert auf 100 % seines Kastens — in der Navigation also auf die
   volle Höhe. Das ist einmal passiert; die Regel verhindert, dass es beim
   nächsten hinzugefügten Symbol wieder passiert. */
.nav-top-icon { display: inline-flex; align-items: center; }
.nav-top-icon svg { width: 16px; height: 16px; stroke: currentColor; }
.mobile-link-icon svg { width: 16px; height: 16px; stroke: currentColor; }

/* ── Wortmarke ──────────────────────────────────────────────────────────
   Gebaut nach dem Prinzip des Portals: LOG|CONS setzt die erste Hälfte in
   Tinte, die zweite in Blau, getrennt durch einen Strich. Dasselbe Gerät,
   eigener Name — so gehört die Marke sichtbar zur selben Familie, ohne
   die fremde zu kopieren.
   .brand-log und .brand-cons sind die Klassen des Portals; nur der Strich
   dazwischen ist neu, weil LOG|CONS ihn im Namen trägt und hier ein
   eigenes Element braucht.
   VERWORFEN: MARTIN über BERNER gestapelt, wie das Portal es tut. Bei zwei
   sechs- bis siebenstelligen Wörtern wird die Leiste dadurch hoch, ohne
   dass die Marke gewinnt. */
.mb-wort { display: inline-flex; align-items: baseline; gap: 3px; }
.mb-strich { font: 900 1rem/1 Inter, system-ui, sans-serif; color: var(--LINE);
             color: rgba(15,23,42,.22); }
.brand .brand-sub { text-align: left; letter-spacing: .16em; }

/* Der Zusatz unter der Wortmarke verschwindet auf schmalen Geräten. Auf
   Englisch heißt er „AI · BI · LOGISTICS" — ein Zeichen mehr als im
   Deutschen, und genau dieses eine Zeichen schob den Menüknopf bei 390 px
   sechs Pixel über den Rand. Die Marke ist der Name, nicht der Zusatz. */
@media (max-width: 460px) { .brand-sub { display: none; } }

/* Der Sprachumschalter ist mein Zusatz in einer Leiste, die das Portal
   ohne ihn gebaut hat. Dessen mobile Regel blendet .nav-links und .nav-cta
   aus und kennt .mb-sprache nicht — er blieb stehen und schob den
   Menüknopf sechs Pixel über den Rand. Er gehört unter derselben Schwelle
   weg wie die anderen und steht dafür im aufklappbaren Menü.
   Dieselbe Schwelle wie im Portal (980px), nicht eine eigene: Zwei
   Umschaltpunkte in einer Leiste sehen aus wie ein Fehler. */
@media (max-width: 1180px) { .nav-inner .mb-sprache { display: none; } }
.mobile-links .mb-sprache { display: inline-block; margin: 10px 4px 0; }

/* ── Menuepunkte weiter auseinander ────────────────────────────────────
   Anwenderwunsch 05.09.2026, mit eingekringeltem Bildschirmabzug der Leiste:
   „Menü etwas weiter auseinander". portal-public.css setzt .nav-links auf
   gap:2px — im Portal stehen dort sechs Punkte plus Sprachwahl und Knopf,
   da zaehlt jeder Pixel. Diese Seite hat vier Punkte und im Kopf reichlich
   Luft; derselbe enge Abstand laesst sie zusammengedraengt wirken.

   NUR der Abstand, nicht die Innenabstaende der Punkte: Groessere Polster
   machen die Flaechen groesser, nicht die Zwischenraeume — und beim
   Ueberfahren waere die blaue Flaeche dann klobig.

   Mitwachsend statt gestuft. Vorher standen 14px und unter 1100px 6px. Das
   hatte zwei Nachteile: Auf einem Tablet mit 1024px — der haeufigsten Breite
   nach dem Telefon — sprang der Abstand auf ein Drittel und wirkte wieder
   gedraengt, obwohl links und rechts noch je 24px frei waren. Und die Stufe
   selbst ist sichtbar: Wer das Fenster ueber 1100px zieht, sieht die Punkte
   springen.

   ZWEITE MESSUNG, 05.09.2026 abends: 20px waren immer noch zu eng. Der
   Grund steckt nicht im Abstand, sondern darin, WAS da nebeneinander steht:
   "Start" traegt als aktuelle Seite eine gefuellte Pille, "Radar" eine gruen
   umrandete. Zwei Flaechen mit 20px Abstand beruehren sich fast; zwei blosse
   Woerter haetten bei 20px Luft gehabt. Gemessen wird der Abstand zwischen
   den Kaesten, wahrgenommen der zwischen den Flaechen.

   Wie viel geht ueberhaupt? Durchgemessen in Zweierschritten, bis etwas aus
   der Leiste ragt: ab 1180px sind 38px moeglich — und darueber nicht mehr,
   weil .container eine Maximalbreite hat und die zusaetzliche Fensterbreite
   als Aussenrand endet. Bei 1101px sind es dagegen nur 18px.

   Daraus folgt die Grenze bei 1180 statt 1100: In dem schmalen Band
   dazwischen waere der Abstand wieder so eng wie das, was beanstandet wurde.
   Ein 79px breites Band ohne verbreitetes Geraet dafuer eng zu halten, waere
   die falsche Seite des Handels.

   clamp(24px, 2.4vw, 34px): 1181px -> 28px, 1366px -> 33px, ab 1420px 34px.
   Mit Abstand unter den gemessenen 38px, damit ein spaeter hinzukommender
   Menuepunkt nicht sofort wieder herausragt.

   VERWORFEN: eine feste Zahl. Sie waere entweder auf dem grossen Bildschirm
   knapp oder im schmalen Band zu gross — genau die Wahl, die der gestufte
   Wert vorher schon falsch getroffen hat. */
.nav-links { gap: clamp(24px, 2.4vw, 34px); }

/* ── Bruecke ueber die Luecke im Mega-Menue ─────────────────────────────
   Das Panel steht 10px unter der Leiste (portal-public.css: top:calc(100% +
   10px)). Beim breiten Menue haengt es am .nav .container, nicht am schmalen
   Menuepunkt — wer von "Themen" nach unten faehrt, verlaesst das <li>, bevor
   er das Panel erreicht, und das Menue schloss sich unter dem Zeiger weg.
   Das ::before fuellt die 10px als unsichtbare Flaeche; weil es zum Panel
   gehoert, haelt es :hover am <li>.
   VERWORFEN: den Abstand auf 0 setzen. Er ist gewollt — ohne ihn klebt der
   Schatten des Panels an der Leiste. Ebenfalls verworfen: eine Schliess-
   verzoegerung per Skript; sie laesst das Menue nachhaengen, wenn man nur
   darueber hinwegfaehrt. */
.nav-dropdown-toggle { position: relative; }
.nav-dropdown-toggle::after {
  /* Die Bruecke ueber die Luecke. Vom Menuepunkt bis zum Panel sind es
     gemessene 36,75px: die 10px aus portal-public.css messen ab der Unterkante
     des .nav .container, an dem das breite Panel haengt, dazwischen liegen die
     Innenabstaende der Leiste. Wer von "Themen" nach unten faehrt, verliess
     diese 37px lang das <li> — Hover weg, Menue zu, mitten in der Bewegung.

     VERWORFEN, weil es nicht traegt: dasselbe Band als ::before am Panel.
     .mega-menu--wide hat overflow:hidden (es schneidet die Ecken des Panels
     rund), und ein Kasten oberhalb des Panels liegt ausserhalb — er wird
     restlos weggeschnitten. Im Quelltext sah die Regel richtig aus, im Browser
     gab es sie nicht. Am Menuepunkt gibt es kein overflow, dort haelt sie.

     VERWORFEN: den Abstand auf 0 setzen. Er ist gewollt; ohne ihn klebt der
     Schatten des Panels an der Leiste. Ebenso verworfen: eine Schliess-
     verzoegerung per Skript — die laesst das Menue nachhaengen, wenn man nur
     darueber hinwegfaehrt. */
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 40px;
  pointer-events: none;
}
/* Nur waehrend das Menue offen ist. Sonst laege ein unsichtbares Band ueber
   dem, was direkt unter der Leiste steht, und schluckte dort jeden Klick. */
.nav-dropdown:hover .nav-dropdown-toggle::after,
.nav-dropdown:focus-within .nav-dropdown-toggle::after,
.nav-dropdown.open .nav-dropdown-toggle::after { pointer-events: auto; }
/* Ein per Klick festgehaltenes Menue (.open) darf nicht verschwinden, sobald
   der Zeiger die Nav verlaesst — deshalb steht das Schliessen im Skript
   (Klick daneben, Escape, Verweis im Panel), nicht am Hover. */

/* ── Ein Grund, eine Szene ──────────────────────────────────────────────
   Anwenderwunsch: „die animation soll überall gleich sein auch im header /
   hero — überall die europäischen Hauptstädte und die lkws, überall das
   gleiche blau im hintergrund."

   Die Szene lief schon global (position:fixed hinter allem). Verdeckt wurde
   sie von zwei Stellen: der Held trug einen deckenden Verlauf, und jeder
   zweite Abschnitt einen halbweissen Schleier. Das ergab die Streifen —
   Hauptstädte in der Mitte, nichts im Kopf.

   Statt beides nachzubauen, faellt beides weg: Der Grund ist --BG, das blaue
   Grau, das der Koerper ohnehin traegt. Held und Abschnitte werden
   durchsichtig, die Szene laeuft durchgehend dahinter.

   VERWORFEN: den Schleier auf alle Abschnitte zu legen statt auf jeden
   zweiten. Das waere ebenfalls einheitlich, deckt die Szene aber ueberall
   halb zu — die Bitte war, sie ueberall zu sehen, nicht sie ueberall gleich
   stark zu daempfen. Lesbarkeit traegt die Szene selbst: Linien 22 %,
   Knoten 16–40 % Deckung, Karten und Boxen bleiben weiss. */
.public-hero { background: none; }
.public-hero::before { background: none; }
.public-section--alt { background: none; }

/* Die Maske hielt die Szene in der Mitte des Fensters (58 % voll, dann
   Abblendung). Im Kopfbereich war deshalb auch ohne den Verlauf nichts zu
   sehen. Weiter geoeffnet, damit die Hauptstaedte oben mitlaufen; die weiche
   Kante bleibt, sonst schneidet die Szene am Fensterrand hart ab. */
.welt-netz {
  -webkit-mask-image: radial-gradient(150% 145% at 50% 45%, #000 74%, transparent);
  mask-image: radial-gradient(150% 145% at 50% 45%, #000 74%, transparent);
}

/* Ortsnamen eine Spur zurueck. 52 % Deckung standen, solange die Szene nur
   zwischen den Abschnitten sichtbar war; seit sie auch hinter dem Helden
   laeuft, steht "London" mitten in der Einleitungszeile. Die Namen sollen
   dasein, nicht mitgelesen werden.
   VERWORFEN: die Namen im Kopfbereich auszublenden. Dann waere die Szene
   oben wieder eine andere als unten — genau das, was weg sollte. */
.welt-netz .wl { fill: color-mix(in srgb, var(--BLUE) 46%, transparent); }
.welt-netz .wl.akz { fill: color-mix(in srgb, var(--BLUE) 58%, var(--INK)); }


/* ── Die Leiste wird frueher zum Hamburger ─────────────────────────────
   GEFUNDEN beim Nachmessen der Menueabstaende, und es ist ein aelterer
   Fehler als der Abstand: portal-public.css blendet .nav-links und .nav-cta
   erst unter 720px aus. Zwischen 720px und rund 1050px passt der Inhalt der
   Leiste aber nicht mehr hinein — Marke, fuenf Punkte, Sprachwahl und
   Kontaktknopf sind zusammen breiter als der Rahmen. Flexbox schiebt den
   Ueberschuss nach rechts hinaus, body{overflow-x:hidden} schneidet ihn ab,
   und der KONTAKTKNOPF STEHT AUSSERHALB DES BILDES: bei 1024px um 34px, bei
   860px um 91px, bei 760px um 185px. Auf jedem Tablet im Hochformat und
   jedem kleinen Notebook war der wichtigste Knopf der Seite unsichtbar.
   Sichtbar wird das nirgends als Fehler — nichts bricht um, nichts scrollt,
   es fehlt einfach.

   Die Schwelle des Portals passt dort, weil dessen Leiste anders bestueckt
   ist. Hier traegt die Marke zwei Zeilen, und seit heute steht "Werkzeuge"
   als fuenfter Punkt dabei. 1100px ist gemessen, nicht geschaetzt: Bei
   1100px passt alles mit Rand, darunter nicht mehr.

   VERWORFEN: die Punkte schrumpfen zu lassen (kleinere Innenabstaende,
   kleinere Schrift). Das haette die Leiste bis etwa 950px gerettet und
   darunter denselben Fehler gehabt — und bis dahin waere sie gedraengt
   gewesen, also genau das, was der Anwender beanstandet hat.
   VERWORFEN: den Kontaktknopf frueher auszublenden. Dann fehlt der Weg zum
   Kontakt ganz, statt im Hamburger zu stehen. */
@media (max-width: 1180px) {
  .menu-btn { display: flex; align-items: center; justify-content: center; }
  .nav-links, .nav-cta { display: none; }
}

/* ── Lena: die Suche dieser Seite ──────────────────────────────────────
   Anwenderwunsch 05.09.2026: "Ok oeffentliche Lena ohne ki." Sie durchsucht
   den Index der eigenen Seiten — kein Server, kein Modell, kein Schluessel
   auf dem Webspace. Was jemand eintippt, verlaesst seinen Browser nicht.

   Farben, Radien und Schatten kommen aus den Variablen; die Karte im Panel
   nutzt dieselben Werte wie .public-card. Eine eigene Farbwelt fuer ein
   schwebendes Fenster faellt beim ersten Themenwechsel auseinander.

   VERWORFEN: Lena in die Leiste zu haengen. Dort ist seit dem fuenften
   Menuepunkt kein Platz mehr — genau deshalb wechselt die Leiste jetzt
   frueher zum Hamburger. Unten rechts steht sie ausserhalb des Lesetextes
   und ist auf jeder Breite erreichbar. */
.lena { position: fixed; right: 18px; bottom: 18px; z-index: 800; }
.lena__knopf {
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 .86rem/1 Inter, system-ui, sans-serif; color: #fff;
  background: linear-gradient(135deg, #3b82f6, #1e40af);
  border: 0; border-radius: 999px; padding: 11px 17px; cursor: pointer;
  box-shadow: 0 6px 20px rgba(37,99,235,.32);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.lena__knopf:hover { transform: translateY(-1px); filter: brightness(1.06);
  box-shadow: 0 10px 26px rgba(37,99,235,.4); }
.lena.is-auf .lena__knopf { opacity: 0; pointer-events: none; }

.lena__panel {
  position: absolute; right: 0; bottom: 0; width: min(94vw, 420px);
  background: var(--CARD); border: 1px solid var(--LINE);
  border-radius: var(--R-SM); box-shadow: 0 18px 48px rgba(15,23,42,.18);
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
/* display:flex an der Klasse schlaegt das display:none, das der Browser dem
   hidden-Attribut gibt — Klassenregeln wiegen schwerer als die des
   Browsers. Das Panel war damit zwar durchsichtig, fing aber weiterhin jeden
   Klick ab: Der Knopf darunter liess sich NICHT druecken, Lena war nicht zu
   oeffnen. Im Quelltext sieht "hidden" nach erledigt aus; gefunden hat es
   erst der Browser ("subtree intercepts pointer events").
   Dieselbe Falle steckt in jeder Komponente, die hidden mit display kombiniert. */
.lena__panel[hidden] { display: none; }
.lena__kopf { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 8px; }
.lena__kopf strong { font-size: 1rem; color: var(--INK); }
.lena__kopf span { grid-column: 1; font-size: .8rem; color: var(--MUTED); }
.lena__zu {
  /* Ausdruecklich Spalte 2: Ohne die Angabe sucht sich der Knopf seinen Platz
     selbst, und weil der Untertitel per grid-column:1 auf die erste Spalte
     festgelegt ist, landete er LINKS vom Titel — Schliessen links, "Lena"
     rechts. Im Quelltext steht er an dritter Stelle und sieht damit richtig
     aus; erst gerendert sieht man, wohin er gerutscht ist. */
  grid-column: 2; grid-row: 1 / span 2; align-self: start; background: none; border: 0;
  font-size: 1.4rem; line-height: 1; color: var(--MUTED); cursor: pointer; padding: 0 2px;
}
.lena__zu:hover { color: var(--BLUE); }
.lena__feld {
  font: 400 .92rem Inter, system-ui, sans-serif; padding: 10px 12px;
  border: 1px solid var(--LINE); border-radius: 10px;
  background: var(--BG); color: var(--INK); width: 100%;
}
.lena__feld:focus { outline: 2px solid rgba(37,99,235,.35); outline-offset: 1px; border-color: var(--BLUE); }

/* Hoehe begrenzt und scrollend: Bei 426 Eintraegen im Index waeren zwoelf
   Treffer sonst laenger als das Fenster, und der Hinweis darunter — dass
   nichts uebertragen wird — waere nie zu sehen. */
.lena__treffer { max-height: min(46vh, 340px); overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.lena__treffer-e {
  display: grid; gap: 1px; padding: 8px 10px; border-radius: 9px;
  text-decoration: none; transition: background .15s;
}
.lena__treffer-e:hover { background: rgba(37,99,235,.07); }
.lena__art { font-size: .64rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--BLUE); }
.lena__t { font-size: .88rem; font-weight: 700; color: var(--INK); }
.lena__x { font-size: .78rem; line-height: 1.45; color: var(--MUTED); }
.lena__leer { font-size: .84rem; color: var(--MUTED); margin: 6px 2px; }
.lena__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px; }
.lena__chip {
  font: 600 .8rem Inter, system-ui, sans-serif; color: var(--BLUE);
  background: rgba(37,99,235,.08); border: 0; border-radius: 999px;
  padding: 6px 12px; cursor: pointer; transition: background .15s;
}
.lena__chip:hover { background: rgba(37,99,235,.16); }
.lena__fuss { font-size: .72rem; line-height: 1.45; color: var(--MUTED); margin: 0; }

@media (max-width: 480px) { .lena { right: 12px; bottom: 12px; } }
@media (prefers-reduced-motion: reduce) { .lena__knopf { transition: none; } }

/* ── Zwei Spalten: Text links, Bewegung rechts ─────────────────────────
   Anwenderwunsch 05.09.2026, mit einer Skizze: "Bitte zwei spalten bei allen
   Themen und text noch kompakter." Vorher stand der Film UNTER dem Absatz,
   der ihn einordnet — man las erst alles und sah dann das Bild dazu. Neben-
   einander gehoert beides zusammen, und die Seite wird kuerzer statt laenger.

   minmax(0, …) an beiden Spalten: Ohne das zieht ein langes Wort oder ein
   nicht umbrechender Filmknoten die Spalte auf, das Raster laeuft ueber und
   die rechte Haelfte wird abgeschnitten. Derselbe Grund wie im Mega-Menue
   des Portals.

   Unter 980px untereinander — dieselbe Schwelle, an der auch die Leiste zum
   Hamburger wird. Zwei Umschaltpunkte in einer Seite sehen aus wie ein
   Fehler. */
.mb-zwei {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 26px 30px; align-items: start; margin: 6px 0 4px;
}
@media (max-width: 980px) { .mb-zwei { grid-template-columns: 1fr; gap: 18px; } }

/* Der Film in der halben Spalte. portal-public.css macht ihn erst unter
   640px kompakter — das ist eine MEDIENabfrage: Sie sieht das Fenster, nicht
   die Spalte. Auf einem 1400px breiten Bildschirm ist die Spalte rund 500px
   schmal, das Fenster aber weit; die Regel greift also nie, und sieben
   Stationen draengen sich auf 70px je Station. Deshalb dieselbe Verkleinerung
   noch einmal, gebunden an die Spalte statt an das Fenster.
   VERWORFEN: eine Container-Query. Sie waere das richtige Werkzeug, verlangt
   aber container-type an der Spalte — und damit einen neuen Layout-Kontext
   mitten in einer Struktur, die aus dem Portal stammt. Der Gewinn waere,
   dieselbe Regel nicht zweimal zu schreiben; der Preis ein Verhalten, das
   sich beim naechsten Umbau anders anfuehlt als im Portal. */
.mb-zwei .film { padding: 20px 14px 18px; }
.mb-zwei .film__dot { width: 34px; height: 34px; border-radius: 10px; }
.mb-zwei .film__dot svg { width: 16px; height: 16px; }
.mb-zwei .film__lbl { font-size: .58rem; overflow-wrap: anywhere; hyphens: auto; }
.mb-zwei .film__flow { gap: 3px; }
.mb-zwei .film__flow::before { top: 16px; }
.mb-zwei .film__caption { font-size: .9rem; }
.mb-zwei .mb-anim { margin-top: 0; }
/* Der erste Absatz der linken Spalte soll mit dem Kasten rechts anfangen,
   nicht darunter — sonst sieht die Zeile aus wie versehentlich verrutscht. */
.mb-zwei > :first-child > :first-child { margin-top: 0; }

/* ── Sinnbild auf der Werkzeugkarte ────────────────────────────────────
   Anwenderwunsch 05.09.2026: "Bitte immer ein bild des Tools oberhalb des
   textes." Die Uebersicht war eine Wand aus Textkarten — 24 Ueberschriften
   untereinander unterscheiden sich beim Ueberfliegen nicht.

   Das Bild traegt keine Beschriftung und ist aria-hidden: Es sagt, um welche
   ART Frage es geht (Geld, Zeit, Mass, Quote, Route, Dokument), nicht welches
   Werkzeug — das steht in der Ueberschrift darunter. Eine Vorlesehilfe
   zweimal dasselbe sagen zu lassen, hilft niemandem. */
.wz-bild {
  display: block; width: 100%; height: auto; max-height: 68px;
  margin-bottom: 12px; border-radius: 10px; padding: 8px 10px;
  background: linear-gradient(135deg, rgba(37,99,235,.07), rgba(5,150,105,.05));
}
/* Die Striche und Punkte kommen aus demselben Baukasten wie die Zeichnungen
   in den Themenseiten — dieselben Klassen, dieselben Variablen. */
.wz-bild .a-line { fill: none; stroke: var(--BLUE); stroke-width: 2.4; opacity: .5;
  stroke-linecap: round; stroke-linejoin: round; }
.wz-bild .a-flow { stroke-dasharray: 5 7; animation: s-fluss 2.8s linear infinite; }
.wz-bild .a-node { fill: var(--BLUE); opacity: .55; }
.wz-bild .a-gruen { stroke: var(--GREEN); fill: var(--GREEN); opacity: .6; }
.wz-bild .a-line.a-gruen { fill: none; }
.wz-bild .a-amber { stroke: var(--AMBER); fill: var(--AMBER); opacity: .65; }
.wz-bild .a-line.a-amber { fill: none; }
.public-card:hover .wz-bild { background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(5,150,105,.08)); }
@media (prefers-reduced-motion: reduce) { .wz-bild .a-flow { animation: none; } }

/* ── Schriftgröße des Fließtextes ──────────────────────────────────────
   Anwenderfrage 05.09.2026: "wie wäre die best practice schriftgröße, mir
   kommt vor es ist zu klein." Nachgemessen, statt nach Gefühl geändert:
   Fließtext 16px, die Kästen 14,7px, Bildunterschriften 12,8px.

   16px war lange der Standard und ist heute die UNTERGRENZE. Fachtexte, die
   jemand am Schreibtisch liest, liegen bei 17–19px; die Zeilenhöhe von 1,7
   und die Zeilenlänge von 65–74 Zeichen stimmten schon.

   Angehoben wird gezielt der Lesetext, NICHT die Wurzelgröße. Ein
   :root{font-size} hätte alles mitgezogen — auch die Navigationsleiste, deren
   Abstände heute dreimal nachgemessen wurden, und die Überschriften, die
   bereits clamp() verwenden. Eine Änderung, die an einer Stelle gewollt ist
   und an fünf anderen mitkommt, ist keine Änderung, sondern ein Risiko.

   Die Kästen bleiben eine Spur kleiner als der Fließtext: Sie stehen zu
   zweit nebeneinander und sind kurz. Gleich groß wirken sie wie ein zweiter
   Haupttext und nehmen dem eigentlichen den Rang. */
.mb-text p, .mb-text li, .public-lead,
.public-section__head p { font-size: 1.09rem; line-height: 1.7; }
.public-card p { font-size: 1rem; line-height: 1.6; }
.mb-paar p { font-size: 1rem; line-height: 1.62; }
.mb-regel p { font-size: 1.05rem; }
.mb-anim figcaption { font-size: .875rem; line-height: 1.55; }
/* Die sieben Schritte tragen Inhalt, keine Randbemerkung — dieselbe Groesse
   wie der Fliesstext. Mit 1,05rem standen sie kleiner da als der Absatz
   darueber, obwohl sie das Wichtigste der Seite sind. Aufgefallen ist es
   nur beim Nachmessen: Meine eigene Regel stand nach der allgemeinen und
   hat sie ueberschrieben. */
.mb-schritte p, .mb-schritte li { font-size: 1.09rem; }

/* Der Filmuntertitel war mit 121 Zeichen je Zeile das eigentliche
   Leseproblem — nicht seine Größe. Ab etwa 75 Zeichen verliert das Auge beim
   Zeilenwechsel den Anschluss; deshalb eine Breitengrenze statt einer
   kleineren Schrift. In der halben Spalte greift sie nicht, dort ist die
   Zeile ohnehin kurz. */
.film__caption { max-width: 64ch; margin-left: auto; margin-right: auto; }

/* ── Marke größer, Menüpunkte enger ────────────────────────────────────
   Anwenderwunsch 05.09.2026: "jetzt ist im menü zu viel abstand und mein name
   und mein logo ist zu klein, bitte menüpunkte doch enger und mein name und
   logo größer."

   Das ist derselbe Platz, zweimal verteilt. Die Leiste hat ab 1180px rund
   38px Spielraum — nimmt die Marke davon, muss der Abstand sie hergeben.
   Gerechnet: Das Zeichen wächst um 10px, die Wortmarke um rund 30px, macht
   40px mehr. Vier Lücken zu je 14px weniger sind 56px, also passt es mit
   Rand. Nachgemessen, nicht überschlagen.

   Die Marke ist es wert: Sie steht auf jeder Seite, in jeder Vorschau, in
   jedem Lesezeichen. Ein Menüabstand wird bemerkt, solange man ihn ansieht;
   eine zu kleine Wortmarke fällt gar nicht auf — man erinnert sich nur
   nicht an sie. */
.brand-mark { width: 48px; height: 48px; border-radius: 13px; font-size: 1rem; }
.brand-log, .brand-cons { font-size: 1.32rem; }
.mb-strich { font-size: 1.32rem; }
.brand-sub { font-size: .66rem; letter-spacing: .16em; margin-top: 3px; }
.brand { gap: 14px; }

/* Enger als die 34px von vorhin, weiter als die 20px, die zu eng waren.
   Der Abstand zwischen den PILLEN ist das, was man sieht — bei 18px Lücke
   und 13px Innenabstand je Seite sind das 44px zwischen zwei Beschriftungen. */
.nav-links { gap: clamp(12px, 1.4vw, 18px); }

/* ── Abstände um die Animation unter dem Helden ────────────────────────
   Anwenderfrage 05.09.2026: "beurteile nach best practice ob die abstände
   bei den videos nicht zu groß sind." Nachgemessen:

     Text → Animation     106px   (Held 44 unten + Abschnitt 44 oben + 18)
     Animation → nächster  88–112px

   Zu viel für das Erste, angemessen für das Zweite. Der Unterschied liegt in
   der Beziehung: Einleitung und Animation gehören ZUSAMMEN — sie ist das Bild
   zu diesen zwei Sätzen. Zwei Dinge, die zusammengehören, brauchen 32–48px;
   erst zwischen verschiedenen Abschnitten sind 64–96px richtig. Bei 106px
   liest sich die Animation wie ein eigener Abschnitt, der zufällig dort steht.

   Der Held bringt seine 44px schon mit; der Abschnitt braucht oben also fast
   nichts. Unten bleibt mehr, weil dort wirklich ein Abschnitt endet — aber
   88px waren auch das eine Spur zu viel für eine Seite, die kompakt sein soll.

   VERWORFEN: das padding des Helden zu kürzen. Es gilt für jede Seite, auch
   für die ohne Animation darunter — dort wäre der Titel dann angeklebt. */
.mb-film-oben { padding-top: 10px; padding-bottom: 26px; }
.mb-film-oben .mb-anim { margin-top: 0; }
@media (max-width: 720px) { .mb-film-oben { padding-top: 6px; padding-bottom: 18px; } }

/* ── EINE KARTE ÜBER DIE GANZE SEITE ──────────────────────────────────────
   Anwender, 07.09.2026, mit einem Bildschirmabzug des LOG|CONS-Portals:
   „so soll der animierte Hintergrund aussehen." Dort liegt EINE Karte
   fixiert hinter der ganzen Seite, mit den Ortsnamen, ohne Abschwächung —
   und genau das sind die Grundregeln oben (`.welt-netz`), die diese Seite
   von dort geerbt hat. Es braucht also keine eigene Fassung, sondern das
   Weglassen der beiden Sonderwege.

   DAMIT SIND ZWEI ENTSCHEIDUNGEN ZURÜCKGENOMMEN, und beide gehören
   benannt, weil sie mit Gründen getroffen wurden:

   05.09.2026 — die Szene wanderte in den Helden, weil „Bukarest" zwischen
   zwei Ergebniskarten stand. 06.09.2026 — sie kam als blasser Grund ohne
   Namen zurück, aus demselben Grund. Der Anwender hat jetzt das Vorbild
   danebengelegt: Auf dem Portal steht sie so, seit Langem, und er will sie
   so. Das ist seine Entscheidung über seine Seite; der damalige Befund war
   nicht falsch, er wiegt für ihn nur leichter als die Wirkung.

   DIE MINDESTHÖHE VON 440 px IST AM 07.09.2026 GEFALLEN. Sie stand hier
   seit dem Umbau der Szene, mit der Begründung „der Einstieg soll auf
   allen Seitenarten gleich hoch sein". Der Anwender hat auf den Abstand
   unter dem Einstieg gezeigt: „Ist der Zwischenraum nach Best Practice
   nicht zu groß?"

   NACHGEMESSEN, und die Zahl, die es erklärt, ist nicht der Abstand
   selbst, sondern die LUFT IM BAND: Der Inhalt der Einstiege ist 195 bis
   360 px hoch, das Band war überall 440. Auf `automatisierung.html` und
   `best-practice.html` blieben damit 149 px Leerraum im Band stehen, die
   niemand gesetzt hat — sie sind der Rest einer festen Zahl. Zusammen mit
   dem Polster unten und oben standen zwischen dem letzten Satz des
   Einstiegs und der nächsten Augenbraue 115 bis 196 px, während ZWISCHEN
   den Abschnitten 50 px stehen. Vier verschiedene Abstände für dieselbe
   Fuge, und der größte am auffälligsten Ort.

   Dazu kommt: Die feste Höhe hat ihr Versprechen ohnehin nicht gehalten.
   `en/index.html` trägt 456 px, weil der englische Satz eine Zeile mehr
   braucht — eine Mindesthöhe kann nur nach unten gleich machen. Eine
   Regel, die ihren Zweck bei der ersten längeren Übersetzung verfehlt,
   ist keine Regel, sondern eine Zahl.

   JETZT KOMMT DIE HÖHE AUS DEM INHALT und die Einheitlichkeit aus dem
   POLSTER — das ist die übliche Bauart und die einzige, die eine
   Übersetzung überlebt. Die Mindesthöhe bleibt als Boden für den kürzesten
   Einstieg (Impressum, Datenschutz), damit er nicht gestaucht wirkt; sie
   greift dort um wenige Pixel statt um 149.

   EIN ZWISCHENSCHRITT IST WIEDER GEFALLEN, und er gehört hierher, weil er
   plausibel aussah: Ich hatte dem Band 52 px zusätzliches Polster unten
   gegeben, damit der Abstand unter dem Einstieg dieselben rund 178 px
   trägt wie die Fugen zwischen den Abschnitten. Die 178 waren aber ein
   Messfehler — mein Skript verglich „letzter Text zu erstem Text" und traf
   dabei je nach Abschnitt verschiedene Elemente. Strukturell stehen
   zwischen zwei Abschnitten 44 + 44 px, und genau die stehen jetzt auch
   unter dem Einstieg. Mehr Polster hätte den Abstand VERGRÖSSERT, den der
   Anwender als zu groß gemeldet hat. */
.public-hero { min-height: 300px; display: flex; align-items: center; }
@media (max-width: 720px) { .public-hero { min-height: 240px; } }
/* Der kompakte Einstieg (Impressum, Datenschutz) trägt weniger Polster und
   braucht deshalb auch einen niedrigeren Boden. Mit den 300 px des vollen
   Einstiegs blieben dort 41 px Leerraum stehen — dieselbe Sorte Loch, nur
   kleiner. Gefunden hat es der Wächter, nicht das Auge. */
.public-hero--compact { min-height: 220px; }
/* Der Inhalt gehoert ueber die Karte. .public-hero__grid bringt seine
   eigene Positionierung mit, der Rest nicht — deshalb hier ausdruecklich. */
.public-hero > .container { position: relative; z-index: 1; }

/* ── Sieben Schritte in zwei Spalten ──────────────────────────────────────
   Gemessen am 05.09.2026: Die Liste war 666 px breit und 901 px hoch — sie
   nutzte 56 Prozent der Breite und liess daneben 44 Prozent leer. Vorher
   stand sie in einer halben Spalte neben dem Film und riss dort ein Loch
   von 875 px; ueber die volle Breite gestellt riss sie es nur woanders.
   In zwei Spalten halbiert sich die Hoehe und die Breite wird benutzt.

   `columns` und nicht `grid`: Bei Spalten liest man erst die eine ganz
   hinunter, dann die naechste — 1 bis 4, dann 5 bis 7. Ein Raster wuerde
   1,2 nebeneinander setzen, und eine Reihenfolge, die man quer lesen muss,
   ist keine Reihenfolge mehr.

   break-inside ist Pflicht: Ohne die Zeile reisst ein Schritt zwischen
   Nummer und Text auseinander, und zwar nur manchmal — je nach Textlaenge.
   Ein Fehler, der von der Fensterbreite abhaengt, faellt beim Bauen nie auf.

   Erst ab 900 px: Darunter ist eine Spalte breiter als 66 Zeichen ohnehin
   nicht drin, und zwei nebeneinander waeren zwei zu schmale. */
@media (min-width: 900px) {
  .mb-schritte { columns: 2; column-gap: 42px; max-width: none; }
  .mb-schritte > li { break-inside: avoid; -webkit-column-break-inside: avoid; }
  .mb-text:has(> .mb-schritte) { max-width: none; }
}

/* Die zweite Gruppe der Schrittliste traegt dieselbe Farbe wie im Schaubild
   darueber. Das Schaubild faerbt 6 und 7 gruen („messen, ausrollen"), die
   Liste faerbte alle sieben blau — dieselben sieben Schritte, zwei
   Farbcodes. Wer die Zeichnung liest und dann die Liste, sucht die Gruppe
   und findet sie nicht.
   Die Zuordnung kommt aus den Daten (AB_GRUEN in s_bp.py) und nicht aus
   einem :nth-child(n+6): Eine Regel, die auf Positionen zaehlt, stimmt
   genau so lange, bis jemand einen Schritt einfuegt. */
.mb-schritte li.gruen::before { background: var(--GREEN); }

/* Das Sinnbild im Kasten steht ueber dem Titel — dieselbe Ordnung wie auf
   den Werkzeugkarten, die dem Anwender am besten gefallen: Bild, Titel,
   Text. Es ist kleiner als dort, weil ein Kasten die halbe Kartenbreite
   hat und ein Bild, das die Karte fuellt, den Text zur Bildunterschrift
   macht. */
.mb-paar .wz-bild { display: block; width: 100%; max-width: 108px; height: auto; margin: 0 0 10px; }

/* ══ DIE FRISTEN ══════════════════════════════════════════════════════════
   Neun Termine, chronologisch, als Systemkarten in drei Spalten. Keine
   eigene Kartenform: .public-card bringt Rahmen, Radius und Schatten mit,
   und ein zweiter Kartenstil auf derselben Seite ist genau die
   Uneinheitlichkeit, die hier zwei Runden lang weg sollte.

   Drei Spalten und nicht zwei wie die Punkteliste: Eine Frist trägt vier
   Zeilen, ein Punkt zwölf. In zwei Spalten stünden neun kurze Kästen in
   einer sehr langen Bahn.

   Bei 1000 px zwei, bei 700 px eine Spalte — die Umbrüche liegen dort, wo
   die Karte sonst schmäler wird als ihre Datumsmarke. */
/* Raster und Umbrüche kommen aus .kachel-raster — hier steht nur noch,
   was die Fristenreihe von der Punkteliste unterscheidet: nichts am
   Raster, alles an der Marke und am Verweis unten. */
/* Die Spalte trägt den Verweis an den unteren Rand: Bei Karten
   unterschiedlicher Texthöhe stünden die Pfeile sonst auf drei Höhen und
   die Reihe sähe schief aus. */
.fristen-zeile { display: flex; flex-direction: column; }
/* ── DER KOPF EINER KACHEL ────────────────────────────────────────────
   Anwender, 07.09.2026, mit dem Abzug der Punkteliste: „Auch dies in die
   gleichen Kacheln wie oben."

   Die Fristen hatten die Anatomie, die Punkte nicht: oben eine Marke, dann
   die Überschrift auf einer eigenen Zeile, darunter der Satz. Ein Punkt
   trug seinen Titel FETT IM FLIESSTEXT und die Herkunft klein hinterher —
   dieselbe Kachel, zwei Bauarten.

   Kopf und Marke stehen deshalb in eigenen Klassen und werden von beiden
   benutzt. Ein zweiter Satz Werte für dieselbe Sache ist genau das, was
   heute Vormittag schon einmal aufgeräumt wurde. */
.kachel-kopf { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kachel-marke {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .7rem; font-weight: 800; letter-spacing: .02em;
  background: color-mix(in srgb, var(--INK) 6%, transparent); color: var(--MUTED);
}
/* Die Herkunft steht in den Daten klein („meine Position", „Branchenradar")
   — sie ist dort ein Satzteil und hier eine Marke. GROSSBUCHSTABEN wären
   die naheliegende Lösung und die falsche: Die Fristen darüber tragen
   „gilt seit 1. Juni 2026" in normaler Schreibung, und zwei Schreibungen
   in derselben Marke sind wieder zwei Bauarten. */
.kachel-marke::first-letter { text-transform: uppercase; }
.kachel-marke--blau {
  background: color-mix(in srgb, var(--BLUE) 12%, transparent); color: var(--BLUE-D);
}
/* Was bereits gilt, tritt farblich zurück — es ist kein Termin mehr,
   sondern eine Tatsache. Weglassen wäre falsch: Drei der neun Fristen sind
   in Kraft, und wer sie nicht sieht, hält sie für Zukunft. */
/* Umgedreht seit der gemeinsamen Marke: Grau ist die Vorgabe, Blau die
   Auszeichnung. Vorher war es andersherum, und die Vorgabe war damit die
   auffälligere von beiden. */
.fristen-zeile .link-arrow { margin-top: auto; padding-top: 12px; }

/* ══ EIN KASTEN FÜR DIE GANZE SEITE ═══════════════════════════════════════
   Anwender, 07.09.2026: „Ich möchte ein einheitliches Layout auf der Seite."

   NACHGEZÄHLT STATT GESCHÄTZT. Die Portalseiten (Start, Radar, Themen, die
   Werkzeugübersicht) sind bereits einheitlich: .public-card mit 20 px
   Radius und 22 px Polster. Die fünfundzwanzig Rechner sind es nicht — sie
   sind aus dem Portal übernommen und bringen je 8 bis 25 KB eigenes CSS
   mit. Gemessen im Browser über alle Werkzeugseiten:

     Radius    16 · 20 · 22 · 24 · 28   (fünf)
     Polster   14 · 16 · 18 · 20 · 22 · 24 · 26 · 28   (acht)

   Und dieselbe Klasse trägt nicht überall dasselbe: .tool-card steht auf
   fünfzehn Seiten mit 22/26, auf zwei mit 24/28 und auf einer mit 24/24.
   Das ist kein Stil, das ist Streuung — und `--R: 20px` trägt im Portal
   sogar den Kommentar „Einheitlicher Border-Radius für Cards".

   WARUM DIESE STELLE UND NICHT FÜNFUNDZWANZIG DATEIEN: site.css wird NACH
   dem eigenen <style> jeder Werkzeugseite geladen. Eine Regel hier gewinnt
   also, ohne dass fünfundzwanzig gewachsene Rechner angefasst werden — und
   ein Rechner, den man anfasst, ist ein Rechner, den man nachrechnen muss.

   ZWEI POLSTER UND NICHT EINS: Eine Inhaltskarte trägt 22 px wie im
   Portal, eine Ergebniskachel 18. Der Unterschied ist eine Rolle und keine
   Laune — eine Kennzahl in einer Kachel von 22 px Polster steht in einem
   Rahmen statt in einer Kachel. Zwei Werte sind ein System, acht sind
   keines.

   WAS BEWUSST BLEIBT: .container trägt auf drei Werkzeugseiten Radius und
   Schatten und ist damit eine Karte — auf allen anderen Seiten ist es der
   Seitenrahmen. Derselbe Name für zwei Dinge; das gehört auseinander
   sortiert und nicht mit einer Zeile überschrieben, die überall greift. */
.tool-card, .info-card, .plan, .dash, .xpl, .g-modalcard, .g-panel,
.decision-card, .di-card, .marge-card, .film {
  border-radius: var(--R); padding: 22px;
}
.result-card, .rcard, .fact-card, .compare-card, .g-stat, .abc-stat, .abc-card {
  border-radius: var(--R); padding: 18px;
}
/* Der Film trägt seinen Fuß knapper als seinen Kopf — die Bildunterschrift
   sitzt sonst zu tief. Das ist die einzige Ausnahme, und sie steht hier,
   damit sie nicht als vergessene Zeile gelesen wird. */
.film { padding-bottom: 18px; }
/* Zwei Seiten setzen sich über die Regel darüber hinweg, und zwar aus zwei
   verschiedenen Gründen — beide gemessen, nicht geraten:

   co2e.html schreibt den Radius an einer ID fest (`#co2e-dash`). Eine ID
   schlägt jede Klasse; dieselbe ID hier gewinnt, weil site.css später
   geladen wird.

   cmr.html trägt einen ZWEITEN <style>-Block im Körper, also NACH site.css.
   Bei gleicher Spezifität gewinnt der spätere — deshalb `body .xpl` statt
   `.xpl`.

   Beides sind Ausnahmen und keine Lösung: Die saubere Fassung nähme den
   Radius dort heraus, wo er steht. Das ist ein Eingriff in zwei gewachsene
   Rechner, und den macht man nicht nebenbei mit einer Layoutänderung. */
#co2e-dash, body .xpl { border-radius: var(--R); padding: 22px; }


/* ══ DIE MATRIX ═══════════════════════════════════════════════════════════
   Wirkung gegen Horizont, neun Felder. Sie steht im Raster der Kacheln —
   drei Spalten sind genau die drei Horizonte, und beim Umbruch auf dem
   Telefon trägt jedes Feld seine beiden Marken selbst. Ein Raster, dessen
   Bedeutung nur aus der Spaltenposition kommt, ist auf einer Spalte weg. */
.matrix-zahl {
  margin: 6px 0 0; font-size: 2.1rem; font-weight: 800; line-height: 1;
  letter-spacing: -.03em; color: var(--INK);
}
/* Ein leeres Feld bleibt STEHEN und wird still. Wegzulassen wäre bequemer
   und falsch: Dass in „langfristig, geringe Wirkung" nur ein Punkt liegt
   und in „kurzfristig, stark" zwanzig, ist die Aussage der Matrix. Ein
   Raster mit Lücken erzählt sie nicht. */
.matrix-feld--leer { opacity: .5; }
.matrix-feld--leer .matrix-zahl { color: var(--MUTED); }
.matrix-feld .link-arrow { margin-top: auto; padding-top: 12px; }

/* Die Wirkung ist farbig, der Horizont nicht: Zwei gleich laute Marken
   nebeneinander sagen nicht, welche zuerst zählt. */
.kachel-marke--stark { background: color-mix(in srgb, var(--BLUE) 12%, transparent); color: var(--BLUE-D); }
.kachel-marke--gering { opacity: .72; }

/* Die Herkunft steht jetzt UNTER dem Satz und nicht mehr als Marke im
   Kopf: Dort stehen seit dem 07.09.2026 Wirkung und Horizont, und drei
   Marken nebeneinander sind eine Zeile, die niemand liest. Klein und
   still — sie trägt den Punkt, sie ist nicht der Punkt. */
.radar-punkt .radar-quelle {
  margin: 10px 0 0; font-size: .74rem; font-weight: 700;
  letter-spacing: .04em; color: var(--MUTED);
}

/* ══ DAS FENSTER HINTER „WEITERLESEN" ═════════════════════════════════════
   Anwender, 07.09.2026, mit rot durchgestrichenem Abzug: „Alle Boxen gleich
   groß. Bei weiterlesen wird die Box groß in der Mitte mit allen Inhalten,
   um einiges größer, füllt ca. 75 % des Bildschirms aus, kann mit X
   geschlossen werden."

   Vorher zog ein aufgeklappter Eintrag seine ganze Rasterzeile mit —
   1.400 px hoch, zwei leere Kacheln daneben. Das ist keine Einstellung,
   die man ändert: Ein Aufklapper im Raster IST Teil der Zeile. */
.radar-fenster {
  /* `inset: 0` UND `margin: auto` — die Voreinstellung des Browsers zentriert
     ein <dialog> nur, solange man seine Groesse nicht anfasst. Mit width und
     max-height stand es oben links. */
  inset: 0; margin: auto;
  width: min(920px, 75vw); max-width: none; max-height: 78vh;
  padding: 0; border: 1px solid var(--LINE); border-radius: var(--R);
  background: var(--CARD); color: var(--INK);
  box-shadow: 0 24px 60px rgba(15, 23, 42, .18);
  overflow: hidden;
}
.radar-fenster::backdrop { background: rgba(15, 23, 42, .45); }
/* Der Kopf bleibt stehen, der Inhalt rollt darunter: Bei einem Eintrag von
   1.400 px wäre ein mitrollendes X nach zwei Bildschirmhöhen weg. */
.radar-fenster__kopf {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: flex-start; gap: 16px;
  padding: 22px 22px 14px; background: var(--CARD);
  border-bottom: 1px solid var(--LINE);
}
.radar-fenster__titel {
  margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.3;
}
.radar-fenster__zu {
  flex: none; margin-left: auto; width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--LINE); border-radius: 999px;
  background: var(--CARD); color: var(--MUTED);
  font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.radar-fenster__zu:hover { color: var(--INK); border-color: var(--INK); }
.radar-fenster__zu:focus-visible { outline: 2px solid var(--BLUE); outline-offset: 2px; }
.radar-fenster__inhalt { padding: 4px 22px 22px; overflow-y: auto; max-height: calc(78vh - 74px); }
/* Im Fenster gelten dieselben Absatzregeln wie in der Kachel — sie hängen
   an .radar-punkt, und dort steht der Inhalt jetzt nicht mehr. */
.radar-fenster__inhalt .radar-offen,
.radar-fenster__inhalt .radar-praxis,
.radar-fenster__inhalt .radar-ausloeser { margin: 12px 0 0; font-size: .95rem; line-height: 1.65; color: var(--INK); }
.radar-fenster__inhalt .radar-meta { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.radar-fenster__inhalt .radar-zeile {
  margin: 14px 0 0; padding-left: 11px; border-left: 2px solid var(--LINE);
  font-size: .9rem; line-height: 1.6; color: var(--MUTED);
}
.radar-fenster__inhalt .radar-wege {
  margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--LINE);
  display: flex; flex-direction: column; gap: 8px;
}
@media (max-width: 720px) {
  .radar-fenster { width: 92vw; max-height: 88vh; }
  .radar-fenster__inhalt { max-height: calc(88vh - 74px); }
}

/* ── ALLE BOXEN GLEICH GROSS ──────────────────────────────────────────────
   `grid-auto-rows: 1fr` gibt jeder Zeile dieselbe Höhe — nicht nur den
   Kacheln nebeneinander, sondern allen. Ohne die Zeile ist jede Zeile so
   hoch wie ihre längste Kachel, und ein Raster mit fünf verschiedenen
   Zeilenhöhen liest sich als Stapel, nicht als Raster. */
.kachel-raster { grid-auto-rows: 1fr; }

/* ══ DIE MATRIX ALS ZEICHNUNG ═════════════════════════════════════════════
   Anwender, 07.09.2026: „Die Matrix grafischer und animierter darstellen."

   Die Blasen laufen nacheinander ein — von links oben, also von der
   stärksten Wirkung im kürzesten Horizont. Der Versatz ist klein (70 ms):
   Bei neun Feldern ist der Einlauf nach 0,6 Sekunden vorbei, und wer scrollt,
   sieht ihn ganz. Ein Versatz, der schön aussieht und den letzten Punkt
   verpasst, ist Zierde. */
.matrix-svg { width: 100%; height: auto; display: block; }
.m-achse { stroke: var(--LINE); stroke-width: 1.5; }
.m-zeile, .m-spalte {
  font-family: inherit; font-size: 13px; font-weight: 700;
  letter-spacing: .01em; fill: var(--MUTED);
}
.m-blase { fill: var(--BLUE); }
/* Die Wirkung trägt die Farbe, wie an den Marken der Kacheln: stark ist
   satt, gering ist still. Drei Blautöne und kein Ampelbild — Rot hieße
   „Gefahr", und eine geringe Wirkung ist keine. */
.m-blase--stark  { fill: var(--BLUE); }
.m-blase--mittel { fill: color-mix(in srgb, var(--BLUE) 55%, #fff); }
.m-blase--gering { fill: color-mix(in srgb, var(--BLUE) 28%, #fff); }
.m-leer { fill: none; stroke: var(--LINE); stroke-width: 2; stroke-dasharray: 4 5; }
.m-zahl {
  font-family: inherit; font-size: 17px; font-weight: 800;
  fill: #fff; letter-spacing: -.02em; pointer-events: none;
}
/* Auf den hellen Blasen steht Weiß nicht mehr; ab „mittel" schreibt die
   Zahl in der Schriftfarbe der Seite. */
.m-blase--mittel + .m-zahl, .m-blase--gering + .m-zahl { fill: var(--BLUE-D); }
.m-zahl--leer { fill: var(--MUTED); font-size: 14px; }
.m-feld a { cursor: pointer; }
.m-feld a:hover .m-blase { filter: brightness(1.08); }
.m-feld a:focus-visible .m-blase { outline: none; stroke: var(--BLUE-D); stroke-width: 3; }
/* Einlauf: von der Mitte des eigenen Feldes, nicht von der Ecke der Fläche.
   `transform-box: fill-box` ist dafür Pflicht — ohne sie bezieht sich
   `transform-origin: center` auf das Wurzel-SVG, und die Blasen kommen
   quer über das Bild geflogen. */
.m-feld { opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: m-auftritt .45s cubic-bezier(.2, .7, .3, 1) forwards; animation-delay: var(--d, 0s); }
@keyframes m-auftritt { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
/* Das stärkste Feld atmet weiter — ein Hinweis, keine Kirmes: eine
   Bewegung auf der ganzen Seite, und die sitzt dort, wo es drückt. */
.m-feld[data-h="kurz"][data-w="stark"] .m-blase {
  animation: m-atmen 3.8s ease-in-out 1s infinite; transform-box: fill-box; transform-origin: center;
}
@keyframes m-atmen { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  .m-feld { opacity: 1; animation: none; }
  .m-feld[data-h="kurz"][data-w="stark"] .m-blase { animation: none; }
}