/* ------------------------------------------------------------------
   BitControl Networks, Entwurf der Website. Nur Dunkelmodus.
   Alle Werte hier sind Entwurf und stehen noch NICHT in tokens.json.

   Gerechnete Kontraste auf der Fläche #1D1B1A:
     Text stark #D3D0CE 11,18 · zurückhaltend #A7A4A1 6,92
     Blau hell #6AA4FF 6,84 · Grün hell #A6E36B 11,29
     Amber hell #FFC66B 11,06 · Violett hell #D6A5FA 8,68
     Fehler #FE573B 5,43 · Weiß auf Blau #026BEF 4,83
   ------------------------------------------------------------------ */

:root {
  color-scheme: dark;

  --w-1000: #11100F;
  --w-950:  #1D1B1A;
  --w-900:  #262422;
  --w-875:  #2A2826;
  --w-850:  #2F2D2C;
  --w-800:  #413F3D;
  --w-700:  #57544F;
  --w-600:  #7D7A76;
  --w-100:  #EAE7E5;
  --w-ink:  #141312;

  --f-flaeche: var(--w-950);
  --f-erhaben: var(--w-900);
  --f-kachel:  var(--w-875);
  --f-gesenkt: var(--w-1000);
  --linie:       var(--w-850);
  --linie-stark: var(--w-700);
  --ruhig:       var(--w-800);

  --t-hell:  var(--w-100);
  --t-stark: #D3D0CE;
  --t-leise: #A7A4A1;

  --blau:      #026BEF;
  --blau-tief: #0159C9;
  --gruen:     #75CB33;
  --amber:     #FEA91E;
  --violett:   #C063F6;

  --t-blau:    #6AA4FF;
  --t-gruen:   #A6E36B;
  --t-amber:   #FFC66B;
  --t-violett: #D6A5FA;
  --t-fehler:  #FE573B;

  --raster: 28px;
  --container: 72rem;
  --text-hero: clamp(2.75rem, 1.2rem + 6vw, 6rem);
}

.f-netz       { --b: var(--blau);    --b-schrift: #FFFFFF;      --b-text: var(--t-blau); }
.f-sicherheit { --b: var(--gruen);   --b-schrift: var(--w-ink); --b-text: var(--t-gruen); }
.f-ki         { --b: var(--amber);   --b-schrift: var(--w-ink); --b-text: var(--t-amber); }
.f-violett    { --b: var(--violett); --b-schrift: var(--w-ink); --b-text: var(--t-violett); }

/* ---------------- Grundlage ---------------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--f-flaeche); color: var(--t-stark); font-family: var(--bc-font-sans); font-size: var(--bc-text-fliesstext); line-height: var(--bc-lh-fliesstext); -webkit-font-smoothing: antialiased; overflow-x: clip; }
::selection { background: var(--blau); color: #FFFFFF; }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; font-family: var(--bc-font-display); color: var(--t-hell); letter-spacing: -.022em; }
h1 { font-size: clamp(2.5rem, 1.5rem + 3vw, 4rem); line-height: 1.04; font-weight: 700; }
h2 { font-size: clamp(1.875rem, 1.3rem + 1.6vw, 2.625rem); line-height: 1.08; font-weight: 700; }
h3 { font-size: 1.375rem; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; text-wrap: pretty; }
img, svg { display: block; }
:where(a, button, input, textarea, select, summary):focus-visible { outline: 2px solid var(--t-blau); outline-offset: 2px; border-radius: var(--bc-radius-sm); }
section { scroll-margin-top: 88px; }
/* Platz für die haftenden Leisten, sonst landet ein per Tabulator erreichtes
   Element darunter und der Fokusring ist unsichtbar (WCAG 2.4.11). */
html { scroll-padding-top: 150px; }
@media (max-width: 1023px) { html { scroll-padding-top: 96px; } }

.container { width: min(100% - 2 * var(--bc-space-6), var(--container)); margin-inline: auto; }
.text-spalte { max-width: 68ch; }
/* Hält Wörter mit Bindestrich zusammen, etwa „KI-Anwendung" */
.ganz { white-space: nowrap; }
.visuell-versteckt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Tabellen ignorieren eine Breite von 1px. Ohne diese Zeile stand die
   versteckte Vergleichstabelle auf ki.html 550 px breit im Dokument. */
table.visuell-versteckt { display: block; }
.skip { position: absolute; left: var(--bc-space-4); top: -100px; z-index: var(--bc-z-modal); background: var(--f-kachel); padding: var(--bc-space-2) var(--bc-space-4); border-radius: var(--bc-radius-sm); }
.skip:focus { top: var(--bc-space-4); }

/* ---------------- Kopf und Navigation ---------------- */
.kopf { position: sticky; top: 0; z-index: var(--bc-z-sticky); background: var(--f-flaeche); border-bottom: 1px solid transparent; transition: border-color var(--bc-duration-base) var(--bc-ease-standard); }
.kopf.gescrollt { border-bottom-color: var(--linie); }
.kopf .container { display: flex; align-items: center; gap: var(--bc-space-8); height: 80px; }
.kopf .logo img { height: 52px; width: auto; }
.kopf nav { margin-left: auto; }
.kopf nav ul { display: flex; gap: var(--bc-space-2); list-style: none; margin: 0; padding: 0; }
.kopf nav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--bc-space-3); text-decoration: none; color: var(--t-leise); font-size: var(--bc-text-sekundaer); font-weight: 500; transition: color var(--bc-duration-fast) var(--bc-ease-standard); }
.kopf nav a:hover { color: var(--t-hell); }
/* Aktuelle Seite über Farbe und Linie, nicht über Gewicht: fetter Text ist
   breiter und schiebt die Navigation beim Durchklicken hin und her */
.kopf nav a[aria-current="page"] { color: var(--t-hell); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; text-decoration-color: var(--t-blau); }
/* Sprachumschalter als geteilte Schaltfläche. Die aktive Sprache trägt eine
   Fläche, nicht nur eine Farbe: Farbe allein ist für Farbenblinde keine
   Information. Auf Fingergeräten wächst das Oval auf 44 px Höhe. */
.sprache { display: inline-flex; align-items: center; flex: none; padding: 2px; border-radius: var(--bc-radius-full); background: var(--f-erhaben); border: 1px solid var(--linie); font-size: var(--bc-text-label); font-weight: 600; line-height: 1; }
.sprache > span, .sprache > a { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 28px; padding-inline: var(--bc-space-2); border-radius: var(--bc-radius-full); color: var(--t-leise); white-space: nowrap; }
.sprache [aria-current="true"] { background: var(--ruhig); color: var(--t-hell); }
.sprache [aria-disabled="true"] { color: var(--t-leise); }
.sprache a { text-decoration: none; }
.sprache > a:hover { color: var(--t-hell); background: var(--f-flaeche); }
@media (pointer: coarse) {
  .sprache > span, .sprache > a { height: 40px; min-width: 44px; }
}

