/* Richtung A "Der Stromkreis" (freigegeben 25.09.2026, Umsetzung 25.09.2026). Nur die Startseite lädt diese Datei,
   zusätzlich zu css/kreis.css (gemeinsame Teile aller Seiten: Kopfleitung, Leitung, Schalter, Rückleiter, Etiketten).
   Leitidee: Strom fließt nur im geschlossenen Kreis. Eine signalrote Leitung tritt aus dem Held,
   läuft durch jede Sektion und wird am Ende vom Besucher mit dem Kontaktknopf geschlossen.
   Spur der Leitung: --spur ist der Abstand der senkrechten Leiterbahn vom Inhaltsrand. */

/* ---------- Held ---------- */
/* Haftstrecke: 60 vh (Handy 55 vh). Vorher 180/160 vh (MM 18.09.2026: "das scrollen dauert zu lang"), halbiert am
   26.09.2026 (MM: "Die animation am anfang darf nur halb so lang sein"), am 29.09.2026 von 90/80 vh auf 60/55 vh
   gekürzt (MM: "es dauert zu lang bis es weitergeht"). Die Stationen verteilt js/konzept-held.js. */
html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin){height:calc(100svh + 60vh)}
@media (max-width:680px){html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin){height:calc(100svh + 55vh);height:calc(100lvh + 55vh)}}
@media (orientation:landscape) and (max-height:500px) and (max-width:1099px){html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin){height:calc(100svh + 55vh);height:calc(100lvh + 55vh)}}
/* Tablet hoch: Strecke wie am Desktop (60 vh), Bühne wie am Handy im großen Viewport (Feinschliff 26.09.2026) */
@media (orientation:portrait) and (min-width:681px) and (max-width:1099px){html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin){height:calc(100svh + 60vh);height:calc(100lvh + 60vh)}}
/* Der Held liegt schon beim Laden unter der Kopfzeile, genau wie nach dem Einrasten: Panel und Knöpfe stehen ab der
   ersten Sekunde vollständig im Bild (vorher lagen die unteren 84 px bis zum ersten Scrollen unter dem Bildrand). */
html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin){margin-top:calc(-1 * var(--kopf-h))}

