/* comparxis Website — Layout auf Basis von Styleguide.css */

/* Die Gesamthöhe der Kopfzeile an einer Stelle: 66 + 48 plus je eine
   Trennlinie. Alles, was unter der fixierten Leiste stehenbleiben muss –
   der Kopf des Direktvergleichs, das Sichtprobe-Band, jedes Sprungziel –
   rechnet damit, statt die Zahl an sechs Stellen zu wiederholen. */
:root { --cx-kopf: 116px; }

html {
  /* Sprungziele nicht unter die Kopfzeile schieben: gilt für Anker, für
     scrollIntoView und für den Tastaturfokus gleichermaßen. Deshalb hier am
     Scrollbereich und nicht als scroll-margin an jedem einzelnen Ziel. */
  scroll-padding-top: calc(var(--cx-kopf) + 16px);
  /* PLATZ FÜR DIE SCROLLLEISTE IMMER RESERVIEREN, auch wenn die Seite kurz
     genug ist, um ohne auszukommen. Sonst wird das Fenster in dem Moment um
     die Leistenbreite breiter – auf Windows rund 15 px – und alles Zentrierte
     rutscht um die Hälfte davon zur Seite. Beim Wechsel zwischen einer langen
     und einer kurzen Seite sprang die ganze Oberfläche deshalb seitlich hin
     und her. Auf Systemen mit überlagernden Leisten (macOS-Standard) ändert
     diese Zeile nichts, weil dort ohnehin keine Breite verlorengeht. */
  scrollbar-gutter: stable;
}

main { max-width: 1200px; margin: 0 auto; padding: 0 24px 80px; }

/* --- Kopfzeile: zwei Ebenen ----------------------------------------------
   Oben die Marke mit Suche und Konto, darunter das Navigationsband. Vorher
   teilten sich Menü, Suche und Konto-Kachel eine Zeile; weil nur die
   Navigation schrumpfen durfte, wurde ab etwa 1.150 px immer die Suche
   abgeschnitten. Mit eigener Zeile kann das nicht mehr passieren – und die
   Leiste verträgt weitere Menüpunkte, ohne dass rechts etwas verlorengeht.

   SIE BLEIBT STEHEN. Der Grund ist nicht Bequemlichkeit, sondern ein
   sichtbarer Sprung: Beim Seitenwechsel setzt die Ansicht auf 0 zurück.
   Solange die Leiste mitscrollte, war sie im gescrollten Zustand ein Stück
   nach oben gewandert – wer aus der 24.000 px langen Herstellerliste heraus
   auf „Bereiche“ klickte, sah Logo und Menüband um bis zu 116 px wegrutschen.
   Fixiert stehen beide immer an derselben Stelle. Der Hintergrund muss dabei
   deckend sein, sonst läuft der Inhalt sichtbar durch die Leiste. */
.cx-header {
  display: block;
  position: sticky; top: 0; z-index: 50;
  background: var(--cx-carbon);
}
.cx-kopf-marke { border-bottom: 1px solid var(--cx-border); }
.cx-kopf-navband { background: var(--cx-graphite); border-bottom: 1px solid var(--cx-border); }
.cx-kopf-innen {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 20px;
}
.cx-kopf-marke .cx-kopf-innen { height: 66px; }
.cx-kopf-navband .cx-kopf-innen { height: 48px; gap: 0; }
/* Querfassung statt gestapelt: Bei 40 px Gesamthöhe wäre die Wortmarke im
   gestapelten Logo noch rund 7 px hoch – lesbar ist das nicht. */
.cx-logo { height: 40px; width: auto; display: block; }
.cx-logo-link { flex: none; display: block; line-height: 0; }

/* --- Suche: ein Feld, kein Knopf ------------------------------------------
   Getippt wird trotzdem in der Palette – das hier ist ein <button>, der so
   aussieht wie ein Feld. Ein echtes Eingabefeld hätte zwei Sucheingaben auf
   derselben Seite ergeben (die zweite steht in der Herstellerliste) und die
   Frage aufgeworfen, welche wofür zuständig ist. */
.cx-suchfeld {
  flex: 1 1 auto; min-width: 0; max-width: 460px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--cx-font-body); font-size: 14.5px; text-align: left;
  padding: 9px 14px; border-radius: var(--cx-radius-sm);
  color: var(--cx-steel); background: var(--cx-graphite);
  border: 1px solid var(--cx-border);
  transition: border-color .15s, color .15s;
}
.cx-suchfeld:hover { border-color: var(--cx-blue); color: var(--cx-text); }
.cx-suchfeld-text {
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.cx-kopf-navband .cx-suchfeld { background: var(--cx-carbon); }

/* --- Konto als Aufklappmenü -----------------------------------------------
   Zugeklappt 38 px statt der 175 px der alten Kachel; aufgeklappt zeigt es
   mehr als vorher. Der Anmeldestatus bleibt die Antwort auf „warum sehe ich
   hier keine Konditionen?“ – deshalb steht er ganz oben in der Karte und
   nicht als weiterer Menüpunkt daneben. */
.cx-konto { position: relative; flex: none; }
.cx-konto-knopf-haupt {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  font-family: var(--cx-font-body); color: var(--cx-text);
  background: var(--cx-graphite); border: 1px solid var(--cx-border);
  border-radius: 999px; padding: 5px 12px 5px 5px;
  transition: border-color .15s;
}
.cx-konto-knopf-haupt:hover { border-color: var(--cx-blue); }
.cx-konto.offen .cx-konto-knopf-haupt { border-color: var(--cx-blue); }
.cx-avatar {
  position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  font-family: var(--cx-font-display); font-size: 12px; font-weight: 700;
  background: var(--cx-gradient-flaeche);
}
/* Der Statuspunkt sitzt auf dem Avatar statt daneben – er gehört zur Person,
   nicht in die Zeile. Grün heißt hier „angemeldet“, nicht „gut“. */
.cx-avatar::after {
  content: ''; position: absolute; right: -1px; bottom: -1px;
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--cx-carbon); background: var(--cx-steel);
}
.cx-avatar.an::after    { background: #3FD68C; }
.cx-avatar.probe::after { background: var(--cx-warn); }
.cx-avatar.aus { background: var(--cx-border); color: var(--cx-steel); }
.cx-konto-kurz { display: grid; text-align: left; line-height: 1.2; min-width: 0; }
.cx-konto-kurz b { font-size: 13.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.cx-konto-kurz small { font-size: 11.5px; color: var(--cx-steel); }
.cx-konto-pfeil { font-size: 13px; color: var(--cx-steel); transition: transform .15s; }
.cx-konto.offen .cx-konto-pfeil { transform: rotate(180deg); }
/* Zugeklappt muss man sehen, dass etwas wartet – sonst verstiege das Menü
   genau die Meldung, für die das Neuigkeiten-Feld gedacht ist. */
.cx-konto-marke {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; flex: none;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
  background: var(--cx-blue-flaeche); color: #fff;
}
/* [hidden] muss ausdrücklich stehen: Das Attribut wirkt über display:none aus
   dem Browser-Standard, und jede eigene display-Regel gewinnt dagegen – ohne
   diese Zeile stünde die Karte dauerhaft offen. */
.cx-konto-karte[hidden] { display: none; }
.cx-konto-karte {
  position: absolute; right: 0; top: calc(100% + 9px); width: 310px; z-index: 40;
  display: grid; gap: 12px; padding: 16px 18px;
  background: var(--cx-graphite); border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius); box-shadow: 0 18px 44px rgba(0,0,0,.5);
}
html[data-theme="light"] .cx-konto-karte { box-shadow: 0 16px 40px rgba(20,23,28,.14); }
.cx-konto-status { display: flex; align-items: flex-start; gap: 10px; }
.cx-konto-punkt {
  flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 5px;
}
/* Grün heißt hier tatsächlich „es läuft“ – der einzige Ort auf der Seite, an
   dem eine Ampelfarbe einen Zustand meldet und nicht eine Bewertung. */
.cx-konto-punkt.an  { background: #3FD68C; box-shadow: 0 0 0 3px rgba(63,214,140,.18); }
.cx-konto-punkt.aus { background: var(--cx-steel); box-shadow: 0 0 0 3px rgba(139,146,155,.15); }
.cx-konto-text { display: grid; gap: 1px; min-width: 0; }
.cx-konto-text b { font-size: 14px; }
.cx-konto-mail {
  font-size: 12.5px; color: var(--cx-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cx-konto-rolle { font-size: 11.5px; color: var(--cx-steel); }
.cx-konto-darstellung {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 12px; border-top: 1px solid var(--cx-border);
}
.cx-konto-label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--cx-steel); }
.cx-konto-knoepfe { display: flex; gap: 8px; }
.cx-konto-knopf {
  flex: 1; text-align: center; cursor: pointer; white-space: nowrap;
  font-family: var(--cx-font-body); font-size: 13px; font-weight: 600;
  padding: 8px 12px; border-radius: var(--cx-radius-sm);
  color: var(--cx-text-muted); background: var(--cx-carbon);
  border: 1px solid var(--cx-border);
  transition: border-color .15s, color .15s;
}
.cx-konto-knopf:hover { border-color: var(--cx-blue); color: var(--cx-text); }
.cx-konto-knopf.an { border-color: var(--cx-blue); color: var(--cx-blue-light); }
.cx-konto-knopf.aus:hover { border-color: #E06A6A; color: #E06A6A; }
html[data-theme="light"] .cx-konto-knopf.an { color: var(--cx-blue-deep); }
html[data-theme="light"] .cx-konto-knopf.aus:hover { border-color: #C0392B; color: #C0392B; }

/* min-width/overflow statt fester Breite: Sobald die Menüpunkte nicht mehr in
   die Zeile passen, scrollt die LEISTE in sich selbst. Ohne das schiebt sie die
   ganze Seite seitlich – zwischen rund 730 und 1050 px war das der Fall, also
   auf jedem Tablet im Hochformat und in jedem halbbreiten Fenster. */
.cx-nav {
  display: flex; align-items: center; gap: 2px;
  min-width: 0; max-width: 100%; height: 100%;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.cx-nav::-webkit-scrollbar { display: none; }
/* Im eigenen Band tragen die Punkte ihre Fläche selbst, statt an einer
   Unterkante zu hängen: Die Bandkante darunter übernimmt die Trennung, eine
   zweite Linie am aktiven Punkt wäre eine Linie zu viel. */
.cx-nav a {
  color: var(--cx-text-muted); font-weight: 600; font-size: 15px;
  padding: 7px 12px; border-radius: var(--cx-radius-sm);
  white-space: nowrap; transition: background .13s, color .13s;
}
.cx-nav a:hover { color: var(--cx-text); background: var(--cx-carbon); }
.cx-nav a.active { color: var(--cx-text); background: var(--cx-carbon); }
/* Trennt öffentlich von intern. Er steht auch dann im Markup, wenn die
   internen Punkte ausgeblendet sind – dann hinge er allein am Ende, deshalb
   blendet ihn die Regel darunter mit aus. */
.cx-nav-trenn {
  flex: none; width: 1px; height: 20px; margin: 0 10px;
  background: var(--cx-border);
}
.cx-nav-trenn:last-child { display: none; }
#nav-count { color: var(--cx-accent); font-size: 13px; }

/* --- Kopfzeile auf dem Handy ----------------------------------------------
   Die Suche wird zum Symbol und der Konto-Knopf verliert seinen Text: Für
   beides nebeneinander ist bei 375 px kein Platz, und das Logo soll bleiben.
   Kein Menü hinter drei Strichen – bei fünf Punkten versteckt das genau die
   Navigation, um die es geht; das Band scrollt stattdessen seitlich. */
@media (max-width: 720px) {
  /* 58 + 44 plus die beiden Trennlinien – die Leiste ist hier flacher, also
     rückt auch alles darunter Fixierte entsprechend höher. */
  :root { --cx-kopf: 104px; }
  .cx-kopf-innen { padding: 0 16px; gap: 12px; }
  .cx-kopf-marke .cx-kopf-innen { height: 58px; }
  .cx-kopf-navband .cx-kopf-innen { height: 44px; padding: 0 16px; }
  .cx-logo { height: 30px; }
  .cx-suchfeld {
    flex: none; margin: 0 0 0 auto; max-width: none; width: 40px;
    justify-content: center; padding: 9px 0;
  }
  .cx-suchfeld .cx-suchfeld-text, .cx-suchfeld .cx-suche-kbd { display: none; }
  .cx-konto-kurz { display: none; }
  .cx-konto-knopf-haupt { padding: 5px 8px 5px 5px; gap: 5px; }
  /* Die Karte hängt sonst halb außerhalb des Bildschirms. */
  .cx-konto-karte { width: min(310px, calc(100vw - 32px)); }
}

/* --- Hero --- */
.cx-hero { padding: 40px 0 16px; }
.cx-hero h1 { font-size: clamp(34px, 5vw, 52px); }
.cx-hero-sub { max-width: 660px; font-size: 18px; }
.cx-toolbar { display: flex; gap: var(--cx-gap); margin-top: 20px; flex-wrap: wrap; }
.cx-toolbar input {
  flex: 1; min-width: 260px; max-width: 520px;
  background: var(--cx-graphite); color: var(--cx-text);
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius-sm);
  padding: 12px 18px; font-family: var(--cx-font-body); font-size: 16px;
}
.cx-toolbar input:focus { outline: none; border-color: var(--cx-blue); }
.cx-toolbar select {
  background: var(--cx-graphite); color: var(--cx-text);
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius-sm);
  padding: 12px 16px; font-family: var(--cx-font-body); font-size: 15px;
}
.cx-treffer { font-size: 13.5px; color: var(--cx-steel); margin-top: 14px; }
.cx-treffer b { color: var(--cx-text); }

/* --- Werkzeugleiste der Herstellerliste ----------------------------------
   Vorher standen 17 Bereichs- und 45 Plattform-Schaltflächen offen
   untereinander – rund 880 px, bevor der erste Hersteller zu sehen war.
   Jetzt zwei Aufklappknöpfe, Suche, Sortierung und der Ansicht-Umschalter in
   EINER Zeile. Sie bleibt beim Scrollen unter der Kopfzeile stehen, damit die
   Auswahl auf einer 24.000 px langen Seite jederzeit erreichbar ist. */
.cx-wz {
  position: sticky; top: var(--cx-kopf); z-index: 18;
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
  padding: 13px 0 12px; margin-top: 18px;
  background: var(--cx-carbon); border-bottom: 1px solid var(--cx-border);
}
/* KEIN eigener Positionierungsrahmen: Das Menü darunter soll sich an der
   ganzen Leiste ausrichten, nicht am schmalen Knopf. Bezugsrahmen ist damit
   .cx-wz – position:sticky wirkt dafür wie relative. */
.cx-wz-huelle { position: static; }
.cx-wz-knopf {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 10px 14px; border-radius: var(--cx-radius-sm);
  font: 600 14.5px var(--cx-font-body);
  border: 1px solid var(--cx-border); background: var(--cx-graphite);
  color: var(--cx-text-muted); transition: border-color .15s, color .15s;
}
.cx-wz-knopf:hover { border-color: var(--cx-blue); color: var(--cx-text); }
.cx-wz-knopf.hat { border-color: var(--cx-blue); color: var(--cx-text); }
.cx-wz-pfeil { color: var(--cx-steel); font-size: 11px; }
.cx-wz-n {
  background: var(--cx-blue-flaeche); color: #fff; border-radius: 99px;
  padding: 1px 7px; font-size: 11.5px;
}
/* Feste Breite, KEINE Prozentangabe: Bezugsrahmen ist der schmale Knopf
   daneben – 90 % davon wären rund 100 px und die Chips stünden einzeln
   untereinander. */
/* Über die volle Breite der Leiste statt in einer schmalen Säule: Bei 45
   Schwerpunkten passten in 560 px nur gut die Hälfte ins Bild, der Rest lag
   hinter einer Scrollleiste – man musste im Menü suchen, statt zu sehen.
   Über 1.200 px stehen alle auf einmal da. */
.cx-wz-menue {
  position: absolute; z-index: 40; left: 0; right: 0; top: 100%; margin-top: 7px;
  background: var(--cx-graphite); border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius); padding: 16px 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
}
html[data-theme="light"] .cx-wz-menue { box-shadow: 0 20px 50px rgba(20,23,28,.16); }
.cx-wz-menue[hidden] { display: none; }
.cx-wz-menue-kopf { font-size: 12.5px; color: var(--cx-steel); margin-bottom: 11px; }
/* Keine feste Deckelung mehr – über die volle Breite stehen selbst die 45
   Schwerpunkte in vier Zeilen. Die Begrenzung bleibt nur als Notbremse für
   sehr flache Fenster; im Alltag greift sie nicht. */
.cx-wz-menue-liste {
  display: flex; flex-wrap: wrap; gap: 8px;
  max-height: min(56vh, 420px); overflow-y: auto;
}
/* Kombinationen, die auf null Treffer führen, sind unbedienbar statt still
   ins Leere zu laufen. */
.cx-wz-leer { opacity: .32; cursor: not-allowed; }
.cx-wz-leer:hover { border-color: var(--cx-border); color: var(--cx-text-muted); }
.cx-wz-such {
  flex: 1 1 230px; min-width: 170px; max-width: 340px;
  background: var(--cx-graphite); color: var(--cx-text);
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius-sm);
  padding: 10px 14px; font-family: var(--cx-font-body); font-size: 14.5px;
}
.cx-wz-such:focus { outline: none; border-color: var(--cx-blue); }
.cx-wz-sort {
  background: var(--cx-graphite); color: var(--cx-text);
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius-sm);
  padding: 10px 13px; font-family: var(--cx-font-body); font-size: 14px;
}
.cx-wz-um {
  margin-left: auto; display: flex; padding: 3px;
  background: var(--cx-graphite); border: 1px solid var(--cx-border); border-radius: 99px;
}
.cx-wz-um button {
  border: 0; background: transparent; cursor: pointer; color: var(--cx-steel);
  font: 600 13.5px var(--cx-font-body); padding: 7px 14px; border-radius: 99px;
}
.cx-wz-um button:hover { color: var(--cx-text); }
.cx-wz-um button[aria-pressed="true"] { background: var(--cx-blue-flaeche); color: #fff; }
.cx-wz-aktiv { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 13px 0 0; }
.cx-wz-weg {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border: 0;
  padding: 5px 11px; border-radius: 99px; font: 600 13px var(--cx-font-body);
  background: rgba(30,123,232,.14); color: var(--cx-blue-light);
}
.cx-wz-weg:hover { background: rgba(30,123,232,.24); }
html[data-theme="light"] .cx-wz-weg { background: rgba(13,80,216,.10); color: var(--cx-blue-deep); }
.cx-wz-alles {
  background: transparent; border: 0; cursor: pointer; color: var(--cx-steel);
  font: 600 13px var(--cx-font-body); text-decoration: underline;
}
.cx-wz-alles:hover { color: var(--cx-text); }

/* --- Ein gesetzter Filter darf nicht nur in einer grauen Zahl stehen -------
   Bis 1.70 verriet sich die Einschränkung durch zwei unauffällige Zeilen:
   den Zähler und ein unterstrichenes „✕ Auswahl aufheben“ ganz rechts hinter
   dem Ansichtsumschalter. Wer über das Menü zurück auf „Hersteller“ kam, sah
   33 statt 201 Herstellern und nichts, was das erklärte.

   Die Zeile sitzt bewusst IN der Werkzeugleiste: Die klebt unter der
   Kopfzeile (position:sticky), und die Herstellerseite springt beim Betreten
   nicht an den Anfang – ein Hinweis weiter oben wäre also oft gar nicht im
   Bild. Ohne gesetzten Filter fällt die Zeile ganz weg; die Seite wird nur
   dann höher, wenn es etwas zu melden gibt.

   Die Tönung liegt ÜBER einer deckenden Fläche, nicht statt ihr: Die Leiste
   ist sticky, und durch ein halbtransparentes Blau liefe der Inhalt sichtbar
   hindurch. */
.cx-wz-gefiltert {
  background: linear-gradient(90deg, rgba(30,123,232,.13), transparent 62%),
              var(--cx-carbon);
}
html[data-theme="light"] .cx-wz-gefiltert {
  background: linear-gradient(90deg, rgba(13,80,216,.10), transparent 62%),
              var(--cx-carbon);
}
/* width:100% erzwingt im umbrechenden Flex-Container eine eigene Zeile. */
.cx-wz-fzeile {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  width: 100%; padding: 11px 0 1px; margin-top: 2px;
  border-top: 1px dashed var(--cx-border);
}
.cx-wz-fwort {
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 12.5px var(--cx-font-body); letter-spacing: .09em;
  text-transform: uppercase; color: var(--cx-blue-light);
}
html[data-theme="light"] .cx-wz-fwort { color: var(--cx-blue-deep); }
/* Ein Trichter im selben 24er-Raster wie die Bereichs- und Plattformzeichen. */
.cx-fzeichen { width: 15px; height: 15px; flex: none; }
.cx-wz-weg-x { opacity: .7; font-weight: 700; }
.cx-wz-falles { margin-left: auto; }

/* --- Wettbewerbs-Radar ---------------------------------------------------
   Der gewählte Hersteller in der Mitte, seine Wettbewerber ringsum. Die
   Knoten sitzen in Prozent statt in Pixeln, damit das Feld ohne Umrechnung
   im Skript mit der Fensterbreite mitgeht; aus dem Kreis wird dabei eine
   liegende Ellipse, was die Fläche besser nutzt. */
.cx-rad { margin-top: 20px; }
.cx-rad-kontext {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 4px 0 14px; font-size: 13px; color: var(--cx-steel);
}
.cx-rad-kontext b { color: var(--cx-text); }
.cx-rad-teilung { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; }
.cx-rad-such { position: relative; max-width: 340px; margin-bottom: 12px; }
.cx-rad-such input {
  width: 100%; background: var(--cx-graphite); color: var(--cx-text);
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius-sm);
  padding: 10px 14px; font-family: var(--cx-font-body); font-size: 14px;
}
.cx-rad-such input:focus { outline: none; border-color: var(--cx-blue); }
.cx-rad-tref-liste {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 5px);
  background: var(--cx-graphite); border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-sm); overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.42);
}
html[data-theme="light"] .cx-rad-tref-liste { box-shadow: 0 16px 40px rgba(20,23,28,.15); }
.cx-rad-tref {
  display: flex; width: 100%; gap: 9px; align-items: center; padding: 7px 11px;
  background: 0; border: 0; cursor: pointer; color: var(--cx-text);
  font: 600 13.5px var(--cx-font-body); text-align: left;
}
.cx-rad-tref:hover { background: rgba(30,123,232,.12); }
.cx-rad-tref .cx-logoplate { width: 62px; height: 26px; padding: 3px; flex: none; }
.cx-rad-tref-n { margin-left: auto; color: var(--cx-steel); font-size: 12px; font-weight: 600; }
.cx-rad-buehne {
  position: relative; height: 540px;
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius);
  background: radial-gradient(circle at 50% 50%, rgba(30,123,232,.09), transparent 62%),
              var(--cx-graphite);
}
.cx-rad-feld { position: absolute; inset: 0; }
.cx-rad-feld svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Ohne non-scaling-stroke würden die Linien mit dem verzerrten viewBox
   unterschiedlich dick – waagerechte dünner als senkrechte. */
.cx-rad-feld line {
  stroke: var(--cx-border); stroke-width: 1.5; vector-effect: non-scaling-stroke;
}
.cx-rad-feld line.an { stroke: var(--cx-blue); stroke-width: 2; }
.cx-rad-feld line.ab { opacity: .25; }

/* --- Was zwischen zwei Herstellern steht, in drei Zuständen ---------------
   Bis 1.71 sah jede Speiche gleich aus, weil im Kreis ohnehin nur stand, wen
   das Zentrum NENNT. Mit der frei bestückbaren Aufstellung kommen zwei
   weitere Fälle dazu: die einseitige Nennung und – der eigentliche Grund für
   diese Ansicht – gar keine Aussage.

   Die Farbwerte sind auf der Kartenfläche nachgerechnet, nicht geschätzt:
   Mint 11,55:1, Bernstein 9,00:1, Grau 5,00:1. Das Grau war zuerst dunkler
   (#5A626C) und kam nur auf 3,06:1 – als Linie gerade noch zulässig, als
   Matrixzeichen „·“ aber Text, und dafür verlangt die Norm 4,5:1. */
:root {
  --cx-bz-beide: #35E0DA;
  --cx-bz-eins:  #E5A83B;
  --cx-bz-keine: #7C848F;
}
html[data-theme="light"] {
  /* Auf Weiß erreicht #35E0DA nur 1,6:1 und #E5A83B 2,0:1 – dieselben
     Familien, abgedunkelt: Petrol 5,47:1, Bernstein 5,93:1, Grau 5,68:1. */
  --cx-bz-beide: #0F766E;
  --cx-bz-eins:  #8A5A00;
  --cx-bz-keine: #5F686F;
}
.cx-rad-feld line.st-beide { stroke: var(--cx-bz-beide); stroke-width: 2; }
.cx-rad-feld line.st-eins  { stroke: var(--cx-bz-eins); stroke-dasharray: 7 5; }
.cx-rad-feld line.st-keine { stroke: var(--cx-bz-keine); stroke-dasharray: 2 6; opacity: .75; }
/* Der Fokus schlägt den Zustand: Wer gerade angeklickt ist, muss sich vom
   Rest abheben, egal was zwischen ihm und dem Zentrum steht. */
.cx-rad-feld line.an { stroke: var(--cx-blue); stroke-width: 2.5; stroke-dasharray: none; opacity: 1; }

/* Angeheftet: steht im Ring, obwohl nichts hinterlegt ist. Ein Wort statt
   einer Vermutung – sonst hält man die fehlende Linie für einen Fehler. */
.cx-rad-lose {
  display: block; font: 700 10px var(--cx-font-body); letter-spacing: .1em;
  text-transform: uppercase; color: var(--cx-bz-keine); font-style: normal;
}
.cx-rad-node.angeheftet .cx-logoplate { border: 1px dashed var(--cx-bz-keine); }

.cx-rad-legende {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  font-size: 12.5px; color: var(--cx-text-muted); margin: 0 0 12px;
}
.cx-rad-legende span { display: inline-flex; align-items: center; gap: 7px; }
.cx-rad-ls { width: 26px; height: 0; border-top: 2px solid; flex: none; }
.cx-rad-ls.st-beide { border-color: var(--cx-bz-beide); }
.cx-rad-ls.st-eins  { border-color: var(--cx-bz-eins); border-top-style: dashed; }
.cx-rad-ls.st-keine { border-color: var(--cx-bz-keine); border-top-style: dotted; }
.cx-rad-node {
  position: absolute; transform: translate(-50%, -50%); width: 108px;
  background: 0; border: 0; padding: 0; cursor: pointer; color: var(--cx-text);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  transition: opacity .15s;
}
.cx-rad-node .cx-logoplate { width: 98px; height: 42px; padding: 6px; }
.cx-rad-node small {
  font: 600 11.5px var(--cx-font-body); color: var(--cx-steel);
  max-width: 108px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-rad-node:hover .cx-logoplate { outline: 1px solid var(--cx-blue); }
.cx-rad-node.an .cx-logoplate { outline: 2px solid var(--cx-blue); outline-offset: 1px; }
.cx-rad-node.an small { color: var(--cx-text); }
/* Gestrichelt = im Katalog (noch) ohne eigenen Steckbrief. Weggelassen wird
   niemand: Wer im Kundengespräch fällt, gehört ins Bild. */
.cx-rad-node.fremd .cx-logoplate { background: var(--cx-carbon); border: 1px dashed var(--cx-border); }
.cx-rad-node.fremd .cx-logo-ersatz { font-size: 10.5px; color: var(--cx-steel); }
.cx-rad-node.ab { opacity: .28; }
.cx-rad-node.unklar { opacity: .55; }
.cx-rad-mitte {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 156px; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.cx-rad-mitte .cx-logoplate {
  width: 146px; height: 60px; padding: 10px;
  border: 2px solid var(--cx-blue); box-shadow: 0 12px 34px rgba(30,123,232,.28);
}
.cx-rad-mitte small { font: 700 13px var(--cx-font-display); color: var(--cx-text); }
.cx-rad-panel {
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius);
  background: var(--cx-graphite); padding: 16px;
}
.cx-rad-panel .cx-logoplate { width: 140px; height: 52px; padding: 8px; }
.cx-rad-panel h3 { font: 700 18px var(--cx-font-display); margin: 11px 0 3px; }
.cx-rad-text { font-size: 13px; color: var(--cx-text-muted); line-height: 1.55; margin: 9px 0; }
.cx-rad-abgrenzung { border-top: 1px solid var(--cx-border); margin-top: 14px; padding-top: 12px; }
.cx-rad-abgrenzung h4 {
  margin: 0 0 7px; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cx-steel);
}
.cx-rad-vs { font: 700 14.5px var(--cx-font-display); }
.cx-rad-gegen { color: var(--cx-steel); font-weight: 600; }
.cx-rad-knoepfe { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.cx-rad-quelle { margin-top: 14px; font-size: 11.5px; color: var(--cx-steel); line-height: 1.5; }
/* Der Radar-Knopf auf der Karte: sichtbar, aber leiser als „Steckbrief →“ –
   der Steckbrief bleibt der Hauptweg. */
.cx-vendor-fuss-rechts { display: flex; align-items: center; gap: 10px; }
.cx-rad-ab {
  border: 1px solid var(--cx-border); background: transparent; cursor: pointer;
  color: var(--cx-steel); font: 600 12px var(--cx-font-body);
  padding: 4px 10px; border-radius: 99px;
}
.cx-rad-ab:hover { border-color: var(--cx-blue); color: var(--cx-text); }

@media (max-width: 900px) {
  .cx-rad-teilung { grid-template-columns: 1fr; }
  .cx-rad-buehne { height: 460px; }
  .cx-rad-ablage-kopf .cx-wz-alles { margin-left: 0; }
  .cx-mx-oben { height: 96px; width: 42px; }
  .cx-mx-zelle { width: 42px; height: 38px; }
  .cx-rad-node { width: 88px; }
  .cx-rad-node .cx-logoplate { width: 80px; height: 34px; padding: 4px; }
  .cx-rad-node small { max-width: 88px; font-size: 10.5px; }
  .cx-rad-mitte { width: 124px; }
  .cx-rad-mitte .cx-logoplate { width: 116px; height: 48px; }
}
@media (max-width: 720px) {
  /* Der Umschalter rutscht in die nächste Zeile, statt Suche und Sortierung
     zusammenzuquetschen – dieselbe Lehre wie bei der Kopfzeile. */
  .cx-wz-um { margin-left: 0; }
  .cx-wz-falles { margin-left: 0; }
  .cx-wz-such { max-width: none; }
  /* Keine eigene Breite mehr nötig: left/right ziehen das Menü ohnehin auf
     die Leistenbreite. Hier bekommt die Liste nur mehr Höhe, weil die Chips
     auf 375 px in viele Zeilen umbrechen. */
  .cx-wz-menue-liste { max-height: min(64vh, 460px); }
}

/* --- Hersteller-Grid --- */
.cx-grid {
  display: grid; gap: var(--cx-gap);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  margin-top: 24px;
}
.cx-vendor {
  display: flex; flex-direction: column; gap: 13px;
  color: inherit; font-weight: 400; transition: border-color .15s, transform .15s;
}
.cx-vendor:hover { border-color: var(--cx-blue); transform: translateY(-2px); color: inherit; }
/* Die Karte ist kein Link mehr, sondern enthält einen: Im Fuß sitzt jetzt
   neben „Steckbrief →“ auch der Radar-Knopf, und ein Knopf im Link wäre
   verschachtelte Interaktion – ungültiges Markup und mit der Tastatur nicht
   sauber bedienbar. Der Link deckt weiterhin die ganze obere Kartenfläche. */
.cx-vendor-link {
  display: flex; flex-direction: column; gap: 13px;
  color: inherit; font-weight: 400; text-decoration: none;
}
.cx-vendor-link:hover { color: inherit; }
.cx-vendor-link:focus-visible { outline: 2px solid var(--cx-blue); outline-offset: 3px; border-radius: 8px; }

/* Logo-Platte: helle Fläche, damit dunkle Logos auf dunklem Grund sichtbar sind */
.cx-logoplate {
  background: var(--cx-silver-light);
  border-radius: var(--cx-radius-sm);
  height: 84px; display: flex; align-items: center; justify-content: center;
  padding: 14px;
}
.cx-logoplate img { max-height: 52px; max-width: 80%; }
.cx-compare-col .cx-logoplate img { max-height: 36px; }

/* Logo-Ersatz für Gäste: Herstellerlogos erscheinen erst nach der Anmeldung.
   Der Name füllt die Platte, damit das Kartenraster nicht springt. */
.cx-logo-ersatz {
  font-family: var(--cx-font-display); font-weight: 600;
  font-size: 17px; line-height: 1.25; text-align: center;
  color: #6B7280; letter-spacing: .01em;
  padding: 0 8px; overflow-wrap: anywhere;
}
.cx-detail-head .cx-logo-ersatz { font-size: 20px; }
.cx-compare-col .cx-logo-ersatz { font-size: 14px; }

.cx-vendor h3 { margin: 0; font-size: 19px; }
.cx-vendor .cx-pos { font-size: 15px; flex: 1; margin: 0; }
.cx-vendor-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 14px; margin-top: 2px;
}
.cx-produkt-count { color: var(--cx-steel); }
.cx-mehr { color: var(--cx-blue-light); font-weight: 600; }

.cx-footnote { font-size: 13px; color: var(--cx-steel); margin-top: 44px; }
.cx-empty { color: var(--cx-steel); margin-top: 24px; }

/* Bereichs-Tags auf Herstellerkarten */
.cx-bereich-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-tag {
  font-size: 11.5px; color: var(--cx-silver);
  border: 1px solid var(--cx-border); border-radius: 99px;
  padding: 3px 10px; white-space: nowrap;
}

/* Portfolio-Gliederung auf der Herstellerseite */
.cx-bereich { margin-top: 26px; }
.cx-bereich:first-of-type { margin-top: 6px; }
.cx-bereich-titel {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 18px; margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--cx-border);
}
.cx-bereich-anzahl { font-family: var(--cx-font-body); font-size: 13px; font-weight: 400; color: var(--cx-steel); }

.cx-kontext { font-family: var(--cx-font-body); font-size: 14px; font-weight: 400; color: var(--cx-steel); }
.cx-hinweis-klein { font-size: 14px; margin-top: 12px; }
.cx-nutzen-card h2 { color: var(--cx-accent); }

/* Vergleich: Bereichs-/Hersteller-Auswahl */
.cx-select-label {
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cx-steel); margin: 26px 0 10px;
}
/* Die Beschriftungszeile trägt rechts den Zurücksetzen-Knopf. flex statt
   float, damit er auf schmalen Geräten unter die Beschriftung rutscht,
   statt in sie hineinzulaufen. */
.cx-select-label:has(.cx-vgl-reset) {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.cx-vgl-reset {
  font: inherit; font-size: 12px; letter-spacing: .06em; text-transform: none;
  color: var(--cx-steel); background: none; cursor: pointer;
  border: 1px solid var(--cx-border); border-radius: 999px;
  padding: 4px 12px; transition: color .15s, border-color .15s;
}
.cx-vgl-reset:hover, .cx-vgl-reset:focus-visible {
  color: var(--cx-text); border-color: var(--cx-steel);
}
.cx-chip-count { opacity: .65; font-weight: 400; margin-left: 4px; }
.cx-chip.disabled {
  opacity: .35; cursor: not-allowed; text-decoration: line-through;
}
.cx-cmp-produkt { margin-bottom: 14px; }
.cx-cmp-produkt p { margin: 3px 0 0; }
.cx-cmp-nutzen { color: var(--cx-steel); font-size: 13px; }
.cx-col-leer { opacity: .75; }

/* --- Hersteller-Detailseite --- */
.cx-breadcrumb { padding: 22px 0 0; font-size: 15px; }
.cx-detail-head {
  display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
  padding: 22px 0 6px;
}
.cx-detail-head .cx-logoplate { width: 200px; height: 92px; flex: none; }
.cx-detail-title { flex: 1; min-width: 260px; }
.cx-detail-title h1 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 6px; }
.cx-meta { font-size: 14.5px; color: var(--cx-steel); }

.cx-cmp-toggle {
  font-family: var(--cx-font-body); font-size: 15px; font-weight: 600;
  background: transparent; color: var(--cx-text);
  border: 1px solid #2A3038; border-radius: var(--cx-radius-sm);
  padding: 11px 22px; cursor: pointer;
}
.cx-cmp-toggle:hover { border-color: var(--cx-blue); color: var(--cx-blue-light); }
.cx-cmp-toggle.active { border-color: var(--cx-accent); color: var(--cx-accent); }

.cx-section { margin-top: 30px; }
.cx-section h2 { font-size: 24px; margin-bottom: 14px; }
.cx-section.cx-card h2 { font-size: 19px; }
.cx-positionierung { font-size: 17px; max-width: 860px; }

.cx-pitch {
  background: var(--cx-gradient-flaeche); border-radius: var(--cx-radius-sm);
  padding: 18px 22px; color: #fff; font-size: 16px;
  max-width: 860px; margin-top: 18px;
}
.cx-pitch .cx-eyebrow { display: block; color: rgba(255,255,255,.75); margin-bottom: 6px; }

/* Produkt-Karten */
.cx-produkt-grid {
  display: grid; gap: var(--cx-gap);
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.cx-produkt { display: flex; flex-direction: column; gap: 8px; }
.cx-produkt h3 { margin: 0; font-size: 17px; color: var(--cx-blue-light); }
.cx-produkt p { font-size: 15px; margin: 0; flex: 1; }
.cx-nutzen {
  border-top: 1px solid var(--cx-border); padding-top: 10px;
  font-size: 14.5px; color: var(--cx-text-muted);
}
.cx-nutzen .cx-eyebrow { display: block; font-size: 11px; margin-bottom: 3px; }

.cx-two-col {
  display: grid; gap: var(--cx-gap);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin-top: 30px;
}
.cx-two-col .cx-section { margin-top: 0; }

table.cx-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cx-table th {
  text-align: left; font-family: var(--cx-font-display); font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cx-steel);
  padding: 8px 12px 8px 0; border-bottom: 1px solid var(--cx-border);
}
.cx-table td {
  padding: 10px 12px 10px 0; border-bottom: 1px solid var(--cx-border);
  color: var(--cx-text-muted); vertical-align: top;
}
.cx-table td:first-child { color: var(--cx-text); font-weight: 600; min-width: 180px; }

ul.cx-list { margin: 0; padding-left: 20px; color: var(--cx-text-muted); font-size: 15px; }
ul.cx-list li { margin-bottom: 7px; }

/* --- Vergleichsseite --- */
.cx-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.cx-chip {
  font-family: var(--cx-font-body); font-size: 14.5px; font-weight: 600;
  background: var(--cx-graphite); color: var(--cx-text-muted);
  border: 1px solid var(--cx-border); border-radius: 99px;
  padding: 9px 18px; cursor: pointer;
}
.cx-chip:hover { border-color: var(--cx-blue); color: var(--cx-text); }
.cx-chip.active {
  background: var(--cx-gradient-flaeche); border-color: transparent; color: #fff;
}

.cx-compare-grid { display: grid; gap: var(--cx-gap); margin-top: 26px; }
.cx-compare-grid.n2 { grid-template-columns: repeat(2, 1fr); }
.cx-compare-grid.n3 { grid-template-columns: repeat(3, 1fr); }
.cx-compare-col .cx-logoplate { height: 66px; margin-bottom: 12px; }
.cx-compare-col h4 { font-family: var(--cx-font-display); font-size: 17px; margin: 0 0 10px; }
.cx-compare-col h4 a { color: var(--cx-text); }
.cx-compare-col h4 a:hover { color: var(--cx-blue-light); }
.cx-compare-col h5 {
  font-family: var(--cx-font-display); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--cx-steel); margin: 16px 0 6px;
}
.cx-compare-col p, .cx-compare-col li { font-size: 14px; }
.cx-compare-col p { margin: 0; }
.cx-compare-col ul { padding-left: 18px; margin: 0; color: var(--cx-text-muted); }
.cx-compare-col li { margin-bottom: 4px; }

@media (max-width: 900px) {
  .cx-compare-grid.n2, .cx-compare-grid.n3 { grid-template-columns: 1fr; }
}

/* --- Einstieg über Bereiche / Plattformen --- */
.cx-bereich-card h3 { margin: 0; font-size: 19px; }

/* Hinweis auf das, was der Gast nicht sieht. Bewusst als ruhige Zeile und nicht
   als Werbebanner: Sie erklärt eine Lücke, sie bewirbt nichts. */
.cx-teaser-rest {
  margin: 10px 0 0; font-size: 14px; color: var(--cx-steel);
}

/* Sinnbild je Bereich: Das Zeichen sitzt in einer eigenen Fläche, damit die
   Kachel auch beim Überfliegen erkennbar bleibt – siebzehn gleich gebaute
   Textblöcke unterscheidet das Auge sonst erst beim Lesen. */
.cx-bereich-kopf {
  display: flex; align-items: center; gap: 12px; margin-bottom: 4px;
}
.cx-bereich-zeichen {
  flex: none; width: 42px; height: 42px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(30, 123, 232, .13);
  border: 1px solid rgba(30, 123, 232, .22);
  color: var(--cx-blue-light);
}
.cx-bereich-zeichen svg { width: 23px; height: 23px; display: block; }
/* Beim Überfahren der Kachel zieht das Zeichen mit – es gehört zur Fläche,
   nicht als Verzierung daneben. */
.cx-bereich-card:hover .cx-bereich-zeichen {
  background: rgba(30, 123, 232, .2); border-color: rgba(30, 123, 232, .4);
}

/* Auf der Bereichsseite steht dasselbe Zeichen neben der Überschrift und
   bestätigt beim Wechsel, dass man im richtigen Bereich gelandet ist. */
.cx-bereich-titel { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cx-bereich-titel .cx-bereich-zeichen {
  width: 54px; height: 54px; border-radius: 14px;
}
.cx-bereich-titel .cx-bereich-zeichen svg { width: 30px; height: 30px; }

/* Hellmodus: Das helle Blau trägt auf hellem Grund nicht – gemessen 1,77:1 auf
   der gemischten Kartenfläche. Zeichen und Rahmen gehen deshalb auf Tiefblau. */
.cx-light .cx-bereich-zeichen {
  background: rgba(13, 80, 216, .09);
  border-color: rgba(13, 80, 216, .2);
  color: var(--cx-blue-deep);
}
.cx-light .cx-bereich-card:hover .cx-bereich-zeichen {
  background: rgba(13, 80, 216, .15); border-color: rgba(13, 80, 216, .35);
}
.cx-bereich-vendor { margin-bottom: 18px; }
.cx-bereich-vendor-head {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 14px;
}
.cx-bereich-vendor-head .cx-logoplate { width: 170px; height: 76px; flex: none; }
.cx-bereich-vendor-head > div { flex: 1; min-width: 220px; }
.cx-bereich-vendor-head h3 { margin: 0 0 2px; }
.cx-bereich-vendor-head h3 a { color: var(--cx-text); }
.cx-bereich-vendor-head h3 a:hover { color: var(--cx-blue-light); }
.cx-bereich-vendor-head .cx-pos { margin: 0; font-size: 14.5px; }

/* --- Footer --- */
.cx-footer {
  max-width: 1180px; margin: 40px auto 0; padding: 22px 28px 34px;
  border-top: 1px solid var(--cx-border);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  font-size: 13.5px; color: var(--cx-steel);
}
/* wrap: Mit dem fünften Eintrag („Version“) passte die Zeile auf dem Telefon
   nicht mehr – sie schob die GANZE Seite um 53 px seitlich, was auf jeder
   Unterseite zu sehen war, nicht nur in der Fußzeile. */
.cx-footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
.cx-footer a { color: var(--cx-text-muted); font-weight: 500; }
.cx-footer a:hover { color: var(--cx-blue-light); }

/* --- Hinweis-Banner (lokale Speicherung) --- */
.cx-consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
  background: var(--cx-graphite); border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius); padding: 14px 20px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.cx-consent p { margin: 0; flex: 1; min-width: 260px; font-size: 14px; }
.cx-consent .cx-btn { padding: 9px 22px; font-size: 14.5px; }

/* --- Interner Bereich / Login --- */
.cx-nav-intern { white-space: nowrap; }
.cx-intern-hinweis {
  font-size: 14.5px; color: var(--cx-steel);
  border: 1px dashed var(--cx-border); border-radius: var(--cx-radius-sm);
  padding: 12px 18px;
}
.cx-intern { border-color: var(--cx-accent); }
.cx-intern h3 { margin-top: 18px; font-size: 16px; }
.cx-intern-badge {
  font-family: monospace; font-size: 11.5px; color: var(--cx-accent);
  border: 1px solid var(--cx-accent); border-radius: 99px;
  padding: 3px 10px; vertical-align: middle; margin-left: 8px;
}
.cx-login-card { max-width: 420px; }
.cx-login-card label { display: block; font-weight: 600; margin-bottom: 8px; }
.cx-login-card input {
  width: 100%; box-sizing: border-box; margin-bottom: 14px;
  background: var(--cx-carbon); color: var(--cx-text);
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius-sm);
  padding: 11px 14px; font-size: 16px;
}
/* Mehrzeilig, für die Domainliste einer Partnerfirma: dieselbe Optik wie die
   einzeiligen Felder, damit die Maske nicht zusammengestückelt wirkt. */
.cx-login-card textarea {
  width: 100%; box-sizing: border-box; margin-bottom: 14px;
  background: var(--cx-carbon); color: var(--cx-text);
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius-sm);
  padding: 11px 14px; font-size: 15px; font-family: var(--cx-font-body);
  line-height: 1.5; resize: vertical;
}
/* Auswahlfelder gibt es hier seit dem Kontoantrag: Gesellschaft und gewünschte
   Rolle. Sie müssen dieselben Maße tragen wie die Eingabefelder darüber –
   ein <select> in Browser-Grundgestaltung neben einem gestalteten <input>
   sieht aus, als gehörte es nicht zum Formular. Der Aufklapp-Pfeil bleibt der
   des Browsers: Er ist auf jedem Gerät der, den die Leute kennen. */
.cx-login-card select {
  width: 100%; box-sizing: border-box; margin-bottom: 14px;
  background: var(--cx-carbon); color: var(--cx-text);
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius-sm);
  padding: 11px 14px; font-size: 16px; font-family: var(--cx-font-body);
}
.cx-login-card input:focus,
.cx-login-card select:focus,
.cx-login-card textarea:focus { outline: none; border-color: var(--cx-blue); }
/* Unveränderbar (die Kennung einer bestehenden Firma oder eines Hauses) soll
   auch so aussehen – gestrichelt statt durchgezogen, Schrift zurückgenommen. */
.cx-login-card input[readonly],
.cx-input[readonly], .cx-input:disabled {
  color: var(--cx-steel); background: none; border-style: dashed; cursor: default;
}
/* Erklärung gehört zum Feld darüber, nicht zum Label darunter – sonst kleben
   Hinweis und nächste Beschriftung aneinander. */
.cx-login-card .cx-pflege-hilfe { margin: -8px 0 16px; }
/* Ankreuzfeld: die Block- und Breitenregeln oben würden es auf Kartenbreite
   ziehen. Die Selektoren sind bewusst genauer statt mit !important. */
.cx-login-card .cx-check {
  display: flex; align-items: center; gap: 9px; margin: 4px 0 14px;
}
.cx-login-card .cx-check input {
  width: auto; margin: 0; accent-color: var(--cx-blue);
}
.cx-login-fehler { color: #ff7b7b; margin: 12px 0 0; }
.cx-logout { margin-left: 12px; padding: 8px 18px; font-size: 14px; }

/* --- Fenster „Passwort vergessen" ---------------------------------------
   Ein echtes <dialog>: Abdunkeln, Fokusfalle, Schließen mit Esc und die Ansage
   an Bildschirmleser bringt der Browser mit, hier kommt nur das Aussehen dazu.
   ::backdrop ist die Fläche dahinter – ohne eigene Regel bleibt sie in manchen
   Browsern fast durchsichtig, und dann steht das Fenster im Nichts. */
.cx-dialog {
  width: min(430px, calc(100vw - 32px)); box-sizing: border-box;
  background: var(--cx-graphite); color: var(--cx-text);
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius);
  padding: 26px 28px; box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.cx-dialog::backdrop { background: rgba(4, 6, 10, .72); }
.cx-dialog h2 { margin: 0 0 10px; font-size: 21px; }
.cx-dialog label { display: block; font-weight: 600; margin-bottom: 8px; }
.cx-dialog input {
  width: 100%; box-sizing: border-box; margin-bottom: 14px;
  background: var(--cx-carbon); color: var(--cx-text);
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius-sm);
  padding: 11px 14px; font-size: 16px;
}
.cx-dialog input:focus { outline: none; border-color: var(--cx-blue); }
.cx-dialog-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
.cx-dialog-meldung { margin: 0 0 14px; font-size: 14px; line-height: 1.5; }
.cx-dialog-meldung.ok { color: var(--cx-accent); }
.cx-dialog-meldung.fehler { color: #ff7b7b; }

/* --- Impressum --- */
.cx-impressum h3 { margin-top: 20px; font-size: 16px; }

/* --- Verwaltung / Partner --- */
.cx-verwaltung-form { max-width: 560px; }
.cx-btn-secondary.cx-mini { padding: 6px 12px; font-size: 13px; margin: 2px 4px 2px 0; }
.cx-hinweis-klein-inline { font-size: 12px; color: var(--cx-steel); font-weight: 400; }
.cx-intern-teil {
  margin-top: 26px !important; padding-top: 14px;
  border-top: 1px solid var(--cx-border); color: var(--cx-accent);
}
.cx-login-card .cx-btn-secondary { margin-left: 10px; padding: 11px 22px; font-size: 15px; }

/* --- Anmeldeseite: eine Kachel mit zwei Zuständen ------------------------
   Vorher standen Anmeldung und Kontoantrag als zwei gleich große Kacheln
   nebeneinander. Gleich groß heißt gleich wichtig, und weil nichts sagte,
   welche für wen ist, klickten Leute in die falsche. Jetzt steht die
   Anmeldung allein da; „Noch kein Konto“ tauscht sie gegen den Antrag. */
.cx-anmeldung { max-width: 470px; margin-top: 30px; }
.cx-anmeldung .cx-section { margin-top: 0; }
/* Die Karte darf hier die volle Spaltenbreite nehmen – die 420px aus
   .cx-login-card stammen aus der Zeit, als zwei davon nebeneinander standen. */
.cx-anmeldung .cx-login-card { max-width: none; }

/* Die beiden Knöpfe nebeneinander. flex-wrap ist kein Beiwerk: Unter etwa
   400px Kartenbreite passen sie nicht mehr in eine Zeile und müssen
   umbrechen, statt aus der Karte zu laufen. */
.cx-knopfzeile { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* Hebt die margin-left-Regel von .cx-login-card .cx-btn-secondary auf – hier
   macht den Abstand das gap, sonst steht er beim Umbruch an der falschen Stelle. */
.cx-knopfzeile .cx-btn-secondary { margin-left: 0; padding: 12px 22px; }

/* Die Erklärung gehört zum Knopf daneben, nicht zum Formular darüber. Der
   Trennstrich sagt das, ohne dass es jemand schreiben muss. */
.cx-anmelde-erklaerung {
  margin: 18px 0 0; padding-top: 15px; border-top: 1px solid var(--cx-border);
  font-size: 14px; color: var(--cx-text-muted); line-height: 1.55;
}
.cx-anmelde-erklaerung b { color: var(--cx-text); }

/* Der Rückweg aus dem Antragsformular. Steht ÜBER der Überschrift: Wer sich
   verklickt hat, sucht oben, nicht unten. */
.cx-zurueck-knopf {
  display: block; margin-bottom: 12px; text-decoration: none; font-weight: 600;
}
.cx-zurueck-knopf:hover { text-decoration: underline; }

/* --- Der dritte Weg: Systemhäuser ----------------------------------------
   Bernstein und nicht Rot: Hier zu landen ist kein Fehler, sondern ein
   anderer Fall – dieselbe Lesart wie beim „kein Angebot“-Hinweis im
   Vergleich. Der Knopf bleibt eine Umrandung, damit er neben dem gefüllten
   „Anmelden“ als das Nachrangige erkennbar ist. */
.cx-systemhaus {
  margin-top: 24px; padding: 16px 20px; border-radius: var(--cx-radius-sm);
  border: 1px solid var(--cx-border); border-left: 3px solid var(--cx-warn);
  background: var(--cx-graphite);
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
}
.cx-systemhaus-text { flex: 1 1 320px; font-size: 14px; color: var(--cx-text-muted); line-height: 1.55; }
.cx-systemhaus-text b { color: var(--cx-text); font-size: 15px; }
.cx-systemhaus-text > b { display: block; margin-bottom: 2px; }
.cx-systemhaus-marke {
  display: block; margin-bottom: 5px;
  font-family: var(--cx-font-display); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cx-warn);
}
.cx-systemhaus .cx-btn-secondary { margin-left: 0; padding: 10px 20px; font-size: 15px; white-space: nowrap; }
/* Auf der Systemhaus-Seite zeigt dasselbe Band in die Gegenrichtung – dorthin,
   wo die Leute eigentlich hinwollten. Blau, weil es keine Einschränkung ist,
   sondern der kürzere Weg. */
.cx-systemhaus-blau { border-left-color: var(--cx-blue); max-width: 760px; }
.cx-systemhaus-blau .cx-systemhaus-marke { color: var(--cx-blue-light); }
html[data-theme="light"] .cx-systemhaus-blau .cx-systemhaus-marke { color: var(--cx-blue-deep); }

/* Der Hinweis im Zugangsformular, wenn die Domain schon einer Partnerfirma
   gehört. Warnend, aber nicht sperrend – der Absendeknopf bleibt bedienbar. */
.cx-schon-partner {
  margin: 4px 0 0; padding: 12px 16px; font-size: 14.5px; line-height: 1.55;
  border-left: 3px solid var(--cx-warn); border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--cx-warn) 10%, transparent);
  color: var(--cx-text-muted);
}
.cx-schon-partner b { color: var(--cx-text); }

/* --- Battle Card: zugeklappter Zusatzabschnitt ---------------------------
   Kommt UNTER den Spaltenvergleich, nicht an seine Stelle. Die Spalten sind
   der Steckbrief-Auszug je Hersteller; die Battle Card beantwortet die andere
   Frage – dieselbe Rubrik über alle Anbieter auf einer Höhe, dazu die
   gegenseitige Abgrenzung, die in den Spalten nicht vorkommt.

   Zugeklappt, weil die Spalten die Hauptansicht bleiben. details/summary
   statt eigener Logik: Tastaturbedienung, Ansage für Vorlesesoftware und der
   geöffnete Zustand kommen vom Browser. */
.cx-battle { margin-top: 40px; }
.cx-battle-summary {
  display: flex; align-items: center; gap: 16px; cursor: pointer;
  padding: 16px 20px; border-radius: var(--cx-radius);
  border: 1px solid var(--cx-border); background: var(--cx-graphite);
  transition: border-color .15s;
  list-style: none;
}
.cx-battle-summary::-webkit-details-marker { display: none; }
.cx-battle-summary:hover { border-color: var(--cx-blue); }
.cx-battle-summary:focus-visible { outline: 2px solid var(--cx-blue); outline-offset: 2px; }
.cx-battle[open] .cx-battle-summary {
  border-color: var(--cx-blue);
  border-radius: var(--cx-radius) var(--cx-radius) 0 0;
  margin-bottom: 0;
}
.cx-battle-kopf { display: grid; gap: 3px; min-width: 0; }
.cx-battle-h {
  font-family: var(--cx-font-display); font-size: 21px; font-weight: 700;
  color: var(--cx-text);
}
.cx-vgl-intro { margin: 0; font-size: 14px; color: var(--cx-steel); max-width: 760px; }
/* Ein gezeichnetes Winkelzeichen statt eines Schriftzeichens: dreht sich
   sauber mit und sieht in jeder Schriftart gleich aus. */
.cx-battle-pfeil {
  flex: none; margin-left: auto; width: 11px; height: 11px;
  border-right: 2px solid var(--cx-steel); border-bottom: 2px solid var(--cx-steel);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease, border-color .15s;
}
.cx-battle-summary:hover .cx-battle-pfeil { border-color: var(--cx-blue-light); }
html[data-theme="light"] .cx-battle-summary:hover .cx-battle-pfeil { border-color: var(--cx-blue-deep); }
.cx-battle[open] .cx-battle-pfeil { transform: rotate(-135deg) translate(-3px, -3px); }
.cx-battle[open] .cx-vgl { margin-top: 0; }
.cx-battle[open] .cx-vgl-kopfleiste { border-radius: 0; }
@media (prefers-reduced-motion: reduce) { .cx-battle-pfeil { transition: none; } }

/* Der Weg zum Blatt: ein Band zwischen Aufklapper und Gegenüberstellung.
   Bewusst flächenbündig ohne eigene Ecken – Aufklapper, Band und Kopfleiste
   bilden einen Stapel, und eine abgesetzte Kachel dazwischen sähe aus wie
   ein Fremdkörper. Der Knopf steht hier und nicht im <summary>: Ein
   <button> darin würde beim Klick die Karte zuklappen. */
.cx-battle-werkzeug {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 20px; flex-wrap: wrap;
  padding: 12px 20px;
  background: var(--cx-graphite);
  border: 1px solid var(--cx-border); border-top: 0;
}
.cx-battle-werkzeug p {
  flex: 1 1 300px; margin: 0; min-width: 0;
  font-size: 13.5px; line-height: 1.45; color: var(--cx-steel);
}
.cx-battle-werkzeug .cx-btn { flex: none; margin: 0; }

/* ===== Direktvergleich als Gegenüberstellung ==============================
   Vorher standen die Hersteller in unabhängigen Spalten, jede ein eigener
   Steckbrief-Auszug. Weil die Produktlisten unterschiedlich lang sind, lagen
   „Positionierung" und „Lizenzierung" um bis zu 414 px versetzt – quer lesen
   war damit unmöglich, und genau das ist der Zweck eines Vergleichs.

   Jetzt ein durchgehendes Raster: eine Rubrikenspalte links, je Hersteller
   eine Spalte. Dieselbe Frage liegt zwangsläufig auf einer Höhe.
   Die Auswahl darüber (Chips für Bereich und Hersteller) bleibt unverändert. */
/* --- Die Gegenüberstellung ---
   Zwei Raster mit derselben Spaltendefinition: die Kopfleiste bleibt beim
   Scrollen stehen, der Körper läuft darunter durch. Ein einziges Raster mit
   overflow:hidden (für die Rundung) hätte position:sticky ausgehebelt. */
.cx-vgl {
  --vgl-spalten: 168px repeat(var(--vgl-n, 2), minmax(0, 1fr));
  margin-top: 30px;
}
.cx-vgl-kopfleiste {
  display: grid; grid-template-columns: var(--vgl-spalten);
  /* Unter der Kopfleiste, nicht dahinter: seit die Leiste stehenbleibt, wäre
     top:0 unsichtbar geworden. */
  position: sticky; top: var(--cx-kopf); z-index: 25;
  background: var(--cx-graphite);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius) var(--cx-radius) 0 0;
}
/* Trennlinien konsequent als border-LEFT der Herstellerspalten: Die Zahl der
   Spalten steckt in einer Variablen, „die letzte Zelle einer Zeile" lässt sich
   damit per :nth-child nicht treffen. Von links gezogen entsteht die Linie
   zwischen den Spalten von selbst – und außen rechts eben keine. */
.cx-vgl-eck {
  display: flex; align-items: center; padding: 12px 15px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; color: var(--cx-steel);
}
.cx-vgl-kopf {
  display: flex; align-items: center; gap: 11px; padding: 10px 15px; min-width: 0;
  border-left: 1px solid var(--cx-border);
}
.cx-vgl-kopf .cx-logoplate { flex: none; width: 56px; height: 36px; margin: 0; }
.cx-vgl-kopf .cx-logoplate img { max-height: 24px; }
.cx-vgl-kopf .cx-logo-ersatz { font-size: 11px; }
.cx-vgl-kopf-name {
  font-weight: 700; font-size: 15px; color: var(--cx-text);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cx-vgl-kopf-name:hover { color: var(--cx-blue-light); }
html[data-theme="light"] .cx-vgl-kopf-name:hover { color: var(--cx-blue-deep); }

.cx-vgl-koerper {
  display: grid; grid-template-columns: var(--vgl-spalten);
  border: 1px solid var(--cx-border); border-top: 0;
  border-radius: 0 0 var(--cx-radius) var(--cx-radius);
  overflow: hidden;
}
.cx-vgl-rubrik, .cx-vgl-zelle {
  padding: 14px 15px; border-top: 1px solid var(--cx-border);
}
.cx-vgl-rubrik {
  background: var(--cx-graphite);
  font-size: 12.5px; font-weight: 700; color: var(--cx-text-muted);
}
.cx-vgl-rubrik.cx-vgl-hell { background: rgba(30, 123, 232, .09); color: var(--cx-blue-light); }
html[data-theme="light"] .cx-vgl-rubrik.cx-vgl-hell { color: var(--cx-blue-deep); }
.cx-vgl-rubrik-sub {
  display: block; margin-top: 3px;
  font-size: 11px; font-weight: 500; color: var(--cx-steel);
}
/* Gleicher Fall wie bei der aktiven Bereichskachel: auf dem blauen Grund
   der Abgrenzungszeile reicht Steel im hellen Modus nicht (4,16:1). */
.cx-vgl-rubrik.cx-vgl-hell .cx-vgl-rubrik-sub { color: var(--cx-text-muted); }
.cx-vgl-zelle {
  border-left: 1px solid var(--cx-border);
  font-size: 13.5px; line-height: 1.6; color: var(--cx-text-muted);
}
.cx-vgl-zelle p { margin: 0; }
.cx-vgl-zelle ul { margin: 0; padding-left: 17px; }
.cx-vgl-zelle li { margin-bottom: 5px; }
.cx-vgl-zelle li:last-child { margin-bottom: 0; }
.cx-vgl-leer { color: var(--cx-steel); font-style: italic; }
.cx-vgl-produkt { margin-bottom: 12px; }
.cx-vgl-produkt:last-child { margin-bottom: 0; }
.cx-vgl-produkt b { color: var(--cx-text); font-size: 13.5px; }
.cx-vgl-produkt a:hover b { color: var(--cx-blue-light); }
html[data-theme="light"] .cx-vgl-produkt a:hover b { color: var(--cx-blue-deep); }
.cx-vgl-produkt p { margin-top: 2px; font-size: 12.5px; color: var(--cx-steel); }
.cx-vgl-mehr-link { display: inline-block; margin-top: 4px; font-size: 12.5px; font-weight: 600; }
.cx-vgl-ueber { margin-bottom: 14px; }
.cx-vgl-ueber:last-child { margin-bottom: 0; }
.cx-vgl-wer {
  display: block; margin-bottom: 4px;
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 700; color: var(--cx-steel);
}
.cx-vgl-stamm { color: var(--cx-text); font-weight: 600; }
.cx-vgl-stamm-sub { margin-top: 3px; font-size: 12.5px; color: var(--cx-steel); }

/* Gekürzt, aber nie abgeschnitten: Beide Fassungen stehen im Dokument. */
.cx-vgl-lang { display: none; }
.cx-vgl-auf .cx-vgl-kurz { display: none; }
.cx-vgl-auf .cx-vgl-lang { display: block; }
.cx-vgl-mehr-knopf {
  display: block; margin-top: 9px; padding: 0; cursor: pointer;
  border: 0; background: none; text-align: left;
  font-family: var(--cx-font-body); font-size: 12px; font-weight: 600;
  color: var(--cx-blue-light); text-decoration: underline;
}
html[data-theme="light"] .cx-vgl-mehr-knopf { color: var(--cx-blue-deep); }

.cx-vgl-weiter { margin-top: 16px; font-size: 14px; color: var(--cx-steel); }
.cx-vgl-weiter a { font-weight: 600; margin-right: 12px; }


/* Auf schmalen Geräten läuft der Vergleich in sich seitlich – die Rubriken
   bleiben dabei stehen, sonst weiß man nach dem ersten Wischen nicht mehr,
   welche Zeile man liest. */
@media (max-width: 860px) {
  .cx-vgl { overflow-x: auto; }
  .cx-vgl-kopfleiste, .cx-vgl-koerper { min-width: 620px; }
  .cx-vgl-eck, .cx-vgl-rubrik {
    position: sticky; left: 0; z-index: 5; background: var(--cx-graphite);
  }
  .cx-vgl-kopfleiste { position: static; }
  .cx-vgl { --vgl-spalten: 128px repeat(var(--vgl-n, 2), minmax(220px, 1fr)); }
}

/* --- Theme-Umschalter & heller Modus ------------------------------------
   Styleguide.css definiert die dunkle Marken-Palette auf :root und bleibt
   unangetastet; der helle Modus überschreibt nur die Variablen.
   html[data-theme] wird vom Inline-Skript in index.html bzw. app.js gesetzt. */
.cx-theme-switch {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--cx-graphite);
  border: 1px solid var(--cx-border); border-radius: 99px;
  padding: 2px;
}
.cx-theme-switch .cx-theme-thumb {
  position: absolute; top: 2px; left: 2px;
  width: calc((100% - 4px) / 3); height: calc(100% - 4px);
  border-radius: 99px; background: var(--cx-gradient);
  transition: transform .22s ease;
}
.cx-theme-switch[data-aktiv="dark"]  .cx-theme-thumb { transform: translateX(100%); }
.cx-theme-switch[data-aktiv="light"] .cx-theme-thumb { transform: translateX(200%); }
.cx-theme-switch button {
  position: relative; z-index: 1;
  font-family: var(--cx-font-body); font-size: 11.5px; font-weight: 600;
  color: var(--cx-text-muted); background: none; border: none;
  padding: 4px 10px; border-radius: 99px; cursor: pointer; white-space: nowrap;
  transition: color .18s ease;
}
.cx-theme-switch button:hover { color: var(--cx-text); }
.cx-theme-switch button[aria-checked="true"] { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .cx-theme-switch .cx-theme-thumb { transition: none; }
}

/* ===================== Direktvergleich: Auswahl ===========================
   Der Bereich gibt das Thema vor, die Liste beantwortet, wer dort etwas
   anbietet. Vorher stand hier eine Wand aus 144 Namen. */

:root {
  /* Warnfarbe für „hier fehlt etwas“ – bewusst kein Rot: Ein Hersteller ohne
     Angebot in einem Bereich ist kein Fehler, sondern eine Eigenschaft, die
     man im Gespräch sogar zeigen will. Bernstein auf der Kartenfläche: 9,0:1. */
  --cx-warn: #E5A83B;
}

/* Für Vorlesesoftware sichtbar, für das Auge nicht – das Filterfeld trägt
   sein Label im Platzhalter, braucht aber trotzdem eins. */
.cx-visuell-versteckt {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --- Die drei Plätze --- */
.cx-vgl-slots {
  display: grid; gap: 12px; margin: 6px 0 18px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.cx-vgl-slot {
  display: flex; align-items: center; gap: 12px; min-height: 74px;
  padding: 10px 12px; border-radius: var(--cx-radius-sm);
}
.cx-vgl-slot.leer {
  border: 1px dashed var(--cx-border); color: var(--cx-steel);
  font-size: 13.5px; justify-content: center; text-align: center;
}
.cx-vgl-slot-plus { font-size: 18px; font-weight: 700; margin-right: 2px; }
.cx-vgl-slot.voll {
  background: var(--cx-graphite); border: 1px solid var(--cx-border);
}
.cx-vgl-slot-platte {
  flex: none; width: 62px; height: 44px; border-radius: 8px;
  background: var(--cx-silver-light);
  display: flex; align-items: center; justify-content: center; padding: 5px;
}
.cx-vgl-slot-platte img { max-width: 100%; max-height: 34px; }
.cx-vgl-slot-platte .cx-logo-ersatz {
  font-size: 10.5px; font-weight: 700; color: var(--cx-ink);
  text-align: center; line-height: 1.15;
}
.cx-vgl-slot-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.cx-vgl-slot-text b {
  font-size: 14.5px; font-family: var(--cx-font-display);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cx-vgl-slot-sub { font-size: 12px; color: var(--cx-steel); }
.cx-vgl-slot-warn { font-size: 12px; font-weight: 600; color: var(--cx-warn); }
.cx-vgl-slot-weg {
  flex: none; width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  background: none; border: 1px solid var(--cx-border); color: var(--cx-steel);
  font-size: 12px; line-height: 1; transition: color .15s ease, border-color .15s ease;
}
.cx-vgl-slot-weg:hover { color: #E5484D; border-color: #E5484D; }

.cx-vgl-leitsatz { color: var(--cx-steel); font-size: 13.5px; margin: -8px 0 16px; }
.cx-vgl-meldung {
  margin: -6px 0 14px; padding: 8px 12px; border-radius: var(--cx-radius-sm);
  font-size: 13px; font-weight: 600; color: var(--cx-warn);
  background: rgba(229,168,59,.10); border: 1px solid rgba(229,168,59,.35);
}

/* --- Auswahl aus einer anderen Frage --------------------------------------
   Wer Proxmox in „Virtualisierung“ auswählt und dann über das Menü in den
   Direktvergleich geht, landet im ersten Produktbereich – und findet dort
   einen Hersteller vor, den er für DIESE Frage nie gewählt hat. Das ist
   keine Fehlbedienung, sieht aber danach aus.

   Das Band erklärt die Herkunft, statt sie nur zu behaupten, und nennt den
   Fall beim Namen, der wirklich stört: einen Gewählten, der hier gar nichts
   anbietet. Es erscheint NUR für mitgebrachte Hersteller; wer auf dieser
   Seite selbst wählt, bekommt weiterhin den schlanken Knopf in der
   Beschriftungszeile. Beides zugleich stünde für dieselbe Sache zweimal. */
.cx-hinband {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 11px 15px; margin: 0 0 14px;
  background: rgba(30,123,232,.13); border: 1px solid rgba(63,169,255,.38);
  border-radius: var(--cx-radius-sm);
}
html[data-theme="light"] .cx-hinband {
  background: rgba(13,80,216,.10); border-color: rgba(13,80,216,.30);
}
/* Dieselbe Bauform in Bernstein: für den Fall, dass die Gewählten keinen
   gemeinsamen Produktbereich haben. Bewusst kein Rot – es ist kein Fehler,
   sondern eine Eigenschaft der Auswahl, dieselbe Regel wie beim fehlenden
   Angebot in der Spalte. */
.cx-hinband.warn {
  background: rgba(229,168,59,.13); border-color: rgba(229,168,59,.40);
}
html[data-theme="light"] .cx-hinband.warn {
  background: rgba(138,90,0,.10); border-color: rgba(138,90,0,.32);
}
.cx-hinband.warn .cx-hinband-zeichen {
  background: var(--cx-warn); color: var(--cx-carbon);
  font-size: 16px; font-weight: 700; line-height: 1;
}
html[data-theme="light"] .cx-hinband.warn .cx-hinband-zeichen {
  background: var(--cx-warn); color: #fff;
}
.cx-hinband.warn .cx-hinband-text strong { color: var(--cx-warn); }
/* Helles Zeichen auf dunklem Grund und umgekehrt – ein Farbwert bedient nie
   beide Modi: Weiß auf #3FA9FF käme auf 2,2:1 und wäre im Dunkelmodus kaum
   zu erkennen. */
.cx-hinband-zeichen {
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  background: var(--cx-blue-light); color: var(--cx-carbon);
  display: flex; align-items: center; justify-content: center;
}
html[data-theme="light"] .cx-hinband-zeichen {
  background: var(--cx-blue-deep); color: #fff;
}
.cx-hinband-zeichen .cx-fzeichen { width: 17px; height: 17px; }
.cx-hinband-text { flex: 1 1 300px; min-width: 0; line-height: 1.45; }
.cx-hinband-text strong {
  display: block; font: 700 14.5px var(--cx-font-display);
  color: var(--cx-blue-light);
}
html[data-theme="light"] .cx-hinband-text strong { color: var(--cx-blue-deep); }
.cx-hinband-text > span { color: var(--cx-text-muted); font-size: 13.5px; }
.cx-hinband-text b { color: var(--cx-text); font-weight: 700; }
/* Nicht --cx-blue: Weiß darauf erreicht nur 4,16:1, die Norm verlangt 4,5:1.
   Das tiefere Blau des Farbverlaufs kommt auf 6,65:1 – dieselbe Familie,
   dieselbe Regel wie bei den Fristenbalken der Zertifikatsseite. */
.cx-hinband-knopf {
  flex: none; cursor: pointer; border: 0; border-radius: 99px;
  padding: 8px 17px; font: 700 13.5px var(--cx-font-body);
  background: var(--cx-blue-deep); color: #fff;
  transition: background-color .15s;
}
.cx-hinband-knopf:hover, .cx-hinband-knopf:focus-visible { background: #0A44B8; }

/* --- Das Auswahl-Panel --- */
.cx-vgl-panel {
  background: var(--cx-graphite); border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius); padding: 16px 16px 18px;
}
.cx-vgl-panel-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.cx-vgl-panel-kopf h4 {
  margin: 0; font-family: var(--cx-font-display); font-size: 15px;
}
.cx-vgl-zaehler { margin: 0; font-size: 12.5px; color: var(--cx-steel); }
.cx-vgl-filter { display: block; margin-bottom: 12px; }
.cx-vgl-filter input {
  width: 100%; padding: 9px 12px; border-radius: var(--cx-radius-sm);
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
  color: var(--cx-text); font-family: var(--cx-font-body); font-size: 14px;
}
.cx-vgl-filter input::placeholder { color: var(--cx-steel); }
.cx-vgl-filter input:focus-visible {
  outline: 2px solid var(--cx-blue); outline-offset: 1px; border-color: var(--cx-blue);
}

.cx-vgl-raster {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}
.cx-vgl-kachel {
  position: relative; display: grid; gap: 6px; justify-items: center;
  padding: 12px 10px 10px; cursor: pointer; text-align: center;
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-sm); color: var(--cx-text);
  font-family: var(--cx-font-body);
  transition: border-color .15s ease, transform .15s ease;
}
.cx-vgl-kachel:hover { border-color: var(--cx-blue); transform: translateY(-1px); }
.cx-vgl-kachel:focus-visible { outline: 2px solid var(--cx-blue); outline-offset: 2px; }
.cx-vgl-kachel.an { border-color: var(--cx-blue); box-shadow: 0 0 0 1px var(--cx-blue); }
.cx-vgl-kachel.gedimmt { opacity: .55; }
.cx-vgl-kachel.gedimmt:hover { opacity: 1; }
.cx-vgl-kachel-platte {
  width: 100%; height: 40px; border-radius: 7px; background: var(--cx-silver-light);
  display: flex; align-items: center; justify-content: center; padding: 5px;
}
.cx-vgl-kachel-platte img { max-width: 100%; max-height: 30px; }
.cx-vgl-kachel-platte .cx-logo-ersatz {
  font-size: 10px; font-weight: 700; color: var(--cx-ink); line-height: 1.15;
}
.cx-vgl-kachel-name {
  font-size: 13px; font-weight: 600; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.cx-vgl-kachel-n { font-size: 11.5px; color: var(--cx-steel); }
.cx-vgl-kachel-haken {
  position: absolute; top: 6px; right: 6px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--cx-blue-flaeche); color: #fff;
  font-size: 11px; line-height: 18px; opacity: 0; transition: opacity .15s ease;
}
.cx-vgl-kachel.an .cx-vgl-kachel-haken { opacity: 1; }
.cx-vgl-nix { grid-column: 1 / -1; margin: 4px 0; color: var(--cx-steel); font-size: 13px; }

/* --- Die Ohne-Angebot-Gruppe: da, aber nicht im Weg --- */
.cx-vgl-ohne { margin-top: 14px; border-top: 1px solid var(--cx-border); padding-top: 12px; }
.cx-vgl-ohne summary {
  cursor: pointer; font-size: 12.5px; color: var(--cx-steel);
  list-style: none; display: flex; align-items: baseline; gap: 7px;
}
.cx-vgl-ohne summary::-webkit-details-marker { display: none; }
.cx-vgl-ohne summary::before {
  content: '▸'; font-size: 10px; transition: transform .15s ease; flex: none;
}
.cx-vgl-ohne[open] summary::before { transform: rotate(90deg); }
.cx-vgl-ohne summary:hover { color: var(--cx-text); }
.cx-vgl-ohne .cx-vgl-raster { margin-top: 12px; }

/* --- Das Hinweis-Band: der Ausweg statt der Sackgasse --- */
.cx-vgl-band {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 18px 0 4px;
  padding: 14px 16px; border-radius: var(--cx-radius);
  background: rgba(53,224,218,.07); border: 1px solid rgba(53,224,218,.30);
  border-left: 3px solid var(--cx-accent);
}
.cx-vgl-band p { margin: 0; font-size: 14px; }
.cx-vgl-band b { color: var(--cx-accent); }
.cx-vgl-band .cx-btn { flex: none; }

/* --- Die Lücke als Aussage, nicht als Strich --- */
.cx-vgl-luecke { margin: 0 0 6px; color: var(--cx-steel); font-size: 13.5px; }
.cx-vgl-luecke-sub { margin: 0; color: var(--cx-steel); font-size: 12.5px; line-height: 1.45; }

@media (prefers-reduced-motion: reduce) {
  .cx-vgl-kachel, .cx-vgl-kachel-haken, .cx-vgl-ohne summary::before,
  .cx-vgl-slot-weg { transition: none; }
  .cx-vgl-kachel:hover { transform: none; }
}

@media (max-width: 640px) {
  .cx-vgl-slots { grid-template-columns: 1fr; }
  .cx-vgl-raster { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
  .cx-vgl-band { flex-direction: column; align-items: flex-start; }
}

/* ===================== SSL/TLS-Zertifikate ================================
   Die Seite hat eine Zahlenreihe im Zentrum – 398 → 200 → 100 → 47 Tage.
   Alles Weitere ordnet sich dieser Reihe unter. */

.cx-zert-frage {
  font-family: var(--cx-font-display); font-size: 19px; font-weight: 600;
  color: var(--cx-blue-light); margin: 14px 0 18px;
}
html[data-theme="light"] .cx-zert-frage { color: var(--cx-blue-deep); }

/* --- Der Ausweis --- */
.cx-zert-bild { margin: 0 0 20px; }
.cx-zert-bild svg { width: 100%; max-width: 460px; height: auto; display: block; margin: 0 auto; }
.cx-zert-karte { fill: var(--cx-carbon); stroke: var(--cx-border); stroke-width: 1.5; }
.cx-zert-trenner { stroke: var(--cx-border); stroke-width: 1.5; }
.cx-zert-kopf {
  fill: var(--cx-steel); font-family: var(--cx-font-body); font-size: 12px;
  font-weight: 700; letter-spacing: .18em;
}
.cx-zert-portrait rect { fill: none; stroke: var(--cx-border); stroke-width: 1.5; }
.cx-zert-portrait circle, .cx-zert-portrait path {
  fill: none; stroke: var(--cx-steel); stroke-width: 2;
}
.cx-zert-zeilen text {
  fill: var(--cx-steel); font-family: var(--cx-font-body); font-size: 11px;
}
.cx-zert-zeilen text.wert {
  fill: var(--cx-text); font-size: 14px; font-weight: 600;
}
.cx-zert-siegel circle { fill: none; stroke: var(--cx-accent); stroke-width: 2; }
.cx-zert-siegel path { fill: none; stroke: var(--cx-accent); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round; }

.cx-zert-zusagen { display: grid; gap: 12px; margin: 18px 0 14px; }
.cx-zert-zusage { display: flex; gap: 12px; align-items: flex-start; }
.cx-zert-zusage p { margin: 2px 0 0; color: var(--cx-text-muted); font-size: 14px; }
.cx-zert-haken {
  flex: none; width: 22px; height: 22px; border-radius: 50%; margin-top: 1px;
  background: rgba(53,224,218,.14); color: var(--cx-accent);
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}
html[data-theme="light"] .cx-zert-haken { background: rgba(15,118,110,.10); }
.cx-zert-ohne {
  margin: 0; padding: 12px 14px; border-radius: var(--cx-radius-sm);
  background: var(--cx-carbon); border-left: 3px solid var(--cx-warn);
  font-size: 14px; color: var(--cx-text-muted);
}

/* --- Ablauf und Prüfungen --- */
.cx-zert-fluss { display: grid; justify-items: center; gap: 6px; margin: 18px 0 22px; }
.cx-zert-fluss-schritt {
  display: grid; justify-items: center; gap: 2px; padding: 10px 18px;
  border-radius: var(--cx-radius-sm); background: var(--cx-graphite);
  border: 1px solid var(--cx-border); min-width: 260px; text-align: center;
}
.cx-zert-fluss-schritt b { font-size: 13px; }
.cx-zert-fluss-schritt span { font-size: 13px; color: var(--cx-text-muted); }
.cx-zert-fluss-pfeil { color: var(--cx-steel); font-size: 15px; line-height: 1; }

.cx-zert-pruefungen, .cx-zert-punkte, .cx-zert-wege,
.cx-zert-schritte, .cx-zert-clients, .cx-zert-faelle {
  display: grid; gap: 14px; margin-top: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.cx-zert-pruefung, .cx-zert-punkt, .cx-zert-weg,
.cx-zert-schritt, .cx-zert-client { padding: 16px 18px; }
.cx-zert-pruefung b, .cx-zert-punkt b, .cx-zert-weg b,
.cx-zert-schritt b, .cx-zert-client b {
  display: block; font-family: var(--cx-font-display); font-size: 15px; margin-bottom: 6px;
}
.cx-zert-pruefung p, .cx-zert-punkt p, .cx-zert-weg p,
.cx-zert-schritt p, .cx-zert-client p {
  margin: 0; font-size: 14px; color: var(--cx-text-muted); line-height: 1.55;
}
.cx-zert-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; margin-bottom: 8px;
  background: var(--cx-blue-flaeche); color: #fff; font-size: 12.5px; font-weight: 700;
}
.cx-zert-kern {
  padding: 16px 18px; border-left: 3px solid var(--cx-blue); margin: 16px 0;
}
.cx-zert-kern p { margin: 0; font-size: 16px; font-weight: 600; }
.cx-zert-quelle { font-size: 13px; color: var(--cx-steel); margin-top: 12px; }

/* --- Die Fristenleiste: das Herzstück --- */
.cx-zert-fristen { padding: 18px 20px; display: grid; gap: 16px; }
.cx-zert-frist { display: grid; gap: 5px; }
.cx-zert-frist-ab {
  font-family: var(--cx-font-display); font-size: 14px; font-weight: 600;
}
.cx-zert-frist-bahn {
  height: 34px; border-radius: 8px; background: var(--cx-carbon);
  border: 1px solid var(--cx-border); overflow: hidden;
}
.cx-zert-frist-balken {
  height: 100%; display: flex; align-items: center; padding-left: 12px;
  border-radius: 7px 0 0 7px; background: var(--cx-steel);
  transition: width .35s ease;
}
.cx-zert-frist-balken span {
  font-size: 13px; font-weight: 700; color: var(--cx-carbon); white-space: nowrap;
}
/* Abgelöst blass, geltend blau, kommend im Akzent – die Farbe sagt, wo man steht. */
.cx-zert-frist.alt .cx-zert-frist-balken { background: var(--cx-border); }
/* --cx-silver statt --cx-steel: Der abgelöste Balken soll zurücktreten, aber
   lesbar bleiben. Steel auf der hellen Rahmenfläche kommt nur auf 3,92:1. */
.cx-zert-frist.alt .cx-zert-frist-balken span { color: var(--cx-silver); }
.cx-zert-frist.alt .cx-zert-frist-ab { color: var(--cx-steel); }
/* Nicht --cx-blue: Weiß darauf erreicht nur 4,16:1, die Norm verlangt 4,5:1
   für Text dieser Größe. Das tiefere Blau des Farbverlaufs kommt auf 6,65:1
   und bleibt dieselbe Farbfamilie. */
.cx-zert-frist.gilt .cx-zert-frist-balken { background: var(--cx-blue-deep); }
.cx-zert-frist.gilt .cx-zert-frist-balken span { color: #fff; }
.cx-zert-frist.kommt .cx-zert-frist-balken { background: var(--cx-accent); }
.cx-zert-frist.kommt .cx-zert-frist-balken span { color: var(--cx-carbon); }
html[data-theme="light"] .cx-zert-frist.kommt .cx-zert-frist-balken span { color: #fff; }
.cx-zert-frist-note { font-size: 12.5px; color: var(--cx-steel); }
.cx-zert-frist-note b { color: var(--cx-blue-light); }
html[data-theme="light"] .cx-zert-frist-note b { color: var(--cx-blue-deep); }

/* --- Missbrauchsfenster: zwei Bahnen im selben Maßstab --- */
.cx-zert-risiko {
  display: grid; gap: 16px; margin: 18px 0 6px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.cx-zert-bahn {
  padding: 16px 18px; border-radius: var(--cx-radius);
  background: var(--cx-graphite); border: 1px solid var(--cx-border);
}
.cx-zert-bahn-kopf {
  font-family: var(--cx-font-display); font-size: 15px; font-weight: 600; margin-bottom: 10px;
}
.cx-zert-bahn-spur {
  height: 12px; border-radius: 6px; background: var(--cx-carbon);
  border: 1px solid var(--cx-border); overflow: hidden; margin-bottom: 10px;
}
.cx-zert-bahn-fuell { height: 100%; border-radius: 5px 0 0 5px; }
.cx-zert-bahn.lang .cx-zert-bahn-fuell { background: var(--cx-warn); }
.cx-zert-bahn.kurz .cx-zert-bahn-fuell { background: var(--cx-accent); }
.cx-zert-bahn p { margin: 0; font-size: 14px; color: var(--cx-text-muted); line-height: 1.55; }

/* --- Takt: wie oft im Jahr --- */
.cx-zert-takt { padding: 18px 20px; display: grid; gap: 12px; }
.cx-zert-takt-zeile {
  display: grid; grid-template-columns: 92px 1fr auto; gap: 14px; align-items: center;
}
.cx-zert-takt-wann { font-size: 13.5px; color: var(--cx-steel); }
.cx-zert-takt-punkte {
  color: var(--cx-blue); font-size: 13px; letter-spacing: .32em; overflow: hidden;
}
/* Die Punktreihe trägt eine Information – wie oft etwas fällig wird –, also
   gilt für sie die Textnorm. Auf der weißen Karte kommt --cx-blue nur auf
   4,16:1; das tiefe Blau erreicht 6,65:1. Im dunklen Modus bleibt es beim
   Elektroblau, dort steht es mit 4,55:1 gegen die Karte richtig. */
html[data-theme="light"] .cx-zert-takt-punkte { color: var(--cx-blue-deep); }
.cx-zert-takt-oft { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.cx-zert-kette {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--cx-border);
}
.cx-zert-kette span {
  padding: 5px 11px; border-radius: 99px; background: var(--cx-carbon);
  border: 1px solid var(--cx-border); font-size: 12.5px;
}
.cx-zert-kette em { color: var(--cx-steel); font-style: normal; }

/* --- Kosten, Merksätze, Warnung --- */
.cx-zert-kosten { padding: 20px 22px; }
.cx-zert-kosten h2 { margin-top: 0; }
.cx-zert-antwort {
  font-family: var(--cx-font-display); font-size: 30px; font-weight: 700;
  color: var(--cx-accent); margin: 0 0 10px;
}
.cx-zert-merksatz {
  font-family: var(--cx-font-display); font-size: 16px; font-weight: 600;
  color: var(--cx-blue-light); margin: 14px 0 0;
}
html[data-theme="light"] .cx-zert-merksatz { color: var(--cx-blue-deep); }
.cx-zert-warnung {
  padding: 14px 16px; border-left: 3px solid var(--cx-warn); margin-top: 16px;
}
.cx-zert-warnung p { margin: 0; font-size: 14px; }

/* --- Die Rechnung --- */
.cx-zert-rechnung { padding: 20px 22px; display: grid; gap: 16px; }
.cx-zert-posten { display: grid; gap: 8px; }
.cx-zert-posten > div { display: flex; align-items: baseline; gap: 12px; font-size: 14px; }
.cx-zert-zahl {
  font-family: var(--cx-font-display); font-size: 20px; font-weight: 700;
  color: var(--cx-blue-light); min-width: 44px;
}
html[data-theme="light"] .cx-zert-zahl { color: var(--cx-blue-deep); }
.cx-zert-zahl.gross { font-size: 34px; }
.cx-zert-summe {
  display: flex; align-items: baseline; gap: 12px;
  padding-top: 14px; border-top: 1px solid var(--cx-border);
}
.cx-zert-formel {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--cx-radius-sm); background: var(--cx-carbon);
  font-size: 14px;
}
.cx-zert-formel em { color: var(--cx-steel); font-style: normal; font-size: 17px; }
.cx-zert-formel b { color: var(--cx-accent); font-size: 15px; }

/* --- VPN: gilt / gilt nicht --- */
.cx-zert-fall { padding: 16px 18px; }
.cx-zert-fall.gilt { border-left: 3px solid var(--cx-warn); }
.cx-zert-fall.frei { border-left: 3px solid var(--cx-accent); }
.cx-zert-marke {
  display: inline-block; margin-bottom: 8px; padding: 3px 9px; border-radius: 99px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
.cx-zert-fall.gilt .cx-zert-marke { background: rgba(229,168,59,.14); color: var(--cx-warn); }
.cx-zert-fall.frei .cx-zert-marke { background: rgba(53,224,218,.14); color: var(--cx-accent); }
html[data-theme="light"] .cx-zert-fall.gilt .cx-zert-marke { background: rgba(138,90,0,.10); }
html[data-theme="light"] .cx-zert-fall.frei .cx-zert-marke { background: rgba(15,118,110,.10); }

/* --- Tabellen: scrollen in sich, nicht die Seite --- */
.cx-tabelle-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 16px; }
.cx-zert-tabelle { width: 100%; border-collapse: collapse; min-width: 620px; }
.cx-zert-tabelle th {
  text-align: left; padding: 10px 14px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--cx-steel);
  border-bottom: 1px solid var(--cx-border);
}
.cx-zert-tabelle td {
  padding: 13px 14px; font-size: 14px; vertical-align: top;
  border-bottom: 1px solid var(--cx-border); line-height: 1.55;
}
.cx-zert-tabelle td:first-child { font-weight: 600; white-space: nowrap; }
.cx-zert-tabelle a { color: var(--cx-blue-light); }
html[data-theme="light"] .cx-zert-tabelle a { color: var(--cx-blue-deep); }
.cx-zert-art { color: var(--cx-steel); font-size: 13px; white-space: nowrap; }

/* --- Fazit --- */
.cx-zert-fazit { padding: 22px 24px; }
.cx-zert-fazit h2 { margin-top: 0; }
.cx-zert-fazit h3 { font-size: 15px; margin: 20px 0 8px; }
.cx-zert-fragen { margin: 0; padding-left: 20px; }
.cx-zert-fragen li { margin-bottom: 7px; font-size: 14.5px; }

@media (prefers-reduced-motion: reduce) {
  .cx-zert-frist-balken { transition: none; }
}
@media (max-width: 640px) {
  .cx-zert-takt-zeile { grid-template-columns: 74px 1fr; }
  .cx-zert-takt-oft { grid-column: 2; font-size: 12.5px; }
  .cx-zert-antwort { font-size: 26px; }
  .cx-zert-fluss-schritt { min-width: 0; width: 100%; }
}

/* ===================== Suche über alles (⌘K) ==============================
   Die Schaltfläche steht am Ende der Menüzeile und soll dort NICHT wie ein
   sechster Menüpunkt wirken – sie führt nicht auf eine Seite, sie öffnet ein
   Werkzeug. Deshalb Rahmen statt Unterstrich. */

/* Die Suchfläche selbst steht oben bei der Kopfzeile (.cx-suchfeld). Hier
   bleiben nur Lupe und Tastenkürzel – beide werden dort weiterverwendet. */
.cx-suchfeld:focus-visible { outline: 2px solid var(--cx-blue); outline-offset: 2px; }
.cx-suche-lupe { font-size: 16px; line-height: 1; flex: none; }
.cx-suche-kbd {
  font-family: var(--cx-font-body); font-size: 10.5px; padding: 1px 5px;
  border-radius: 5px; background: var(--cx-carbon);
  border: 1px solid var(--cx-border); color: var(--cx-steel);
}

/* --- Das Palettenfenster --- */
.cx-palette {
  width: min(620px, calc(100vw - 32px)); padding: 0; overflow: hidden;
  margin-top: 12vh;  /* nicht mittig: das Auge sucht oben, und die Trefferliste
                        wächst nach unten, ohne dass das Fenster springt */
}
.cx-pal-kopf {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--cx-border);
}
.cx-pal-lupe { font-size: 19px; color: var(--cx-steel); line-height: 1; }
.cx-palette input#cx-pal-feld {
  flex: 1; margin: 0; border: none; background: none; padding: 4px 0;
  font-size: 16px; color: var(--cx-text);
}
.cx-palette input#cx-pal-feld:focus { outline: none; }
.cx-pal-zu {
  flex: none; cursor: pointer; padding: 3px 8px; border-radius: 6px;
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
  color: var(--cx-steel); font-family: var(--cx-font-body); font-size: 11px;
}
.cx-pal-zu:hover { color: var(--cx-text); }

.cx-pal-liste { max-height: min(52vh, 460px); overflow-y: auto; padding: 6px; }
.cx-pal-gruppe + .cx-pal-gruppe { margin-top: 4px; }
.cx-pal-gruppe-titel {
  padding: 8px 10px 4px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--cx-steel);
}
.cx-pal-zeile {
  display: flex; align-items: center; gap: 11px; width: 100%; cursor: pointer;
  padding: 8px 10px; border: none; border-radius: var(--cx-radius-sm);
  background: none; color: var(--cx-text); text-align: left;
  font-family: var(--cx-font-body);
}
/* Der blaue Balken links macht die Auswahl auch dann erkennbar, wenn die
   Flächentönung bei hohem Umgebungslicht untergeht. */
.cx-pal-zeile.aktiv {
  background: rgba(30,123,232,.14);
  box-shadow: inset 3px 0 0 var(--cx-blue);
}
.cx-pal-zeile:hover { background: rgba(30,123,232,.08); }
.cx-pal-platte {
  flex: none; width: 46px; height: 32px; border-radius: 6px;
  background: var(--cx-silver-light);
  display: flex; align-items: center; justify-content: center; padding: 4px;
}
.cx-pal-platte img { max-width: 100%; max-height: 24px; }
.cx-pal-platte .cx-logo-ersatz {
  font-size: 8.5px; font-weight: 700; color: var(--cx-ink); line-height: 1.1;
  text-align: center;
}
.cx-pal-zeichen {
  flex: none; width: 46px; height: 32px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
  color: var(--cx-steel); font-size: 14px; font-weight: 700;
}
.cx-pal-text { display: grid; gap: 1px; min-width: 0; }
.cx-pal-text b {
  font-size: 14px; font-family: var(--cx-font-display); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cx-pal-text span {
  font-size: 12px; color: var(--cx-steel);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cx-pal-nix { margin: 0; padding: 22px 12px; text-align: center;
  color: var(--cx-steel); font-size: 13.5px; }
.cx-pal-fuss {
  display: flex; gap: 16px; flex-wrap: wrap;
  padding: 9px 14px; border-top: 1px solid var(--cx-border);
  background: var(--cx-carbon); font-size: 11.5px; color: var(--cx-steel);
}
.cx-pal-fuss kbd {
  font-family: var(--cx-font-body); font-size: 10.5px; padding: 1px 5px;
  margin-right: 3px; border-radius: 4px; background: var(--cx-graphite);
  border: 1px solid var(--cx-border);
}

@media (prefers-reduced-motion: reduce) {
  .cx-suchfeld, .cx-pal-zu { transition: none; }
}
@media (max-width: 640px) {
  .cx-palette { margin-top: 6vh; }
}

html[data-theme="light"] {
  --cx-carbon:      #F4F5F8;  /* Seitenhintergrund hell */
  --cx-graphite:    #FFFFFF;  /* Kartenflächen hell */
  --cx-border:      #DFE3E9;
  --cx-steel:       #64707D;
  --cx-silver:      #4A545F;
  --cx-text:        #14171C;
  --cx-text-muted:  #3C4550;
  /* Akzent abgedunkelt: das Cyan #35E0DA erreicht auf Weiß nur 1,64:1 und ist
     damit faktisch unlesbar. Dieses Petrol bleibt in derselben Farbfamilie,
     kommt aber auf 5,47:1 und erfüllt damit die Norm für Fließtext (4,5:1).
     Bewusst kein Blau: Das ist hier die Linkfarbe – sonst sähen die Unterzeilen
     im Glossar aus wie anklickbare Verweise. */
  --cx-accent:      #0F766E;
  /* Dasselbe Problem beim Bernstein: #E5A83B kommt auf Weiß nur auf 2,1:1.
     Dieses dunklere Ocker bleibt dieselbe Farbfamilie und erreicht 5,9:1. */
  --cx-warn:        #8A5A00;
}
/* Warn- und Hinweisflächen tragen im hellen Modus eigene Tönungen: Die
   Wash-Werte oben sind auf dunklen Grund gerechnet und verschwinden auf Weiß
   praktisch spurlos. */
html[data-theme="light"] .cx-vgl-meldung {
  background: rgba(138,90,0,.07); border-color: rgba(138,90,0,.30);
}
html[data-theme="light"] .cx-vgl-band {
  background: rgba(15,118,110,.06); border-color: rgba(15,118,110,.28);
}
/* --- Textblau im hellen Modus -------------------------------------------
   --cx-blue-light (#3FA9FF) erreicht auf dem hellen Grund #F4F5F8 nur 2,5:1;
   die Norm verlangt 4,5:1 für Fließtext. Die Variable selbst lässt sich nicht
   umdefinieren – sie steckt auch im Farbverlauf der aktiven Filter-Chips, der
   dadurch seine Leuchtkraft verlöre. Deshalb gezielt für Text, in derselben
   Machart wie die schon vorhandenen Einzelregeln weiter unten.

   Bewusst NICHT als nacktes `html[data-theme="light"] a`: Diese Spezifität
   (0,1,1) schlüge auch `.cx-chip` (0,1,0) und färbte die Filterknöpfe blau. */
html[data-theme="light"] .cx-mehr,
html[data-theme="light"] .cx-glossar-link,
html[data-theme="light"] .cx-produkt h3,
html[data-theme="light"] .cx-cmp-produkt a strong,
html[data-theme="light"] .cx-mitre-begriffe h3,
html[data-theme="light"] .cx-mitre-nutzen h3,
html[data-theme="light"] .cx-raid-empfehlung h3,
html[data-theme="light"] .cx-raid-abk span,
html[data-theme="light"] .cx-version-schema b,
html[data-theme="light"] .cx-version-regel li b,
html[data-theme="light"] .cx-ip-netzteil,
html[data-theme="light"] .cx-rp-hervor,
html[data-theme="light"] .cx-rp-regel code,
html[data-theme="light"] .cx-breadcrumb a,
html[data-theme="light"] .cx-quellen a,
html[data-theme="light"] .cx-meta a { color: var(--cx-blue-deep); }

/* Zweite Runde, gemessen statt geraten. Zwei weitere Ursachen:
   1. Kacheln SIND Links – ihre Überschriften erben damit --cx-blue-light
      (2,5:1 auf Weiß). Blau bleibt, nur eine Stufe dunkler.
   2. --cx-blue selbst (#1E7BE8) kommt auf hellem Grund nur auf 3,8:1; das
      reicht für 12-px-Ziffern nicht. Betrifft die durchnummerierten Elemente
      in ATT&CK, WAF, IP und der Versionsliste. */
html[data-theme="light"] .cx-card h3,
html[data-theme="light"] .cx-card h4,
html[data-theme="light"] .cx-kette-nr,
html[data-theme="light"] .cx-version-nr,
html[data-theme="light"] .cx-mitre-schritt,
html[data-theme="light"] .cx-mitre-marke,
html[data-theme="light"] .cx-ip-weg-nr,
html[data-theme="light"] .cx-raid-minimum-zahl { color: var(--cx-blue-deep); }
/* Steel auf der hellblauen Fläche: 4,46:1 – knapp unter der Schwelle. */
html[data-theme="light"] .cx-ip-wer,
html[data-theme="light"] .cx-ip-rechnung i,
html[data-theme="light"] .cx-ip-nat-kasten i,
html[data-theme="light"] .cx-bq-chip em { color: var(--cx-text-muted); }

/* Dritte Runde: Links OHNE eigene Klasse – Herstellerverweise in den
   Know-how-Seiten, Quellenangaben, Fußnoten. Sie erben --cx-blue-light aus
   Styleguide.css und stehen damit bei 2,3:1.

   Bewusst auf `main a` begrenzt (Spezifität 0,1,2) statt auf `a`: Kopfzeile,
   Menü und Fußzeile haben eigene, geprüfte Farben und sollen sie behalten.
   Die Ausnahmen darunter stellen wieder her, was innerhalb von main eine
   eigene Farbe hatte – sonst würde diese Regel sie mit übermalen. */
html[data-theme="light"] main a { color: var(--cx-blue-deep); }
html[data-theme="light"] main a.cx-chip { color: var(--cx-text-muted); }
html[data-theme="light"] main a.cx-chip.active { color: #fff; }
html[data-theme="light"] main a.cx-card,
html[data-theme="light"] main a.cx-logoplate { color: inherit; }
/* Die Knöpfe brauchen ihre EIGENE Farbe zurück, nicht die geerbte: `inherit`
   holt die Fließtextfarbe des Elternelements (#3C4550) – auf dem blauen
   Verlauf des Hauptknopfs sind das 1,46:1, praktisch unlesbar. Im dunklen
   Modus fiel das nie auf, weil dort keine Regel die Knopfschrift überschreibt.
   Beim Chip daneben stand die Lösung schon richtig da: die Farbe nennen. */
html[data-theme="light"] main a.cx-btn { color: #fff; }
html[data-theme="light"] main a.cx-btn-secondary { color: var(--cx-text); }
html[data-theme="light"] main a.cx-card h3,
html[data-theme="light"] main a.cx-card h4 { color: var(--cx-blue-deep); }


html[data-theme="light"] body { background: var(--cx-carbon); color: var(--cx-text); }
/* ---- Logo-Platten im hellen Modus (1.93.1) -----------------------------
   Gemeldet: „Im hellen Modus kommen die Logos nicht richtig rüber." Gemessen
   und bestätigt – die Platte grenzt sich vom Grund praktisch nicht ab:

     Steckbriefkopf   Platte #F2F4F7 auf Seitengrund #F4F5F8 =  1,01:1
     Herstellerkarte  Platte #F2F4F7 auf Kartenfläche #FFFFFF =  1,10:1
     Rahmen bisher    #DFE3E9 gegen die beiden Gründe         =  1,18 / 1,29

   Unter 1,3:1 trennt ein Auge nichts mehr; im Steckbriefkopf schwebt das Logo
   damit scheinbar frei auf der Seite. Drei Messungen haben die Lösung bestimmt:

   1. DIE FLÄCHE TRÄGT HIER FAST NICHTS. Selbst eine deutlich graue Platte
      (#D5DCE6) käme nur auf 1,27 gegen den Seitengrund – und würde zugleich
      alle Logos schwächen. Dasselbe Ergebnis wie 1.90.2 bei den Startseiten-
      Karten: In diesem hellen Design ist Fläche gegen Fläche kein Mittel.
   2. DER RAHMEN TRÄGT. #C9CFD8 erreicht 1,44 gegen den Seitengrund und 1,57
      gegen die Kartenfläche. Der Ton ist im Projekt schon in Gebrauch (helle
      Sekundärknöpfe), also kein neuer Farbwert.
   3. WEISS IST DER BESTE PLATTENGRUND. Von den 237 tatsächlich verwendeten
      Logos sind 204 dunkel (128 sehr dunkel, 76 dunkel), im Canvas bei 74 px
      Anzeigehöhe durchgemessen. Reines Weiß hebt sie am stärksten heraus
      (17,4:1 statt 15,8:1 bei einem #1A1A1A-Logo) und macht die Platte im
      Steckbriefkopf zur hellen Insel statt zu gar nichts. Die sieben hellen
      Logofassungen im Ordner („-weiss", „-hell") sind NICHT verdrahtet –
      geprüft: kein Hersteller verweist darauf.

   Der Schatten bleibt den großen Platten vorbehalten: Auf einer weißen Karte
   ist die weiße Platte sonst nur ein Rahmen, und das wirkt flach. */
html[data-theme="light"] .cx-logoplate {
  background: #FFFFFF;
  border: 1px solid #C9CFD8;
  box-shadow: 0 1px 2px rgba(20, 23, 28, .07);
}
/* Die vier kleinen Platten hatten bisher GAR KEINEN Rahmen und stehen auf
   content-box – ein Rahmen ohne border-box würde jede um 2 px wachsen lassen
   und Raster verschieben. Deshalb hier ausdrücklich, und nur hier: Bei
   .cx-logoplate bleibt content-box, weil dort schon ein Rahmen sitzt und sich
   an der Größe nichts ändern soll. */
html[data-theme="light"] .cx-vgl-slot-platte,
html[data-theme="light"] .cx-vgl-kachel-platte,
html[data-theme="light"] .cx-pal-platte,
html[data-theme="light"] .cx-rad-chip-platte {
  background: #FFFFFF;
  border: 1px solid #C9CFD8;
  box-sizing: border-box;
}
/* Ausnahme: Der Radar-Knoten für Wettbewerber OHNE eigenen Steckbrief soll
   zurücktreten – gestrichelter Rahmen, gedämpfte Fläche. Seine eigene Regel
   gewinnt bei Fläche und Rahmen über die Spezifität (0,3,0 gegen 0,2,1), beim
   Schatten hatte sie aber keine Konkurrenz: Gemessen bekam die gestrichelte
   Platte den Schatten mit und wurde damit hervorgehoben statt zurückgenommen.
   Nur im hellen Modus nötig, weil es den Schatten nur dort gibt. */
html[data-theme="light"] .cx-rad-node.fremd .cx-logoplate { box-shadow: none; }
html[data-theme="light"] .cx-btn-secondary,
html[data-theme="light"] .cx-cmp-toggle { border-color: #C9CFD8; }
/* Beim ÜBERFAHREN im hellen Modus: --cx-blue-light (#3FA9FF) kommt auf der
   weißen Kartenfläche auf 2,52:1 – die Beschriftung verschwindet fast, sobald
   der Zeiger draufsteht. --cx-blue-deep erreicht 6,65:1. Nachgerechnet, nicht
   angesehen: Der Zustand entsteht erst durch die Maus und ist auf keinem
   Bildschirmfoto zu sehen.

   Dasselbe Mittel wenden die Regeln für Fußzeile, Vergleichskopf, Marktzeilen
   und sieben weitere Stellen längst an; hier fehlte es noch. Betrifft alle
   Sekundärknöpfe der Website – seit 1.68.0 steht einer davon prominent auf der
   Anmeldeseite („Noch kein Konto“). */
html[data-theme="light"] .cx-btn-secondary:hover,
html[data-theme="light"] .cx-cmp-toggle:hover,
html[data-theme="light"] .cx-mz-leise:hover { color: var(--cx-blue-deep); }
html[data-theme="light"] .cx-consent { box-shadow: 0 12px 40px rgba(20,23,28,.18); }
html[data-theme="light"] .cx-card { box-shadow: 0 1px 3px rgba(20,23,28,.06); }

/* --- Teaser: Sperrflächen für nicht angemeldete Gäste --------------------
   Die Inhalte sind serverseitig gar nicht erst ausgeliefert – diese Flächen
   erklären nur, was hinter der Anmeldung liegt. */
.cx-gesperrt {
  background: var(--cx-graphite);
  border: 1px dashed var(--cx-border);
  border-radius: var(--cx-radius);
  padding: 22px 24px;
  position: relative;
}
.cx-gesperrt h2 { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.cx-gesperrt p { max-width: 720px; }
.cx-gesperrt .cx-btn,
.cx-gesperrt .cx-btn-secondary { margin: 8px 10px 0 0; padding: 10px 22px; font-size: 15px; }
.cx-schloss {
  font-family: monospace; font-size: 11.5px; font-weight: 400;
  color: var(--cx-steel); border: 1px solid var(--cx-border);
  border-radius: 99px; padding: 3px 12px;
}
.cx-pos-gesperrt { color: var(--cx-steel); font-style: italic; }
.cx-produkt-teaser, .cx-produkt-mehr { opacity: .8; }
.cx-produkt-mehr h3 { color: var(--cx-steel); }
.cx-login-ok { color: var(--cx-accent); margin: 12px 0 0; }

/* --- Glossar: Abkürzungen kurz und alltagssprachlich erklärt --------------
   Zwei Spalten, damit sich beim Überfliegen viele Begriffe auf einmal
   erfassen lassen; Querverweise sind Buttons, weil ein echter Anker mit dem
   Hash-Routing kollidieren würde. */
.cx-glossar {
  display: grid; gap: var(--cx-gap);
  /* min(): sonst bleibt die Spalte auch auf schmalen Displays 360 px breit
     und die Seite läuft seitlich über. */
  grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
  margin-top: 24px;
  /* stretch (Vorgabe) statt start: sonst richtet sich jede Kachel nach ihrem
     eigenen Textumfang und die Reihe wird unterschiedlich hoch. */
  align-items: stretch;
}
/* Kein eigenes scroll-margin mehr: Das steht jetzt als scroll-padding am
   Scrollbereich und würde sich sonst zum dortigen Wert addieren. */
.cx-glossar-eintrag {
  transition: border-color .2s, box-shadow .2s;
  display: flex; flex-direction: column;
}
.cx-glossar-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.cx-glossar-kopf h3 { margin: 0; font-size: 21px; letter-spacing: .01em; }
.cx-glossar-kopf .cx-tag { flex: none; }
.cx-glossar-lang {
  margin: 4px 0 10px; font-size: 14px; color: var(--cx-accent); font-weight: 500;
}
/* flex: 1 füllt die Resthöhe der Kachel, damit die Trennlinie und die
   Querverweise in einer Reihe auf gleicher Höhe stehen. Der Text selbst
   bleibt oben, nur die Box wächst. */
.cx-glossar-text { margin: 0; font-size: 15px; line-height: 1.62; flex: 1; }
.cx-glossar-siehe {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--cx-border);
  font-size: 13px; color: var(--cx-steel);
}
.cx-glossar-link {
  background: none; border: none; cursor: pointer; padding: 2px 4px;
  margin-left: 4px; font: inherit; color: var(--cx-blue); text-decoration: underline;
  text-underline-offset: 2px;
}
.cx-glossar-link:hover { color: var(--cx-accent); }
.cx-glossar-treffer { border-color: var(--cx-accent); box-shadow: 0 0 0 2px rgba(53,224,218,.20); }
html[data-theme="light"] .cx-glossar-treffer { box-shadow: 0 0 0 2px rgba(20,23,28,.10); }

/* --- Know-How: die Auswahlseite in drei Bändern ---------------------------
   Zehn Beiträge in einem flachen Raster sagen nur, DASS es sie gibt. Die
   Bänder sagen, WANN man sie braucht – und das ist die Frage, mit der man
   herkommt. Das Kachelmaß bleibt bewusst breit (420 px Mindestbreite): Die
   Kacheln sollen wie Türen wirken, nicht wie der Anfang einer langen Liste. */
.cx-wissen-band { margin-top: 40px; }
.cx-wissen-band:first-of-type { margin-top: 26px; }
.cx-wissen-bandkopf {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding-bottom: 12px; border-bottom: 1px solid var(--cx-border);
}
.cx-wissen-bandkopf h2 { font-size: 21px; margin: 0; }
.cx-wissen-anzahl {
  font-size: 12.5px; color: var(--cx-steel); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
/* Die Erklärzeile darf umbrechen, aber erst als Letztes – deshalb eine große
   Grundbreite: Bei mittleren Fenstern rutscht sie unter Titel und Zahl,
   statt beide auseinanderzureißen. */
.cx-wissen-bandkopf p { margin: 0; color: var(--cx-text-muted); font-size: 14px; flex: 1 1 340px; }
.cx-wissen-grid { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); margin-top: 16px; }

/* Die Kachel ist seit 1.57 KEIN <a> mehr, weil die Bereichs-Chips darin
   eigene Verweise sind – ein Link im Link ist ungültiges HTML und wird vom
   Browser auseinandergerissen. Stattdessen spannt der Titellink über die
   ganze Fläche (::after), und die Chips liegen mit z-index darüber. Für den
   Anwender ändert sich nichts: Die Kachel bleibt vollflächig anklickbar. */
.cx-wissen-card { display: flex; flex-direction: column; position: relative; }
.cx-wissen-card:hover { border-color: var(--cx-blue); }
.cx-wissen-kopf { display: flex; align-items: baseline; gap: 14px; }
.cx-wissen-card h3 { margin: 0; font-size: 26px; flex: 1; }
/* Bewusst OHNE eigene Farbe: Der Titel war bisher blau, weil die ganze Kachel
   ein Link war. Jetzt trägt der Titel selbst den Link – und erbt damit
   dieselben geprüften Blautöne, hell wie dunkel. Eine Farbe hier würde die
   Kontrastregel für den hellen Modus (weiter oben) überstimmen. */
.cx-wissen-card h3 a { text-decoration: none; }
.cx-wissen-card h3 a::after { content: ''; position: absolute; inset: 0; border-radius: var(--cx-radius); }
.cx-wissen-card h3 a:focus-visible::after { outline: 2px solid var(--cx-blue); outline-offset: 2px; }
/* Das eine Maß, das alle zehn Beiträge vergleichbar macht. Vorher standen hier
   sieben verschiedene Zähleinheiten nebeneinander – „16 Kapitel“ wirkte größer
   als „234 Abkürzungen“. Die charakteristische Zahl steht weiterhin darunter,
   sie ist die Substanz; die Lesezeit ordnet sie nur ein. */
.cx-wissen-mass {
  font-size: 12.5px; font-weight: 700; color: var(--cx-steel);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.cx-wissen-card .cx-pos { margin: 6px 0 0; font-size: 14.5px; font-weight: 600; color: var(--cx-text); }
.cx-wissen-text { margin: 10px 0 14px; font-size: 15px; line-height: 1.62; flex: 1; }

/* Der Anschluss an den Katalog: wohin der Beitrag führt. Diese Verweise gab es
   bisher nur INNEN in den Beiträgen; auf der Übersicht standen ausgedachte
   Schlagwörter ohne Ziel. */
.cx-wissen-anschluss { padding-top: 13px; border-top: 1px solid var(--cx-border); }
.cx-wissen-anschluss-kopf {
  display: block; font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--cx-steel); font-weight: 700; margin-bottom: 8px;
}
.cx-wissen-anschluss .cx-tag-link { position: relative; z-index: 1; }
.cx-wissen-viele { margin: 0; font-size: 13px; color: var(--cx-steel); line-height: 1.5; }
.cx-wissen-viele b { color: var(--cx-text); }
.cx-wissen-card .cx-vendor-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--cx-border); }

/* Fristen: der eigentliche Anlass, warum jemand NIS2, DORA, Zertifikate oder
   FIDO aufschlägt. „gilt“ nimmt die Warnfarbe (läuft bereits), „kommt“ das
   Blau (Termin steht bevor), „Pflicht“ bleibt neutral – dort gibt es kein
   Datum, und eines zu erfinden wäre schlimmer als keines zu zeigen. */
.cx-frist {
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 700;
  padding: 4px 11px; border-radius: 99px; letter-spacing: .02em; white-space: nowrap;
}
.cx-frist-gilt { background: rgba(229,168,59,.14); color: var(--cx-warn); border: 1px solid rgba(229,168,59,.4); }
.cx-frist-kommt { background: rgba(30,123,232,.12); color: var(--cx-blue-light); border: 1px solid rgba(30,123,232,.4); }
.cx-frist-pflicht { color: var(--cx-steel); border: 1px solid var(--cx-border); font-weight: 600; }
html[data-theme="light"] .cx-frist-gilt { background: rgba(138,90,0,.10); border-color: rgba(138,90,0,.35); }
html[data-theme="light"] .cx-frist-kommt { color: var(--cx-blue-deep); }

/* Die Brücke ans Ende: Jeder Beitrag endet in einem Produktbereich – und von
   dort führt der Weg in den Katalog, für den comparXIS eigentlich gebaut ist.
   Genau dieser Schritt fehlte bis 1.56 vollständig. */
.cx-wissen-bruecke {
  margin-top: 44px; padding: 26px 28px;
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius);
  background: linear-gradient(180deg, rgba(30,123,232,.08), transparent);
}
.cx-wissen-bruecke h2 { font-size: 21px; margin: 0 0 6px; }
.cx-wissen-bruecke > p { margin: 0 0 18px; color: var(--cx-text-muted); font-size: 14.5px; max-width: 80ch; }
.cx-wissen-wege { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; }
.cx-wissen-weg {
  display: block; padding: 15px 17px; text-decoration: none;
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius-sm);
  background: var(--cx-graphite);
}
.cx-wissen-weg:hover { border-color: var(--cx-blue); }
.cx-wissen-weg b { display: block; font-family: var(--cx-font-display); font-size: 15px; color: var(--cx-text); margin-bottom: 3px; }
.cx-wissen-weg small { display: block; color: var(--cx-steel); font-size: 12.5px; line-height: 1.5; }
.cx-wissen-weg i { display: block; margin-top: 7px; font-style: normal; font-size: 13px; font-weight: 600; color: var(--cx-blue-light); }
html[data-theme="light"] .cx-wissen-weg i { color: var(--cx-blue-deep); }

@media (max-width: 620px) {
  .cx-wissen-kopf { flex-wrap: wrap; gap: 4px; }
  .cx-wissen-card h3 { font-size: 22px; flex-basis: 100%; }
  .cx-wissen-bruecke { padding: 20px 18px; }
}

/* --- Die Ablage: wer steht in der Aufstellung? ---------------------------
   Bis 1.71 stand hier eine Zeile „Weitere ins Zentrum stellen“ – sie
   beantwortete die Frage „16 Anbieter oben, sieben Knoten im Bild, wie komme
   ich an die anderen?“ mit: man stellt sie ins Zentrum. Das reichte nicht.
   In den Kreis kam ein Hersteller nur, wenn ein Steckbrief ihn NENNT, und
   zwei Drittel aller Paare sind einseitig, viele gar nicht gepflegt. Broadcom
   und Hornetsecurity nennen einander nicht – sie konnten deshalb nie zusammen
   im Bild sein, egal wer in der Mitte stand.
   Jetzt schaltet ein Klick den Hersteller in die Aufstellung, der Zielknopf
   daneben macht ihn zum Zentrum. Eine Liste statt zweier. */
.cx-rad-ablage { margin: 0 0 14px; }
.cx-rad-ablage-kopf {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.cx-rad-ablage-titel {
  font: 700 11px var(--cx-font-body); letter-spacing: .13em;
  text-transform: uppercase; color: var(--cx-steel);
}
.cx-rad-ablage-zahl { font-size: 12.5px; color: var(--cx-steel); }
.cx-rad-ablage-kopf .cx-wz-alles { margin-left: auto; }
.cx-rad-ablage-liste { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cx-rad-ablage-rest { font-size: 12.5px; color: var(--cx-steel); }
/* Ein Chip, zwei Aktionen: Der breite Teil schaltet den Hersteller in die
   Aufstellung, der Zielknopf rechts macht ihn zum Zentrum. Vorher standen
   dafür zwei fast gleiche Listen untereinander. */
.cx-rad-chip {
  display: inline-flex; align-items: stretch; border-radius: 99px;
  border: 1px solid var(--cx-border); background: var(--cx-graphite);
  overflow: hidden;
}
.cx-rad-chip:hover { border-color: var(--cx-blue); }
.cx-rad-chip.an { border-color: var(--cx-blue); background: rgba(30,123,232,.14); }
html[data-theme="light"] .cx-rad-chip.an { background: rgba(13,80,216,.10); }
.cx-rad-chip-haupt {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 5px 10px 5px 6px; border: 0; background: transparent;
  color: var(--cx-text-muted); font: 600 13px var(--cx-font-body);
}
.cx-rad-chip.an .cx-rad-chip-haupt { color: var(--cx-text); }
.cx-rad-chip-platte {
  width: 40px; height: 26px; border-radius: 6px; flex: none; padding: 3px;
  background: var(--cx-silver-light);
  display: flex; align-items: center; justify-content: center;
}
.cx-rad-chip-platte img { max-width: 100%; max-height: 20px; }
.cx-rad-chip-n {
  font-style: normal; font-size: 11px; font-weight: 700;
  color: var(--cx-steel); background: var(--cx-carbon);
  border-radius: 99px; padding: 1px 6px;
}
.cx-rad-chip-mitte {
  border: 0; border-left: 1px solid var(--cx-border); background: transparent;
  color: var(--cx-steel); cursor: pointer; padding: 0 10px; font-size: 14px;
}
.cx-rad-chip-mitte:hover { color: var(--cx-blue-light); background: rgba(30,123,232,.12); }
html[data-theme="light"] .cx-rad-chip-mitte:hover { color: var(--cx-blue-deep); }

/* Die Trefferliste des Suchfelds trägt jetzt zwei Knöpfe statt einer
   Klickfläche – dazunehmen und ins Zentrum stellen sind zwei Absichten. */
.cx-btn-mini {
  border: 1px solid var(--cx-border); background: var(--cx-carbon);
  color: var(--cx-text-muted); border-radius: 99px; cursor: pointer;
  padding: 4px 11px; font: 600 12px var(--cx-font-body); white-space: nowrap;
}
.cx-btn-mini:hover { border-color: var(--cx-blue); color: var(--cx-text); }
.cx-rad-tref-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* --- Matrix: dieselbe Aufstellung als Tabelle ----------------------------
   Der Stern beantwortet „wer steht gegen das Zentrum?“, die Matrix „wer steht
   gegen wen?“ – und zeigt als einzige Ansicht auch die Leerstellen. */
.cx-mx-huelle { overflow-x: auto; margin-bottom: 16px; }
table.cx-mx { border-collapse: collapse; font-size: 13px; }
table.cx-mx th, table.cx-mx td { border: 1px solid var(--cx-border); padding: 0; text-align: center; }
table.cx-mx .cx-mx-eck { background: transparent; border: 0; }
/* MIT table.cx-mx davor, nicht ohne: Die Grundregel oben setzt für alle th
   und td padding:0 und text-align:center und hat mit 0,1,2 die höhere
   Spezifität als eine blosse Klasse (0,1,0). Ohne den Zusatz gewinnt sie –
   die Zeilenköpfe standen deshalb zentriert statt links, und das Polster
   fehlte ganz. Reihenfolge im Stilblatt hilft dagegen nicht. */
table.cx-mx th.cx-mx-oben {
  height: 112px; width: 48px; vertical-align: bottom; padding: 0 0 8px;
  background: var(--cx-graphite); font-weight: 600;
}
/* Senkrecht gesetzt, weil sonst zwölf Spalten mit „Schwachstellen- &
   Exposure-Management“ breiter wären als jeder Bildschirm. */
.cx-mx-oben span {
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
  font-size: 12.5px; color: var(--cx-text-muted);
}
table.cx-mx th.cx-mx-links {
  text-align: left; padding: 6px 14px 6px 8px; background: var(--cx-graphite);
  font: 600 13px var(--cx-font-body); color: var(--cx-text); white-space: nowrap;
}
.cx-mx-links .cx-logoplate {
  display: inline-flex; width: 40px; height: 24px; padding: 3px;
  margin-right: 8px; vertical-align: middle; border-radius: 6px;
}
.cx-mx-links .cx-logoplate img { max-height: 18px; }
.cx-mx-zelle { width: 48px; height: 42px; }
.cx-mx-zelle button {
  width: 100%; height: 100%; border: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cx-mx-zelle:hover { background: rgba(30,123,232,.14); }
html[data-theme="light"] .cx-mx-zelle:hover { background: rgba(13,80,216,.10); }
.cx-mx-zelle.an { background: rgba(30,123,232,.22); outline: 1px solid var(--cx-blue); }
html[data-theme="light"] .cx-mx-zelle.an { background: rgba(13,80,216,.14); }
/* Die Diagonale ist keine leere Zelle, sondern eine, die es nicht geben kann –
   schraffiert statt weiß, damit sie nicht als „nichts hinterlegt“ gelesen wird. */
.cx-mx-selbst {
  background: repeating-linear-gradient(45deg, transparent, transparent 4px,
              var(--cx-border) 4px, var(--cx-border) 5px);
}
.cx-mx-z { font-size: 15px; font-weight: 700; line-height: 1; }
.cx-mx-z.st-beide { color: var(--cx-bz-beide); }
.cx-mx-z.st-eins  { color: var(--cx-bz-eins); }
.cx-mx-z.st-keine { color: var(--cx-bz-keine); font-size: 13px; }
.cx-mx-kasten { max-width: 760px; }
.cx-mx-kasten .cx-rad-abgrenzung { margin-top: 0; }

/* --- Merkzettel: gefundene Lücken sammeln --------------------------------
   Die Matrix zeigt, wo nichts hinterlegt ist – bei 8 bis 12 % Abdeckung ist
   das viel. Wer die Lücken im Gespräch findet, soll sie mitnehmen können,
   ohne sie auf Papier zu notieren. Gepflegt wird weiterhin in hersteller.json;
   der Zettel liefert den fertigen Text dorthin. */
.cx-merk {
  margin-top: 22px; max-width: 760px;
  background: var(--cx-graphite); border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius); padding: 16px 18px 18px;
}
.cx-merk-kopf {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.cx-merk-titel {
  font: 700 11px var(--cx-font-body); letter-spacing: .13em;
  text-transform: uppercase; color: var(--cx-steel);
}
.cx-merk-zahl { font-size: 12.5px; color: var(--cx-bz-eins); font-weight: 700; }
.cx-merk-kopf .cx-wz-alles { margin-left: auto; }
.cx-merk-liste { list-style: none; margin: 0 0 12px; padding: 0; }
.cx-merk-liste li {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 0; border-bottom: 1px solid var(--cx-border); font-size: 14px;
}
.cx-merk-liste li:last-child { border-bottom: 0; }
.cx-merk-liste i { color: var(--cx-steel); font-style: normal; font-weight: 400; }
.cx-merk-weg {
  margin-left: auto; flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: none; border: 1px solid var(--cx-border); color: var(--cx-steel);
  cursor: pointer; font-size: 11px; line-height: 1;
}
.cx-merk-weg:hover { color: #E5484D; border-color: #E5484D; }
.cx-merk-hinweis { font-size: 13px; color: var(--cx-text-muted); margin: 0 0 10px; }
.cx-merk-feld { display: block; margin-bottom: 12px; }
.cx-merk-feld textarea {
  width: 100%; resize: vertical; padding: 12px 14px;
  border-radius: var(--cx-radius-sm); border: 1px solid var(--cx-border);
  background: var(--cx-carbon); color: var(--cx-text);
  font: 13px ui-monospace, "SF Mono", Menlo, Consolas, monospace; line-height: 1.5;
}
.cx-merk-quittung { font-size: 13px; color: var(--cx-bz-beide); font-weight: 600; }
.cx-rad-sackgasse {
  margin: 14px 0 0; padding: 11px 14px; font-size: 13.5px; line-height: 1.5;
  color: var(--cx-text-muted); border-left: 3px solid var(--cx-warn);
  background: rgba(229,168,59,.07); border-radius: 0 var(--cx-radius-sm) var(--cx-radius-sm) 0;
}
html[data-theme="light"] .cx-rad-sackgasse { background: rgba(138,90,0,.07); }

/* --- Know-How: das Fragenband über den Bändern -----------------------------
   Wer die Seite aufschlägt, hat meistens keine Themenfrage, sondern eine
   Satzfrage. Sie steht deshalb VOR den Kacheln – und führt nicht auf den
   Beitragsanfang, sondern in das Kapitel, das sie beantwortet. Dass das
   funktioniert, ist die stille Folge der Suchreparatur aus 1.55.1. */
.cx-wissen-fragen {
  margin-top: 30px; padding: 22px 24px 20px;
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius);
  background: var(--cx-graphite);
}
.cx-wissen-fragen h2 { font-size: 19px; margin: 0 0 3px; }
.cx-wissen-fragen-sub { margin: 0 0 18px; color: var(--cx-steel); font-size: 13.5px; }
.cx-wissen-fragenspalten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 8px 30px;
}
.cx-wissen-fragengruppe h3 {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cx-steel); font-weight: 700; margin: 8px 0;
}
/* Die Zeilen ragen bewusst in den Innenabstand hinein: So bleibt der Text
   linksbündig zur Gruppenüberschrift, die Hover-Fläche ist trotzdem breiter
   als der Text – ein Ziel, das man auch mit ungenauem Zeigen trifft. */
.cx-wissen-frage {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 12px; margin: 0 -12px; border-radius: var(--cx-radius-sm);
  font-size: 14.5px; line-height: 1.45; color: var(--cx-text); text-decoration: none;
}
.cx-wissen-frage:hover { background: var(--cx-carbon); }
html[data-theme="light"] .cx-wissen-frage { color: var(--cx-text); }
html[data-theme="light"] .cx-wissen-frage:hover { background: var(--cx-carbon); }
.cx-wissen-frage-pfeil { flex: none; font-weight: 700; color: var(--cx-blue-light); }
html[data-theme="light"] .cx-wissen-frage-pfeil { color: var(--cx-blue-deep); }
.cx-wissen-frage small {
  display: block; margin-top: 2px; font-size: 12px;
  font-weight: 600; color: var(--cx-steel);
}

/* --- MITRE ATT&CK: eine Geschichte, keine Matrix -------------------------
   Die Seite erzählt einen Angriff. Deshalb sitzt die Bedienung in der
   Angriffskette, nicht in einer Tabelle: neun Glieder, seitlich gewischt statt
   umgebrochen – die Reihenfolge IST die Aussage, ein Umbruch zerlegt sie. */
.cx-mitre-intro p { font-size: 16px; line-height: 1.65; max-width: 760px; }
.cx-mitre-gross { font-size: 19px; line-height: 1.55; max-width: 760px; }
.cx-mitre-fragen { margin: 14px 0 0; padding-left: 20px; }
.cx-mitre-fragen li { font-size: 16px; margin-bottom: 6px; color: var(--cx-text); }
.cx-mitre-satz h3 { margin: 22px 0 8px; font-size: 18px; }
.cx-mitre-einbruch { margin: 10px 0 16px; padding-left: 22px; }
.cx-mitre-einbruch li { margin-bottom: 4px; font-size: 15px; }

.cx-mitre-begriffe { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.cx-mitre-begriffe h3 { margin: 0 0 2px; font-size: 21px; color: var(--cx-blue-light); }
.cx-mitre-frage { margin: 0 0 10px; font-size: 14px; color: var(--cx-steel); }
.cx-mitre-begriffe ul { margin: 10px 0 0; padding-left: 20px; font-size: 14.5px; }
.cx-mitre-begriffe li { margin-bottom: 3px; }
.cx-mitre-merksatz {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--cx-border);
  color: var(--cx-accent); font-weight: 600; font-size: 15px;
}

/* Das Mailzitat trägt den Fall – es muss wie eine echte Mail aussehen, sonst
   bleibt „gefälschte Rechnung“ eine Behauptung. */
.cx-mitre-mail {
  margin: 16px 0; padding: 16px 20px; border-left: 3px solid var(--cx-blue);
  background: var(--cx-carbon); border-radius: 0 var(--cx-radius-sm) var(--cx-radius-sm) 0;
  font-size: 15.5px; line-height: 1.6; color: var(--cx-text-muted);
}
.cx-mitre-auffordern { margin: 14px 0 0; font-size: 14.5px; color: var(--cx-steel); }
.cx-mitre-vorspann { max-width: 760px; font-size: 15.5px; margin-bottom: 4px; }

/* --- Die Angriffskette ---------------------------------------------------- */
.cx-mitre-kette-titel { margin-bottom: 14px; }
.cx-mitre-kette {
  display: flex; align-items: stretch; gap: 6px; margin-bottom: var(--cx-gap);
  overflow-x: auto; scrollbar-width: none; padding-bottom: 4px;
}
.cx-mitre-kette::-webkit-scrollbar { display: none; }
.cx-kette-glied {
  flex: none; display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 9px 14px; border-radius: 99px;
  background: var(--cx-graphite); border: 1px solid var(--cx-border);
  font-family: var(--cx-font-body); font-size: 14px; color: var(--cx-text-muted);
  transition: border-color .15s, color .15s, background .15s;
}
.cx-kette-glied:hover { border-color: var(--cx-blue); color: var(--cx-text); }
.cx-kette-glied[aria-selected="true"] {
  border-color: var(--cx-blue); color: var(--cx-white);
  background: var(--cx-gradient); font-weight: 600;
}
html[data-theme="light"] .cx-kette-glied[aria-selected="true"] { color: #fff; }
.cx-kette-nr {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--cx-carbon); color: var(--cx-blue); border: 1px solid var(--cx-border);
}
.cx-kette-glied[aria-selected="true"] .cx-kette-nr {
  background: rgba(255,255,255,.22); color: #fff; border-color: transparent;
}
.cx-kette-text { white-space: nowrap; }
.cx-kette-pfeil { align-self: center; color: var(--cx-steel); font-size: 13px; flex: none; }

/* --- Die Karte zum gewählten Schritt -------------------------------------- */
.cx-mitre-kopf { display: flex; align-items: center; gap: 16px; }
.cx-mitre-kopf h3 { margin: 0; font-size: 22px; }
.cx-mitre-schritt {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--cx-blue); background: var(--cx-carbon);
  border: 1px solid var(--cx-border);
}
.cx-mitre-orig { margin: 2px 0 0; font-size: 13px; color: var(--cx-steel); }
.cx-mitre-text { margin: 0 0 10px; font-size: 15.5px; line-height: 1.62; }
.cx-mitre-detail ul { margin: 0 0 10px; padding-left: 20px; font-size: 15px; line-height: 1.6; }
.cx-mitre-detail li { margin-bottom: 4px; }
.cx-mitre-label {
  margin: 20px 0 8px; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--cx-steel);
}
/* Der Alltagsvergleich ist der Kern der Seite und muss ins Auge springen –
   er ist das, was jemand nach dem Lesen weitererzählt. */
.cx-mitre-einfach {
  margin: 16px 0 0; padding: 12px 16px; border-radius: var(--cx-radius-sm);
  background: rgba(30,123,232,.10); border: 1px solid rgba(30,123,232,.30);
  font-size: 16px; line-height: 1.55; font-style: italic;
}
.cx-mitre-ziel { margin: 12px 0 0; font-size: 15px; }

/* MITRE-Kennungen bewusst NACH der Erklärung und optisch ruhiger als diese. */
.cx-mitre-zuordnung { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-mitre-taktik-chip, .cx-mitre-technik-chip {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 12px; border-radius: var(--cx-radius-sm);
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
  font-size: 14px; line-height: 1.35;
}
.cx-mitre-taktik-chip { border-color: var(--cx-blue); }
.cx-mitre-tid {
  display: inline-block; padding: 1px 7px; border-radius: 6px;
  font-size: 12px; font-variant-numeric: tabular-nums; color: var(--cx-steel);
  background: var(--cx-graphite); border: 1px solid var(--cx-border);
}
.cx-mitre-spalten { margin-top: 0; }
.cx-mitre-spalten .cx-mitre-label { margin-top: 20px; }

/* --- Überblick, Nutzen, Fazit --------------------------------------------- */
.cx-mitre-ueberblick { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.cx-mitre-ueber-karte { display: flex; gap: 14px; align-items: flex-start; }
.cx-mitre-ueber-karte h3 { margin: 0 0 4px; font-size: 17px; }
.cx-mitre-ueber-karte p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.cx-mitre-nutzen { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.cx-mitre-nutzen h3 { margin: 0 0 8px; font-size: 17px; color: var(--cx-blue-light); }
.cx-mitre-nutzen p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.cx-mitre-fazit p { max-width: 760px; font-size: 16px; line-height: 1.65; }
.cx-mitre-frage-alt {
  font-family: var(--cx-font-display); font-size: 22px; color: var(--cx-steel);
  margin: 18px 0;
}

/* --- Anhang: die Matrix, zusammengeklappt --------------------------------- */
.cx-mitre-matrix summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px;
}
.cx-mitre-matrix summary::-webkit-details-marker { display: none; }
.cx-mitre-matrix summary h2 { display: inline; margin: 0; font-size: 21px; }
.cx-mitre-matrix summary::after {
  content: "▾"; color: var(--cx-blue); font-size: 15px; transition: transform .2s;
}
.cx-mitre-matrix[open] summary::after { transform: rotate(180deg); }
.cx-mitre-taktiken {
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  margin-top: 18px;
}
.cx-mitre-taktik h3 { margin: 0; font-size: 17px; }
.cx-mitre-taktik-kopf { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; }
.cx-mitre-taktik .cx-mitre-text { font-size: 14px; margin: 10px 0 12px; }
/* Die neun Taktiken aus der Geschichte tragen den Akzentrahmen – das ist der
   Rückweg vom Anhang in die Erzählung. */
.cx-mitre-taktik.im-szenario { border-color: var(--cx-blue); }
.cx-mitre-marke {
  flex: none; font-size: 11px; padding: 2px 8px; border-radius: 99px;
  background: rgba(30,123,232,.14); border: 1px solid rgba(30,123,232,.35);
  color: var(--cx-blue-light); white-space: nowrap;
}
/* Bereichs-Chip als Link: dieselbe Optik wie ein Tag, aber klickbar – das ist
   die Brücke vom Angriffsschritt zu den Herstellern, die ihn adressieren. */
.cx-tag-link { text-decoration: none; transition: border-color .15s, color .15s; }
.cx-tag-link:hover { border-color: var(--cx-accent); color: var(--cx-accent); }

@media (max-width: 620px) {
  .cx-mitre-kopf { align-items: flex-start; }
  .cx-mitre-frage-alt { font-size: 19px; }
  .cx-mitre-mail { padding: 12px 14px; font-size: 14.5px; }
}

/* --- RAID einfach erklärt -------------------------------------------------
   Die Schemata sind Inline-SVG aus app.js. Die Farben stehen deshalb HIER und
   nicht im Bild: So stimmen sie in hell wie dunkel, und ein neues RAID-Level
   erbt sie automatisch. Ampelfarben werden bewusst sparsam eingesetzt – Grün
   und Rot gibt es nur bei Vorteil/Nachteil, nicht im Schema selbst. */
.cx-raid-einstieg p { max-width: 760px; font-size: 16px; line-height: 1.65; }
.cx-raid-einstieg h3 { margin: 22px 0 8px; font-size: 18px; }
.cx-raid-abk {
  margin: 18px 0; padding: 12px 16px; border-radius: var(--cx-radius-sm);
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
  font-size: 15px;
}
.cx-raid-abk span { font-family: var(--cx-font-display); color: var(--cx-blue-light); }
.cx-raid-warnung {
  margin-top: 18px; padding: 14px 18px; border-radius: var(--cx-radius-sm);
  background: rgba(240,180,40,.10); border: 1px solid rgba(240,180,40,.42);
  max-width: 760px;
}
.cx-raid-warnung p { margin: 0; font-size: 15px; line-height: 1.6; }
.cx-raid-warnung-satz { font-weight: 600; font-size: 16px !important; margin-bottom: 6px !important; }

/* --- Reiterleiste der Level ----------------------------------------------- */
.cx-raid-wahl {
  display: flex; gap: 8px; margin-bottom: var(--cx-gap);
  overflow-x: auto; scrollbar-width: none; padding-bottom: 4px;
}
.cx-raid-wahl::-webkit-scrollbar { display: none; }
.cx-raid-reiter {
  flex: none; display: flex; flex-direction: column; gap: 2px; cursor: pointer;
  padding: 10px 18px; border-radius: var(--cx-radius-sm); text-align: left;
  background: var(--cx-graphite); border: 1px solid var(--cx-border);
  font-family: var(--cx-font-body); color: var(--cx-text-muted);
  transition: border-color .15s, color .15s, background .15s;
}
.cx-raid-reiter:hover { border-color: var(--cx-blue); color: var(--cx-text); }
.cx-raid-reiter[aria-selected="true"] {
  border-color: transparent; background: var(--cx-gradient-flaeche); color: #fff;
}
.cx-raid-reiter-name { font-family: var(--cx-font-display); font-size: 17px; font-weight: 600; }
.cx-raid-reiter-kurz { font-size: 12px; opacity: .8; white-space: nowrap; }

/* --- Detailkarte ----------------------------------------------------------- */
.cx-raid-detail-kopf { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.cx-raid-detail-kopf > div:first-child { flex: 1; min-width: 260px; }
.cx-raid-detail-kopf h3 { margin: 0 0 8px; font-size: 22px; }
.cx-raid-minimum {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: var(--cx-radius-sm);
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
  font-size: 12px; color: var(--cx-steel); line-height: 1.3;
}
.cx-raid-minimum-zahl {
  font-family: var(--cx-font-display); font-size: 30px; font-weight: 600;
  color: var(--cx-blue); font-variant-numeric: tabular-nums;
}

/* --- Das Schema ----------------------------------------------------------- */
.cx-raid-figur {
  margin: 20px 0 0; padding: 18px 16px 12px; border-radius: var(--cx-radius-sm);
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
  /* Bei vier Platten ist das SVG breiter als ein schmales Display – es wird
     gewischt, statt die Seite seitlich zu sprengen. */
  overflow-x: auto;
}
.cx-raid-figur figcaption {
  margin-top: 12px; font-size: 13.5px; color: var(--cx-steel); line-height: 1.5;
}
.cx-raid-svg { display: block; width: 100%; height: auto; }
.cx-raid-kopf {
  fill: var(--cx-steel); font-family: var(--cx-font-body); font-size: 12px;
  text-anchor: middle;
}
.cx-raid-linie { stroke: var(--cx-border); stroke-width: 1; }
.cx-raid-block { stroke-width: 1; }
.cx-raid-block-text {
  fill: var(--cx-text); font-family: var(--cx-font-body); font-size: 13px;
  font-weight: 600; text-anchor: middle;
}
.cx-raid-d { fill: rgba(30,123,232,.20); stroke: rgba(30,123,232,.65); }
.cx-raid-p { fill: rgba(53,224,218,.16); stroke: rgba(53,224,218,.55); }
.cx-raid-q { fill: rgba(240,180,40,.14); stroke: rgba(240,180,40,.55); }
.cx-raid-paar {
  fill: none; stroke: var(--cx-steel); stroke-width: 1; stroke-dasharray: 5 4;
}
html[data-theme="light"] .cx-raid-p { fill: rgba(15,118,110,.14); stroke: rgba(15,118,110,.55); }
html[data-theme="light"] .cx-raid-q { fill: rgba(190,120,20,.14); stroke: rgba(190,120,20,.55); }

.cx-raid-legende {
  display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 12px;
  font-size: 12.5px; color: var(--cx-steel);
}
.cx-raid-legende span { display: inline-flex; align-items: center; gap: 7px; }
.cx-raid-punkt {
  width: 13px; height: 13px; border-radius: 4px; display: inline-block;
  background: rgba(30,123,232,.20); border: 1px solid rgba(30,123,232,.65);
}
i.cx-raid-p { background: rgba(53,224,218,.16); border-color: rgba(53,224,218,.55); }
i.cx-raid-q { background: rgba(240,180,40,.14); border-color: rgba(240,180,40,.55); }
i.cx-raid-spiegel { background: none; border: 1px dashed var(--cx-steel); }
html[data-theme="light"] i.cx-raid-p { background: rgba(15,118,110,.14); border-color: rgba(15,118,110,.55); }
html[data-theme="light"] i.cx-raid-q { background: rgba(190,120,20,.14); border-color: rgba(190,120,20,.55); }

/* --- Vorteile / Nachteile ------------------------------------------------- */
.cx-raid-spalten, .cx-raid-gegenueber { margin-top: 0; }
.cx-raid-ja ul, .cx-raid-nein ul { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.6; }
.cx-raid-ja li { margin-bottom: 5px; }
.cx-raid-nein li { margin-bottom: 5px; }
.cx-raid-ja li::marker { color: var(--cx-accent); }
.cx-raid-nein li::marker { color: #E06A6A; }
html[data-theme="light"] .cx-raid-nein li::marker { color: #C0392B; }

/* --- Kapazitätsbalken: warum aus 16 TB plötzlich 8 werden ----------------- */
.cx-raid-balken { margin: 0 0 4px; }
.cx-raid-balken-spur {
  height: 16px; border-radius: 99px; overflow: hidden;
  background: repeating-linear-gradient(135deg,
    var(--cx-carbon) 0 6px, var(--cx-graphite) 6px 12px);
  border: 1px solid var(--cx-border);
}
.cx-raid-balken-nutz { height: 100%; background: var(--cx-gradient); }
.cx-raid-balken-text { margin: 7px 0 0; font-size: 13.5px; color: var(--cx-steel); }
.cx-raid-rechenbeispiel { margin: 10px 0 0; font-size: 14.5px; color: var(--cx-text-muted); }
.cx-raid-rechnung { display: grid; gap: 18px; margin-top: 8px; }
.cx-raid-rechnung-zeile { display: grid; grid-template-columns: 90px 1fr; gap: 16px; align-items: start; }
.cx-raid-rechnung-level {
  font-family: var(--cx-font-display); font-weight: 600; font-size: 15px; padding-top: 1px;
}

/* --- Empfehlungen, Begriffe, Backup-Abschnitt ----------------------------- */
.cx-raid-empfehlung, .cx-raid-begriffe {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.cx-raid-fuer { margin: 0; font-size: 12.5px; color: var(--cx-steel); }
.cx-raid-empfehlung h3 { margin: 4px 0 8px; font-size: 21px; color: var(--cx-blue-light); }
.cx-raid-empfehlung p:last-child { margin: 0; font-size: 14.5px; line-height: 1.55; }
.cx-raid-begriffe h3 { margin: 0 0 8px; font-size: 17px; }
.cx-raid-begriffe p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.cx-raid-backup p { max-width: 820px; font-size: 16px; line-height: 1.65; }
.cx-raid-kernsatz {
  font-family: var(--cx-font-display); font-size: 24px; font-weight: 600;
  color: var(--cx-accent); margin: 14px 0 18px;
}
.cx-raid-hinweis { border-color: rgba(240,180,40,.42); }
.cx-raid-hinweis h2 { color: #F0B428; }
html[data-theme="light"] .cx-raid-hinweis h2 { color: #8A5D00; }

/* Die Vergleichstabelle hat fünf Spalten und muss auf dem Telefon wischbar
   sein – sonst schiebt sie die ganze Seite seitlich. */
.cx-tabelle-rahmen { overflow-x: auto; margin-top: 8px; }
.cx-raid-tabelle { min-width: 720px; }
.cx-raid-zahl { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
  .cx-raid-rechnung-zeile { grid-template-columns: 1fr; gap: 6px; }
  .cx-raid-kernsatz { font-size: 20px; }
  .cx-raid-minimum { padding: 8px 12px; }
}

/* --- Versionsangabe und Versionsseite -------------------------------------
   Die Nummer steht dort, wo vorher „Stand TT.MM.JJJJ“ stand – als Link, weil
   eine Zahl allein nichts erklärt. Ein Klick führt in den Verlauf. */
.cx-version-link { color: var(--cx-steel); text-decoration: underline; text-underline-offset: 2px; }
.cx-version-link:hover { color: var(--cx-accent); }
.cx-version-regel ul { margin: 12px 0 0; padding-left: 20px; font-size: 15px; line-height: 1.7; }
.cx-version-schema {
  font-family: var(--cx-font-display); font-size: 34px; font-weight: 600;
  margin: 6px 0 0; letter-spacing: .02em;
}
/* Drei Farben, drei Bedeutungen – die Legende darunter braucht dann keine
   Wiederholung der Zahlen, das Auge stellt die Zuordnung selbst her. */
.cx-version-schema b, .cx-version-regel li b { color: var(--cx-blue-light); }
.cx-version-schema span, .cx-version-regel li span { color: var(--cx-accent); }
.cx-version-schema i, .cx-version-regel li i { color: var(--cx-steel); font-style: normal; }
.cx-version-regel li b, .cx-version-regel li span, .cx-version-regel li i { font-weight: 600; }

.cx-version-liste { display: grid; gap: var(--cx-gap); margin-top: 24px; }
.cx-version-eintrag.aktuell { border-color: var(--cx-blue); }
.cx-version-kopf { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.cx-version-kopf h3 { margin: 0; font-size: 19px; }
.cx-version-nr {
  font-family: var(--cx-font-display); font-size: 15px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--cx-blue);
  padding: 3px 10px; border-radius: 99px;
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
}
.cx-version-marke {
  font-size: 11px; padding: 2px 9px; border-radius: 99px; color: var(--cx-accent);
  background: rgba(53,224,218,.12); border: 1px solid rgba(53,224,218,.35);
}
html[data-theme="light"] .cx-version-marke {
  background: rgba(15,118,110,.10); border-color: rgba(15,118,110,.35);
}
.cx-version-eintrag p { margin: 12px 0 0; font-size: 15px; line-height: 1.62; max-width: 820px; }

/* --- IP-Adressen: Anatomie, Rechner, Wegkette -----------------------------
   Die Seite ist lang, deshalb oben eine Kapitelleiste. Kernstück ist der
   Rechner: Netzanteil blau, Geräteanteil cyan – dieselbe Zuordnung gilt in der
   Bitleiste, in den Adressvergleichen und in der 254er-Aufteilung, damit die
   Farbe überall dasselbe bedeutet. */
.cx-ip-kapitel { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.cx-ip-kapitel a {
  font-size: 13px; color: var(--cx-text-muted); padding: 5px 12px; border-radius: 99px;
  background: var(--cx-graphite); border: 1px solid var(--cx-border);
  transition: border-color .15s, color .15s;
}
.cx-ip-kapitel a:hover { border-color: var(--cx-blue); color: var(--cx-text); }
.cx-ip-vorspann { font-size: 17px; line-height: 1.65; max-width: 780px; color: var(--cx-text-muted); }
.cx-ip-chips { margin-top: 16px; }

/* --- Adress-Anatomie ------------------------------------------------------ */
.cx-ip-anatomie { margin-top: 20px; }
.cx-ip-adresse-gross {
  display: flex; align-items: flex-end; gap: 6px; flex-wrap: wrap;
  padding-bottom: 6px;
}
.cx-ip-block {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 16px; border-radius: var(--cx-radius-sm);
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
}
.cx-ip-zahl {
  font-family: var(--cx-font-display); font-size: 30px; font-weight: 600;
  color: var(--cx-blue-light); font-variant-numeric: tabular-nums; line-height: 1;
}
.cx-ip-bin {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; letter-spacing: .12em; color: var(--cx-steel);
}
.cx-ip-blocknr { font-size: 10.5px; color: var(--cx-steel); letter-spacing: .04em; }
.cx-ip-punkt-gross {
  font-family: var(--cx-font-display); font-size: 30px; font-weight: 600;
  color: var(--cx-steel); padding-bottom: 26px;
}
.cx-ip-anatomie-text { margin: 18px 0 0; font-size: 15px; line-height: 1.62; max-width: 780px; }
.cx-ip-rechnung {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 16px;
  padding: 8px 16px; border-radius: 99px;
  background: rgba(30,123,232,.10); border: 1px solid rgba(30,123,232,.30);
  font-size: 15px;
}
.cx-ip-rechnung i { color: var(--cx-steel); font-style: normal; }
.cx-ip-rechnung b { color: var(--cx-blue-light); font-size: 17px; }

.cx-ip-warum, .cx-ip-welten, .cx-ip-router, .cx-ip-gruende { margin-top: 20px; }
.cx-ip-strasse { display: flex; align-items: baseline; gap: 12px; margin: 6px 0; }
.cx-ip-strasse b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 17px; color: var(--cx-blue-light);
}
.cx-ip-strasse span { font-size: 13px; color: var(--cx-steel); }

/* --- DNS ------------------------------------------------------------------ */
.cx-ip-dns { margin-top: 20px; }
.cx-ip-dialog { display: grid; gap: 10px; margin-bottom: 18px; }
.cx-ip-sprech {
  padding: 12px 16px; border-radius: var(--cx-radius-sm); max-width: 560px;
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
}
.cx-ip-sprech.antwort {
  margin-left: auto; border-color: rgba(30,123,232,.45); background: rgba(30,123,232,.10);
}
.cx-ip-wer { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--cx-steel); }
.cx-ip-sprech p { margin: 4px 0 0; font-size: 15.5px; }
.cx-ip-telefonbuch {
  display: grid; gap: 8px; margin: 18px 0; padding: 14px 16px;
  border-radius: var(--cx-radius-sm); background: var(--cx-carbon);
  border: 1px solid var(--cx-border);
}
.cx-ip-telefonbuch > div { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cx-ip-tb-name { min-width: 150px; font-weight: 600; }
.cx-ip-tb-pfeil { color: var(--cx-steel); }
.cx-ip-tb-nr {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--cx-accent);
}

/* --- Privat / öffentlich -------------------------------------------------- */
.cx-ip-privat { border-color: rgba(53,224,218,.35); }
.cx-ip-oeffentlich { border-color: rgba(30,123,232,.45); }
.cx-ip-bereichsliste { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.cx-ip-bereichsliste code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px;
  padding: 6px 10px; border-radius: 8px;
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
}
.cx-ip-knappheit {
  margin-top: var(--cx-gap); display: flex; gap: 28px; align-items: center; flex-wrap: wrap;
}
.cx-ip-knappheit > div:first-child { flex: 1; min-width: 280px; }
.cx-ip-knappheit h3 { margin: 0 0 6px; font-size: 17px; }
.cx-ip-knappheit h3 + p { margin: 0 0 16px; font-size: 15px; line-height: 1.62; }
.cx-ip-zahl-gross {
  flex: none; text-align: center; padding: 20px 28px; border-radius: var(--cx-radius);
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
}
.cx-ip-zahl-gross b {
  display: block; font-family: var(--cx-font-display); font-size: 40px;
  color: var(--cx-blue-light); line-height: 1;
}
.cx-ip-zahl-gross span {
  display: block; margin-top: 8px; font-variant-numeric: tabular-nums;
  font-size: 17px; color: var(--cx-text);
}
.cx-ip-zahl-gross i { display: block; margin-top: 2px; font-size: 12px; color: var(--cx-steel); font-style: normal; }

/* --- Der Rechner ---------------------------------------------------------- */
.cx-ip-rechner { margin-top: 20px; }
.cx-ip-rechner-kopf { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.cx-ip-rechner-kopf > div:first-child { flex: 1; min-width: 260px; }
.cx-ip-rechner-kopf h3 { margin: 0 0 6px; font-size: 19px; }
.cx-ip-rechner-kopf p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.cx-ip-eingabe { display: flex; align-items: flex-end; gap: 10px; }
.cx-ip-eingabe label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--cx-steel); }
.cx-ip-eingabe input {
  width: 170px; padding: 9px 12px; border-radius: var(--cx-radius-sm);
  background: var(--cx-carbon); color: var(--cx-text); border: 1px solid var(--cx-border);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px;
}
.cx-ip-eingabe input:focus { outline: none; border-color: var(--cx-blue); }
.cx-ip-eingabe input.fehler { border-color: #E06A6A; }
.cx-ip-praefix-anzeige {
  font-family: var(--cx-font-display); font-size: 22px; color: var(--cx-accent); padding-bottom: 4px;
}
.cx-ip-fehler { margin: 8px 0 0; font-size: 13px; color: #E06A6A; min-height: 18px; }
html[data-theme="light"] .cx-ip-fehler { color: #C0392B; }
.cx-ip-beispiele { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 20px; }

/* Bitleiste: 32 Schalter. Die Grenze zwischen Netz und Gerät ist eine echte
   Linie, kein Farbwechsel allein – sie ist der Kern der ganzen Erklärung. */
.cx-ip-bits {
  display: flex; align-items: flex-start; gap: 4px; flex-wrap: wrap;
  padding: 16px; border-radius: var(--cx-radius-sm);
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
}
.cx-ip-oktett { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cx-ip-bitreihe { display: flex; gap: 2px; }
.cx-ip-bit {
  width: 19px; height: 26px; display: grid; place-items: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  border-radius: 4px; border: 1px solid transparent;
}
.cx-ip-bit.netz { background: rgba(30,123,232,.22); color: var(--cx-blue-light); border-color: rgba(30,123,232,.45); }
.cx-ip-bit.host { background: rgba(53,224,218,.12); color: var(--cx-accent); border-color: rgba(53,224,218,.30); }
.cx-ip-bit.grenze { box-shadow: -3px 0 0 0 var(--cx-accent); }
.cx-ip-dezimal {
  font-family: var(--cx-font-display); font-size: 17px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cx-ip-punkt { align-self: center; color: var(--cx-steel); padding-bottom: 22px; }
.cx-ip-legende { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: var(--cx-steel); }
.cx-ip-legende span { display: inline-flex; align-items: center; gap: 7px; }
.cx-ip-punkt-legende { width: 13px; height: 13px; border-radius: 4px; display: inline-block; }
.cx-ip-punkt-legende.netz { background: rgba(30,123,232,.22); border: 1px solid rgba(30,123,232,.45); }
.cx-ip-punkt-legende.host { background: rgba(53,224,218,.12); border: 1px solid rgba(53,224,218,.30); }

.cx-ip-regler { display: flex; align-items: center; gap: 14px; margin: 20px 0; flex-wrap: wrap; }
.cx-ip-regler > span:first-child { font-size: 13px; color: var(--cx-steel); }
.cx-ip-regler input[type="range"] { flex: 1; min-width: 220px; accent-color: var(--cx-blue); }
.cx-ip-regler-wert {
  font-family: var(--cx-font-display); font-size: 19px; color: var(--cx-accent);
  min-width: 46px; text-align: right;
}
.cx-ip-werte {
  display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.cx-ip-wert {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 10px 14px; border-radius: var(--cx-radius-sm);
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
}
.cx-ip-wert span { font-size: 12.5px; color: var(--cx-steel); }
.cx-ip-wert b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.cx-ip-wert.netz b { color: var(--cx-blue-light); }
.cx-ip-wert.bcast b { color: var(--cx-accent); }
.cx-ip-wert.gross b { font-family: var(--cx-font-display); font-size: 20px; }
.cx-ip-einordnung { margin: 16px 0 0; font-size: 14.5px; color: var(--cx-text-muted); }

.cx-ip-warum254 { margin-top: var(--cx-gap); }
.cx-ip-warum254 h3 { margin: 0 0 8px; font-size: 18px; }
.cx-ip-254 { display: flex; margin-top: 16px; border-radius: var(--cx-radius-sm); overflow: hidden; }
.cx-ip-254-teil {
  padding: 10px 8px; font-size: 12.5px; text-align: center; white-space: nowrap;
  border: 1px solid var(--cx-border);
}
.cx-ip-254-teil.netz { background: rgba(30,123,232,.22); color: var(--cx-blue-light); }
.cx-ip-254-teil.host { flex: 1; background: rgba(53,224,218,.12); color: var(--cx-accent); }
.cx-ip-254-teil.bcast { background: rgba(240,180,40,.14); color: #F0B428; }
html[data-theme="light"] .cx-ip-254-teil.bcast { color: #8A5D00; }

/* --- Subnetting ----------------------------------------------------------- */
.cx-ip-teilung { margin-top: 20px; }
.cx-ip-teilung-zeile { display: flex; align-items: center; gap: 14px; }
.cx-ip-teilung-marke { flex: none; width: 62px; font-size: 12px; color: var(--cx-steel); }
.cx-ip-balken { flex: 1; display: flex; gap: 4px; }
.cx-ip-balken-ganz {
  flex: 1; padding: 16px; text-align: center; border-radius: var(--cx-radius-sm);
  background: rgba(30,123,232,.14); border: 1px solid rgba(30,123,232,.40);
  font-size: 14.5px;
}
.cx-ip-balken-teil {
  flex: 1; padding: 12px 8px; border-radius: var(--cx-radius-sm); text-align: center;
  background: rgba(53,224,218,.10); border: 1px solid rgba(53,224,218,.32);
}
.cx-ip-balken-teil b { display: block; font-size: 14px; }
.cx-ip-balken-teil span {
  display: block; margin-top: 3px; font-size: 11.5px; color: var(--cx-steel);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.cx-ip-balken-teil i { display: block; margin-top: 2px; font-size: 11px; color: var(--cx-accent); font-style: normal; }
.cx-ip-pfeil-runter { text-align: center; color: var(--cx-steel); font-size: 20px; margin: 10px 0; padding-left: 62px; }

/* --- Gateway-Entscheidung ------------------------------------------------- */
.cx-ip-entscheidung { margin-top: 20px; }
.cx-ip-entscheidung h3 { margin: 0 0 8px; font-size: 18px; }
.cx-ip-fall {
  margin-top: 16px; padding: 16px; border-radius: var(--cx-radius-sm);
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
  display: grid; gap: 12px;
}
.cx-ip-fall.gleich { border-color: rgba(53,224,218,.40); }
.cx-ip-fall.fremd { border-color: rgba(240,180,40,.42); }
.cx-ip-fall-adressen { display: grid; gap: 6px; }
.cx-ip-fall-zeile {
  display: flex; align-items: baseline; gap: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px;
}
.cx-ip-fall-zeile i {
  font-family: var(--cx-font-body); font-style: normal; font-size: 12px;
  color: var(--cx-steel); min-width: 108px;
}
.cx-ip-netzteil { color: var(--cx-blue-light); font-weight: 600; }
.cx-ip-hostteil { color: var(--cx-steel); }
.cx-ip-trenner { color: var(--cx-steel); }
.cx-ip-fall-ergebnis { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cx-ip-fall-marke {
  font-size: 11px; padding: 3px 10px; border-radius: 99px;
  background: var(--cx-graphite); border: 1px solid var(--cx-border); color: var(--cx-steel);
}
.cx-ip-fall.gleich .cx-ip-fall-ergebnis b { color: var(--cx-accent); }
.cx-ip-fall.fremd .cx-ip-fall-ergebnis b { color: #F0B428; }
html[data-theme="light"] .cx-ip-fall.fremd .cx-ip-fall-ergebnis b { color: #8A5D00; }
.cx-ip-fall p { margin: 0; font-size: 14.5px; color: var(--cx-text-muted); }

/* --- NAT ------------------------------------------------------------------ */
.cx-ip-nat { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.cx-ip-nat-kasten {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 14px; border-radius: var(--cx-radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
}
.cx-ip-nat-kasten i {
  font-family: var(--cx-font-body); font-style: normal; font-size: 10.5px; color: var(--cx-steel);
}
.cx-ip-nat-kasten.privat { border-color: rgba(53,224,218,.35); }
.cx-ip-nat-kasten.router { border-color: rgba(30,123,232,.45); background: rgba(30,123,232,.10); }
.cx-ip-nat-kasten.oeffentlich { border-color: rgba(30,123,232,.45); }
.cx-ip-nat-pfeil { color: var(--cx-steel); }

/* --- Helfer, Wegkette, Begriffe ------------------------------------------- */
.cx-ip-helfer, .cx-ip-begriffe {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.cx-ip-helfer-kopf { display: flex; align-items: baseline; gap: 10px; }
.cx-ip-helfer-kopf h3 { margin: 0; font-size: 16px; }
.cx-ip-helfer-kurz {
  font-family: var(--cx-font-display); font-size: 15px; font-weight: 600; color: var(--cx-blue-light);
  padding: 2px 10px; border-radius: 99px;
  background: rgba(30,123,232,.12); border: 1px solid rgba(30,123,232,.32);
}
.cx-ip-helfer p { font-size: 14.5px; line-height: 1.58; margin: 12px 0 0; }
.cx-ip-helfer-beispiel {
  display: inline-block; margin-top: 12px; padding: 5px 10px; border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  color: var(--cx-accent); background: var(--cx-carbon); border: 1px solid var(--cx-border);
}
.cx-ip-begriffe h3 { margin: 0 0 6px; font-size: 16px; }
.cx-ip-begriffe p { margin: 0; font-size: 14px; line-height: 1.55; }

.cx-ip-weg { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.cx-ip-weg > li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px 16px; border-radius: var(--cx-radius-sm);
  background: var(--cx-graphite); border: 1px solid var(--cx-border);
}
.cx-ip-weg-nr {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--cx-blue); background: var(--cx-carbon); border: 1px solid var(--cx-border);
}
.cx-ip-weg b { font-size: 14.5px; }
.cx-ip-weg p { margin: 2px 0 0; font-size: 14.5px; color: var(--cx-text-muted); line-height: 1.55; }

/* Heller Modus: --cx-blue-light (#3FA9FF) erreicht auf den hellblauen Flächen
   nur 1,77:1 und ist damit faktisch unlesbar – nachgemessen an der gemischten
   Hintergrundfarbe, nicht geschätzt. --cx-blue-deep kommt auf 4,67:1 und
   erfüllt die AA-Anforderung. Betrifft alle Stellen, an denen der Netzanteil
   blau auf blau steht; im dunklen Modus bleibt es beim helleren Ton. */
html[data-theme="light"] .cx-ip-bit.netz,
html[data-theme="light"] .cx-ip-254-teil.netz,
html[data-theme="light"] .cx-ip-netzteil,
html[data-theme="light"] .cx-ip-wert.netz b,
html[data-theme="light"] .cx-ip-helfer-kurz,
html[data-theme="light"] .cx-ip-strasse b,
html[data-theme="light"] .cx-ip-zahl,
html[data-theme="light"] .cx-ip-zahl-gross b,
html[data-theme="light"] .cx-ip-rechnung b { color: var(--cx-blue-deep); }

@media (max-width: 620px) {
  .cx-ip-bit { width: 15px; height: 22px; font-size: 10px; }
  .cx-ip-dezimal { font-size: 14px; }
  .cx-ip-zahl { font-size: 24px; }
  .cx-ip-teilung-zeile { flex-direction: column; align-items: stretch; gap: 8px; }
  .cx-ip-teilung-marke { width: auto; }
  .cx-ip-pfeil-runter { padding-left: 0; }
  .cx-ip-balken.vier { flex-direction: column; }
  .cx-ip-eingabe { width: 100%; }
  .cx-ip-eingabe input { width: 100%; }
}

/* --- NIS2: Analogie, zehn Pflichten, Lösungsbrücke ------------------------
   Die Seite lebt vom Vergleich mit dem Brandschutz. Deshalb bekommt die
   Gegenüberstellung eine eigene, ruhige Darstellung – sie ist das Bild, das
   nach dem Lesen hängen bleibt. */
.cx-nis-bild { margin-top: 8px; }
.cx-nis-bild p, .cx-nis-fall p { font-size: 16px; line-height: 1.65; max-width: 800px; }
.cx-nis-kernsatz {
  margin: 18px 0 0; padding: 14px 18px; border-radius: var(--cx-radius-sm);
  background: rgba(30,123,232,.10); border: 1px solid rgba(30,123,232,.32);
  font-family: var(--cx-font-display); font-size: 18px; line-height: 1.45;
}
.cx-nis-hinweis { margin-top: 16px; font-size: 13.5px; color: var(--cx-steel); max-width: 800px; line-height: 1.6; }

.cx-nis-abk { margin-top: 18px; }
.cx-nis-abk-zeile { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cx-nis-abk-kurz {
  font-family: var(--cx-font-display); font-size: 30px; font-weight: 600;
  color: var(--cx-blue-light); padding: 6px 18px; border-radius: var(--cx-radius-sm);
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
}
.cx-nis-abk-zeile b { display: block; font-size: 17px; }
.cx-nis-abk-zeile span { display: block; margin-top: 2px; font-size: 14px; color: var(--cx-steel); }
.cx-nis-abk p { margin: 14px 0 0; font-size: 14.5px; color: var(--cx-text-muted); }
html[data-theme="light"] .cx-nis-abk-kurz { color: var(--cx-blue-deep); }

.cx-nis-warum, .cx-nis-warumloesung { margin-top: 18px; }
.cx-nis-warum ul { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.7; }
.cx-nis-warum li::marker { color: #F0B428; }
.cx-nis-zitat { display: flex; flex-direction: column; justify-content: center; }
.cx-nis-zitat p {
  margin: 0; font-family: var(--cx-font-display); font-size: 22px; line-height: 1.4;
  color: var(--cx-accent);
}
.cx-nis-zitat span { margin-top: 10px; font-size: 13px; color: var(--cx-steel); }
.cx-nis-branchen { margin-top: 16px; }
.cx-nis-branchen .cx-tag { font-size: 13px; padding: 5px 13px; }

/* --- Brandschutz-Gegenüberstellung --------------------------------------- */
.cx-nis-brand { margin-top: 18px; }
.cx-nis-brand-kopf, .cx-nis-brand-zeile {
  display: grid; grid-template-columns: 1fr 40px 1fr; align-items: center; gap: 10px;
}
.cx-nis-brand-kopf {
  padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--cx-border);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--cx-steel);
}
.cx-nis-brand-kopf span:last-child { text-align: right; }
.cx-nis-brand-zeile { padding: 9px 0; border-bottom: 1px solid var(--cx-border); font-size: 15px; }
.cx-nis-brand-zeile:last-of-type { border-bottom: none; }
.cx-nis-brand-links { color: var(--cx-text-muted); }
.cx-nis-brand-pfeil { text-align: center; color: var(--cx-steel); }
.cx-nis-brand-rechts { text-align: right; color: var(--cx-blue-light); font-weight: 600; }
html[data-theme="light"] .cx-nis-brand-rechts { color: var(--cx-blue-deep); }

/* --- Die zehn Pflichten --------------------------------------------------- */
.cx-nis-pflichten { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.cx-nis-pflicht { display: flex; flex-direction: column; gap: 10px; }
.cx-nis-pflicht-kopf { display: flex; align-items: center; gap: 14px; }
.cx-nis-pflicht-kopf h3 { margin: 0; font-size: 18px; }
.cx-nis-pflicht > p { margin: 0; font-size: 15px; line-height: 1.6; }
/* Das Beispiel ist der Teil, den man weitererzählt – abgesetzt, damit es beim
   Überfliegen als eigener Gedanke erkennbar bleibt. */
.cx-nis-beispiel {
  padding: 10px 14px; border-radius: var(--cx-radius-sm); flex: 1;
  background: var(--cx-carbon); border-left: 3px solid var(--cx-border);
  font-size: 14.5px; line-height: 1.55; color: var(--cx-text-muted); font-style: italic;
}

/* --- Lösungstabelle: die Brücke in den Katalog ---------------------------- */
.cx-nis-tabelle { min-width: 640px; }
.cx-nis-tabelle td:last-child { text-align: right; }

/* --- Fallbeispiel --------------------------------------------------------- */
.cx-nis-fall { margin-top: 8px; }
.cx-nis-fragen { margin: 14px 0 4px; padding-left: 22px; font-size: 15.5px; line-height: 1.75; }
.cx-nis-massnahmen { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.cx-nis-massnahmen > li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 14px; border-radius: var(--cx-radius-sm);
  background: var(--cx-carbon); border: 1px solid var(--cx-border); font-size: 15px;
}
.cx-nis-massnahmen > li > span:nth-child(2) { flex: 1; min-width: 200px; }
.cx-nis-haken { flex: none; color: var(--cx-accent); font-weight: 700; }

@media (max-width: 620px) {
  .cx-nis-brand-kopf, .cx-nis-brand-zeile { grid-template-columns: 1fr; gap: 2px; text-align: left; }
  .cx-nis-brand-kopf span:last-child, .cx-nis-brand-rechts { text-align: left; }
  .cx-nis-brand-pfeil { display: none; }
  .cx-nis-brand-zeile { padding: 12px 0; }
  .cx-nis-kernsatz { font-size: 16px; }
  .cx-nis-zitat p { font-size: 19px; }
}

/* --- DORA: Kette, Zielbild, Zielgruppen, Merkhilfe ------------------------
   Baut auf den NIS2-Klassen auf (Karten, Beispielkästen, Tabelle) und ergänzt
   nur, was hier eigenes Gewicht hat. */
.cx-dora-kette {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 14px;
  font-size: 13px;
}
.cx-dora-kette span {
  padding: 6px 12px; border-radius: 99px;
  background: var(--cx-carbon); border: 1px solid var(--cx-border); color: var(--cx-text-muted);
}
/* Das schwache Glied ist gestrichelt – eine Kette reißt dort, nicht überall. */
.cx-dora-kette span.schwach {
  border-style: dashed; border-color: #F0B428; color: #F0B428;
}
html[data-theme="light"] .cx-dora-kette span.schwach { border-color: #8A5D00; color: #8A5D00; }
.cx-dora-kette i { color: var(--cx-steel); font-style: normal; }

.cx-dora-nis2 { margin-top: var(--cx-gap); border-color: rgba(30,123,232,.42); }
.cx-dora-nis2 h3 { margin: 0 0 8px; font-size: 18px; }
.cx-dora-nis2 p { margin: 0 0 10px; font-size: 15px; line-height: 1.62; max-width: 820px; }

.cx-dora-gruppen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cx-dora-gruppe {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 99px; font-size: 14px;
  background: var(--cx-graphite); border: 1px solid var(--cx-border);
}
.cx-dora-gruppe i { font-style: normal; font-size: 16px; line-height: 1; }
.cx-dora-dienstleister { margin-top: var(--cx-gap); border-color: rgba(240,180,40,.42); }
.cx-dora-dienstleister p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.62; }

/* --- „Nicht … sondern“: der Kern der Verordnung ---------------------------- */
.cx-dora-ziel { margin-top: 18px; }
.cx-dora-nicht, .cx-dora-sondern { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
.cx-dora-nicht p, .cx-dora-sondern p {
  margin: 0; font-family: var(--cx-font-display); font-size: 19px; line-height: 1.45;
}
.cx-dora-nicht p { color: var(--cx-steel); text-decoration: line-through; text-decoration-thickness: 1px; }
.cx-dora-sondern p { color: var(--cx-accent); }
.cx-dora-marke {
  flex: none; margin-top: 3px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 99px; border: 1px solid var(--cx-border); color: var(--cx-steel);
}
.cx-dora-marke.sondern { border-color: rgba(53,224,218,.40); color: var(--cx-accent); }
html[data-theme="light"] .cx-dora-marke.sondern { border-color: rgba(15,118,110,.40); }
.cx-dora-begriff {
  margin: 18px 0 12px; padding-top: 14px; border-top: 1px solid var(--cx-border);
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.cx-dora-begriff b { font-family: var(--cx-font-display); font-size: 21px; color: var(--cx-blue-light); }
.cx-dora-begriff span { font-size: 14px; color: var(--cx-steel); }
html[data-theme="light"] .cx-dora-begriff b { color: var(--cx-blue-deep); }

/* --- Vorher / Nachher ----------------------------------------------------- */
.cx-dora-vergleich { margin-top: 18px; }
/* Die Überschrift nach dem Vergleich stand direkt auf der Unterkante der Karte:
   Styleguide.css setzt h3 global auf margin-top 0, und ein Grid bringt keinen
   eigenen Abstand mit. 26px sind bewusst mehr als die 18px oberhalb des Grids –
   so gehört die Zeile sichtbar zum folgenden Text und nicht zum Kartenrahmen. */
.cx-dora-vergleich + h3 { margin: 26px 0 8px; }
.cx-dora-vorher { border-color: rgba(224,106,106,.35); }
.cx-dora-vorher p {
  margin: 0; font-family: var(--cx-font-display); font-size: 19px; line-height: 1.45;
  color: var(--cx-steel);
}
.cx-dora-nachher { border-color: rgba(53,224,218,.35); }
.cx-dora-nachher .cx-nis-massnahmen { margin-bottom: 0; }
.cx-dora-nachher .cx-nis-massnahmen > li { padding: 7px 12px; font-size: 14.5px; }

/* --- Merkhilfe S-T-A-R-K -------------------------------------------------- */
.cx-dora-stark { margin-top: 18px; display: grid; gap: 4px; }
.cx-dora-stark-zeile {
  display: flex; align-items: center; gap: 18px;
  padding: 12px 0; border-bottom: 1px solid var(--cx-border);
}
.cx-dora-stark-zeile:last-of-type { border-bottom: none; }
/* Der Buchstabe trägt die Merkhilfe – deshalb groß, monospaced ausgerichtet
   und in der Akzentfarbe, damit die Senkrechte S-T-A-R-K sofort lesbar ist. */
.cx-dora-stark-b {
  flex: none; width: 52px; text-align: center;
  font-family: var(--cx-font-display); font-size: 34px; font-weight: 600; line-height: 1;
  color: var(--cx-blue-light);
}
html[data-theme="light"] .cx-dora-stark-b { color: var(--cx-blue-deep); }
.cx-dora-stark-zeile b { font-size: 16px; }
.cx-dora-stark-zeile p { margin: 2px 0 0; font-size: 14.5px; color: var(--cx-text-muted); line-height: 1.55; }
.cx-dora-stark-schluss {
  margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--cx-border);
  font-size: 15px; line-height: 1.62; max-width: 820px;
}

@media (max-width: 620px) {
  .cx-dora-stark-b { width: 38px; font-size: 27px; }
  .cx-dora-stark-zeile { gap: 12px; }
  .cx-dora-nicht p, .cx-dora-sondern p, .cx-dora-vorher p { font-size: 17px; }
}

/* --- Schmale Displays: Navigation seitlich scrollbar statt abgeschnitten ---
   Mit inzwischen sechs Menüpunkten passt die Leiste auf dem Smartphone nicht
   mehr in eine Zeile. Wischen ist hier die verlässlichere Lösung als Umbruch,
   weil die Kopfzeile sonst die halbe Seite einnimmt. */
@media (max-width: 720px) {
  .cx-nav { gap: 18px; }
  .cx-glossar-kopf .cx-tag { font-size: 11px; }
}

/* ================= Startseite (Landing Page) =================
   Eigene Klassen statt der Listen-Layouts: die Startseite erklärt die
   Plattform, sie zeigt keine Daten. Alles baut auf den Variablen aus
   Styleguide.css auf, damit heller und dunkler Modus mitlaufen. */

.cx-start-hero { padding: 56px 0 12px; max-width: 780px; }
.cx-start-hero h1 {
  font-size: clamp(38px, 6vw, 62px);
  line-height: 1.08;
  margin: 0 0 18px;
}
.cx-start-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
.cx-start-cta .cx-btn, .cx-start-cta .cx-btn-secondary { margin: 0; }

/* Kennzahlenband: auto-fit, damit aus vier Feldern auf schmalen Displays
   zwei Reihen zu zwei werden statt einer gequetschten Zeile.
   Abstand und Rundung wie bei allen anderen Karten der Startseite – vier
   einzelne Kästchen, kein durchgehender Block mit Haarlinien dazwischen. */
.cx-kpi-band {
  display: grid; gap: var(--cx-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  margin: 44px 0 8px;
}
.cx-kpi-feld {
  background: var(--cx-graphite);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius);
  padding: 22px 20px;
  text-align: center;
  /* Gleich hoch und mittig: sonst hängt die einzeilige Unterschrift oben,
     während die zweizeilige daneben tiefer geht. */
  display: flex; flex-direction: column; justify-content: center;
}
.cx-kpi-feld b {
  display: block; font-family: var(--cx-font-display);
  font-size: 34px; line-height: 1.1; color: var(--cx-text);
}
.cx-kpi-feld span {
  display: block; margin-top: 6px; font-size: 13.5px;
  color: var(--cx-steel); line-height: 1.45;
}

.cx-start-section { margin: 64px 0 0; }
.cx-start-section > h2 {
  font-size: clamp(26px, 3.4vw, 34px); margin: 0 0 14px;
}
/* Der Vorspann steht UNTER seiner Überschrift, nicht daneben, und läuft über
   die volle Breite. Die frühere Deckelung auf 720 px ließ rechts 480 px weiß –
   auf einer Seite, die überflogen und nicht gelesen wird, ist das der
   schlechtere Tausch. Die Absätze sind kurz genug dafür: zwei bis vier Zeilen. */
.cx-start-intro {
  font-size: 17px; line-height: 1.65;
  color: var(--cx-text-muted); margin: 0 0 26px;
}

.cx-start-grid {
  display: grid; gap: var(--cx-gap);
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  align-items: stretch;
}
/* Vier Karten: schmalere Mindestbreite, damit sie auf dem Desktop in eine
   Reihe passen statt 3 + 1 zu brechen. */
.cx-start-grid-vier {
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}
.cx-start-karte h3 {
  margin: 0 0 10px; font-size: 18px; line-height: 1.35;
}
.cx-start-karte p {
  margin: 0; font-size: 15px; line-height: 1.62; color: var(--cx-text-muted);
}

/* Der Systemhaus-Abschnitt ist der eigentliche Verkaufsteil der Seite und
   darf sich vom Rest absetzen. */
.cx-start-systemhaus {
  background: var(--cx-graphite);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius);
  padding: 34px 32px 30px;
}
.cx-start-systemhaus > h2 { margin-top: 4px; }
.cx-start-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.cx-start-liste li {
  position: relative; padding-left: 26px; font-size: 15.5px;
  line-height: 1.6; color: var(--cx-text-muted); max-width: 760px;
}
.cx-start-liste li::before {
  content: ""; position: absolute; left: 4px; top: 9px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--cx-blue);
}
.cx-start-liste li b { color: var(--cx-text); font-weight: 600; }
/* Der Zugangshinweis läuft über die ganze Kastenbreite – er ist die Antwort
   auf den Abschnitt darüber und nicht die Randnotiz, als die ihn eine
   Deckelung auf 780 px erscheinen ließ. */
.cx-start-hinweis {
  margin: 26px 0 0; padding: 16px 18px;
  border-left: 3px solid var(--cx-blue);
  background: rgba(30,123,232,.07);
  border-radius: 0 var(--cx-radius-sm) var(--cx-radius-sm) 0;
  font-size: 15px; line-height: 1.62; color: var(--cx-text-muted);
}
.cx-start-hinweis b { color: var(--cx-text); }
/* Der Knopf steht mittig unter dem Hinweis, den er beantwortet. Gestapelt und
   nicht nebeneinander zentriert: Sonst schöbe der Zusatz rechts daneben den
   Knopf um gut 120 px aus der Mitte – zentriert wäre dann die Gruppe, nicht
   der Knopf, und genau den sucht das Auge. */
.cx-start-cta-mitte {
  flex-direction: column; align-items: center; gap: 10px;
}

.cx-zugang-grid {
  display: grid; gap: var(--cx-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  align-items: stretch;
}
.cx-zugang { display: flex; flex-direction: column; }
.cx-zugang h3 { margin: 0 0 4px; font-size: 19px; }
.cx-zugang-wer {
  margin: 0 0 14px; font-size: 13px; color: var(--cx-steel);
  text-transform: uppercase; letter-spacing: .06em;
}
.cx-zugang ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.cx-zugang li { font-size: 14.5px; line-height: 1.55; color: var(--cx-text-muted); }
/* Die mittlere Stufe ist das Ziel der Seite – ein Rahmen reicht als Hinweis,
   ohne dass es nach Preistabelle aussieht. */
.cx-zugang-hervor { border-color: var(--cx-blue); }

.cx-start-abschluss {
  margin: 70px 0 0; padding: 40px 32px;
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius);
  background: var(--cx-graphite); text-align: center;
}
.cx-start-abschluss h2 {
  margin: 0 0 10px; font-size: clamp(24px, 3.2vw, 32px);
}
.cx-start-abschluss > p {
  margin: 0 auto; max-width: 560px; font-size: 16px;
  line-height: 1.6; color: var(--cx-text-muted);
}
.cx-start-abschluss .cx-start-cta { justify-content: center; }

html[data-theme="light"] .cx-kpi-feld,
html[data-theme="light"] .cx-start-systemhaus,
html[data-theme="light"] .cx-start-abschluss { background: var(--cx-white); }
/* Die Kennzahlenfelder sind jetzt einzelne Kästchen und brauchen im hellen
   Modus denselben leichten Schatten wie die übrigen Karten. */
html[data-theme="light"] .cx-kpi-feld { box-shadow: 0 1px 3px rgba(20,23,28,.06); }
html[data-theme="light"] .cx-start-hinweis { background: rgba(30,123,232,.06); }

/* --- Die Breite der Seite auch nutzen -------------------------------------
   Auf dem Desktop stand alles in einer linken Spalte, rechts blieben bis zu
   540 px weiß. Dagegen hilft hier nicht das Nebeneinanderstellen – Stefan will
   die Bausteine untereinander, in der gewohnten Reihenfolge: Überschrift,
   Vorspann, Rest; das Kennzahlenband über die ganze Seite, der Zugangshinweis
   über die ganze Kastenbreite und sein Knopf mittig darunter.

   Genutzt wird die Fläche stattdessen, indem die Absätze über die volle Breite
   laufen statt bei 720 px zu stoppen. Nur die Aufzählung im Systemhaus-Kasten
   steht zweispaltig – dort sind es vier kurze Punkte, keine Lesestrecke. */
@media (min-width: 1000px) {
  /* auto-fit statt fester zwei Spalten: Wird der Kasten zu schmal, fällt die
     Aufzählung von selbst wieder auf eine Spalte zurück. Die Deckelung auf
     760 px an den Punkten darf dabei stehen bleiben – zweispaltig sind sie
     ohnehin schmaler, einspaltig greift sie wie bisher. */
  .cx-start-liste-zwei {
    grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
    gap: 18px 40px;
  }
}

@media (max-width: 720px) {
  .cx-start-hero { padding-top: 34px; }
  .cx-start-systemhaus { padding: 26px 20px 24px; }
  .cx-start-abschluss { padding: 32px 20px; }
  /* box-sizing gehört zwingend dazu: Die Knöpfe sind content-box, also käme zu
     den 100 % noch 2 × 28 px Innenabstand hinzu – 56 px, die auf einem 375er
     Display seitlich hinausragen. Nebeneinander fiel das nie auf, weil ein
     Flex-Element in der Hauptachse schrumpfen darf; gestapelt tut es das nicht. */
  .cx-start-cta .cx-btn, .cx-start-cta .cx-btn-secondary {
    width: 100%; box-sizing: border-box; text-align: center;
  }
}

/* ============================================================
   Bezugsquellen und Pflege (interner Bereich)
   ============================================================ */

.cx-bq-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.cx-bq-chip {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 5px 11px; border-radius: 999px; font-size: 13.5px;
  background: rgba(30,123,232,.12); border: 1px solid rgba(30,123,232,.35);
}
.cx-bq-chip strong { font-weight: 600; color: var(--cx-text); }
.cx-bq-chip em, .cx-bq-vendor em {
  font-style: normal; font-size: 12px; color: var(--cx-steel);
}
/* Sekundäre Quellen treten zurück, Direktbezug bekommt die Akzentfarbe:
   auf einen Blick erkennbar, ohne die Reihenfolge zu bewerten. */
.cx-bq-chip.cx-bq-sekundaer { background: rgba(139,146,155,.12); border-color: var(--cx-border); }
.cx-bq-chip.cx-bq-direkt { background: rgba(53,224,218,.12); border-color: rgba(53,224,218,.4); }
/* Noch nicht bestätigt: gestrichelter Rahmen statt Farbfläche. Ein Rahmen, der
   nicht durchgezogen ist, liest sich als „noch offen“ – ohne Warnrot, denn es
   ist kein Fehler, sondern ein Stand. Der Hinweistext steht ohnehin daneben. */
.cx-bq-chip.cx-bq-unbestaetigt {
  background: none; border-style: dashed; border-color: rgba(224,169,106,.5);
}
.cx-bq-chip.cx-bq-unbestaetigt em { color: rgb(214,158,95); }
.cx-bq-kdnr { font-size: 12px; color: var(--cx-steel); font-variant-numeric: tabular-nums; }

.cx-bq-status {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 5px 11px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  background: rgba(53,224,218,.1); border: 1px solid rgba(53,224,218,.35);
  color: var(--cx-text);
}
.cx-bq-status em { font-style: normal; font-weight: 400; font-size: 12px; color: var(--cx-steel); }
.cx-bq-status.cx-bq-laeuft-ab { background: rgba(240,180,40,.14); border-color: rgba(240,180,40,.5); }
.cx-bq-status.cx-bq-abgelaufen { background: rgba(224,64,64,.14); border-color: rgba(224,64,64,.5); }
.cx-bq-laeuft-ab { color: #E8B23C; font-weight: 600; }
.cx-bq-abgelaufen { color: #F06A6A; font-weight: 600; }

/* Ansprechpartner: beide Tabellen mit derselben Spaltenaufteilung, damit sie
   untereinander in einer Flucht stehen. Ohne table-layout: fixed bemisst jede
   Tabelle ihre Spalten nach dem eigenen Inhalt – dann sitzt „Rolle“ in der
   zweiten Tabelle ein Stück versetzt. Die Prozentwerte müssen 100 ergeben. */
.cx-kontakt-tabelle { table-layout: fixed; }
.cx-kontakt-tabelle th:nth-child(1), .cx-kontakt-tabelle td:nth-child(1) { width: 24%; }
.cx-kontakt-tabelle th:nth-child(2), .cx-kontakt-tabelle td:nth-child(2) { width: 26%; }
.cx-kontakt-tabelle th:nth-child(3), .cx-kontakt-tabelle td:nth-child(3) { width: 28%; }
.cx-kontakt-tabelle th:nth-child(4), .cx-kontakt-tabelle td:nth-child(4) { width: 22%; }
/* Feste Breiten heißt: lange Adressen müssen umbrechen dürfen, sonst laufen sie
   in die Nachbarspalte. */
.cx-kontakt-tabelle td { overflow-wrap: anywhere; }
/* Die allgemeine Mindestbreite der ersten Spalte würde die feste Aufteilung
   wieder aushebeln. */
.cx-kontakt-tabelle td:first-child { min-width: 0; }

/* Auf dem Telefon passen vier Spalten nicht nebeneinander. Statt die Inhalte zu
   quetschen oder die ganze Seite seitlich scrollen zu lassen, scrollt die
   Tabelle in sich selbst – die Karte behält ihre Breite. */
@media (max-width: 720px) {
  .cx-kontakt-tabelle { display: block; overflow-x: auto; white-space: nowrap; }
  .cx-kontakt-tabelle th, .cx-kontakt-tabelle td { width: auto; }
  .cx-kontakt-tabelle td { overflow-wrap: normal; }
}

.cx-bq-bemerkungen { font-size: 14px; margin-top: 4px; }
.cx-bq-haus { display: block; font-size: 12px; color: var(--cx-steel); }
/* Zu welcher Partnerfirma gehört dieser Kontakt? Sieht nur der Admin – alle
   anderen bekommen ohnehin nur die eigenen und bräuchten das Kennzeichen nicht. */
.cx-bq-firma {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  border: 1px solid var(--cx-line); border-radius: 999px;
  font-size: 11px; color: var(--cx-steel); vertical-align: middle;
}
.cx-bq-tel { display: block; font-size: 13px; color: var(--cx-steel); font-variant-numeric: tabular-nums; }
.cx-bq-dealreg { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: 14px; }
.cx-bq-herkunft { font-size: 12.5px; color: var(--cx-steel); margin: 14px 0 0; }
.cx-intern-teil { margin-top: 22px; }

.cx-datei-liste { list-style: none; padding: 0; margin: 4px 0 0; }
.cx-datei-liste li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  padding: 8px 0; border-bottom: 1px solid var(--cx-border);
}
.cx-datei-art {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cx-accent); min-width: 92px;
}
.cx-datei-meta { font-size: 12.5px; color: var(--cx-steel); }

/* --- Seite „Bezugsquellen“ --- */
.cx-bq-haus-karte h3 { margin-top: 20px; }
.cx-bq-haus-meta { font-size: 14px; color: var(--cx-steel); margin-bottom: 6px; }
.cx-bq-bemerkung { font-size: 14px; }
.cx-bq-vendorliste { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.cx-bq-vendor {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 6px 12px; border-radius: var(--cx-radius-sm); font-size: 14px;
  background: rgba(30,123,232,.1); border: 1px solid rgba(30,123,232,.3);
  color: var(--cx-text); font-weight: 500;
}
.cx-bq-vendor:hover { border-color: var(--cx-blue-light); }
.cx-bq-vendor.cx-bq-sekundaer { background: rgba(139,146,155,.1); border-color: var(--cx-border); }
.cx-bq-vendor.cx-bq-offen { background: none; border-style: dashed; color: var(--cx-steel); }
.cx-bq-vendor.cx-bq-unbestaetigt {
  background: none; border-style: dashed; border-color: rgba(224,169,106,.5);
}
.cx-bq-vendor.cx-bq-unbestaetigt em { color: rgb(214,158,95); }
/* Im Hellmodus trägt derselbe Amberton auf weißer Karte nur 2,36:1 – gemessen,
   nicht geschätzt. rgb(150,92,25) kommt auf 5,47:1 und bleibt als Amber
   erkennbar. Gilt für beide Chip-Bauformen und die Hinweiszeile. */
html[data-theme="light"] .cx-bq-vendor.cx-bq-unbestaetigt em,
html[data-theme="light"] .cx-bq-chip.cx-bq-unbestaetigt em { color: rgb(150,92,25); }
html[data-theme="light"] .cx-bq-vendor.cx-bq-unbestaetigt,
html[data-theme="light"] .cx-bq-chip.cx-bq-unbestaetigt { border-color: rgba(150,92,25,.55); }
html[data-theme="light"] .cx-bq-unbestaetigt-hinweis { border-left-color: rgba(150,92,25,.55); }
/* Eine Zeile je Haus statt an jedem einzelnen Chip – die Begründung ist für
   alle dieselbe und würde sonst dreißigmal danebenstehen. */
.cx-bq-unbestaetigt-hinweis {
  margin: 2px 0 10px; font-size: 13.5px; line-height: 1.55; color: var(--cx-steel);
  border-left: 2px solid rgba(224,169,106,.5); padding-left: 10px;
}

/* 'gefuehrt' ist die Zuordnung OHNE Bewertung: Das Haus führt den Hersteller,
   mehr steht dort nicht. Deshalb ein neutraler Grund und keine der drei
   Rangfarben – Blau wie bei 'primaer' behauptete einen ersten Weg, den in
   dieser Ansicht niemand gelesen hat. */
.cx-bq-chip.cx-bq-gefuehrt,
.cx-bq-vendor.cx-bq-gefuehrt,
.cx-bq-mini.cx-bq-gefuehrt {
  background: rgba(139,146,155,.12); border-color: var(--cx-border);
}

/* --- Was das HAUS führt: die zweite Liste ---------------------------------
   Eigene Optik, weil es eine andere Aussage ist als ein Bezugsweg. Kein Rahmen
   in einer der Rangfarben – die stünden für primär, sekundär, direkt und
   sagten damit etwas über den eigenen Bezug, was hier niemand behauptet.
   Stattdessen ein gepunkteter Rahmen ohne Füllung: sichtbar, aber erkennbar
   schwächer als jede Zeile darüber. Vom gestrichelten 'unbestaetigt'
   unterscheidbar, weil das eine Bewertung trägt und dieses hier nicht.
   Der Rahmen nimmt Steel und nicht --cx-border: gemessen käme der Linienton
   nur auf 1,16 : 1 gegen die Karte, ein gepunkteter Rahmen wäre damit
   Dekoration, die niemand sieht. Ausgeschriebenes rgba() statt color-mix()
   mit einer Variablen – im Dunkelmodus lieferte das einen Ton, der sich vom
   Kartengrund nicht mehr abhob (1,06 : 1, nachgemessen). Zwei Werte, weil ein
   Grauton nicht gegen fast Schwarz UND gegen Weiß arbeiten kann. Die
   Deckkraft ist so gewählt, dass beide über 3 : 1 gegen die Karte liegen –
   die Schwelle für Bauteilkanten. */
.cx-bq-vendor.cx-bq-fuehrt {
  background: none; border-style: dotted; border-color: rgba(139,146,155,.7);
  color: var(--cx-text-muted);
}
.cx-bq-vendor.cx-bq-fuehrt:hover { border-color: var(--cx-steel); }
.cx-bq-chip.cx-bq-nurfuehrt {
  background: none; border-style: dotted; border-color: rgba(139,146,155,.7);
}
html[data-theme="light"] .cx-bq-vendor.cx-bq-fuehrt,
html[data-theme="light"] .cx-bq-chip.cx-bq-nurfuehrt {
  border-color: rgba(100,112,125,.75);
}
.cx-bq-chip.cx-bq-nurfuehrt strong { color: var(--cx-text-muted); }
/* Eine Zeile je Gruppe, nicht je Chip – wie beim Hinweis zu 'unbestaetigt'. */
.cx-bq-fuehrt-hinweis {
  margin: 2px 0 10px; font-size: 13.5px; line-height: 1.55; color: var(--cx-steel);
  border-left: 2px solid var(--cx-border); padding-left: 10px;
}
.cx-bq-auchda { margin-top: 10px; }

/* Der Hinweis steht EINMAL oben auf der Seite und nicht an jedem Chip: Die
   Begründung ist überall dieselbe. Kante in der Farbe des internen Bereichs,
   weil es um eine Freischaltung geht und nicht um einen Fehler. */
.cx-bq-nurzuordnung {
  margin-top: 0; padding: 14px 18px;
  border-left: 3px solid var(--cx-accent);
  background: color-mix(in srgb, var(--cx-accent) 7%, transparent);
  border-radius: 0 var(--cx-radius-sm) var(--cx-radius-sm) 0;
}
.cx-bq-nurzuordnung p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--cx-text-muted); }
.cx-bq-nurzuordnung strong { color: var(--cx-text); }

/* Dasselbe Bauteil für eine Firma ohne eigene Bezugswege. Es erklärt, warum
   die Zahlen im Verzeichnis etwas anderes zählen als bei jemandem, der schon
   gepflegt hat – ohne diese Zeile hielte man sie für die eigenen. Beide
   Bänder können nebeneinander stehen; das ist kein Widerspruch, sondern zwei
   verschiedene Gründe für zwei verschiedene Einschränkungen. */
.cx-bq-marktblick {
  margin-top: 0; padding: 14px 18px;
  border-left: 3px solid var(--cx-steel);
  background: color-mix(in srgb, var(--cx-steel) 7%, transparent);
  border-radius: 0 var(--cx-radius-sm) var(--cx-radius-sm) 0;
}
.cx-bq-marktblick p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--cx-text-muted); }
.cx-bq-marktblick strong { color: var(--cx-text); }

/* --- Bezugsquellen: Auskunftsschalter (oben) --------------------------------
   Ein Feld, eine Antwort. Die Vorschlagsliste schwebt über dem Verzeichnis,
   deshalb braucht die Feldbox ihren eigenen Stapelkontext. */
.cx-bq-schalter { padding-bottom: 22px; }
.cx-bq-schalter > h2 { margin-top: 0; }
.cx-bq-feldbox { position: relative; z-index: 30; max-width: 620px; margin-bottom: 4px; }
.cx-bq-feldbox input[type="search"] {
  width: 100%; padding: 15px 20px; font-size: 16.5px; border-radius: 99px;
  border: 1px solid var(--cx-border); background: var(--cx-carbon); color: var(--cx-text);
  font-family: inherit;
}
.cx-bq-feldbox input[type="search"]:focus {
  outline: none; border-color: var(--cx-blue); box-shadow: 0 0 0 3px rgba(30,123,232,.18);
}
.cx-bq-vorschlaege {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--cx-graphite); border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius); overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
html[data-theme="light"] .cx-bq-vorschlaege { box-shadow: 0 18px 40px rgba(20,23,28,.14); }
.cx-bq-vorschlaege button {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  border: 0; cursor: pointer; background: transparent; color: var(--cx-text);
  padding: 9px 14px; font: 400 14.5px/1.4 var(--cx-font-body);
  border-bottom: 1px solid rgba(139,146,155,.13);
}
.cx-bq-vorschlaege button:last-child { border-bottom: 0; }
.cx-bq-vorschlaege button:hover,
.cx-bq-vorschlaege button[aria-selected="true"] { background: rgba(30,123,232,.12); }
.cx-bq-vname { font-weight: 600; }
.cx-bq-vrand { margin-left: auto; font-size: 12px; color: var(--cx-steel); }

/* Logos stehen auf weißen Plättchen – auch im Dunkelmodus, Marken brauchen
   ihren hellen Grund. Dasselbe Maß wie auf der Bereichsseite. */
.cx-bq-logo {
  flex: none; width: 74px; height: 30px; background: #fff; border-radius: 7px;
  padding: 4px 7px; display: inline-flex; align-items: center; justify-content: center;
}
.cx-bq-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.cx-bq-logo .cx-logo-ersatz {
  font: 700 11px/1 var(--cx-font-display); color: #14171C; text-align: center;
}

.cx-bq-antwortkopf { display: flex; align-items: center; gap: 14px; margin: 22px 0 2px; }
.cx-bq-antwortkopf h3 { margin: 0; font-size: 20px; }
.cx-bq-antwortkopf .cx-btn-secondary { margin-left: auto; }
.cx-bq-satz { font-size: 16px; margin: 10px 0 16px; color: var(--cx-text-muted); }
.cx-bq-satz strong { color: var(--cx-text); font-weight: 600; }

/* Ein Bezugsweg als Zeile: Rang, Haus, Ansprechpartner. Die Nummer sagt, in
   welcher Reihenfolge man es versucht – das ist die eigentliche Auskunft. */
.cx-bq-weg {
  display: flex; align-items: center; gap: 16px; padding: 14px 18px; margin-bottom: 8px;
  border-radius: var(--cx-radius); border: 1px solid var(--cx-blue);
  background: rgba(63,169,255,.10);
}
html[data-theme="light"] .cx-bq-weg {
  border-color: var(--cx-blue-deep); background: rgba(13,80,216,.07);
}
.cx-bq-weg-offen {
  border-style: dashed; border-color: rgba(224,169,106,.6); background: rgba(224,169,106,.09);
}
html[data-theme="light"] .cx-bq-weg-offen {
  border-color: rgba(150,92,25,.55); background: rgba(150,92,25,.07);
}
.cx-bq-rang {
  width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid;
  place-items: center; background: var(--cx-blue-flaeche); color: #fff;
  font: 700 15px/1 var(--cx-font-display);
}
.cx-bq-weg-offen .cx-bq-rang { background: rgb(190,132,68); }
html[data-theme="light"] .cx-bq-weg-offen .cx-bq-rang { background: rgb(150,92,25); }
.cx-bq-wegtext { flex: 1; min-width: 0; }
.cx-bq-wegtext strong { display: block; font-size: 16.5px; font-weight: 600; }
.cx-bq-wegtext span { font-size: 13px; color: var(--cx-steel); }
.cx-bq-weg-offen .cx-bq-wegtext span { color: rgb(214,158,95); font-weight: 600; }
html[data-theme="light"] .cx-bq-weg-offen .cx-bq-wegtext span { color: rgb(150,92,25); }
.cx-bq-wegtext em {
  display: block; font-style: normal; font-size: 12.5px; color: var(--cx-steel); margin-top: 3px;
}
.cx-bq-wegkontakt { text-align: right; font-size: 13px; color: var(--cx-steel); flex: none; }
.cx-bq-wegkontakt strong { display: block; color: var(--cx-text); font-weight: 600; }
.cx-bq-wegkontakt a { display: block; font-weight: 400; }

.cx-bq-hinweis {
  margin: 10px 0 0; padding: 13px 16px; border-radius: var(--cx-radius-sm);
  border: 1px dashed var(--cx-border); background: var(--cx-carbon);
  font-size: 14px; color: var(--cx-text-muted);
}
/* Der Leerzustand ist Absicht, kein Ladehinweis: Die Seite trifft keine
   Vorauswahl, weil ein vorausgewählter Hersteller wie eine Antwort aussieht. */
.cx-bq-leer { font-size: 14.5px; color: var(--cx-steel); margin: 16px 0 0; }

/* --- Bezugsquellen: Verzeichnis (unten) ------------------------------------ */
.cx-bq-richtung {
  display: flex; gap: 4px; background: var(--cx-graphite); padding: 4px;
  border: 1px solid var(--cx-border); border-radius: 99px; flex-wrap: wrap;
}
.cx-bq-richtung button {
  border: 0; background: transparent; color: var(--cx-steel); cursor: pointer;
  font: 600 13.5px/1 var(--cx-font-body); padding: 9px 15px; border-radius: 99px;
}
.cx-bq-richtung button:hover { color: var(--cx-text); }
.cx-bq-richtung button[aria-pressed="true"] { background: var(--cx-blue-flaeche); color: #fff; }
.cx-bq-filter {
  border: 1px solid var(--cx-border); background: var(--cx-graphite); color: var(--cx-steel);
  cursor: pointer; border-radius: 99px; padding: 4px 12px;
  font: 600 12.5px/1.4 var(--cx-font-body);
}
.cx-bq-filter:hover { color: var(--cx-text); border-color: var(--cx-blue); }
.cx-bq-filter[aria-pressed="true"] {
  color: var(--cx-text); border-color: var(--cx-blue); background: rgba(30,123,232,.14);
}

/* Das Band über der Liste, wenn sie auf einen Bezug eingeschränkt ist. Es sagt
   in einem Satz, warum die Liste kurz ist, und hat den Weg zurück gleich dabei –
   eine gefilterte Liste ohne diese Zeile sieht aus wie ein Datenverlust. */
.cx-bq-bezugband {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 9px 10px 9px 15px; border-radius: var(--cx-radius-sm);
  background: rgba(30,123,232,.10); border: 1px solid rgba(30,123,232,.32);
  font-size: 13.5px; color: var(--cx-text-muted);
}
.cx-bq-bezugband strong { color: var(--cx-text); font-weight: 600; }
.cx-bq-bezugband button {
  margin-left: auto; border: 1px solid var(--cx-border); background: var(--cx-graphite);
  color: var(--cx-steel); cursor: pointer; border-radius: 99px; padding: 5px 13px;
  font: 600 12.5px/1.4 var(--cx-font-body); white-space: nowrap;
}
.cx-bq-bezugband button:hover { color: var(--cx-text); border-color: var(--cx-blue); }

.cx-bq-zwei { display: grid; grid-template-columns: 326px 1fr; gap: 20px; align-items: start; }
.cx-bq-spalte {
  background: var(--cx-graphite); border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius); overflow: hidden;
}
.cx-bq-liste { max-height: 64vh; overflow: auto; }
.cx-bq-eintrag {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  cursor: pointer; padding: 11px 14px; color: var(--cx-text);
  font: 400 14.5px/1.5 var(--cx-font-body);
  border-bottom: 1px solid rgba(139,146,155,.12);
}
.cx-bq-eintrag:hover { background: rgba(30,123,232,.08); }
.cx-bq-eintrag[aria-current="true"] {
  background: rgba(30,123,232,.14); box-shadow: inset 3px 0 0 var(--cx-blue-light);
}
html[data-theme="light"] .cx-bq-eintrag[aria-current="true"] {
  background: rgba(13,80,216,.10); box-shadow: inset 3px 0 0 var(--cx-blue-deep);
}
.cx-bq-ekopf { display: flex; align-items: baseline; gap: 8px; }
.cx-bq-enam { font-weight: 600; }
.cx-bq-ezahl {
  margin-left: auto; font-size: 12.5px; color: var(--cx-steel);
  font-variant-numeric: tabular-nums;
}
/* Anteilsbalken. Blau = genehmigt, Orange = noch nicht – dieselben Töne wie
   bei den Chips. Gemessen gegen das Bett (rgba(139,146,155,.16) auf dem
   Kartengrund): dunkel 6,0 : 1 blau und 6,4 : 1 orange, hell 5,7 : 1 und
   4,7 : 1. Ein gemeinsamer Ton je Rolle geht hier nicht – gegen das fast
   schwarze Bett trägt das helle Blau, gegen das weiße das tiefe. */
.cx-bq-ebett {
  display: flex; height: 5px; border-radius: 3px; margin-top: 7px; overflow: hidden;
  background: rgba(139,146,155,.16);
}
.cx-bq-ebett i { height: 100%; background: var(--cx-blue-light); }
html[data-theme="light"] .cx-bq-ebett i { background: var(--cx-blue-deep); }
.cx-bq-ebett i.cx-bq-eoffen { background: rgb(214,158,95); }
html[data-theme="light"] .cx-bq-ebett i.cx-bq-eoffen { background: rgb(150,92,25); }
/* Was das Haus führt, ohne dass die eigene Firma dort einen Weg hat: Grau,
   weil es keine Rolle trägt. Es ersetzt den Balken nur bei einer Firma ganz
   ohne eigene Bezugswege – sonst stünden zwei Maßstäbe nebeneinander. */
.cx-bq-ebett i.cx-bq-efuehrt { background: var(--cx-steel); }
.cx-bq-erand { display: block; font-size: 12px; color: var(--cx-steel); margin-top: 4px; }

.cx-bq-blatt { padding: 22px 24px; }
.cx-bq-blatt > h2 {
  margin: 0 0 4px; font-size: 21px; display: flex; align-items: center; gap: 12px;
}
.cx-bq-blatt > h2 .cx-intern-badge { margin-left: 0; }
.cx-bq-blatt h3 { margin-top: 22px; }
.cx-bq-blatt > h3:first-of-type { margin-top: 16px; }

@media (max-width: 1080px) {
  .cx-bq-zwei { grid-template-columns: 1fr; }
  .cx-bq-liste { max-height: 340px; }
}
@media (max-width: 620px) {
  .cx-bq-weg { flex-wrap: wrap; }
  .cx-bq-wegkontakt { text-align: left; width: 100%; padding-left: 48px; }
}

/* --- Produktportfolio ------------------------------------------------------
   Zwei Seiten teilen sich diese Bausteine: die Anzeige unter #/portfolio und
   die Pflegemaske unter #/verwaltung/portfolio. Die Karten sind bewusst
   dieselben – wer eingestellt hat, soll das Ergebnis wiedererkennen. */

/* Die Business Unit in der Konto-Karte. Eigene Zeile statt Anhängsel hinter
   der Firma: In 310 px Kartenbreite bricht „Axians · Networks & Solutions ·
   Partner“ ohnehin um, und dann steht die Rolle allein in der zweiten Zeile. */
.cx-konto-einheit {
  display: flex; align-items: baseline; gap: 6px; margin-top: 3px;
  font-size: 11.5px; color: var(--cx-text-muted); min-width: 0;
}
.cx-konto-einheit b { font-weight: 600; color: var(--cx-text); }
.cx-konto-etikett {
  flex: none; font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--cx-steel); border: 1px solid var(--cx-border); border-radius: 4px;
  padding: 1px 5px; background: var(--cx-carbon);
}

/* Das Produktportfolio hatte kurzzeitig einen Knopf in der Konto-Karte. Es
   steht jetzt in der Navigationsleiste neben den Bezugsquellen – dort, wo die
   anderen internen Seiten stehen. Die Karte verwaltet das Konto; ein Weg zu
   einer Inhaltsseite gehört nicht hinein. Das flex-wrap bleibt: Es schadet
   nichts und trägt die Knöpfe, sobald einmal ein vierter dazukommt. */
.cx-konto-knoepfe { flex-wrap: wrap; }

/* Hinweis, dass die gezeigte Liste der Firma gehört und nicht der Einheit.
   Ohne ihn hielte ein Konto mit Einheit die geerbte Liste für seine eigene. */
.cx-pf-erbe {
  margin: 24px 0 0; padding: 12px 18px;
  border-radius: var(--cx-radius-sm); font-size: 14px; color: var(--cx-text-muted);
  border: 1px dashed var(--cx-border); background: var(--cx-graphite);
}
.cx-pf-erbe strong { color: var(--cx-text); }

.cx-pf-zahlen {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.cx-pf-kachel {
  display: grid; gap: 3px; padding: 16px 18px; border-radius: var(--cx-radius);
  background: var(--cx-graphite); border: 1px solid var(--cx-border);
}
.cx-pf-wert {
  font: 700 30px/1 var(--cx-font-display); color: var(--cx-text);
  font-variant-numeric: tabular-nums;
}
.cx-pf-was { font-size: 12.5px; color: var(--cx-steel); }
/* Die Lückenkachel trägt denselben Orangeton wie die offenen Bezugswege.
   Gemessen gegen den Kartengrund: 8,0 : 1 dunkel, 5,5 : 1 hell. Ein einziger
   Farbwert kann beide Gründe nicht bedienen, deshalb zwei. */
.cx-pf-kachel.warn { border-color: rgba(224,169,106,.45); }
.cx-pf-kachel.warn .cx-pf-wert { color: rgb(214,158,95); }
html[data-theme="light"] .cx-pf-kachel.warn { border-color: rgba(150,92,25,.4); }
html[data-theme="light"] .cx-pf-kachel.warn .cx-pf-wert { color: rgb(150,92,25); }

.cx-pf-leiste {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.cx-pf-leiste input[type="search"] { flex: 1 1 260px; max-width: 420px; margin: 0; }
.cx-pf-treffer { font-size: 13px; color: var(--cx-steel); }
.cx-pf-offen { color: rgb(214,158,95); font-weight: 700; }
html[data-theme="light"] .cx-pf-offen { color: rgb(150,92,25); }
.cx-pf-hinweis { font-size: 14.5px; color: var(--cx-text-muted); margin: 0 0 18px; }

.cx-pf-gruppe { margin-bottom: 26px; }
.cx-pf-gkopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--cx-border);
}
.cx-pf-gkopf > a, .cx-pf-gkopf > span:first-child {
  display: flex; align-items: center; gap: 9px;
  font: 600 16.5px/1.3 var(--cx-font-display); color: var(--cx-text);
}
.cx-pf-gkopf > a:hover { color: var(--cx-blue-light); }
html[data-theme="light"] .cx-pf-gkopf > a:hover { color: var(--cx-blue-deep); }
/* Das Bereichszeichen ist eine 42-px-Kachel; in einer Zeilenüberschrift
   wäre das zu groß und drückte die Zeilenhöhe auseinander. */
.cx-pf-gkopf .cx-bereich-zeichen { width: 30px; height: 30px; border-radius: 8px; }
.cx-pf-gkopf .cx-bereich-zeichen svg { width: 17px; height: 17px; }
.cx-pf-gzahl {
  flex: none; display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: var(--cx-steel); font-variant-numeric: tabular-nums;
}
.cx-pf-gzahl b { color: var(--cx-text); font-weight: 600; }
.cx-pf-alle {
  border: 1px solid var(--cx-border); background: var(--cx-graphite);
  color: var(--cx-steel); cursor: pointer; border-radius: 99px; padding: 3px 11px;
  font: 600 12px/1.4 var(--cx-font-body);
}
.cx-pf-alle:hover { color: var(--cx-text); border-color: var(--cx-blue); }

.cx-pf-raster {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}
/* Dieselben Maße wie die Kacheln der Vergleichsauswahl – es ist dieselbe
   Handlung (einen Hersteller aus dem Katalog greifen) und soll auch so
   aussehen. Als <a> in der Anzeige, als <button> in der Pflege. */
.cx-pf-karte {
  position: relative; display: grid; gap: 5px; justify-items: center;
  padding: 12px 10px 10px; text-align: center;
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-sm); color: var(--cx-text);
  font: 400 13px/1.35 var(--cx-font-body);
  transition: border-color .15s ease, transform .15s ease;
}
/* ZWEITE REGEL FÜR HELL, und sie ist nicht redundant: In der Anzeige ist die
   Karte ein <a>. Im hellen Modus gewinnt html[data-theme="light"] a (0,1,2)
   gegen .cx-pf-karte (0,1,0) und färbt jeden Herstellernamen blau – im dunklen
   greift nur das schwächere a und verliert. Ein Unterschied, den man erst
   sieht, wenn man beide Modi nebeneinanderlegt. */
html[data-theme="light"] .cx-pf-karte { color: var(--cx-text); }
.cx-pf-karte.waehlbar { cursor: pointer; }
.cx-pf-karte:hover { border-color: var(--cx-blue); transform: translateY(-1px); }
.cx-pf-karte:focus-visible { outline: 2px solid var(--cx-blue); outline-offset: 2px; }
.cx-pf-karte.an { border-color: var(--cx-blue); box-shadow: 0 0 0 1px var(--cx-blue); }
/* Ungewählte Karten in der Pflege treten zurück – bei 188 Kacheln muss auf
   einen Blick erkennbar sein, was drin ist und was nicht. */
.cx-pf-karte.waehlbar:not(.an) { opacity: .58; }
.cx-pf-karte.waehlbar:not(.an):hover { opacity: 1; }
.cx-pf-platte {
  width: 100%; height: 40px; display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 6px; padding: 5px 8px;
}
.cx-pf-platte img { max-width: 100%; max-height: 30px; object-fit: contain; }
.cx-pf-platte .cx-logo-ersatz {
  font: 700 11px/1.2 var(--cx-font-display); color: #14171C; text-align: center;
}
.cx-pf-name { font-weight: 600; }
.cx-pf-n { font-size: 11.5px; color: var(--cx-steel); }
.cx-pf-bem {
  font-size: 11.5px; color: rgb(214,158,95); font-weight: 600;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[data-theme="light"] .cx-pf-bem { color: rgb(150,92,25); }
.cx-pf-haken {
  position: absolute; top: 6px; right: 7px; width: 17px; height: 17px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--cx-blue-flaeche); color: #fff; font-size: 10px; font-weight: 700;
  opacity: 0; transform: scale(.7); transition: opacity .12s, transform .12s;
}
.cx-pf-karte.an .cx-pf-haken { opacity: 1; transform: scale(1); }

/* Die Lücken: Bereiche, in denen das Haus gar nichts führt. Kein Fehler,
   sondern eine Vertriebsauskunft – deshalb ruhig gehalten und nicht rot. */
.cx-pf-luecken {
  display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
}
.cx-pf-luecke {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  border-radius: var(--cx-radius-sm); color: var(--cx-text);
  border: 1px dashed rgba(224,169,106,.5); background: rgba(224,169,106,.07);
  font: 400 14px/1.35 var(--cx-font-body);
}
html[data-theme="light"] .cx-pf-luecke {
  border-color: rgba(150,92,25,.45); background: rgba(150,92,25,.06);
}
.cx-pf-luecke:hover { border-style: solid; }
.cx-pf-luecke .cx-bereich-zeichen { width: 34px; height: 34px; border-radius: 9px; }
.cx-pf-luecke .cx-bereich-zeichen svg { width: 19px; height: 19px; }
.cx-pf-luecke-name { flex: 1; font-weight: 600; }
.cx-pf-luecke-n {
  flex: none; font-size: 12px; color: var(--cx-steel);
  font-variant-numeric: tabular-nums;
}

/* --- Pflegemaske ---------------------------------------------------------- */

.cx-pf-ebenen {
  display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  margin-top: 16px;
}
.cx-pf-ebene {
  display: grid; gap: 3px; text-align: left; cursor: pointer; padding: 13px 16px;
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-sm); color: var(--cx-text);
  font-family: var(--cx-font-body); transition: border-color .15s;
}
.cx-pf-ebene:hover { border-color: var(--cx-blue); }
.cx-pf-ebene.an {
  border-color: var(--cx-blue); box-shadow: 0 0 0 1px var(--cx-blue);
  background: rgba(30,123,232,.10);
}
html[data-theme="light"] .cx-pf-ebene.an { background: rgba(13,80,216,.07); }
.cx-pf-ename { font: 600 15px/1.3 var(--cx-font-display); }
.cx-pf-esub { font-size: 12px; color: var(--cx-steel); }
.cx-pf-ezahl {
  margin-top: 4px; font-size: 12.5px; color: var(--cx-text-muted);
  font-variant-numeric: tabular-nums;
}
.cx-pf-ezahl em {
  font-style: normal; color: var(--cx-steel); font-size: 11.5px;
}

.cx-pf-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 6px;
}
.cx-pf-kopf h2 { margin: 0; }
.cx-pf-aktionen { display: flex; gap: 8px; flex: none; }
.cx-pf-aktionen .cx-btn:disabled, .cx-pf-aktionen .cx-btn-secondary:disabled {
  opacity: .4; cursor: default; transform: none;
}

.cx-pf-bemliste { display: grid; gap: 8px; }
.cx-pf-bemzeile {
  display: grid; grid-template-columns: 210px 1fr; gap: 12px; align-items: center;
}
.cx-pf-bemname { font-size: 14px; font-weight: 600; color: var(--cx-text); }
.cx-pf-bemzeile input { margin: 0; }

@media (max-width: 900px) {
  .cx-pf-zahlen { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .cx-pf-raster { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
  .cx-pf-bemzeile { grid-template-columns: 1fr; gap: 4px; }
  .cx-pf-kopf { flex-direction: column; align-items: stretch; }
  .cx-pf-aktionen .cx-btn, .cx-pf-aktionen .cx-btn-secondary { flex: 1; }
}

/* --- Nachrichten in der Verwaltung (1.63.0) --------------------------------
   Das Formular steht als Raster, nicht als Spalte: „An wen" und der Empfänger
   gehören nebeneinander, denn sie sind EINE Angabe in zwei Schritten. Text und
   Datum darunter über die ganze Breite. */
.cx-na-form {
  display: grid; gap: 14px 16px; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-bottom: 14px;
}
.cx-na-form .cx-feld { margin: 0; }
.cx-na-form .cx-na-text { grid-column: 1 / -1; }
.cx-na-form textarea { resize: vertical; min-height: 74px; line-height: 1.45; }
/* Der Zähler sitzt in der Beschriftung, nicht unter dem Feld: Dort steht er
   dem Text nicht im Weg und ist trotzdem im Blick, während man tippt. */
.cx-na-form .cx-feld em {
  float: right; font-style: normal; font-weight: 400;
  color: var(--cx-steel); font-variant-numeric: tabular-nums;
}
.cx-na-aktionen { grid-column: 1 / -1; display: flex; gap: 10px; }

.cx-na-liste { display: grid; gap: 12px; }
.cx-na-zeile {
  display: grid; gap: 7px; padding: 14px 16px;
  border-radius: var(--cx-radius); background: var(--cx-carbon);
  border: 1px solid var(--cx-border);
}
/* Abgelaufene bleiben stehen, aber zurückgenommen: Sie sind kein Fehler,
   sondern erledigt – und man will sehen, was man einmal geschrieben hat. */
.cx-na-zeile.alt { opacity: .6; }
.cx-na-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cx-na-wer { font: 600 15px/1.3 var(--cx-font-display); color: var(--cx-text); }
.cx-na-art {
  font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--cx-steel); border: 1px solid var(--cx-border);
  border-radius: 4px; padding: 1px 6px;
}
.cx-na-zeile .cx-na-text {
  margin: 0; font-size: 14px; line-height: 1.5; color: var(--cx-text-muted);
  overflow-wrap: anywhere;
}
.cx-na-fuss {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 12px; color: var(--cx-steel);
}
.cx-na-fuss button { margin-left: auto; }

@media (max-width: 620px) {
  .cx-na-fuss button { margin-left: 0; width: 100%; }
}

/* --- Das Blatt für die Präsentation ---------------------------------------
   Ein Portfolio will irgendwann in eine Folie. Statt eines zweiten Werkzeugs
   bekommt der Browser hier ein Blatt hingelegt, das wirklich 210 × 297 mm
   misst – der PDF-Export ist dann seiner.

   Auf dem Bildschirm wird dasselbe Blatt verkleinert gezeigt, mit transform
   statt mit zoom: transform rechnet Millimeter zuverlässig um und lässt sich
   im Druck mit einer Zeile wieder abschalten. Die Hülle trägt die
   verkleinerte Größe, sonst stünde die Vorschau in einer riesigen
   Leerfläche – ein transform verändert den Platzbedarf nicht. */

.cx-pf-pdf { margin-left: auto; flex: none; }

.cx-druck-huelle {
  --cx-bl-z: 1;
  position: fixed; inset: 0; z-index: 120;
  overflow: auto; overscroll-behavior: contain;
  padding: 0 24px 32px; background: rgba(4, 6, 10, .92);
  backdrop-filter: blur(3px);
}
html[data-theme="light"] .cx-druck-huelle { background: rgba(20, 23, 28, .88); }

.cx-druck-leiste {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 -24px 22px; padding: 14px 24px;
  background: var(--cx-graphite); border-bottom: 1px solid var(--cx-border);
}
.cx-druck-text { flex: 1 1 340px; min-width: 0; display: grid; gap: 3px; }
.cx-druck-text strong { font: 600 15px/1.3 var(--cx-font-display); color: var(--cx-text); }
.cx-druck-text span { font-size: 12.5px; line-height: 1.45; color: var(--cx-steel); }
.cx-druck-text em { font-style: normal; font-weight: 600; color: var(--cx-text-muted); }
.cx-druck-leiste .cx-btn, .cx-druck-leiste .cx-btn-secondary { flex: none; margin: 0; }

/* Regler und Häkchen sind Werkzeuge der VORSCHAU. Dass sie den Ausdruck nicht
   erreichen, ist keine Frage von display:none an dieser Stelle, sondern der
   Druckregeln weiter unten: Die ganze Leiste verschwindet, und das transform
   am Blatt wird zurückgesetzt. Ein Blatt auf 40 % kommt als volles A4 aus dem
   Drucker – das ist die Zusage, an der dieser Regler hängt. */
.cx-druck-zoom, .cx-druck-wahl {
  flex: none; display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; color: var(--cx-steel); cursor: pointer;
}
.cx-druck-zoom input[type="range"] { width: 150px; margin: 0; accent-color: var(--cx-blue); }
.cx-druck-zoom b {
  min-width: 44px; text-align: right; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--cx-text-muted);
}
.cx-druck-wahl { align-items: flex-start; max-width: 230px; }
.cx-druck-wahl input { flex: none; margin: 2px 0 0; accent-color: var(--cx-blue); }
.cx-druck-wahl span { display: grid; gap: 1px; line-height: 1.35; color: var(--cx-text); }
.cx-druck-wahl b { font-weight: 400; font-size: 11.5px; color: var(--cx-steel); }

/* Der Messplatz. Hier werden die Blätter gefüllt und ausgemessen, bevor sie
   auf die Bühne kommen. Außerhalb des Sichtfelds statt display:none – ohne
   Layout gibt es nichts zu messen. */
.cx-druck-lager {
  position: fixed; left: -20000px; top: 0;
  visibility: hidden; pointer-events: none; z-index: -1;
}

/* `safe center` ist hier kein Feinschliff, sondern Bedingung dafür, dass der
   Regler über 100 % gehen darf: Ein zentrierter Inhalt, der breiter ist als
   sein Kasten, überläuft nach BEIDEN Seiten – und links kommt man nicht mehr
   hin, weil scrollLeft bei 0 anfängt. Bei 200 % lag die Blattkante gemessen
   bei -389 px und blieb es. `safe` fällt bei Überlauf auf start zurück.
   Die Zeile darüber bleibt als Rückfall für Browser ohne `safe` stehen. */
.cx-druck-buehne {
  display: grid; gap: 22px;
  justify-content: center;
  justify-content: safe center;
}
.cx-bl-huelle {
  width: calc(210mm * var(--cx-bl-z));
  height: calc(297mm * var(--cx-bl-z));
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}

.cx-blatt {
  box-sizing: border-box; position: relative; overflow: hidden;
  width: 210mm; height: 297mm; padding: 15mm 15mm 11mm;
  transform: scale(var(--cx-bl-z)); transform-origin: top left;
  display: flex; flex-direction: column;
  background: #FFFFFF; color: #14171C; font-family: var(--cx-font-body);
  /* Ohne diese Zeile spart Chrome die Flächen im Druck weg und die
     Logoplättchen kommen weiß in weiß aus dem Drucker. */
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.cx-blatt * { box-sizing: border-box; }

.cx-bl-band {
  position: absolute; top: 0; left: 0; right: 0; height: 4.5mm;
  background: linear-gradient(90deg, #3FA9FF 0%, #1E7BE8 45%, #0D50D8 80%, #35E0DA 100%);
}

.cx-bl-kopf {
  flex: none; display: flex; align-items: flex-end; justify-content: space-between;
  gap: 10mm; padding-bottom: 5mm; border-bottom: .4mm solid #D9DEE7;
}
/* Nicht das Elektroblau der Website (#1E7BE8): Auf weißem Papier bringt es
   nur 4,2 : 1, und die Vorzeile ist mit 3,1 mm kleine Schrift. Das Tiefblau
   des Verlaufs schafft 6,7 : 1 und ist dieselbe Marke. */
.cx-bl-ober {
  font: 600 3.1mm/1 var(--cx-font-body); letter-spacing: .16em;
  text-transform: uppercase; color: #0D50D8;
}
.cx-bl-firma {
  margin-top: 2.6mm; font: 700 8.4mm/1.1 var(--cx-font-display); color: #0B0E14;
}
/* Firma und Einheit stehen nebeneinander wie im Briefkopf: „Bechtle Cloud
   Services“ liest sich als ein Name, bleibt aber sichtbar zweistufig. Trägt
   die Einheit den Firmennamen schon selbst, steht sie allein – die Regel
   dazu in app.js unter pfBlattName(). */
.cx-bl-firma span { font-weight: 400; color: #4C5563; }
.cx-bl-meta { margin-top: 2.2mm; font-size: 3.4mm; color: #6B7280; }

.cx-bl-raster {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  gap: 4mm; padding: 5mm 0;
}
.cx-bl-zeile { display: flex; justify-content: center; gap: 4mm; }
/* Derselbe Plättchengrund wie im Katalog. Das ist keine Geschmacksfrage:
   Auf genau diesem Ton sind alle Logos einmal durchgemessen worden – auf
   reinem Weiß verschwände das eine oder andere. Das Innenmaß in Prozent,
   damit es bei 42 mm und bei 19 mm Kachelbreite gleich gut sitzt. */
/* Das Innenmaß kommt als fester Wert aus app.js, nicht als Prozentangabe:
   Ein padding in Prozent bezieht sich auf die Breite des ELTERNTEILS – in
   einer Zeile also auf die ganzen 180 mm statt auf die Kachel. Das ergab
   12,6 mm Rand in einer 23,5 mm hohen Kachel, und das Logo war weg. */
.cx-bl-kachel {
  flex: none; width: var(--kb); height: var(--kh); padding: var(--kp);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; break-inside: avoid;
  background: #F2F4F7; border: .3mm solid #E3E8F0; border-radius: 2mm;
}
.cx-bl-kachel img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cx-bl-kachel .cx-logo-ersatz { padding: 0; font-size: 3.2mm; color: #55606F; }

/* Die Fußzeile ist mit 2,7 mm die kleinste Schrift auf dem Blatt und braucht
   deshalb mehr Kontrast, nicht weniger: derselbe Grauton wie die Kopfzeile,
   4,8 : 1 statt der 3,1 : 1 eines helleren Grau. */
.cx-bl-fuss {
  flex: none; display: flex; justify-content: space-between; gap: 8mm;
  padding-top: 3.5mm; border-top: .3mm solid #EBEEF3;
  font-size: 2.7mm; color: #6B7280;
}
/* Der Herkunftshinweis steht hier unten und nicht mehr oben im Kopf. Dort
   stand bis 1.66.4 die gesetzte Wortmarke (.cx-bl-marke, 6,4 mm, mit blauem
   X) rechts neben dem Firmennamen – auf einem Blatt, das beim Kunden auf dem
   Tisch liegt. Der Kopf gehört dem Haus, dessen Portfolio das Blatt zeigt.
   Bewusst OHNE die Markenfarben – bei 2,7 mm Schriftgröße wird ein blaues X
   zum Fleck, und werben soll die Zeile nicht. Nur etwas fetter, damit der
   Name als Name lesbar bleibt. */
.cx-bl-fuss .cx-bl-fussmarke { font-weight: 600; color: #4C5563; }

/* --- Die Battle Card als Blatt ---
   Alle Maße in Millimetern wie beim Portfolio-Blatt: Ein Blatt ist ein Blatt,
   und was hier in Pixeln stünde, wäre auf Papier eine Zufallsgröße. Dieselben
   Farben, aus demselben Grund – Tiefblau #0D50D8 statt des Elektroblaus der
   Website, das auf weißem Papier nur 4,2 : 1 erreicht. */
.cx-bc-marke { display: flex; align-items: center; gap: 5mm; min-width: 0; }
.cx-bc-titel {
  margin-top: 2.2mm; font: 700 6.4mm/1.15 var(--cx-font-display); color: #0B0E14;
}
.cx-bc-seite { flex: none; font-size: 3mm; color: #6B7280; white-space: nowrap; }
.cx-bc-leer { color: #98A0AC; font-style: italic; }

/* Dasselbe Plättchen wie im Katalog, nur in Millimetern. Weiß statt des
   grauen Katalogtons: Auf dem Blatt steht es allein und nicht im Raster,
   und ein grauer Kasten sähe dort aus wie ein Druckfehler. */
.cx-bc-plate {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 26mm; height: 9mm; padding: 1.2mm; overflow: hidden;
  background: #FFFFFF; border: .3mm solid #E3E8F0; border-radius: 1.4mm;
}
.cx-bc-plate.gross { width: 34mm; height: 13mm; }
.cx-bc-plate img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cx-bc-plate .cx-logo-ersatz { padding: 0; font-size: 3mm; color: #55606F; }

/* Die Übersichtsseite: zwei oder drei Spalten nebeneinander, jede so hoch wie
   das Blatt. grid-template-rows: minmax(0,1fr) ist dabei der Kern – ohne diese
   Zeile nähme sich die Rasterzeile die Höhe ihres INHALTS. Die Spalte liefe
   dann über die Blattkante hinaus, ohne dass es beim Messen auffiele: Sie wäre
   ja immer genau so hoch wie das, was in ihr steht. */
.cx-bc-raster {
  flex: 1; min-height: 0; display: grid; gap: 0 5mm; padding-top: 4mm;
  grid-template-columns: repeat(var(--bc-n, 3), 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.cx-bc-sp {
  display: flex; flex-direction: column; overflow: hidden;
  padding-right: 4mm; border-right: .25mm solid #EDF0F5;
}
/* Nicht schrumpfen dürfen: Ein Flex-Kind macht sich sonst kleiner als sein
   Inhalt. Genau das hebelte die Messung aus – die Spalte sähe passend aus und
   der Text stünde trotzdem übereinander. */
.cx-bc-sp > * { flex: none; }
.cx-bc-sp:last-child { padding-right: 0; border-right: 0; }
.cx-bc-kopf { display: flex; flex-direction: column; gap: 1.8mm; margin-bottom: 2.6mm; }
.cx-bc-name { font: 700 4.4mm/1.15 var(--cx-font-display); color: #0B0E14; }
/* Der Kernsatz. Er trägt die Spalte und steht deshalb im Kasten – der erste
   Satz der POSITIONIERUNG, nicht der Abgrenzung: In der Spalte eines Anbieters
   hat kein Satz zu stehen, der einen anderen lobt. */
.cx-bc-satz {
  margin-bottom: 2.8mm; padding: 1.9mm 2.3mm;
  background: #F5F8FC; border-left: .7mm solid #3FA9FF;
  border-radius: 0 1.2mm 1.2mm 0;
  font-size: 2.95mm; line-height: 1.4; color: #232830;
}
.cx-bc-rub {
  margin: 2.2mm 0 1.1mm; font-size: 2.5mm; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #0D50D8;
}
.cx-bc-liste { margin: 0; padding-left: 3.6mm; font-size: 2.8mm; line-height: 1.4; }
.cx-bc-liste li { margin-bottom: 1.1mm; }
.cx-bc-prod { list-style: none; margin: 0; padding: 0; }
.cx-bc-prod li { margin-bottom: 1.4mm; font-size: 2.85mm; line-height: 1.3; }
.cx-bc-prod b { display: block; font-weight: 600; }
.cx-bc-prod span { display: block; font-size: 2.4mm; color: #6B7280; }
/* Was beim Kürzen wegfiel, steht als Zeile da statt zu verschwinden. */
.cx-bc-rest { list-style: none; font-style: italic; color: #6B7280; }
.cx-bc-liste .cx-bc-rest { margin-left: -3.6mm; }
.cx-bc-fuss {
  margin-top: auto; padding-top: 2.5mm; border-top: .25mm solid #EDF0F5;
  font-size: 2.5mm; line-height: 1.4; color: #4C5563;
}
.cx-bc-fuss b { color: #0D50D8; }

/* Der Anhang – ein Hersteller, so viele Seiten wie seine Texte brauchen.
   overflow:hidden ist hier Messgerät und Schutz zugleich: Es hält scrollHeight
   ehrlich und lässt einen Text, der doch einmal übersteht, nicht in die
   Fußzeile laufen. */
.cx-bc-koerper { flex: 1; min-height: 0; overflow: hidden; padding-top: 3.6mm; }
.cx-bc-block { break-inside: avoid; }
.cx-bc-block + .cx-bc-block { margin-top: 2.2mm; }
.cx-bc-block:not(:first-child) > .cx-bc-arub { margin-top: 1.6mm; }
.cx-bc-arub {
  margin: 0 0 1.4mm; padding-bottom: .8mm; border-bottom: .25mm solid #E3E8F0;
  font-size: 2.7mm; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #0D50D8;
}
.cx-bc-atext { margin: 0; font-size: 3mm; line-height: 1.46; color: #232830; }
.cx-bc-aliste { margin: 0; padding-left: 4.2mm; font-size: 3mm; line-height: 1.46; color: #232830; }
.cx-bc-aliste li { margin-bottom: 1.2mm; }
.cx-bc-aprod b { font-size: 3.2mm; }
.cx-bc-aprod p { margin: .5mm 0 0; font-size: 2.9mm; line-height: 1.44; color: #232830; }
.cx-bc-klasse {
  display: block; margin-top: .3mm;
  font-size: 2.5mm; font-weight: 600; color: #0D50D8;
}
.cx-bc-agegen p { margin: 0; font-size: 2.9mm; line-height: 1.44; color: #232830; }
.cx-bc-wer {
  display: block; margin-bottom: .5mm; font-size: 2.4mm; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: #0D50D8;
}

/* Gedruckt wird nur das Blatt. Der Wächter ist die Klasse am <html>: Ohne
   sie gilt keine dieser Regeln – ein gewöhnliches Strg+P auf irgendeiner
   Seite soll weiterhin die Seite drucken und nicht leeres Papier. */
@media print {
  html.cx-druckt, html.cx-druckt body {
    background: #fff !important; margin: 0 !important; padding: 0 !important;
    height: auto !important; overflow: visible !important;
  }
  html.cx-druckt body > *:not(.cx-druck-huelle) { display: none !important; }
  html.cx-druckt .cx-druck-huelle {
    position: static !important; overflow: visible !important;
    padding: 0 !important; background: none !important;
  }
  html.cx-druckt .cx-druck-leiste { display: none !important; }
  html.cx-druckt .cx-druck-buehne { display: block !important; }
  /* Ausdrücklich 210 mm, nicht auto: Ein Block nimmt sich die Breite seines
     Umfelds, und wenn die aus irgendeinem Grund größer ist als die Seite,
     schiebt der Drucker den Überstand auf ein zweites, fast leeres Blatt. */
  html.cx-druckt .cx-bl-huelle {
    width: 210mm !important; height: auto !important; margin: 0 auto !important;
    box-shadow: none !important; break-after: page;
  }
  html.cx-druckt .cx-bl-huelle:last-child { break-after: auto; }
  html.cx-druckt .cx-blatt { transform: none !important; }
}

@media (max-width: 620px) {
  .cx-druck-leiste { padding: 12px 16px; margin: 0 -16px 16px; }
  .cx-druck-huelle { padding: 0 16px 24px; }
  .cx-druck-leiste .cx-btn, .cx-druck-leiste .cx-btn-secondary { flex: 1; }
  /* Auf dem Handy nahm die Leiste ein Drittel der Bildschirmhöhe – und sie
     bleibt beim Scrollen stehen, also fehlt der Platz durchgehend. Weg
     kommt der Hinweis auf den Druckdialog: Er beschreibt Einstellungen
     („Ränder → Keine“), die es auf dem Telefon so nicht gibt. Regler und
     Häkchen bleiben, sie bekommen je eine eigene Zeile. */
  .cx-druck-text span { display: none; }
  .cx-druck-zoom, .cx-druck-wahl { flex: 1 1 100%; max-width: none; }
  .cx-druck-zoom input[type="range"] { flex: 1; width: auto; }
}

/* --- Verwaltung --- */
.cx-verw-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 1px solid var(--cx-border); margin: 8px 0 4px;
}
.cx-verw-tabs a {
  padding: 10px 16px; font-size: 15px; color: var(--cx-steel);
  border-bottom: 2px solid transparent; font-weight: 500;
}
.cx-verw-tabs a:hover { color: var(--cx-text); }
.cx-verw-tabs a.active { color: var(--cx-text); border-bottom-color: var(--cx-blue); }

/* Die Filterleisten nutzen .cx-toolbar; die Auswahlfelder dürfen dort nicht
   auf 100 % gehen, sonst sprengt ein Label die Zeile. */
.cx-pflege-filter, .cx-bq-toolbar { gap: 12px 18px; align-items: end; }
.cx-pflege-filter .cx-select, .cx-bq-toolbar .cx-select { width: auto; min-width: 170px; }
.cx-pflege-filter .cx-treffer, .cx-bq-toolbar .cx-treffer { margin-top: 0; align-self: center; }
.cx-pflege-filter label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--cx-steel);
}
.cx-pflege-meldung { margin: 10px 0 0; font-weight: 600; }
.cx-pflege-tabelle td { vertical-align: top; }
.cx-pflege-offen { color: var(--cx-steel); opacity: .7; }

/* Ein gesperrter Knopf muss gesperrt AUSSEHEN. Ohne diese Regel behält der
   Hauptknopf seinen blauen Verlauf und den Zeigefinger – er sieht aus wie eine
   Einladung und tut beim Klick nichts. Aufgefallen an der Nachrichten-Maske in
   der Sichtprobe; die Regel gilt bewusst für alle Knöpfe, nicht nur für die
   eine Stelle. */
.cx-btn:disabled, .cx-btn-secondary:disabled, button:disabled.cx-mini {
  opacity: .45; cursor: not-allowed; filter: grayscale(.6);
}
.cx-bq-mini {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; background: rgba(30,123,232,.12); border: 1px solid rgba(30,123,232,.3);
}
.cx-bq-mini.cx-bq-sekundaer { background: rgba(139,146,155,.12); border-color: var(--cx-border); }
.cx-bq-mini.cx-bq-direkt { background: rgba(53,224,218,.12); border-color: rgba(53,224,218,.35); }

/* Eingabefelder: es gab bisher keine – deshalb hier einmal zentral.
   box-sizing ist hier Pflicht, nicht Geschmack: Ohne die Zeile meint width:100%
   nur den INHALT, und Innenabstand (2 × 11 px) plus Rahmen (2 × 1 px) kommen
   obendrauf. Jedes Feld stand damit 24 px über seine Rasterspalte hinaus – bei
   14 px Spaltenabstand also 10 px im Nachbarfeld. Bei <select> fiel es nicht
   auf, weil Browser dort von sich aus border-box rechnen. */
.cx-input, .cx-select {
  font-family: var(--cx-font-body); font-size: 14.5px; color: var(--cx-text);
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-sm); padding: 9px 11px; width: 100%;
  box-sizing: border-box;
}
.cx-input:focus, .cx-select:focus {
  outline: none; border-color: var(--cx-blue); box-shadow: 0 0 0 3px rgba(30,123,232,.18);
}
.cx-input::placeholder { color: var(--cx-steel); opacity: .75; }
textarea.cx-input { resize: vertical; line-height: 1.55; }
.cx-select.cx-mini { padding: 5px 8px; font-size: 13px; width: auto; }
.cx-feld {
  display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--cx-steel);
}
.cx-feld .cx-input { text-transform: none; letter-spacing: normal; }

.cx-pflege-form .cx-section { margin-top: 18px; }
.cx-pflege-hilfe { font-size: 13px; color: var(--cx-steel); margin: 8px 0 0; }

/* Herstellerportfolio eines Hauses: 205 Zeilen wollen weder als lange Seite
   noch als Mehrfachauswahlfeld gepflegt werden. Ein eigenes Rollfeld mit
   fester Höhe hält das Formular kurz, und die Spalten füllen die Breite –
   bei einer einspaltigen Liste läge rechts die halbe Karte brach. */
.cx-dh-suche { max-width: 340px; margin: 10px 0 8px; }
.cx-dh-liste {
  max-height: 320px; overflow-y: auto;
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius-sm);
  padding: 8px 10px; columns: 3; column-gap: 22px;
}
.cx-dh-zeile {
  display: flex; align-items: center; gap: 8px; padding: 3px 0;
  font-size: 13.5px; line-height: 1.4; cursor: pointer;
  /* Ohne break-inside zerreißt der Spaltenumbruch Haken und Namen. */
  break-inside: avoid;
}
.cx-dh-zeile input { flex: none; margin: 0; }
.cx-dh-zeile:hover span { color: var(--cx-text); }
@media (max-width: 900px) { .cx-dh-liste { columns: 2; } }
@media (max-width: 620px) { .cx-dh-liste { columns: 1; max-height: 260px; } }
.cx-pflege-zeile {
  display: grid; gap: 8px; margin-bottom: 8px; align-items: center;
  grid-template-columns: minmax(140px, 1.1fr) minmax(110px, .7fr)
                         minmax(120px, .9fr) minmax(160px, 1.6fr) 40px;
}
.cx-pflege-zeile .cx-btn-secondary { padding: 8px 0; text-align: center; }

/* Ein Ansprechpartner hat sechs bis sieben Felder. Nebeneinander bleiben davon
   rund 160 Pixel je Feld übrig – dann steht in „E-Mail“ nur noch
   „markus.gapp@securev“. Deshalb bricht die Zeile um: drei Felder je Reihe,
   jedes beschriftet. Die Beschriftung ist hier nicht Zierde, sondern nötig:
   sobald ein Feld gefüllt ist, verschwindet der Platzhalter, und dann ist
   „+49 151 …“ nicht mehr von Telefon oder Mobil zu unterscheiden. */
/* Der Löschknopf steht oben statt mittig: bei zwei oder drei Reihen je Kontakt
   schwebt er sonst irgendwo zwischen den Feldern und man sieht ihm nicht an,
   zu welchem Block er gehört. */
.cx-pflege-kontakt {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 0; border-top: 1px solid var(--cx-border);
}
.cx-pflege-kontakt:first-child { border-top: 0; padding-top: 4px; }
.cx-kontakt-felder {
  flex: 1; min-width: 0;                  /* ohne min-width sprengt ein langer
                                             Wert die Flex-Zeile nach rechts */
  display: grid; gap: 10px 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cx-kontakt-felder .cx-feld { margin-bottom: 0; font-size: 11px; }
/* Sieben oder acht Felder gehen in Dreierreihen nicht auf – übrig bliebe ein
   einzelnes Feld in der letzten Zeile. Deshalb stehen die Zuordnungsfelder
   (Firma, Hersteller, Distributor) in einer eigenen ersten Zeile, und die
   eigentlichen Kontaktdaten beginnen darunter mit einer neuen: dann sind alle
   Datenzeilen voll und die kurze Zeile steht oben, wo sie als Überschrift
   gelesen wird. */
.cx-kontakt-felder .cx-neue-zeile { grid-column-start: 1; }
/* Freitext braucht mehr als ein Drittel – etwa die Notiz einer Firma zu einem
   Distributor. Auf schmalen Anzeigen greift die Spaltenzahl darunter. */
.cx-kontakt-felder .cx-feld-breit { grid-column: span 2; }
@media (max-width: 620px) { .cx-kontakt-felder .cx-feld-breit { grid-column: span 1; } }
.cx-zeile-weg { flex: none; width: 40px; padding: 8px 0; text-align: center; }

@media (max-width: 900px) {
  .cx-kontakt-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .cx-kontakt-felder { grid-template-columns: 1fr; }
}
.cx-datei-form { grid-template-columns: minmax(120px, .7fr) minmax(160px, 1.4fr)
                                        minmax(140px, .8fr) minmax(180px, 1.4fr) auto; }
.cx-pflege-aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; align-items: center; }
.cx-loeschen { border-color: rgba(224,64,64,.45); color: #F06A6A; }
.cx-loeschen:hover { border-color: #F06A6A; }
.cx-pflege-kopf { padding-bottom: 4px; }
/* Gesperrter Löschknopf in der Firmentabelle: Er sagt am Zeiger, was im Weg
   steht, statt eine Rückfrage zu stellen, die der Server danach absagt. Der
   Titel sitzt am umschließenden span – ein deaktivierter Knopf zeigt in
   mehreren Browsern keinen eigenen Tooltip. */
.cx-firma-weg-sperre { display: inline-block; cursor: not-allowed; }
.cx-loeschen:disabled {
  border-color: var(--cx-border); color: var(--cx-steel);
  opacity: .55; pointer-events: none;
}


/* --- Zugangsanfrage (#/zugang) ------------------------------------------
   Bewusst NICHT .cx-login-card: dort gilt max-width 420px und eine eigene
   Feldoptik über den Elementselektor .cx-login-card input, die .cx-input
   überstimmt. Zwei Spalten statt drei, damit die vier Felder in zwei vollen
   Zeilen aufgehen und nicht eines allein stehen bleibt. */
.cx-zugang-karte { max-width: 720px; }
.cx-zugang-karte label {
  display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px;
}
.cx-zugang-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Muss sein, obwohl .cx-kontakt-felder weiter oben schon eine Regel für schmale
   Anzeigen hat: Die steht VOR dieser Zeile und wird bei gleicher Gewichtung von
   ihr überstimmt. Ohne die Wiederholung blieben auf dem Smartphone zwei Spalten
   von je 131 px stehen. */
@media (max-width: 620px) { .cx-zugang-felder { grid-template-columns: 1fr; } }
.cx-zugang-karte .cx-btn { margin-top: 22px; }
.cx-pflicht { color: var(--cx-accent); }
.cx-optional { color: var(--cx-steel); font-weight: 400; font-size: 12px; }
.cx-zugang-preis {
  margin: 26px 0 0; padding: 14px 18px;
  border: 1px solid var(--cx-border); border-left: 3px solid var(--cx-accent);
  border-radius: var(--cx-radius-sm); background: var(--cx-carbon);
}
.cx-cta-zusatz { align-self: center; color: var(--cx-steel); font-size: 14px; }

/* Honigtopf. display:none oder hidden wäre falsch: Ein Teil der Formular-Bots
   überspringt genau das. Abseits geschoben ist das Feld für Menschen unsichtbar,
   für den Bot aber ein ganz normales Eingabefeld – und wer es ausfüllt, verrät
   sich. Für Bildschirmleser trägt der Container aria-hidden. */
.cx-honig {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* Filter in der Spaltenüberschrift. Sichtbar ist nur ein Pfeil neben dem
   Spaltennamen – ein Kasten mit der gewählten Firma wäre doppelt gemoppelt,
   weil die Spalte darunter dieselbe Auskunft gibt. Das Auswahlfeld liegt
   durchsichtig über der ganzen Überschrift: Der Browser klappt seine eigene
   Liste auf, zu sehen ist aber unser Pfeil. */
.cx-kopf-filter {
  position: relative; display: inline-flex; align-items: baseline; gap: 6px;
  cursor: pointer;
}
/* Etwas größer als die Beschriftung, damit auch schmale Finger treffen. */
.cx-kopf-filter > select {
  position: absolute; inset: -6px -8px; opacity: 0; cursor: pointer;
  appearance: none; border: 0; padding: 0;
  font-family: var(--cx-font-body); font-size: 14px;
  letter-spacing: 0; text-transform: none;
  color: var(--cx-text); background: var(--cx-carbon);
}
.cx-kopf-pfeil { font-size: 11px; line-height: 1; color: var(--cx-steel); }
.cx-kopf-filter:hover .cx-spalte-name,
.cx-kopf-filter:hover .cx-kopf-pfeil { color: var(--cx-text); }
/* Tastatur: Das Feld selbst ist unsichtbar, die Marke muss also am Rumpf
   erscheinen – sonst sieht niemand, wo er gerade steht. */
.cx-kopf-filter:focus-within {
  outline: 2px solid var(--cx-blue); outline-offset: 4px;
  border-radius: var(--cx-radius-sm);
}
/* Gefiltert: Die Spalte bekommt eine Marke, damit eine verkürzte Liste nicht
   für den vollständigen Bestand gehalten wird. */
.cx-spalte-filter.aktiv .cx-spalte-name,
.cx-spalte-filter.aktiv .cx-kopf-pfeil { color: var(--cx-blue); }
/* Ankreuzfeld über einer Tabelle (Willkommensgruß beim Freischalten). Die
   Beschriftung erklärt BEIDE Zustände: Ein Haken, der nur sagt, was er tut,
   lässt offen, was ohne ihn passiert – und hier ist das eine Mail, die jemand
   erwartet. Ausrichtung oben, damit das Kästchen bei zwei Zeilen Text nicht
   in der Mitte schwebt. */
.cx-check-zeile {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 16px; max-width: 760px;
  font-size: 14px; line-height: 1.5; color: var(--cx-text-muted); cursor: pointer;
}
.cx-check-zeile input {
  width: auto; margin: 2px 0 0; flex: none; accent-color: var(--cx-blue);
}
.cx-check-zeile strong { color: var(--cx-text); }

/* Ergebnis der Mailprüfung: ein abgesetzter Kasten, weil es eine Auskunft ist
   und keine Bedienfläche. Grün/rot nur für das eine Wort, das zählt. */
.cx-mail-test {
  margin: 4px 0 0; padding: 14px 16px;
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-sm);
  font-size: 14px; line-height: 1.6; color: var(--cx-text-muted);
  max-width: 760px;
}
.cx-mail-test p { margin: 0 0 10px; }
.cx-mail-test p:last-child { margin-bottom: 0; }
.cx-mail-test code { font-size: 13px; }
.cx-login-ok-inline { color: var(--cx-accent); }
.cx-filter-hinweis { margin: 16px 0 0; color: var(--cx-steel); font-size: 14px; }
.cx-link-knopf {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--cx-blue); cursor: pointer; text-decoration: underline;
}

/* Freischaltmaske: klappt als eigene Zeile unter der Anfrage auf, zu der sie
   gehört. Eigene Fläche und ein Balken links, damit sie nicht als weitere
   Tabellenzeile missverstanden wird. */
.cx-frei-zeile > td { padding: 0 !important; }
.cx-frei-maske {
  padding: 16px 18px; margin: 4px 0 10px;
  background: var(--cx-carbon); border-left: 3px solid var(--cx-blue);
  border-radius: var(--cx-radius-sm);
}
.cx-frei-maske label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 5px; }
.cx-frei-maske .cx-hinweis-klein { margin: 0 0 14px; }
.cx-frei-maske .cx-pflege-aktionen { margin-top: 16px; }
.cx-btn.cx-mini { padding: 8px 16px; font-size: 14px; }

/* Freitext in der Anfragenliste: umbrechen statt die Tabelle sprengen. */
.cx-anfrage-text {
  max-width: 320px; white-space: pre-line; color: var(--cx-steel); font-size: 14px;
}

/* Helles Thema: Flächen und Rahmen nachziehen. */
:root[data-theme="light"] .cx-input,
:root[data-theme="light"] .cx-select {
  background: var(--cx-white); border-color: #DDE1E7;
}
:root[data-theme="light"] .cx-bq-chip strong,
:root[data-theme="light"] .cx-bq-vendor,
:root[data-theme="light"] .cx-bq-status,
:root[data-theme="light"] .cx-input, :root[data-theme="light"] .cx-select { color: var(--cx-ink); }
:root[data-theme="light"] .cx-datei-art { color: var(--cx-blue-deep); }

@media (max-width: 860px) {
  .cx-pflege-zeile, .cx-datei-form { grid-template-columns: 1fr; }
  .cx-pflege-zeile .cx-btn-secondary { width: 100%; }
}

/* =========================================================================
   Reverse Proxy erklärt (#/reverseproxy)
   Die Seite lebt von einem Gegensatz: „vier offene Türen“ gegen „eine Tür mit
   Empfang“. Deshalb ein durchgehendes Farbsignal – die ungeschützte Variante
   trägt Amber und gestrichelte Linien (offen, noch nichts dazwischen), die
   geschützte Blau und durchgezogene (der Weg ist geführt). Kein Rot: Ein
   Aufbau ohne Reverse Proxy ist nicht falsch, nur ungeschützter.
   ========================================================================= */

/* --- Das Bild: drei Rollen im Bürogebäude --------------------------------- */
.cx-rp-rollen {
  display: grid; gap: 12px; margin: 18px 0 20px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.cx-rp-rolle {
  padding: 14px 16px; border-radius: var(--cx-radius-sm, 10px);
  background: var(--cx-graphite); border: 1px solid var(--cx-border);
  display: flex; flex-direction: column; gap: 3px;
}
.cx-rp-rolle i { font-style: normal; font-size: 22px; line-height: 1.2; }
.cx-rp-rolle b { font-size: 15px; }
.cx-rp-rolle span { font-size: 13.5px; color: var(--cx-steel); }
/* Die technische Entsprechung ist die eigentliche Pointe des Bildes. */
.cx-rp-rolle em {
  font-style: normal; font-size: 13.5px; margin-top: 5px;
  color: var(--cx-blue-light); font-weight: 600;
}
.cx-rp-fragen { margin: 0 0 14px; padding-left: 20px; }
.cx-rp-fragen li { color: var(--cx-text-muted); font-size: 15px; line-height: 1.7; }

/* --- Schemazeichnung: Quelle → (Station) → Ziele --------------------------
   Von mehreren Erklärseiten genutzt (Reverse Proxy, WAF), deshalb neutral
   benannt: cx-fluss statt cx-rp-*. Wer hier etwas ändert, ändert es auf allen. */
.cx-fluss {
  margin: 16px 0; padding: 18px 14px; border-radius: 12px;
  background: rgba(30,123,232,.05); border: 1px solid var(--cx-border);
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.cx-fluss.klein { padding: 14px 10px; }
.cx-fluss-knoten {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 16px; border-radius: 8px; font-size: 13.5px; font-weight: 600;
  background: var(--cx-graphite); border: 1px solid var(--cx-border);
  text-align: center;
}
.cx-fluss-quelle { color: var(--cx-text-muted); }
/* Der Proxy ist der Punkt, um den es geht – als einziger Knoten farbig. */
.cx-fluss-station {
  border-color: rgba(30,123,232,.55); color: var(--cx-blue-light);
  background: rgba(30,123,232,.10);
}
.cx-fluss-ziel { color: var(--cx-text-muted); font-weight: 500; }
.cx-fluss-pfeil {
  width: 1px; height: 22px; background: var(--cx-border); position: relative;
}
.cx-fluss-pfeil::after {
  content: ''; position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--cx-border);
}
.cx-fluss-ziele { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* Ohne Proxy: die Linie führt direkt durch – gestrichelt und amber, weil hier
   nichts dazwischensteht. Dasselbe Gestaltungsmittel wie bei den noch nicht
   bestätigten Bezugswegen: gestrichelt heißt „offen“, nicht „falsch“. */
.cx-fluss.offen { background: rgba(240,180,40,.05); }
.cx-fluss.offen .cx-fluss-pfeil { background: none; border-left: 1px dashed #F0B428; }
.cx-fluss.offen .cx-fluss-pfeil::after { border-top-color: #F0B428; }
.cx-fluss.offen .cx-fluss-ziel { border-color: rgba(240,180,40,.42); }

/* --- Gegenüberstellung ohne/mit ------------------------------------------- */
.cx-rp-vergleich { gap: var(--cx-gap); align-items: start; }
.cx-rp-ohne { border-color: rgba(240,180,40,.35); }
.cx-rp-mit  { border-color: rgba(30,123,232,.42); }
.cx-rp-vergleich h2 { font-size: 19px; margin: 0 0 10px; }
.cx-rp-vergleich p { font-size: 15px; line-height: 1.62; }
.cx-rp-liste { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.cx-rp-liste li { display: flex; gap: 10px; font-size: 14.5px; color: var(--cx-text-muted); }
.cx-rp-liste.minus li > span:first-child { flex: none; color: #F0B428; font-weight: 700; }

/* --- Ablauf einer Anfrage -------------------------------------------------- */
.cx-rp-adresse { margin: 0 0 16px; }
.cx-rp-adresse code {
  display: inline-block; padding: 8px 14px; border-radius: 8px; font-size: 14.5px;
  background: var(--cx-graphite); border: 1px solid var(--cx-border);
  color: var(--cx-blue-light);
}
.cx-rp-schritte { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }
.cx-rp-schritte li { display: flex; gap: 14px; align-items: flex-start; }
.cx-rp-schritte li > div { flex: 1; }
.cx-rp-schritte p { margin: 0; font-size: 15px; line-height: 1.62; }
/* Eine Regel ist immer „von → nach“. Als Zeile gesetzt, nicht als Fließtext:
   So sieht man die Zuordnung, statt sie aus einem Satz herauszulesen. */
.cx-rp-regel {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 8px; padding: 7px 12px; border-radius: 8px;
  background: var(--cx-graphite); border: 1px solid var(--cx-border);
  font-size: 13.5px;
}
.cx-rp-regel code { color: var(--cx-blue-light); font-size: 13px; }
.cx-rp-regel b { color: var(--cx-text); font-size: 13.5px; }
.cx-rp-regel i { color: var(--cx-steel); font-style: normal; }
.cx-rp-zuordnung { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

/* --- Nutzen: Angriffe, Ausfälle -------------------------------------------- */
.cx-rp-angriffe { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.cx-rp-angriffe span {
  padding: 5px 11px; border-radius: 99px; font-size: 12.5px;
  background: rgba(240,180,40,.08); border: 1px solid rgba(240,180,40,.35);
  color: #F0B428;
}
.cx-rp-zustand { display: grid; gap: 6px; margin: 12px 0 4px; }
.cx-rp-zustand span {
  display: flex; align-items: center; gap: 9px; font-size: 13.5px;
  padding: 7px 12px; border-radius: 8px;
  background: var(--cx-graphite); border: 1px solid var(--cx-border);
}
.cx-rp-zustand i { font-style: normal; font-weight: 700; }
.cx-rp-zustand em { font-style: normal; margin-left: auto; color: var(--cx-steel); font-size: 12.5px; }
.cx-rp-zustand .ok i { color: var(--cx-accent); }
.cx-rp-zustand .aus { border-color: rgba(224,106,106,.42); }
.cx-rp-zustand .aus i { color: #E06A6A; }

/* --- Tabellen: leere Zelle, hervorgehobene Spalte -------------------------- */
.cx-rp-leer { color: var(--cx-steel); }
.cx-rp-hervor { color: var(--cx-blue-light); font-weight: 600; }
/* Die Reverse-Spalte ist die, um die es auf dieser Seite geht. */
.cx-rp-forward th:last-child { color: var(--cx-blue-light); }

/* --- Einsatzbereiche ------------------------------------------------------- */
.cx-rp-einsatz { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-rp-einsatz span {
  padding: 8px 14px; border-radius: 99px; font-size: 13.5px;
  background: var(--cx-graphite); border: 1px solid var(--cx-border);
  color: var(--cx-text-muted);
}

/* --- Lösungen: Open Source und Enterprise ---------------------------------- */
.cx-rp-gruppe { margin-top: 26px; }
.cx-rp-gruppe h3 { margin: 0 0 4px; font-size: 20px; }
.cx-rp-gruppe-text { margin: 0 0 16px; font-size: 15px; color: var(--cx-steel); }
.cx-rp-produkte { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.cx-rp-produkt h4 { margin: 0 0 8px; font-size: 17px; }
.cx-rp-produkt p { font-size: 14.5px; line-height: 1.6; margin: 0 0 12px; }
.cx-rp-ideal { margin-bottom: 12px; }
.cx-rp-ideal b {
  display: block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cx-steel); margin-bottom: 6px;
}
.cx-rp-ideal div { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-rp-ideal span {
  padding: 4px 10px; border-radius: 99px; font-size: 12.5px;
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
  color: var(--cx-text-muted);
}
/* Konzernzugehörigkeiten stehen klein darunter – sie erklären, warum ein Name
   im Katalog unter einer anderen Marke auftaucht. */
.cx-rp-notiz {
  margin: 12px 0 0 !important; padding-top: 10px; border-top: 1px solid var(--cx-border);
  font-size: 13px; color: var(--cx-steel);
}

/* --- Heller Modus: gemessene Werte, keine geschätzten --------------------- */
html[data-theme="light"] .cx-rp-rolle em { color: var(--cx-blue-deep); }
html[data-theme="light"] .cx-fluss-station { color: var(--cx-blue-deep); }
html[data-theme="light"] .cx-rp-adresse code,
html[data-theme="light"] .cx-rp-regel code,
html[data-theme="light"] .cx-rp-hervor,
html[data-theme="light"] .cx-rp-forward th:last-child { color: var(--cx-blue-deep); }
/* Amber auf Weiß trägt nicht: #F0B428 kommt gegen die helle Karte nur auf
   rund 2:1. Derselbe Fall wie bei den unbestätigten Bezugswegen – deshalb
   hier dieselbe abgedunkelte Fassung. */
html[data-theme="light"] .cx-rp-angriffe span,
html[data-theme="light"] .cx-rp-liste.minus li > span:first-child { color: rgb(150,92,25); }
html[data-theme="light"] .cx-rp-zustand .aus i { color: #C0392B; }
html[data-theme="light"] .cx-fluss-knoten,
html[data-theme="light"] .cx-rp-einsatz span,
html[data-theme="light"] .cx-rp-zustand span,
html[data-theme="light"] .cx-rp-regel { background: var(--cx-white); }
html[data-theme="light"] .cx-rp-ideal span { background: #F4F6F9; }
html[data-theme="light"] .cx-fluss-quelle,
html[data-theme="light"] .cx-fluss-ziel,
html[data-theme="light"] .cx-rp-regel b { color: var(--cx-ink); }

@media (max-width: 860px) {
  .cx-rp-vergleich { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .cx-rp-schritte li { gap: 10px; }
  .cx-fluss { padding: 14px 8px; }
  .cx-fluss-knoten { font-size: 12.5px; padding: 7px 12px; }
}

/* =========================================================================
   Web Application Firewall erklärt (#/waf)
   Zwei Farben tragen die ganze Seite: Grün heißt „durchgelassen“, Rot heißt
   „geblockt“. Anders als beim Reverse Proxy ist Rot hier richtig – ein
   Angriffsversuch IST ein Fehlerfall, kein offener Punkt. Farbe steht nie
   allein: Jede Ampel trägt zusätzlich Haken oder Kreuz.
   ========================================================================= */

/* --- Das Schaubild: Zaun und Türsteher ------------------------------------ */
.cx-waf-haus { margin: 20px 0 22px; }
.cx-waf-haus svg { width: 100%; height: auto; display: block; }
/* Alle Linien erben die Textfarbe, damit der Themenwechsel ohne zweite
   Farbliste funktioniert. Nur die beiden Wächter sind eigens gefärbt. */
.cx-waf-haus svg { color: var(--cx-steel); }
.cx-waf-gast, .cx-waf-gebaeude {
  fill: none; stroke: currentColor; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.cx-waf-gast circle { fill: none; }
.cx-waf-weg { stroke: currentColor; stroke-width: 2; stroke-dasharray: 6 7; fill: none; }
.cx-waf-zaun {
  fill: none; stroke: var(--cx-blue-light); stroke-width: 3; stroke-linecap: round;
}
.cx-waf-steher { fill: none; stroke: #F0B428; stroke-width: 2.8; stroke-linecap: round; }
.cx-waf-steher circle { fill: rgba(240,180,40,.16); }
.cx-waf-tuer { fill: rgba(240,180,40,.12); stroke: #F0B428; stroke-width: 2.5; }
.cx-waf-linie { stroke: currentColor; stroke-width: 1; stroke-dasharray: 3 4; fill: none; }
.cx-waf-marke text { font-family: inherit; }
.cx-waf-name { font-size: 15px; font-weight: 700; }
.cx-waf-name.zaun { fill: var(--cx-blue-light); }
.cx-waf-name.tuer { fill: #F0B428; }
.cx-waf-svg-frage { font-size: 13px; font-weight: 500; fill: var(--cx-steel); }

.cx-waf-rollen {
  display: grid; gap: 12px; margin: 0 0 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.cx-waf-rolle {
  padding: 14px 16px; border-radius: 10px;
  background: var(--cx-graphite); border: 1px solid var(--cx-border);
  display: flex; flex-direction: column; gap: 3px;
}
.cx-waf-rolle.zaun { border-color: rgba(30,123,232,.42); }
.cx-waf-rolle.tuer { border-color: rgba(240,180,40,.42); }
.cx-waf-rolle b { font-size: 16px; }
.cx-waf-rolle span { font-size: 13.5px; color: var(--cx-steel); }
.cx-waf-rolle em { font-style: normal; font-size: 14px; margin-top: 6px; color: var(--cx-text-muted); }

/* --- Die fünf Prüffragen --------------------------------------------------- */
.cx-waf-pruefungen { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cx-waf-pruefung { display: flex; gap: 14px; align-items: flex-start; }
.cx-waf-pruefung b { display: block; font-size: 15px; margin-bottom: 5px; }
.cx-waf-pruefung p { margin: 0; font-size: 14px; line-height: 1.6; }

/* --- Ampel: durchgelassen oder geblockt ------------------------------------ */
.cx-waf-ausgang, .cx-waf-faelle, .cx-waf-sichten { gap: var(--cx-gap); align-items: start; }
.cx-waf-fall {
  padding: 16px 18px; border-radius: 12px;
  background: var(--cx-graphite); border: 1px solid var(--cx-border);
}
.cx-waf-fall.ok    { border-color: rgba(47,191,113,.42); }
.cx-waf-fall.block { border-color: rgba(224,106,106,.45); }
.cx-waf-fall-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cx-waf-fall-kopf b { font-size: 16px; }
.cx-waf-fall p { margin: 0; font-size: 14.5px; line-height: 1.6; }
.cx-waf-marke-ok, .cx-waf-marke-block {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 99px; flex: none;
  font-weight: 700; font-size: 14px;
}
.cx-waf-marke-ok    { background: rgba(47,191,113,.14);  color: var(--cx-accent); }
.cx-waf-marke-block { background: rgba(224,106,106,.14); color: #E06A6A; }
/* Die Anfrage selbst: als Code gesetzt, mit Umbruch – eine Angriffs-URL ist
   lang und darf die Karte nicht sprengen. */
.cx-waf-anfrage {
  display: block; margin: 0 0 12px; padding: 10px 12px; border-radius: 8px;
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
  font-size: 13px; line-height: 1.5; word-break: break-all;
}
.cx-waf-fall.ok    .cx-waf-anfrage { color: var(--cx-accent); }
.cx-waf-fall.block .cx-waf-anfrage { color: #E06A6A; }
.cx-waf-befund { margin: 0 0 12px; padding-left: 20px; }
.cx-waf-befund li { font-size: 13.5px; line-height: 1.7; color: var(--cx-text-muted); }
.cx-waf-ergebnis { font-weight: 600; }
.cx-waf-erklaerung {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--cx-border);
  font-size: 14.5px; line-height: 1.65;
}
.cx-waf-erklaerung code {
  padding: 2px 6px; border-radius: 5px; font-size: 13px;
  background: var(--cx-carbon); border: 1px solid var(--cx-border); color: #E06A6A;
}

/* --- Zwei Sichten auf dieselbe Anfrage ------------------------------------- */
.cx-waf-sicht.ok    { border-color: rgba(30,123,232,.35); }
.cx-waf-sicht.block { border-color: rgba(224,106,106,.45); }
.cx-waf-sicht > b { display: block; font-size: 16px; margin-bottom: 12px; }
.cx-waf-sieht { display: grid; gap: 6px; margin-bottom: 14px; }
.cx-waf-sieht code {
  padding: 8px 12px; border-radius: 8px; font-size: 13px; word-break: break-all;
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
  color: var(--cx-text-muted);
}
.cx-waf-urteil { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; }
.cx-waf-sicht.block .cx-waf-sieht code { color: #E06A6A; }

/* --- Vier Wächter ---------------------------------------------------------- */
.cx-waf-waechter { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cx-waf-waechter-karte { display: flex; flex-direction: column; gap: 6px; }
.cx-waf-waechter-karte i { font-style: normal; font-size: 26px; line-height: 1.2; }
.cx-waf-waechter-karte b { font-size: 16px; }
.cx-waf-waechter-karte p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.cx-waf-ebene {
  align-self: flex-start; margin-top: 6px;
  padding: 4px 10px; border-radius: 99px; font-size: 11.5px;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--cx-carbon); border: 1px solid var(--cx-border); color: var(--cx-steel);
}

/* --- Virtuelles Patching: der Zeitvergleich -------------------------------- */
.cx-waf-zeit { display: grid; gap: 10px; margin: 14px 0 4px; }
.cx-waf-zeit-zeile {
  padding: 12px 14px; border-radius: 10px;
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
}
.cx-waf-zeit-zeile.kurz { border-color: rgba(47,191,113,.42); }
.cx-waf-zeit-zeile b { display: block; font-size: 13.5px; margin-bottom: 8px; }
.cx-waf-zeit-schritte { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Die Schritte als Kette: Der Pfeil kommt aus dem CSS, nicht aus den Daten. */
.cx-waf-zeit-schritte span {
  padding: 4px 10px; border-radius: 6px; font-size: 12.5px;
  background: var(--cx-graphite); border: 1px solid var(--cx-border);
  color: var(--cx-text-muted);
}
.cx-waf-zeit-schritte span + span::before {
  content: '→'; margin-right: 8px; margin-left: -4px; color: var(--cx-steel);
}
.cx-waf-zeit-zeile em {
  display: block; margin-top: 8px; font-style: normal; font-size: 13px; font-weight: 600;
  color: #F0B428;
}
.cx-waf-zeit-zeile.kurz em { color: var(--cx-accent); }
.cx-waf-regeln { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }

/* --- Vor Ort oder Cloud ---------------------------------------------------- */
.cx-waf-betrieb { gap: var(--cx-gap); align-items: start; }
.cx-waf-betrieb h2 { font-size: 19px; margin: 0 0 4px; }
.cx-waf-unter { font-size: 13.5px; color: var(--cx-steel); margin: 0 0 14px; }
.cx-waf-kette {
  margin: 0 0 16px; padding: 16px 12px; border-radius: 12px;
  background: rgba(30,123,232,.05); border: 1px solid var(--cx-border);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.cx-waf-kette i { font-style: normal; color: var(--cx-steel); font-size: 13px; line-height: 1; }

/* --- Fazit: vier Fragen nebeneinander -------------------------------------- */
.cx-waf-fragen { display: grid; gap: 8px; margin: 16px 0; }
.cx-waf-frage-zeile {
  display: grid; grid-template-columns: 170px 1fr; gap: 14px; align-items: baseline;
  padding: 10px 14px; border-radius: 8px;
  background: var(--cx-graphite); border: 1px solid var(--cx-border);
}
.cx-waf-frage-zeile b { font-size: 14.5px; }
.cx-waf-frage-zeile span { font-size: 14.5px; color: var(--cx-text-muted); }

/* --- Heller Modus: gemessene Werte ---------------------------------------- */
html[data-theme="light"] .cx-waf-haus svg { color: #6B7280; }
html[data-theme="light"] .cx-waf-zaun { stroke: var(--cx-blue-deep); }
html[data-theme="light"] .cx-waf-name.zaun { fill: var(--cx-blue-deep); }
/* Zwei Werte lagen mit 4,67 und 4,83 knapp über der Schwelle – bei Schrift
   unter 13 px ist das zu wenig Reserve. Beide abgedunkelt auf über 5,5:1. */
html[data-theme="light"] .cx-waf-svg-frage { fill: #565D68; }
html[data-theme="light"] .cx-waf-ebene { color: #565D68; }
/* Amber trägt auf Weiß nicht – dieselbe abgedunkelte Fassung wie überall. */
html[data-theme="light"] .cx-waf-steher,
html[data-theme="light"] .cx-waf-tuer { stroke: rgb(150,92,25); }
html[data-theme="light"] .cx-waf-name.tuer { fill: rgb(150,92,25); }
html[data-theme="light"] .cx-waf-zeit-zeile em { color: rgb(150,92,25); }
html[data-theme="light"] .cx-waf-marke-block,
html[data-theme="light"] .cx-waf-fall.block .cx-waf-anfrage,
html[data-theme="light"] .cx-waf-sicht.block .cx-waf-sieht code,
html[data-theme="light"] .cx-waf-erklaerung code { color: #C0392B; }
html[data-theme="light"] .cx-waf-fall,
html[data-theme="light"] .cx-waf-rolle,
html[data-theme="light"] .cx-waf-frage-zeile,
html[data-theme="light"] .cx-waf-zeit-schritte span { background: var(--cx-white); }
html[data-theme="light"] .cx-waf-anfrage,
html[data-theme="light"] .cx-waf-sieht code,
html[data-theme="light"] .cx-waf-erklaerung code,
html[data-theme="light"] .cx-waf-ebene,
html[data-theme="light"] .cx-waf-zeit-zeile { background: #F4F6F9; }

@media (max-width: 860px) {
  .cx-waf-ausgang, .cx-waf-faelle, .cx-waf-sichten, .cx-waf-betrieb {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .cx-waf-frage-zeile { grid-template-columns: 1fr; gap: 2px; }
  .cx-waf-haus { margin-left: -8px; margin-right: -8px; }
}

/* --- Produktseite: Anreicherung ab 1.17 -----------------------------------
   Alle Bausteine sind optional. Ein Produkt ohne die neuen Felder rendert
   genau wie vorher – deshalb steht hier nichts, was den Bestand verändert. */

/* Einordnungsband direkt unter dem Kopf: sagt in einer Zeile, was für ein
   Ding das ist. Der erste Chip ist hervorgehoben (die Produktrolle), der Rest
   ist Beiwerk – dieselbe Optik wie die Filter-Chips, nur nicht klickbar. */
.cx-p-einordnung { margin-top: 4px; margin-bottom: 4px; }
.cx-p-einordnung .cx-chip { cursor: default; }
.cx-p-einordnung .cx-chip:hover { border-color: var(--cx-border); color: var(--cx-muted); }
.cx-p-einordnung .cx-chip.active:hover { color: var(--cx-white); }

/* „Was die Lösung abdeckt“ und „Worauf du achten solltest“ stehen nebeneinander
   in cx-two-col.
   Die Aufzählung ist enger gesetzt als Fließtext – es sind Stichpunkte, keine
   Absätze, und beide Karten sollen auf gleicher Höhe enden. */
.cx-p-liste { margin: 0; padding-left: 18px; }
.cx-p-liste li { margin-bottom: 7px; color: var(--cx-muted); line-height: 1.55; }
.cx-p-liste li:last-child { margin-bottom: 0; }

/* Betriebstabelle: schmale Merkmalsspalte, damit die Werte auf einer Kante
   beginnen. Ohne feste Breite rutscht sie je nach längstem Begriff. */
.cx-p-betrieb td:first-child {
  width: 210px; font-weight: 600; color: var(--cx-text);
}
@media (max-width: 620px) {
  .cx-p-betrieb td:first-child { width: 40%; }
}

/* Funktionsklasse über der Vergleichstabelle. Sie erklärt, warum dort nicht
   mehr der ganze Bereich steht – ohne diesen Satz wirkt die kurze Liste wie
   ein Datenfehler. */
.cx-p-klasse { margin-top: -2px; margin-bottom: 14px; }

/* Alternativen-Tabelle: die Abgrenzung ist der eigentliche Inhalt und bekommt
   den Platz. Hersteller und Produkt bleiben schmal und umbruchsicher. */
.cx-p-alternativen th:first-child, .cx-p-alternativen td:first-child { width: 130px; }
.cx-p-alternativen th:nth-child(2), .cx-p-alternativen td:nth-child(2) { width: 235px; }
.cx-p-alternativen td:last-child { line-height: 1.55; }

/* Der eingeklappte Rest derselben Funktionsklasse. */
.cx-p-weitere { margin-top: 18px; }
.cx-p-weitere > summary {
  cursor: pointer; color: var(--cx-blue); font-weight: 600; font-size: 14.5px;
  padding: 8px 0; list-style: none;
}
.cx-p-weitere > summary::-webkit-details-marker { display: none; }
.cx-p-weitere > summary::before {
  content: '▸'; display: inline-block; margin-right: 8px;
  transition: transform .15s;
}
.cx-p-weitere[open] > summary::before { transform: rotate(90deg); }
.cx-p-weitere > summary:hover { color: var(--cx-accent); }
/* Hell: dieselbe Tiefblau-Regel wie bei den übrigen Links. --cx-blue kommt auf
   der hellen Fläche nur auf 3,81:1 und liegt damit unter der Lesbarkeitsgrenze;
   --cx-blue-deep erreicht 6,10:1. */
html[data-theme="light"] .cx-p-weitere > summary { color: var(--cx-blue-deep); }
.cx-p-weitere .cx-table { margin-top: 10px; }

@media (max-width: 860px) {
  .cx-p-alternativen th:first-child, .cx-p-alternativen td:first-child,
  .cx-p-alternativen th:nth-child(2), .cx-p-alternativen td:nth-child(2) { width: auto; }
}

/* ===================== Sichtprobe ========================================
   Der Betreiber sieht die Seite mit den Augen eines anderen Kontos. Zwei
   Dinge muss die Gestaltung leisten, sonst wird die Funktion gefährlich:

   1. UNÜBERSEHBAR. Wer vergisst, dass er fremd unterwegs ist, hält fehlende
      interne Daten für einen Fehler der Seite – und meldet ihn. Das Band
      steht deshalb über allem, klebt beim Scrollen mit und trägt eine Farbe,
      die sonst nirgends vorkommt.
   2. NICHT ALS ALARM. Es ist kein Fehler, sondern ein Betriebszustand.
      Bernstein statt Rot, dieselbe Überlegung wie bei --cx-warn im
      Direktvergleich. */

.cx-sicht-band {
  /* Klebt direkt unter der Kopfzeile und bleibt darunter: über dem Inhalt,
     aber nicht über der Leiste (die liegt auf 50). */
  position: sticky; top: var(--cx-kopf); z-index: 45;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 9px clamp(14px, 4vw, 34px);
  /* Die einfachen Werte stehen zuerst als Rückfall: color-mix() kennen ältere
     Browser nicht, und ein Band ohne Hintergrund wäre genau das Gegenteil
     dessen, was es leisten soll. */
  background: #F1E6CE;
  background: color-mix(in srgb, var(--cx-warn) 16%, var(--cx-graphite));
  border-bottom: 1px solid #C9A24A;
  border-bottom-color: color-mix(in srgb, var(--cx-warn) 55%, transparent);
  color: var(--cx-text); font-size: 13px; line-height: 1.45;
}
.cx-sicht-marke {
  flex: none; padding: 3px 9px; border-radius: 999px;
  background: var(--cx-warn); color: #14171C;
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase;
}
.cx-sicht-text { flex: 1 1 260px; min-width: 0; }
.cx-sicht-text em { font-style: normal; font-weight: 600; }
.cx-sicht-knoepfe { flex: none; display: flex; gap: 8px; flex-wrap: wrap; }
.cx-sicht-knopf {
  font: inherit; font-size: 12px; cursor: pointer;
  padding: 5px 12px; border-radius: 999px;
  background: var(--cx-graphite); color: var(--cx-text);
  border: 1px solid #C9A24A;
  border-color: color-mix(in srgb, var(--cx-warn) 60%, transparent);
  transition: background .15s, border-color .15s;
}
.cx-sicht-knopf:hover { background: var(--cx-carbon); }
.cx-sicht-knopf.zurueck {
  background: var(--cx-text); color: var(--cx-graphite); border-color: var(--cx-text);
}
.cx-sicht-knopf.zurueck:hover { opacity: .88; }

/* Der Punkt in der Konto-Kachel, solange die Probe läuft. */
.cx-konto-punkt.probe {
  background: var(--cx-warn);
  box-shadow: 0 0 0 3px rgba(229, 168, 59, .22);
}

/* --- Auswahlfenster --- */
.cx-sicht-dialog { width: min(560px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
.cx-sicht-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px 12px; border-bottom: 1px solid var(--cx-border);
}
.cx-sicht-kopf h3 { margin: 0; font-size: 17px; }
.cx-sicht-hinweis {
  margin: 0; padding: 12px 18px; font-size: 12.5px; line-height: 1.5;
  color: var(--cx-text-muted); background: var(--cx-carbon);
  border-bottom: 1px solid var(--cx-border);
}
.cx-sicht-feld {
  display: block; width: calc(100% - 36px); margin: 14px 18px 8px;
  box-sizing: border-box; padding: 9px 12px; font: inherit; font-size: 14px;
  background: var(--cx-carbon); color: var(--cx-text);
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius-sm);
}
.cx-sicht-feld:focus { outline: none; border-color: var(--cx-blue); }
.cx-sicht-liste { max-height: min(48vh, 420px); overflow-y: auto; padding: 4px 10px 14px; }
.cx-sicht-eintrag {
  display: grid; gap: 2px; width: 100%; text-align: left; cursor: pointer;
  padding: 9px 11px; border: 1px solid transparent;
  border-radius: var(--cx-radius-sm); background: none; color: var(--cx-text);
  font: inherit;
}
.cx-sicht-eintrag:hover, .cx-sicht-eintrag:focus-visible {
  background: var(--cx-carbon); border-color: var(--cx-border); outline: none;
}
.cx-sicht-eintrag.gast { border-bottom: 1px solid var(--cx-border); border-radius: 0; margin-bottom: 6px; }
.cx-sicht-eintrag.gesperrt .cx-sicht-mail { text-decoration: line-through; }
.cx-sicht-mail { font-size: 14px; font-weight: 600; }
.cx-sicht-meta { font-size: 12px; color: var(--cx-steel); }
.cx-sicht-leer { margin: 10px 11px; font-size: 13px; color: var(--cx-steel); }

@media (max-width: 700px) {
  .cx-sicht-band { font-size: 12.5px; gap: 10px; }
  .cx-sicht-knoepfe { width: 100%; }
}

/* ===================== Neuigkeiten in der Konto-Kachel ====================
   Zwei Dinge warten auf eine Entscheidung des Betreibers: ein Konto, das
   freigeschaltet werden will, und eine Zugangsanfrage von der Startseite.
   Beides löst eine Mail aus – aber eine Mail kann im Spam landen, und dann
   wartet jemand tagelang, ohne dass es auffällt.

   Deshalb dieselbe Farbe wie bei der Sichtprobe: Bernstein für „hier wartet
   etwas“, kein Rot. Ein Kontoantrag ist kein Fehler. */

#konto-neues { display: contents; }   /* der Wrapper soll das Grid nicht stören */
.cx-konto-neues {
  display: grid; gap: 7px;
  padding-top: 12px; border-top: 1px solid var(--cx-border);
}
.cx-neues-zeile {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; margin: 0 -8px;
  border-radius: var(--cx-radius-sm);
  color: var(--cx-text); text-decoration: none;
  transition: background .15s;
}
.cx-neues-zeile:hover { background: var(--cx-carbon); }
.cx-neues-zahl {
  flex: none; min-width: 22px; height: 22px; padding: 0 6px;
  display: grid; place-items: center;
  border-radius: 999px; background: var(--cx-warn); color: #14171C;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.cx-neues-text { font-size: 12.5px; line-height: 1.35; }
.cx-neues-text em {
  display: block; font-style: normal; font-size: 11.5px; color: var(--cx-steel);
}
.cx-neues-nichts { font-size: 12.5px; color: var(--cx-steel); }

/* --- Hinterlassene Nachrichten (1.63.0) ------------------------------------
   Die Zeilen darüber sind GERECHNET („2 Konten warten"); hier steht, was ein
   Mensch GESCHRIEBEN hat. Deshalb sehen sie anders aus: eigener Grund, kein
   Zähler, dafür ein Knopf zum Wegklicken. Ein Hinweis, den jemand getippt hat,
   soll nicht wie eine Systemmeldung wirken – man liest ihn sonst als Zahl. */
.cx-neues-nachricht {
  display: grid; gap: 5px;
  padding: 9px 10px; margin: 0 -2px;
  border-radius: var(--cx-radius-sm);
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
}
.cx-neues-woher {
  display: flex; align-items: baseline; gap: 7px;
  font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--cx-blue-light); font-weight: 600;
}
html[data-theme="light"] .cx-neues-woher { color: var(--cx-blue-deep); }
.cx-neues-woher em {
  font-style: normal; letter-spacing: 0; text-transform: none;
  font-weight: 400; color: var(--cx-steel);
}
/* Die Nachricht selbst ist der Inhalt und darf umbrechen, so lang sie ist –
   500 Zeichen sind vier Zeilen, und abzuschneiden hieße, den Sinn zu
   verstecken. */
.cx-neues-nachricht p {
  margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--cx-text);
  overflow-wrap: anywhere;
}
.cx-neues-quitt {
  justify-self: start; margin-top: 2px;
  padding: 3px 11px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--cx-border);
  color: var(--cx-text-muted); font: 600 11.5px/1.5 var(--cx-font-body);
}
.cx-neues-quitt:hover { border-color: var(--cx-blue); color: var(--cx-text); }
.cx-neues-quitt:disabled { opacity: .45; cursor: default; }

/* Die Aufforderung zum Passwortwechsel ist keine Nachricht, sondern ein
   Zustand des Kontos – sie lässt sich nicht wegklicken und steht deshalb
   ohne Knopf, aber mit dem Warnton der übrigen offenen Punkte. */
.cx-neues-pw { border-left: 3px solid var(--cx-warn); padding-left: 9px; }
.cx-neues-pw strong { color: var(--cx-text); }

/* ═══════════════════════════════ Business Units und Konto-Blatt (1.45.0) ═══ */

/* Anklickbare Zeile in der Kontenliste. Der Pfeil sitzt am ZEILENENDE und
   nicht hinter der Mailadresse – dort bricht er bei langen Adressen um. */
.cx-table-klick tbody tr { cursor: pointer; }
.cx-table-klick tbody tr:hover,
.cx-table-klick tbody tr:focus-visible { background: rgba(30, 123, 232, .09); }
.cx-table-klick tbody tr:focus-visible { outline: 2px solid var(--cx-blue); outline-offset: -2px; }
.cx-table-klick tbody td:last-child { position: relative; padding-right: 24px; }
.cx-table-klick tbody td:last-child::after {
  content: "›"; position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%); opacity: .4; font-weight: 700; font-size: 17px;
}
/* Ein freigeschaltetes Konto, in dem nie jemand war – das soll auffallen. */
.cx-nie { opacity: .55; font-style: italic; }

.cx-zurueck { font-size: 13.5px; opacity: .75; margin: 0 0 6px; }
.cx-klein   { display: block; font-size: 12.5px; opacity: .62; margin-top: 2px; }

.cx-konto-stamm {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px 24px; padding: 0 0 20px; border-bottom: 1px solid var(--cx-border);
}
.cx-konto-stamm label {
  display: block; font-size: 11.5px; letter-spacing: .07em;
  text-transform: uppercase; opacity: .55; margin: 0 0 6px;
}
.cx-konto-fest { font-size: 15px; padding-top: 4px; }

/* Woher die Rechte kommen: geerbt oder eigens gesetzt. */
.cx-erbzeile {
  display: flex; flex-wrap: wrap; gap: 12px 26px;
  padding: 14px 16px; margin: 0 0 18px; font-size: 14.5px;
  border: 1px solid var(--cx-border); border-left: 4px solid #E8A31E;
  border-radius: 10px;
}
.cx-erbzeile label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.cx-erbzeile input { margin-top: 3px; flex: 0 0 auto; }

.cx-hakenraster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 2px 30px;
}
.cx-haken {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 0; border-bottom: 1px solid var(--cx-border); font-size: 14.5px;
}
.cx-haken input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--cx-blue); }
/* Gilt die Vorgabe der Einheit, sind die Haken nicht bedienbar – aber der
   Zustand MUSS sichtbar bleiben. Ein disabled-Kästchen zeichnet der Browser
   im dunklen Modus so blass, dass angehakt und leer gleich aussehen. */
.cx-haken-aus { opacity: .72; pointer-events: none; }

/* Breite Tabellen scrollen in sich selbst statt die ganze Seite zu kippen. */
.cx-scroll-x { overflow-x: auto; }
.cx-scroll-x table.cx-table { min-width: 860px; }

/* Gruppierte Haken im Einheiten-Formular. */
.cx-fieldset {
  border: 1px solid var(--cx-border); border-radius: 12px;
  padding: 14px 18px 6px; margin: 18px 0;
}
.cx-fieldset legend {
  padding: 0 8px; font-size: 12.5px; letter-spacing: .06em;
  text-transform: uppercase; opacity: .7;
}

/* --- Kontoantrag: „Erkannt: Axians" --------------------------------------
   Eine Rückmeldung, keine Meldung: Sie bestätigt nur, dass die Domain zu einer
   hinterlegten Firma gehört, und steht deshalb ruhig da – grüner Balken links
   statt farbigem Kasten. Wer sich vertippt, sieht dass sie ausbleibt. */
.cx-reg-erkannt {
  margin: 14px 0 4px; padding: 9px 14px; font-size: 14.5px;
  border-left: 3px solid var(--cx-accent); border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--cx-accent) 8%, transparent);
}

/* Sammel-Anlage der Einheiten: das Feld für die Liste aus der Mail. Feste
   Schriftbreite, weil untereinanderstehende Zeilen so als Liste lesbar sind
   und nicht als Fließtext. */
.cx-sammel textarea {
  width: 100%; min-height: 130px; resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px; line-height: 1.6;
}

/* Hinweis im Steckbrief, welche Abschnitte das eigene Konto nicht sieht.
   Zurückhaltend: Es ist eine Fußnote zum Block, keine Warnung – gesperrt zu
   sein ist der eingestellte Normalfall und kein Fehler.

   NICHT .cx-gesperrt nennen, die Klasse ist oben schon vergeben: Sie trägt den
   großen Sperrkasten für Gäste („anmelden, um das zu sehen“). Ein zweiter
   Block mit demselben Namen hätte dessen Innenabstand, Rahmen und Schriftgröße
   überschrieben – und die Sperrseite für alle Besucher entstellt. */
.cx-nicht-frei {
  margin: 18px 0 0; padding: 8px 0 0; font-size: 13.5px;
  color: var(--cx-steel); border-top: 1px dashed var(--cx-border);
}

/* Wunschrolle in der Antragsliste – ein Wunsch, keine Tatsache, deshalb
   kleiner und in Anführungszeichen gesetzter Ton statt Abzeichen-Optik. */
.cx-wunsch {
  display: inline-block; margin-left: 8px; padding: 1px 8px;
  font-size: 12.5px; border: 1px dashed var(--cx-border); border-radius: 999px;
  color: var(--cx-steel);
}

/* ===================================================================
   FIDO, FIDO2 und FIPS (Know-How)
   Eigenes Präfix cx-fido-, weil die Seite Bausteine braucht, die es so
   noch nicht gab: die zeilenweise Gegenüberstellung und die Stufenleiter.
   Alles Übrige – Tabellen, Flussdiagramm, Kernaussage, Warnkasten –
   greift bewusst auf die vorhandenen cx-zert-Klassen zurück; ein zweites
   Aussehen für dieselbe Sache wäre nur Pflegeaufwand.
   =================================================================== */

/* --- Die Gegenüberstellung FIDO / FIPS --- */
/* Zwei Spalten, die auf dem Handy untereinander rutschen. Der farbige
   Streifen oben ist der einzige Unterschied zwischen beiden Karten –
   sie sollen sich gleichen, damit der INHALT den Unterschied macht. */
.cx-fido-gegenueber {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px;
}
.cx-fido-gegen { padding: 20px 22px; border-top: 3px solid var(--cx-border); }
.cx-fido-gegen.fido { border-top-color: var(--cx-accent); }
.cx-fido-gegen.fips { border-top-color: var(--cx-warn); }
.cx-fido-gegen-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cx-fido-gegen-kurz { font-size: 22px; font-weight: 800; letter-spacing: .02em; }
.cx-fido-gegen.fido .cx-fido-gegen-kurz { color: var(--cx-accent); }
.cx-fido-gegen.fips .cx-fido-gegen-kurz { color: var(--cx-warn); }
.cx-fido-gegen-lang { font-size: 13px; color: var(--cx-steel); }
.cx-fido-gegen-frage {
  margin: 12px 0 16px; font-size: 17px; font-weight: 600; line-height: 1.4;
}
.cx-fido-gegen-liste { margin: 0; display: grid; gap: 10px; }
.cx-fido-gegen-liste dt {
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--cx-steel);
}
.cx-fido-gegen-liste dd { margin: 2px 0 0; font-size: 14px; line-height: 1.55; }
.cx-fido-gegen-beispiel {
  margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--cx-border);
  font-size: 13.5px; color: var(--cx-text-muted); font-style: italic;
}

/* --- Die Phishing-Kette und die Nachteile der FIPS-Ausführung --- */
.cx-fido-kette {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px; margin-top: 18px;
}
.cx-fido-kette-glied { padding: 16px 18px; }
.cx-fido-kette-glied b { display: block; margin-bottom: 6px; font-size: 15px; }
.cx-fido-kette-glied p { margin: 0; font-size: 14px; line-height: 1.55; }
.cx-fido-loesung {
  padding: 18px 20px; border-left: 3px solid var(--cx-accent); margin-top: 16px;
}
.cx-fido-loesung p { margin: 0; font-size: 15px; line-height: 1.6; }

/* --- Zeitleiste der FIDO-Familie --- */
/* Die Jahreszahl steht in einer eigenen schmalen Spalte, damit die Karten
   links bündig beginnen. Ohne feste Spalte würde jede Karte anders
   einrücken, sobald eine Jahreszahl vierstellig und die nächste kürzer ist. */
.cx-fido-zeitleiste { display: grid; gap: 12px; margin-top: 18px; }
.cx-fido-station { display: grid; grid-template-columns: 74px 1fr; gap: 14px; align-items: start; }
.cx-fido-jahr {
  padding-top: 16px; font-size: 17px; font-weight: 800; color: var(--cx-steel);
  text-align: right;
}
.cx-fido-station-karte { padding: 16px 18px; }
.cx-fido-station-karte b { font-size: 16px; }
.cx-fido-station-karte p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; }
.cx-fido-status {
  display: inline-block; margin-left: 10px; padding: 2px 9px; border-radius: 99px;
  font-size: 11.5px; font-weight: 600; background: rgba(100,112,125,.14);
  color: var(--cx-steel);
}

/* --- WebAuthn und CTAP2 nebeneinander --- */
.cx-fido-teile {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0;
}
.cx-fido-teil { padding: 18px 20px; }
.cx-fido-teil > b { font-size: 18px; }
.cx-fido-teil-lang { display: block; margin: 2px 0 14px; font-size: 13px; color: var(--cx-steel); }
.cx-fido-teil > p { margin: 12px 0 0; font-size: 14px; line-height: 1.6; }
.cx-fido-protokoll {
  display: inline-block; margin-top: 6px; padding: 1px 8px; border-radius: 99px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  background: rgba(15,118,110,.13); color: var(--cx-accent);
}

/* --- Registrierung und Anmeldung nebeneinander --- */
.cx-fido-doppel { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 18px 0 26px; }
.cx-fido-halb { display: grid; gap: 12px; align-content: start; }
.cx-fido-halb h3 { margin: 0 0 4px; font-size: 17px; }
/* Kein Einzug für die Nummer: .cx-zert-nr ist inline-flex und steht damit im
   Fluss über dem Titel, nicht absolut positioniert daneben. */
.cx-fido-schritt { padding: 14px 16px; }
.cx-fido-schritt b { display: block; margin-bottom: 5px; font-size: 14.5px; }
.cx-fido-schritt p { margin: 0; font-size: 13.5px; line-height: 1.55; }

/* --- Das Origin-Binding-Bild --- */
.cx-fido-bild { margin: 20px 0; }
.cx-fido-bild svg { width: 100%; height: auto; }
.cx-fido-weg rect { fill: none; stroke: var(--cx-border); stroke-width: 1.5; }
.cx-fido-weg text {
  fill: var(--cx-text); font-size: 15px; font-weight: 600; text-anchor: middle;
}
.cx-fido-weg text.klein { fill: var(--cx-steel); font-size: 12px; font-weight: 400; }
.cx-fido-weg .pfeil { stroke: var(--cx-steel); stroke-width: 1.5; marker-end: none; }
.cx-fido-weg.gut rect { stroke: var(--cx-accent); }
.cx-fido-weg.gut .cx-fido-ziel rect { fill: rgba(15,118,110,.12); }
.cx-fido-weg.gut .cx-fido-ziel text { fill: var(--cx-accent); }
.cx-fido-weg.schlecht rect { stroke: var(--cx-warn); stroke-dasharray: 5 4; }
.cx-fido-weg.schlecht .cx-fido-ziel rect { fill: rgba(229,168,59,.14); stroke-dasharray: none; }
.cx-fido-weg.schlecht .cx-fido-ziel text { fill: var(--cx-warn); }
.cx-fido-notiz { fill: var(--cx-steel); font-size: 13px; text-anchor: middle; font-style: italic; }

/* --- Passkeys: die zwei Sorten --- */
.cx-fido-sorten { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.cx-fido-sorte { padding: 18px 20px; }
.cx-fido-sorte.gebunden { border-left: 3px solid var(--cx-accent); }
.cx-fido-sorte.synchronisiert { border-left: 3px solid var(--cx-steel); }
.cx-fido-sorte > b { display: block; margin-bottom: 12px; font-size: 17px; }
.cx-fido-sorte .cx-zert-marke { background: rgba(100,112,125,.14); color: var(--cx-steel); }
.cx-fido-plus, .cx-fido-minus {
  margin: 0 0 10px; padding-left: 22px; position: relative;
  font-size: 14px; line-height: 1.55;
}
.cx-fido-plus > span, .cx-fido-minus > span {
  position: absolute; left: 0; top: 0; font-weight: 800;
}
.cx-fido-plus > span { color: var(--cx-accent); }
.cx-fido-minus > span { color: var(--cx-warn); }
.cx-fido-eignung { margin: 12px 0 0; font-size: 13.5px; color: var(--cx-text-muted); }
.cx-fido-neu { padding: 18px 20px; margin-top: 16px; }
.cx-fido-neu b { display: block; margin-bottom: 8px; font-size: 15.5px; }
.cx-fido-neu p { margin: 0 0 8px; font-size: 14px; line-height: 1.6; }

/* --- Die Stufenleitern (FIDO L1–L3+ und FIPS 140-3 Level 1–4) --- */
/* Bewusst dieselbe Darstellung für beide, obwohl der Text davor warnt, sie
   zu verwechseln: Erst wenn man sieht, wie ähnlich zwei Zahlenreihen
   aussehen können, versteht man, warum die Verwechslung so verbreitet ist.
   Der Farbverlauf über --stufe macht die Steigerung sichtbar, ohne dass
   je Stufe eine eigene Klasse gepflegt werden müsste. */
.cx-fido-leiter { display: grid; gap: 10px; margin: 18px 0; }
.cx-fido-sprosse {
  display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: start;
  padding: 14px 18px; border-radius: 10px;
  border: 1px solid var(--cx-border);
  background: color-mix(in srgb, var(--cx-accent) calc(var(--stufe) * 9%), var(--cx-graphite));
}
.cx-fido-sprosse-nr {
  font-size: 19px; font-weight: 800; color: var(--cx-accent); text-align: center;
  padding-top: 1px;
}
.cx-fido-sprosse-text b { display: block; margin-bottom: 5px; font-size: 15px; }
.cx-fido-sprosse-text p { margin: 0; font-size: 14px; line-height: 1.55; }
.cx-fido-sprosse-bsp {
  display: block; margin-top: 7px; font-size: 13px; color: var(--cx-steel);
  font-style: italic;
}

/* --- Die FIPS-Nummernserie --- */
/* Nur eine der Nummern ist prüfbar. Diese Zeile bekommt einen Rahmenakzent,
   damit sie beim Überfliegen der Tabelle nicht untergeht – sie ist der
   einzige Grund, warum die Tabelle überhaupt da steht. */
.cx-fido-nummern tr.ist-pruefbar td { background: rgba(15,118,110,.07); }
.cx-fido-nummern tr.ist-pruefbar td:first-child { box-shadow: inset 3px 0 0 var(--cx-accent); }
.cx-fido-marke {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  background: rgba(15,118,110,.15); color: var(--cx-accent);
}
.cx-fido-genau { padding: 18px 20px; margin-top: 16px; border-left: 3px solid var(--cx-accent); }
.cx-fido-genau b { display: block; margin-bottom: 8px; font-size: 15.5px; }
.cx-fido-genau p { margin: 0 0 10px; font-size: 14px; line-height: 1.6; }

/* --- Die Frist zum 21.09.2026 --- */
.cx-fido-frist { padding: 20px 22px; display: grid; gap: 2px; margin-top: 18px; }
.cx-fido-frist-zeile {
  display: grid; grid-template-columns: 168px 1fr; gap: 16px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--cx-border);
}
.cx-fido-frist-zeile:last-child { border-bottom: none; }
.cx-fido-frist-wann { font-size: 14.5px; font-weight: 700; color: var(--cx-steel); }
.cx-fido-frist-was { font-size: 14.5px; line-height: 1.55; }
.cx-fido-frist-zeile.letzte .cx-fido-frist-wann { color: var(--cx-warn); }
.cx-fido-frist-zeile.letzte .cx-fido-frist-was { font-weight: 600; }
.cx-fido-wahrheit { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.cx-fido-wahr { padding: 18px 20px; }
.cx-fido-wahr.wahr { border-left: 3px solid var(--cx-accent); }
.cx-fido-wahr.unwahr { border-left: 3px solid var(--cx-warn); }
.cx-fido-wahr b { display: block; margin-bottom: 10px; font-size: 15.5px; }
.cx-fido-wahr ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.cx-fido-wahr li { font-size: 14px; line-height: 1.55; }

/* --- Die AAL-Stufen --- */
.cx-fido-aal {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px; margin-top: 18px;
}
.cx-fido-aal-karte { padding: 18px 20px; }
.cx-fido-aal-nr {
  display: inline-block; margin-bottom: 10px; padding: 3px 11px; border-radius: 99px;
  font-size: 13px; font-weight: 800; letter-spacing: .03em;
  background: rgba(15,118,110,.14); color: var(--cx-accent);
}
.cx-fido-aal-karte > b { display: block; margin-bottom: 8px; font-size: 15.5px; line-height: 1.4; }
.cx-fido-aal-karte > p { margin: 0 0 14px; font-size: 14px; line-height: 1.55; }
.cx-fido-knack { padding: 20px 22px; margin-top: 18px; border-left: 3px solid var(--cx-warn); }
.cx-fido-knack b { display: block; margin-bottom: 10px; font-size: 16px; }
.cx-fido-knack p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.6; }
.cx-fido-folge { font-weight: 600; }

/* --- Braucht ein deutscher Kunde FIPS? --- */
.cx-fido-frage { padding: 22px 24px; margin-bottom: 18px; }
.cx-fido-antwort {
  margin: 6px 0 14px; font-size: 20px; font-weight: 800; color: var(--cx-accent);
}
.cx-fido-frage p:last-child { margin: 0; font-size: 15px; line-height: 1.6; }
.cx-fido-wege {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px; margin: 14px 0 18px;
}
.cx-fido-weg-karte { padding: 16px 18px; }
.cx-fido-weg-karte b { display: block; margin-bottom: 6px; font-size: 15px; }
.cx-fido-weg-karte p { margin: 0; font-size: 13.5px; line-height: 1.55; }

/* --- Anbietergruppen --- */
.cx-fido-gruppe { margin: 24px 0 12px; font-size: 17px; }

/* --- Handy --- */
@media (max-width: 860px) {
  .cx-fido-gegenueber, .cx-fido-teile, .cx-fido-doppel,
  .cx-fido-sorten, .cx-fido-wahrheit { grid-template-columns: 1fr; }
  .cx-fido-station { grid-template-columns: 56px 1fr; gap: 10px; }
  .cx-fido-jahr { font-size: 15px; padding-top: 15px; }
  .cx-fido-sprosse { grid-template-columns: 54px 1fr; gap: 10px; padding: 13px 15px; }
  .cx-fido-frist-zeile { grid-template-columns: 1fr; gap: 4px; }
}

/* ==== 1.50.0 · Bereiche als Marktzeilen ================================== */
/* Eine Zeile je Bereich: links Name und Zahlen, in der Mitte der Balken mit
   den stärksten Anbietern, rechts die Absprünge. Sortierung und Balkenlänge
   folgen der Herstellerzahl – der ganze Markt auf einer Bildschirmhöhe. */
.cx-mz-liste { display: flex; flex-direction: column; }
.cx-mz-zeile {
  display: grid; grid-template-columns: 300px 1fr 150px; gap: 16px;
  align-items: center; padding: 10px 12px;
  border-bottom: 1px solid var(--cx-border); border-radius: var(--cx-radius-sm);
}
.cx-mz-zeile:hover { background: var(--cx-graphite); }
.cx-mz-kopf { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cx-mz-kopf > a {
  display: flex; align-items: center; gap: 9px;
  color: var(--cx-text); font-weight: 600; font-size: 14.5px; line-height: 1.35;
}
.cx-mz-kopf > a:hover { color: var(--cx-blue-light); }
.cx-mz-kopf .cx-bereich-zeichen { width: 30px; height: 30px; border-radius: 8px; }
.cx-mz-kopf .cx-bereich-zeichen svg { width: 17px; height: 17px; }
.cx-mz-zahl { font-size: 12px; color: var(--cx-steel); padding-left: 39px; }
.cx-mz-bett {
  position: relative; display: block; height: 48px;
  border: 1px solid var(--cx-border); border-radius: 10px;
  background: var(--cx-graphite); overflow: hidden;
}
.cx-mz-zeile:hover .cx-mz-bett { background: var(--cx-carbon); }
/* 1.58.3 – der Balken war kaum zu erkennen. Drei Ursachen, drei Antworten:
   Das Bett ist jetzt 48 px hoch statt 38. Das Logoplättchen misst 38 px
   (30 px Inhalt plus 2 × 4 px Innenabstand) und schloss damit vorher exakt
   bündig ab – oben und unten war vom Balken buchstäblich nichts zu sehen,
   er lugte nur links und rechts an den Plättchen vorbei. Jetzt stehen oben
   und unten je 5 px frei, und die Zeile liest sich als Balken.
   Der Verlauf lief nach rechts ins Nichts: im Dunkelmodus stand das
   Balkenende bei 1,27:1 gegen sein Bett, im hellen bei 1,15:1 – beides
   unterhalb der Wahrnehmungsschwelle. Jetzt 1,89:1 bzw. 1,70:1.
   Die Blautöne sind je Modus verschieden, weil ein Wert nicht beides kann:
   gegen das fast schwarze Bett trägt das helle Blau, gegen das weiße das
   tiefe. Ein gemeinsamer Ton hätte den einen Modus auf Kosten des anderen
   verbessert – gemessen: --cx-blue hätte hell von 2,38 auf 2,11 gedrückt.
   Die Kante am rechten Ende (4,5:1) macht die Länge exakt ablesbar. Ohne sie
   verläuft der Balken ins Ungefähre, und genau das Vergleichen der Bereiche
   ist der Zweck dieser Seite. */
.cx-mz-balken {
  position: absolute; inset: 0 auto 0 0; border-radius: 9px;
  background: linear-gradient(90deg, rgba(63, 169, 255, .48), rgba(63, 169, 255, .34));
  box-shadow: inset -2px 0 0 var(--cx-blue);
}
html[data-theme="light"] .cx-mz-balken {
  background: linear-gradient(90deg, rgba(13, 80, 216, .62), rgba(13, 80, 216, .32));
}
.cx-mz-logos {
  position: absolute; inset: 0; display: flex; align-items: center;
  gap: 6px; padding: 0 8px; overflow: hidden;
}
/* Logos stehen auf weißen Plättchen – auch im Dunkelmodus, Marken brauchen
   ihren hellen Grund. Fehlt ein Logo, übernimmt der Kurzname im Plättchen. */
.cx-mz-logo {
  flex: none; height: 30px; min-width: 44px; max-width: 74px;
  background: #fff; border-radius: 7px; padding: 4px 7px;
  display: inline-flex; align-items: center; justify-content: center;
}
.cx-mz-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.cx-mz-logo .cx-logo-ersatz {
  color: #14171C; font-size: 10.5px; font-weight: 700; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 60px; padding: 0;
}
.cx-mz-mehr { font-size: 11.5px; color: var(--cx-steel); font-weight: 700; margin-left: 2px; }
.cx-mz-aktion {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-end;
  font-size: 13.5px;
}
.cx-mz-leise { color: var(--cx-steel); font-weight: 400; font-size: 12.5px; }
.cx-mz-leise:hover { color: var(--cx-blue-light); }
.cx-mz-fuss { margin: 14px 4px 0; color: var(--cx-steel); font-size: 13px; max-width: 90ch; }

/* ==== 1.50.0 · Schwerpunkte in Gruppen =================================== */
/* Drei benannte Gruppen tragfähiger Schwerpunkte; Kleinst-Schlagworte stehen
   als Randnotizen unten – auffindbar, aber nicht gleichwertig. */
.cx-sp-gruppe { margin-top: 26px; }
.cx-sp-gruppe h2, .cx-sp-rand h2 { font-size: 19px; margin: 0 0 4px; }
.cx-sp-gruppe h2 em, .cx-sp-rand h2 em {
  font-style: normal; font-weight: 400; color: var(--cx-steel);
  font-size: 13.5px; margin-left: 8px;
}
.cx-sp-gruppe .cx-grid { margin-top: 12px; }
.cx-sp-note { margin: 0; font-size: 12.5px; color: var(--cx-steel); line-height: 1.5; }
/* Ausgeschriebene Bedeutung der Abkürzung, direkt unter der Überschrift.
   Bewusst --cx-text-muted statt --cx-steel wie beim Abgrenzungshinweis darunter:
   Diese Zeile ist für Einsteiger die WICHTIGSTE der Kachel und darf nicht die
   leiseste sein. Gerechnet statt geschätzt – dunkel 10,21 zu 1, hell 8,83 zu 1
   auf dem Kartengrund, beide weit über der Norm. */
.cx-sp-lang {
  margin: 0 0 2px; font-size: 13px; line-height: 1.5;
  color: var(--cx-text-muted);
}
.cx-sp-langgross {
  margin: 10px 0 9px; max-width: 92ch; font-size: 15px; line-height: 1.55;
  color: var(--cx-text-muted);
}
.cx-sp-rand { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--cx-border); }
.cx-sp-randtext { color: var(--cx-text-muted); font-size: 13.5px; max-width: 90ch; margin: 0 0 12px; }
.cx-sp-randzeile { display: flex; flex-wrap: wrap; gap: 7px; }
.cx-sp-rchip {
  font-size: 12px; padding: 5px 11px; border-radius: 99px;
  border: 1px solid var(--cx-border); color: var(--cx-steel); font-weight: 500;
}
.cx-sp-rchip:hover { border-color: var(--cx-blue); color: var(--cx-text); }
.cx-sp-rchip i { font-style: normal; opacity: .7; margin-left: 4px; }

@media (max-width: 900px) {
  .cx-mz-zeile { grid-template-columns: 200px 1fr 120px; gap: 10px; }
}
@media (max-width: 720px) {
  .cx-mz-zeile { grid-template-columns: 1fr; gap: 7px; padding: 12px 10px; }
  .cx-mz-zahl { padding-left: 0; }
  .cx-mz-aktion { flex-direction: row; gap: 14px; align-items: center; justify-content: flex-start; }
}

/* ==== 1.52.0 · Steckbrief: eine Bahn von oben nach unten ==================

   Die Seite hatte bisher zwei Sorten Kästen: den Fließtext ohne Rahmen oben
   und die Karten-Paare unten. Dazwischen ein Raster aus Produktkacheln, in
   denen jeweils zwei Zeilen standen und alles Weitere hinter „Details →“ lag.

   Jetzt eine durchlaufende Bahn: volle Breite für das, was für die ganze
   Firma gilt (Positionierung, Pitch, Wettbewerb, Bezugsquellen), 1/3 zu 2/3
   für die Produkte, 50/50 für die Argumentenpaare. Kein Kasten schwebt allein
   in einer halben Zeile.

   Die Maße stehen hier zusammen und nicht verteilt, weil sie voneinander
   abhängen: Wer die Produktspalte ändert, verschiebt die Kachel daneben. */

.cx-sb-zeit, .cx-sb-pos, .cx-sb-prod, .cx-sb-mb { margin-top: 30px; }
.cx-sb-zeit h2, .cx-sb-pos h2, .cx-sb-prod h2, .cx-sb-mb h2 { font-size: 24px; margin-bottom: 14px; }
.cx-sb-prod h2 em {
  font-style: normal; font-weight: 400; color: var(--cx-steel);
  font-size: 14px; margin-left: 10px;
}

/* --- Herkunft & Übernahmen ---------------------------------------------
   Die Jahreszahl ist die Sprungmarke, der Text die Erklärung. Farbe trennt
   die beiden Richtungen: Wer selbst zukauft (blau), verhält sich anders am
   Markt als wer einem Investor gehört (orange). */
.cx-sb-zeit { margin-top: 26px; }
.cx-sb-zeit h2 { font-size: 19px; margin-bottom: 10px; }
.cx-sb-zb { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.cx-sb-zs {
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius-sm);
  background: var(--cx-graphite); padding: 12px 14px 14px;
}
.cx-sb-zs b { font-family: var(--cx-font-display); font-size: 19px; color: var(--cx-accent); }
.cx-sb-zs.aktiv b  { color: var(--cx-blue-light); }
.cx-sb-zs.passiv b { color: var(--cx-warn); }
.cx-sb-zs p { margin: 5px 0 0; font-size: 13px; color: var(--cx-text-muted); line-height: 1.5; }
.cx-sb-zpfeil {
  display: inline-block; margin-top: 8px; font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 700; color: var(--cx-steel);
  border: 1px solid var(--cx-border); border-radius: 99px; padding: 2px 9px;
}
.cx-sb-zs.aktiv  .cx-sb-zpfeil { color: var(--cx-blue-light); border-color: rgba(63,169,255,.4); }
.cx-sb-zs.passiv .cx-sb-zpfeil { color: var(--cx-warn);       border-color: rgba(229,168,59,.45); }

/* --- Positionierung und Pitch, beide über die volle Breite ---------------
   Der Pitch war bisher ein 860 px breiter Kasten mit weißer Schrift auf
   vollem Blau. Er ist das Wichtigste auf der Seite und bekommt jetzt die
   ganze Breite – aber als heller blauer Grund mit normalem Text, weil vier
   Zeilen Weiß-auf-Blau anstrengend zu lesen sind. */
.cx-sb-pos p { font-size: 17px; margin: 0; max-width: 104ch; color: var(--cx-text-muted); }
.cx-sb-pitch {
  margin-top: 18px; padding: 18px 22px;
  border: 1px solid rgba(30,123,232,.45); border-radius: var(--cx-radius);
  background: rgba(30,123,232,.11);
}
.cx-sb-pitchmarke {
  display: block; font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 700; color: var(--cx-blue-light);
}
.cx-sb-pitch p { margin: 9px 0 0; font-size: 19px; line-height: 1.55; color: var(--cx-text); }

/* Derselbe Kasten am Produkt (ab 1.75). Er steht auf der Produktseite
   zwischen den Chips und den beiden Textspalten und braucht Luft nach beiden
   Seiten. Eine Spur kleiner gesetzt als der Herstellerpitch: Er steht dort
   unter einer h1 und soll ihr nicht die Schau stehlen.

   Seit 1.76.1 nur noch dort. Die Regel für den Fall „erstes Element im Reiter
   der Produktkachel" ist mit dem Kasten selbst entfallen – auf der
   Herstellerseite erscheint er nicht mehr. */
.cx-p-pitch p { font-size: 18px; }
main > .cx-p-pitch { margin: 16px 0 4px; }

/* --- Produkte: links wählen, rechts steht alles dazu ---------------------
   1fr zu 2fr, nicht 300px zu 1fr: Die Namensspalte soll mitwachsen, sonst
   brechen lange Produktnamen auf breiten Schirmen dreizeilig um, während
   daneben Platz frei bleibt.

   Die Liste bleibt beim Scrollen stehen (sticky). Bei 55 Produkten – so viele
   hat Microsoft – wäre sie sonst längst aus dem Bild, wenn man unten in der
   Kachel liest und das nächste Produkt wählen will. Der Abstand nach oben ist
   die Höhe der fixierten Kopfzeile plus Luft. */
.cx-sb-teilung { display: grid; grid-template-columns: 1fr 2fr; gap: 18px; align-items: start; }
.cx-sb-liste {
  display: grid; gap: 6px; align-content: start;
  position: sticky; top: calc(var(--cx-kopf) + 14px);
  /* Die feste Obergrenze neben der Fensterhöhe ist kein Schönheitsmaß: Bei
     einem Vollseiten-Screenshot und beim Drucken setzt der Browser die
     Fensterhöhe auf die Dokumenthöhe – 100vh wird dann riesig, und die Liste
     klappt über die ganze Seite aus. Mit min() bleibt sie auch dort gedeckelt. */
  max-height: min(calc(100vh - var(--cx-kopf) - 28px), 860px);
  overflow: auto; padding-right: 2px;
}
.cx-sb-suche {
  width: 100%; padding: 9px 12px; border-radius: var(--cx-radius-sm);
  border: 1px solid var(--cx-border); background: var(--cx-carbon);
  color: var(--cx-text); font: 400 13.5px var(--cx-font-body); margin-bottom: 4px;
}
.cx-sb-suche:focus { outline: none; border-color: var(--cx-blue); }
/* Die Bereichszeile ist ein Klappknopf. Sie sieht aus wie eine Überschrift und
   verhält sich wie ein Schalter – deshalb der Pfeil davor, der die Richtung
   zeigt, und die Zahl dahinter, die sagt, was sich dahinter verbirgt. */
.cx-sb-gruppe {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  font: 700 11px/1.4 var(--cx-font-body); letter-spacing: .07em; text-transform: uppercase;
  color: var(--cx-steel); padding: 12px 2px 5px; margin: 0;
  background: transparent; border: 0; cursor: pointer;
}
.cx-sb-gruppe:first-child { padding-top: 2px; }
.cx-sb-gruppe:hover { color: var(--cx-text); }
.cx-sb-gruppe::before {
  content: '▸'; font-size: 10px; letter-spacing: 0; flex: none;
  transition: transform .12s ease; transform-origin: 45% 50%;
}
.cx-sb-gruppe[aria-expanded="true"]::before { transform: rotate(90deg); }
.cx-sb-gruppe i {
  font-style: normal; margin-left: auto; letter-spacing: 0; font-size: 11px;
  color: var(--cx-steel); background: var(--cx-graphite); border: 1px solid var(--cx-border);
  border-radius: 99px; padding: 1px 8px; flex: none;
}
/* Zugeklappt, obwohl der Filter hier Treffer hat: Die Zahl wird blau, damit
   niemand an einer Fundstelle vorbeiliest, nur weil sie zu ist. */
.cx-sb-gruppe.leer i { color: var(--cx-blue-light); border-color: var(--cx-blue); }
.cx-sb-eintrag {
  text-align: left; width: 100%; border: 1px solid var(--cx-border);
  background: var(--cx-graphite); color: var(--cx-text-muted);
  border-radius: var(--cx-radius-sm); padding: 11px 14px; cursor: pointer; font: inherit;
}
.cx-sb-eintrag b { display: block; font-size: 14px; color: var(--cx-text); line-height: 1.35; }
.cx-sb-eintrag span { font-size: 11.5px; color: var(--cx-steel); }
.cx-sb-eintrag:hover { border-color: var(--cx-blue); }
.cx-sb-eintrag.an { border-color: var(--cx-blue); background: rgba(30,123,232,.12); }
.cx-sb-eintrag.an b { color: var(--cx-blue-light); }
.cx-sb-eintrag.weg, .cx-sb-gruppe.weg { display: none; }
.cx-sb-mehr { cursor: default; border-style: dashed; }
.cx-sb-mehr:hover { border-color: var(--cx-border); }

.cx-sb-kachel {
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius);
  background: var(--cx-graphite); padding: 22px 26px; min-width: 0;
}
.cx-sb-kkopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cx-sb-kkopf h3 { font-family: var(--cx-font-display); font-size: 21px; margin: 0; }
.cx-sb-ktags { font-size: 12.5px; color: var(--cx-accent); font-weight: 600; }
.cx-sb-kzahl { margin-left: auto; font-size: 12px; color: var(--cx-steel); white-space: nowrap; }
.cx-sb-kbereich { font-size: 12.5px; color: var(--cx-steel); margin: 6px 0 4px; }
.cx-sb-kbereich a { margin-left: 10px; font-size: 12.5px; }

/* Reiter statt Untereinander: Ein angereichertes Produkt bringt Beschreibung,
   Nutzen, Merkmale, Grenzen, Betriebstabelle und Alternativen mit. Am Stück
   wäre die Kachel dreimal so hoch wie die Namensliste daneben – und der
   Vergleich zweier Produkte hieße wieder Scrollen statt Klicken. */
.cx-sb-reiter {
  display: flex; gap: 3px; border-bottom: 1px solid var(--cx-border);
  margin: 12px 0 4px; flex-wrap: wrap;
}
.cx-sb-reiter button {
  border: 0; background: transparent; color: var(--cx-steel); cursor: pointer;
  font: 600 13px var(--cx-font-body); padding: 8px 13px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.cx-sb-reiter button i { font-style: normal; opacity: .7; font-size: 11.5px; }
.cx-sb-reiter button:hover { color: var(--cx-text); }
.cx-sb-reiter button[aria-selected="true"] { color: var(--cx-text); border-bottom-color: var(--cx-blue); }
.cx-sb-teil { display: none; padding-top: 10px; }
.cx-sb-teil.an { display: block; }
.cx-sb-teil p { margin: 0 0 10px; font-size: 14.5px; color: var(--cx-text-muted); line-height: 1.65; }
.cx-sb-teil p:last-child { margin-bottom: 0; }
.cx-sb-kachel h4 {
  font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--cx-steel); margin: 16px 0 6px; font-weight: 700;
}
.cx-sb-einordnung { display: flex; gap: 7px; flex-wrap: wrap; }
.cx-sb-einordnung span {
  font-size: 12px; border: 1px solid var(--cx-border); border-radius: 99px;
  padding: 4px 11px; color: var(--cx-text-muted); background: var(--cx-carbon);
}
.cx-sb-punkte { margin: 0; padding-left: 20px; font-size: 14px; color: var(--cx-text-muted); }
.cx-sb-punkte li { margin: 5px 0; line-height: 1.6; }
.cx-sb-punkte li::marker { color: var(--cx-accent); }
.cx-sb-punkte.grenzen li::marker { color: var(--cx-warn); }
.cx-sb-betrieb { margin-top: 4px; }
.cx-sb-betrieb td:first-child { width: 34%; color: var(--cx-steel); }
.cx-sb-alt { display: flex; gap: 8px; flex-wrap: wrap; }
.cx-sb-alt a {
  font-size: 12.5px; border: 1px solid var(--cx-border); border-radius: 99px;
  padding: 5px 12px; color: var(--cx-text-muted); font-weight: 400; background: var(--cx-carbon);
}
.cx-sb-alt a:hover { border-color: var(--cx-blue); color: var(--cx-text); }
.cx-sb-alt a b { color: var(--cx-text); font-weight: 600; }
.cx-sb-althinweis { margin: 10px 0 0; font-size: 12.5px; color: var(--cx-steel); }

/* --- Paare zu je 50 % ---------------------------------------------------- */
.cx-sb-paare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; }
.cx-sb-pk {
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius);
  background: var(--cx-graphite); padding: 18px 20px;
}
.cx-sb-pk h2 { font-size: 19px; margin: 0 0 10px; }
.cx-sb-pk p { margin: 0; font-size: 14.5px; color: var(--cx-text-muted); line-height: 1.65; }

/* --- Wettbewerb über die volle Breite ------------------------------------
   Vorher eine Tabelle mit zwei Spalten. Die Logos sind der schnellere
   Zugriff: Im Kundengespräch fällt der Name des Mitbewerbers, und das Auge
   findet die Marke vor dem Wort. */
.cx-sb-mbliste { display: grid; gap: 9px; }
.cx-sb-mbk {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius-sm);
  background: var(--cx-graphite); padding: 12px 14px;
}
.cx-sb-mblogo {
  width: 84px; height: 40px; padding: 5px 8px; flex: none; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.cx-sb-mblogo img { max-height: 30px; max-width: 100%; }
.cx-sb-mblogo.fremd {
  background: var(--cx-carbon); border: 1px dashed var(--cx-border);
  color: var(--cx-steel); font: 700 13px var(--cx-font-display);
}
.cx-sb-mbtext { flex: 1 1 auto; min-width: 0; }
.cx-sb-mbtext b { font-size: 14.5px; }
.cx-sb-mbtext p { margin: 3px 0 0; font-size: 13px; color: var(--cx-text-muted); line-height: 1.55; }
.cx-sb-mbvgl {
  margin-left: auto; flex: none; border: 1px solid var(--cx-border);
  background: transparent; color: var(--cx-blue-light); cursor: pointer;
  font: 600 12.5px var(--cx-font-body); padding: 7px 13px; border-radius: 99px;
}
.cx-sb-mbvgl:hover { border-color: var(--cx-blue); background: rgba(30,123,232,.12); }
.cx-sb-mbohne { margin-left: auto; flex: none; font-size: 12px; color: var(--cx-steel); }

/* Der interne Bereich schließt die Bahn ab und trägt deshalb die volle
   Breite – bis 1.51 stand er als Karte mitten im Fluss. */
.cx-sb-prod + .cx-gesperrt, .cx-sb-paare + .cx-intern-hinweis { margin-top: 30px; }

html[data-theme="light"] .cx-sb-pitchmarke { color: var(--cx-blue-deep); }
/* Im Hellmodus reicht ein Umfärben der Jahreszahl NICHT: Die allgemeine
   Regel hat dieselbe Spezifität wie .aktiv/.passiv und steht später – damit
   bekamen beide Richtungen dieselbe Farbe, und „wurde übernommen“ sah aus
   wie „hat übernommen“. Deshalb hier alle drei Fälle einzeln. */
html[data-theme="light"] .cx-sb-zs b { color: #0F766E; }
html[data-theme="light"] .cx-sb-zs.aktiv b { color: var(--cx-blue-deep); }
html[data-theme="light"] .cx-sb-zs.passiv b { color: var(--cx-warn); }
html[data-theme="light"] .cx-sb-punkte li::marker { color: #0F766E; }
html[data-theme="light"] .cx-sb-ktags { color: #0F766E; }
html[data-theme="light"] .cx-sb-mblogo { border: 1px solid var(--cx-border); }

@media (max-width: 980px) {
  .cx-sb-teilung, .cx-sb-paare { grid-template-columns: 1fr; }
  .cx-sb-liste { position: static; max-height: none; }
  .cx-sb-kachel { padding: 18px 18px; }
}
@media (max-width: 680px) {
  .cx-sb-pitch p { font-size: 16.5px; }
  .cx-sb-mbk { flex-wrap: wrap; }
  .cx-sb-mbvgl, .cx-sb-mbohne { margin-left: 98px; }
}

/* ==== 1.54.0 · Werkzeugleiste: ein Wert je Menü ==========================
   Der Knopf trägt jetzt die Auswahl, nicht mehr nur die Zahl der gewählten
   Filter: links die Beschriftung („Bereich"), rechts der Wert („Alle
   Bereiche" oder der gewählte). Lange Bereichsnamen wie „Schwachstellen- &
   Exposure-Management" würden die Leiste sonst auseinanderziehen – deshalb
   die Kürzung mit Auslassungspunkten statt Umbruch. */
.cx-wz-was { color: var(--cx-steel); font-weight: 600; }
.cx-wz-knopf.hat .cx-wz-was { color: var(--cx-text-muted); }
.cx-wz-wert {
  color: var(--cx-text); font-weight: 700; max-width: 21ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cx-wz-knopf.hat .cx-wz-wert { color: var(--cx-blue-light); }
html[data-theme="light"] .cx-wz-knopf.hat .cx-wz-wert { color: var(--cx-blue-deep); }
/* Der erste Eintrag im Menü ist „Alle" und trennt sich sichtbar vom Rest –
   er hebt die Auswahl auf, statt eine weitere zu treffen. */
.cx-wz-menue-liste > .cx-chip:first-child {
  border-style: dashed; margin-right: 6px;
}
@media (max-width: 680px) { .cx-wz-wert { max-width: 12ch; } }

/* Entweder-oder: Solange der eine Filter gesetzt ist, ruht der andere. Nicht
   gesperrt – ein Klick dort übernimmt und setzt diesen hier zurück –, aber
   sichtbar zurückgenommen, damit niemand eine Kombination erwartet. */
.cx-wz-knopf.ruht { opacity: .55; }
.cx-wz-knopf.ruht:hover { opacity: 1; }

/* ===================== Produktbereich: Marktplan und Werkbank =============
   Die Seite trug bis 1.64 alle Hersteller eines Bereichs alphabetisch
   untereinander – bei IT-Management & Monitoring 68 Karten auf 71.543 px.
   Jetzt zwei Ansichten über derselben Menge: der MARKTPLAN gliedert nach
   Funktionsklassen, die WERKBANK bleibt bei den Herstellern, verdichtet sie
   aber zu filterbaren Zeilen. Beide benutzen die vorhandene Werkzeugleiste
   (.cx-wz) der Herstellerseite – gleiche Bauteile, keine zweite Formsprache. */

:root {
  /* Fünf Bandfarben für die Themengruppen. Sie kommen aus der bestehenden
     Palette (Blau, Petrol, Bernstein) und ergänzen zwei Töne, die sich davon
     hinreichend unterscheiden. Nachgerechnet auf Karten- UND Seitenfläche:
     der schwächste Wert ist Violett mit 5,57:1, alle über der Norm von 4,5:1.
     Nachgerechnet und nicht angesehen, weil ein Farbwert hell und dunkel nie
     beide bedient – deshalb stehen unten eigene Werte für den Hellmodus. */
  --cx-band0: #3FA9FF;
  --cx-band1: #35E0DA;
  --cx-band2: #8B7BF0;
  --cx-band3: #E5A83B;
  --cx-band4: #5FD08A;
}
html[data-theme="light"] {
  /* Dieselben Familien, abgedunkelt: Auf Weiß erreicht #3FA9FF nur 2,5:1,
     #35E0DA sogar 1,6:1. Der schwächste Wert hier ist Grün mit 4,63:1. */
  --cx-band0: #0D50D8;
  --cx-band1: #0F766E;
  --cx-band2: #5B3FC4;
  --cx-band3: #8A5A00;
  --cx-band4: #2E7D4F;
}

/* Die Leiste steht auf diesen Seiten über einer Liste, nicht über einem Raster –
   sie darf umbrechen, statt die Felder zusammenzuquetschen. Die Schwerpunkt-
   seite (.cx-sp-wz) benutzt dieselbe Leiste; getrennte Klassen gibt es nur,
   damit ein Klick daneben das richtige Menü schließt. */
.cx-br-wz, .cx-sp-wz { flex-wrap: wrap; }
.cx-br-wz .cx-wz-such, .cx-sp-wz .cx-wz-such { min-width: 260px; }
/* Auf der Herstellerseite steht der Ansichtsumschalter am Ende der Leiste und
   wird mit margin-left:auto dorthin geschoben. Hier ist er das erste Element
   und bestimmt, was die Seite überhaupt zeigt – bliebe das auto stehen, würde
   er die ganze Leiste an den rechten Rand drücken. */
.cx-br-wz .cx-wz-um, .cx-sp-wz .cx-wz-um { margin-left: 0; }
.cx-br-wz .cx-wz-alles:first-of-type,
.cx-sp-wz .cx-wz-alles:first-of-type { margin-left: auto; }

/* --- Themenbänder --- */
.cx-fk-plan { margin-top: 4px; }
.cx-fk-gruppe {
  margin-bottom: 16px; border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius); background: var(--cx-graphite); overflow: hidden;
}
.cx-fk-g0 { --bf: var(--cx-band0); }
.cx-fk-g1 { --bf: var(--cx-band1); }
.cx-fk-g2 { --bf: var(--cx-band2); }
.cx-fk-g3 { --bf: var(--cx-band3); }
.cx-fk-g4 { --bf: var(--cx-band4); }
.cx-fk-gruppenkopf {
  margin: 0; padding: 14px 20px; font-size: 17px; font-weight: 700;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--cx-border);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--bf) 13%, transparent), transparent 58%);
}
.cx-fk-punkt { width: 9px; height: 9px; border-radius: 99px; background: var(--bf); flex: none; }
.cx-fk-gruppenkopf em {
  font-style: normal; font-weight: 400; font-size: 13.5px; color: var(--cx-steel);
}
.cx-fk-zahl { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--cx-steel); }

/* --- Eine Funktionszeile --- */
.cx-fk-zeile { border-bottom: 1px solid var(--cx-border); }
.cx-fk-zeile:last-child { border-bottom: 0; }
.cx-fk-kopf {
  width: 100%; display: grid;
  grid-template-columns: minmax(210px, 1.3fr) 112px minmax(140px, 1fr) 22px;
  gap: 16px; align-items: center; padding: 10px 20px;
  background: transparent; border: 0; color: inherit; text-align: left;
  font: inherit; cursor: pointer;
}
.cx-fk-kopf:hover { background: rgba(30, 123, 232, .06); }
.cx-fk-kopf:focus-visible { outline: 2px solid var(--cx-blue); outline-offset: -2px; }
/* min-width:0 ist im Raster Pflicht: Eine Grid-Spalte schrumpft sonst nie unter
   ihr längstes unteilbares Wort. Bei 375 px schob „Beobachtbarkeitsplattform“
   (188 px) die Zeile 19 px über den Rand und schnitt den Aufklapp-Pfeil ab –
   sichtbar erst auf dem Handy, weil die Seite selbst nicht mitwandert. */
.cx-fk-name {
  font-weight: 600; font-size: 14.5px; min-width: 0;
  /* hyphens vor overflow-wrap: Das Dokument ist lang="de", also trennt der
     Browser „Anwendungs-überwachung“ an der richtigen Stelle. anywhere greift
     nur da, wo auch das nicht reicht – sonst stünde „Anwendungsüberwac|hung“. */
  hyphens: auto; overflow-wrap: anywhere;
}
.cx-fk-name small {
  display: block; font-weight: 400; font-size: 12.5px; color: var(--cx-steel);
}
.cx-fk-balken { display: flex; align-items: center; gap: 8px; }
.cx-fk-schiene {
  flex: 1; height: 7px; border-radius: 99px;
  background: rgba(139, 146, 155, .18); overflow: hidden;
}
/* display:block ist Pflicht: Ein inline-span nimmt keine Prozentbreite an –
   der Balken bliebe unsichtbar, obwohl die Breite im Markup steht. */
.cx-fk-fuell { display: block; height: 100%; border-radius: 99px; background: var(--bf); }
.cx-fk-balken i {
  font-style: normal; font-size: 12.5px; color: var(--cx-steel);
  min-width: 20px; text-align: right;
}
.cx-fk-logos { display: flex; gap: 4px; align-items: center; overflow: hidden; }
/* min-height zurücksetzen: .cx-logoplate bringt 84px mit, gedacht für die
   große Kachel auf der Herstellerseite. */
.cx-fk-logo {
  width: 34px; height: 24px; min-height: 0; padding: 2px; border-radius: 6px; flex: none;
}
.cx-fk-logo img { max-height: 18px; }
.cx-fk-mehr { font-size: 12px; color: var(--cx-steel); font-weight: 600; white-space: nowrap; }
/* Namenschip statt Plättchen, wo der Server kein Logo mitliefert (Gastansicht). */
.cx-fk-nam {
  font-size: 11px; max-width: 96px; overflow: hidden; text-overflow: ellipsis; flex: none;
}
.cx-fk-pfeil { color: var(--cx-steel); font-size: 13px; transition: transform .18s ease; }
.cx-fk-zeile[data-offen="1"] .cx-fk-pfeil,
.cx-hl-zeile[data-offen="1"] .cx-fk-pfeil { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .cx-fk-pfeil { transition: none; } }

/* --- Aufgeklappte Funktionszeile --- */
.cx-fk-inhalt { padding: 2px 20px 18px; }
.cx-fk-hinweis {
  margin: 0 0 12px; padding: 10px 14px; font-size: 13.5px; color: var(--cx-text-muted);
  border-left: 3px solid var(--cx-warn); background: rgba(229, 168, 59, .08);
  border-radius: 0 var(--cx-radius-sm) var(--cx-radius-sm) 0;
}
.cx-fk-karten {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.cx-fk-karte {
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius-sm);
  padding: 12px 14px; background: var(--cx-carbon);
  display: flex; gap: 12px; align-items: flex-start;
}
.cx-fk-karte .cx-logoplate {
  width: 56px; height: 38px; padding: 4px; flex: none; border-radius: 8px;
}
.cx-fk-karte .cx-logoplate img { max-height: 28px; }
.cx-fk-karte h3 { margin: 0 0 2px; font-size: 14.5px; font-weight: 700; }
.cx-fk-karte h3 a { color: inherit; }
.cx-fk-karte h3 a:hover { color: var(--cx-blue-light); }
html[data-theme="light"] .cx-fk-karte h3 a:hover { color: var(--cx-blue-deep); }
.cx-fk-meta { margin: 0; font-size: 12px; color: var(--cx-steel); }
.cx-fk-produkte { margin: 6px 0 0; font-size: 13px; color: var(--cx-text-muted); }
.cx-fk-gesperrt { color: var(--cx-steel); font-style: italic; }
.cx-fk-fuss { margin: 14px 0 0; font-size: 13px; color: var(--cx-steel); }

/* --- Werkbank: Herstellerzeilen --- */
.cx-hl {
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius);
  background: var(--cx-graphite); overflow: hidden; margin-top: 4px;
}
.cx-hl-zeile { border-bottom: 1px solid var(--cx-border); }
.cx-hl-zeile:last-child { border-bottom: 0; }
.cx-hl-kopf {
  width: 100%; display: grid;
  grid-template-columns: 60px minmax(150px, 1.05fr) minmax(170px, 1.4fr) 92px 92px 22px;
  gap: 14px; align-items: center; padding: 9px 16px;
  background: transparent; border: 0; color: inherit; text-align: left;
  font: inherit; cursor: pointer;
}
.cx-hl-kopf:hover { background: rgba(30, 123, 232, .06); }
.cx-hl-kopf:focus-visible { outline: 2px solid var(--cx-blue); outline-offset: -2px; }
.cx-hl-logo {
  width: 60px; height: 38px; min-height: 0; padding: 3px; flex: none; border-radius: 7px;
}
.cx-hl-logo img { max-height: 28px; }
/* Ohne Logo steht hier der Kurzname – .cx-logo-ersatz bringt 17px mit, die in
   ein 60-px-Plättchen nicht passen und den Namen in Fetzen umbrechen würden. */
.cx-hl-logo .cx-logo-ersatz {
  font-size: 10px; font-weight: 700; color: #14171C; line-height: 1.15;
  padding: 0 2px; text-align: center; overflow: hidden;
}
.cx-hl-name { font-weight: 700; font-size: 14.5px; min-width: 0; overflow-wrap: anywhere; }
/* Der Sitz wird schon in app.js gekürzt; hier steht die zweite Sicherung für
   den Fall, dass auch die Kurzform noch zu breit ist. */
.cx-hl-name small {
  display: block; font-weight: 400; font-size: 12px; color: var(--cx-steel);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cx-hl-klassen { display: flex; gap: 5px; flex-wrap: wrap; }
.cx-tag-leise { opacity: .62; }
.cx-hl-zahl { font-size: 13px; color: var(--cx-text-muted); text-align: right; }
.cx-hl-zahl b { color: var(--cx-text); font-size: 15px; font-family: var(--cx-font-display); }
.cx-hl-anteil { display: flex; align-items: center; gap: 7px; }
.cx-hl-schiene {
  flex: 1; height: 6px; border-radius: 99px;
  background: rgba(139, 146, 155, .18); overflow: hidden;
}
.cx-hl-fuell { display: block; height: 100%; border-radius: 99px; background: var(--cx-blue); }
html[data-theme="light"] .cx-hl-fuell { background: var(--cx-blue-deep); }
.cx-hl-anteil i { font-style: normal; font-size: 11.5px; color: var(--cx-steel); }
.cx-hl-inhalt { padding: 2px 16px 16px 90px; }
.cx-hl-inhalt .cx-pos { margin: 0 0 10px; max-width: 96ch; }
.cx-hl-fuss {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px;
}

/* --- Schmale Fenster --- */
@media (max-width: 1080px) {
  .cx-fk-kopf { grid-template-columns: 1fr 100px 22px; }
  .cx-fk-logos { display: none; }
  .cx-hl-kopf { grid-template-columns: 60px minmax(120px, 1fr) 84px 22px; }
  .cx-hl-klassen, .cx-hl-anteil { display: none; }
}
@media (max-width: 720px) {
  .cx-fk-gruppenkopf { font-size: 15.5px; padding: 12px 14px; }
  .cx-fk-zahl { margin-left: 0; flex-basis: 100%; }
  .cx-fk-kopf { padding: 10px 14px; gap: 10px; }
  .cx-fk-inhalt { padding: 2px 14px 16px; }
  .cx-fk-karten { grid-template-columns: 1fr; }
  /* minmax(0,1fr) statt minmax(120px,1fr): Die 120 px Mindestbreite ergaben mit
     Logo, Zahl, Pfeil, drei Abständen und dem Innenrand zusammen 328 px – drei
     mehr, als ein 375-px-Gerät hergibt. Der Pfeil rechts wurde angeschnitten. */
  .cx-hl-kopf { padding: 9px 12px; gap: 10px;
                grid-template-columns: 60px minmax(0, 1fr) 84px 22px; }
  .cx-hl-inhalt { padding: 2px 12px 14px; }
  .cx-br-wz .cx-wz-such, .cx-sp-wz .cx-wz-such { min-width: 0; width: 100%; }
}

/* ===================== Schwerpunkt: Marktplan und Werkbank ================
   Dieselben Bauteile wie beim Produktbereich (.cx-fk-* für den Marktplan,
   .cx-hl-* für die Werkbank, .cx-wz-* für die Leiste) – die Schwerpunktseite
   ordnet nur nach einer anderen Achse: Ihre Bänder sind die Produktbereiche.
   Hier steht deshalb nur, was daraus folgt. */

/* Das Bereichszeichen im Bandkopf. Es nimmt die Bandfarbe an, statt beim
   blauen Grundton zu bleiben: Sonst stünde ein blaues Plättchen in einem
   grünen Band, und die Farbe hörte auf, etwas zu bedeuten. Die Regel steht
   nach .cx-light .cx-bereich-zeichen und schlägt sie bei gleicher
   Spezifität – im Hellmodus nachgesehen, nicht angenommen. */
.cx-fk-gruppenkopf .cx-bereich-zeichen {
  width: 28px; height: 28px; border-radius: 8px;
  background: color-mix(in srgb, var(--bf) 15%, transparent);
  border-color: color-mix(in srgb, var(--bf) 34%, transparent);
  color: var(--bf);
}
.cx-fk-gruppenkopf .cx-bereich-zeichen svg { width: 16px; height: 16px; }
.cx-sp-band { display: flex; align-items: center; gap: 10px; }

/* Der Querverweis in den Bereich. Die beiden Einstiege – Bereich und
   Schwerpunkt – waren einander bisher fremd; wer über „Microsoft 365“ in
   E-Mail Security landet, will von dort oft weiter in den ganzen Bereich. */
.cx-sp-bandlink {
  font-size: 12.5px; font-weight: 500; color: var(--cx-steel);
  border: 1px solid var(--cx-border); border-radius: 99px;
  padding: 3px 10px; white-space: nowrap;
}
.cx-sp-bandlink:hover { color: var(--cx-text); border-color: var(--cx-blue); }
html[data-theme="light"] .cx-sp-bandlink { color: var(--cx-steel); }
html[data-theme="light"] .cx-sp-bandlink:hover {
  color: var(--cx-blue-deep); border-color: var(--cx-blue-deep);
}

/* Wo ein Schwerpunkt einem Bereich zum Verwechseln nahekommt, stand die Notiz
   bisher nur auf der Übersichtskachel – gerade auf der Detailseite fehlte sie,
   wo die Trefferzahlen auseinandergehen. */
.cx-sp-hinweis {
  margin: 12px 0 0; max-width: 92ch; font-size: 13.5px; line-height: 1.55;
  color: var(--cx-text-muted);
  border-left: 3px solid var(--cx-blue); padding: 6px 0 6px 14px;
}
html[data-theme="light"] .cx-sp-hinweis { border-left-color: var(--cx-blue-deep); }

@media (max-width: 720px) {
  /* In der Enge zählt der Bereichsname, nicht der Weg dorthin – den gibt es
     eine Zeile weiter unten an jeder Herstellerkarte ohnehin. */
  .cx-sp-bandlink { display: none; }
  .cx-fk-gruppenkopf .cx-bereich-zeichen { width: 24px; height: 24px; border-radius: 7px; }
  .cx-fk-gruppenkopf .cx-bereich-zeichen svg { width: 14px; height: 14px; }
}

/* Ansprechpartner: ein Block je Organisation. Eine durchgehende Tabelle mit
   einer Spalte „Haus“ hatte zwei Nachteile – dieselbe Zeile stand zehnmal
   untereinander, und wer beim HERSTELLER sitzt, ging zwischen den Leuten des
   Distributors unter. Der Name des Hauses steht jetzt einmal über seinem Block
   statt in jeder Zeile. */
/* Luft zwischen den Blöcken – das war der Punkt: Zu eng gesetzt lesen sich
   zwei Organisationen wie eine Belegschaft. */
.cx-bq-kgruppe { margin-top: 26px; }
.cx-bq-kgruppe:first-of-type { margin-top: 10px; }
.cx-bq-kgruppe h4 {
  margin: 0 0 8px; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; gap: 9px;
  padding-left: 11px; border-left: 3px solid var(--cx-blue);
}
.cx-bq-kgruppe h4 span {
  font-weight: 500; font-size: 12px; color: var(--cx-steel);
  border: 1px solid var(--cx-border); border-radius: 99px; padding: 1px 8px;
}
/* Der Hersteller bekommt eine andere Kante als die Häuser: Er ist keines.
   --cx-accent ist die Farbe des internen Bereichs und in beiden Modi schon
   nachgerechnet – Cyan im Dunkeln, Petrol im Hellen. */
.cx-bq-kgruppe-h h4 { border-left-color: var(--cx-accent); }
.cx-bq-ktabelle { margin-top: 0; }
.cx-bq-ktabelle td .cx-bq-haus { display: block; }

/* Auf dem Telefon stapeln statt spalten. Drei Spalten mit Name, Rolle und
   Mailadresse brauchen 556 px – ein 375-px-Gerät ließ sich dadurch seitlich
   schieben. Das galt schon für die Kontakttabelle der Distributorsicht, lange
   vor den Gruppen; deshalb greift die Regel für beide. */
@media (max-width: 720px) {
  .cx-bq-blatt table thead { display: none; }
  .cx-bq-blatt table,
  .cx-bq-blatt table tbody,
  .cx-bq-blatt table tr,
  .cx-bq-blatt table td { display: block; width: auto; }
  .cx-bq-blatt table tr {
    padding: 11px 0; border-bottom: 1px solid var(--cx-border);
  }
  .cx-bq-blatt table tr:last-child { border-bottom: 0; }
  .cx-bq-blatt table td { padding: 0; border: 0; }
  .cx-bq-blatt table td:empty { display: none; }
  /* Die zweite Spalte ist die Rolle beziehungsweise das Haus – als eigene
     Zeile darunter, leiser gesetzt als der Name darüber. */
  .cx-bq-blatt table td:nth-child(2) {
    color: var(--cx-steel); font-size: 13px; margin-top: 1px;
  }
  .cx-bq-blatt table td:nth-child(3) { margin-top: 3px; }
}

/* ======================================================================
   Firmenzugang (1.90.0): Beratung, Merkliste/Watchlist, Schnellcheck,
   Neuigkeiten, Anfragen, Einladungen, Anforderungskatalog.
   ====================================================================== */

/* --- Beratung & Bezug (Herstellerseite, Rolle Firma) --- */
.cx-sb-beratung {
  margin: 26px 0; padding: 20px 22px;
  background: color-mix(in srgb, var(--cx-blue) 7%, var(--cx-carbon));
  border: 1px solid var(--cx-border); border-left: 3px solid var(--cx-blue);
  border-radius: var(--cx-radius);
}
.cx-beratung-kopf h2 { margin: 0 0 6px; }
.cx-beratung-kopf p { margin: 0 0 14px; color: var(--cx-text-muted); }
.cx-beratung-mail { color: var(--cx-steel); font-size: 13px; }
.cx-beratung-form textarea {
  width: 100%; resize: vertical; padding: 10px 12px;
  background: var(--cx-graphite); color: var(--cx-text);
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius-sm);
  font: inherit;
}
.cx-beratung-fuss {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 10px; flex-wrap: wrap;
}
.cx-beratung-bezug { color: var(--cx-steel); font-size: 13px; }
.cx-beratung-meldung { margin: 10px 0 0; color: var(--cx-blue-light); }
.cx-beratung-meldung.fehler { color: var(--cx-warn); }

/* --- Merken- und Beobachten-Knöpfe --- */
.cx-merk, .cx-watch {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; cursor: pointer; font: inherit; font-size: 13px;
  background: var(--cx-carbon); color: var(--cx-text-muted);
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius-sm);
}
.cx-merk:hover, .cx-watch:hover { color: var(--cx-text); border-color: var(--cx-steel); }
.cx-merk.an, .cx-watch.an {
  color: var(--cx-blue-light); border-color: var(--cx-blue);
  background: color-mix(in srgb, var(--cx-blue) 12%, var(--cx-carbon));
}

/* --- Sicherheits-Schnellcheck --- */
.cx-check-schritt { margin: 26px 0; }
.cx-check-schritt h2 { margin-bottom: 12px; }
.cx-check-groessen { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.cx-check-groesse {
  padding: 14px 16px; text-align: left; cursor: pointer; font: inherit;
  background: var(--cx-carbon); color: var(--cx-text);
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius);
  display: grid; gap: 3px;
}
.cx-check-groesse span { color: var(--cx-text-muted); font-size: 13px; }
.cx-check-groesse.active { border-color: var(--cx-blue); background: color-mix(in srgb, var(--cx-blue) 12%, var(--cx-carbon)); }
.cx-check-urteil {
  margin: 26px 0; padding: 20px 22px; border-radius: var(--cx-radius);
  border: 1px solid var(--cx-border); border-left: 4px solid var(--cx-warn);
  background: color-mix(in srgb, var(--cx-warn) 8%, var(--cx-carbon));
}
.cx-check-urteil.frei { border-left-color: var(--cx-blue); background: color-mix(in srgb, var(--cx-blue) 7%, var(--cx-carbon)); }
.cx-check-urteil h2 { margin: 0 0 8px; }
.cx-check-urteil p { margin: 0; color: var(--cx-text-muted); }
.cx-check-haken { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.cx-check-hk {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 10px; padding: 12px 14px; cursor: pointer;
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-sm); align-items: start;
}
.cx-check-hk input { grid-row: span 2; margin-top: 3px; accent-color: var(--cx-blue); }
.cx-check-hk b { font-size: 14px; }
.cx-check-hk span { color: var(--cx-text-muted); font-size: 13px; grid-column: 2; }
.cx-check-hk.an { border-color: var(--cx-blue); }
.cx-check-ampeln { margin: 30px 0; }
.cx-check-ampelliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-top: 12px; }
.cx-check-ampel {
  padding: 14px 16px; display: grid; gap: 4px;
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius); border-left-width: 4px;
}
.cx-check-ampel.gruen { border-left-color: #3fa96b; }
.cx-check-ampel.gelb  { border-left-color: var(--cx-warn); }
.cx-check-ampel.rot   { border-left-color: #d05252; }
.cx-check-ampel span { color: var(--cx-text-muted); font-size: 13px; }
.cx-check-ampel a { font-size: 13px; }
.cx-check-fazit { margin-top: 16px; color: var(--cx-text-muted); }
.cx-check-hinweis p { color: var(--cx-text-muted); }

/* --- Was ist neu im Markt --- */
.cx-neu-liste { display: grid; gap: 14px; margin: 26px 0; }
.cx-neu {
  display: grid; grid-template-columns: 110px 1fr; gap: 16px;
  padding: 18px 20px; background: var(--cx-carbon);
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius);
}
.cx-neu-datum { color: var(--cx-steel); font-size: 13px; padding-top: 3px; }
.cx-neu-text h2 { margin: 0 0 6px; font-size: 17px; }
.cx-neu-text p { margin: 0; color: var(--cx-text-muted); }
.cx-neu-links { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.cx-neu-links a {
  font-size: 12.5px; padding: 3px 10px; border: 1px solid var(--cx-border);
  border-radius: 99px; color: var(--cx-blue-light);
}
@media (max-width: 620px) {
  .cx-neu { grid-template-columns: 1fr; gap: 4px; }
}

/* ---- Marktlage: Themenfilter, Bereichsverweise, Quelle (1.94.0) ---------
   Die Seite zeigte alle Einträge flach untereinander. Bei dreizehn ging das;
   ab wöchentlichem Zuwachs nicht mehr. Der Filter steht deshalb ÜBER der
   Liste und trägt je Chip die Trefferzahl – so sieht man vor dem Klick, ob
   sich einer lohnt, und nach dem Klick, wie viel man ausgeblendet hat. */
.cx-neu-filter {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 18px;
}
.cx-neu-chip {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 7px 14px; border-radius: 99px; cursor: pointer;
  font: inherit; font-size: 13.5px;
  color: var(--cx-text-muted); background: var(--cx-carbon);
  border: 1px solid var(--cx-border);
}
.cx-neu-chip span {
  font-size: 12px; font-variant-numeric: tabular-nums; color: var(--cx-steel);
}
.cx-neu-chip:hover { color: var(--cx-text); border-color: var(--cx-steel); }
.cx-neu-chip.aktiv {
  color: var(--cx-text); border-color: var(--cx-band0); font-weight: 600;
  background: rgba(63,169,255,.10);
}
.cx-neu-chip.aktiv span { color: var(--cx-band0); }
html[data-theme="light"] .cx-neu-chip.aktiv { background: rgba(13,80,216,.07); }

/* Hersteller und Bereiche stehen in EINER Fußzeile, aber sichtbar getrennt:
   Die Herstellerverweise führen auf einen Steckbrief, die Bereichs-Chips in
   den Katalog. Wer sie gleich gestaltet, klickt den falschen. */
.cx-neu-fuss {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px;
}
.cx-neu-bereiche { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-neu-quelle {
  margin: 10px 0 0 !important; padding-top: 9px;
  border-top: 1px solid var(--cx-border);
  font-size: 12.5px; line-height: 1.5; color: var(--cx-steel) !important;
  overflow-wrap: anywhere;
}

@media (max-width: 620px) {
  .cx-neu-chip { font-size: 13px; padding: 6px 12px; }
}

/* --- Merkliste --- */
.cx-hero-aktionen { margin-top: 16px; }
.cx-merk-liste { display: grid; gap: 10px; margin: 20px 0; }
.cx-merk-zeile {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px;
  align-items: center; padding: 12px 16px;
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius);
}
.cx-merk-logo { width: 52px; height: 52px; }
.cx-merk-text { display: grid; gap: 2px; min-width: 0; }
.cx-merk-text span { color: var(--cx-text-muted); font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Anfragen und Einladungen --- */
.cx-anf-liste { display: grid; gap: 12px; margin: 20px 0; }
.cx-anf {
  padding: 16px 18px; background: var(--cx-carbon);
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius);
  border-left: 3px solid var(--cx-blue);
}
.cx-anf.erledigt { border-left-color: var(--cx-border); opacity: .75; }
.cx-anf-kopf { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.cx-anf-kopf span { color: var(--cx-steel); font-size: 13px; }
.cx-anf-status {
  padding: 1px 9px; border-radius: 99px; font-size: 12px;
  border: 1px solid var(--cx-border);
}
.cx-anf-bezug { color: var(--cx-text-muted); font-size: 13.5px; margin-top: 4px; }
.cx-anf p { margin: 8px 0; white-space: pre-line; }
.cx-anf-fuss { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cx-einladen {
  margin: 26px 0; padding: 20px 22px; background: var(--cx-carbon);
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius);
}
.cx-einladen p { color: var(--cx-text-muted); margin: 6px 0 14px; }
.cx-einladen-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cx-einladen-form input[type="text"], .cx-einladen-form input[type="email"] {
  flex: 1 1 200px; padding: 9px 12px; font: inherit;
  background: var(--cx-graphite); color: var(--cx-text);
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius-sm);
}
.cx-einladen-haken { display: inline-flex; gap: 7px; align-items: center;
  color: var(--cx-text-muted); font-size: 13.5px; cursor: pointer; }
.cx-einladen-haken input { accent-color: var(--cx-blue); }
.cx-einladen-meldung { flex-basis: 100%; margin: 6px 0 0; color: var(--cx-blue-light); }
.cx-einladen-meldung.fehler { color: var(--cx-warn); }
.cx-einladen-link {
  display: block; margin-top: 6px; padding: 8px 10px; user-select: all;
  background: var(--cx-graphite); border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-sm); font-size: 13px; word-break: break-all;
}
.cx-einladen-liste { margin-top: 16px; display: grid; gap: 8px; }
.cx-einladen-zeile {
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  padding: 9px 12px; border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-sm); font-size: 14px;
}
.cx-einladen-zeile span { color: var(--cx-text-muted); font-size: 13px; }
.cx-einladen-zeile.eingeloest { opacity: .7; }
.cx-einladen-zeile .cx-btn { margin-left: auto; }

/* --- Einladung einlösen --- */
.cx-einladung-form-halter { max-width: 430px; margin: 10px 0 30px; }
.cx-einladung-form { display: grid; gap: 10px; }
.cx-einladung-form input {
  padding: 11px 13px; font: inherit;
  background: var(--cx-graphite); color: var(--cx-text);
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius-sm);
}
.cx-einladung-meldung { margin: 4px 0 0; }
.cx-einladung-meldung.fehler { color: var(--cx-warn); }

/* --- Anforderungskatalog (Vergleich + Druckblatt) --- */
.cx-vgl-katalog {
  display: flex; gap: 14px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; margin: 18px 0; padding: 14px 18px;
  background: var(--cx-carbon); border: 1px dashed var(--cx-border);
  border-radius: var(--cx-radius);
}
.cx-vgl-katalog p { margin: 0; color: var(--cx-text-muted); }
.cx-kat-kopfzeile, .cx-kat-zeile {
  display: grid; grid-template-columns: 64px 64px 1fr; gap: 8px;
  align-items: center; padding: 4px 0;
}
.cx-kat-zeile { border-bottom: 1px solid #d8dce2; }
.cx-kat-kasten {
  width: 14px; height: 14px; margin: 0 auto;
  border: 1.5px solid #6b7280; border-radius: 3px;
}
.cx-kat-kk { font-size: 10px; text-align: center; color: #6b7280;
  text-transform: uppercase; letter-spacing: .04em; }
.cx-kat-text { font-size: 12px; line-height: 1.35; }

/* --- Entscheidungsvorlage (Druckblatt) --- */
.cx-ev-block h3 { margin: 0 0 4px; font-size: 14px; }
.cx-ev-block h3 small { color: #6b7280; font-weight: 400; margin-left: 6px; }
.cx-ev-block p { margin: 3px 0; font-size: 11.5px; line-height: 1.4; }
.cx-ev-nutzen { color: #374151; }
.cx-ev-t { display: block; margin: 7px 0 2px; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .05em; color: #6b7280; }
.cx-ev-block ul { margin: 0 0 4px 16px; padding: 0; font-size: 11.5px; }
.cx-ev-block li { margin: 1px 0; }
.cx-ev-betrieb { border-collapse: collapse; margin-top: 5px; font-size: 11px; }
.cx-ev-betrieb th { text-align: left; padding: 1.5px 10px 1.5px 0;
  color: #6b7280; font-weight: 500; vertical-align: top; white-space: nowrap; }
.cx-ev-betrieb td { padding: 1.5px 0; }

/* --- Startseite und Zugang: Firmen-Bausteine --- */
.cx-start-firmen { border-top: 1px solid var(--cx-border); padding-top: 28px; }
.cx-zugang-firma-weiche { margin-top: 10px; }

/* Der Wettbewerbs-Abschnitt hat seit der Bereichs-Korrektur einen festen
   Container, dessen Inhalt beim Produktwechsel getauscht wird. Bietet der
   Bereich keine Gegner, bleibt er leer – dann darf er auch keinen Abstand
   und keine Trennlinie hinterlassen. */
.cx-sb-mb:empty { display: none; }

.cx-sb-mbrest { margin: 12px 0 0; color: var(--cx-text-muted); font-size: 13.5px; }

/* ============================================================
   Die zwei Türen auf der Startseite (1.90.2)
   ============================================================
   Seit es neben dem Partner- auch einen Unternehmenszugang gibt, standen
   beide Angebote untereinander, ohne dass irgendwo stand, welches für wen
   ist. Schlimmer noch: Die Übersichtstabelle kannte den zweiten Zugang gar
   nicht und beschrieb unter „Für Mitarbeitende registrierter Firmen“ Inhalte,
   die ein Firmen-Konto nie zu sehen bekommt.

   Die Farbe ist hier kein Schmuck, sondern die Klammer: Dieselbe Marke trägt
   die Türkarte oben, der zugehörige Abschnitt in der Mitte und die Spalte in
   der Tabelle unten. Blau für den Vertriebsweg (die Hausfarbe), Petrol für
   den Einkaufsweg – beide aus der vorhandenen Bandpalette, die für hell und
   dunkel getrennt nachgerechnet ist. Als Balken und Rahmen eingesetzt, nie
   als Textfarbe: So hängt die Lesbarkeit nicht am Farbwert. */

.cx-tuer-partner { --cx-tuer: var(--cx-blue); }
.cx-tuer-firma   { --cx-tuer: var(--cx-band1); }

/* Der Strich am Etikett verbindet Abschnitt und Türkarte. Nur an den beiden
   Startseiten-Abschnitten, damit kein anderes Etikett der Anwendung ihn
   ungewollt erbt. */
.cx-start-systemhaus > .cx-eyebrow::before,
.cx-start-firmen > .cx-eyebrow::before {
  content: ""; display: inline-block; width: 22px; height: 3px;
  border-radius: 2px; margin-right: 9px; vertical-align: middle;
  position: relative; top: -1px; background: var(--cx-tuer);
}

.cx-tueren-grid {
  display: grid; gap: var(--cx-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  align-items: stretch;
}
/* Die Karte ist eine Tür: oben die Marke, unten der Knopf. Flex mit
   margin-top:auto am Knopf hält die Knöpfe beider Karten auf einer Höhe,
   auch wenn die Aufzählungen ungleich lang werden. */
.cx-tuer {
  display: flex; flex-direction: column;
  border-top: 3px solid var(--cx-tuer);
}
.cx-tuer h3 { margin: 0 0 4px; font-size: 20px; line-height: 1.3; }
.cx-tuer-wer {
  margin: 0 0 16px; font-size: 13px; color: var(--cx-steel);
  text-transform: uppercase; letter-spacing: .05em; line-height: 1.5;
}
.cx-tuer ul { margin: 0 0 20px; padding-left: 18px; display: grid; gap: 9px; }
.cx-tuer li { font-size: 15px; line-height: 1.55; color: var(--cx-text-muted); }
.cx-tuer-knopf { margin-top: auto; align-self: flex-start; }
.cx-tueren-fuss {
  margin: 18px 0 0; font-size: 14.5px; line-height: 1.6;
  color: var(--cx-text-muted);
}

/* --- Die Tabelle mit vier Spalten ---------------------------------------
   Bei vier Karten reicht die Mindestbreite von 280 px der Dreier-Fassung
   nicht: Auf einem 1280er Fenster ergäbe das vier 300-px-Spalten, in denen
   jede Zeile umbricht. Deshalb 240 px, was ab rund 1080 px vier Spalten
   trägt und darunter sauber auf 2 × 2 fällt statt auf 3 + 1. */
/* FESTE SPALTENZAHLEN, kein auto-fit: Mit minmax(240px, 1fr) passten bei
   860 px genau drei Spalten – die vierte rutschte allein in die zweite Zeile.
   Ein 3+1-Umbruch liest sich wie „die vierte gehört nicht dazu“, und genau
   das soll die Tabelle ja nicht sagen. Vier oder zwei mal zwei oder eine. */
/* Die vierte Spalte bekommt weniger Breite (0.78fr statt 1fr). Das ist der
   eigentliche Träger der Aussage „nachrangig“ – die Dämpfung über die Fläche
   allein trägt sie nicht: Kartenfarbe und Seitenfarbe unterscheiden sich um
   1,05:1 im Dunkel- und 1,09:1 im Hellmodus, gemessen, nicht geschätzt. Wer
   sich auf sie verlässt, hat vier gleich aussehende Spalten und wundert sich,
   warum niemand merkt, dass eine davon keine Tür ist. Breite dagegen sieht
   man sofort, und sie kostet keinen Kontrast. */
.cx-zugang-grid-vier { grid-template-columns: repeat(3, minmax(0, 1fr)) 0.78fr; }
@media (max-width: 1099px) {
  .cx-zugang-grid-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 619px) {
  .cx-zugang-grid-vier { grid-template-columns: 1fr; }
}
.cx-zugang-grid-vier > .cx-zugang {
  border-top: 3px solid var(--cx-border);
}
.cx-zugang-firma  { --cx-tuer: var(--cx-band1); }
.cx-zugang-hervor { --cx-tuer: var(--cx-blue); }
.cx-zugang-grid-vier .cx-zugang-firma  { border-top-color: var(--cx-band1); }
/* Die Dreier-Fassung färbte beim Partnerzugang den ganzen Rahmen – das war
   die Hervorhebung der EINEN Zielspalte. Jetzt gibt es zwei gleichwertige
   Türen, also trägt auch der Partner nur noch den Balken oben. Die höhere
   Spezifität ist Absicht und überschreibt .cx-zugang-hervor. */
.cx-zugang-grid-vier .cx-zugang-hervor {
  border-color: var(--cx-border); border-top-color: var(--cx-blue);
}
/* In der Tabelle ein Textlink, kein Knopf. In einer 240 px schmalen Spalte
   bricht „Zugang beantragen“ im Knopf auf drei Zeilen und steht dann 25 px
   höher als der Nachbar – gemessen bei 1080 px. Der Link bricht auch, fällt
   dabei aber nicht auf. Gehandelt wird ohnehin oben an der Weiche; hier ist
   der Weg dorthin nur die Abkürzung für den, der bis hierher gelesen hat. */
.cx-zugang-link {
  margin-top: auto; padding-top: 4px; align-self: flex-start;
  font-size: 14.5px; font-weight: 600; line-height: 1.5;
  text-decoration: none;
}
/* NICHT --cx-blue und nicht --cx-tuer: Als Balken taugt die Hausfarbe, als
   TEXT auf der Kartenfläche erreicht sie im Dunkelmodus nur 4,55:1 – über der
   Norm, aber ohne Reserve. Die Bandfarben sind für beide Modi getrennt
   nachgerechnet, deshalb stehen sie hier. Nachgerechnet, nicht angesehen:
   Ein Farbwert bedient hell und dunkel nie beide. */
.cx-zugang-firma .cx-zugang-link  { color: var(--cx-band1); }
.cx-zugang-hervor .cx-zugang-link { color: var(--cx-band0); }
.cx-zugang-link:hover { text-decoration: underline; }
.cx-zugang-grid-vier .cx-zugang ul { margin-bottom: 18px; }
/* „Intern“ ist die einzige Spalte, die niemand beantragen kann. Sie tritt
   zurück, ohne dass die Schrift darunter leidet: KEINE opacity auf der Karte.
   Die dämpft den Text mit, und weil gedämpft ja gewollt aussieht, fällt im
   Bild nicht auf, dass die Zielgruppenzeile damit auf 2,96:1 rutscht – unter
   jeder Norm. Zurück tritt sie deshalb über die FLÄCHE: keine eigene
   Kartenfarbe, gestrichelter Rand. Das liest sich als „Auskunft, kein
   Angebot“, und jeder Buchstabe behält seinen vollen Kontrast.
   Weggelassen wird die Spalte trotzdem nicht – die Frage „und was sieht der
   Vertrieb?“ kommt sonst im Gespräch. */
.cx-zugang-still {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
}
/* Der obere Rand bleibt 3 px breit und wird nur gestrichelt – NICHT auf 1 px
   verschmälert. Sonst säße die vierte Überschrift zwei Pixel höher als die
   drei anderen, und ein Innenabstand, der das ausgleicht, müsste den Wert
   aus .cx-card kennen: Ändert der sich, verrutscht die Spalte wieder, ohne
   dass jemand hier nachsieht. Gemessen war der Versatz genau da (3623 /
   3623 / 3623 / 3621).
   Der Schatten braucht im Hellmodus eine eigene Zeile: Dort setzt ihn
   html[data-theme="light"] .cx-card, und diese Auswahl ist spezifischer als
   eine einzelne Klasse – der box-shadow: none oben lief ins Leere. Im
   Dunkelmodus gibt es keinen Schatten, deshalb fiel es dort nicht auf. */
html[data-theme="light"] .cx-zugang-still {
  box-shadow: none; background: transparent;
}
/* --cx-text-muted statt --cx-steel: Die Karte trägt opacity .72, und die
   dämpft den Text MIT. Steel kam damit auf 3,62:1 und lag unter der Norm –
   im Bild sieht man das nicht, weil gedämpft ja gewollt aussieht. */
.cx-zugang-fuss {
  margin: auto 0 0; padding-top: 14px; font-size: 13.5px;
  line-height: 1.5; color: var(--cx-text-muted); font-style: italic;
}

@media (max-width: 720px) {
  /* Wie bei den übrigen Startseiten-Knöpfen: content-box plus 100 %, sonst
     ragen die 2 × 28 px Innenabstand seitlich hinaus. */
  .cx-tuer-knopf {
    width: 100%; box-sizing: border-box; text-align: center;
  }
}

/* ---- „So stellen Sie eine Anfrage" (1.90.6) -----------------------------
   Die Anfragenseite nannte den Weg in einem Nebensatz und hatte keinen
   einzigen Link; wer noch nie angefragt hatte, musste raten. Nummeriert ist
   sie, weil hier wirklich eine Reihenfolge gilt – erst der Hersteller, dann
   der Kasten auf dem Steckbrief, dann die Anzeige hier. Die Scheibe greift
   die Form der MITRE-Schritte auf, eine Nummer kleiner. */
.cx-wie-schritte {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 20px; counter-reset: cx-wie;
}
.cx-wie-schritte > li {
  position: relative; padding-left: 50px;
  font-size: 15.5px; line-height: 1.62; color: var(--cx-text-muted);
}
.cx-wie-schritte > li::before {
  counter-increment: cx-wie; content: counter(cx-wie);
  position: absolute; left: 0; top: -2px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--cx-blue); background: var(--cx-carbon);
  border: 1px solid var(--cx-border);
}
.cx-wie-schritte > li b { color: var(--cx-text); font-weight: 600; }
.cx-wie-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.cx-wie-kurz {
  margin: 18px 0 0; padding: 12px 16px;
  border-left: 3px solid var(--cx-blue);
  background: rgba(30,123,232,.07);
  border-radius: 0 var(--cx-radius-sm) var(--cx-radius-sm) 0;
  font-size: 14.5px; line-height: 1.6; color: var(--cx-text-muted);
}
.cx-wie-kurz b { color: var(--cx-text); }
html[data-theme="light"] .cx-wie-kurz { background: rgba(30,123,232,.06); }

@media (max-width: 720px) {
  .cx-wie-knoepfe .cx-btn-secondary { width: 100%; box-sizing: border-box; text-align: center; }
}

/* ---- Quantencomputer erklärt (1.91.0) -----------------------------------
   Zwei Rechner tragen diesen Beitrag: die Zustandskugel und der Zähler.
   Beide sind keine Zierde – die Frage „Was ist ein Qubit, wenn nicht 0 oder
   1?" lässt sich in Prosa nicht beantworten, weil die Antwort zwei
   voneinander unabhängige Größen hat. Farbig geführt sind deshalb genau
   drei Dinge: der Zeiger (der Zustand), das Lot (die Neigung, also die
   Wahrscheinlichkeit) und die Drehung am Boden (die Phase). Alles andere
   bleibt Linienzeichnung, sonst konkurrieren die Farben mit der Aussage. */

/* -- Die drei Rollen im Einstiegsbild: Schalter, Münze, Tisch ------------- */
.cx-qc-rollen {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; margin: 22px 0 18px;
}
.cx-qc-rolle {
  padding: 16px 18px; border-radius: var(--cx-radius-sm);
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
  border-top: 3px solid var(--cx-border);
  display: flex; flex-direction: column; gap: 4px;
}
.cx-qc-rolle.r0 { border-top-color: var(--cx-steel); }
.cx-qc-rolle.r1 { border-top-color: var(--cx-band1); }
.cx-qc-rolle.r2 { border-top-color: var(--cx-band2); }
.cx-qc-rolle-wer {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cx-text-muted); font-weight: 600;
}
.cx-qc-rolle b { font-size: 16px; }
.cx-qc-rolle-bild { font-size: 14px; color: var(--cx-text-muted); line-height: 1.5; }
.cx-qc-rolle em {
  margin-top: 6px; font-size: 14px; color: var(--cx-band0); font-style: italic;
}

/* -- Zwei wiederkehrende Kästen: die Einschränkung und die Randnotiz ------
   „irrtum" trägt die Sätze, die ein Missverständnis geradeziehen; „notiz"
   das Beiwerk, das man mitnehmen kann, aber nicht muss. Sie sehen bewusst
   verschieden aus – ein Leser, der quer liest, soll die Einschränkungen
   finden, ohne alles zu lesen. */
.cx-qc-irrtum, .cx-qc-notiz {
  margin: 20px 0; padding: 16px 20px;
  border-radius: 0 var(--cx-radius-sm) var(--cx-radius-sm) 0;
  font-size: 14.5px; line-height: 1.65;
}
.cx-qc-irrtum {
  border-left: 3px solid var(--cx-band3);
  background: rgba(229,168,59,.09);
}
.cx-qc-notiz {
  border-left: 3px solid var(--cx-border);
  background: var(--cx-carbon);
}
.cx-qc-irrtum b, .cx-qc-notiz b {
  display: block; margin-bottom: 6px; font-size: 15px; color: var(--cx-text);
}
.cx-qc-irrtum p, .cx-qc-notiz p { margin: 0; color: var(--cx-text-muted); }
.cx-qc-irrtum p + p, .cx-qc-notiz p + p { margin-top: 10px; }
.cx-qc-irrtum.gross { padding: 20px 24px; }
.cx-qc-zitat {
  font-size: 16px; font-style: italic; color: var(--cx-text) !important;
  margin-bottom: 10px !important;
}
html[data-theme="light"] .cx-qc-irrtum { background: rgba(138,90,0,.07); }

/* -- Zwischenüberschrift innerhalb eines Kapitels ------------------------ */
.cx-qc-unter {
  margin: 30px 0 10px; font-size: 18px; font-weight: 600; color: var(--cx-text);
}
.cx-qc-bildsatz {
  margin: 8px 0 20px; font-size: 17px; font-style: italic;
  color: var(--cx-band1); font-weight: 500;
}

/* -- Der Rechner-Rahmen (beide Rechner teilen ihn) ----------------------- */
.cx-qc-rechner { padding: 24px 26px; margin: 22px 0; }
.cx-qc-rechner-text {
  margin: 6px 0 18px; font-size: 14.5px; line-height: 1.6;
  color: var(--cx-text-muted);
}
.cx-qc-rechner-grid {
  display: grid; grid-template-columns: 280px minmax(0, 1fr);
  gap: 26px; align-items: start;
}
.cx-qc-regler { margin-bottom: 14px; }

/* -- Die Zustandskugel ---------------------------------------------------
   Die Ellipse des Äquators ist keine Zierperspektive: Nur durch die
   Verkürzung sieht man, dass die Drehung eine zweite Achse ist. In einer
   flachen Kreisdarstellung fielen Neigung und Phase optisch zusammen –
   und genau deren Unterschied ist der Punkt des Kapitels. */
.cx-qc-kugel { margin: 0; }
.cx-qc-kugel svg { width: 100%; height: auto; display: block; overflow: visible; }
/* Umriss und Äquator auf --cx-steel und NICHT auf --cx-border: Gegen die
   leicht blaue Kugelfläche kommt der Rahmenton auf 1,23:1 – unter 1,3:1
   trennt ein Auge nichts mehr, die Kugel war in der Sichtprobe nur zu
   erahnen. Steel erreicht 4,69:1 dunkel und 4,84:1 hell und bleibt dem
   Zeiger (7,03:1) trotzdem klar untergeordnet. */
.cx-qc-huelle {
  fill: rgba(63,169,255,.05); stroke: var(--cx-steel); stroke-width: 1;
}
.cx-qc-aequator {
  fill: none; stroke: var(--cx-steel); stroke-width: 1; stroke-dasharray: 4 4;
}
.cx-qc-achse { fill: none; stroke: var(--cx-steel); stroke-width: 1; }
.cx-qc-pol { fill: var(--cx-steel); }
.cx-qc-pollabel {
  fill: var(--cx-text-muted); font-size: 12.5px; font-weight: 600;
}
.cx-qc-zeiger {
  stroke: var(--cx-band0); stroke-width: 2.5; stroke-linecap: round;
}
.cx-qc-spitze { fill: var(--cx-band0); }
/* Lot und Drehung sind Hilfslinien und dürfen den Zeiger nicht überstimmen:
   dünner, gestrichelt, und die Drehung in der Farbe des Phasenreglers. */
.cx-qc-lot {
  stroke: var(--cx-steel); stroke-width: 1.2; stroke-dasharray: 3 3;
}
.cx-qc-fuss { fill: var(--cx-band2); }
.cx-qc-drehung {
  stroke: var(--cx-band2); stroke-width: 1.6; stroke-dasharray: 5 3;
}

/* -- Wahrscheinlichkeitsbalken ------------------------------------------- */
.cx-qc-balken { display: grid; gap: 10px; margin: 18px 0 14px; }
.cx-qc-balken-zeile {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) 62px;
  align-items: center; gap: 12px; font-size: 14px; color: var(--cx-text-muted);
}
.cx-qc-balken-zeile > b:last-child {
  text-align: right; color: var(--cx-text); font-variant-numeric: tabular-nums;
}
.cx-qc-schiene {
  height: 12px; border-radius: 99px; overflow: hidden;
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
}
.cx-qc-schiene i {
  display: block; height: 100%; width: 0;
  background: var(--cx-band0); transition: width .12s linear;
}
.cx-qc-schiene i.eins { background: var(--cx-band2); }
.cx-qc-deutung {
  margin: 0 0 14px; padding: 12px 14px; border-radius: var(--cx-radius-sm);
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
  font-size: 14px; line-height: 1.6; color: var(--cx-text-muted);
  min-height: 72px;
}

/* -- Sprungmarken unter beiden Reglern ----------------------------------- */
.cx-qc-marken { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-qc-marke {
  padding: 7px 13px; border-radius: 99px; cursor: pointer;
  font: inherit; font-size: 13px;
  color: var(--cx-text-muted);
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
}
.cx-qc-marke:hover { color: var(--cx-text); border-color: var(--cx-steel); }

/* -- Der Zählregler ------------------------------------------------------ */
.cx-qc-zahl {
  margin: 16px 0 18px; padding: 18px 20px; border-radius: var(--cx-radius-sm);
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
}
.cx-qc-zahl-vor {
  display: block; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--cx-text-muted); font-weight: 600;
}
.cx-qc-zahl b {
  display: block; margin: 4px 0 2px;
  font-size: 30px; line-height: 1.15; color: var(--cx-band0);
  font-variant-numeric: tabular-nums; word-break: break-word;
}
.cx-qc-zahl b sup { font-size: .55em; }
.cx-qc-zahl-nach { font-size: 14.5px; color: var(--cx-text-muted); }

/* -- Die zwei Wellenbilder zur Phase -------------------------------------
   Die Summenkurve steht unter den beiden Ausgangswellen und liegt auf der
   Nulllinie, wenn sie sich auslöschen. Dass dort dann NICHTS zu sehen ist,
   ist die Aussage – deshalb bleibt die Nulllinie in beiden Fällen sichtbar,
   sonst wäre der rechte Fall nur eine leere Fläche. */
.cx-qc-fall { padding: 20px 22px; }
.cx-qc-fall.plus  { border-color: rgba(47,191,113,.42); }
.cx-qc-fall.minus { border-color: rgba(139,123,240,.45); }
.cx-qc-fall-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.cx-qc-fall-kopf b { font-size: 16px; }
.cx-qc-fall-marke {
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  padding: 3px 10px; border-radius: 99px;
}
.cx-qc-fall.plus  .cx-qc-fall-marke { background: rgba(47,191,113,.14);  color: var(--cx-accent); }
.cx-qc-fall.minus .cx-qc-fall-marke { background: rgba(139,123,240,.16); color: var(--cx-band2); }
.cx-qc-fall p { margin: 12px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--cx-text-muted); }
.cx-qc-welle { width: 100%; height: auto; display: block; }
.cx-qc-welle path { fill: none; stroke-width: 2; stroke-linecap: round; }
.cx-qc-welle-a { stroke: var(--cx-band0); }
.cx-qc-welle-b { stroke: var(--cx-band2); }
.cx-qc-welle-null { stroke: var(--cx-border); stroke-width: 1; stroke-dasharray: 4 4; }
.cx-qc-welle-summe.plus  { stroke: var(--cx-accent); stroke-width: 2.6; }
.cx-qc-welle-summe.minus { stroke: var(--cx-steel); stroke-width: 2.6; }

/* -- Die zwei verschränkten Würfel --------------------------------------- */
.cx-qc-wuerfel { padding: 22px 24px; margin: 18px 0; }
.cx-qc-wuerfel h3 { margin: 0 0 8px; font-size: 17px; }
.cx-qc-wuerfel > p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--cx-text-muted); }
.cx-qc-wuerfel-paar {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; margin-top: 18px; flex-wrap: wrap;
}
.cx-qc-wuerfel-stein { font-size: 44px; line-height: 1; color: var(--cx-band1); }
.cx-qc-wuerfel-band {
  font-size: 13px; letter-spacing: .04em; color: var(--cx-text-muted);
  padding: 5px 14px; border-radius: 99px;
  border: 1px dashed var(--cx-border);
}

/* -- Was er kann: die Einordnung steht ÜBER dem Titel -------------------- */
.cx-qc-kann article { display: flex; flex-direction: column; }
.cx-qc-kann-wie {
  font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  font-weight: 600; color: var(--cx-band1);
}
.cx-qc-kann h3 { margin: 6px 0 8px; font-size: 16.5px; }
.cx-qc-kann p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--cx-text-muted); }
.cx-qc-nicht { margin-top: 12px; }

/* Rot für „das bricht wirklich": Der aus der WAF übernommene Ton #E06A6A
   erreicht im Hellmodus auf Weiß nur 3,26:1 und wäre als Wort damit fahl.
   Dieselbe Familie, abgedunkelt: 5,20:1 auf Weiß, 4,77:1 auf der
   Seitenfläche. Nachgerechnet, weil ein Screenshot Kontrastverhältnisse
   nicht zeigt und „gedämpft" wie Absicht aussieht. */
:root { --cx-qc-rot: #E06A6A; }
html[data-theme="light"] { --cx-qc-rot: #C43B3B; }

/* -- Die zwei Angriffe: Shor und Grover ---------------------------------- */
.cx-qc-angriff { padding: 22px 24px; }
.cx-qc-angriff.schwer { border-color: rgba(224,106,106,.45); }
.cx-qc-angriff.leicht { border-color: rgba(229,168,59,.42); }
.cx-qc-angriff-kopf {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px;
}
.cx-qc-angriff-kopf b { font-size: 20px; }
.cx-qc-angriff.schwer .cx-qc-angriff-kopf b { color: var(--cx-qc-rot); }
.cx-qc-angriff.leicht .cx-qc-angriff-kopf b { color: var(--cx-band3); }
.cx-qc-angriff-kopf span { font-size: 13px; color: var(--cx-text-muted); font-variant-numeric: tabular-nums; }
.cx-qc-angriff h3 { margin: 0 0 10px; font-size: 16px; line-height: 1.4; }
.cx-qc-angriff p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--cx-text-muted); }
.cx-qc-angriff-was {
  display: block; margin: 16px 0 6px; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 600; color: var(--cx-text-muted);
}
.cx-qc-betrifft { margin: 0 0 14px; padding-left: 20px; }
.cx-qc-betrifft li { font-size: 13.5px; line-height: 1.7; color: var(--cx-text-muted); }
.cx-qc-angriff-folge {
  padding-top: 12px; border-top: 1px solid var(--cx-border);
  color: var(--cx-text) !important; font-weight: 500;
}
.cx-qc-ernte { margin: 24px 0; }
.cx-qc-ernte h3 { margin: 6px 0 12px; font-size: 19px; }

/* -- Die Rechnung mit drei Zahlen (Mosca) -------------------------------- */
.cx-qc-mosca { display: grid; gap: 12px; margin: 18px 0; }
.cx-qc-mosca-teil {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px; border-radius: var(--cx-radius-sm);
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
}
.cx-qc-mosca-zeichen {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 700;
  color: var(--cx-band0); background: var(--cx-graphite);
  border: 1px solid var(--cx-border);
}
.cx-qc-mosca-teil b { font-size: 15px; }
.cx-qc-mosca-teil p { margin: 3px 0 0; font-size: 14px; line-height: 1.6; color: var(--cx-text-muted); }

/* -- Die vier NIST-Standards --------------------------------------------- */
.cx-qc-standard { display: flex; flex-direction: column; }
.cx-qc-norm {
  align-self: flex-start; padding: 3px 10px; border-radius: 99px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: var(--cx-band0); background: var(--cx-carbon);
  border: 1px solid var(--cx-border);
}
.cx-qc-standard h3 { margin: 10px 0 2px; font-size: 18px; }
.cx-qc-zweck { font-size: 13.5px; color: var(--cx-band1); font-weight: 600; }
.cx-qc-standard p { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--cx-text-muted); }
.cx-qc-aus {
  margin-top: auto; padding-top: 12px;
  font-size: 12.5px; color: var(--cx-text-muted); font-style: italic;
}
.cx-qc-laeuft { margin-top: 12px; }

/* -- Die zwei Herstellergruppen ------------------------------------------ */
.cx-qc-gruppe { margin-bottom: 26px; }
.cx-qc-gruppe-text {
  margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; color: var(--cx-text-muted);
}

/* -- Die drei Sätze für den Termin --------------------------------------- */
.cx-qc-saetze { display: grid; gap: 14px; margin: 14px 0 20px; }
.cx-qc-satz {
  padding: 16px 18px; border-radius: var(--cx-radius-sm);
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
}
.cx-qc-satz b { display: block; font-size: 13.5px; color: var(--cx-text-muted); font-weight: 600; }
.cx-qc-satz p { margin: 6px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--cx-text); }

/* -- Schmale Fenster ----------------------------------------------------
   Bei 860 px hat jede Seite ohnehin eine Scrollleiste; die Kugel darf
   deshalb nicht auf einer festen Spaltenbreite bestehen. Ab 960 px rutscht
   sie über die Anzeige, ab 720 px werden aus drei Rollen eine Spalte. */
@media (max-width: 960px) {
  .cx-qc-rechner-grid { grid-template-columns: minmax(0, 1fr); }
  .cx-qc-kugel { max-width: 300px; margin: 0 auto; }
}
@media (max-width: 720px) {
  .cx-qc-rollen { grid-template-columns: minmax(0, 1fr); }
  .cx-qc-balken-zeile { grid-template-columns: 116px minmax(0, 1fr) 56px; gap: 8px; }
  .cx-qc-rechner { padding: 18px 16px; }
  .cx-qc-zahl b { font-size: 24px; }
  .cx-qc-deutung { min-height: 0; }
}

/* ---- Verschlüsselte E-Mail erklärt (1.92.0) -----------------------------
   Zwei Bilder tragen diesen Beitrag, und beide leben davon, dass zwei
   Zustände NEBENEINANDER stehen: die Wegzeile (mit TLS / mit Zertifikat)
   und die Demo (beim Empfänger / beim Mitleser). Deshalb sind sie im
   schmalen Fenster untereinander gestapelt und NICHT gescrollt – ein
   Vergleich, den man wegschieben muss, ist keiner.

   Zustände stehen überall doppelt da: als Farbe UND als Zeichen. Rot gegen
   Grün allein trägt die Aussage nicht, wenn jemand die beiden nicht
   unterscheidet – und hier hängt der ganze Erklärwert daran. */

/* -- Die drei Stufen im Einstiegsbild ------------------------------------ */
.cx-sm-stufen {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; margin: 22px 0 18px;
}
.cx-sm-stufe {
  padding: 16px 18px; border-radius: var(--cx-radius-sm);
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
  border-top: 3px solid var(--cx-border);
  display: flex; flex-direction: column; gap: 5px;
}
.cx-sm-stufe.offen  { border-top-color: var(--cx-qc-rot); }
.cx-sm-stufe.siegel { border-top-color: var(--cx-band3); }
.cx-sm-stufe.zu     { border-top-color: var(--cx-band4); }
.cx-sm-stufe-marke {
  align-self: flex-start; padding: 3px 10px; border-radius: 99px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  border: 1px solid var(--cx-border);
}
.cx-sm-stufe.offen  .cx-sm-stufe-marke { color: var(--cx-qc-rot); }
.cx-sm-stufe.siegel .cx-sm-stufe-marke { color: var(--cx-band3); }
.cx-sm-stufe.zu     .cx-sm-stufe-marke { color: var(--cx-band4); }
.cx-sm-stufe b { font-size: 16px; margin-top: 4px; }
.cx-sm-stufe-wer { font-size: 13px; color: var(--cx-text-muted); font-style: italic; }
.cx-sm-stufe p { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--cx-text-muted); }

.cx-sm-bildsatz {
  margin: 4px 0 18px; font-size: 16px; font-style: italic;
  color: var(--cx-band1); line-height: 1.55;
}

/* -- Die Wegzeile: sieben Stationen, zweimal ----------------------------
   Die Spalten müssen in beiden Zeilen exakt übereinanderstehen, sonst
   vergleicht das Auge die falschen Paare. Deshalb ein gemeinsames Raster
   mit fester Spaltenzahl statt zweier unabhängiger Flex-Zeilen. */
.cx-sm-weg { padding: 22px 24px; margin: 18px 0; display: grid; gap: 18px; }
.cx-sm-weg-zeile {
  display: grid; grid-template-columns: 190px minmax(0, 1fr);
  gap: 18px; align-items: center;
}
.cx-sm-weg-zeile + .cx-sm-weg-zeile { padding-top: 18px; border-top: 1px solid var(--cx-border); }
.cx-sm-weg-name b { display: block; font-size: 15px; }
.cx-sm-weg-name span { font-size: 12.5px; color: var(--cx-text-muted); line-height: 1.45; }
.cx-sm-weg-punkte {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px;
}
.cx-sm-weg-punkt { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.cx-sm-weg-ort {
  font-size: 11px; color: var(--cx-text-muted); line-height: 1.25;
  overflow-wrap: anywhere;
}
.cx-sm-stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 100%; padding: 8px 2px; border-radius: var(--cx-radius-sm);
  border: 1px solid var(--cx-border); font-size: 15px;
}
.cx-sm-stat svg { display: block; }
.cx-sm-stat em { font-size: 10.5px; font-style: normal; font-weight: 600; letter-spacing: .02em; }
/* Die Farbe sitzt am Container und NICHT am <em>: Nur so erbt das Zeichen
   sie über currentColor mit. Am <em> gesetzt blieb der Strich auf der
   allgemeinen Textfarbe – im Bild sah das ordentlich aus, trug die Aussage
   aber nicht mit, und der Kommentar im Code behauptete das Gegenteil. */
.cx-sm-stat.dicht {
  background: rgba(95,208,138,.10); border-color: rgba(95,208,138,.40);
  color: var(--cx-band4);
}
.cx-sm-stat.klar {
  background: rgba(224,106,106,.10); border-color: rgba(224,106,106,.40);
  color: var(--cx-qc-rot);
}
html[data-theme="light"] .cx-sm-stat.dicht { background: rgba(46,125,79,.08); }
html[data-theme="light"] .cx-sm-stat.klar  { background: rgba(196,59,59,.07); }

.cx-sm-stationen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px; margin: 18px 0;
}
.cx-sm-station {
  padding: 13px 16px; border-radius: var(--cx-radius-sm);
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
}
.cx-sm-station b { font-size: 14px; }
.cx-sm-station p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--cx-text-muted); }

/* -- Signieren gegen Verschlüsseln --------------------------------------- */
.cx-sm-vorgang { padding: 22px 24px; }
.cx-sm-vorgang.signieren     { border-color: rgba(229,168,59,.42); }
.cx-sm-vorgang.verschluesseln{ border-color: rgba(95,208,138,.42); }
.cx-sm-vorgang-name { display: block; font-size: 19px; }
.cx-sm-vorgang.signieren      .cx-sm-vorgang-name { color: var(--cx-band3); }
.cx-sm-vorgang.verschluesseln .cx-sm-vorgang-name { color: var(--cx-band4); }
.cx-sm-vorgang-frage {
  margin: 4px 0 12px !important; font-size: 15.5px; font-style: italic;
  color: var(--cx-text) !important;
}
.cx-sm-vorgang p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.62; color: var(--cx-text-muted); }
.cx-sm-braucht {
  padding: 9px 13px; border-radius: var(--cx-radius-sm);
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
  color: var(--cx-text) !important; font-weight: 500; font-size: 14px !important;
}
.cx-sm-nicht {
  margin: 12px 0 0 !important; padding-top: 12px;
  border-top: 1px solid var(--cx-border);
}
.cx-sm-nicht b { color: var(--cx-band3); }

/* -- Die Demo: zwei Blickwinkel auf dieselbe Nachricht -------------------
   Die rechte Spalte ist die eigentliche Aussage der Seite, deshalb trägt
   nur sie eine Farbmarke am Kopf. Zwei gleich gestaltete Spalten würden
   das Bild in „zweimal dasselbe" verwandeln. */
.cx-sm-demo { margin-top: 24px; }
.cx-sm-demo-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.cx-sm-demo-knopf {
  padding: 9px 16px; border-radius: 99px; cursor: pointer; font: inherit; font-size: 14px;
  color: var(--cx-text-muted); background: var(--cx-carbon);
  border: 1px solid var(--cx-border);
}
.cx-sm-demo-knopf:hover { color: var(--cx-text); border-color: var(--cx-steel); }
.cx-sm-demo-knopf.aktiv {
  color: var(--cx-text); border-color: var(--cx-band0); font-weight: 600;
  background: rgba(63,169,255,.10);
}
html[data-theme="light"] .cx-sm-demo-knopf.aktiv { background: rgba(13,80,216,.07); }
.cx-sm-demo-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
}
.cx-sm-demo-seite { display: flex; flex-direction: column; }
.cx-sm-demo-kopf {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600; margin-bottom: 8px;
}
.cx-sm-demo-kopf.empfaenger { color: var(--cx-text-muted); }
.cx-sm-demo-kopf.mitleser   { color: var(--cx-qc-rot); }
.cx-sm-mail {
  border-radius: var(--cx-radius-sm); border: 1px solid var(--cx-border);
  background: var(--cx-graphite); overflow: hidden;
}
.cx-sm-mail-kopf { padding: 12px 14px; border-bottom: 1px solid var(--cx-border); display: grid; gap: 4px; }
.cx-sm-mail-kopf > div { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; font-size: 13px; }
.cx-sm-mail-kopf span { color: var(--cx-text-muted); }
.cx-sm-mail-kopf b { font-weight: 500; overflow-wrap: anywhere; }
.cx-sm-siegel {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 9px 14px; font-size: 12.5px; line-height: 1.45;
  background: rgba(95,208,138,.10); color: var(--cx-band4);
  border-bottom: 1px solid rgba(95,208,138,.30);
}
html[data-theme="light"] .cx-sm-siegel { background: rgba(46,125,79,.08); }
.cx-sm-mail-text {
  margin: 0; padding: 14px; font-size: 13px; line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: var(--cx-font-body); color: var(--cx-text-muted);
  max-height: 230px; overflow-y: auto;
}
/* Der Zeichensalat: bewusst als Schreibmaschinenschrift und gedämpft –
   er soll als „hier steht nichts Lesbares" erkennbar sein, ohne dass man
   ihn zu entziffern versucht. */
.cx-sm-mail.chiffre .cx-sm-mail-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; letter-spacing: .02em; color: var(--cx-steel);
}
.cx-sm-demo-note {
  margin: 10px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--cx-text-muted);
}
.cx-sm-demo-note.warn {
  padding: 11px 14px; border-radius: var(--cx-radius-sm);
  border-left: 3px solid var(--cx-qc-rot); background: rgba(224,106,106,.08);
}
html[data-theme="light"] .cx-sm-demo-note.warn { background: rgba(196,59,59,.06); }
.cx-sm-demo-fazit {
  margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--cx-border);
  font-size: 15.5px; font-weight: 500; color: var(--cx-text);
}

/* -- Die zwei Schlüsselhälften ------------------------------------------- */
.cx-sm-haelfte { padding: 20px 22px; }
.cx-sm-haelfte.privat      { border-color: rgba(224,106,106,.42); }
.cx-sm-haelfte.oeffentlich { border-color: rgba(63,169,255,.42); }
.cx-sm-haelfte > b { font-size: 17px; }
.cx-sm-regel {
  display: block; margin: 4px 0 12px; font-size: 13px; font-weight: 600;
  letter-spacing: .02em;
}
.cx-sm-haelfte.privat      .cx-sm-regel { color: var(--cx-qc-rot); }
.cx-sm-haelfte.oeffentlich .cx-sm-regel { color: var(--cx-band0); }
.cx-sm-haelfte .cx-qc-betrifft { margin-bottom: 0; }

/* -- Prüfstufen-Tabelle: die Aussagekraft als Marke ---------------------- */
.cx-sm-wert {
  display: inline-block; padding: 3px 11px; border-radius: 99px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--cx-border);
}
.cx-sm-wert.wenig  { color: var(--cx-qc-rot); }
.cx-sm-wert.mittel { color: var(--cx-band3); }
.cx-sm-wert.hoch   { color: var(--cx-band4); }

/* -- Vier Zusagen -------------------------------------------------------- */
.cx-sm-zusage { display: flex; flex-direction: column; }
.cx-sm-zusage h3 { margin: 0 0 2px; font-size: 17px; }
.cx-sm-zusage-frage { font-size: 14px; font-style: italic; color: var(--cx-band0); }
.cx-sm-zusage p { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--cx-text-muted); }
.cx-sm-gegen {
  margin-top: auto; padding-top: 12px; font-size: 12.5px;
  color: var(--cx-text-muted); font-style: italic;
}

/* -- Die drei Auswege aus dem Henne-Ei-Problem --------------------------- */
.cx-sm-ausweg { position: relative; padding-top: 20px; }
.cx-sm-ausweg-nr {
  position: absolute; top: 16px; right: 18px;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--cx-band0); background: var(--cx-carbon); border: 1px solid var(--cx-border);
}
.cx-sm-ausweg h3 { margin: 0 40px 8px 0; font-size: 16.5px; }
.cx-sm-ausweg p { margin: 0 0 8px; font-size: 14px; line-height: 1.6; color: var(--cx-text-muted); }
.cx-sm-gut b    { color: var(--cx-band4); }
.cx-sm-grenze b { color: var(--cx-band3); }
.cx-sm-grenze   { margin-bottom: 0 !important; }

/* -- Die neun Schwierigkeiten, nach Gewicht sortiert --------------------- */
.cx-sm-huerden { display: grid; gap: 14px; margin: 18px 0; }
.cx-sm-huerde { padding: 18px 20px; }
.cx-sm-huerde.hoch   { border-left: 3px solid var(--cx-qc-rot); }
.cx-sm-huerde.mittel { border-left: 3px solid var(--cx-band3); }
.cx-sm-huerde.leicht { border-left: 3px solid var(--cx-border); }
.cx-sm-huerde-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; margin-bottom: 8px; flex-wrap: wrap;
}
.cx-sm-huerde-kopf b { font-size: 16px; }
.cx-sm-schwere {
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  padding: 3px 10px; border-radius: 99px; white-space: nowrap;
  border: 1px solid var(--cx-border);
}
.cx-sm-schwere.hoch   { color: var(--cx-qc-rot); }
.cx-sm-schwere.mittel { color: var(--cx-band3); }
.cx-sm-schwere.leicht { color: var(--cx-text-muted); }
.cx-sm-huerde p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--cx-text-muted); }
.cx-sm-loesung {
  margin-top: 10px !important; padding-top: 10px;
  border-top: 1px solid var(--cx-border);
}
.cx-sm-loesung b { color: var(--cx-band4); }

/* -- Die zwei Bauweisen -------------------------------------------------- */
.cx-sm-bauweise { padding: 22px 24px; }
.cx-sm-bauweise.client  { border-color: rgba(63,169,255,.42); }
.cx-sm-bauweise.gateway { border-color: rgba(95,208,138,.42); }
.cx-sm-bauweise-name { display: block; font-size: 19px; }
.cx-sm-bauweise-unter {
  display: block; margin: 2px 0 10px; font-size: 13.5px; font-weight: 600;
}
.cx-sm-bauweise.client  .cx-sm-bauweise-unter { color: var(--cx-band0); }
.cx-sm-bauweise.gateway .cx-sm-bauweise-unter { color: var(--cx-band4); }
.cx-sm-bauweise > p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; color: var(--cx-text-muted); }
/* Die Kette wird umbrechend gesetzt, nicht gescrollt: Sie hat sechs kurze
   Glieder und soll auf dem Telefon vollständig sichtbar bleiben. */
.cx-sm-kette {
  margin: 0 0 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.cx-sm-kette i { color: var(--cx-steel); font-style: normal; font-size: 13px; }
.cx-sm-kette-glied {
  padding: 5px 11px; border-radius: 99px; font-size: 12.5px;
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
  color: var(--cx-text-muted);
}
.cx-sm-kette-glied.zu {
  background: rgba(95,208,138,.12); border-color: rgba(95,208,138,.40);
  color: var(--cx-band4); font-weight: 600;
}
html[data-theme="light"] .cx-sm-kette-glied.zu { background: rgba(46,125,79,.08); }

/* -- Womit man anfängt --------------------------------------------------- */
.cx-sm-reihenfolge { display: grid; gap: 12px; margin: 16px 0; }
.cx-sm-schritt {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 16px 18px; border-radius: var(--cx-radius-sm);
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
}
.cx-sm-schritt-nr {
  flex: none; min-width: 76px; padding: 5px 12px; border-radius: 99px;
  text-align: center; font-size: 12.5px; font-weight: 600;
  color: var(--cx-band0); background: var(--cx-graphite);
  border: 1px solid var(--cx-border);
}
.cx-sm-schritt b { font-size: 15.5px; }
.cx-sm-schritt p { margin: 3px 0 0; font-size: 14px; line-height: 1.6; color: var(--cx-text-muted); }

/* -- Nummer vor der Rollen-Überschrift ----------------------------------- */
.cx-sm-rolle-nr {
  display: inline-grid; place-items: center; vertical-align: -3px;
  width: 24px; height: 24px; margin-right: 8px; border-radius: 50%;
  font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--cx-band0); background: var(--cx-carbon); border: 1px solid var(--cx-border);
}

/* -- Schmale Fenster ----------------------------------------------------
   Beide Vergleiche werden GESTAPELT, nicht seitlich scrollbar: Ein
   Vergleich, den man wegschieben muss, vergleicht nichts mehr. In der
   Wegzeile rutschen die sieben Stationen deshalb in ein 4er- und dann in
   ein 2er-Raster – die Spalten stehen weiterhin untereinander. */
@media (max-width: 1099px) {
  .cx-sm-weg-zeile { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cx-sm-weg-name { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
}
@media (max-width: 860px) {
  .cx-sm-weg-punkte { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .cx-sm-demo-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .cx-sm-stufen { grid-template-columns: minmax(0, 1fr); }
  .cx-sm-weg { padding: 18px 14px; }
  .cx-sm-weg-punkte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-sm-schritt { flex-direction: column; gap: 8px; }
  .cx-sm-demo-knopf { width: 100%; box-sizing: border-box; text-align: center; }
}

/* -- Störungsberater: „Der Kunde kann die Mail nicht lesen" (1.93.0) -----
   Neun Fälle als <details> und nicht als Knopfleiste: Bei neun Einträgen
   wäre eine Leiste eine Wand, und im Termin überfliegt man die Symptome,
   statt sich durchzuklicken. <details> funktioniert außerdem ohne
   JavaScript und wird von Vorlesesoftware richtig angesagt – dieselbe
   Bauweise wie bei der Battle Card und dem Matrix-Anhang. */
.cx-sm-erst { margin: 16px 0 8px; }
.cx-sm-erstfrage { position: relative; padding-top: 20px; }
.cx-sm-erst-nr {
  position: absolute; top: 16px; right: 18px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--cx-band0); background: var(--cx-carbon); border: 1px solid var(--cx-border);
}
.cx-sm-erstfrage b { display: block; margin-right: 38px; font-size: 15.5px; line-height: 1.4; }
.cx-sm-erstfrage p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--cx-text-muted); }

.cx-sm-faelle { display: grid; gap: 10px; margin: 16px 0 8px; }
.cx-sm-fall {
  border-radius: var(--cx-radius-sm); border: 1px solid var(--cx-border);
  background: var(--cx-graphite); overflow: hidden;
}
.cx-sm-fall > summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 14px 18px; cursor: pointer; list-style: none;
  font-size: 15.5px; font-weight: 500;
}
.cx-sm-fall > summary::-webkit-details-marker { display: none; }
/* Das Dreieck selbst zeichnen: Der Standardmarker steht je nach Browser
   woanders und lässt sich nicht ausrichten. */
.cx-sm-fall > summary::before {
  content: '▸'; flex: none; color: var(--cx-steel); font-size: 13px;
  transition: transform .15s ease;
}
.cx-sm-fall[open] > summary::before { transform: rotate(90deg); }
.cx-sm-fall > summary:hover { background: var(--cx-carbon); }
.cx-sm-fall-symptom { flex: 1 1 auto; }
.cx-sm-haeufig {
  flex: none; padding: 3px 10px; border-radius: 99px; white-space: nowrap;
  font-size: 11.5px; font-weight: 600; letter-spacing: .03em;
  border: 1px solid var(--cx-border);
}
.cx-sm-haeufig.sehr   { color: var(--cx-qc-rot); }
.cx-sm-haeufig.oft    { color: var(--cx-band3); }
.cx-sm-haeufig.selten { color: var(--cx-text-muted); }
.cx-sm-fall-inhalt {
  padding: 4px 18px 18px; display: grid; gap: 12px;
  border-top: 1px solid var(--cx-border);
}
.cx-sm-fall-zeile > span, .cx-sm-sagen > span {
  display: block; font-size: 11.5px; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 600; color: var(--cx-text-muted);
}
.cx-sm-fall-zeile p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.62; color: var(--cx-text-muted); }
.cx-sm-fall-zeile.abhilfe p { color: var(--cx-text); }
/* Der Satz zum Vorlesen ist der Grund, warum es dieses Kapitel gibt –
   er steht deshalb abgesetzt und nicht als dritter Spiegelstrich. */
.cx-sm-sagen {
  padding: 14px 16px; border-radius: var(--cx-radius-sm);
  border-left: 3px solid var(--cx-band4);
  background: rgba(95,208,138,.08);
}
.cx-sm-sagen > span { color: var(--cx-band4); }
.cx-sm-sagen p {
  margin: 6px 0 0; font-size: 15.5px; line-height: 1.6;
  color: var(--cx-text); font-style: italic;
}
html[data-theme="light"] .cx-sm-sagen { background: rgba(46,125,79,.06); }
.cx-sm-vorbeugen { margin-top: 14px; }

@media (max-width: 720px) {
  .cx-sm-fall > summary { flex-wrap: wrap; font-size: 15px; }
  .cx-sm-fall-symptom { flex: 1 1 100%; order: 2; }
  .cx-sm-haeufig { order: 1; }
  .cx-sm-erstfrage b { margin-right: 0; }
  .cx-sm-erst-nr { position: static; margin-bottom: 8px; }
}

/* ---- Firewall erklärt (1.93.0) -----------------------------------------
   Das Regelwerk zum Durchspielen lebt von DREI Zuständen je Zeile, nicht
   von zweien: getroffen, vorher geprüft und nicht gepasst, und – der
   entscheidende – gar nicht mehr angesehen. Genau dieser dritte Zustand
   ist die Aussage des Kapitels: Eine Regel unterhalb der getroffenen wird
   nie erreicht, egal was darin steht. Als zwei Zustände (an/aus) wäre das
   Bild nicht zu unterscheiden von „passt nicht". */

/* -- Vier Rollen im Einstiegsbild ---------------------------------------- */
.cx-fw-quer {
  margin: 14px 0 0; padding: 11px 15px; border-radius: var(--cx-radius-sm);
  border-left: 3px solid var(--cx-band0); background: rgba(63,169,255,.07);
  font-size: 14px; line-height: 1.6; color: var(--cx-text-muted);
}
html[data-theme="light"] .cx-fw-quer { background: rgba(13,80,216,.06); }
.cx-fw-rollen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 13px; margin: 20px 0 18px;
}
.cx-fw-rolle {
  padding: 15px 17px; border-radius: var(--cx-radius-sm);
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
}
.cx-fw-rolle-wer {
  display: block; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600; color: var(--cx-band0);
}
.cx-fw-rolle b { display: block; margin: 4px 0 5px; font-size: 15.5px; }
.cx-fw-rolle p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--cx-text-muted); }
.cx-fw-irrtuemer .cx-qc-irrtum { margin: 12px 0; }

/* -- Die fünf Spalten einer Regel ---------------------------------------- */
.cx-fw-spalten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 13px; margin: 18px 0;
}
.cx-fw-spalte { padding: 16px 18px; display: flex; flex-direction: column; gap: 5px; }
.cx-fw-spalte > b { font-size: 15.5px; }
.cx-fw-spalte-frage { font-size: 13.5px; color: var(--cx-band0); }
.cx-fw-spalte code {
  display: block; margin: 4px 0; padding: 7px 10px; border-radius: 7px;
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
  font-size: 12.5px; overflow-wrap: anywhere; color: var(--cx-text);
}
.cx-fw-spalte p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--cx-text-muted); }
.cx-fw-aktion { padding: 20px 22px; }
.cx-fw-aktion-kopf { display: flex; align-items: baseline; gap: 9px; margin-bottom: 8px; }
.cx-fw-aktion-kopf b { font-size: 17px; }
.cx-fw-aktion-kopf span { font-size: 13px; color: var(--cx-text-muted); font-style: italic; }
.cx-fw-aktion p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.6; color: var(--cx-text-muted); }
.cx-fw-aktion-wann { margin-bottom: 0 !important; }
.cx-fw-aktion-wann b { color: var(--cx-band0); }

/* -- Das Regelwerk zum Durchspielen -------------------------------------- */
.cx-fw-demo { margin: 20px 0; }
.cx-fw-versuche { display: grid; gap: 8px; margin-bottom: 16px; }
.cx-fw-versuch {
  text-align: left; padding: 11px 16px; border-radius: var(--cx-radius-sm);
  cursor: pointer; font: inherit; font-size: 14.5px;
  color: var(--cx-text-muted); background: var(--cx-carbon);
  border: 1px solid var(--cx-border);
}
.cx-fw-versuch:hover { color: var(--cx-text); border-color: var(--cx-steel); }
.cx-fw-versuch.aktiv {
  color: var(--cx-text); border-color: var(--cx-band0); font-weight: 600;
  background: rgba(63,169,255,.10);
}
html[data-theme="light"] .cx-fw-versuch.aktiv { background: rgba(13,80,216,.07); }
.cx-fw-paket {
  margin-bottom: 14px; padding: 13px 16px; border-radius: var(--cx-radius-sm);
  background: var(--cx-graphite); border: 1px solid var(--cx-border);
}
.cx-fw-paket-kopf {
  display: block; margin-bottom: 7px; font-size: 11.5px; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 600; color: var(--cx-text-muted);
}
.cx-fw-paket-felder { display: flex; flex-wrap: wrap; gap: 10px; }
.cx-fw-paket-felder span {
  padding: 6px 12px; border-radius: 99px; font-size: 13.5px;
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
}
.cx-fw-paket-felder em { font-style: normal; color: var(--cx-text-muted); margin-right: 5px; }

/* KEIN transition auf color: Gemessen bleibt eine animierte Farbe, die aus
   einer CSS-Variablen kommt, beim Umschalten des Themes am Startwert hängen –
   die Tabelle behielt im hellen Modus die Farben des dunklen und fiel damit
   auf 2,25:1. Die Notiz daneben, die keinen Übergang hat, schaltet korrekt.
   Für einen Wechsel zwischen fünf diskreten Versuchen bringt die Animation
   ohnehin nichts; Hintergrund und Durchstreichung tragen den Zustand. */
.cx-fw-nr { font-variant-numeric: tabular-nums; font-weight: 600; width: 34px; }
.cx-fw-regelwerk tr.treffer td {
  background: rgba(63,169,255,.13); font-weight: 500;
}
.cx-fw-regelwerk tr.treffer .cx-fw-nr { color: var(--cx-band0); }
html[data-theme="light"] .cx-fw-regelwerk tr.treffer td { background: rgba(13,80,216,.08); }
.cx-fw-regelwerk tr.treffer.warnung td { background: rgba(224,106,106,.13); }
.cx-fw-regelwerk tr.treffer.warnung .cx-fw-nr { color: var(--cx-qc-rot); }
html[data-theme="light"] .cx-fw-regelwerk tr.treffer.warnung td { background: rgba(196,59,59,.08); }
/* Geprüft und nicht gepasst: normal. Gar nicht mehr angesehen: durchgestrichen
   und in Steel. KEIN opacity – gemessen fiel der Text damit auf 3,99:1 im
   hellen Modus, und ausgerechnet diese Zeilen muss man lesen können: Bei der
   Falle ist die übersprungene Regel 3 die entscheidende. Die Linie trägt den
   Zustand ohnehin allein; die Farbe unterstützt nur. Steel misst 10,52:1
   dunkel und 8,92:1 hell und bleibt dem normalen Text trotzdem nachgeordnet. */
.cx-fw-regelwerk tr.ungesehen td {
  color: var(--cx-steel); text-decoration: line-through;
}
.cx-fw-regelwerk tr.ungesehen .cx-fw-aktion-marke { text-decoration: none; }
.cx-fw-aktion-marke {
  display: inline-block; padding: 3px 10px; border-radius: 99px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--cx-border);
}
.cx-fw-aktion-marke.ja   { color: var(--cx-band4); }
.cx-fw-aktion-marke.nein { color: var(--cx-qc-rot); }

.cx-fw-notizen { margin: 14px 0; display: grid; gap: 7px; }
.cx-fw-notiz {
  margin: 0; padding: 9px 13px; border-radius: var(--cx-radius-sm);
  font-size: 13.5px; line-height: 1.55; color: var(--cx-steel);
  border-left: 3px solid transparent;
}
.cx-fw-notiz.aktiv {
  border-left-color: var(--cx-band0);
  background: var(--cx-carbon); color: var(--cx-text);
}
.cx-fw-notiz b { color: var(--cx-text); }

.cx-fw-ergebnis {
  margin-top: 16px; padding: 16px 20px; border-radius: var(--cx-radius-sm);
  border-left: 3px solid var(--cx-border); background: var(--cx-carbon);
}
.cx-fw-ergebnis.ja      { border-left-color: var(--cx-band4); }
.cx-fw-ergebnis.nein    { border-left-color: var(--cx-steel); }
.cx-fw-ergebnis.warnung { border-left-color: var(--cx-qc-rot); background: rgba(224,106,106,.08); }
html[data-theme="light"] .cx-fw-ergebnis.warnung { background: rgba(196,59,59,.06); }
.cx-fw-ergebnis-kopf {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; flex-wrap: wrap;
}
.cx-fw-ergebnis-kopf b { font-size: 15.5px; }
.cx-fw-ergebnis-marke {
  padding: 3px 11px; border-radius: 99px; font-size: 12px; font-weight: 600;
  letter-spacing: .04em; white-space: nowrap; border: 1px solid var(--cx-border);
}
.cx-fw-ergebnis.ja      .cx-fw-ergebnis-marke { color: var(--cx-band4); }
.cx-fw-ergebnis.nein    .cx-fw-ergebnis-marke { color: var(--cx-text-muted); }
.cx-fw-ergebnis.warnung .cx-fw-ergebnis-marke { color: var(--cx-qc-rot); }
.cx-fw-ergebnis p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--cx-text-muted); }

/* -- Die drei Generationen ----------------------------------------------- */
.cx-fw-beispiel {
  margin: 6px 0 18px; padding: 12px 16px; border-radius: var(--cx-radius-sm);
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
  font-size: 15px; font-style: italic; color: var(--cx-text);
}
.cx-fw-stufen {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; margin: 18px 0;
}
.cx-fw-stufe { padding: 20px 22px; display: flex; flex-direction: column; }
.cx-fw-stufe.alt    { border-color: var(--cx-border); }
.cx-fw-stufe.mittel { border-color: rgba(229,168,59,.42); }
.cx-fw-stufe.neu    { border-color: rgba(95,208,138,.45); }
.cx-fw-stufe-kopf { margin-bottom: 12px; }
.cx-fw-stufe-kopf b { display: block; font-size: 16.5px; line-height: 1.3; }
.cx-fw-stufe-kopf span { font-size: 12.5px; color: var(--cx-text-muted); }
.cx-fw-sieht-kopf {
  display: block; margin-bottom: 6px; font-size: 11.5px; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 600; color: var(--cx-text-muted);
}
.cx-fw-sieht { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 5px; }
.cx-fw-sieht li {
  padding: 6px 11px; border-radius: 7px; font-size: 13px; line-height: 1.4;
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
  color: var(--cx-text-muted); overflow-wrap: anywhere;
}
.cx-fw-urteil { margin: 0 0 10px; font-size: 14.5px; font-weight: 500; }
.cx-fw-stufe.alt    .cx-fw-urteil { color: var(--cx-text-muted); }
.cx-fw-stufe.mittel .cx-fw-urteil { color: var(--cx-band3); }
.cx-fw-stufe.neu    .cx-fw-urteil { color: var(--cx-band4); }
.cx-fw-grenze {
  margin: auto 0 0; padding-top: 11px; border-top: 1px solid var(--cx-border);
  font-size: 13.5px; line-height: 1.55; color: var(--cx-text-muted);
}
.cx-fw-grenze b { color: var(--cx-text); }

/* -- Die fünf Zusatzfunktionen ------------------------------------------- */
.cx-fw-funktionen { display: grid; gap: 13px; margin: 18px 0; }
.cx-fw-funktion { padding: 18px 20px; }
.cx-fw-funktion-kopf { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.cx-fw-funktion-kopf b { font-size: 16.5px; }
.cx-fw-funktion-kopf span { font-size: 12.5px; color: var(--cx-band0); font-style: italic; }
.cx-fw-funktion p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--cx-text-muted); }
.cx-fw-preis {
  margin-top: 10px !important; padding-top: 10px;
  border-top: 1px solid var(--cx-border);
}
.cx-fw-preis b { color: var(--cx-band3); }

/* -- Zonen: die Reihenfolge ist die Aussage ------------------------------ */
.cx-fw-zonen { display: grid; gap: 9px; margin: 18px 0; }
.cx-fw-zone {
  padding: 14px 18px; border-radius: var(--cx-radius-sm);
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
  border-left: 4px solid var(--cx-border);
}
.cx-fw-zone.z0 { border-left-color: var(--cx-qc-rot); }
.cx-fw-zone.z1 { border-left-color: var(--cx-band3); }
.cx-fw-zone.z2 { border-left-color: var(--cx-band0); }
.cx-fw-zone.z3 { border-left-color: var(--cx-band4); }
.cx-fw-zone.z4 { border-left-color: var(--cx-band2); }
.cx-fw-zone.z5 { border-left-color: var(--cx-steel); }
.cx-fw-zone-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cx-fw-zone-kopf b { font-size: 15.5px; }
.cx-fw-vertrauen { font-size: 12.5px; color: var(--cx-text-muted); white-space: nowrap; }
.cx-fw-zone p { margin: 5px 0 0; font-size: 14px; line-height: 1.58; color: var(--cx-text-muted); }

/* -- Nord-Süd gegen Ost-West --------------------------------------------- */
.cx-fw-richtung { padding: 20px 22px; }
.cx-fw-richtung.ns { border-color: rgba(63,169,255,.42); }
.cx-fw-richtung.ow { border-color: rgba(224,106,106,.42); }
.cx-fw-richtung > b { font-size: 18px; }
.cx-fw-richtung.ns > b { color: var(--cx-band0); }
.cx-fw-richtung.ow > b { color: var(--cx-qc-rot); }
.cx-fw-richtung p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--cx-text-muted); }
.cx-fw-wer { color: var(--cx-text) !important; font-weight: 500; }
.cx-fw-anteil {
  display: inline-block; margin-top: 12px; padding: 4px 12px; border-radius: 99px;
  font-size: 12.5px; color: var(--cx-text-muted);
  background: var(--cx-carbon); border: 1px solid var(--cx-border);
}

/* -- Warum das wichtig ist ----------------------------------------------- */
.cx-fw-gruende { display: grid; gap: 13px; margin: 18px 0; }
.cx-fw-grund { padding: 18px 20px; }
.cx-fw-gewicht {
  display: inline-block; margin-bottom: 7px; padding: 3px 11px; border-radius: 99px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--cx-band0); background: var(--cx-carbon); border: 1px solid var(--cx-border);
}
.cx-fw-grund b { display: block; font-size: 16.5px; }
.cx-fw-grund p { margin: 7px 0 0; font-size: 14.5px; line-height: 1.62; color: var(--cx-text-muted); }
.cx-fw-ohne li > div > p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--cx-text-muted); }
.cx-fw-durchsicht { margin-top: 18px; }
.cx-fw-kauf .cx-card.warnung { border-color: rgba(229,168,59,.45); }

@media (max-width: 960px) {
  .cx-fw-stufen { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .cx-fw-demo { padding: 18px 15px; }
  .cx-fw-versuch { font-size: 14px; }
  .cx-fw-zone-kopf { flex-direction: column; gap: 3px; }
}