.nur-schmal { display: none; }
.menue-knopf { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 0; border-radius: var(--bc-radius-sm); color: var(--t-hell); cursor: pointer; }
.menue-knopf:hover { background: var(--f-erhaben); }
@media (max-width: 1023px) {
  .kopf .haupt, .kopf .kopf-aktion { display: none; }
  .menue-knopf { display: inline-flex; margin-left: auto; }
  /* Unter 560 px reicht die Breite nicht für Logo, Umschalter und Menü.
     Der Umschalter steht weiterhin im Fußbereich. */
  .kopf .sprache { order: 2; }
  .kopf.offen .haupt { display: block; position: absolute; left: 0; right: 0; top: 80px; background: var(--f-flaeche); border-bottom: 1px solid var(--linie); padding: var(--bc-space-4) 0 var(--bc-space-8); }
  .kopf.offen .haupt ul { flex-direction: column; gap: 0; width: min(100% - 2 * var(--bc-space-6), var(--container)); margin-inline: auto; }
  .kopf.offen .haupt a { min-height: 56px; font-size: 1.125rem; padding-inline: 0; border-bottom: 1px solid var(--linie); }
  .kopf.offen .haupt li:last-child a { border-bottom: 0; }
  .kopf.offen .haupt .nur-schmal { display: block; margin-top: var(--bc-space-6); }
  .kopf.offen .haupt a { display: flex; }
  .kopf.offen .haupt .nur-schmal a { border-bottom: 0; justify-content: center; padding-inline: var(--bc-space-6); color: #FFFFFF; }
}

/* ---------------- Schaltflächen ---------------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--bc-space-2); height: 48px; padding-inline: var(--bc-space-6); border-radius: var(--bc-radius-sm); font: 600 var(--bc-text-sekundaer)/1 var(--bc-font-sans); text-decoration: none; white-space: nowrap; border: 0; cursor: pointer; transition: background-color var(--bc-duration-fast) var(--bc-ease-standard), transform var(--bc-duration-fast) var(--bc-ease-standard); }
.knopf:active { transform: translateY(1px); }
.knopf-primaer { background: var(--blau); color: #FFFFFF; }
.knopf-primaer:hover { background: var(--blau-tief); }
.knopf-primaer[disabled] { background: var(--ruhig); color: var(--t-leise); cursor: default; }
.knopf-flaeche { background: rgba(234, 231, 229, .08); color: var(--t-hell); }
.knopf-flaeche:hover { background: rgba(234, 231, 229, .14); }
.knopf-dunkel { background: var(--w-ink); color: var(--t-hell); }
.knopf-dunkel:hover { background: var(--w-850); }
.knopf-klein { height: 40px; padding-inline: var(--bc-space-4); }
.textlink { display: inline-flex; align-items: center; gap: var(--bc-space-2); min-height: 44px; font-weight: 600; font-size: var(--bc-text-sekundaer); text-decoration: none; color: var(--t-hell); }
.textlink svg { color: var(--b-text, var(--t-blau)); transition: transform var(--bc-duration-fast) var(--bc-ease-standard); }
.textlink:hover svg { transform: translateX(3px); }
.marke { display: inline-block; background: var(--b); color: var(--b-schrift); font-weight: 600; font-size: var(--bc-text-sekundaer); line-height: 1; padding: 7px 10px 8px; border-radius: var(--bc-radius-xs); }

/* ---------------- Startseite: Hero ---------------- */
.hero { position: relative; isolation: isolate; padding-block: clamp(5rem, 16vh, 11rem) clamp(4rem, 12vh, 8rem); }
.hero.eigener-zeiger { cursor: none; }
.gitter, .gitter-nah { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.gitter {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='1.5' fill='%23E3E4F2' fill-opacity='.14'/%3E%3C/svg%3E");
  background-size: var(--raster) var(--raster);
  mask-image: linear-gradient(to bottom, #000 75%, transparent);
}
/* Lichtkegel am Zeiger. Die Masken sind fest und werden nie pro Mausbewegung
   neu erzeugt: Safari legt für jeden neuen Verlauf ein Bild in Flächengröße an
   und hält es Sekunden vor, das waren bei schneller Bewegung Gigabyte.
   Bewegt wird nur per transform. Die Schutzzonen um die Schaltflächen setzt
   seite.js als Maske auf .gitter-nah, nur beim Laden und bei Größenänderung. */
.gitter-nah { overflow: hidden; opacity: .42; }
.linse { position: absolute; left: 0; top: 0; width: 216px; height: 216px; overflow: hidden; opacity: 0;
  -webkit-mask-image: radial-gradient(circle 108px at center, #000 0%, rgba(0,0,0,.3) 42%, transparent 100%);
  mask-image: radial-gradient(circle 108px at center, #000 0%, rgba(0,0,0,.3) 42%, transparent 100%);
  transition: opacity var(--bc-duration-fast) var(--bc-ease-standard); }
.linse.an { opacity: 1; }
.linse i { position: absolute; left: 0; top: 0; width: calc(216px + var(--raster)); height: calc(216px + var(--raster));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Crect x='11' y='11' width='6' height='6' rx='1' fill='%236AA4FF'/%3E%3C/svg%3E");
  background-size: var(--raster) var(--raster); }
.rubrik { font-size: var(--bc-text-label); line-height: var(--bc-lh-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--t-leise); }
.hero .buehne { position: relative; }
.hero h1 { margin-top: var(--bc-space-6); font-size: var(--text-hero); line-height: 1.02; letter-spacing: -.028em; }
.hero h1 .blau { color: var(--t-blau); }
/* Tempostreifen vor dem letzten Wort, wie Bewegungslinien im Comic.
   Das Wort rueckt dafuer um die Breite der Streifen ein, links daneben
   ist kein Platz. Unter 1024 px entfallen sie, dort wird die Zeile zu eng. */
.hero h1 .tempo { position: relative; padding-left: 1.4em; }
/* Der unterste Streifen sitzt auf der Grundlinie, buendig mit dem Fuss des B.
   Instrument Sans hat 0.72 em Versalhoehe bei 0.9665 em Oberlaenge, die
   Oberkante des B liegt also 0.247 em unter der Oberkante der Zeile. Die drei
   Streifen fuellen davon nur 0.52 em, der Rest bleibt als Luft darueber. */
.hero h1 .tempo::before { content: ""; position: absolute; left: 0; top: .447em; width: 1.15em; height: .52em;
  transform-origin: right center; animation: tempo-ein .55s var(--bc-ease-standard) .35s both;
  background-image: linear-gradient(to right, transparent, var(--t-blau) 88%),
    linear-gradient(to right, transparent, var(--t-blau) 88%),
    linear-gradient(to right, transparent, var(--t-blau) 88%);
  background-repeat: no-repeat;
  background-size: 26% .05em, 58% .05em, 100% .05em;
  background-position: right top, right center, right bottom; }
/* Die Streifen fahren einmal hinter dem Wort hervor, als waere es losgefahren. */
@keyframes tempo-ein { from { transform: scaleX(.12); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@media (max-width: 1023px) { .hero h1 .tempo { padding-left: 0; } .hero h1 .tempo::before { display: none; } }
.hero .einleitung { margin-top: var(--bc-space-8); max-width: 50ch; color: var(--t-leise); font-size: 1.1875rem; line-height: 1.6; }
.hero .aktionen { margin-top: var(--bc-space-8); display: flex; flex-wrap: wrap; align-items: center; gap: var(--bc-space-6); }

.schilder { list-style: none; margin: 0; padding: 0; }
.schild { position: absolute; display: flex; align-items: flex-start; gap: 3px; animation: schweben 7s var(--bc-ease-standard) infinite alternate; }
.schild::before { content: ""; width: 10px; height: 10px; background: var(--b); margin-top: -8px; border-radius: 2px; }
.schild a { background: var(--b); color: var(--b-schrift); font-weight: 600; font-size: 1.125rem; line-height: 1; padding: 9px 14px 10px; border-radius: var(--bc-radius-sm); white-space: nowrap; text-decoration: none; }
.schild.s1 { left: 60%; top: -8px; }
.schild.s2 { left: 86%; top: 34%; animation-duration: 8.5s; animation-delay: -3s; }
/* KI mit rund 1 cm Luft zur Überschrift, nach unten und nach rechts */
.schild.s3 { left: calc(60% + 4.375rem); top: calc(104% + 0.875rem); animation-duration: 9.5s; animation-delay: -5s; }
/* Knapp über 1024 px rückt die Einleitung sonst bis auf 20 px heran */
@media (min-width: 1024px) and (max-width: 1151px) { .schild.s3 { left: 68%; } }
@keyframes schweben { from { transform: translate(0, 0); } to { transform: translate(6px, -8px); } }
@media (max-width: 1023px) {
  .schilder { display: flex; flex-wrap: wrap; gap: var(--bc-space-3); margin-block: var(--bc-space-6); }
  .schild { position: static; animation: none; }
  .schild::before { display: none; }
}

/* Mauszeiger im Hero: Rasterfeld mit blinkender Signatur */
.zeiger { position: fixed; left: 0; top: 0; z-index: var(--bc-z-toast); pointer-events: none; opacity: 0; will-change: transform; display: flex; align-items: flex-end; gap: 4px;
  transition: opacity var(--bc-duration-fast) var(--bc-ease-standard), transform var(--bc-duration-fast) var(--bc-ease-standard); }
.zeiger.an { opacity: 1; }
.zeiger .zelle { display: block; width: 20px; height: 20px; border-radius: 3px; background: var(--blau); }
.zeiger .strich { display: block; width: 11px; height: 3px; border-radius: 1px; background: var(--bc-signal); animation: bc-blink var(--bc-cursor-blink) steps(1, end) infinite; }
@media (prefers-reduced-motion: reduce) { .zeiger .strich, .schild, .hero h1 .tempo::before { animation: none; } }

/* ---------------- Seitenleiste ---------------- */
.leiste { position: fixed; left: var(--bc-space-6); top: 50%; transform: translateY(-50%); z-index: var(--bc-z-sticky); display: none;
  transition: opacity var(--bc-duration-base) var(--bc-ease-standard), visibility 0s; }
/* Unterhalb des letzten Bereichs hat die Leiste nichts mehr anzuzeigen.
   visibility erst nach dem Ausblenden, damit die Punkte nicht per Tab erreichbar bleiben. */
.leiste.weg { opacity: 0; visibility: hidden; transition: opacity var(--bc-duration-base) var(--bc-ease-standard), visibility 0s var(--bc-duration-base); }
.leiste ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--bc-space-1); }
.leiste a { display: grid; place-items: center; width: 24px; height: 28px; }
.leiste a span { display: block; width: 8px; height: 8px; border-radius: 2px; background: var(--ruhig); transition: transform var(--bc-duration-base) var(--bc-ease-standard), background-color var(--bc-duration-base) var(--bc-ease-standard); }
.leiste a[aria-current="true"] span { background: var(--b, var(--t-hell)); transform: scaleY(2.5); }
@media (min-width: 1280px) { .leiste { display: block; } }

/* ---------------- Bereiche mit Motiv ---------------- */
.bereich { padding-block: clamp(4rem, 11vh, 7.5rem); scroll-margin-top: 80px; }
.bereich + .bereich { border-top: 1px solid var(--linie); }
.bereich .container { display: grid; gap: var(--bc-space-12); align-items: center; }
@media (min-width: 1024px) {
  .bereich .container { grid-template-columns: 1fr auto; gap: var(--bc-space-16); }
  .bereich.gespiegelt .container { grid-template-columns: auto 1fr; }
  .bereich.gespiegelt .text { order: 2; }
}
.bereich h2 { margin-top: var(--bc-space-6); font-size: clamp(2.125rem, 1.3rem + 2.2vw, 3.25rem); line-height: 1.05; }
/* Der farbige Teil beginnt eine eigene Zeile. Sonst steht der Umbruch
   zufällig mitten im farbigen Satz, je nach Fensterbreite. */
.bereich h2 .farbe { display: block; color: var(--b-text); }
.bereich p { margin-top: var(--bc-space-6); color: var(--t-leise); max-width: 44ch; }
.stichworte { list-style: none; padding: 0; margin: var(--bc-space-8) 0 0; display: flex; flex-wrap: wrap; gap: var(--bc-space-2); }
.stichworte li { font-size: var(--bc-text-label); line-height: var(--bc-lh-label); padding: 6px var(--bc-space-3); border-radius: var(--bc-radius-xs); background: var(--f-erhaben); color: var(--t-stark); }
.bereich .textlink { margin-top: var(--bc-space-6); }

.tafel { background: var(--f-gesenkt); border-radius: var(--bc-radius-lg); padding: var(--raster); width: fit-content; max-width: 100%; }
/* content-visibility: Der Browser überspringt Layout und Zeichnen, solange
   der Block außerhalb des Bildes liegt. Das Platzhaltermaß setzt seite.js,
   weil es von Spalten und Zeilen abhängt. */
.motiv { display: grid; gap: 8px; grid-template-columns: repeat(var(--sp), 20px); content-visibility: auto; }
.motiv i { position: relative; width: 20px; aspect-ratio: 1; }
.motiv i b, .motiv i s { position: absolute; inset: 0; border-radius: 3px; }  /* bewusst ohne will-change: bei rund 1.000 Zellen je eine Grafikebene */
.motiv i b { background: var(--ruhig); }
.motiv i s { background: var(--b); transform: scale(.3); opacity: 0; }
.motiv i.hell s { background: var(--t-hell); }
.motiv i.aus b, .motiv i.aus s { visibility: hidden; }
.motiv.ruhig i s, .motiv.ruhig i b { transition: opacity 1100ms var(--bc-ease-standard), transform 1100ms var(--bc-ease-standard); }
.motiv i.signal s { background: var(--bc-signal); }

/* Vollbreite Fläche mit dem Verbund-Motiv (Über uns). Die Spaltenzahl
   rechnet seite.js aus der Breite; overflow fängt spätere Verkleinerung ab. */
.band { background: var(--f-gesenkt); border-top: 1px solid var(--linie); padding: var(--bc-space-12) var(--bc-space-6); display: flex; justify-content: center; overflow: hidden; }
/* Flache Fassung fuer den Abschluss einer Seite, mit weniger Zeilen im Motiv */
.band-flach { padding-block: var(--bc-space-8); }
.band .motiv { flex: none; }
.tafel.klein .motiv { gap: 7px; grid-template-columns: repeat(var(--sp), 18px); }
.tafel.klein .motiv i { width: 18px; }
.tafel.klein { padding: var(--bc-space-6); }
@media (max-width: 559px) {
  .motiv, .tafel.klein .motiv { gap: 5px; grid-template-columns: repeat(var(--sp), 13px); }
  .motiv i, .tafel.klein .motiv i { width: 13px; }
  .tafel, .tafel.klein { padding: var(--bc-space-4); }
}
/* Unter 400 px passen 15 Zellen zu 13 px nicht mehr in die Spalte. Sie machten
   die Seite 321 px breit und damit seitwärts verschiebbar. */
@media (max-width: 400px) {
  .motiv, .tafel.klein .motiv { gap: 4px; grid-template-columns: repeat(var(--sp), 11px); }
  .motiv i, .tafel.klein .motiv i { width: 11px; }
  .tafel, .tafel.klein { padding: var(--bc-space-3); }
}

/* Grafik mit eigenem Lauf: Knopf zum Anhalten darunter, rechtsbündig. */
.tafel-gruppe { display: grid; gap: var(--bc-space-3); justify-items: end; }
.motiv-pause { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: rgba(234, 231, 229, .06); border: 0; border-radius: var(--bc-radius-sm); color: var(--t-leise); cursor: pointer; transition: background-color var(--bc-duration-fast) var(--bc-ease-standard), color var(--bc-duration-fast) var(--bc-ease-standard); }
@media (hover: hover) { .motiv-pause:hover { background: rgba(234, 231, 229, .12); color: var(--t-hell); } }
.motiv-pause .zeichen-weiter, .motiv-pause[aria-pressed="true"] .zeichen-pause { display: none; }
.motiv-pause[aria-pressed="true"] .zeichen-weiter { display: block; }

/* ---------------- Verband: Rechteckfeld mit wandernder Farbe ---------------- */
.verband { position: relative; overflow: hidden; isolation: isolate; background:
  radial-gradient(55% 90% at 14% 110%, rgba(192, 99, 246, .16), transparent 70%),
  radial-gradient(45% 70% at 92% -10%, rgba(2, 107, 239, .14), transparent 70%),
  var(--f-gesenkt); }
.verband-feld { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.verband .container { min-height: clamp(26rem, 54vh, 36rem); display: grid; align-items: center; padding-block: var(--bc-space-16); }
@media (min-width: 1024px) { .verband .container { grid-template-columns: minmax(0, 26rem) 1px auto; gap: var(--bc-space-12); justify-content: start; } }
.verband h2 { font-size: clamp(2.25rem, 1.3rem + 2.6vw, 3.5rem); line-height: 1.04; letter-spacing: -.024em; }
.verband p { margin-top: var(--bc-space-4); color: var(--t-stark); max-width: 36ch; }
.verband .knopf { margin-top: var(--bc-space-8); }
.verband .trenner { align-self: stretch; margin-block: var(--bc-space-12); background: var(--linie-stark); display: none; }
.verband .marke-gross img { height: 72px; width: auto; }
.verband .marke-gross { display: none; }
@media (min-width: 1024px) { .verband .trenner, .verband .marke-gross { display: block; } }

/* ---------------- Kacheln ---------------- */
.system { padding-block: clamp(5rem, 14vh, 9rem); }
.system .kopfzeile { text-align: center; max-width: 40rem; margin: 0 auto var(--bc-space-12); }
.system .kopfzeile p { margin-top: var(--bc-space-4); color: var(--t-leise); }
.kacheln { display: grid; gap: var(--bc-space-4); }
@media (min-width: 900px) {
  .kacheln { grid-template-columns: 1fr 1.3fr 1fr; grid-template-areas: "a b c" "a z c" "d e f"; }
  .k-a { grid-area: a; } .k-b { grid-area: b; } .k-c { grid-area: c; } .k-z { grid-area: z; } .k-d { grid-area: d; } .k-e { grid-area: e; } .k-f { grid-area: f; }
}
.kachel { background: var(--f-kachel); border-radius: var(--bc-radius-lg); padding: var(--bc-space-6); overflow: hidden; display: flex; flex-direction: column; gap: var(--bc-space-6); }
.kachel h3 { display: flex; align-items: center; gap: var(--bc-space-3); }
.symbol { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--c); color: var(--c-schrift, var(--w-ink)); }
.c-blau { --c: var(--blau); --c-schrift: #FFFFFF; }
.c-gruen { --c: var(--gruen); }
.c-amber { --c: var(--amber); }
.c-violett { --c: var(--violett); }

/* Überwachung: Statuszeilen über 30 Tage, die Streifen zeichnet seite.js */
.kachel-notiz { font-size: var(--bc-text-label); color: var(--t-leise); margin-top: calc(-1 * var(--bc-space-3)); }
.status { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bc-space-4); font-size: var(--bc-text-sekundaer); }
.k-a .status { flex: 1; align-content: space-evenly; }
.status-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--bc-space-2); margin-bottom: 6px; }
.status-kopf span { color: var(--t-stark); }
.status-kopf em { font-style: normal; font-size: var(--bc-text-label); color: var(--t-leise); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.status-kopf em i, .last i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.kachel-notiz.status-kopf { margin-bottom: 0; }
.streifen { display: grid; grid-template-columns: repeat(30, 1fr); gap: 2px; height: 22px; }
.streifen i { border-radius: 2px; background: var(--gruen); opacity: .5; }
.streifen i.gelb { background: var(--amber); opacity: 1; }
.streifen i.blau { background: var(--blau); opacity: 1; }
.streifen-achse { display: flex; justify-content: space-between; font-size: var(--bc-text-label); color: var(--t-leise); margin-top: calc(-1 * var(--bc-space-3)); }

/* Netzplan */
.plan { width: 100%; height: auto; display: block; overflow: visible; }
/* Breit beginnt der Plan auf Höhe des Kachel-Titels, die Wolke steht rechts daneben */
@media (min-width: 900px) { .k-b .plan { margin-top: calc(-40px - var(--bc-space-6)); } }
.plan .leitung { fill: none; stroke: var(--w-700); stroke-width: 1.5; }
.plan .leitung.vpn { stroke: var(--amber); stroke-dasharray: 4 4; }
.plan .knoten rect { fill: var(--f-erhaben); stroke: var(--linie-stark); stroke-width: 1; }
.plan text { font-size: 12.5px; fill: var(--t-stark); text-anchor: middle; font-family: var(--bc-font-text, inherit); }
.plan .leitung-text { font-size: 10px; fill: var(--amber); text-anchor: start; font-family: var(--bc-font-mono, monospace); }
.plan circle { fill: var(--c); }
/* Wolke: erst die Formen mit Rand, darüber dieselben Formen ohne Rand. So bleibt nur die Außenkontur sichtbar. */
.plan .wolke-rand > * { fill: var(--linie-stark); stroke: var(--linie-stark); stroke-width: 1.6; }
.plan .wolke-flaeche > * { fill: var(--f-erhaben); }

/* Automatisierung */
.zahlen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bc-space-5, 1.25rem); }
.k-c .zahlen { flex: 1; align-content: space-evenly; }
.zahlen li { display: grid; gap: 2px; padding-left: var(--bc-space-4); border-left: 3px solid var(--violett); }
.zahlen strong { font-family: var(--bc-font-display); font-size: clamp(1.75rem, 1.3rem + 1vw, 2.25rem); line-height: 1.05; letter-spacing: -.02em; color: var(--t-hell); font-variant-numeric: tabular-nums; }
.zahlen span { font-size: var(--bc-text-sekundaer); color: var(--t-leise); }

.k-z { position: relative; background: var(--blau); display: grid; place-items: center; min-height: 11rem; text-align: center; }
.k-z::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='1.5' fill='%23FFFFFF' fill-opacity='.28'/%3E%3C/svg%3E"); background-size: var(--raster) var(--raster); }
.k-z p { position: relative; color: #FFFFFF; font-family: var(--bc-font-display); font-weight: 700; font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1.08; letter-spacing: -.02em; }
.k-z .ecke { position: absolute; width: 14px; height: 14px; }
.k-z .ecke::before, .k-z .ecke::after { content: ""; position: absolute; background: rgba(255, 255, 255, .8); }
.k-z .ecke::before { left: 6px; top: 0; width: 2px; height: 14px; }
.k-z .ecke::after { top: 6px; left: 0; height: 2px; width: 14px; }
.k-z .e1 { left: 18px; top: 18px; } .k-z .e2 { right: 18px; top: 18px; } .k-z .e3 { left: 18px; bottom: 18px; } .k-z .e4 { right: 18px; bottom: 18px; }

/* Zugriff: Einträge bleiben einzeilig, damit die Reihe beim Wechsel nicht springt */
.protokoll { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bc-space-2); align-content: start; font-size: var(--bc-text-sekundaer); }
.protokoll li { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: var(--bc-radius-full); background: var(--f-erhaben); justify-self: start; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 640ms var(--bc-ease-standard); }
.protokoll li.weg { opacity: 0; }
.protokoll i { width: 12px; height: 12px; border-radius: 3px; background: var(--c); flex: none; }

/* Rechenzentrum: Auslastung der Uplinks je Rack, schwankt leicht über seite.js */
.last { display: grid; gap: var(--bc-space-2); font-size: var(--bc-text-sekundaer); }
.last div { display: grid; grid-template-columns: auto 1fr 3.2em; align-items: center; gap: var(--bc-space-3); padding: 10px var(--bc-space-3); border-radius: var(--bc-radius-sm); background: var(--f-erhaben); }
.last b { height: 6px; border-radius: 3px; background: var(--ruhig); overflow: hidden; }
.last s { display: block; height: 100%; border-radius: 3px; background: var(--c); transition: width 1.2s var(--bc-ease-standard); }
.last em { font-style: normal; text-align: right; color: var(--t-stark); font-variant-numeric: tabular-nums; }

/* Auswertung: Verkehr über 24 Stunden, die Balken zeichnet seite.js */
.stunden { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; align-items: end; height: 4.5rem; margin-top: var(--bc-space-3); }
.stunden i { border-radius: 2px 2px 0 0; background: var(--violett); opacity: .75; }
.stunden i.gelb { background: var(--amber); opacity: 1; }
.stunden-achse { display: flex; justify-content: space-between; font-size: var(--bc-text-label); color: var(--t-leise); margin-top: 6px; }

/* ---------------- Abschlussblock ---------------- */
.signal { background: var(--blau); color: #FFFFFF; position: relative; overflow: hidden; }
/* Signalbalken am unteren Rand, gezeichnet von seite.js.
   Die Farbe steht hier als color, seite.js liest sie aus. */
.signal-balken { position: absolute; left: 0; bottom: 0; width: 100%; height: 180px; pointer-events: none; color: #FFFFFF; }
.signal .container { position: relative; }
.signal h2 { color: inherit; font-size: clamp(2.125rem, 1.3rem + 2.2vw, 3.25rem); line-height: 1.05; }
.signal .container { padding-block: clamp(3rem, 9vh, 6.5rem); display: grid; gap: var(--bc-space-8); align-items: end; }
@media (min-width: 1024px) { .signal .container { grid-template-columns: 1fr auto; } }
.signal p { margin-top: var(--bc-space-4); max-width: 46ch; }
.signal :focus-visible { outline-color: #FFFFFF; }

/* ---------------- Unterseiten ---------------- */
.krumen { padding-top: var(--bc-space-8); font-size: var(--bc-text-sekundaer); color: var(--t-leise); }
.krumen ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--bc-space-2); margin: 0; padding: 0; }
.krumen a { text-decoration: none; }
.krumen a:hover { color: var(--t-hell); }
.krumen li + li::before { content: "/"; margin-right: var(--bc-space-2); color: var(--linie-stark); }
.krumen [aria-current="page"] { color: var(--t-stark); }

.seitenkopf { padding-block: var(--bc-space-12) clamp(3rem, 8vh, 5rem); }
.seitenkopf .container { display: grid; gap: var(--bc-space-12); align-items: center; }
@media (min-width: 1024px) { .seitenkopf .container { grid-template-columns: 1fr auto; gap: var(--bc-space-16); } }
.seitenkopf h1 { margin-top: var(--bc-space-6); }
.seitenkopf h1 .farbe { color: var(--b-text); }
.seitenkopf .einleitung { margin-top: var(--bc-space-6); font-size: 1.1875rem; line-height: 1.6; color: var(--t-leise); max-width: 46ch; }
.seitenkopf .aktionen { margin-top: var(--bc-space-8); display: flex; flex-wrap: wrap; gap: var(--bc-space-6); align-items: center; }

.abschnitt { padding-block: clamp(3rem, 8vh, 5.5rem); border-top: 1px solid var(--linie); }
.abschnitt > .container > h2 + p { margin-top: var(--bc-space-4); color: var(--t-leise); max-width: 60ch; }

.leistungsliste { list-style: none; margin: var(--bc-space-12) 0 0; padding: 0; display: grid; gap: var(--bc-space-12); }
@media (min-width: 768px) { .leistungsliste { grid-template-columns: repeat(2, 1fr); gap: var(--bc-space-12) var(--bc-space-16); } }
/* Drei Karten nebeneinander statt einer Lücke im Zweierraster (Ehrenamt, Über uns) */
@media (min-width: 900px) { .leistungsliste.drei { grid-template-columns: repeat(3, 1fr); } }
.leistungsliste h3 { display: flex; align-items: baseline; gap: var(--bc-space-3); }
.leistungsliste h3::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--b); flex: none; }
.leistungsliste p { margin-top: var(--bc-space-3); color: var(--t-leise); max-width: 46ch; }

.tabelle-huelle { overflow-x: auto; margin-top: var(--bc-space-8); }
table { width: 100%; border-collapse: collapse; font-size: var(--bc-text-sekundaer); }
caption { text-align: left; color: var(--t-leise); font-size: var(--bc-text-sekundaer); margin-bottom: var(--bc-space-4); }
th, td { text-align: left; padding: var(--bc-space-4); border-bottom: 1px solid var(--linie); vertical-align: top; }
thead th { font-size: var(--bc-text-label); letter-spacing: .06em; text-transform: uppercase; color: var(--t-leise); font-weight: 600; }
tbody th { font-weight: 600; color: var(--t-hell); }
td .wir { color: var(--t-blau); font-weight: 600; }
/* Vertragsformen: Spaltenköpfe sind Namen, keine Etiketten */
table.modelle { min-width: 44rem; }
table.modelle thead th { font-size: 1.0625rem; letter-spacing: -.01em; text-transform: none; color: var(--t-hell); width: 26%; }
table.modelle tbody th { width: 22%; }
table.modelle td { color: var(--t-stark); }
td .leer { color: var(--t-leise); }
/* Doppelte Klasse, sonst gewinnt die später stehende .kartenraster-Regel */
.kartenraster.modelle-schmal { display: none; }
.modelle-schmal .leer { color: var(--t-leise); }
@media (max-width: 767px) {
  .tabelle-huelle.modelle-breit { display: none; }
  .kartenraster.modelle-schmal { display: grid; }
}
td .sie { color: var(--t-leise); }

.ablauf { list-style: none; counter-reset: schritt; margin: var(--bc-space-8) 0 0; padding: 0; display: grid; gap: var(--bc-space-6); }
@media (min-width: 900px) { .ablauf { grid-template-columns: repeat(4, 1fr); } }
.ablauf li { counter-increment: schritt; background: var(--f-kachel); border-radius: var(--bc-radius-md); padding: var(--bc-space-6); }
.ablauf li::before { content: counter(schritt, decimal-leading-zero); display: block; font-weight: 700; color: var(--b-text); margin-bottom: var(--bc-space-3); }
.ablauf strong { display: block; color: var(--t-hell); font-weight: 600; }
.ablauf p { margin-top: var(--bc-space-2); color: var(--t-leise); font-size: var(--bc-text-sekundaer); }

details { border-bottom: 1px solid var(--linie); }
details summary { list-style: none; cursor: pointer; padding-block: var(--bc-space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--bc-space-4); font-weight: 600; color: var(--t-hell); min-height: 44px; }
details summary::-webkit-details-marker { display: none; }
details summary svg { flex: none; color: var(--t-leise); transition: transform var(--bc-duration-base) var(--bc-ease-standard); }
details[open] summary svg { transform: rotate(45deg); }
details .antwort { padding-bottom: var(--bc-space-6); color: var(--t-leise); max-width: 62ch; }

/* Ausgangslagen: breite Zeilen statt Kachelraster, damit sie sich vom
   Abschnitt "Was wir uebernehmen" darueber sichtbar unterscheiden. */
.lagen { list-style: none; margin: var(--bc-space-12) 0 0; padding: 0; }
.lagen > li { display: grid; gap: var(--bc-space-4); padding-block: var(--bc-space-8); border-top: 1px solid var(--linie); }
.lagen > li:last-child { border-bottom: 1px solid var(--linie); }
.lagen h3 { display: flex; align-items: baseline; gap: var(--bc-space-3); }
.lagen h3::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--b); flex: none; }
.lagen p { color: var(--t-leise); max-width: 52ch; }
.lagen .stichworte { margin-top: var(--bc-space-4); }
@media (min-width: 900px) { .lagen > li { grid-template-columns: 17rem 1fr; gap: var(--bc-space-12); align-items: start; } }
.partner { margin-top: var(--bc-space-12); background: var(--f-kachel); border-radius: var(--bc-radius-lg); padding: clamp(var(--bc-space-6), 3vw, var(--bc-space-12)); display: grid; gap: var(--bc-space-6); align-items: center; }
@media (min-width: 900px) { .partner { grid-template-columns: auto 1fr; gap: var(--bc-space-12); } }
.partner .zeichen { width: 56px; height: 56px; border-radius: var(--bc-radius-md); background: var(--b); color: var(--b-schrift); display: grid; place-items: center; }
.partner h2 { font-size: 1.375rem; line-height: 1.25; font-weight: 600; }
.partner p { margin-top: var(--bc-space-3); color: var(--t-leise); max-width: 62ch; }
.partner:has(.pruefliste) { align-items: start; }
.pruefliste { list-style: none; margin: var(--bc-space-6) 0 0; padding: 0; display: grid; gap: var(--bc-space-3); }
.pruefliste li { display: flex; gap: var(--bc-space-3); color: var(--t-stark); }
.pruefliste li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .6em; border-radius: 2px; background: var(--b); }

