/* ------------------------------------------------------------------
   Vorschlag „Kapitel“ für die Leistungsseiten Netz, IT-Sicherheit, KI.
   Ergänzt stil.css und ersetzt nichts daraus. Alle neuen Klassen
   beginnen mit ag-, damit sich einzelne Bausteine sauber in die echte
   Seite übernehmen lassen.

   Leitidee: Die Startseite ist der Trailer. Jede Leistungsseite spielt
   ihr Kapitel aus dem Film aus, mit denselben Zellen auf demselben
   Raster und derselben gelben Zelle als rotem Faden.

   Bewusste Abweichungen vom Design-System (zur Entscheidung):
   - Übergänge der Zellen und der Sortierung dauern bis 900 ms statt 320 ms.
   - Die Einblicke (Protokoll, Prüfbericht, Probebetrieb) erklären etwas.
     Sie sind Oberflächen wie die Kacheln der Startseite, keine Bildsprache.
   - Der Abschlussblock trägt die Farbe des Bereichs statt immer Blau.
   ------------------------------------------------------------------ */

:root {
  --kopf-h: 80px;
  --leiste-h: 52px;
  --ag-oben: calc(var(--kopf-h) + var(--leiste-h));
}

.f-netz       { --b-glanz: rgba(2, 107, 239, .2); }
.f-sicherheit { --b-glanz: rgba(117, 203, 51, .14); }
.f-ki         { --b-glanz: rgba(254, 169, 30, .13); }

main section[id] { scroll-margin-top: calc(var(--ag-oben) + var(--bc-space-4)); }

/* ---------------- Grundbausteine ---------------- */
.ag-abschnitt { padding-block: clamp(4.5rem, 12vh, 8rem); }
.ag-abschnitt + .ag-abschnitt:not(.ag-gesenkt) { border-top: 1px solid var(--linie); }
.ag-gesenkt + .ag-abschnitt, .ag-abschnitt + .ag-gesenkt { border-top: 0; }
.ag-gesenkt { background: var(--f-gesenkt); }

/* Rubrik: kleine Zelle in Bereichsfarbe, dann die Bezeichnung */
.ag-rubrik { display: flex; align-items: center; gap: var(--bc-space-3); margin: 0; font-family: var(--bc-font-sans); 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); }
/* gap: 0, weil der Flex-Abstand sonst auch zwischen Text und Cursor steht und
   der Cursor dann ein ganzes Zeichen weit abliegt. Der Punkt bekommt seinen
   Abstand selbst, der Cursor behält den feinen aus tokens.css. */
.ag-rubrik::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--b, var(--t-leise)); align-self: flex-start; margin-top: 5px; margin-right: var(--bc-space-3); }
/* flex-start statt center: Bei einer zweizeiligen Rubrik zentriert sich der
   Punkt sonst zwischen beiden Zeilen. 5px ist die halbe Zeilenhoehe der
   Label-Schrift (18px) abzueglich des halben Punkts (4px). */
/* Grundlinie statt Mitte: Der Cursor ist in dieser Zeile ein Flex-Element, und
   darin wirkt sein vertical-align aus tokens.css nicht. Die Unterkante eines
   leeren inline-block ist seine Grundlinie, deshalb sitzt er mit
   align-items: baseline genau auf der Schriftlinie. Der Punkt davor bleibt mittig. */
.ag-rubrik { align-items: baseline; gap: 0; }

.ag-kopf { max-width: 46rem; }
.ag-kopf h2 { margin-top: var(--bc-space-4); font-size: clamp(2.125rem, 1.3rem + 2.2vw, 3.25rem); line-height: 1.05; }
.ag-kopf > p:not(.ag-rubrik) { margin-top: var(--bc-space-6); max-width: 56ch; color: var(--t-leise); font-size: 1.125rem; line-height: 1.6; }

.ag-nummer { font-family: var(--bc-font-mono); font-size: var(--bc-text-label); letter-spacing: .04em; color: var(--b-text); font-variant-numeric: tabular-nums; }

/* Aussagen, die vor dem Livegang belegt oder freigegeben werden müssen */

/* ---------------- Bühne ---------------- */
.ag-buehne { position: relative; isolation: isolate; overflow: hidden; }
.ag-buehne::before { content: ""; position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background: radial-gradient(38% 58% at 78% 44%, var(--b-glanz), transparent 70%),
              radial-gradient(30% 40% at 4% 100%, rgba(234, 231, 229, .035), transparent 70%); }