/* Strom über dem Foto: Canvas, additiv über die Bildsequenz geblendet. Hinter Überschrift und Knöpfen spart js/konzept.js den Strom weich aus. */
.strom{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;mix-blend-mode:screen}
/* Additiv auch über dem hellen Dach: screen hebt helle Flächen kaum an, plus-lighter addiert das Licht linear */
@supports (mix-blend-mode:plus-lighter){.strom{mix-blend-mode:plus-lighter}}
.strom-schatten{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
html.rm .strom,html:not(.js) .strom,.held--kein-pin .strom,html.rm .strom-schatten,.held--kein-pin .strom-schatten{display:none}
/* Mittelstufe (27.09.2026, nur mit data-held-strom="mittel" am Held, nur Desktop und Tablet quer): Licht und Schatten der
   Sonnenwellen über dem Foto (js/konzept.js, Ebene c3). hard-light statt soft-light: gleiche Wirkung (Grau neutral,
   dunkler multipliziert, heller hellt auf), aber soft-light kostete ohne CPU-Drossel 26 statt 29,7 Bilder je Sekunde.
   Ohne das Attribut, am Handy und Tablet hoch, bei reduzierter Bewegung und ohne JavaScript nicht vorhanden. */
.strom-licht{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;mix-blend-mode:hard-light;display:none}
html.js:not(.rm) .held[data-held-strom="mittel"]:not(.held--kein-pin) .strom-licht{display:block}
@media (max-width:680px),(orientation:landscape) and (max-height:500px) and (max-width:1099px),(orientation:portrait) and (max-width:1099px){.held .strom-licht{display:none!important}}
.held__h1{text-shadow:0 2px 28px rgba(12,16,42,.55)}

/* Kreis-Panel: das Glaspanel trägt ab der ersten Sekunde die Regel. Groß und lesbar (MM 18.09.2026:
   "das rechts unten ist zu klein"): ab 1100 px 600 px breit, Titel 35 px, Text 18,4 px bei 1440 px. */
.kreis-panel{position:absolute;right:var(--gutter);bottom:clamp(1.6rem,4.5vh,3rem);z-index:3;width:min(600px,44vw);
  padding:clamp(1.5rem,2.2vw,2.3rem);color:var(--creme);background:color-mix(in srgb,var(--navy-dunkel) 78%,transparent)}
/* Der Rand ist Teil des Kreises: ein Stromimpuls läuft um das Panel */
.kreis-panel::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:2px;pointer-events:none;
  background:conic-gradient(from var(--panel-winkel,0deg),transparent 0deg,transparent 300deg,var(--leiter-rot) 340deg,#fff3e6 356deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:panel-lauf 4.5s linear infinite}
@property --panel-winkel{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes panel-lauf{to{--panel-winkel:360deg}}
.kreis-panel__label{display:flex;align-items:center;gap:.6em;margin-bottom:.9rem;color:var(--creme)}
.kreis-panel__label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--leiter-rot);box-shadow:0 0 12px var(--leiter-rot)}
.kreis-panel__titel{font:600 clamp(1.75rem,1.1vw + 1.15rem,2.25rem)/1.12 var(--display);letter-spacing:-.02em;color:var(--creme);text-wrap:balance}
.kreis-panel__text{margin-top:1rem;font-size:1.15rem;line-height:1.55;color:var(--creme)}
.kreis-panel__kapitel{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:1.5rem;padding-top:1.1rem;border-top:1px solid var(--navy-linie)}
.kreis-panel__kapitel::before{content:"";position:absolute;left:10%;right:10%;top:calc(1.1rem + 6px);height:2px;margin-top:-1px;
  background:linear-gradient(90deg,var(--leiter-rot) 0,var(--leiter-rot) var(--fluss,0%),color-mix(in srgb,var(--creme) 28%,transparent) var(--fluss,0%))}
.kreis-panel__kapitel button,.kreis-panel__kapitel a{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.55rem;min-height:44px;font:500 .85rem/1.2 var(--text);color:color-mix(in srgb,var(--creme) 82%,transparent)}
.kreis-panel__kapitel span{width:12px;height:12px;border-radius:50%;background:var(--navy-dunkel);border:2px solid color-mix(in srgb,var(--creme) 55%,transparent);transition:background .3s,border-color .3s,box-shadow .3s}
.kreis-panel__kapitel [aria-current="true"]{color:var(--creme)}
.kreis-panel__kapitel [aria-current="true"] span{background:var(--leiter-rot);border-color:var(--leiter-rot);box-shadow:0 0 12px var(--leiter-rot)}
.kreis-panel__kapitel a:hover,.kreis-panel__kapitel button:hover{color:var(--creme)}
@media (min-width:1100px){
  .held__h1{font-size:clamp(2.6rem,3.2vw + 1.4rem,5.6rem);max-width:min(15ch,calc(100% - min(600px,44vw) - 64px))}
  .held__cta{max-width:calc(100% - min(600px,44vw) - 64px)}
}
@media (min-width:681px) and (max-width:1099px){
  .held__h1{font-size:clamp(2.6rem,3.2vw + 1.4rem,5.6rem);max-width:18ch}
  .held__cta{max-width:none}
}
/* Unter 1100 px steht das Panel im Fluss unter dem Text, volle Breite abzüglich Rand */
@media (max-width:1099px){
  .kreis-panel{position:relative;right:auto;bottom:auto;width:auto;margin:0 var(--gutter) clamp(1rem,3vh,1.6rem)}
  .held__intro{padding-bottom:clamp(1rem,3vh,1.6rem)}
}
@media (max-width:680px){
  .kreis-panel{margin-top:auto;padding:1.15rem 1.2rem 1.25rem}
  .kreis-panel__label{margin-bottom:.6rem}
  .kreis-panel__titel{font-size:1.35rem;line-height:1.15}
  .kreis-panel__text{font-size:1rem;margin-top:.55rem;line-height:1.5}
  .kreis-panel__kapitel{display:none}
  /* Überschrift fließend (Handy-Held 26.09.2026): "Stromfritzen und wir" bleibt bis 360 px in einer Zeile, ab 390 px
     wie vorher 2,35rem */
  .held__h1{font-size:clamp(1.9rem,calc((100vw - 2 * var(--gutter)) / 9.5),2.35rem)}
  .held__eyebrow{margin-bottom:.9rem}
  /* Beide Wege auch am Handy in einer Zeile: kürzere Beschriftung "Kreis ansehen", etwas kleinere Knöpfe */
  .held__cta{margin-top:1.1rem;gap:.6rem}
  .held__cta .knopf{padding:.85em 1.2em;font-size:.9rem;min-height:44px}
  .held__cta-lang{display:none}
}
/* Ohne Bewegung und ohne JavaScript: Panel im Lesefluss, keine Kapitelknöpfe (keine Sequenz) */
html.rm .kreis-panel,html:not(.js) .kreis-panel,.held--kein-pin .kreis-panel{position:relative;right:auto;bottom:auto;width:auto;max-width:640px;margin:0 var(--gutter) 2rem auto}
html.rm .kreis-panel__kapitel,html:not(.js) .kreis-panel__kapitel,.held--kein-pin .kreis-panel__kapitel{display:none}
html.rm .kreis-panel::after{animation:none}
/* Reduzierte Bewegung (Handy-Held 26.09.2026): Die fünf Stationen stehen als ruhige Kette unter dem Text, alle erreicht,
   die Linie durchgezogen. Sie ist dort nur Legende: js/konzept-held.js setzt sie inert (kein Tabstopp, keine Ansage),
   denn ohne Fahrt gibt es nichts anzuspringen. Sichtbar schon ab dem ersten Bild (html.rm setzt js/kopf.js im Kopf),
   damit nichts nachrutscht. Ohne JavaScript bleibt sie verborgen (dort wäre sie nicht inert). */
html.rm .held .kreis-panel__kapitel{display:grid;--fluss:100%;pointer-events:none}
html.rm .held .kreis-panel__kapitel > * span{background:var(--leiter-rot);border-color:var(--leiter-rot);box-shadow:none}
html.rm .held .kreis-panel__kapitel > *{color:var(--creme)}
@media (max-width:680px){
  html.rm .kreis-panel,html:not(.js) .kreis-panel,.held--kein-pin .kreis-panel{margin-left:var(--gutter)}
}

/* Speicher-Ausschnitt: nur während der Station Speicher, am Handy und Tablet hoch (Block Handy-Held, Punkt 6) und seit
   27.09.2026 auch am Computer und Tablet quer (Block Station Speicher am Computer), sonst nie. picture ohne eigene Box,
   damit das Bild wie vorher unmittelbar in der figure liegt (die Quelle für breite Fenster steht in index.html). */
.held__speicher{display:none}
.held__speicher picture{display:contents}

/* ---------- Handy-Held (26.09.2026) ----------
   MM: "live am handy ist die animation am anfang nicht so gut zu sehen und verstehen", dazu "Mach es perfekt bitte".
   Befund der Live-Aufnahme 390 x 844: Überschrift und Panel deckten zusammen rund drei Viertel der Höhe, im Rest lag der
   Strom über einem Stück Dachkante, das Panel zeigte keine Stationen; im Querformat (844 x 390) deckte das Panel das
   ganze Bild und die Überschrift lag außerhalb. Gilt nur mit Haftstrecke (JavaScript, ohne reduzierte Bewegung, Selektor mit :not(.held--kein-pin));
   ohne JavaScript und mit reduzierter Bewegung bleiben die Lesefluss-Regeln oben. Gilt für das Handy hoch (bis 680 px)
   und quer (höchstens 500 px hoch, höchstens 1099 px breit) und seit der Feinschliff-Runde (26.09.2026) auch für das
   Tablet hoch (bis 1099 px breit); Tablet quer und Desktop bleiben beim freigegebenen Aufbau.
   1. Bühne im großen Viewport (lvh), Text und Leiste im kleinen (svh): Blendet die Adressleiste ein oder aus, ändert sich
      keine Größe, nichts springt, und unter der Leiste liegt Bild statt leerer Fläche.
   2. Das Bild steht unter der Kopfzeile, im Hochformat vollständig: Horizont, Felder, Dach und Traufe im Bild (den Mast
      zeigt die Hochformat-Sequenz erst zum Netz hin, ab Bild 44) (Canvas js/konzept-held.js, Strom js/konzept.js, gleicher Versatz window.__held.oben). Quer neigt sich die Kamera
      mit den Stationen (js/konzept-held.js, Punkt 7).
   3. Tönung nur hinter der Schrift: oben hinter Dachzeile und Überschrift, unten hinter der Leiste.
   4. Ab dem ersten Scrollen (ist-unterwegs) treten Überschrift und Knöpfe zurück, die Dachzeile "Ihre Fläche wird
      Kraftwerk" bleibt als Titel der Fahrt. Liegt der Tastaturfokus darin, kommen sie mit ihrer Tönung zurück.
   5. Während der Fahrt ist das Panel die Stationsleiste (fünf Stationen, die aktive leuchtet, die rote Linie folgt dem
      Bild); am Ende (ist-am-ende) blendet es seinen Text ein. Das Panel liegt dafür von Anfang an in voller Größe,
      aber durchsichtig über dem Bild: Nur Farbe und Deckkraft wechseln, keine Box verschiebt sich (CLS 0).
   6. Hochformat, Station Speicher (ist-speicher): Das Hochformat zeigt den Speicher nicht, er steht rechts neben der Halle.
      Ein Ausschnitt aus demselben Querformat-Bild (img/held/speicher-ausschnitt.webp, Bild 70 der Sequenz) blendet
      sich rechts über der Leiste ein.
   7. Kernthema ab der ersten Sekunde (Feinschliff 26.09.2026): Vor dem ersten Scrollen stehen Label und Titel des Panels
      (kreis-panel__satz) als kompakte Karte, im Hochformat über der Stationsleiste, im Querformat an ihrer Stelle (dort
      reicht die Höhe nicht für beide; die Leiste kommt mit dem ersten Scrollen). Die Karte tritt mit der Überschrift
      zurück, am Ende steht sie mit dem Text im Panel. Den Weg dorthin misst js/konzept-held.js (--satz-stapel,
      --satz-tausch); verschoben wird nur per transform, keine Box ändert ihre Lage. */
@media (max-width:680px),(orientation:landscape) and (max-height:500px) and (max-width:1099px),(orientation:portrait) and (max-width:1099px){
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .held__pin{height:100lvh!important;min-height:100lvh!important;justify-content:flex-start}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .held__fallback{top:var(--kopf-h);height:calc(100% - var(--kopf-h))}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .held__intro{padding-top:calc(var(--kopf-h) + .75rem)}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .held__stage::after{background:
      linear-gradient(180deg,color-mix(in srgb,var(--navy-dunkel) 88%,transparent) 0,color-mix(in srgb,var(--navy-dunkel) 72%,transparent) calc(var(--kopf-h) + 2.4rem),transparent calc(var(--kopf-h) + 5.5rem)),
      linear-gradient(0deg,color-mix(in srgb,var(--navy-dunkel) 62%,transparent) 0,transparent 8.5rem)}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .held__stage::after{background:
      linear-gradient(180deg,color-mix(in srgb,var(--navy-dunkel) 88%,transparent) 0,color-mix(in srgb,var(--navy-dunkel) 72%,transparent) calc(var(--kopf-h) + 2.4rem),transparent calc(var(--kopf-h) + 5.5rem)),
      linear-gradient(0deg,color-mix(in srgb,var(--navy-dunkel) 62%,transparent) 0,color-mix(in srgb,var(--navy-dunkel) 62%,transparent) calc(100lvh - 100svh),transparent calc(100lvh - 100svh + 8.5rem))}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .held__intro::before{content:"";position:absolute;inset:0 0 -4.5rem;z-index:-1;pointer-events:none;transition:opacity .45s ease;
    background:linear-gradient(180deg,color-mix(in srgb,var(--navy-dunkel) 66%,transparent) 0,color-mix(in srgb,var(--navy-dunkel) 58%,transparent) calc(100% - 4.5rem),transparent 100%)}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .held__h1,html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .held__cta{transition:opacity .35s ease,transform .45s ease}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin).ist-unterwegs .held__intro::before,html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin).ist-unterwegs .held__h1,html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin).ist-unterwegs .held__cta{opacity:0;pointer-events:none}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin).ist-unterwegs .held__h1,html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin).ist-unterwegs .held__cta{transform:translateY(-.75rem)}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin).ist-unterwegs .held__intro:focus-within::before,html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin).ist-unterwegs .held__intro:focus-within .held__h1,html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin).ist-unterwegs .held__intro:focus-within .held__cta{opacity:1;transform:none;pointer-events:auto}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .kreis-panel{position:absolute;left:var(--gutter);right:var(--gutter);top:auto;width:auto;max-width:none;margin:0;padding:1.05rem 1.2rem 1.1rem;
    bottom:clamp(.75rem,2.2vh,1.25rem);bottom:calc(100lvh - 100svh + clamp(.75rem,2.2vh,1.25rem));
    pointer-events:none;background-color:transparent;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;
    transition:background-color .4s ease,border-color .4s ease,-webkit-backdrop-filter .4s ease,backdrop-filter .4s ease}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .kreis-panel::before,html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .kreis-panel::after{opacity:0;transition:opacity .4s ease}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin).ist-am-ende .kreis-panel{pointer-events:auto;background-color:color-mix(in srgb,var(--navy-dunkel) 78%,transparent);border-color:var(--glas-rand);
    -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%)}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin).ist-am-ende .kreis-panel::before,html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin).ist-am-ende .kreis-panel::after{opacity:1}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .kreis-panel__text{opacity:0;transform:translateY(.6rem);transition:opacity .35s ease,transform .45s ease}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin).ist-am-ende .kreis-panel__text{opacity:1;transform:none}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .kreis-panel__satz{position:relative;z-index:1;border-radius:14px;opacity:0;pointer-events:none;transform:translateY(var(--satz-stapel,0px));
    background-color:color-mix(in srgb,var(--navy-dunkel) 84%,transparent);
    box-shadow:0 0 0 .55rem color-mix(in srgb,var(--navy-dunkel) 84%,transparent),0 0 0 calc(.55rem + 1px) var(--glas-rand);
    transition:opacity .35s ease,transform .45s ease,background-color .4s ease,box-shadow .4s ease}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin).satz-gemessen:not(.ist-unterwegs) .kreis-panel__satz{opacity:1}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin).ist-am-ende .kreis-panel__satz{opacity:1;transform:none;background-color:transparent;box-shadow:0 0 0 .55rem transparent,0 0 0 calc(.55rem + 1px) transparent}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .kreis-panel__kapitel{display:grid;pointer-events:auto;margin-top:.9rem;padding-top:.75rem;border-radius:14px;border-top-color:transparent;
    background-color:color-mix(in srgb,var(--navy-dunkel) 84%,transparent);
    box-shadow:0 0 0 .55rem color-mix(in srgb,var(--navy-dunkel) 84%,transparent),0 0 0 calc(.55rem + 1px) var(--glas-rand);
    transition:background-color .4s ease,box-shadow .4s ease,border-top-color .4s ease,border-radius .4s ease}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin).ist-am-ende .kreis-panel__kapitel{border-radius:0;border-top-color:var(--navy-linie);background-color:transparent;
    box-shadow:0 0 0 .55rem transparent,0 0 0 calc(.55rem + 1px) transparent}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .kreis-panel__kapitel::before{top:calc(.75rem + 6px)}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .kreis-panel__kapitel button,html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .kreis-panel__kapitel a{gap:.45rem;font-size:.82rem;transition:color .3s ease}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .held__speicher{display:none}
}
@media (orientation:portrait) and (max-width:1099px),(max-width:680px) and (min-height:501px){
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .held__speicher{display:block;position:absolute;right:var(--gutter);z-index:3;width:min(44vw,190px);aspect-ratio:5/3;margin:0;
    bottom:calc(clamp(.75rem,2.2vh,1.25rem) + 1.1rem + .75rem + 45px + 1.25rem);
    bottom:calc(100lvh - 100svh + clamp(.75rem,2.2vh,1.25rem) + 1.1rem + .75rem + 45px + 1.25rem);
    border-radius:12px;overflow:hidden;border:1px solid var(--glas-rand);box-shadow:0 10px 30px rgba(12,16,42,.45);
    opacity:0;transform:translateX(1.25rem);pointer-events:none;transition:opacity .4s ease,transform .5s ease}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .held__speicher img{display:block;width:100%;height:100%;object-fit:cover}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin).ist-speicher .held__speicher{opacity:1;transform:none}
}
/* ---------- Station Speicher am Computer und Tablet quer (27.09.2026) ----------
   Befund: Im Querformat steht der Speicher unten rechts im Bild und liegt in den geprüften Größen 1024 x 768 bis
   1920 x 1080 ganz oder bis auf einen Rand am Bildende unter dem Panel; die Leiste sagt "Speicher", zu sehen war keiner. Derselbe Ausschnitt wie am Handy (Bild 70 der Sequenz, hier aus dem
   1920 px breiten Einzelbild zugeschnitten, img/held/speicher-ausschnitt-535.webp) steigt während der Station aus dem
   Panel auf und steht rechtsbündig darüber, 16 px Luft zum Panel. Lage und Breite (höchstens 400 px, ein Viertel der
   Breite) misst js/konzept-held.js (speicherLegen); speicher-passt steht nur, wenn Kopfzeile, Dachzeile, Überschrift und
   Knöpfe frei bleiben. Ohne JavaScript, bei reduzierter Bewegung und ohne Haftstrecke bleibt der Ausschnitt aus. */