/* ---------------- Unternehmen und Rechtliches ---------------- */
.platzhalter { font-family: var(--bc-font-mono); font-size: .875em; color: var(--t-amber); background: var(--f-erhaben); padding: 1px 6px; border-radius: var(--bc-radius-xs); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hinweisleiste { display: flex; gap: var(--bc-space-3); align-items: flex-start; background: var(--f-erhaben); border-left: 3px solid var(--amber); border-radius: var(--bc-radius-sm); padding: var(--bc-space-4); color: var(--t-stark); font-size: var(--bc-text-sekundaer); max-width: 68ch; }
.hinweisleiste svg { flex: none; color: var(--t-amber); margin-top: 3px; }

.rechtstext { max-width: 68ch; }
.rechtstext h2 { font-size: 1.375rem; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; margin-top: var(--bc-space-12); }
.rechtstext > h2:first-child { margin-top: 0; }
.rechtstext h3 { font-size: 1.0625rem; margin-top: var(--bc-space-8); }
.rechtstext p, .rechtstext ul, .rechtstext address { margin-top: var(--bc-space-4); color: var(--t-leise); }
.rechtstext address { font-style: normal; line-height: 1.7; }
.rechtstext ul { padding-left: var(--bc-space-6); display: grid; gap: var(--bc-space-2); }
.rechtstext strong { color: var(--t-stark); font-weight: 600; }
.rechtstext a { color: var(--t-blau); text-underline-offset: 3px; }
.rechtstext .stand { margin-top: var(--bc-space-12); font-size: var(--bc-text-sekundaer); }

.querverweise { list-style: none; margin: var(--bc-space-8) 0 0; padding: 0; display: grid; gap: var(--bc-space-4); }
@media (min-width: 768px) { .querverweise { grid-template-columns: repeat(2, 1fr); } }
.querverweise a { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--bc-space-4) var(--bc-space-6); height: 100%; background: var(--f-kachel); border-radius: var(--bc-radius-lg); padding: var(--bc-space-6); text-decoration: none; transition: background-color var(--bc-duration-fast) var(--bc-ease-standard); }
.querverweise .marke { grid-column: 1 / -1; justify-self: start; }
.querverweise strong { color: var(--t-hell); font-family: var(--bc-font-display); font-size: 1.375rem; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
.querverweise svg { color: var(--b-text); transition: transform var(--bc-duration-fast) var(--bc-ease-standard); }
@media (hover: hover) {
  .querverweise a:hover { background: var(--f-erhaben); }
  .querverweise a:hover svg { transform: translateX(3px); }
}

.verzeichnis { margin-top: var(--bc-space-12); max-width: 68ch; }
.verzeichnis:first-child { margin-top: 0; }
.verzeichnis h2 { font-size: var(--bc-text-label); letter-spacing: .08em; text-transform: uppercase; color: var(--t-leise); font-weight: 600; }
.verzeichnis ol { list-style: none; margin: var(--bc-space-3) 0 0; padding: 0; }
.verzeichnis a { display: flex; align-items: center; min-height: 40px; color: var(--t-blau); text-underline-offset: 3px; }
.rechtstext.agb { margin-top: var(--bc-space-12); padding-top: var(--bc-space-12); border-top: 1px solid var(--linie); }
.rechtstext .tabelle-huelle { margin-top: var(--bc-space-6); }
.rechtstext [id] { scroll-margin-top: 104px; }

.kartenraster { list-style: none; margin: var(--bc-space-12) 0 0; padding: 0; display: grid; gap: var(--bc-space-4); }
@media (min-width: 900px) { .kartenraster { grid-template-columns: repeat(3, 1fr); } .kartenraster.zwei { grid-template-columns: repeat(2, 1fr); } }
.kartenraster .karte { align-content: start; gap: var(--bc-space-4); }
.kartenraster .karte h3 { font-size: 1.1875rem; }
.kartenraster .karte p { color: var(--t-leise); font-size: var(--bc-text-sekundaer); }
.kartenraster .karte .marke { justify-self: start; }
.marken { display: flex; flex-wrap: wrap; gap: var(--bc-space-2); }
.kartenraster .karte .stichworte { margin-top: 0; }
.kartenraster .karte .textlink { margin-top: auto; }
.bild-platz { aspect-ratio: 4 / 3; border-radius: var(--bc-radius-md); background: var(--f-gesenkt); display: grid; place-items: center; color: var(--t-leise); }
.eckdaten { margin: 0; display: grid; gap: var(--bc-space-3); font-size: var(--bc-text-sekundaer); }
.eckdaten dt { font-size: var(--bc-text-label); letter-spacing: .06em; text-transform: uppercase; color: var(--t-leise); }
.karte .eckdaten dd { margin: var(--bc-space-1) 0 0; color: var(--t-stark); }

/* ---------------- Kontakt und Formular ---------------- */
.kontakt { background: var(--f-gesenkt); border-top: 1px solid var(--linie); padding-block: clamp(3.5rem, 9vh, 6rem); position: relative; }
/* Versprengte Kaestchen brechen die Kante zwischen den beiden Flaechen auf.
   --x ist die Position in Prozent, --y die Zeile ab der Kante: 0 sitzt mittig
   darauf, negative Werte liegen darueber, positive darunter. */
/* Traeger einer Naht muss positioniert sein. .kontakt bringt das selbst mit,
   ein gewoehnlicher Abschnitt nicht. */
.naht-traeger { position: relative; }
.naht { position: absolute; left: 0; right: 0; top: 0; height: 0; pointer-events: none; }
.naht i { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 22px - 7px); width: 14px; height: 14px; border-radius: 3px; background: var(--ton); }
.kontakt .container { display: grid; gap: var(--bc-space-12); }
.kontakt .daten { display: grid; gap: var(--bc-space-4); align-content: start; }
/* Beide Spalten gleich hoch: Formular und Kartenspalte enden bündig */
@media (min-width: 1024px) {
  .kontakt .container { grid-template-columns: 7fr 5fr; gap: var(--bc-space-12); align-items: stretch; }
  .kontakt .container > div:first-child { display: flex; flex-direction: column; }
  .kontakt form { flex: 1; }
}
.karte { background: var(--f-kachel); border-radius: var(--bc-radius-lg); padding: var(--bc-space-6); display: grid; gap: var(--bc-space-6); }
.karte h2 { font-size: 1.375rem; line-height: 1.25; font-weight: 600; }
.karte dl { margin: 0; display: grid; gap: var(--bc-space-5); }
.karte dt { display: flex; align-items: center; gap: var(--bc-space-3); font-size: var(--bc-text-label); letter-spacing: .06em; text-transform: uppercase; color: var(--t-leise); }
.karte dt .zeichen { width: 28px; height: 28px; border-radius: var(--bc-radius-xs); display: grid; place-items: center; background: var(--c); color: var(--c-schrift, var(--w-ink)); flex: none; }
.karte dd { margin: var(--bc-space-2) 0 0 40px; color: var(--t-stark); }
.karte dd a { text-decoration: none; font-weight: 600; color: var(--t-hell); }
.karte dd a:hover { text-decoration: underline; text-underline-offset: 3px; }
.folge { list-style: none; counter-reset: folge; margin: 0; padding: 0; display: grid; gap: var(--bc-space-3); }
.folge li { counter-increment: folge; display: flex; align-items: baseline; gap: var(--bc-space-3); color: var(--t-stark); }
.folge li::before { content: counter(folge); width: 28px; height: 28px; flex: none; border-radius: var(--bc-radius-xs); display: grid; place-items: center; background: var(--f-erhaben); color: var(--b-text); font-weight: 700; font-size: var(--bc-text-label); }
.karte.stoerung { background: var(--f-erhaben); border-left: 3px solid var(--amber); }
.karte.stoerung h2 { display: flex; align-items: center; gap: var(--bc-space-3); }
.karte.stoerung p { color: var(--t-leise); }