.ag-buehne .gitter { z-index: -2; }
/* Schlicht: wie das Endbild der Startseite nach dem Film, nur Punktraster.
   Ohne Lichtschein und ohne Korn. Vorerst nur auf der Netz-Seite. */
.ag-buehne-schlicht::before { content: none; }
.ag-korn { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; 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"); }
.ag-buehne-raster { display: grid; gap: var(--bc-space-12); align-items: center; padding-block: clamp(2.5rem, 7vh, 4.5rem) clamp(3.5rem, 9vh, 6rem); }
@media (min-width: 1024px) {
  .ag-buehne-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 29rem); gap: var(--bc-space-16); min-height: min(62vh, 38rem); }
}
.ag-buehne h1 { margin-top: var(--bc-space-6); font-size: clamp(2.375rem, 1.2rem + 3.3vw, 4rem); line-height: 1.03; letter-spacing: -.028em; }
.ag-buehne h1 .farbe { color: var(--b-text); }
.ag-buehne .einleitung { margin-top: var(--bc-space-8); max-width: 48ch; color: var(--t-leise); font-size: 1.1875rem; line-height: 1.6; }
.ag-buehne .aktionen { margin-top: var(--bc-space-8); display: flex; flex-wrap: wrap; align-items: center; gap: var(--bc-space-6); }

.ag-formation-huelle { position: relative; width: 100%; max-width: 29rem; justify-self: center; }
.ag-formation { display: block; width: 100%; height: auto; }
.ag-pause { position: absolute; right: 0; top: calc(100% + var(--bc-space-3)); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--bc-radius-sm); background: rgba(234, 231, 229, .06); 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) { .ag-pause:hover { background: rgba(234, 231, 229, .12); color: var(--t-hell); } }
.ag-pause .zeichen-weiter, .ag-pause.angehalten .zeichen-pause { display: none; }
.ag-pause.angehalten .zeichen-weiter { display: block; }

/* Belege unter der Bühne: drei Tatsachen statt drei Versprechen */
.ag-belege { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--linie); }
.ag-belege li { display: grid; gap: var(--bc-space-2); align-content: start; padding-block: var(--bc-space-6); }
.ag-belege li + li { border-top: 1px solid var(--linie); }
.ag-belege strong { font-family: var(--bc-font-display); font-weight: 700; font-size: clamp(1.75rem, 1.2rem + 1.3vw, 2.375rem); line-height: 1.05; letter-spacing: -.022em; color: var(--t-hell); }
.ag-belege span { max-width: 34ch; color: var(--t-leise); font-size: var(--bc-text-sekundaer); line-height: var(--bc-lh-sekundaer); }
@media (min-width: 768px) {
  .ag-belege { grid-template-columns: repeat(3, 1fr); }
  .ag-belege li { padding: var(--bc-space-8) var(--bc-space-8) var(--bc-space-8) 0; }
  .ag-belege li + li { border-top: 0; border-left: 1px solid var(--linie); padding-left: var(--bc-space-8); }
}

/* ---------------- Kapitelleiste ----------------
   Haftet unter dem Kopf, sobald die Bühne vorbei ist. Kein Skript nötig,
   sticky erledigt das Auftauchen. Das Skript markiert nur den aktuellen Abschnitt. */