@media (min-width:1100px),(min-width:681px) and (orientation:landscape) and (min-height:501px){
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin).speicher-passt .held__speicher{display:block;position:absolute;z-index:3;margin:0;
    right:var(--speicher-rechts);bottom:var(--speicher-unten);width:var(--speicher-b);aspect-ratio:5/3;
    border-radius:var(--radius);overflow:hidden;border:1px solid var(--glas-rand);box-shadow:0 18px 44px rgba(12,16,42,.5);
    opacity:0;transform:translateY(1.25rem) scale(.96);transform-origin:50% 100%;pointer-events:none;
    transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
  /* Das Bild setzt sich beim Aufsteigen: es kommt leicht vergrößert und fährt in 1,2 s auf den Ausschnitt zurück */
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin).speicher-passt .held__speicher img{display:block;width:100%;height:100%;object-fit:cover;
    transform:scale(1.12);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin).speicher-passt.ist-speicher .held__speicher{opacity:1;transform:none}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin).speicher-passt.ist-speicher .held__speicher img{transform:none}
}
/* Handy hoch: Titel des Panels kompakt, vor dem ersten Scrollen und am Ende gleich groß (sonst verschöbe sich der Text) */
@media (max-width:680px){
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .kreis-panel__titel{font-size:max(1rem,min(1.2rem,4.6vw));line-height:1.18}
}
/* Niedrige Handys hoch (bis 700 px, etwa 375 x 667): Überschrift eine Stufe kleiner, damit Überschrift, Knöpfe, Satz
   und Leiste zusammen mindestens ein Drittel Bild frei lassen */
@media (max-width:680px) and (max-height:700px) and (orientation:portrait){
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .held__h1{font-size:clamp(1.7rem,calc((100vw - 2 * var(--gutter)) / 10.8),2rem)}
}
/* Tablet hoch: Panel und Leiste nicht über die ganze Breite, Speicher-Ausschnitt größer */
@media (orientation:portrait) and (min-width:681px) and (max-width:1099px){
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .kreis-panel{right:auto;width:min(680px,calc(100% - 2 * var(--gutter)))}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .held__speicher{width:28vw}
}
/* Handy quer: Überschrift links oben kleiner, Leiste und Panel links unten, rechts bleibt das Bild mit Speicher und Mast frei */
@media (orientation:landscape) and (max-height:500px) and (max-width:1099px){
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .held__h1{font-size:1.85rem;line-height:1.06;max-width:min(28ch,76%)}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .held__eyebrow{margin-bottom:.6rem}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .held__cta{margin-top:.8rem;max-width:none}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .held__cta .knopf{padding:.8em 1.3em;font-size:.88rem;min-height:44px}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .kreis-panel{right:auto;width:min(500px,64%);padding:.8rem 1rem .85rem}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .kreis-panel__label{margin-bottom:.4rem}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .kreis-panel__titel{font-size:1.05rem;line-height:1.15}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .kreis-panel__text{font-size:.88rem;line-height:1.45;margin-top:.4rem}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .kreis-panel__kapitel{margin-top:.6rem}
  /* Vor dem ersten Scrollen steht der Satz an der Stelle der Leiste, die Leiste kommt mit der Fahrt (Punkt 7) */
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .kreis-panel__satz{transform:translateY(var(--satz-tausch,0px))}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .kreis-panel__kapitel{transition:opacity .35s ease,background-color .4s ease,box-shadow .4s ease,border-top-color .4s ease,border-radius .4s ease}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin).satz-gemessen:not(.ist-unterwegs) .kreis-panel__kapitel{opacity:0;pointer-events:none}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin).satz-gemessen:not(.ist-unterwegs) .kreis-panel__kapitel:focus-within{opacity:1;pointer-events:auto}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin).satz-gemessen:not(.ist-unterwegs) .kreis-panel:has(.kreis-panel__kapitel:focus-within) .kreis-panel__satz{opacity:0}
}
/* Querformat klein (29.09.2026): Fenster 681 bis 1099 px breit und 501 bis 760 px hoch (kleines Notebook, Tablet quer
   mit Leisten, geteilter Bildschirm). Der Aufbau von Tablet quer (Text über dem ganzen Panel, beides unten bündig) war
   dort höher als das Fenster: Die Bühne schnitt oben ab, Dachzeile und Überschrift lagen unter der Kopfzeile (gemessen
   900 x 600: Dachzeile ab y 2, Kopfzeile bis 85; 800 x 520: Überschrift ab y -31; betroffen bis 1099 x 720).
   Lösung: Aufbau und Zeilenfall bleiben, nur die Höhen folgen der Fensterhöhe. Jeder Wert läuft linear von der
   kompakten Stufe bei 501 px Höhe zum bisherigen Wert bei 760 px (clamp: nie kleiner als kompakt, nie größer als
   bisher), an der Obergrenze also ohne Sprung. Oben hält die Bühne Kopfhöhe plus 1 rem frei; passte der Inhalt einmal
   nicht, beginnt er dort (safe) und läuft unten aus, statt oben unter der Kopfzeile zu verschwinden.
   Nur mit Haftstrecke (JavaScript, ohne reduzierte Bewegung): Ohne sie liegt der Held im Fluss unter der Kopfzeile. */