form { background: var(--f-flaeche); border: 1px solid var(--linie); border-radius: var(--bc-radius-lg); padding: clamp(var(--bc-space-6), 3vw, var(--bc-space-12)); }
.paare { display: grid; gap: var(--bc-space-6); }
@media (min-width: 640px) { .paare.zwei { grid-template-columns: 1fr 1fr; } }
/* align-content: start, sonst verteilt ein Feld die Höhe seines Nachbarn
   (etwa dessen Hinweistext) auf Beschriftung und Eingabe und wird größer */
.feld { display: grid; gap: var(--bc-space-2); align-content: start; }
.kontakt form { scroll-margin-top: 104px; }
.feld label { font-weight: 600; font-size: var(--bc-text-sekundaer); color: var(--t-hell); }
.feld .hinweis-text { font-size: var(--bc-text-label); color: var(--t-leise); }
/* Rand mindestens 3:1 gegen Feldfläche und Umgebung (WCAG 1.4.11).
   --linie-stark (#57544F) erreichte nur 2,05:1. */
.feld input, .feld textarea { font: 400 var(--bc-text-fliesstext)/1.5 var(--bc-font-sans); color: var(--t-stark); background: var(--f-erhaben); border: 1px solid var(--w-600); border-radius: var(--bc-radius-sm); padding: 11px var(--bc-space-4); min-height: 48px; width: 100%; }
.feld textarea { min-height: 9rem; resize: vertical; }
.feld input::placeholder, .feld textarea::placeholder { color: var(--t-leise); opacity: .8; }
.feld input:hover, .feld textarea:hover { border-color: var(--t-leise); }
/* Zweite Linie als Schatten, ein 2-px-Rand würde das Feld höher machen */
.feld [aria-invalid="true"] { border-color: var(--t-fehler); box-shadow: inset 0 0 0 1px var(--t-fehler); }
.fehler { display: none; align-items: center; gap: var(--bc-space-2); font-size: var(--bc-text-sekundaer); color: var(--t-fehler); }
.feld.falsch .fehler { display: flex; }
.pflicht { color: var(--t-leise); font-weight: 400; }