.ag-kapitel { position: sticky; top: var(--kopf-h); z-index: calc(var(--bc-z-sticky) - 1); background: rgba(29, 27, 26, .9); -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--linie); border-top: 1px solid var(--linie); }
.ag-kapitel .container { display: flex; align-items: center; gap: var(--bc-space-6); height: var(--leiste-h); }
.ag-kapitel .marke { flex: none; font-size: var(--bc-text-label); padding: 5px 8px 6px; }
.ag-kapitel ol { list-style: none; margin: 0; padding: 0 var(--bc-space-1); display: flex; gap: var(--bc-space-1); overflow-x: auto; scrollbar-width: none; min-width: 0; }
@media (max-width: 899px) { .ag-kapitel ol { -webkit-mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 28px), transparent); } }
.ag-kapitel ol::-webkit-scrollbar { display: none; }
.ag-kapitel a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--bc-space-3); white-space: nowrap; 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); }
.ag-kapitel a:hover { color: var(--t-hell); }
.ag-kapitel a[aria-current="true"] { color: var(--t-hell); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; text-decoration-color: var(--b-text); }
.ag-kapitel .ag-telefon { margin-left: auto; flex: none; font-family: var(--bc-font-mono); font-size: var(--bc-text-label); color: var(--t-leise); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.ag-kapitel .ag-telefon:hover { color: var(--t-hell); }
@media (max-width: 899px) { .ag-kapitel .ag-telefon { display: none; } }

/* ---------------- Haltung ---------------- */
.ag-haltung .container { display: grid; gap: var(--bc-space-8); }
@media (min-width: 1024px) { .ag-haltung .container { grid-template-columns: 13rem minmax(0, 1fr); gap: var(--bc-space-12); align-items: start; } /* Oberkante an Oberkante: Der große Satz hat enge Zeilen, seine
   Großbuchstaben stehen leicht über dem Zeilenkasten. Die Rubrik muss
   deshalb etwas höher als der Kasten beginnen. */
  .ag-haltung .ag-rubrik { margin-top: -5px; } }
.ag-satz { margin: 0; max-width: 29ch; font-family: var(--bc-font-display); font-weight: 600; font-size: clamp(1.875rem, 1.05rem + 2.7vw, 3.375rem); line-height: 1.14; letter-spacing: -.022em; color: var(--t-hell); text-wrap: pretty; }
.ag-satz .farbe { color: var(--b-text); }
/* Lange Komposita brechen an der gesetzten Trennstelle (­), sonst notfalls im Wort */
.ag-satz { overflow-wrap: break-word; }
.ag-satz .w { transition: opacity 160ms linear; }

/* ---------------- Leistungen: Schritte mit haftender Tafel ---------------- */
.ag-scrolly { margin-top: var(--bc-space-12); display: grid; gap: var(--bc-space-12); }
.ag-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bc-space-12); }
.ag-schritt { display: grid; gap: var(--bc-space-4); align-content: center; }
.ag-schritt h3 { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -.018em; }
.ag-schritt p { max-width: 46ch; color: var(--t-leise); }
.ag-schritt .stichworte { margin-top: var(--bc-space-2); }
.ag-scrolly-buehne { display: none; }
.ag-tafel { background: var(--f-gesenkt); border-radius: var(--bc-radius-lg); padding: var(--raster); }
.ag-gesenkt .ag-tafel { background: var(--f-flaeche); }
/* Nur die Zählung läuft in der Monospace, die Beschriftung nicht:
   Sie ist Text und wirkt in der technischen Schrift kantig. */
.ag-zaehler { margin-top: var(--bc-space-4); display: flex; justify-content: space-between; gap: var(--bc-space-4); font-family: var(--bc-font-sans); letter-spacing: .01em; font-size: var(--bc-text-label); color: var(--t-leise); }
/* Auch die Zählung in der Hausschrift: ein Schriftwechsel mitten in der
   Zeile fällt unangenehm auf. tabular-nums hält die Ziffern gleich breit. */
.ag-zaehler b { font-weight: 600; color: var(--t-hell); font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) {
  .ag-scrolly { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: var(--bc-space-16); align-items: start; }
  .ag-schritte { gap: 0; }
  /* Halb so hoch wie zuerst: Schritte so hoch wie ihr Text, die Tafel wechselt trotzdem */
  .ag-schritt { min-height: 32vh; padding-block: var(--bc-space-4); }
  /* Vorher .3: Der Text fiel damit unter 4,5:1. */
.ag-an .ag-schritt { opacity: .62; transition: opacity var(--bc-duration-slow) var(--bc-ease-standard); }
  .ag-an .ag-schritt.aktiv { opacity: 1; }
  .ag-scrolly-buehne { display: block; position: sticky; top: calc(var(--ag-oben) + max(var(--bc-space-8), (100vh - var(--ag-oben) - 31rem) / 2)); }
}