@media (orientation:landscape) and (min-width:681px) and (max-width:1099px) and (min-height:501px) and (max-height:760px){
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .held__pin{justify-content:safe flex-end;padding-top:calc(var(--kopf-h) + 1rem)}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .held__intro{padding-top:0}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .held__eyebrow{margin-bottom:clamp(.6rem,4.94vh - 15.16px,1.4rem)}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .held__h1{font-size:clamp(1.75rem,11.43vh - 29.26px,clamp(2.6rem,3.2vw + 1.4rem,5.6rem))}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .held__cta{margin-top:clamp(.8rem,7.8vh - 26.27px,clamp(1.6rem,3vw,2.4rem))}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .held__cta .knopf{padding-block:clamp(.8em,.88vh + 7.75px,.95em);min-height:44px}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .kreis-panel{padding-block:clamp(.8rem,4.4vh - 9.25px,clamp(1.5rem,2.2vw,2.3rem))}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .kreis-panel__label{margin-bottom:clamp(.4rem,3.09vh - 9.07px,.9rem)}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .kreis-panel__titel{font-size:clamp(1.1rem,4.98vh - 7.35px,clamp(1.75rem,1.1vw + 1.15rem,2.25rem))}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .kreis-panel__text{font-size:clamp(.9rem,1.54vh + 6.66px,1.15rem);margin-top:clamp(.4rem,3.71vh - 12.17px,1rem)}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .kreis-panel__kapitel{margin-top:clamp(.5rem,6.18vh - 22.95px,1.5rem);padding-top:clamp(.6rem,3.09vh - 5.87px,1.1rem)}
  html.js:not(.rm) .held[data-held-modus="voll"]:not(.held--kein-pin) .kreis-panel__kapitel::before{top:calc(clamp(.6rem,3.09vh - 5.87px,1.1rem) + 6px)}
}

/* ---------- Übergänge: alle Abschnitte liegen auf demselben dunklen Grund, die Leitung läuft ohne Schnitt durch ---------- */
.aktuell,.bauteile,.kreis,.schalter-abschnitt{background:var(--navy-dunkel);isolation:isolate;overflow:hidden}

/* ---------- Leistungen: fünf Bauteile in Reihe ---------- */
.bauteile .hg{position:absolute;inset:0;z-index:-1;
  background:radial-gradient(60% 50% at 22% 30%,rgba(28,36,86,.9),transparent 70%),radial-gradient(45% 40% at 78% 62%,rgba(163,24,42,.32),transparent 72%),
    radial-gradient(40% 35% at 55% 85%,rgba(90,36,72,.4),transparent 70%),#0c1030;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.bauteile .hg .nebel-canvas,.bauteile .hg canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.bauteile__wrap{position:relative}
.leiter-einlauf{left:calc(var(--gutter) + var(--spur));top:calc(var(--raum) * -.5)}
.bauteile__kopf,.kreis__kopf{padding-left:calc(var(--zeichen-b) + 1.5rem)}
.bauteile__liste{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.bauteil{--rand:clamp(3rem,5vw,4.5rem);position:relative;display:grid;grid-template-columns:var(--zeichen-b) minmax(0,1fr) minmax(0,.95fr);
  grid-template-areas:"zeichen text bild";column-gap:clamp(1.5rem,3.5vw,3.5rem);align-items:start;padding-block:var(--rand)}
.bauteil:nth-child(even){grid-template-columns:minmax(0,.95fr) minmax(0,1fr) var(--zeichen-b);grid-template-areas:"bild text zeichen"}
.bauteil__eingang{top:calc(var(--rand) * .4);left:var(--spur)}
.bauteil:nth-child(even) .bauteil__eingang{left:auto;right:var(--spur)}
.bauteil__zeichen{grid-area:zeichen;position:relative;justify-self:center;width:80px;height:120px;margin-top:.4rem}
.bauteil__oben{left:50%;top:0}
.bauteil__unten{left:50%;bottom:0}
.bauteil__zeichen svg{width:100%;height:100%;overflow:visible;fill:none;stroke:color-mix(in srgb,var(--creme) 42%,transparent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transition:stroke .45s,filter .45s}
.bauteil__zeichen svg .dick{stroke-width:7}
.bauteil__zeichen svg .voll{fill:currentColor;stroke:none}
.bauteil__zeichen{color:color-mix(in srgb,var(--creme) 42%,transparent)}
.bauteil__zeichen::after{content:"";position:absolute;left:50%;top:50%;width:132px;height:132px;margin:-66px 0 0 -66px;border-radius:50%;border:2px solid var(--leiter-rot);opacity:0;transform:scale(.3);pointer-events:none}
.bauteil.ist-an .bauteil__zeichen{color:var(--leiter-rot)}
.bauteil.ist-an .bauteil__zeichen svg{stroke:var(--leiter-rot);filter:drop-shadow(0 0 5px var(--leiter-rot)) drop-shadow(0 0 18px rgba(208,29,36,.7))}
html.js:not(.rm) .bauteil.ist-an .bauteil__zeichen::after{animation:zuendung .9s var(--ease) 1}
@keyframes zuendung{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.35)}}
.bauteil__text{grid-area:text;padding-top:.5rem}
.bauteil__nr{display:block;font:600 .8rem/1 var(--display);letter-spacing:.22em;color:var(--rot-hell)}
.bauteil__titel{font:600 clamp(2rem,2.2vw + 1rem,3.4rem)/1 var(--display);letter-spacing:-.03em;margin:.8rem 0 1.1rem;color:var(--creme);transition:color .6s,text-shadow .6s;hyphens:manual}
.bauteil__text p{color:var(--navy-mute);max-width:46ch;font-size:1.05rem}
.bauteil__link{display:inline-flex;align-items:center;gap:.5em;min-height:44px;margin-top:.8rem;font:600 .95rem/1 var(--display);color:var(--creme);border-bottom:1.5px solid var(--leiter-rot)}
.bauteil__link::after{content:"";width:18px;height:2px;background:var(--leiter-rot);transition:width .3s var(--ease)}
.bauteil__link:hover::after{width:30px}
.bauteil__bild{grid-area:bild;position:relative;margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/11;background:#0a0d24}
.bauteil__bild img{width:100%;height:100%;object-fit:cover;transition:filter 1.1s var(--ease),transform 1.6s var(--ease)}
.bauteil__bild::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(255,236,220,.55) 48%,rgba(208,29,36,.35) 54%,transparent 70%);transform:translateX(-120%);opacity:0}
/* Aus-Zustand nur mit JavaScript und Bewegung: Bild dunkel, Titel gedämpft; der Strom schaltet es ein */
html.js:not(.rm) .bauteil:not(.ist-an) .bauteil__bild img{filter:grayscale(1) brightness(.38) contrast(1.1);transform:scale(1.05)}
html.js:not(.rm) .bauteil:not(.ist-an) .bauteil__titel{color:color-mix(in srgb,var(--creme) 58%,transparent)}
html.js:not(.rm) .bauteil.ist-an .bauteil__titel{text-shadow:0 0 28px rgba(208,29,36,.45)}
html.js:not(.rm) .bauteil.ist-an .bauteil__bild::after{animation:blitz-sweep 1.1s var(--ease) 1}
html.js:not(.rm) .bauteil.ist-an .bauteil__bild{box-shadow:0 0 0 1.5px var(--leiter-rot),0 0 40px rgba(208,29,36,.28);transition:box-shadow .8s}
@keyframes blitz-sweep{0%{transform:translateX(-120%);opacity:1}100%{transform:translateX(120%);opacity:0}}
@media (max-width:899px){
  .bauteil,.bauteil:nth-child(even){grid-template-columns:var(--zeichen-b) minmax(0,1fr);grid-template-areas:"zeichen text" ". bild";column-gap:1rem;row-gap:1.4rem}
  .bauteil:nth-child(even) .bauteil__eingang{left:var(--spur);right:auto}
  .bauteil__zeichen{width:48px;height:72px;margin-top:.2rem}
  .bauteil__zeichen::after{width:84px;height:84px;margin:-42px 0 0 -42px}
  .bauteil__titel{font-size:clamp(1.7rem,6.4vw,2.2rem);margin:.6rem 0 .8rem}
  .bauteil__text p{font-size:1rem}
  .bauteile__kopf,.kreis__kopf{padding-left:calc(var(--zeichen-b) + 1rem)}
}