/* Honigtopf: aus dem Blickfeld und aus der Tastaturreihenfolge, aber nicht
   display:none. Manche Bots füllen nur sichtbare Felder aus. */
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.datenschutz-hinweis { margin-top: var(--bc-space-6); font-size: var(--bc-text-sekundaer); color: var(--t-leise); }
.datenschutz-hinweis a { color: var(--t-blau); text-underline-offset: 3px; }

.absenden { margin-top: var(--bc-space-8); display: flex; flex-wrap: wrap; align-items: center; gap: var(--bc-space-4); }
.absenden .anmerkung { font-size: var(--bc-text-label); color: var(--t-leise); }
.lader { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #FFFFFF; animation: dreh 700ms linear infinite; display: none; }
.knopf[data-laedt="true"] .lader { display: block; }
@keyframes dreh { to { transform: rotate(360deg); } }
.erfolg { display: none; gap: var(--bc-space-4); align-items: flex-start; background: var(--f-kachel); border-radius: var(--bc-radius-md); padding: var(--bc-space-6); }
.erfolg.da { display: flex; }
.erfolg .zeichen { width: 28px; height: 28px; border-radius: var(--bc-radius-xs); background: var(--gruen); color: var(--w-ink); display: grid; place-items: center; flex: none; }
.erfolg strong { display: block; color: var(--t-hell); }
.erfolg p { margin-top: var(--bc-space-2); color: var(--t-leise); font-size: var(--bc-text-sekundaer); }

/* ---------------- Fußbereich ---------------- */
.fuss { background: var(--f-kachel); border-top: 1px solid var(--linie); padding-block: clamp(3rem, 7vh, 4.5rem) var(--bc-space-8); }
.fuss-spalten { display: grid; gap: var(--bc-space-12); }
@media (min-width: 720px) { .fuss-spalten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fuss-spalten { grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--bc-space-16); } }
.fuss h2 { font-size: var(--bc-text-label); letter-spacing: .08em; text-transform: uppercase; color: var(--t-leise); font-weight: 600; }
.fuss ul { list-style: none; margin: var(--bc-space-4) 0 0; padding: 0; display: grid; gap: var(--bc-space-1); }
.fuss a { text-decoration: none; display: inline-flex; align-items: center; min-height: 40px; color: var(--t-stark); }
.fuss a:hover { color: var(--t-hell); text-decoration: underline; text-underline-offset: 3px; }
.fuss .visitenkarte img { height: 52px; width: auto; }
.fuss .visitenkarte address { font-style: normal; margin-top: var(--bc-space-6); color: var(--t-leise); line-height: 1.7; }
.fuss .visitenkarte .direkt { margin-top: var(--bc-space-4); display: grid; gap: 2px; }
.fuss-unten { margin-top: clamp(2.5rem, 6vh, 4rem); padding-top: var(--bc-space-6); border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; gap: var(--bc-space-4) var(--bc-space-8); align-items: center; justify-content: space-between; font-size: var(--bc-text-sekundaer); color: var(--t-leise); }
.fuss-unten ul { display: flex; flex-wrap: wrap; gap: var(--bc-space-6); margin: 0; }
.fuss-unten a { min-height: 44px; }