/* ---------------- Auswahl mit Reitern (Netz: Ausgangslage) ---------------- */
.ag-wahl { margin-top: var(--bc-space-12); }
.ag-reiter { display: inline-flex; flex-wrap: wrap; gap: var(--bc-space-1); padding: var(--bc-space-1); background: var(--f-kachel); border-radius: calc(var(--bc-radius-sm) + 4px); }
.ag-reiter button, .ag-zonen-wahl button { min-height: 44px; padding: 0 var(--bc-space-4); border: 0; border-radius: var(--bc-radius-sm); background: transparent; color: var(--t-leise); font: 600 var(--bc-text-sekundaer)/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); }
.ag-reiter button:hover, .ag-zonen-wahl button:hover { color: var(--t-hell); }
.ag-reiter button[aria-selected="true"], .ag-zonen-wahl button[aria-pressed="true"] { background: var(--b); color: var(--b-schrift); }
.ag-wahl-flaeche { margin-top: var(--bc-space-8); display: grid; gap: var(--bc-space-12); align-items: center; }
@media (min-width: 1024px) { .ag-wahl-flaeche { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: var(--bc-space-16); } }
.ag-lage h3 { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); line-height: 1.15; }
.ag-lage > p { margin-top: var(--bc-space-4); max-width: 50ch; color: var(--t-leise); }
.ag-lage dl { margin: var(--bc-space-8) 0 0; display: grid; gap: var(--bc-space-6); padding-top: var(--bc-space-6); border-top: 1px solid var(--linie); }
@media (min-width: 640px) { .ag-lage dl { grid-template-columns: 1fr 1fr; } }
.ag-lage dt, .ag-fall dt, .ag-modell dt { font-size: var(--bc-text-label); letter-spacing: .06em; text-transform: uppercase; color: var(--t-leise); }
.ag-lage dd { margin: var(--bc-space-2) 0 0; color: var(--t-stark); }

/* ---------------- Ablauf als Schiene, darunter ein Schritt im Detail ---------------- */
.ag-schiene { --fortschritt: 1; position: relative; list-style: none; margin: var(--bc-space-12) 0 0; padding: 0 0 0 var(--bc-space-8); display: grid; gap: var(--bc-space-8); }
.ag-schiene::before, .ag-schiene::after { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; border-radius: 1px; background: var(--linie); }
.ag-schiene::after { background: var(--b); transform-origin: 50% 0; transform: scaleY(var(--fortschritt)); }
.ag-schiene li { position: relative; display: grid; gap: var(--bc-space-2); align-content: start; }
.ag-schiene li::before { content: ""; position: absolute; left: calc(-1 * var(--bc-space-8)); top: 0; width: 14px; height: 14px; border-radius: 3px; background: var(--ruhig); z-index: 1; transition: background-color var(--bc-duration-base) var(--bc-ease-standard), transform var(--bc-duration-base) var(--bc-ease-standard); }
.ag-schiene li.erreicht::before { background: var(--b); }
.ag-schiene li.lupe::before { transform: scale(1.3); }
.ag-schiene strong { color: var(--t-hell); font-size: 1.1875rem; font-weight: 600; }
.ag-schiene p { max-width: 32ch; color: var(--t-leise); font-size: var(--bc-text-sekundaer); }
@media (min-width: 900px) {
  .ag-schiene { grid-template-columns: repeat(4, 1fr); padding: var(--bc-space-8) 0 0; }
  .ag-schiene::before, .ag-schiene::after { left: 0; right: 0; top: 6px; bottom: auto; width: auto; height: 2px; }
  .ag-schiene::after { transform-origin: 0 50%; transform: scaleX(var(--fortschritt)); }
  .ag-schiene li::before { left: 0; top: calc(-1 * var(--bc-space-8)); }
}

.ag-lupe { margin-top: var(--bc-space-12); display: grid; gap: var(--bc-space-8); align-items: center; padding: clamp(var(--bc-space-6), 4vw, var(--bc-space-12)); background: var(--f-kachel); border-radius: var(--bc-radius-lg); }
@media (min-width: 1024px) { .ag-lupe { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: var(--bc-space-12); } }
.ag-lupe h3 { margin-top: var(--bc-space-4); font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -.018em; }
.ag-lupe-text > p:not(.ag-rubrik) { margin-top: var(--bc-space-4); color: var(--t-leise); }