/* ---------- Der Kreis: Anlagen und Region im selben Ring, dazwischen der Knoten ---------- */
.kreis::before{content:"";position:absolute;inset:-60px;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle at 2px 2px,color-mix(in srgb,var(--creme) 17%,transparent) 1.3px,transparent 1.8px);background-size:30px 30px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 55%,#000 25%,transparent 72%);mask-image:radial-gradient(ellipse at 50% 55%,#000 25%,transparent 72%);
  animation:raster 26s linear infinite}
@keyframes raster{to{transform:translate(30px,30px)}}
.kreis::after{content:"";position:absolute;left:50%;top:58%;width:min(900px,120vw);height:min(900px,120vw);margin:calc(min(900px,120vw) / -2) 0 0 calc(min(900px,120vw) / -2);z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(208,29,36,.22) 0%,rgba(208,29,36,.06) 38%,transparent 62%);animation:glimmen 4s ease-in-out infinite alternate}
@keyframes glimmen{from{opacity:.55;transform:scale(.94)}to{opacity:1;transform:scale(1.04)}}
.kreis__ring{position:relative;margin-inline:var(--spur);display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,1.05fr) minmax(0,1fr);
  column-gap:clamp(1.5rem,3vw,3.5rem);align-items:center;padding-block:clamp(3rem,5vw,4.5rem);border:2px solid color-mix(in srgb,var(--creme) 14%,transparent);border-radius:40px}
.kreis__svg{position:absolute;left:-2px;top:-2px;width:calc(100% + 4px);height:calc(100% + 4px);overflow:visible;pointer-events:none}
.kreis__svg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.kreis__ring-glut{stroke:var(--leiter-rot);stroke-width:14;opacity:.18}
.kreis__ring-kern{stroke:var(--leiter-rot);stroke-width:3}
.kreis__speiche{stroke:var(--leiter-rot);stroke-width:2.5;stroke-dasharray:4 12;opacity:0;transition:opacity .6s}
.kreis__ring.knoten-an .kreis__speiche{opacity:1;animation:speiche-fluss 1.1s linear infinite}
@keyframes speiche-fluss{to{stroke-dashoffset:-16}}
.kreis__impuls-hof{fill:var(--leiter-rot);opacity:.35}
.kreis__impuls-kern{fill:#fff3e6}
.kreis__anker-ein{left:-1px;top:40px}
.kreis__anker-aus{right:-1px;bottom:40px}
.kreis__seite{position:relative;z-index:1;align-self:start}
/* Anlagen links, seit 27.09.2026 fünf statt neun (Vorgabe Kay Braune: Projekte nach Größe statt Adressen): die Seite füllt
   die Ringhöhe, die Punkte verteilen sich über die ganze linke Ringkante, statt oben zusammenzurücken. */
@media (min-width:900px){
  .kreis__seite--quellen{align-self:stretch;display:flex;flex-direction:column}
  .kreis__seite--quellen .kreis__liste{flex:1;justify-content:space-around;gap:1.6rem}
  /* Foto über dem Namen statt Briefmarke daneben; die Fotobreite folgt der Größenklasse (groß, mittel, kleiner). */
  .kreis__seite--quellen .kreis__punkt{grid-template-columns:minmax(0,1fr);grid-template-areas:"bild" "name" "zusatz" "beleg";row-gap:.2rem;align-items:start}
  .kreis__seite--quellen .kreis__bild{width:100%;height:auto;aspect-ratio:16/10;margin-bottom:.7rem;border-radius:14px}
  .kreis__seite--quellen .kreis__punkt--mittel .kreis__bild{width:84%}
  .kreis__seite--quellen .kreis__punkt--klein .kreis__bild{width:68%}
  .kreis__seite--quellen .kreis__punkt::before,.kreis__seite--quellen .kreis__dot{top:calc(.45rem + 40px)}
}
.kreis__seitenkopf{display:flex;flex-direction:column;gap:.55rem;margin-bottom:1.3rem;padding-left:1.6rem}
.kreis__seitenkopf strong{font:600 clamp(1.4rem,.8vw + 1.1rem,1.9rem)/1.1 var(--display);color:var(--creme);letter-spacing:-.015em}
.kreis__liste{display:flex;flex-direction:column;gap:.9rem}
.kreis__punkt{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-areas:"bild name" "bild zusatz" ". beleg";column-gap:.9rem;align-items:center;padding:.45rem 0 .45rem 1.6rem;min-height:60px}
/* Etikett (Punkt 16, 29.09.2026, Variante A): Kennung, Quelle und Datum stehen unter Name und Zusatz in der Textspalte und brechen am Handy um, statt abzuschneiden */
.kreis__etikett{grid-area:beleg;justify-self:start;max-width:30rem;margin-top:.55rem}
.kreis__punkt::before{content:"";position:absolute;left:0;top:calc(.45rem + 24px);width:1.35rem;height:2px;margin-top:-1px;background:color-mix(in srgb,var(--creme) 22%,transparent);transition:background .4s}
.kreis__dot{position:absolute;left:0;top:calc(.45rem + 24px);width:12px;height:12px;margin:-6px 0 0 -7px;border-radius:50%;background:var(--navy-dunkel);border:2px solid color-mix(in srgb,var(--creme) 45%,transparent);transition:background .35s,border-color .35s,box-shadow .35s;z-index:2}
.kreis__bild,.kreis__zeichen{grid-area:bild;width:48px;height:48px;border-radius:10px;object-fit:cover;align-self:center}
.kreis__bild{filter:grayscale(.6) brightness(.8);transition:filter .6s}
.kreis__zeichen{border:1.5px solid color-mix(in srgb,var(--creme) 20%,transparent);position:relative}
/* Glyphe Region: Schaltzeichen Lampe; Glyphe Anlage: Modulraster */
.kreis__zeichen::before,.kreis__zeichen::after{content:"";position:absolute;left:50%;top:50%}
.kreis__zeichen::before{width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:2px solid color-mix(in srgb,var(--creme) 55%,transparent)}
.kreis__zeichen::after{width:16px;height:16px;margin:-8px 0 0 -8px;background:
  linear-gradient(45deg,transparent calc(50% - 1px),color-mix(in srgb,var(--creme) 55%,transparent) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)),
  linear-gradient(-45deg,transparent calc(50% - 1px),color-mix(in srgb,var(--creme) 55%,transparent) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px))}
.kreis__zeichen--modul::before{width:26px;height:20px;margin:-10px 0 0 -13px;border-radius:2px;background:
  linear-gradient(90deg,transparent 7px,color-mix(in srgb,var(--creme) 55%,transparent) 7px 9px,transparent 9px 16px,color-mix(in srgb,var(--creme) 55%,transparent) 16px 18px,transparent 18px),
  linear-gradient(0deg,transparent 8px,color-mix(in srgb,var(--creme) 55%,transparent) 8px 10px,transparent 10px)}