/* ---------------- Startseite: Hero als Werbefilm ----------------
   Rund 23 Sekunden, ein Satz je Szene. Übernommen aus
   entwuerfe/proben/hero-film-spur.html (neunte Probe).

   Kapitel (Sekunden):
      0,0  Start          Der Cursor tippt den Namen und fliegt ins Bild
      3,0  Netz           Analysieren, planen, bauen, betreiben: jedes Verb mit seinem Bild
      8,0  IT-Sicherheit  Zonen trennen sich, eine Prüfung findet einen Befund
     13,0  KI             Warnungen erscheinen, KI sortiert sie, die Ursache leuchtet auf
     18,0  Ein Ansprechpartner  Drei Farben werden ein Block. Die gelbe Zelle fährt
           rechtwinklig mit Lichtspur unter dem Satz entlang in die Rubrik.

   Am Ende weicht das Filmlicht dem Punktraster samt Lichtkegel und
   Rasterzeiger. Danach ruht alles bis auf den Cursor. Der Film läuft nur
   beim ersten Besuch und nur ohne „Bewegung reduzieren“; sonst steht das
   Endbild sofort, und der Film startet auf Wunsch.
   Alles hängt an einer Filmzeit t, jedes Bild wird daraus berechnet.
   Das Skript steht am Ende von seite.js, die Klasse hf-js setzt index.html
   im Kopf, damit vor dem ersten Zeichnen nichts aufblitzt.
   ------------------------------------------------------------------ */