/* Gemeinsamer Rahmen der Einblicke */
.ag-einblick { margin: 0; min-width: 0; background: var(--f-erhaben); border-radius: var(--bc-radius-md); padding: var(--bc-space-6); font-size: var(--bc-text-sekundaer); }
.ag-einblick figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--bc-space-2) var(--bc-space-4); padding-bottom: var(--bc-space-4); border-bottom: 1px solid var(--linie); color: var(--t-hell); font-weight: 600; }
.ag-einblick figcaption small { font-family: var(--bc-font-sans); letter-spacing: .01em; font-size: var(--bc-text-label); font-weight: 400; color: var(--t-leise); }
.ag-einblick-fuss { margin-top: var(--bc-space-4); font-size: var(--bc-text-label); color: var(--t-leise); transition: opacity var(--bc-duration-slow) var(--bc-ease-standard); }
.ag-stand { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-style: normal; font-size: var(--bc-text-label); color: var(--t-leise); }
.ag-stand i { width: 8px; height: 8px; border-radius: 2px; background: var(--c, var(--ruhig)); }

/* Netz: Protokoll eines Wartungsfensters */
.ag-protokoll ol { list-style: none; margin: 0; padding: 0; }
.ag-protokoll li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) 5.5rem; gap: var(--bc-space-4); align-items: baseline; padding-block: 11px; border-bottom: 1px solid var(--linie); }
/* Keine Monospace mitten im Text: Die Uhrzeiten laufen in der Hausschrift,
   tabular-nums hält die Ziffern trotzdem in einer Spalte. */
.ag-protokoll time { font-size: var(--bc-text-label); color: var(--t-leise); font-variant-numeric: tabular-nums; }
.ag-protokoll li > span { color: var(--t-stark); transition: color var(--bc-duration-base) var(--bc-ease-standard); }
.ag-protokoll li.offen > span { color: var(--t-leise); }
.ag-bewegt .ag-einblick:not(.fertig) .ag-einblick-fuss { opacity: 0; }
@media (max-width: 559px) { .ag-protokoll li { grid-template-columns: 3rem minmax(0, 1fr); } .ag-protokoll .ag-stand { grid-column: 2; } }

/* IT-Sicherheit: Prüfbericht, nach Dringlichkeit sortiert */
.ag-befunde ol { list-style: none; margin: 0; padding: 0; }
.ag-befunde li { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); gap: 2px var(--bc-space-4); padding-block: 12px; border-bottom: 1px solid var(--linie); background: var(--f-erhaben); }
.ag-befunde .ag-stand { grid-row: span 2; align-self: start; padding-top: 3px; }
.ag-befunde li strong { color: var(--t-hell); font-weight: 600; }
.ag-befunde li small { font-size: var(--bc-text-label); color: var(--t-leise); }
.c-rot { --c: var(--t-fehler); }

/* KI: Probebetrieb als Balken je Woche */
.ag-balken { position: relative; height: 12.5rem; margin: var(--bc-space-12) 0 var(--bc-space-8); border-bottom: 1px solid var(--linie-stark); }
.ag-balken ol { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--bc-space-2); }
.ag-balken li { position: relative; display: flex; align-items: flex-end; justify-content: center; }
.ag-balken i { display: block; width: min(100%, 2.25rem); height: calc(var(--wert) * 1%); border-radius: 4px 4px 0 0; background: var(--w-700); transform-origin: 50% 100%; }
.ag-balken li.ueber i { background: var(--b); }
.ag-balken b { position: absolute; bottom: calc(var(--wert) * 1% + 6px); font: 500 var(--bc-text-label)/1 var(--bc-font-mono); color: var(--t-stark); font-variant-numeric: tabular-nums; }
.ag-balken small { position: absolute; top: calc(100% + 8px); font: 400 var(--bc-text-label)/1 var(--bc-font-mono); color: var(--t-leise); }
.ag-balken .ag-tipp { position: absolute; bottom: calc(var(--wert) * 1% + 30px); z-index: 2; padding: 6px 9px; border-radius: var(--bc-radius-xs); background: var(--w-850); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); color: var(--t-hell); font-size: var(--bc-text-label); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--bc-duration-fast) var(--bc-ease-standard); }
.ag-balken li:hover .ag-tipp { opacity: 1; }
.ag-schwelle { position: absolute; left: 0; right: 0; bottom: calc(var(--schwelle) * 1%); border-top: 1px dashed var(--t-leise); pointer-events: none; }
.ag-schwelle span { position: absolute; left: 0; bottom: 6px; font: 400 var(--bc-text-label)/1 var(--bc-font-mono); color: var(--t-leise); background: var(--f-erhaben); padding-right: var(--bc-space-2); }
.ag-diagramm.ag-wartet .ag-balken i { transform: scaleY(0); }
.ag-diagramm.ag-wartet .ag-balken b { opacity: 0; }
.ag-diagramm.ag-wartet.sichtbar .ag-balken i { transform: scaleY(1); transition: transform 900ms var(--bc-ease-decelerate) calc(var(--i) * 90ms); }
.ag-diagramm.ag-wartet.sichtbar .ag-balken b { opacity: 1; transition: opacity var(--bc-duration-base) var(--bc-ease-standard) calc(900ms + var(--i) * 90ms); }

