/* PIRON Ladestation, piron-ladestation.de
   Gerüst übernommen aus C:\xampp\htdocs\pironmetallbau\assets\css\stil.css (#45):
   Kopf mit Partnerkacheln, Aufklappmenü, Bühne, Knöpfe, Kacheln, Fuß.
   Neu: Logo-Blitz, Ladebalken, Statuskarte, Zähler, Kamerakacheln,
   Ortsabschnitte. Hausfarbe #0055a9, Rot #e30613 aus dem Logo (15.09.2026).
   Rot ist Markenfarbe und wird deshalb nicht als Belegt-Signal verwendet:
   frei = Grün, belegt = Bernstein. */

:root{
  --blau:#0055a9;
  --blau-dunkel:#004488;
  --blau-hell:#e8f0f9;
  --rot:#e30613;
  --gruen:#1a9e4b;
  --bernstein:#e8a317;
  --nacht:#0b2033;
  --text:#2a2a2a;
  --text-hell:#5a6a76;
  --linie:#dfe4e8;
  --flaeche:#f7f7f7;
  --weiss:#fff;
  --bahn:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color:var(--text);background:var(--weiss);
  line-height:1.65;font-size:17px;-webkit-text-size-adjust:100%;
}
.bahn{max-width:var(--bahn);margin:0 auto;padding:0 24px}
a{color:var(--blau)}
a:hover{color:var(--blau-dunkel)}
img{max-width:100%;height:auto}
svg{display:block}
.blank{list-style:none}
.hilfe-versteckt{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}
.skip{position:absolute;left:-9999px;top:0;background:var(--blau);color:#fff;padding:10px 18px;z-index:100}
.skip:focus{left:0}

/* ---------- Rote Leiste über dem Kopf ----------
   Nachbau der The7-Top-Bar der alten Seite (dort #dd3333, 36 px, weiße
   Schrift; belegt aus den Theme-Optionen im Dump, 16.09.2026). Hier in
   Logo-Rot. Auf dem Handy bleiben nur Öffnung und Nummer. */
.leiste{background:var(--rot);color:#fff;font-size:13px;font-weight:600;letter-spacing:.02em}
.leiste .bahn{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px 22px;min-height:36px;padding-top:4px;padding-bottom:4px}
.leiste a{color:#fff;text-decoration:none}
.leiste a:hover{text-decoration:underline;color:#fff}
.leiste .offen{margin-right:auto;display:inline-flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:800}
.leiste .offen .punkt{width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.6)}
@keyframes leiste-ring{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}100%{box-shadow:0 0 0 7px rgba(255,255,255,0)}}
@media (prefers-reduced-motion: no-preference){.leiste .offen .punkt{animation:leiste-ring 1.8s ease-out infinite}}
@media(max-width:760px){.leiste .nur-gross{display:none}.leiste .bahn{justify-content:space-between}}

/* ---------- Kopf mit Partnernetzwerk ---------- */

.kopf{background:#eceff1}
.menuschalter{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.kopf-bahn{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;padding-bottom:14px}

.marke{display:block;text-decoration:none}
.logo svg{width:250px;height:auto}
.fuss-logo svg{width:200px}

.partner{display:flex;align-items:stretch;gap:9px}
.partnerkachel{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:106px;min-height:64px;padding:10px 10px 5px;
  background:#fff;border:1px solid var(--blau);border-radius:6px;
  text-decoration:none;color:var(--blau);
}
.partnerkachel:hover{background:#f2f6fa}
.partnerkachel img{display:block;width:100px;height:auto;margin:auto;object-fit:contain}
.partnerkachel span{font-size:11px;text-transform:uppercase;font-weight:700;color:var(--blau);text-align:center;line-height:1.25;margin-top:5px}

.burger{
  display:none;align-items:center;gap:9px;cursor:pointer;
  padding:11px 14px;border:1px solid var(--blau);border-radius:6px;background:#fff;
  font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--blau);
}
.burger-striche{position:relative;display:block;width:19px;height:2px;background:var(--blau)}
.burger-striche::before,.burger-striche::after{content:"";position:absolute;left:0;width:19px;height:2px;background:var(--blau)}
.burger-striche::before{top:-6px}
.burger-striche::after{top:6px}

.navi{background:var(--blau)}
.navi-innen{display:flex;justify-content:center}
.navi ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center}
.navi li + li{border-left:1px solid rgba(255,255,255,.22)}
.navi a{display:block;padding:13px 17px;color:#fff;text-decoration:none;font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.navi a:hover{background:var(--blau-dunkel);color:#fff}
.navi a[aria-current="page"]{background:var(--blau-dunkel)}
.partner-menue,.menue-kontakt{display:none}

@media(max-width:1180px){
  .partner-oben{display:none}
  .burger{display:flex}
  .navi{display:none}
  .menuschalter:checked ~ .navi{display:block;padding:8px 0 22px}
  .navi-innen{flex-direction:column;gap:22px}
  .navi ul{flex-direction:column;justify-content:flex-start}
  .navi li + li{border-left:0;border-top:1px solid rgba(255,255,255,.22)}
  .navi a{padding:13px 4px;font-size:15px}
  .partner-menue{display:flex;flex-wrap:wrap;gap:10px}
  .partner-menue .partnerkachel{flex:1 1 132px}
  .menue-kontakt{display:flex;flex-direction:column;gap:5px}
  .menue-kontakt a{color:#fff;text-decoration:none;font-weight:600}
  .menue-kontakt a:first-child{font-size:21px}
}
@media(max-width:480px){.logo svg{width:200px}}

.brotkrumen{background:var(--flaeche);border-bottom:1px solid var(--linie);font-size:14px}
.brotkrumen .bahn{padding-top:10px;padding-bottom:10px;color:var(--text-hell)}
.brotkrumen span{margin:0 8px}
.brotkrumen span:last-child{margin:0;color:var(--text)}

/* ---------- Der Blitz im Logo ---------- */

/* Der Blitz ist ein eigener Pfad im SVG (id endet auf -blitz). Er blitzt
   alle 2,4 Sekunden doppelt auf wie ein Ladeimpuls (Wunsch vom 16.09.2026,
   vorher alle 5,2 Sekunden einfach). Beim Überfahren des Logos flackert er
   zusätzlich. Ohne Bewegungswunsch steht er still. */
@keyframes blitz-puls{
  0%,55%,100%{filter:drop-shadow(0 0 0 rgba(227,6,19,0));opacity:1}
  62%{filter:drop-shadow(0 0 9px rgba(255,80,80,1));opacity:1}
  68%{filter:drop-shadow(0 0 1px rgba(227,6,19,.3));opacity:.35}
  74%{filter:drop-shadow(0 0 10px rgba(255,80,80,1));opacity:1}
  80%{filter:drop-shadow(0 0 2px rgba(227,6,19,.4));opacity:.6}
  86%{filter:drop-shadow(0 0 7px rgba(255,80,80,.9));opacity:1}
}
@keyframes blitz-flacker{
  0%,100%{opacity:1}
  20%{opacity:.2}
  35%{opacity:1}
  50%{opacity:.4}
  65%{opacity:1;filter:drop-shadow(0 0 10px rgba(255,80,80,1))}
}
/* Stromfluss im Rahmen (Wunsch vom 16.09.2026): Auf der Mittellinie des
   roten Bandes liegt ein eigener Pfad (id endet auf -strom), im SVG auf
   pathLength 1000 normiert. Ein Lichtpuls läuft vom Stecker durchs Kabel,
   unten nach rechts, rechts hoch und oben zurück bis zum P. Er kommt bei
   60 % des Zyklus an, bei 62 % zündet der Doppelblitz: Strom kommt an, Blitz.
   Beide Animationen dauern 2,4 s und starten gemeinsam, bleiben also im Takt. */
@keyframes strom-fliesst{
  0%{stroke-dashoffset:70}
  60%,100%{stroke-dashoffset:-1000}
}
@media (prefers-reduced-motion: no-preference){
  .logo svg path[id$="-strom"]{
    stroke:#fff1a8;stroke-width:3.4;stroke-linecap:round;
    stroke-dasharray:70 1200;stroke-dashoffset:70;
    filter:drop-shadow(0 0 2px #ffe066) drop-shadow(0 0 5px rgba(255,255,255,.85));
    animation:strom-fliesst 2.4s linear infinite;
  }
  .logo svg path[id$="-blitz"]{animation:blitz-puls 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
  .marke:hover .logo svg path[id$="-blitz"],
  .marke:focus-visible .logo svg path[id$="-blitz"]{animation:blitz-flacker .7s ease-out 1}
}

/* ---------- Bühne ---------- */

.buehne{
  position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:clamp(440px,66vh,640px);background:var(--nacht);
}
.buehne-hg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 55%;z-index:0}
.buehne-schleier{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(6,24,40,.78) 0%,rgba(6,24,40,.55) 45%,rgba(6,24,40,.22) 100%);
}
.buehne-innen{
  position:relative;z-index:2;width:100%;
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.9fr);gap:40px;align-items:center;
  padding-top:54px;padding-bottom:54px;
}
.buehne-text{max-width:640px;color:#fff;position:relative;isolation:isolate}
.buehne-text::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;inset:-48px -80px -48px -120px;
  background:radial-gradient(ellipse at 40% 50%,rgba(6,24,40,.62) 0%,rgba(6,24,40,.42) 45%,rgba(6,24,40,0) 78%);
}
.buehne-text .marke-zeile{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#9fc6ea;margin-bottom:14px}
.buehne-text h1{color:#fff;margin-bottom:16px;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.buehne-text h1 em{font-style:normal;color:#8fc0ec}
.buehne-unter{font-size:19px;line-height:1.6;color:#dde7f0;max-width:60ch}
.buehne-aktion{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* Die Statuskarte rechts: zwei Ladepunkte, Leistung, Preis, Ladebalken. */
.statuskarte{
  background:rgba(255,255,255,.96);color:var(--text);border-radius:14px;
  padding:22px 24px;box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.statuskarte h2{margin:0 0 14px;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-hell)}
.ladepunkte{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.ladepunkt{border:1px solid var(--linie);border-radius:10px;padding:12px 14px;background:#fff}
.ladepunkt b{display:block;font-size:14px;color:var(--text-hell);font-weight:600;margin-bottom:6px}
.status{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px}
.status .punkt{width:11px;height:11px;border-radius:50%;background:#b8c2cc;box-shadow:0 0 0 0 rgba(26,158,75,.5)}
.status.frei .punkt{background:var(--gruen)}
.status.belegt .punkt{background:var(--bernstein)}
.status.unbekannt{color:var(--text-hell);font-weight:600}
@keyframes punkt-ring{0%{box-shadow:0 0 0 0 rgba(26,158,75,.55)}100%{box-shadow:0 0 0 9px rgba(26,158,75,0)}}
@media (prefers-reduced-motion: no-preference){.status.frei .punkt{animation:punkt-ring 1.8s ease-out infinite}}

.ladebalken{height:10px;border-radius:6px;background:#e3e8ee;overflow:hidden;position:relative;margin:6px 0 16px}
.ladebalken::before{
  content:"";position:absolute;inset:0;width:100%;border-radius:6px;
  background:linear-gradient(90deg,var(--blau) 0%,#3f8fe0 60%,var(--gruen) 100%);
  transform:translateX(-100%);
}
@keyframes laden{0%{transform:translateX(-100%)}70%{transform:translateX(0)}100%{transform:translateX(0)}}
@media (prefers-reduced-motion: no-preference){.ladebalken::before{animation:laden 4.5s cubic-bezier(.2,.7,.3,1) infinite}}
@media (prefers-reduced-motion: reduce){.ladebalken::before{transform:translateX(-30%)}}

.karte-zeilen{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;font-size:15px}
.karte-zeilen div{border-top:1px solid var(--linie);padding-top:8px}
.karte-zeilen b{display:block;font-size:22px;line-height:1.1;color:var(--blau)}
.karte-zeilen small{color:var(--text-hell);font-size:13px}
.statuskarte .hinweis{margin-top:14px;font-size:13px;color:var(--text-hell)}

@media(max-width:900px){
  .buehne-innen{grid-template-columns:1fr;gap:26px}
  .statuskarte{max-width:520px}
}
@media(max-width:760px){
  .buehne{min-height:0}
  .buehne-innen{padding-top:38px;padding-bottom:38px}
  .buehne-unter{font-size:17px}
  .buehne-aktion .knopf{flex:1 1 100%;text-align:center}
}

/* ---------- Bewegung ---------- */

@keyframes auf{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes kenburns{from{transform:scale(1.04) translate(-1.2%,-.8%)}to{transform:scale(1.14) translate(1.2%,.8%)}}
@keyframes dreht{from{transform:rotateY(90deg);opacity:0}to{transform:none;opacity:1}}

@media (prefers-reduced-motion: no-preference){
  .buehne-text > *{animation:auf .7s cubic-bezier(.22,.61,.36,1) backwards}
  .buehne-text > *:nth-child(1){animation-delay:.05s}
  .buehne-text > *:nth-child(2){animation-delay:.17s}
  .buehne-text > *:nth-child(3){animation-delay:.30s}
  .buehne-text > *:nth-child(4){animation-delay:.43s}
  .statuskarte{animation:auf .8s cubic-bezier(.22,.61,.36,1) .5s backwards}
  .buehne-hg{animation:kenburns 26s ease-in-out 1s infinite alternate backwards}
  .partner-dreht .partnerkachel{animation:dreht .6s ease-out backwards}
  .partner-dreht .partnerkachel:nth-child(2){animation-delay:.08s}
  .partner-dreht .partnerkachel:nth-child(3){animation-delay:.16s}
  .partner-dreht .partnerkachel:nth-child(4){animation-delay:.24s}

  /* Abschnitte blenden beim Erscheinen ein. Das Skript setzt .sichtbar,
     ohne Skript bleibt alles sichtbar (Klasse .auf allein tut nichts). */
  .js .auf{opacity:0;transform:translateY(24px);transition:opacity .7s ease-out,transform .7s cubic-bezier(.22,.61,.36,1)}
  .js .auf.sichtbar{opacity:1;transform:none}
  .js .auf-reihe > *{opacity:0;transform:translateY(18px);transition:opacity .6s ease-out,transform .6s ease-out}
  .js .auf-reihe.sichtbar > *{opacity:1;transform:none}
  .js .auf-reihe.sichtbar > *:nth-child(2){transition-delay:.1s}
  .js .auf-reihe.sichtbar > *:nth-child(3){transition-delay:.2s}
  .js .auf-reihe.sichtbar > *:nth-child(4){transition-delay:.3s}
}

/* ---------- Textbausteine ---------- */

h1{font-size:clamp(28px,4vw,44px);line-height:1.15;font-weight:700;letter-spacing:-.01em;margin-bottom:20px}
h2{font-size:clamp(22px,2.6vw,30px);line-height:1.25;font-weight:700;margin:0 0 16px;color:var(--nacht)}
h3{font-size:19px;line-height:1.3;font-weight:700;margin-bottom:8px}
p{margin-bottom:14px}
section{padding:56px 0}
section.hell{background:var(--flaeche)}
section.blau{background:var(--blau);color:#fff}
section.blau h2{color:#fff}
section.blau a{color:#fff}
section.nacht{background:var(--nacht);color:#dde7f0}
section.nacht h2{color:#fff}
.einstieg{font-size:20px;line-height:1.6;max-width:70ch;color:#3a4a56}
.vorzeile{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--blau);margin-bottom:8px}
section.blau .vorzeile,section.nacht .vorzeile{color:#9fc6ea}
.abschnittkopf{max-width:760px;margin-bottom:28px}

.knopf{
  display:inline-block;background:var(--blau);color:#fff;text-decoration:none;
  padding:13px 26px;border-radius:8px;font-weight:700;font-size:15px;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.knopf:hover{background:var(--blau-dunkel);color:#fff;transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,85,169,.28)}
.knopf:active{transform:none;box-shadow:none}
.knopf.hell{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.75);padding:11px 24px}
.knopf.hell:hover{background:#fff;color:var(--blau)}
.knopf.rot{background:var(--rot)}
.knopf.rot:hover{background:#b8050f}

@keyframes knopf-puls{0%,100%{box-shadow:0 0 0 0 rgba(var(--puls),.5)}55%{box-shadow:0 0 0 12px rgba(var(--puls),0)}}
@keyframes knopf-glanz{0%{transform:translateX(-130%)}40%,100%{transform:translateX(130%)}}
.knopf-puls{--puls:0,85,169;position:relative;overflow:hidden;isolation:isolate}
.buehne-aktion .knopf-puls{--puls:255,255,255}
.knopf-puls::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 65%);
  transform:translateX(-130%);
}
@media (prefers-reduced-motion: no-preference){
  .knopf-puls{animation:knopf-puls 3.4s ease-in-out infinite}
  .knopf-puls::after{animation:knopf-glanz 3.4s ease-in-out infinite}
  .knopf-puls:hover,.knopf-puls:focus-visible{animation-play-state:paused;box-shadow:none}
  .knopf-puls:hover::after{animation-play-state:paused;opacity:0}
}

/* ---------- Zahlen mit Zähler ---------- */

.zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.zahl{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:22px 20px;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.04)}
.zahl-wert{display:inline-block;font-size:clamp(34px,4vw,48px);font-weight:800;line-height:1;color:var(--blau);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.zahl-einheit{display:inline-block;margin-left:5px;font-size:18px;font-weight:700;color:var(--rot)}
.zahl-text{display:block;margin-top:8px;font-size:14px;color:var(--text-hell)}
.zahlen-oben{margin-top:-46px;position:relative;z-index:3}
@media(max-width:900px){.zahlen{grid-template-columns:repeat(2,1fr)}.zahlen-oben{margin-top:0}}

/* ---------- Kacheln ---------- */

.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
.kachel{background:#fff;border:1px solid var(--linie);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease}
.kachel:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,0,0,.09)}
.kachelbild{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--flaeche)}
.kachelbild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.kachel:hover .kachelbild img{transform:scale(1.05)}
.kachelinhalt{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.kachelinhalt p{flex:1;color:#3a4a56;font-size:15.5px}
.weiterlesen{font-weight:700;text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.weiterlesen span[aria-hidden]{transition:transform .2s}
.weiterlesen:hover span[aria-hidden]{transform:translateX(4px)}

/* ---------- Zweispalter mit Bild ---------- */

.zwei{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.zwei.bild-rechts > :first-child{order:0}
.zwei img{width:100%;height:auto;border-radius:14px;display:block;box-shadow:0 18px 40px rgba(0,0,0,.14)}
.zwei .hochkant{max-width:420px;margin:0 auto}
@media(max-width:860px){.zwei{grid-template-columns:1fr;gap:26px}.zwei.bild-rechts > :first-child{order:1}}

.merkmale{list-style:none;display:grid;gap:10px;margin:18px 0}
.merkmale li{position:relative;padding-left:32px}
.merkmale li::before{
  content:"";position:absolute;left:0;top:7px;width:18px;height:18px;border-radius:50%;
  background:var(--gruen);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='10' fill='black'/><path d='M5.5 10.5l3 3 6-6' stroke='white' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='10' fill='black'/><path d='M5.5 10.5l3 3 6-6' stroke='white' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}
section.nacht .merkmale li::before{background:#8fc0ec}

/* ---------- Live-Kameras ---------- */

.kameras{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.kamera{background:#fff;border-radius:12px;overflow:hidden;border:1px solid var(--linie)}
.kamera-bild{position:relative;aspect-ratio:4/3;background:var(--nacht);overflow:hidden}
.kamera-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .6s ease}
.kamera-bild img.wechselt{opacity:0}
.kamera-platzhalter{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  color:#9fc6ea;font-size:14px;text-align:center;padding:20px;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 12px,transparent 12px 24px),var(--nacht);
}
.kamera-platzhalter svg{width:54px;height:54px;opacity:.6}
.kamera-bild.hat-bild .kamera-platzhalter{display:none}
.kamera-fuss{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font-size:14px}
.kamera-fuss b{font-size:15px}
.live-marke{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--rot)}
.live-marke::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--rot)}
@keyframes live-blink{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion: no-preference){.live-marke::before{animation:live-blink 1.4s ease-in-out infinite}}
@media(max-width:760px){.kameras{grid-template-columns:1fr}}

/* ---------- Ortsabschnitte und Region ---------- */

.regionen{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.region{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:24px 26px}
.region h3{font-size:22px}
.region ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}
.region li a{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--blau-hell);text-decoration:none;font-size:14px;font-weight:600;transition:background .15s,color .15s}
.region li a:hover{background:var(--blau);color:#fff}
@media(max-width:760px){.regionen{grid-template-columns:1fr}}

.ortsabschnitt{padding:24px 0;border-top:1px solid var(--linie)}
.ortsabschnitt h2{margin-bottom:6px}
.ortsabschnitt .fahrzeit{color:var(--text-hell);font-size:15px;margin-bottom:10px}

/* ---------- Fragen ---------- */

.fragen details{border:1px solid var(--linie);border-radius:10px;background:#fff;margin-bottom:10px}
.fragen summary{cursor:pointer;padding:15px 48px 15px 20px;font-weight:700;position:relative;list-style:none}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{
  content:"";position:absolute;right:20px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--blau);border-bottom:2px solid var(--blau);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s;
}
.fragen details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.fragen .antwort{padding:0 20px 16px;color:#3a4a56}
.fragen .antwort p:last-child{margin-bottom:0}

/* ---------- Fuß ---------- */

.fuss{background:var(--nacht);color:#c9d6e2;padding:48px 0 30px;font-size:15px}
.fuss a{color:#fff;text-decoration:none}
.fuss a:hover{text-decoration:underline}
.fuss-raster{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:34px}
.fuss-titel{color:#fff;font-weight:700;font-size:16px;margin-bottom:10px}
.fuss-logo{margin-bottom:14px}
.fuss-offen{display:flex;align-items:center;gap:9px;font-weight:600;color:#fff}
.fuss-offen .punkt{width:10px;height:10px;border-radius:50%;background:var(--gruen)}
.fuss li{margin-bottom:6px}
.fuss-orte{margin-top:36px;border-top:1px solid rgba(255,255,255,.14);padding-top:26px}

/* Ortsraster mit Ortstafeln, übernommen aus #45 (16.09.2026): gleich breite
   Kacheln nach Fahrzeit sortiert, sieben Spalten am Rechner, vier am Tablet,
   zwei am Handy. Die gelbe Tafel mit schwarzem Doppelrand ist Zierde
   (aria-hidden), der Linktext darunter bleibt "Laden aus <Ort>". */
.ortsraster{display:grid;gap:10px;margin:16px 0 0;padding:0;grid-template-columns:repeat(7,minmax(0,1fr))}
.ortsraster li{margin:0}
.ortsraster a{
  display:flex;flex-direction:column;gap:4px;height:100%;
  padding:10px 12px 10px;border-radius:6px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);
  color:#fff;font-weight:600;font-size:14px;line-height:1.3;text-decoration:none;
  transition:border-color .25s ease,background .25s ease,transform .2s ease;
}
.ortsraster a > span:last-child{font-size:12px;font-weight:500;color:#8fa5b8}
.ortsraster a:hover{border-color:#8fc0ec;background:rgba(255,255,255,.09);transform:translateY(-2px);text-decoration:none;color:#fff}
.ortsraster a:hover > span:last-child{color:#c9d6e2}
.ortsraster .ortstafel{
  display:inline-block;align-self:flex-start;max-width:100%;
  margin-bottom:6px;padding:7px 11px 6px;
  background:#f2c200;color:#111;border:2px solid #111;border-radius:5px;
  box-shadow:inset 0 0 0 2px #f2c200,inset 0 0 0 3px #111;
  font-size:13px;font-weight:700;line-height:1.2;letter-spacing:.02em;
  transition:transform .2s ease;
}
.ortsraster a:hover .ortstafel{transform:rotate(-2deg) scale(1.04)}
@media(max-width:1000px){.ortsraster{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:560px){.ortsraster{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fuss-zeile{margin-top:30px;border-top:1px solid rgba(255,255,255,.14);padding-top:18px;font-size:13px;color:#9fb3c4}
.pruefliste{margin-top:24px;background:#fff3cd;color:#5a4300;border-radius:10px;padding:16px 20px;font-size:14px}
.pruefliste .fuss-titel{color:#5a4300}
.pruefliste ol{padding-left:22px}
@media(max-width:860px){.fuss-raster{grid-template-columns:1fr}}

/* =====================================================================
   Unterseiten (Bauabschnitt 2, 17.09.2026)
   ===================================================================== */

.seitenkopf{background:linear-gradient(120deg,var(--nacht) 0%,#123a5e 100%);color:#dde7f0;padding:46px 0 40px}
.seitenkopf h1{color:#fff;margin-bottom:14px}
.seitenkopf .vorzeile{color:#9fc6ea}
.seitenkopf .einstieg{color:#dde7f0;margin-bottom:0}
.seitenkopf .einstieg strong{color:#fff}
.seitenkopf .einstieg a{color:#fff}
@media (prefers-reduced-motion: no-preference){
  .seitenkopf .bahn > *{animation:auf .6s cubic-bezier(.22,.61,.36,1) backwards}
  .seitenkopf .bahn > *:nth-child(2){animation-delay:.1s}
  .seitenkopf .bahn > *:nth-child(3){animation-delay:.2s}
}

.bahn.schmal{max-width:860px}
.klein{font-size:14px;color:var(--text-hell)}
.knopfreihe{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.knopf.rand{background:transparent;color:var(--blau);border:2px solid var(--blau);padding:11px 24px}
.knopf.rand:hover{background:var(--blau);color:#fff}
.adresse{font-size:19px;line-height:1.5}
.hinweisbox{background:var(--blau-hell);border-left:4px solid var(--blau);border-radius:8px;padding:16px 20px}
h2[id],article[id]{scroll-margin-top:20px}
section .bahn > h2:not(:first-child),.bahn.schmal > h2:not(:first-child){margin-top:38px}

/* Preiskarten */
.preiskarten{display:grid;grid-template-columns:1.2fr 1fr;gap:22px;align-items:stretch}
.preiskarte{background:#fff;border:1px solid var(--linie);border-radius:14px;padding:26px 26px 22px;display:flex;flex-direction:column}
.preiskarte.haupt{border:2px solid var(--blau);box-shadow:0 16px 40px rgba(0,85,169,.14)}
.preis{font-size:clamp(40px,5vw,58px);font-weight:800;line-height:1;color:var(--blau);letter-spacing:-.02em;margin:6px 0 16px}
.preis span{font-size:18px;font-weight:600;color:var(--text-hell);letter-spacing:0}
.preis.klein{font-size:26px;line-height:1.2;color:var(--nacht)}
.preiskarte .weiterlesen{margin-top:auto}
@media(max-width:900px){.preiskarten{grid-template-columns:1fr}}

/* Tabellen: dürfen auf dem Handy seitlich rollen, ohne die Seite zu sprengen */
.tabellenrahmen{overflow-x:auto;border:1px solid var(--linie);border-radius:12px;background:#fff}
table.reisezeit{width:100%;border-collapse:collapse;font-size:15.5px;min-width:520px}
table.reisezeit caption{text-align:left;padding:14px 18px;font-weight:700;color:var(--nacht);border-bottom:1px solid var(--linie)}
table.reisezeit th,table.reisezeit td{padding:11px 18px;text-align:left;border-bottom:1px solid var(--linie)}
table.reisezeit thead th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-hell);background:var(--flaeche)}
table.reisezeit tbody tr:last-child th,table.reisezeit tbody tr:last-child td{border-bottom:0}
table.reisezeit tbody tr:hover{background:var(--blau-hell)}
table.reisezeit tbody th{font-weight:700}
table.reisezeit td:nth-child(2),table.reisezeit td:nth-child(3){white-space:nowrap;font-variant-numeric:tabular-nums}

/* Ortsabschnitte und Ortsseiten */
.ortsabschnitt:first-child{border-top:0;padding-top:0}
.ortsabschnitt h2{font-size:clamp(20px,2.2vw,25px)}
.ortsabschnitt .fahrzeit{font-weight:700;color:var(--blau)}
.zahlen-klein{grid-template-columns:repeat(2,1fr);max-width:420px;margin:20px 0}
.zahlen-klein .zahl{padding:16px}
.ortsliste{list-style:none;display:grid;gap:10px}
.ortsliste li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;padding:13px 18px;border:1px solid var(--linie);border-radius:10px;background:#fff}
.ortsliste a{font-weight:700;text-decoration:none}
.ortsliste span{color:var(--text-hell);font-size:15px}

.lagegrafik{margin:0;background:#fff;border:1px solid var(--linie);border-radius:14px;padding:14px;box-shadow:0 12px 30px rgba(0,0,0,.06)}
.lagegrafik svg{width:100%;height:auto}
.lagegrafik figcaption{font-size:14px;color:var(--text-hell);padding:8px 6px 2px}
.lagegrafik .ring{fill:none;stroke:var(--linie);stroke-width:1;stroke-dasharray:3 4}
.lagegrafik .ringtext{font-size:9px;fill:#8a99a6;text-anchor:middle}
.lagegrafik .strecke{stroke:var(--blau);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:6 6}
.lagegrafik .station{fill:var(--rot)}
.lagegrafik .ort{fill:var(--blau)}
.lagegrafik .marke-text{font-size:12px;font-weight:700;fill:var(--nacht)}
.lagegrafik .marke-text.links{text-anchor:end}
.lagegrafik .nord{font-size:11px;font-weight:700;fill:#8a99a6;text-anchor:middle}
.lagegrafik .nordpfeil{fill:none;stroke:#8a99a6;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@keyframes strecke-laeuft{to{stroke-dashoffset:-24}}
@keyframes station-ring{0%{r:7;opacity:.55}100%{r:20;opacity:0}}
@media (prefers-reduced-motion: no-preference){.lagegrafik .strecke{animation:strecke-laeuft 1.2s linear infinite}}

/* Roamingliste mit Suchfeld */
.suchfeld{display:block;margin:6px 0 8px}
.suchfeld input{width:100%;font:inherit;padding:14px 18px;border:2px solid var(--linie);border-radius:10px;background:#fff;color:var(--text)}
.suchfeld input:focus{outline:0;border-color:var(--blau);box-shadow:0 0 0 4px rgba(0,85,169,.12)}
.roamingliste{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;margin:14px 0 18px}
.roamingliste li{padding:10px 14px;border:1px solid var(--linie);border-radius:8px;background:#fff;font-size:15px}
.roamingliste li.bekannt{border-color:var(--blau);font-weight:700}
.roamingliste li[hidden]{display:none}

/* Sprungmarken der FAQ */
.sprungmarken{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.sprungmarken a{padding:7px 14px;border-radius:999px;background:var(--blau-hell);text-decoration:none;font-size:14px;font-weight:600}
.sprungmarken a:hover{background:var(--blau);color:#fff}

/* Meldungen und Rechtstexte */
.meldung{padding:26px 0;border-top:1px solid var(--linie)}
.meldung:first-child{border-top:0;padding-top:0}
.rechtstext h2{font-size:21px;margin:30px 0 10px}
.rechtstext h2:first-child{margin-top:0}
.rechtstext ul,.rechtstext ol{padding-left:24px;margin-bottom:14px}
.rechtstext li{margin-bottom:6px}
.kacheltitel{font-size:19px;margin-bottom:8px}

/* Kamerakachel steht auf dunklem Grund, ihr Fuß ist aber weiß: Textfarbe
   deshalb fest setzen, sonst erbt der Titel das helle Grau des Abschnitts
   (Befund 17.09.2026, "Ladeplatz links" war kaum lesbar). */
.kamera{color:var(--text)}
.kamera-fuss b{color:var(--nacht)}

/* =====================================================================
   Startseite v0.3.0 (18.09.2026): Leitmotiv "Stromkreis"
   Animiert werden nur transform, opacity und Strichversatz, nie das Layout.
   Alles Bewegte hat feste Maße. Unter prefers-reduced-motion steht es still.
   ===================================================================== */

/* ---------- Die Leitung am Seitenrand ---------- */
.leitung{position:fixed;z-index:40;pointer-events:none;background:rgba(0,85,169,.14);border-radius:3px;
  left:max(14px,calc((100vw - var(--bahn)) / 2 - 44px));top:0;bottom:0;width:4px;display:none}
.js .leitung{display:block}
.leitung-fuellung{position:absolute;inset:0;border-radius:3px;transform-origin:top;transform:scaleY(var(--fort,0));
  background:linear-gradient(180deg,#ffd84a 0%,#ff9d2e 45%,var(--rot) 100%);box-shadow:0 0 10px rgba(255,190,60,.7)}
.leitung i{position:absolute;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:#fff;border:3px solid rgba(0,85,169,.35);transition:border-color .3s,box-shadow .3s,transform .3s}
.leitung i.an{border-color:#ff9d2e;box-shadow:0 0 0 5px rgba(255,190,60,.28),0 0 14px rgba(255,170,40,.9);transform:scale(1.15)}
.leitung i::after{content:attr(data-name);position:absolute;left:20px;top:50%;transform:translateY(-50%);white-space:nowrap;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-hell);
  background:rgba(255,255,255,.92);padding:2px 7px;border-radius:4px;opacity:0;transition:opacity .3s}
.leitung i.jetzt::after{opacity:1}
/* Unter 1320 px ist neben der Bahn kein Platz: Die Leitung wird zum Balken oben. */
@media(max-width:1320px){
  .leitung{left:0;right:0;top:0;bottom:auto;width:auto;height:4px;border-radius:0}
  .leitung-fuellung{transform-origin:left;transform:scaleX(var(--fort,0));border-radius:0;
    background:linear-gradient(90deg,#ffd84a 0%,#ff9d2e 45%,var(--rot) 100%)}
  .leitung i{display:none}
}

/* ---------- Statuskarte: Uhr, Live-Fenster, Instrument ---------- */
.offen-zeile{display:flex;align-items:center;gap:9px;font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--gruen);margin-bottom:12px}
.offen-zeile .punkt{width:10px;height:10px;border-radius:50%;background:var(--gruen)}
@media (prefers-reduced-motion: no-preference){.offen-zeile .punkt{animation:punkt-ring 1.8s ease-out infinite}}

.livefenster{display:block;position:relative;border-radius:10px;overflow:hidden;margin-bottom:14px;background:var(--nacht);text-decoration:none}
.livefenster .kamera-bild{display:block;aspect-ratio:16/9}
.livefenster .kamera-platzhalter{gap:0;font-size:13px}
.livefenster .live-marke{position:absolute;left:10px;bottom:9px;background:rgba(255,255,255,.94);padding:3px 9px;border-radius:999px}
.livefenster .kamera-bild img{transition:opacity .6s ease,transform .5s ease}
.livefenster:hover .kamera-bild img{transform:scale(1.04)}

.karte-mitte{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center;margin-bottom:12px}
.karte-mitte .karte-zeilen{grid-template-columns:1fr;gap:6px}
.karte-mitte .karte-zeilen div{padding-top:6px}
.karte-mitte .karte-zeilen div:first-child{border-top:0;padding-top:0}
.karte-mitte .karte-zeilen b{font-size:18px}
.statuskarte .ladebalken{margin:4px 0 10px}

.instrument{margin:0;text-align:center}
.instrument svg{width:100%;height:auto;overflow:visible}
.instr-bahn{fill:none;stroke:#e3e8ee;stroke-width:12;stroke-linecap:round}
.instr-wert{fill:none;stroke:var(--blau);stroke-width:12;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:4}
.instr-zahl{font-size:9px;font-weight:700;fill:#8a99a6;text-anchor:middle}
.instr-nadel{transform-origin:100px 100px;transform:rotate(84deg)}
.instr-nadel path{stroke:var(--rot);stroke-width:3.5;stroke-linecap:round}
.instr-nadel circle{fill:var(--nacht)}
.instrument figcaption b{display:block;font-size:20px;line-height:1.1;color:var(--blau)}
.instrument figcaption small{color:var(--text-hell);font-size:12px}
@keyframes nadel{0%{transform:rotate(-90deg)}55%{transform:rotate(92deg)}70%{transform:rotate(80deg)}85%{transform:rotate(86deg)}100%{transform:rotate(84deg)}}
@keyframes wert{from{stroke-dashoffset:100}to{stroke-dashoffset:4}}
@media (prefers-reduced-motion: no-preference){
  .instr-nadel{animation:nadel 2.2s cubic-bezier(.3,.7,.3,1) .7s backwards}
  .instr-wert{animation:wert 1.6s cubic-bezier(.3,.7,.3,1) .7s backwards}
}
@media(max-width:420px){.karte-mitte{grid-template-columns:1fr}.instrument{max-width:190px;margin:0 auto}}

/* Nachts legt sich ein dunklerer Schleier über die Bühne (Klasse setzt das Skript). */
.buehne.nachtzeit .buehne-schleier{background:linear-gradient(100deg,rgba(3,10,28,.9) 0%,rgba(3,12,34,.78) 50%,rgba(6,20,52,.6) 100%)}
.buehne.nachtzeit .buehne-hg{filter:saturate(.7) brightness(.8)}

/* ---------- Symbole der Infokacheln ---------- */
.symbol{width:46px;height:46px;margin-bottom:12px;fill:none;stroke:var(--blau);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .35s cubic-bezier(.3,.7,.3,1.4)}
.symbol .sym-b{stroke:var(--rot);transition:transform .35s cubic-bezier(.3,.7,.3,1.4);transform-box:fill-box;transform-origin:center}
.kachel:hover .symbol{transform:translateY(-3px) rotate(-6deg)}
.kachel:hover .symbol .sym-b{transform:scale(1.18)}

.bild-kippt img{transition:transform .6s cubic-bezier(.22,.61,.36,1),box-shadow .6s}
.bild-kippt:hover img{transform:perspective(900px) rotateY(-4deg) rotateX(2deg) scale(1.02);box-shadow:0 28px 60px rgba(0,0,0,.2)}

/* ---------- Laderechner ---------- */
.rechner{background:#fff;border:1px solid var(--linie);border-radius:16px;padding:26px;box-shadow:0 18px 44px rgba(0,0,0,.07)}
.rechner label[for]{display:block;font-weight:700;font-size:18px;margin-bottom:14px}
.rechner input[type=range]{width:100%;height:34px;accent-color:var(--blau);cursor:pointer}
.rechner-skala{display:flex;justify-content:space-between;font-size:12px;color:var(--text-hell);margin-top:-2px}
.rechner fieldset{border:0;margin:20px 0 4px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rechner legend{font-weight:700;font-size:15px;margin-bottom:9px;padding:0}
.pille{cursor:pointer}
.pille input{position:absolute;opacity:0;pointer-events:none}
.pille span{display:inline-block;padding:8px 15px;border-radius:999px;border:2px solid var(--linie);font-weight:700;font-size:14px;transition:background .15s,border-color .15s,color .15s}
.pille input:checked + span{background:var(--blau);border-color:var(--blau);color:#fff}
.pille input:focus-visible + span{box-shadow:0 0 0 4px rgba(0,85,169,.2)}
.rechner-ergebnis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0 14px}
.rechner-ergebnis div{background:var(--flaeche);border-radius:10px;padding:13px 10px;text-align:center}
.rechner-ergebnis div.haupt{background:var(--blau);color:#fff}
.rechner-ergebnis b{display:block;font-size:clamp(17px,2vw,22px);line-height:1.15;font-variant-numeric:tabular-nums}
.rechner-ergebnis small{display:block;font-size:11.5px;line-height:1.3;margin-top:4px;color:var(--text-hell)}
.rechner-ergebnis div.haupt small{color:#cfe1f3}
.rechner .klein{margin-bottom:0}
@keyframes wert-blink{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}
@media (prefers-reduced-motion: no-preference){.rechner-ergebnis b.neu{animation:wert-blink .3s ease-out}}
@media(max-width:560px){.rechner-ergebnis{grid-template-columns:repeat(2,1fr)}.rechner{padding:20px}}

/* ---------- Das Energiebild ---------- */
.energie-zwei{grid-template-columns:1.25fr 1fr}
.energie-zwei .merkmale{margin-bottom:0}
.energiebild{margin:0;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:12px}
.energiebild svg{width:100%;height:auto}
.energiebild path,.energiebild rect,.energiebild circle,.energiebild line{fill:none;stroke:#9fc6ea;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.energiebild .eb-sonne circle{fill:#ffd84a;stroke:#ffd84a}
.energiebild .eb-strahlen line{stroke:#ffd84a;stroke-width:3}
.eb-strahlen{transform-origin:70px 62px}
.energiebild .eb-halle .eb-module{fill:rgba(0,85,169,.75);stroke:#8fc0ec}
.energiebild .eb-halle .eb-raster{stroke:#8fc0ec;stroke-width:1.2}
.energiebild .eb-speicher .eb-fuellung{fill:var(--gruen);stroke:none;transform-box:fill-box;transform-origin:bottom}
.energiebild .eb-saeule .eb-anzeige{fill:rgba(143,192,236,.25)}
.energiebild .eb-saeule .eb-blitz{fill:var(--rot);stroke:none;transform-box:fill-box;transform-origin:center}
.energiebild .eb-auto path{fill:rgba(255,255,255,.08)}
.energiebild .eb-netz path{stroke:#6f8aa3;stroke-width:1.8}
.energiebild .eb-leitung{stroke:rgba(159,198,234,.3);stroke-width:4}
.energiebild .eb-fluss{stroke:#ffd84a;stroke-width:4;stroke-dasharray:12 22;filter:drop-shadow(0 0 4px rgba(255,216,74,.9))}
.energiebild .eb-fluss-netz{stroke:#7fe0a6;stroke-dasharray:6 28;opacity:.75}
.eb-text{font-size:13px;font-weight:700;fill:#dde7f0;text-anchor:middle;stroke:none}
.eb-text.klein{font-size:11px;font-weight:600;fill:#9fb3c4}
@keyframes eb-fliesst{to{stroke-dashoffset:-34}}
@keyframes eb-dreht{to{transform:rotate(360deg)}}
@keyframes eb-fuellt{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes eb-blitzt{0%,70%,100%{transform:scale(1);opacity:1}78%{transform:scale(1.25);opacity:.5}86%{transform:scale(1.1);opacity:1}}
@media (prefers-reduced-motion: no-preference){
  .energiebild .eb-fluss{animation:eb-fliesst 1.1s linear infinite}
  .energiebild .eb-fluss-netz{animation-duration:2.4s}
  .eb-strahlen{animation:eb-dreht 24s linear infinite}
  .energiebild .eb-speicher .eb-fuellung{animation:eb-fuellt 9s ease-in-out infinite}
  .energiebild .eb-saeule .eb-blitz{animation:eb-blitzt 2.4s ease-in-out infinite}
}
@media(max-width:860px){.energie-zwei{grid-template-columns:1fr}}

/* ---------- Laufband der Roamingpartner ---------- */
.band-abschnitt{overflow:hidden}
.laufband{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.laufband-spur{display:flex;width:max-content}
.laufband ul{display:flex;gap:12px;list-style:none;padding-right:12px;flex:none}
.laufband li{white-space:nowrap;padding:10px 18px;border-radius:999px;background:#fff;border:1px solid var(--linie);font-weight:600;font-size:15px;color:var(--nacht)}
@keyframes band{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: no-preference){
  .laufband-spur{animation:band 70s linear infinite}
  .laufband:hover .laufband-spur{animation-play-state:paused}
}
@media (prefers-reduced-motion: reduce){.laufband{overflow-x:auto}.laufband ul[aria-hidden]{display:none}}

.region li a small{font-weight:500;opacity:.7;margin-left:3px}

/* Bild in einer Meldung (19.09.2026) */
.meldung-bild{margin:6px 0 18px}
.meldung-bild img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.12)}