.hf {
  --rechts: calc((100% - min(100% - 2 * var(--bc-space-6), var(--container))) / 2);
  overflow: hidden;
}
/* Schmal läuft der Film in einem Band über dem Text */
@media (max-width: 1023px) { .hf { padding-top: 16.5rem; } }
.hf::before { content: ""; position: absolute; inset: 0; z-index: -3; pointer-events: none; opacity: var(--film, 1);
  background: radial-gradient(36% 56% at 76% 50%, rgba(2, 107, 239, .12), transparent 70%),
              radial-gradient(24% 34% at 90% 88%, rgba(254, 169, 30, .05), transparent 70%); }
.hf-feld { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.hf-korn { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: calc(.5 * var(--film, 1)); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)' opacity='.34'/%3E%3C/svg%3E"); }
.hf .container { position: relative; }
/* Das Raster der Startseite. Es breitet sich am Ende von der Rubrik aus,
   der Kreis dafür kommt als clip-path aus dem Skript. Darüber liegen die
   Zellen des Films, darunter nur das Filmlicht. */
.hf-raster { position: absolute; inset: 0; z-index: -3; pointer-events: none; }
.hf-js .hf-raster { clip-path: circle(0 at 0 0); }
/* Lichtkegel und Rasterzeiger erst nach dem Film, sonst lenken sie davon ab */
.hf:not(.hf-ende) .gitter-nah { display: none; }
.hf.eigener-zeiger:not(.hf-ende) { cursor: auto; }
body:has(.hf:not(.hf-ende)) .zeiger { display: none; }
.hf-tippen i { font-style: normal; }

/* Filmtexte liegen über dem Inhalt, alle in derselben Rasterzelle */
.hf-film { position: absolute; inset: 0; display: grid; align-items: center; pointer-events: none; }
html:not(.hf-js) .hf-film { display: none; }
@media (max-width: 1023px) { .hf-film { align-items: start; } }
.hf-text { grid-area: 1 / 1; margin: 0; max-width: min(34rem, 48%); visibility: hidden;
  font-family: var(--bc-font-display); font-weight: 700; font-size: clamp(1.875rem, 1.1rem + 2.3vw, 3.25rem); line-height: 1.08; letter-spacing: -.024em; color: var(--t-hell); text-wrap: balance; }
@media (max-width: 1023px) { .hf-text { max-width: 100%; } }
.hf-text.marke { font-size: clamp(1.625rem, .8rem + 4.4vw, 4.75rem); white-space: nowrap; }
.hf-text .zweite { display: block; color: var(--b-text); }
.hf .wort { display: inline-block; overflow: hidden; vertical-align: top; padding: .05em .03em .16em; margin: -.05em -.03em -.16em; }
.hf .wort > span { display: inline-block; }
/* Platzhalter für den Cursor hinter dem getippten Namen, gezeichnet wird er im Bild */
.hf-platz { display: inline-block; width: var(--bc-cursor-width); height: max(1.5px, var(--bc-cursor-height)); margin-left: var(--bc-cursor-gap); visibility: hidden; }

/* Schilder: im Film nur Bild, am Ende Verweise. Lage setzt das Skript. */
.hf-marken, .hf-schilder { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.hf-marken li, .hf-schilder li { position: absolute; left: 0; top: 0; display: flex; align-items: flex-start; gap: 3px; }
.hf-schilder li { pointer-events: auto; transform-origin: 100% 50%; }
.hf-marken li { transform-origin: 0 50%; }
.hf-marken li::before, .hf-schilder li::before { content: ""; width: 10px; height: 10px; margin-top: -8px; border-radius: 2px; background: var(--b); }
.hf-marken span, .hf-schilder a { display: block; background: var(--b); color: var(--b-schrift); font-weight: 600; font-size: 1.125rem; line-height: 1; padding: 9px 14px 10px; border-radius: var(--bc-radius-sm); white-space: nowrap; text-decoration: none; }
@media (max-width: 767px) { .hf-marken span, .hf-schilder a { font-size: .9375rem; padding: 7px 10px 8px; } }
.hf:not(.hf-bereit) .hf-marken, .hf:not(.hf-bereit) .hf-schilder { display: none; }

/* Bis das Skript übernimmt, bleibt der Inhalt verdeckt, sonst blitzt er auf */
.hf-js .hf:not(.hf-bereit) .hf-inhalt { opacity: 0; }
/* Der Cursor der Rubrik erscheint erst, wenn die gelbe Zelle dort gelandet ist */
/* visibility statt opacity: die Blinkanimation setzt opacity selbst */
.hf-js .hf:not(.hf-cursor) .rubrik .bc-cursor { visibility: hidden; }
/* Tempostreifen vor „beschleunigt.“ folgen der Filmzeit statt einer eigenen Animation */
.hf h1 .tempo::before { animation: none; transform: scaleX(var(--tempo, 1)); opacity: var(--tempo, 1); }

/* ---------------- Steuerung ----------------
   Während des Films: dünne Fortschrittslinie, Anhalten als Symbol, Überspringen.
   Danach nur noch „Film noch einmal ansehen“. */
.hf-steuerung { position: absolute; left: var(--rechts); right: var(--rechts); top: var(--bc-space-2); display: flex; align-items: center; gap: var(--bc-space-2); }
@media (min-width: 1024px) { .hf-steuerung { top: var(--bc-space-4); } }
html:not(.hf-js) .hf-steuerung > :not(.hf-nochmal) { display: none; }
.hf-linie { flex: 1; min-width: 0; height: 2px; margin-right: var(--bc-space-2); border-radius: 1px; background: var(--linie); overflow: hidden; }
.hf-linie i { display: block; height: 100%; background: var(--t-leise); transform-origin: 0 50%; transform: scaleX(0); }
.hf-knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--bc-space-2); flex: none; min-height: 44px; min-width: 44px; padding: 0 var(--bc-space-3); border: 0; border-radius: var(--bc-radius-sm); background: rgba(234, 231, 229, .06); color: var(--t-leise); font: 500 var(--bc-text-label)/1 var(--bc-font-sans); white-space: nowrap; cursor: pointer;
  transition: background-color var(--bc-duration-fast) var(--bc-ease-standard), color var(--bc-duration-fast) var(--bc-ease-standard); }