/* ---------------- IT-Sicherheit: Zonenplan ---------------- */
.ag-zonen-wahl { margin-top: var(--bc-space-12); display: flex; flex-wrap: wrap; gap: var(--bc-space-1); padding: var(--bc-space-1); background: var(--f-kachel); border-radius: calc(var(--bc-radius-sm) + 4px); width: fit-content; max-width: 100%; }
.ag-zonen-satz { margin-top: var(--bc-space-6); min-height: 3.4em; max-width: 60ch; color: var(--t-stark); font-size: 1.125rem; line-height: 1.55; }
.ag-zonen-flaeche .tabelle-huelle { margin-top: var(--bc-space-6); background: var(--f-kachel); border-radius: var(--bc-radius-lg); padding: var(--bc-space-2) var(--bc-space-4); }
table.ag-matrix { min-width: 46rem; }
.ag-matrix thead th, .ag-matrix thead td { font-size: var(--bc-text-label); letter-spacing: .06em; text-transform: uppercase; color: var(--t-leise); font-weight: 600; }
.ag-matrix tbody th { width: 9.5rem; }
.ag-matrix th, .ag-matrix td { padding: 14px var(--bc-space-3); }
.ag-matrix tbody tr:last-child > * { border-bottom: 0; }
.ag-matrix tbody tr { transition: opacity var(--bc-duration-base) var(--bc-ease-standard); }
.ag-matrix[data-zone] tbody tr { opacity: .45; }
.ag-matrix[data-zone] tbody tr.gewaehlt { opacity: 1; }
/* Die gewählte Zeile wird angehoben, ohne Farbe: Grün bedeutet in dieser
   Tabelle bereits "frei" oder "eigene Regel". Der Akzent sitzt nur als
   schmaler Balken am Zeilenanfang und meint dort dasselbe wie der
   gewählte Knopf darüber. Für die runden Enden muss die Tabelle auf
   border-collapse: separate stehen, die Zellen haben nur eine untere Linie. */
table.ag-matrix { border-collapse: separate; border-spacing: 0; }
.ag-matrix[data-zone] tbody tr.gewaehlt > * { background: rgba(234, 231, 229, .055); }
.ag-matrix[data-zone] tbody tr.gewaehlt > *:first-child { border-radius: var(--bc-radius-sm) 0 0 var(--bc-radius-sm); box-shadow: inset 3px 0 0 var(--b); }
.ag-matrix[data-zone] tbody tr.gewaehlt > *:last-child { border-radius: 0 var(--bc-radius-sm) var(--bc-radius-sm) 0; }
.ag-regel { display: inline-flex; align-items: center; gap: var(--bc-space-2); white-space: nowrap; color: var(--t-stark); }
.ag-regel::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 2px; }
.ag-regel.frei::before { background: var(--gruen); }
.ag-regel.eng::before { box-shadow: inset 0 0 0 2px var(--gruen); }
.ag-regel.zu { color: var(--t-leise); }
.ag-regel.zu::before { background: var(--ruhig); }
.ag-legende { display: flex; flex-wrap: wrap; gap: var(--bc-space-3) var(--bc-space-6); margin-top: var(--bc-space-4); font-size: var(--bc-text-label); color: var(--t-leise); }