.kreis__zeichen--modul::after{display:none}
.kreis__name{grid-area:name;font:600 1.02rem/1.25 var(--display);color:var(--creme);align-self:end}
.kreis__zusatz{grid-area:zusatz;font-size:.9rem;line-height:1.4;color:var(--navy-mute);align-self:start}
.kreis__punkt.an .kreis__dot{background:var(--leiter-rot);border-color:var(--leiter-rot)}
.kreis__punkt.an::before{background:var(--leiter-rot)}
.kreis__punkt.an .kreis__bild{filter:none}
.kreis__punkt.blitz .kreis__dot{background:#fff3e6;box-shadow:0 0 0 4px rgba(208,29,36,.45),0 0 22px var(--leiter-rot)}
.kreis__punkt.blitz .kreis__name{color:#fff}
/* Region rechts: gespiegelt, der Punkt sitzt auf dem rechten Ringrand */
@media (min-width:900px){
  .kreis__seite--region .kreis__seitenkopf{padding-left:0;padding-right:1.6rem;align-items:flex-end;text-align:right}
  .kreis__seite--region .kreis__punkt{grid-template-columns:minmax(0,1fr) 48px;grid-template-areas:"name bild" "zusatz bild" "beleg .";padding:.45rem 1.6rem .45rem 0;text-align:right}
  .kreis__seite--region .kreis__etikett{justify-self:end}
  .kreis__seite--region .kreis__punkt::before{left:auto;right:0}
  .kreis__seite--region .kreis__dot{left:auto;right:0;margin:-6px -7px 0 0}
}
.kreis__knoten{position:relative;z-index:1;padding:clamp(1.6rem,2.6vw,2.6rem);border-radius:26px;text-align:center;
  background:color-mix(in srgb,var(--navy) 72%,transparent);border:1.5px solid color-mix(in srgb,var(--creme) 18%,transparent);transition:border-color .6s,box-shadow .6s}
.kreis__knoten-label{display:block;margin-bottom:1.2rem;line-height:1.5}
/* Beschriftungen im Kreis-Abschnitt hell wie bei den Bauteilen (.bauteile .label unten): Über dem roten Glimmen des
   Abschnitts fiel Rot-hell an einem Teil der Scrolllagen unter 4,5:1 ("Hier kommt er an" bis 3,91:1, "Der Knoten" bis
   4,41:1, Feinabtastung 26.09.2026). Das Bild des Abschnitts bleibt unverändert. */
.kreis .label{color:#f3c9c9}
/* Roter Punkt wie Dachzeile und Panel-Label im Helden: das Signal Rot bleibt am Label, die Schrift bleibt hell (Gegenprüfung 27.09.2026, K1) */
.kreis .label::before{content:"";display:inline-block;width:8px;height:8px;margin-right:.6em;vertical-align:.08em;border-radius:50%;background:var(--leiter-rot);box-shadow:0 0 12px var(--leiter-rot)}
.label{line-height:1.5}
.kreis__regel{margin:0}
.kreis__regel p{font:600 clamp(1.5rem,1.3vw + 1rem,2.35rem)/1.14 var(--display);letter-spacing:-.02em;color:var(--creme);text-wrap:balance}
.kreis__kay{margin:1.8rem 0 0;padding-top:1.4rem;border-top:1px solid var(--navy-linie)}
.kreis__kay p{font:italic 500 1.05rem/1.55 var(--text);color:var(--creme)}
.kreis__person{margin-top:.6rem;font:500 .95rem/1.4 var(--text);color:var(--creme)}
.kreis__knoten-etikett{display:inline-block;margin-top:1rem;max-width:100%}
.kreis__ring.knoten-an .kreis__knoten{border-color:var(--leiter-rot);box-shadow:0 0 0 1px var(--leiter-rot),0 0 60px rgba(208,29,36,.32)}
html.js:not(.rm) .kreis__ring.knoten-an .kreis__regel p{animation:regel-an 1.2s var(--ease) 1}
@keyframes regel-an{0%{text-shadow:0 0 0 transparent}35%{text-shadow:0 0 24px rgba(255,210,190,.9),0 0 48px rgba(208,29,36,.8)}100%{text-shadow:0 0 0 transparent}}
/* 900 bis 1179 px (05.10.2026): drei Spalten ließen den Seiten nur 166 bis 257 px, lange Wörter brachen mitten im Wort
   ("Weihnachtsess en"). Hier steht der Knoten oben über beide Spalten, darunter Anlagen und Vereine nebeneinander. */
@media (min-width:900px) and (max-width:1179px){
  .kreis__ring{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"knoten knoten" "quellen region";row-gap:clamp(2.4rem,4vw,3.4rem);align-items:start}
  .kreis__knoten{grid-area:knoten;justify-self:center;width:min(100%,560px)}
  .kreis__seite--quellen{grid-area:quellen}
  .kreis__seite--region{grid-area:region}
}
@media (max-width:899px){
  .kreis__ring{grid-template-columns:minmax(0,1fr);row-gap:2.6rem;margin-left:var(--spur);margin-right:calc(10px - var(--gutter));padding:2.4rem 1rem 2.4rem 0;border-radius:28px}
  .kreis__anker-ein{top:28px}
  .kreis__anker-aus{bottom:28px}
  .kreis__knoten{margin-left:1.2rem;text-align:left}
}

/* ---------- Der Schalter ---------- */
.schalter-abschnitt::before{content:"";position:absolute;left:50%;bottom:-20%;width:min(1100px,150vw);height:min(1100px,150vw);margin-left:calc(min(1100px,150vw) / -2);z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(208,29,36,.26) 0%,rgba(208,29,36,.07) 36%,transparent 60%);animation:glimmen 3.2s ease-in-out infinite alternate}
.schalter-abschnitt__kopf{text-align:center;max-width:880px;margin-inline:auto}
.schalter-abschnitt__kopf .h2{max-width:18ch;margin:.9rem auto 0}
.schalter-abschnitt__kopf .lead{margin:1.3rem auto 0}
.schalter-abschnitt__faq{margin:clamp(3rem,5vw,4.5rem) auto 0}

/* ---------- Reduzierte Bewegung: alles steht, der Kreis ist gezeichnet ---------- */
@media (prefers-reduced-motion:reduce){
  .kreis-panel::after,.kreis::before,.kreis::after,.schalter-abschnitt::before,.kreis__speiche,.schalter__kontakt--ziel{animation:none!important}
  .bauteil__bild img,.schalter__hebel{transition:none}
}

/* Tablet (681 bis 1099 px): Die Überschrift steht dort mitten auf dem hellen Dach (ohne Strom gemessen 3,1 bis 3,6:1).
   Eine weiche dunkle Fläche hinter dem Textblock hebt den Kontrast, ohne das Foto abzudecken. */
@media (min-width:681px) and (max-width:1099px){
  .held__intro::before{content:"";position:absolute;inset:-3rem -1rem -1.5rem;z-index:-1;pointer-events:none;
    background:radial-gradient(ellipse 75% 65% at 35% 55%,rgba(12,16,42,.55),rgba(12,16,42,0) 78%)}
}

/* Leistungen, Nachbesserung 25.09.2026: Der Nebel läuft schneller und tiefrot (#a3182a) statt Signalrot und Creme.
   Texte deshalb deckend statt halbtransparent und Rot-Texte aufgehellt, damit sie auch auf dem roten Nebel lesbar bleiben. */
.bauteile .label,.bauteile .bauteil__nr{color:#f3c9c9}
.bauteile .lead,.bauteile .bauteil__text p{color:#d9dae4}
html.js:not(.rm) .bauteile .bauteil:not(.ist-an) .bauteil__titel{color:#b8bacb}

/* `cc-d4-3d-kippkarten-mit-lichtring-und-glanz` mit `cc-technik-css-3d-szene` und `cc-technik-zeiger-lichtquelle`
   (Ausbau 25.09.2026): Das Bild eines Bauteils kippt unter dem Zeiger wie eine Karte in einer 3D-Szene, ein Glanz
   wandert mit, und um den Rahmen läuft ein Lichtring, solange Zeiger oder Tastaturfokus im Bauteil stehen. Per Tastatur
   (Fokus auf "Mehr zu ...") steht das Bild leicht gekippt mit Ring. Bei reduzierter Bewegung kein Kippen, der Ring steht. */
.bauteil__bild[data-kipp]{transform:perspective(900px) rotateX(var(--kx,0deg)) rotateY(var(--ky,0deg));transition:transform .6s var(--ease),box-shadow .8s}
.bauteil__bild[data-kipp].kippt{transition:transform .12s linear,box-shadow .8s}
.kipp__glanz{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,244,236,.2) 50%,transparent 70%);transform:translateX(var(--gx,-130%));transition:transform .25s}
.kipp__ring{position:absolute;inset:0;z-index:3;border-radius:inherit;padding:2px;pointer-events:none;opacity:0;transition:opacity .35s;
  background:conic-gradient(from var(--strom-winkel),transparent 0 58%,var(--rot) 80%,#ffe2cf 89%,transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:strom-umlauf 3.2s linear infinite;animation-play-state:paused}
.bauteil:hover .kipp__ring,.bauteil:focus-within .kipp__ring{opacity:1;animation-play-state:running}
.bauteil:focus-within .bauteil__bild[data-kipp]:not(.kippt){--kx:3deg;--ky:-5deg;--gx:20%}
@media (hover:none){.kipp__glanz{display:none}}
@media (prefers-reduced-motion:reduce){
  .bauteil__bild[data-kipp],.bauteil:focus-within .bauteil__bild[data-kipp]:not(.kippt){transform:none;transition:none}
  .kipp__ring{animation:none}
  .kipp__glanz{display:none}
}

/* ---------- Leistungen seit 28.09.2026: Ladegrafik im Bauteil 03, Abzweig mit den Ergänzungen ----------
   Die Grafik folgt dem Aus-Zustand der Fotos (dunkel und grau, bis der Strom das Bauteil erreicht). */
.bauteil__bild .ladegrafik{position:absolute;inset:0;transition:filter 1.1s var(--ease),transform 1.6s var(--ease)}
html.js:not(.rm) .bauteil:not(.ist-an) .ladegrafik{filter:grayscale(1) brightness(.45) contrast(1.1);transform:scale(1.05)}
html.js:not(.rm) .bauteil:not(.ist-an) .ladegrafik__fluss{animation-play-state:paused}
/* Abzweig: steht nach der Liste und wäre dort das vierte, also ein gerades Kind; Spalten und Eingang deshalb ausdrücklich
   links wie bei den ungeraden Bauteilen. Kleiner als ein Bauteil: kein Bild, zwei Einträge mit ihrem Schaltzeichen. */
.bauteil.bauteil--abzweig{grid-template-columns:var(--zeichen-b) minmax(0,1fr);grid-template-areas:"zeichen text";padding-block:calc(var(--rand) * .7) var(--rand)}
.bauteil.bauteil--abzweig .bauteil__eingang{left:var(--spur);right:auto}
.abzweig{grid-area:text;padding-top:.5rem}
.abzweig__titel{font:600 clamp(1.5rem,1.1vw + 1rem,2.3rem)/1.05 var(--display);letter-spacing:-.02em;margin:.8rem 0 0;color:var(--creme);transition:color .6s}
.abzweig__liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem);margin:clamp(1.4rem,2.5vw,2rem) 0 0;padding:0;list-style:none}
.abzweig__eintrag{display:grid;grid-template-columns:40px minmax(0,1fr);gap:1rem;align-items:start}
.abzweig__zeichen{width:40px;height:60px;overflow:visible;fill:none;color:color-mix(in srgb,var(--creme) 42%,transparent);stroke:currentColor;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;transition:color .45s,filter .45s}
.abzweig__zeichen .dick{stroke-width:7}
.abzweig__zeichen .voll{fill:currentColor;stroke:none}
.abzweig__name{font:600 clamp(1.2rem,.6vw + 1rem,1.55rem)/1.1 var(--display);letter-spacing:-.015em;color:var(--creme);margin:0 0 .5rem;hyphens:manual}
.abzweig__eintrag p{color:#d9dae4;max-width:44ch;font-size:1rem}
.abzweig__eintrag .bauteil__link{margin-top:.4rem}
.bauteil.ist-an .abzweig__zeichen{color:var(--leiter-rot);filter:drop-shadow(0 0 4px var(--leiter-rot))}
html.js:not(.rm) .bauteile .bauteil--abzweig:not(.ist-an) .abzweig__titel{color:#b8bacb}
@media (max-width:899px){
  .bauteil.bauteil--abzweig{grid-template-columns:var(--zeichen-b) minmax(0,1fr)}
  .abzweig__liste{grid-template-columns:minmax(0,1fr)}
  .abzweig__eintrag{grid-template-columns:32px minmax(0,1fr);gap:.8rem}
  .abzweig__zeichen{width:32px;height:48px}
}
@media (prefers-reduced-motion:reduce){.bauteil__bild .ladegrafik,.abzweig__zeichen{transition:none}}

/* ---------- Aktuell (05.10.2026): drei Meldungen an der Sammelschiene direkt nach dem Held ----------
   Grundzustand ist "eingeschaltet" (ohne JavaScript und bei reduzierter Bewegung so sichtbar). Nur mit JavaScript und
   Bewegung sind Rahmen und Lampen aus, bis der Strom sie erreicht. Die Schrift bleibt in beiden Zuständen gleich hell,
   der Kontrast hängt nicht am Strom. */
.aktuell{padding-block:clamp(4.2rem,7vw,7rem) clamp(2.5rem,4vw,3.5rem)}
.aktuell::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(42% 60% at 86% 0,rgba(163,24,42,.26),transparent 70%),radial-gradient(50% 50% at 15% 100%,rgba(28,36,86,.8),transparent 70%)}
.aktuell__schiene{left:calc(max(0px,(100% - 1360px) / 2) + var(--gutter) + var(--spur));top:clamp(1.6rem,2.6vw,2.4rem)}
.aktuell__kopf,.aktuell__karten{padding-left:calc(var(--zeichen-b) + 1.5rem)}
.aktuell__kopf{margin-bottom:clamp(1.8rem,3vw,2.6rem)}
.aktuell__label{display:inline-flex;align-items:center;gap:.65em;margin-bottom:.9rem;color:#f3c9c9;font-size:.8rem}
.aktuell__lampe{width:11px;height:11px;border-radius:50%;background:var(--leiter-rot);box-shadow:0 0 0 4px rgba(208,29,36,.2),0 0 16px var(--leiter-rot)}
html.js:not(.rm) .aktuell__lampe{animation:melde-puls 1.4s ease-in-out 4}
@keyframes melde-puls{0%,100%{box-shadow:0 0 0 4px rgba(208,29,36,.2),0 0 16px var(--leiter-rot)}50%{box-shadow:0 0 0 9px rgba(208,29,36,.08),0 0 30px var(--leiter-rot)}}
.aktuell__karten{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,1.6vw,1.5rem);align-items:stretch}
.aktuell__knoten,.meldung__knoten,.kreis__akzent-knoten{position:absolute;width:0;height:0;pointer-events:none;z-index:5}
.aktuell__knoten{left:var(--spur);top:1.9rem}
.meldung__knoten{display:none}
.aktuell__knoten::after,.meldung__knoten::after,.kreis__akzent-knoten::after{content:"";position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;
  background:var(--leiter-rot);border:2px solid var(--leiter-rot);box-sizing:border-box;box-shadow:0 0 0 4px rgba(208,29,36,.18),0 0 16px var(--leiter-rot);transition:background .4s,border-color .4s,box-shadow .4s}
html.js:not(.rm) .aktuell__knoten:not(.an)::after,html.js:not(.rm) .meldung__knoten:not(.an)::after,html.js:not(.rm) .kreis__akzent-knoten:not(.an)::after{background:var(--navy-dunkel);border-color:color-mix(in srgb,var(--creme) 40%,transparent);box-shadow:none}
.meldung{position:relative;display:flex;flex-direction:column;padding:clamp(1.4rem,2vw,2rem);border-radius:var(--radius);
  background:color-mix(in srgb,var(--navy) 88%,#000);border:1.5px solid var(--leiter-rot);box-shadow:0 0 0 1px rgba(208,29,36,.35),0 0 44px rgba(208,29,36,.22);
  transition:border-color .6s,box-shadow .6s}
.meldung::before{content:"";position:absolute;left:clamp(1.4rem,2vw,2rem);right:clamp(1.4rem,2vw,2rem);top:-1.5px;height:3px;border-radius:2px;background:var(--leiter-rot);box-shadow:0 0 14px var(--leiter-rot);transform-origin:0 50%;transition:transform .8s var(--ease)}
.meldung__kennung{display:flex;align-items:center;gap:.6em;margin:0 0 1rem;font:600 .74rem/1.4 var(--display);letter-spacing:.2em;text-transform:uppercase;color:#f3c9c9}
.meldung__lampe{flex:none;width:10px;height:10px;border-radius:50%;background:var(--leiter-rot);box-shadow:0 0 12px var(--leiter-rot);transition:background .4s,box-shadow .4s}
.meldung__titel{margin:0 0 1rem;font:600 clamp(1.45rem,.8vw + 1.05rem,1.95rem)/1.08 var(--display);letter-spacing:-.02em;color:var(--creme);text-wrap:balance;hyphens:manual}
.meldung__text{margin:0 0 .75rem;color:color-mix(in srgb,var(--creme) 78%,transparent);font-size:1rem;line-height:1.6}
.meldung__link{margin-top:auto;align-self:flex-start;padding-top:.6rem}
.meldung__quelle{margin:.9rem 0 0;font-size:.82rem;line-height:1.45;color:color-mix(in srgb,var(--creme) 72%,transparent)}
.meldung__quelle a{color:var(--creme);text-decoration:underline;text-decoration-color:var(--leiter-rot);text-underline-offset:3px}
.meldung__quelle time{white-space:nowrap}
/* Die helle Meldung: Gemeinnützigkeit soll man nicht überlesen */
.meldung--hell{background:var(--creme);color:var(--tinte)}
.meldung--hell .meldung__kennung{color:#b3171e}
.meldung--hell .meldung__titel{color:var(--navy)}
.meldung--hell .meldung__text{color:var(--tinte)}
.meldung--hell .bauteil__link{color:var(--navy)}
/* Aus-Zustand: nur mit JavaScript und Bewegung, bis die Leitung die Meldung erreicht */
html.js:not(.rm) .meldung{border-color:color-mix(in srgb,var(--creme) 18%,transparent);box-shadow:none}
html.js:not(.rm) .meldung::before{transform:scaleX(0)}
html.js:not(.rm) .meldung__lampe{background:color-mix(in srgb,var(--creme) 28%,transparent);box-shadow:none}
html.js:not(.rm) .meldung--hell .meldung__lampe{background:color-mix(in srgb,var(--navy) 28%,transparent)}
.aktuell__karten:has(> .aktuell__knoten.an) .meldung,html.js .meldung:has(> .meldung__knoten.an){border-color:var(--leiter-rot);box-shadow:0 0 0 1px rgba(208,29,36,.35),0 0 44px rgba(208,29,36,.22)}
.aktuell__karten:has(> .aktuell__knoten.an) .meldung::before,html.js .meldung:has(> .meldung__knoten.an)::before{transform:scaleX(1)}
html .aktuell__karten:has(> .aktuell__knoten.an) .meldung__lampe,html.js .meldung:has(> .meldung__knoten.an) .meldung__lampe{background:var(--leiter-rot);box-shadow:0 0 12px var(--leiter-rot)}
.aktuell__karten:has(> .aktuell__knoten.an) .meldung:nth-of-type(2),.aktuell__karten:has(> .aktuell__knoten.an) .meldung:nth-of-type(2)::before,.aktuell__karten:has(> .aktuell__knoten.an) .meldung:nth-of-type(2) .meldung__lampe{transition-delay:.18s}
.aktuell__karten:has(> .aktuell__knoten.an) .meldung:nth-of-type(3),.aktuell__karten:has(> .aktuell__knoten.an) .meldung:nth-of-type(3)::before,.aktuell__karten:has(> .aktuell__knoten.an) .meldung:nth-of-type(3) .meldung__lampe{transition-delay:.36s}
@media (min-width:900px) and (max-width:1179px){
  .aktuell__karten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .meldung--hell{grid-column:1 / -1}
}
@media (max-width:899px){
  .aktuell__kopf,.aktuell__karten{padding-left:calc(var(--zeichen-b) + 1rem)}
  .aktuell__karten{grid-template-columns:minmax(0,1fr)}
  .aktuell__knoten{display:none}
  .meldung__knoten{display:block;left:calc(var(--spur) - var(--zeichen-b) - 1rem - 1.5px);top:1.75rem}
  .meldung{padding:1.3rem 1.15rem 1.25rem}
  .meldung::before{left:1.15rem;right:1.15rem}
  .meldung__titel{font-size:clamp(1.35rem,5.6vw,1.6rem)}
}

/* ---------- Gemeinnützigkeit (05.10.2026): helle Akzentfläche oben im Kreis ---------- */
.kreis__akzent{position:relative;margin-left:calc(var(--zeichen-b) + 1.5rem);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1.6rem,3.4vw,3.4rem);align-items:start;
  padding:clamp(1.6rem,3.4vw,3.4rem) clamp(1.6rem,3.4vw,3.4rem) clamp(1.6rem,3.4vw,3.4rem) clamp(2rem,3.8vw,3.8rem);border-radius:26px;background:var(--creme);color:var(--tinte);
  box-shadow:0 0 0 1.5px var(--leiter-rot),0 0 60px rgba(208,29,36,.28),0 30px 80px rgba(0,0,0,.35);transition:box-shadow .8s}
.kreis__akzent::before{content:"";position:absolute;left:0;top:clamp(1.6rem,3.4vw,3.4rem);bottom:clamp(1.6rem,3.4vw,3.4rem);width:6px;border-radius:0 4px 4px 0;background:var(--leiter-rot)}
.kreis__akzent-knoten{left:calc(var(--spur) - var(--zeichen-b) - 1.5rem);top:clamp(2.2rem,4vw,4rem)}
.kreis .kreis__akzent .label{color:#b3171e}
.kreis__akzent .h2{margin-top:.9rem;color:var(--navy);font-size:clamp(2.1rem,2.3vw + 1.1rem,4rem)}
.kreis__akzent-satz{margin:1.3rem 0 0;max-width:40ch;font:500 clamp(1.12rem,.5vw + 1rem,1.4rem)/1.5 var(--text);color:var(--tinte)}
.kreis__akzent-zahl{display:flex;align-items:center;gap:1rem;margin:0 0 1.3rem}
.kreis__akzent-zahl b{font:700 clamp(4.2rem,5.6vw,6.6rem)/.85 var(--display);letter-spacing:-.04em;color:#b3171e;font-variant-numeric:tabular-nums}
.kreis__akzent-zahl span{max-width:22ch;font:600 1.02rem/1.35 var(--display);color:var(--navy)}
.kreis__akzent-namen{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.kreis__akzent-namen li{position:relative;padding:.42rem .85rem .42rem 1.75rem;border:1.5px solid color-mix(in srgb,var(--navy) 18%,transparent);border-radius:999px;font:500 .9rem/1.25 var(--text);color:var(--navy);background:#fff}
.kreis__akzent-namen li::before{content:"";position:absolute;left:.75rem;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--leiter-rot);transition:background .35s,box-shadow .35s}
html.js:not(.rm) .kreis__akzent{box-shadow:0 30px 80px rgba(0,0,0,.35)}
html.js:not(.rm) .kreis__akzent-namen li::before{background:color-mix(in srgb,var(--navy) 25%,transparent)}
html.js .kreis__akzent:has(> .kreis__akzent-knoten.an){box-shadow:0 0 0 1.5px var(--leiter-rot),0 0 60px rgba(208,29,36,.28),0 30px 80px rgba(0,0,0,.35)}
html.js .kreis__akzent:has(> .kreis__akzent-knoten.an) .kreis__akzent-namen li::before{background:var(--leiter-rot);box-shadow:0 0 8px var(--leiter-rot)}
.kreis__akzent-namen li:nth-child(2)::before{transition-delay:.07s}.kreis__akzent-namen li:nth-child(3)::before{transition-delay:.14s}.kreis__akzent-namen li:nth-child(4)::before{transition-delay:.21s}
.kreis__akzent-namen li:nth-child(5)::before{transition-delay:.28s}.kreis__akzent-namen li:nth-child(6)::before{transition-delay:.35s}.kreis__akzent-namen li:nth-child(7)::before{transition-delay:.42s}
.kreis__akzent-namen li:nth-child(8)::before{transition-delay:.49s}.kreis__akzent-namen li:nth-child(9)::before{transition-delay:.56s}.kreis__akzent-namen li:nth-child(10)::before{transition-delay:.63s}
.kreis__akzent-namen li:nth-child(11)::before{transition-delay:.7s}
.kreis__unterzeile{margin:clamp(1.6rem,2.6vw,2.2rem) 0 clamp(2.5rem,5vw,4.5rem) calc(var(--zeichen-b) + 1.5rem)}
@media (max-width:1099px){.kreis__akzent{grid-template-columns:minmax(0,1fr)}}
@media (max-width:899px){
  .kreis__akzent{margin-left:calc(var(--zeichen-b) + 1rem);padding:1.5rem 1.15rem 1.5rem 1.5rem;border-radius:22px;gap:1.4rem}
  .kreis__akzent::before{top:1.5rem;bottom:1.5rem;width:5px}
  .kreis__akzent-knoten{left:calc(var(--spur) - var(--zeichen-b) - 1rem);top:2.1rem}
  .kreis__akzent .h2{font-size:clamp(1.75rem,7.4vw,2.3rem)}
  .kreis__akzent-zahl b{font-size:3.6rem}
  .kreis__akzent-namen{gap:.4rem}
  .kreis__akzent-namen li{padding:.3rem .6rem .3rem 1.3rem;font-size:.78rem}
  .kreis__akzent-namen li::before{left:.5rem;width:6px;height:6px;margin-top:-3px}
  .kreis__unterzeile{margin-left:calc(var(--zeichen-b) + 1rem)}
}
@media (prefers-reduced-motion:reduce){
  .meldung,.meldung::before,.meldung__lampe,.aktuell__lampe,.kreis__akzent,.kreis__akzent-namen li::before,.aktuell__knoten::after,.meldung__knoten::after,.kreis__akzent-knoten::after{transition:none!important;animation:none!important}
}
/* Fotonachweis in den Bauteilen der Startseite (05.10.2026): am Handy ist das Bild nur rund 280 px breit, der Nachweis bleibt kompakt */
@media (max-width:899px){.bauteil__bild .bild-nachweis{font-size:.62rem;line-height:1.3;padding:.22rem .5rem}}