@media (hover: hover) { .hf-knopf:hover { background: rgba(234, 231, 229, .12); color: var(--t-hell); } }
.hf-symbol { padding: 0; }
.hf-pause .zeichen-weiter, .hf.angehalten .hf-pause .zeichen-pause { display: none; }
.hf.angehalten .hf-pause .zeichen-weiter { display: block; }
.hf-nochmal { display: none; margin-left: auto; }
.hf.hf-ende .hf-linie, .hf.hf-ende .hf-pause, .hf.hf-ende .hf-springen { display: none; }
.hf.hf-ende .hf-nochmal, html:not(.hf-js) .hf-nochmal { display: inline-flex; }


/* ---------------- Sehr schmale Geräte ---------------- */
@media (max-width: 559px) {
  .kopf .sprache { display: none; }
  /* Deutsch baut lange Wörter. „Haftpflichtversicherung" oder
     „zusammenzuarbeiten" passen bei 320 px in keine Zeile und schoben die
     Seite seitwärts. Trennen ist erlaubt, die Seiten tragen lang="de".
     overflow-wrap greift zusätzlich, wo keine Trennstelle gefunden wird. */
  body { hyphens: auto; }
  h1, h2, h3, p, li, dd, dt, td, th, summary, strong { overflow-wrap: break-word; }
}