/* ---------------- Selbstcheck ---------------- */
.ag-check-raster { display: grid; gap: var(--bc-space-12); }
@media (min-width: 1024px) {
  .ag-check-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); column-gap: var(--bc-space-16); row-gap: var(--bc-space-12); }
  .ag-check-raster > .ag-kopf { grid-column: 1 / -1; }
}
form.ag-check-liste { background: none; border: 0; border-radius: 0; padding: 0; }
.ag-frage { margin: 0; padding: 0; border: 0; min-width: 0; }
.ag-frage + .ag-frage { border-top: 1px solid var(--linie); }
.ag-frage-zeile { display: grid; gap: var(--bc-space-4); padding-block: var(--bc-space-6); }
@media (min-width: 640px) { .ag-frage-zeile { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--bc-space-8); } }
.ag-frage legend { float: left; width: 100%; padding: 0; }
.ag-frage-text { color: var(--t-hell); font-weight: 600; font-size: 1.0625rem; }
.ag-antworten { display: inline-flex; gap: var(--bc-space-1); padding: var(--bc-space-1); background: var(--f-kachel); border-radius: calc(var(--bc-radius-sm) + 4px); justify-self: start; }
.ag-antworten label { position: relative; display: block; }
.ag-antworten input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.ag-antworten span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--bc-space-4); border-radius: var(--bc-radius-sm); color: var(--t-leise); font-weight: 600; font-size: var(--bc-text-sekundaer); white-space: nowrap; transition: background-color var(--bc-duration-fast) var(--bc-ease-standard), color var(--bc-duration-fast) var(--bc-ease-standard); }
.ag-antworten label:hover span { color: var(--t-hell); }
.ag-antworten input:checked + span { background: var(--f-erhaben); color: var(--t-hell); box-shadow: inset 0 0 0 1px var(--linie-stark); }
.ag-antworten input[value="ja"]:checked + span { background: var(--b); color: var(--b-schrift); box-shadow: none; }
.ag-antworten input:focus-visible + span { outline: 2px solid var(--t-blau); outline-offset: 2px; }

.ag-ergebnis { align-self: start; display: grid; gap: var(--bc-space-6); padding: var(--bc-space-6); background: var(--f-kachel); border-radius: var(--bc-radius-lg); }
@media (min-width: 1024px) { .ag-ergebnis { position: sticky; top: calc(var(--ag-oben) + var(--bc-space-8)); } }
.ag-zellen { display: flex; gap: 6px; }
.ag-zellen i { width: 22px; height: 22px; border-radius: 4px; background: var(--ruhig); transition: transform var(--bc-duration-base) var(--bc-ease-standard); }
.ag-zellen i.ja { background: var(--b); }
.ag-zellen i.nein, .ag-zellen i.offen { background: transparent; box-shadow: inset 0 0 0 2px var(--t-leise); }
.ag-ergebnis strong { display: block; font-family: var(--bc-font-display); font-weight: 700; font-size: 2.5rem; line-height: 1; letter-spacing: -.02em; color: var(--t-hell); font-variant-numeric: tabular-nums; }
.ag-ergebnis [data-text] { margin-top: var(--bc-space-3); color: var(--t-stark); }
.ag-ergebnis .ag-hinweis { font-size: var(--bc-text-label); color: var(--t-leise); }

/* ---------------- Praxis ---------------- */
.ag-faelle { list-style: none; margin: var(--bc-space-12) 0 var(--bc-space-8); padding: 0; display: grid; gap: var(--bc-space-4); }
@media (min-width: 900px) { .ag-faelle { grid-template-columns: 1fr 1fr; } }
.ag-fall { display: grid; gap: var(--bc-space-8); align-content: space-between; padding: clamp(var(--bc-space-6), 3vw, var(--bc-space-12)); background: var(--f-kachel); border-radius: var(--bc-radius-lg); }
.ag-gesenkt .ag-fall { background: var(--f-erhaben); }
.ag-fall dl { margin: 0; display: grid; gap: var(--bc-space-6); }
.ag-fall dd { margin: var(--bc-space-2) 0 0; color: var(--t-leise); font-size: var(--bc-text-sekundaer); }
.ag-fall .ag-ergebnis-satz { font-family: var(--bc-font-display); font-weight: 600; font-size: clamp(1.375rem, 1.05rem + .9vw, 1.75rem); line-height: 1.2; letter-spacing: -.015em; color: var(--t-hell); text-wrap: balance; }

/* ---------------- Zusammenarbeit, kurze Fassung ---------------- */
.ag-modelle { list-style: none; margin: var(--bc-space-12) 0 var(--bc-space-8); padding: 0; display: grid; gap: var(--bc-space-4); }
@media (min-width: 900px) { .ag-modelle { grid-template-columns: repeat(3, 1fr); } }
.ag-modell { display: grid; gap: var(--bc-space-4); align-content: start; padding: var(--bc-space-6); background: var(--f-kachel); border-radius: var(--bc-radius-lg); }
.ag-modell h3 { font-size: 1.25rem; }
.ag-modell p { color: var(--t-leise); font-size: var(--bc-text-sekundaer); }
.ag-modell dl { margin: 0; padding-top: var(--bc-space-4); border-top: 1px solid var(--linie); }
.ag-modell dd { margin: var(--bc-space-1) 0 0; color: var(--t-stark); font-size: var(--bc-text-sekundaer); }
.ag-modell dd + dt { margin-top: var(--bc-space-4); }

