/* Der Stromkreis, gemeinsame Teile aller Seiten (Richtung A, freigegeben 25.09.2026, Umsetzung 25.09.2026):
   Leitung im Kopf, Leitung durch die Seite (SVG aus js/konzept.js), Knoten, Schalter, Rückleiter im Fuß, Etiketten.
   Die Startseite lädt zusätzlich css/konzept.css (Held, Leistungen, Ring). */

:root{--spur:60px;--zeichen-b:120px;--leiter-rot:#D01D24;--glut:rgba(208,29,36,.55)}
@media (max-width:899px){:root{--spur:28px;--zeichen-b:56px}}

/* Anker der Leitung: unsichtbare Punkte ohne Ausdehnung, js/konzept.js liest ihre Lage */
.leiter-marke{position:absolute;width:0;height:0;pointer-events:none}

/* ---------- Kopf: die Leitung im Kopf zeigt, wie weit der Kreis geschlossen ist ---------- */
.kopf__leiter{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;pointer-events:none}
.kopf__leiter i{display:block;height:100%;background:var(--leiter-rot);transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 12px var(--glut)}
html.kreis-zu .kopf__leiter i{background:var(--creme);transform:scaleX(1)!important;transition:background .2s;animation:kopf-blitz .9s ease-out 1}
@keyframes kopf-blitz{0%{box-shadow:0 0 0 var(--glut)}40%{box-shadow:0 0 28px 6px var(--leiter-rot)}100%{box-shadow:0 0 12px var(--glut)}}
/* Vollbildmenü: die Einträge hängen als Knoten an einer Leitung */
.menue-voll__liste{position:relative;padding-left:calc(var(--gutter) + 2rem)}
.menue-voll__liste::before{content:"";position:absolute;left:calc(var(--gutter) + .45rem);top:.55em;bottom:.55em;width:2px;background:var(--leiter-rot);box-shadow:0 0 14px var(--glut)}
.menue-voll__liste a{position:relative}
.menue-voll__liste a::before{content:"";position:absolute;left:-1.55rem;top:50%;width:.7rem;height:.7rem;margin-top:-.35rem;border-radius:50%;background:var(--navy-dunkel);border:2px solid var(--leiter-rot)}
.menue-voll__liste a[aria-current="page"]::before{background:var(--leiter-rot);box-shadow:0 0 12px var(--leiter-rot)}

/* ---------- Leitung der Seite (SVG, js/konzept.js) ---------- */
.leiter{position:absolute;left:0;top:0;z-index:4;pointer-events:none;overflow:visible}
.leiter path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.leiter__vorschau{stroke:color-mix(in srgb,var(--creme) 24%,transparent);stroke-width:1.5;stroke-dasharray:2 8}
.leiter__glut{stroke:var(--leiter-rot);stroke-width:14;opacity:.2}
.leiter__kern{stroke:var(--leiter-rot);stroke-width:3}
.leiter__blitz{stroke:#fff6ec;stroke-width:5;opacity:0}
.leiter__impuls-hof{fill:var(--leiter-rot);opacity:.35}
.leiter__impuls-kern{fill:#fff3e6}
.leiter__kopf{fill:#fff3e6;filter:drop-shadow(0 0 6px var(--leiter-rot)) drop-shadow(0 0 16px var(--leiter-rot))}
html.kreis-zu .leiter__kern{stroke:#ffd9c7;transition:stroke .25s}
html.kreis-zu .leiter__glut{opacity:.55;stroke-width:22;transition:opacity .25s,stroke-width .25s}

.schalter{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.4rem;margin:clamp(3.5rem,6vw,5.5rem) auto 0;max-width:440px}
.schalter__bild{position:relative;width:100%}
.schalter__anker-rechts{right:0;top:66.667%}
.schalter__anker-links{left:0;top:66.667%}
.schalter__svg{display:block;width:100%;height:auto;overflow:visible;fill:none;stroke-linecap:round}
.schalter__draht{stroke-width:3}
.schalter__draht--tot{stroke:color-mix(in srgb,var(--creme) 28%,transparent)}
.schalter__draht--live{stroke:var(--leiter-rot);filter:drop-shadow(0 0 6px var(--leiter-rot))}
.schalter__hebel{stroke:var(--creme);stroke-width:5;transform-box:view-box;transform-origin:150px 80px;transform:rotate(-30deg);transition:transform .55s cubic-bezier(.3,1.5,.5,1),stroke .3s}
.schalter__kontakt{fill:var(--navy-dunkel);stroke:var(--creme);stroke-width:3}
.schalter__kontakt--ziel{stroke:var(--leiter-rot)}
.schalter.unter-spannung .schalter__kontakt--ziel{animation:funke 1.1s ease-in-out infinite}
@keyframes funke{0%,100%{filter:drop-shadow(0 0 2px var(--leiter-rot))}50%{filter:drop-shadow(0 0 10px var(--leiter-rot)) drop-shadow(0 0 22px #ff8a5c)}}
.schalter:has(.schalter__knopf:hover) .schalter__hebel,.schalter:has(.schalter__knopf:focus-visible) .schalter__hebel{transform:rotate(-12deg)}
.schalter.ist-zu .schalter__hebel{transform:rotate(0deg);stroke:#fff3e6}
.schalter.ist-zu .schalter__draht--tot{stroke:var(--leiter-rot);filter:drop-shadow(0 0 8px var(--leiter-rot))}
.schalter__knopf{font-size:1.02rem;padding:1.1em 2em}
.schalter__direkt{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem 1.6rem;color:var(--navy-mute);font-size:.95rem}
.schalter__direkt a{display:inline-flex;align-items:center;min-height:44px}
.schalter__direkt a:hover{color:var(--creme)}
html.kreis-zu body::after{content:"";position:fixed;inset:0;z-index:150;pointer-events:none;background:radial-gradient(ellipse at 50% 70%,rgba(255,210,190,.28),rgba(208,29,36,.18) 45%,transparent 75%);animation:durchleuchten .9s ease-out forwards}
@keyframes durchleuchten{0%{opacity:0}30%{opacity:1}100%{opacity:.4}}
@media (max-width:680px){.schalter__knopf{white-space:normal;text-align:center;justify-content:center;line-height:1.3}}

/* ---------- Fuß: der Rückleiter zeigt zum Anfang ---------- */
.fussleiste{padding-top:0}
.rueckleiter{position:relative;height:clamp(5rem,7vw,6rem);margin-bottom:clamp(1rem,2vw,1.5rem)}
.rueckleiter__a{left:calc(var(--gutter) + var(--spur));top:3.4rem}
.rueckleiter__b{right:calc(var(--gutter) + var(--spur));top:3.4rem}
.rueckleiter__c{right:calc(var(--gutter) + var(--spur));top:.6rem}
.rueckleiter__link{position:absolute;right:calc(var(--gutter) + var(--spur) + 1.1rem);top:.2rem;display:inline-flex;align-items:center;min-height:44px;font:600 .9rem/1.2 var(--display);color:var(--creme)}
.rueckleiter__link:hover{color:var(--rot-hell)}
.rueckleiter::after{content:"";position:absolute;right:calc(var(--gutter) + var(--spur) - 6px);top:.35rem;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:9px solid var(--leiter-rot)}
@media (max-width:899px){
  .rueckleiter__a{left:10px}
  .rueckleiter__b,.rueckleiter__c{right:10px}
  .rueckleiter::after{right:4px}
  .rueckleiter__link{right:1.6rem}
}

/* ---------- Unterseiten: die Leitung läuft im linken Rand, Knoten an jedem Abschnitt ---------- */
/* Die Spur liegt mitten im Seitenrand (halber Rand vom Inhaltsbeginn), damit sie keinen Text kreuzt. */
/* --rail: Lage der Spur im Rand. Am Handy (Nachbesserung S4) enger an den Rand, damit Knoten und Glut keine Nummer berühren. */
.kreis-unterseite{--rail:calc(var(--gutter) * .5)}
@media (max-width:680px){.kreis-unterseite{--rail:6px}}
.leiter-knoten{left:calc(max(0px,(100% - 1360px) / 2) + var(--rail,calc(var(--gutter) * .5)));top:2.4rem;z-index:5}
.leiter-knoten::after{content:"";position:absolute;left:-6px;top:-6px;width:12px;height:12px;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}
.abschnitt--creme .leiter-knoten::after{background:var(--creme);border-color:color-mix(in srgb,var(--navy) 40%,transparent)}
.leiter-knoten.an::after{background:var(--leiter-rot);border-color:var(--leiter-rot);box-shadow:0 0 0 4px rgba(208,29,36,.18),0 0 16px var(--leiter-rot)}
.kreis-unterseite .rueckleiter__a{left:var(--rail)}
.kreis-unterseite .rueckleiter__b,.kreis-unterseite .rueckleiter__c{right:var(--rail)}
.kreis-unterseite .rueckleiter::after{right:calc(var(--rail) - 6px)}
.kreis-unterseite .rueckleiter__link{right:calc(var(--rail) + 1.1rem)}
/* Handy: schmalere Glut, kleinerer Knoten und Impuls, damit neben der Spur mindestens 6 px bis zum Text frei bleiben */
@media (max-width:680px){
  .kreis-unterseite .leiter-knoten::after{left:-5px;top:-5px;width:10px;height:10px}
  .kreis-unterseite .leiter-knoten.an::after{box-shadow:0 0 0 3px rgba(208,29,36,.18),0 0 10px var(--leiter-rot)}
  .kreis-unterseite .leiter__glut{stroke-width:8}
  html.kreis-zu .kreis-unterseite .leiter__glut{stroke-width:12}
  .kreis-unterseite .leiter__impuls-hof{transform:scale(.6)}
}
/* Auf hellem Grund liest sich die Vorschau der Leitung dunkel */
.kreis-unterseite .leiter__vorschau{stroke:color-mix(in srgb,var(--rot) 30%,transparent)}

/* ---------- Etiketten, Variante A "Anschluss" (Punkt 16, 29.09.2026): dunkles Glas mit Leiterbahn ----------
   MM 29.09.2026 wörtlich: "Ich finde das mit beweissstück und dann so weiß kariert nicht schön das passt nicht in die
   technisch aufwendige optik des rests finde ich". Inhalt unverändert: Kennung, öffentliche Quelle, Datum.
   Statt der hellen Karte ein dunkles Glasplättchen wie Kreis-Panel und Knoten, innen eine feine rote Leiterbahn mit
   Kontaktpunkt. Der Kontaktpunkt steht dunkel mit rotem Ring wie die Knoten im Menü und leuchtet rot, sobald der Ring den
   Punkt erreicht; dabei blitzt der Rand einmal kurz auf. Rechte Ringseite gespiegelt, die Leiterbahn liegt zum Ring hin. */
:root{--etikett-text:color-mix(in srgb,var(--creme) 84%,var(--navy));--etikett-kennung:#f3c9c9;--etikett-rand:color-mix(in srgb,var(--creme) 16%,transparent)}
.etikett{position:relative;display:block;text-align:left;padding:.55rem .85rem .62rem 2rem;border-radius:12px;
  background:linear-gradient(140deg,rgba(23,30,69,.95),rgba(12,16,48,.92));border:1px solid var(--etikett-rand);
  box-shadow:inset 0 1px 0 rgba(251,250,246,.07),0 18px 34px -24px rgba(0,0,0,.95);
  font:500 .8rem/1.45 var(--display);letter-spacing:.01em;color:var(--etikett-text)}
.etikett::before{content:"";position:absolute;left:1rem;top:1rem;width:10px;height:10px;margin:-5px 0 0 -5px;box-sizing:border-box;border-radius:50%;
  background:var(--leiter-rot);border:2px solid var(--leiter-rot);box-shadow:0 0 10px var(--leiter-rot);transition:background .35s,box-shadow .35s}
.etikett::after{content:"";position:absolute;left:1rem;top:calc(1rem + 6px);bottom:.7rem;width:2px;margin-left:-1px;border-radius:1px;
  background:linear-gradient(180deg,var(--leiter-rot),rgba(208,29,36,.18));box-shadow:0 0 6px rgba(208,29,36,.5);transition:opacity .35s,box-shadow .35s}
.etikett__nr{display:block;margin-bottom:.18rem;font:600 .68rem/1.35 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--etikett-kennung);font-variant-numeric:tabular-nums}
.etikett__quelle{display:block;overflow-wrap:anywhere}
.etikett__quelle time{white-space:nowrap;color:var(--creme);font-variant-numeric:tabular-nums}
/* Aus, bis der Ring ankommt (nur mit JavaScript und Bewegung) */
html.js:not(.rm) .kreis__punkt:not(.an) .etikett::before{background:var(--navy-dunkel);box-shadow:none}
html.js:not(.rm) .kreis__ring:not(.knoten-an) .kreis__knoten-etikett::before{background:var(--navy-dunkel);box-shadow:none}
html.js:not(.rm) .abschnitt:has(.leiter-knoten:not(.an)) .regel-zitat__etikett::before{background:var(--navy-dunkel);box-shadow:none}
html.js:not(.rm) .kreis__punkt:not(.an) .etikett::after{opacity:.3;box-shadow:none}
html.js:not(.rm) .kreis__ring:not(.knoten-an) .kreis__knoten-etikett::after{opacity:.3;box-shadow:none}
html.js:not(.rm) .abschnitt:has(.leiter-knoten:not(.an)) .regel-zitat__etikett::after{opacity:.3;box-shadow:none}
html.js:not(.rm) .kreis__punkt.an .etikett{animation:etikett-an 1s var(--ease) 1}
html.js:not(.rm) .kreis__ring.knoten-an .kreis__knoten-etikett{animation:etikett-an 1s var(--ease) 1}
html.js:not(.rm) .abschnitt:has(.leiter-knoten.an) .regel-zitat__etikett{animation:etikett-an 1s var(--ease) 1}
@keyframes etikett-an{0%{border-color:var(--leiter-rot);box-shadow:inset 0 1px 0 rgba(251,250,246,.07),0 0 0 1px var(--leiter-rot),0 0 28px rgba(208,29,36,.5)}
  100%{border-color:var(--etikett-rand);box-shadow:inset 0 1px 0 rgba(251,250,246,.07),0 18px 34px -24px rgba(0,0,0,.95)}}
@media (min-width:900px){
  .kreis__seite--region .etikett{padding:.55rem 2rem .62rem .85rem;text-align:right}
  .kreis__seite--region .etikett::before{left:auto;right:1rem;margin:-5px -5px 0 0}
  .kreis__seite--region .etikett::after{left:auto;right:1rem;margin:0 -1px 0 0}
}
@media (prefers-reduced-motion:reduce){.etikett{animation:none!important}.etikett::before,.etikett::after{transition:none}}

/* ---------- Schalter im Kontaktformular ---------- */
.schalter--formular{align-items:flex-start;margin:0;max-width:none;gap:1rem}
.schalter--formular .schalter__bild{max-width:300px}
.schalter--formular .schalter__draht--tot{stroke:color-mix(in srgb,var(--navy) 30%,transparent)}
.schalter--formular .schalter__hebel{stroke:var(--navy)}
.schalter--formular .schalter__kontakt{fill:var(--creme);stroke:var(--navy)}
.schalter--formular .schalter__kontakt--ziel{stroke:var(--leiter-rot)}
.schalter--formular.ist-zu .schalter__hebel{stroke:var(--leiter-rot)}

/* ---------- 404: der unterbrochene Kreis ---------- */
.bruch{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,420px);gap:clamp(2rem,5vw,5rem);align-items:center}
.bruch__svg{width:100%;height:auto;overflow:visible;fill:none;stroke-linecap:round}
.bruch__ring-glut{stroke:var(--leiter-rot);stroke-width:16;opacity:.2}
.bruch__ring{stroke:var(--leiter-rot);stroke-width:4}
.bruch__ende{fill:var(--navy-dunkel);stroke:var(--creme);stroke-width:3}
.bruch__funke{stroke:#ffe2cf;stroke-width:2.5;opacity:0}
.bruch__impuls{fill:#fff3e6}
.bruch__impuls-hof{fill:var(--leiter-rot);opacity:.35}
html.js:not(.rm) .bruch__funke{animation:funke-bruch 1.6s ease-in-out infinite}
html.js:not(.rm) .bruch__funke:nth-of-type(2){animation-delay:.35s}
html.js:not(.rm) .bruch__funke:nth-of-type(3){animation-delay:.8s}
@keyframes funke-bruch{0%,55%,100%{opacity:0}62%{opacity:1}70%{opacity:.2}76%{opacity:.9}}
@media (max-width:760px){.bruch{grid-template-columns:minmax(0,1fr)}.bruch__bild{max-width:300px}}

/* ---------- Reduzierte Bewegung: gemeinsame Teile stehen ---------- */
@media (prefers-reduced-motion:reduce){
  .schalter__kontakt--ziel,.bruch__funke{animation:none!important}
  .schalter__hebel{transition:none}
}

/* ---------- Über uns: die Regel als Zitat mit Etikett ---------- */
.regel-zitat{margin:clamp(1.8rem,3vw,2.6rem) 0 0;max-width:32ch}
.regel-zitat p{font:600 clamp(1.6rem,1.6vw + 1rem,2.6rem)/1.15 var(--display);letter-spacing:-.02em;color:var(--creme);text-wrap:balance}
.regel-zitat__etikett{display:inline-block;margin-top:1.2rem;max-width:100%}
.regel-zitat__weiter{margin-top:1.6rem;max-width:62ch;color:var(--creme);line-height:1.6}
/* Kontaktseite: gespiegelt, damit der Kontakt unter Spannung links liegt, wo die Leitung aus dem Seitenrand ankommt */
.schalter--formular .schalter__svg{transform:scaleX(-1)}

/* ---------- Nachbesserung 25.09.2026 (H10): Unterseiten auf lebendigem Grund ----------
   MM 18.09.2026: "kein Abschnitt mit stehendem einfarbigem Hintergrund". Leistungen, Über uns, Kontakt, Impressum und
   Datenschutz tragen body.nebel-seite: ein Nebel hinter der ganzen Seite (js/nebel.js, 2D, Tiefe beim Scrollen), alle
   Abschnitte darüber durchsichtig. Textfarben wie im Nebel der Startseite (css/konzept.css, .bauteile): Fließtext #d9dae4,
   Etiketten #f3c9c9, gemessen in _pruefung/umsetzung_A_2026-09-25 (Kontrast Unterseiten). Rechtstexte auf ruhiger Karte. */
.nebel-seite{--nebel-text:#d9dae4;--nebel-label:#f3c9c9;--nebel-fehler:#f5c2c4;--nebel-nr:color-mix(in srgb,var(--rot) 45%,var(--creme))}
body.nebel-seite{background:#0c1030}
.seiten-nebel{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:-1;pointer-events:none;
  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}
.seiten-nebel .nebel-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.nebel-seite .abschnitt--navy,.nebel-seite .abschnitt--navy.stapel .stapel__karte,.nebel-seite .sequenz{background:transparent}
/* Kartenstapel: der Rahmen ist jetzt durchsichtig, eine halb ausgeblendete Karte ließe die darunterliegende durchscheinen.
   Deshalb bleibt jede Karte deckend, das Zurücktreten zeigt nur noch die Verkleinerung aus js/effekte.js. */
.nebel-seite .stapel__karte-inner{opacity:1!important}
.nebel-seite .fussleiste{background:color-mix(in srgb,var(--navy-dunkel) 78%,transparent)}
.nebel-seite .leiter__vorschau{stroke:color-mix(in srgb,var(--creme) 24%,transparent)}
.nebel-seite .abschnitt--navy .label,.nebel-seite .sequenz .label{color:var(--nebel-label)}
.nebel-seite .lead,.nebel-seite .mute{color:var(--nebel-text)}
/* Speicher-Sequenz: nur die Farben, Ablauf und Maße unverändert */
.nebel-seite .sequenz{color:var(--creme)}
.nebel-seite .sequenz__zeilen h2,.nebel-seite .sequenz__zeilen h3{color:var(--creme)}
.nebel-seite .sequenz__zeilen p{color:var(--nebel-text)}
.nebel-seite .sequenz--aktiv .sequenz__balken{background:var(--navy-linie)}
.nebel-seite .sequenz__buehne{box-shadow:0 30px 80px -40px rgba(0,0,0,.75)}
/* Über uns: Referenzen */
.nebel-seite .beweis__zaehlung,.nebel-seite .beweis__ort{color:var(--nebel-text)}
.nebel-seite .beweis__zaehlung b{color:var(--creme)}
.nebel-seite .beweis__nr{color:var(--nebel-nr)}
.nebel-seite .beweis__titel{border-top-color:var(--navy-linie)}
/* Aufdeckung: ein Vorhang in Abschnittsfarbe stünde als dunkler Block auf dem Nebel. Stattdessen taucht das Bild aus dem
   Nebel auf (Deckkraft und der bestehende Zoom). Der Vorhang läuft unsichtbar weiter, sein transitionend räumt wie bisher auf
   (js/effekte.js unverändert). Ohne JavaScript und bei reduzierter Bewegung setzt effekte.js die Klasse nicht, Bild steht. */
.nebel-seite .beweis__rahmen{background:transparent}
.nebel-seite .aufdecken--bereit::before{background:transparent}
.nebel-seite .aufdecken--bereit img{opacity:0}
.nebel-seite .aufdecken--bereit.ist-da img{opacity:1;transition-property:transform,opacity;transition-duration:1.15s,.9s;transition-timing-function:var(--ease-fest),ease-out}
/* Kontakt: Formular hell auf dunklem Grund */
.nebel-seite .formular{color-scheme:dark}
.nebel-seite .formular__feld input,.nebel-seite .formular__feld select,.nebel-seite .formular__feld textarea{background:color-mix(in srgb,var(--navy-dunkel) 72%,transparent);border-color:color-mix(in srgb,var(--creme) 40%,transparent);color:var(--creme)}
.nebel-seite .formular__feld input:focus,.nebel-seite .formular__feld select:focus,.nebel-seite .formular__feld textarea:focus{border-color:var(--rot)}
.nebel-seite .formular__feld select option{background:var(--navy-dunkel);color:var(--creme)}
.nebel-seite .formular__einwilligung,.nebel-seite .formular__hinweis{color:var(--nebel-text)}
.nebel-seite .formular__einwilligung a{color:var(--creme)}
.nebel-seite .formular__status{color:var(--nebel-fehler)}
.nebel-seite .schalter--formular .schalter__draht--tot{stroke:color-mix(in srgb,var(--creme) 35%,transparent)}
.nebel-seite .schalter--formular .schalter__hebel{stroke:var(--creme)}
.nebel-seite .schalter--formular .schalter__kontakt{fill:var(--navy-dunkel);stroke:var(--creme)}
.nebel-seite .schalter--formular .schalter__kontakt--ziel{stroke:var(--leiter-rot)}
.nebel-seite .schalter--formular.ist-zu .schalter__hebel{stroke:var(--leiter-rot)}
/* Impressum und Datenschutz: Überschrift auf dem Nebel, der Text ruhig auf einer Karte */
.rechtstext__karte{background:color-mix(in srgb,var(--creme) 95%,transparent);color:var(--tinte);border-radius:var(--radius);padding:clamp(1.4rem,4vw,3rem);box-shadow:0 40px 90px -40px rgba(0,0,0,.75)}
@media (max-width:680px){.rechtstext__karte{padding:1.25rem 1.1rem}}

/* =====================================================================================================================
   Rahmen aus dem Fähigkeiten-Katalog (Ausbau 25.09.2026, _konzept/EINSATZPLAN_KATALOG_2026-09-25.md). Gilt auf allen
   sieben Seiten, Verhalten in js/rahmen.js. Ohne JavaScript bleibt alles stehen, wie es ist; bei reduzierter Bewegung
   steht jedes Teil als Standbild. Katalog-IDs stehen in Backticks.
   ===================================================================================================================== */
.nur-vorlesen{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* `cc-technik-ueberschwung`: die eine Überschwungkurve für alles, was an seinen Platz springt */
:root{--schwung:cubic-bezier(.34,1.56,.64,1)}

/* `cc-c3-menueleiste-mit-lichtbogen`: Der rote Strich unter dem Menüpunkt springt zum angefahrenen Punkt, dazwischen
   schlägt ein kurzer Lichtbogen. Maus und Tastatur (Fokus) lösen gleich aus. Ohne JavaScript bleibt die bisherige
   Unterstreichung je Punkt (style.css, .kopf__nav a::after). */
.kopf__nav{position:relative}
.lichtbogen{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.lichtbogen polyline{fill:none;stroke:#ffe2cf;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 3px var(--rot)) drop-shadow(0 0 8px rgba(208,29,36,.7));opacity:0}
.lichtbogen__strich{position:absolute;left:0;top:0;height:1.5px;width:var(--sw,0px);transform:translate(var(--sx,0px),var(--sy,0px));background:var(--rot);box-shadow:0 0 8px var(--rot),0 0 18px rgba(208,29,36,.5);opacity:0;pointer-events:none;transition:transform .5s var(--schwung),width .5s var(--schwung),opacity .25s}
.kopf__nav.hat-bogen a::after{display:none}
.kopf__nav.hat-bogen .lichtbogen__strich.ist-da{opacity:1}

/* `cc-technik-conic-rand-property` und `cc-a11-premium-knoepfe-verlaufsrand-und-glaswelle`: Um den Hauptknopf jeder
   Seite läuft Strom als Verlaufsrand. Der Winkel ist eine registrierte Eigenschaft (@property), deshalb kann der Browser
   ihn animieren. Läuft nur, solange der Knopf im Bild ist (.im-bild aus js/rahmen.js). */
@property --strom-winkel{syntax:'<angle>';inherits:false;initial-value:0deg}
.strom-rand{position:relative;isolation:isolate}
.strom-rand::before{content:"";position:absolute;inset:-3px;border-radius:inherit;padding:2px;pointer-events:none;
  background:conic-gradient(from var(--strom-winkel),transparent 0 52%,rgba(208,29,36,.25) 64%,var(--rot) 80%,#ffe2cf 88%,transparent 95%);
  -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}
.strom-rand.im-bild::before{animation-play-state:running}
@keyframes strom-umlauf{to{--strom-winkel:360deg}}
/* Glaswelle: Ein Klick auf einen Geist-Knopf schickt eine Welle vom Klickpunkt aus, per Tastatur aus der Mitte */
.knopf--geist{position:relative;overflow:hidden;isolation:isolate}
.welle{position:absolute;width:12px;height:12px;border-radius:50%;background:currentColor;opacity:.32;transform:translate(-50%,-50%) scale(0);pointer-events:none;z-index:-1;animation:welle-lauf .7s ease-out forwards}
@keyframes welle-lauf{to{transform:translate(-50%,-50%) scale(28);opacity:0}}

/* `cc-technik-zeiger-lichtquelle`: Der Zeiger ist eine Lichtquelle über dem Foto (Projektkacheln, Bauteilbilder) */
[data-licht]{position:relative}
.licht__schein{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle at var(--lx,50%) var(--ly,35%),rgba(255,236,220,.34),rgba(208,29,36,.14) 26%,transparent 56%);mix-blend-mode:screen}
[data-licht].licht-an .licht__schein{opacity:1}

@media (prefers-reduced-motion:reduce){
  .strom-rand::before{animation:none}
  .lichtbogen__strich,.licht__schein{transition:none}
  .welle{display:none}
}

/* ---------- Ladegrafik (28.09.2026): Startseite Bauteil 03 und Leistungsseite Karte 03 ----------
   Gezeichnete Szene statt Foto (im Bestand gibt es kein Bild zum Laden, eine neue Bilderzeugung braucht MMs Freigabe):
   Dach mit Modulen, Speicher, Ladepunkt und Fahrzeug an der Leitung, jede Station mit Etikett, keine Zahl. Der Strom
   fließt nur, solange die Grafik im Bild ist (data-sichtfeld, js/rahmen.js); ohne JavaScript und bei reduzierter
   Bewegung steht er als Standbild. Etiketten seit Punkt 16 (29.09.2026) wie im Kreis, Variante A: dunkles Glas, roter Kontaktpunkt, Schrift #f3c9c9. */
:is(.bauteil__bild,.stapel__bild-wrap).ladegrafik-grund{background:radial-gradient(90% 70% at 22% 18%,rgba(163,24,42,.28),transparent 62%),radial-gradient(circle,rgba(251,250,246,.09) 1px,transparent 1.6px) 0 0/22px 22px,linear-gradient(180deg,#1c2456,#0c1030)}
.ladegrafik{display:block;width:100%;height:100%;overflow:visible}
.ladegrafik path,.ladegrafik rect,.ladegrafik circle{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ladegrafik__boden{stroke:color-mix(in srgb,var(--creme) 26%,transparent);stroke-width:2}
.ladegrafik__erde{stroke:color-mix(in srgb,var(--creme) 16%,transparent);stroke-width:1.5}
.ladegrafik__linie{stroke:var(--creme);stroke-width:2.5}
.ladegrafik .ladegrafik__dick{stroke-width:6}
.ladegrafik .ladegrafik__modul{fill:#2a3a8c;stroke:var(--creme);stroke-width:2}
.ladegrafik__sonne,.ladegrafik__licht{stroke:#f3c9c9;stroke-width:2.5}
.ladegrafik .ladegrafik__koerper{fill:var(--navy-dunkel);stroke:var(--creme);stroke-width:2.5}
.ladegrafik__glut{stroke:var(--leiter-rot);stroke-width:14;opacity:.22}
.ladegrafik__leitung{stroke:var(--leiter-rot);stroke-width:3.5}
.ladegrafik__fluss{stroke:#fff3e6;stroke-width:3;stroke-dasharray:6 26;animation:ladefluss 1.3s linear infinite;animation-play-state:paused}
.ladegrafik__blitz{stroke:var(--leiter-rot);stroke-width:2.5;filter:drop-shadow(0 0 4px var(--leiter-rot))}
.ladegrafik .ladegrafik__lampe{fill:var(--leiter-rot);stroke:none;filter:drop-shadow(0 0 4px var(--leiter-rot))}
.ladegrafik__zeiger{stroke:color-mix(in srgb,var(--creme) 55%,transparent);stroke-width:1.5;stroke-dasharray:3 4}
.ladegrafik .ladegrafik__etikett rect{fill:rgba(12,16,48,.94);stroke:rgba(251,250,246,.18);stroke-width:1}
.ladegrafik .ladegrafik__etikett circle{fill:var(--leiter-rot);stroke:none;filter:drop-shadow(0 0 3px var(--leiter-rot))}
.ladegrafik__etikett text{font:600 11px/1 var(--display);letter-spacing:.14em;fill:#f3c9c9}
@keyframes ladefluss{to{stroke-dashoffset:-64}}
[data-sichtfeld].im-bild .ladegrafik__fluss{animation-play-state:running}
@media (prefers-reduced-motion:reduce){.ladegrafik__fluss{animation:none}}

/* ---------- Sprachumschalter DE / EN / IT / PL (05.10.2026) ----------
   Drei Orte: Kopfzeile ab 900 px, Handymenü unter 900 px, Fußleiste immer. Jeder Verweis ist mindestens 44 x 44 px groß.
   Sichtbar steht das Kürzel, der volle Sprachname ist nur für Vorlesen da (der sichtbare Text ist Teil des zugänglichen Namens). */
.sprachwahl__liste{display:inline-flex;align-items:center;gap:2px;margin:0;padding:3px;list-style:none;border-radius:999px}
.sprachwahl__link{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 .55rem;border-radius:999px;
  font:600 .8rem/1 var(--display);letter-spacing:.08em;color:var(--navy-mute);transition:color .2s,background-color .2s}
.sprachwahl__link:hover{color:var(--creme)}
.sprachwahl__link[aria-current="true"]{color:var(--creme);background:rgba(208,29,36,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 14px -6px rgba(208,29,36,.8)}
.sprachwahl__link:focus-visible{outline:2px solid var(--creme);outline-offset:2px}
.sprachwahl__voll{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprachwahl--kopf{display:none}
@media (min-width:900px){.sprachwahl--kopf{display:block}}
/* Zwischen 900 und 1179 px ist die Kopfzeile eng: dort trägt der Umschalter die Kontaktfunktion nicht doppelt, der Knopf weicht */
@media (min-width:900px) and (max-width:1179px){.kopf__cta{display:none}}
.sprachwahl--menue{padding-block:0 1.2rem}
.sprachwahl--fuss .sprachwahl__liste{padding:2px}
/* Ohne JavaScript öffnet sich das Handymenü nicht: dann steht der Umschalter auch am Handy in der Kopfzeile */
@media (max-width:899px){html:not(.js) .sprachwahl--kopf{display:block}}
@media print{.sprachwahl{display:none!important}}

/* Hinweis auf Rechtstexten der Sprachfassungen: allein die deutsche Fassung ist verbindlich */
.rechtstext__hinweis{margin:0 0 1.6rem;padding:.9rem 1.1rem;border-left:4px solid var(--rot);border-radius:6px;background:color-mix(in srgb,var(--rot) 7%,#fff);color:var(--tinte);font-size:.95rem;line-height:1.5}
.rechtstext__hinweis a{color:#9e1419;text-decoration:underline;text-underline-offset:3px;font-weight:600}