/* ---------------- Fragen ---------------- */
.ag-fragen-raster { display: grid; gap: var(--bc-space-8); }
@media (min-width: 1024px) {
  .ag-fragen-raster { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); gap: var(--bc-space-16); align-items: start; }
  .ag-fragen-kopf { position: sticky; top: calc(var(--ag-oben) + var(--bc-space-8)); }
}
.ag-fragen-kopf .direkt { margin-top: var(--bc-space-6); display: grid; gap: 2px; }
.ag-fragen-kopf .direkt a { display: inline-flex; align-items: center; min-height: 40px; font-weight: 600; color: var(--t-hell); text-decoration: none; }
.ag-fragen-kopf .direkt a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ag-fragen-liste details:first-child { border-top: 1px solid var(--linie); }
.ag-fragen-liste summary { font-size: 1.125rem; }
.ag-fragen-liste .antwort { font-size: 1.0625rem; }
.ag-fragen-liste .antwort a { color: var(--t-hell); text-underline-offset: 3px; }

/* ---------------- Nächster Bereich ---------------- */
.ag-weiter { padding-block: clamp(3.5rem, 9vh, 6rem); border-top: 1px solid var(--linie); }
.ag-weiter .container { display: grid; gap: var(--bc-space-4); }
.ag-weiter-gross { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: var(--bc-space-8); align-items: center; padding: clamp(var(--bc-space-6), 4vw, 3.5rem); border-radius: var(--bc-radius-lg); background: var(--f-kachel); text-decoration: none; }
.ag-weiter-gross::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(45% 90% at 84% 50%, var(--b-glanz), transparent 72%); opacity: .7; transition: opacity var(--bc-duration-slow) var(--bc-ease-standard); }
@media (min-width: 900px) { .ag-weiter-gross { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); gap: var(--bc-space-16); } }
.ag-weiter-gross .marke { margin-top: var(--bc-space-6); }
.ag-weiter-gross strong { display: block; margin-top: var(--bc-space-4); max-width: 22ch; font-family: var(--bc-font-display); font-weight: 700; font-size: clamp(1.75rem, 1.15rem + 1.9vw, 2.75rem); line-height: 1.08; letter-spacing: -.022em; color: var(--t-hell); text-wrap: balance; }
.ag-pfeil { margin-top: var(--bc-space-8); display: inline-flex; align-items: center; gap: var(--bc-space-2); font-weight: 600; font-size: var(--bc-text-sekundaer); color: var(--t-hell); }
.ag-pfeil svg, .ag-weiter-klein svg { color: var(--b-text); transition: transform var(--bc-duration-fast) var(--bc-ease-standard); }
.ag-weiter-klein { display: flex; align-items: center; gap: var(--bc-space-4); padding: var(--bc-space-5) var(--bc-space-6); border-radius: var(--bc-radius-lg); background: var(--f-kachel); text-decoration: none; transition: background-color var(--bc-duration-fast) var(--bc-ease-standard); }
.ag-weiter-klein strong { flex: 1; color: var(--t-hell); font-weight: 600; }
@media (hover: hover) {
  .ag-weiter-gross:hover::before { opacity: 1; }
  .ag-weiter-gross:hover .ag-pfeil svg, .ag-weiter-klein:hover svg { transform: translateX(3px); }
  .ag-weiter-klein:hover { background: var(--f-erhaben); }
}

/* ---------------- Abschluss in der Farbe des Bereichs ---------------- */
.signal.ag-signal { background: var(--b); color: var(--b-schrift); }
.signal.ag-signal .signal-balken { color: var(--b-schrift); }
.signal.ag-signal :focus-visible { outline-color: currentColor; }

/* Ohne Bewegung: alles sofort im Endzustand */
@media (prefers-reduced-motion: reduce) {
  .ag-satz .w, .ag-schiene li::before, .ag-matrix tbody tr { transition: none; }
  .ag-an .ag-schritt { opacity: 1; }
}