/* =================================================================
   ELEKTRO-GRUND — Schaltplan
   Ein Plan, kein Prospekt. Die Anlage ist die Bildsprache:
   Millimeterraster als Grund, DIN-Symbole als Ikonografie,
   eine durchgehende Leitung als Navigation durch die Seite.
   ================================================================= */

/* ---------- Schriften: lokal, kein CDN ---------- */
@font-face{font-family:'Archivo';src:url('../fonts/archivo-latin.woff2') format('woff2');
  font-weight:100 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight:100 900;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Bebas Neue';src:url('../fonts/bebasneue-latin.woff2') format('woff2');
  font-weight:400;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Bebas Neue';src:url('../fonts/bebasneue-latin-ext.woff2') format('woff2');
  font-weight:400;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ---------- Marken-Werte ---------- */
:root{
  --ground:#f6f7f8;
  --paper:#ffffff;
  --ink:#0e1116;
  --ink-2:#3b434a;
  --ink-3:#5b636b;
  --raster:#e0e4e7;
  --hair:#c9cfd4;
  --rot:#d1301a;
  --rot-tief:#a3230f;
  --rot-hell:#f0533a;   /* dasselbe Rot, aufgehellt für dunklen Grund */

  /* Akzentfarbe der Bildmarke — gehört bewusst hierher und nicht auf .logo-eg:
     eine eigene Deklaration am Bauteil würde diesen Wert blockieren. */
  --logo-akzent:var(--rot);
  --gelb:#cbd400;
  --gruen:#0a7238;

  /* Auf dunklem Grund — Gegenstücke zu ink-2 und ink-3 */
  --hell:#f6f7f8;
  --hell-2:#c3cad0;
  --hell-3:#8b959c;
  --hell-4:#aeb6bc;
  --linie-dunkel:#262c31;
  --rand-dunkel:#3a434a;

  /* Formularzustände */
  --fehler-grund:#fdf3f1;
  --fehler-text:#8f1f0d;
  --erfolg-grund:#f1f8f3;
  --erfolg-text:#0a5c2f;

  --display:'Bebas Neue','Archivo',system-ui,sans-serif;
  --text:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;

  --bahn:2.2px;
  --breite:78rem;
  --luft:clamp(1.25rem,5vw,4.5rem);
  --abschnitt:clamp(4.5rem,9vw,7.5rem);
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem;}
body{margin:0;font-family:var(--text);font-size:1.0625rem;line-height:1.6;color:var(--ink);
  background:var(--ground);
  background-image:linear-gradient(var(--raster) 1px,transparent 1px),
                   linear-gradient(90deg,var(--raster) 1px,transparent 1px);
  background-size:28px 28px;
  overflow-x:hidden;}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0;}
ul,ol{padding:0;list-style:none;}
img,svg{max-width:100%;}
img{height:auto;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;}
:focus-visible{outline:3px solid var(--rot);outline-offset:3px;border-radius:1px;}
::selection{background:var(--rot);color:#fff;}

.wrap{width:100%;max-width:var(--breite);margin-inline:auto;padding-inline:var(--luft);}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:.9rem 1.3rem;font-weight:700;}
.skip:focus{left:0;}

/* ---------- Typografie ---------- */
.h1,.h2,.h3{font-family:var(--display);font-weight:400;letter-spacing:.005em;line-height:.9;
  text-transform:uppercase;}
.h1{font-size:clamp(3rem,8.4vw,6.2rem);}
.h2{font-size:clamp(2.3rem,5.4vw,4rem);}
.h3{font-size:clamp(1.5rem,2.6vw,2rem);line-height:.95;}
.rot{color:var(--rot);}
.lead{font-size:clamp(1.05rem,1.7vw,1.22rem);line-height:1.55;color:var(--ink-2);max-width:44ch;}
p{max-width:68ch;}
.klein{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);}

/* ---------- Bedienelemente ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  padding:1.05rem 1.7rem;font-weight:600;font-size:.95rem;
  border:var(--bahn) solid var(--ink);background:transparent;cursor:pointer;
  transition:background .2s,color .2s,transform .2s cubic-bezier(.2,.8,.2,1);}
.btn:hover{background:var(--ink);color:var(--ground);}
.btn-rot{background:var(--rot);border-color:var(--rot);color:#fff;
  box-shadow:0 6px 16px -8px rgba(14,17,22,.45);}
.btn-rot:hover{background:var(--rot-tief);border-color:var(--rot-tief);color:#fff;transform:translateY(-2px);
  box-shadow:0 12px 24px -10px rgba(14,17,22,.5);}
.btn-hell{border-color:var(--paper);color:var(--paper);}
.btn-hell:hover{background:var(--paper);color:var(--ink);}

.tel-btn{display:inline-flex;flex-direction:column;gap:.1rem;background:var(--rot);color:#fff;
  padding:1rem 1.7rem;box-shadow:0 6px 16px -8px rgba(14,17,22,.45);
  transition:background .2s,transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;}
.tel-btn:hover{background:var(--rot-tief);transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(14,17,22,.5);}
.tel-btn span{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;}
.tel-btn b{font-family:var(--display);font-weight:400;font-size:1.8rem;line-height:1.05;letter-spacing:.02em;}

/* ---------- Kopfzeile ---------- */
.kopf{position:sticky;top:var(--demo-h,0px);z-index:40;background:rgba(246,247,248,.94);
  backdrop-filter:blur(6px);border-bottom:1px solid var(--hair);}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:4.4rem;}
.marke{display:flex;align-items:baseline;gap:.55rem;font-family:var(--display);font-size:1.6rem;line-height:1;
  letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;flex:none;}
.marke small{font-family:var(--text);font-size:.6rem;font-weight:700;letter-spacing:.14em;color:var(--ink-3);}

/* ---------- Bildmarke ----------
   Das Logo liegt als zwei Masken vor: Grundform (Schrift, Monogramm, Stecker)
   und Akzent (Blitz, „GRUND“, Zierstriche). Eingefärbt wird über CSS, nicht
   über die Bilddatei — dadurch braucht eine andere Hausfarbe keine neue Grafik,
   und auf dunklem Grund genügt ein anderer Wert für --logo-grund.

   Seit dem 12.08.2026 liegen die Masken als SVG vor, nachgezeichnet aus den
   PNG von vorher (Weg dokumentiert in _quellen/LIESMICH.md). Die Form ist
   dieselbe, das viewBox ebenfalls 535×261 — nur skaliert es jetzt.
   Die alten PNG bleiben als Quelle im Projekt liegen.

   Hausfarbe entschieden am 11.08.2026: Rot — dieselbe Farbe, die auf der Seite
   ohnehin die Akzente setzt. Logo und Website sprechen damit eine Sprache.
   Beide Werte stehen bewusst hier und nicht in den Masken: eine spätere
   Korrektur ist eine Zeile, keine neue Grafik. */
.logo-eg{--logo-grund:var(--ink);
  display:block;flex:none;aspect-ratio:535/261;height:clamp(2.8rem,6vw,3.6rem);
  position:relative;}
.logo-eg i{position:absolute;inset:0;display:block;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}
.logo-eg .grund{background:var(--logo-grund);
  -webkit-mask-image:url('../img/logo-grund.svg');mask-image:url('../img/logo-grund.svg');}
.logo-eg .akzent{background:var(--logo-akzent,var(--logo-grund));
  -webkit-mask-image:url('../img/logo-akzent.svg');mask-image:url('../img/logo-akzent.svg');}
.marke{align-items:center;}
/* Im Fuß steht das Logo auf Tiefschwarz. Das Rot der Seite käme dort auf gut
   3:1 und wirkt stumpf — deshalb der aufgehellte Ton, gleiche Farbe, mehr Licht. */
.fuss .logo-eg{--logo-grund:var(--hell);--logo-akzent:var(--rot-hell);
  height:3.4rem;margin-bottom:1rem;}
.nav{display:flex;align-items:center;gap:1.7rem;}
.nav a{font-size:.86rem;font-weight:600;position:relative;padding-block:.3rem;}
.nav a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--rot);
  transition:right .25s cubic-bezier(.2,.8,.2,1);}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0;}
.kopf-tel{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.95rem;color:var(--rot);
  white-space:nowrap;flex:none;}
/* Unter 1120px wird die Kopfzeile zum Gedränge: Navigation und Nummer passen
   nicht mehr nebeneinander. Die Nummer verschwindet dort aber nicht ersatzlos —
   ab derselben Breite übernimmt die Anrufleiste am unteren Rand. */
@media (max-width:1120px){
  .kopf-tel{display:none;}
  .nav{gap:1.25rem;}
}
.burger{display:none;width:2.9rem;height:2.9rem;border:var(--bahn) solid var(--ink);background:transparent;
  align-items:center;justify-content:center;cursor:pointer;}
.burger span{display:block;width:1.15rem;height:2px;background:var(--ink);position:relative;}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:100%;height:2px;background:var(--ink);
  transition:transform .25s;}
.burger span::before{top:-6px;} .burger span::after{top:6px;}
.burger[aria-expanded="true"] span{background:transparent;}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg);}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg);}

/* ---------- Anlage: die durchgehende Leitung ---------- */
.abschnitt{position:relative;padding-block:var(--abschnitt);}
/* Die Steigleitung läuft durch die Inhaltsspalte, exakt durch die Mitte der Knotenpunkte,
   und über die Abschnittsgrenzen hinweg — eine Leitung, kein gestrichelter Rand. */
.abschnitt > .wrap{position:relative;}
.abschnitt > .wrap::before{content:'';position:absolute;width:var(--bahn);
  left:calc(var(--luft) - 2.9px);
  top:calc(-1 * var(--abschnitt));bottom:calc(-1 * var(--abschnitt));
  background:var(--ink);opacity:.16;}
.knoten{position:relative;padding-left:2.6rem;}
.knoten::before{content:'';position:absolute;left:-.55rem;top:.55em;width:14px;height:14px;border-radius:50%;
  background:var(--ground);border:var(--bahn) solid var(--ink);}
.knoten::after{content:'';position:absolute;left:.6rem;top:calc(.55em + 6px);width:1.6rem;height:var(--bahn);
  background:var(--ink);opacity:.35;}
/* Einheitlicher Abstand unter jeder Abschnittsüberschrift — kein style-Attribut,
   damit die Content-Security-Policy ohne 'unsafe-inline' auskommt. */
.knoten > .lead,.knoten > p{margin-top:1.3rem;}
.knoten > p + p{margin-top:1rem;}
.recht > .wrap > .lead{margin-top:1.3rem;}
.cap-ort{fill:var(--ink);}
.invers > .wrap::before{background:#fff;opacity:.24;}
.invers .knoten::before{background:var(--ink);border-color:#fff;}
.invers .knoten::after{background:#fff;}

/* ---------- Erster Bildschirm ---------- */
.start{position:relative;padding-block:clamp(3rem,7vw,5.5rem) clamp(2.5rem,5vw,4rem);overflow:hidden;}
.start .h1{max-width:15ch;}

/* Foto rechts neben der Überschrift. Kein Rahmen und keine Bildunterschrift:
   im ersten Bildschirm soll das Gesicht mitlaufen, nicht als eigene Kachel
   auftreten. Die zwei Prozent Transparenz nehmen dem Bild genau so viel Härte,
   dass es sich in das helle Millimeterpapier des Grundes einfügt.
   Breite bei 21rem gedeckelt — die Vorlage ist 360 px breit und würde
   größer dargestellt weich. */
.start-buehne{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);
  gap:clamp(1.8rem,4vw,3.4rem);align-items:center;}
.start-text{grid-column:1;grid-row:1;min-width:0;}
/* „Der Strom fließt.“ fehlten bei 15ch genau dreizehn Pixel, und die Zeile
   brach mitten im Satz um. Der Zeilenfall der Überschrift ist gesetzt (die
   <br> stehen im Quelltext) — die Grenze muss ihm folgen, nicht umgekehrt. */
.start-text .h1{max-width:16ch;}
/* Nur der untere Rand läuft aus. Dort schneidet die Vorlage mitten durchs Knie
   — das war die unschönste der vier Kanten, und ohne sie steht die Figur, statt
   abgeschnitten zu sein. Die drei anderen Kanten bleiben scharf: das Bild soll
   ein Bild bleiben und sich nicht in der Fläche auflösen.
   Auswahl vom 12.08.2026, Variante 3 aus _preview/foto-kanten.html. */
.start-foto{grid-column:2;grid-row:1;display:block;
  width:min(21rem,100%);height:auto;opacity:.98;
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 62%,transparent 100%);}
@media (max-width:1040px){
  /* Unter 1040 px bleibt für zwei Spalten kein Platz, ohne dass die Überschrift
     zerfällt: „Der Strom fließt.“ passt dort nicht mehr in eine Zeile. Das Bild
     rutscht dann unter den Text — die Rufnummer soll auf dem Telefon als
     Erstes zu sehen sein, nicht das Porträt. */
  .start-buehne{grid-template-columns:1fr;gap:clamp(1.6rem,4vw,2.4rem);}
  .start-text{grid-column:1;grid-row:1;}
  .start-foto{grid-column:1;grid-row:2;width:min(15rem,58%);}
}
.start .lead{margin-top:1.5rem;}
.start-akt{margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:.85rem 1.1rem;align-items:center;}
.start-fakten{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:.55rem 1.9rem;}
.start-fakten li{display:flex;align-items:center;gap:.55rem;font-size:.78rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);}
.start-fakten svg{flex:none;}
/* puls trägt jetzt nur noch den Punkt in der Demo-Leiste — der Störungshinweis
   im ersten Bildschirm ist entfallen (der Betrieb fährt keine Störungseinsätze). */
@keyframes puls{0%,100%{opacity:.35;transform:scale(.85);}50%{opacity:1;transform:scale(1);}}

/* ---------- Plan-Grafik ---------- */
.plan{margin-top:clamp(2.4rem,5vw,3.6rem);min-width:0;}
.plan svg{width:100%;height:auto;display:block;}
.sym{fill:none;stroke:var(--ink);stroke-width:var(--bahn);stroke-linecap:round;stroke-linejoin:round;}
.sym-fill{fill:var(--ink);}
.leiter{fill:none;stroke:var(--ink);stroke-width:var(--bahn);}
.cap{font-family:var(--text);font-size:12px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;fill:var(--ink-3);}
.strom{fill:none;stroke:var(--rot);stroke-width:5;stroke-linecap:round;stroke-dasharray:80 1400;
  animation:fliesst 2.6s linear infinite;
  filter:drop-shadow(0 0 4px rgba(209,48,26,.95)) drop-shadow(0 0 14px rgba(209,48,26,.5));}
@keyframes fliesst{from{stroke-dashoffset:1480;}to{stroke-dashoffset:0;}}
.zuendet{fill:var(--rot);opacity:0;animation:zuenden 2.6s linear infinite;}
@keyframes zuenden{0%,70%{opacity:0;}78%,94%{opacity:.95;}100%{opacity:0;}}
.plan:hover .strom,.plan:hover .zuendet{animation-duration:1.4s;}

/* ---------- Leistungen: Stromkreise am Verteiler ---------- */
.kreise{margin-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid var(--hair);}
.kreis{display:grid;grid-template-columns:5.5rem minmax(0,1fr) minmax(0,1.15fr);gap:clamp(1rem,3vw,2.5rem);
  align-items:start;padding-block:clamp(1.8rem,3.4vw,2.6rem);border-bottom:1px solid var(--hair);
  transition:background .25s;}
.kreis:hover{background:rgba(255,255,255,.6);}
.kreis-sym{width:5.5rem;height:auto;}
.kreis h3{font-family:var(--display);font-weight:400;font-size:clamp(1.45rem,2.4vw,1.95rem);
  line-height:.95;text-transform:uppercase;}
.kreis .wann{margin-top:.45rem;font-size:.74rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--rot);}
.kreis p{color:var(--ink-2);}

/* ---------- Inverser Block (Wallbox / Karriere) ---------- */
.invers{background:var(--ink);color:var(--ground);
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:28px 28px;}
.invers p{color:var(--hell-2);}
.invers .klein{color:var(--hell-3);}
.invers .sym{stroke:var(--ground);}
.invers .cap{fill:var(--hell-3);}
.invers .leiter{stroke:var(--ground);}

.zwei{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4.5rem);
  align-items:center;}

/* ---------- Ablauf ---------- */
.ablauf{position:relative;margin-top:clamp(2.5rem,5vw,3.5rem);display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.2rem,2.6vw,2rem);}
/* Ein Leiter über alle vier Knoten, nicht vier abgerissene Stücke. */
.ablauf::before{content:'';position:absolute;left:6px;right:0;top:.95rem;height:var(--bahn);
  background:var(--ink);opacity:.2;}
.schritt{position:relative;padding-top:2.6rem;}
.schritt::after{content:'';position:absolute;left:0;top:.35rem;width:13px;height:13px;border-radius:50%;
  background:var(--ground);border:var(--bahn) solid var(--ink);}
.schritt h3{font-family:var(--display);font-weight:400;font-size:1.4rem;text-transform:uppercase;line-height:1;}
.schritt p{margin-top:.5rem;font-size:.95rem;color:var(--ink-2);}

/* ---------- Prüfprotokoll (Vertrauen) ---------- */
.protokoll{margin-top:clamp(2.2rem,4.5vw,3.2rem);border:var(--bahn) solid var(--ink);background:var(--paper);}
.protokoll-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;
  padding:.85rem 1.3rem;border-bottom:var(--bahn) solid var(--ink);background:var(--ink);color:var(--ground);}
.protokoll-kopf span{font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;}
.zeile{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:1rem;
  padding:.9rem 1.3rem;border-bottom:1px solid var(--hair);}
.zeile:last-child{border-bottom:0;}
.zeile dt{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.zeile dd{margin:0;font-weight:600;}
.zeile .dazu{display:block;margin-top:.15rem;font-size:.82rem;font-weight:400;color:var(--ink-3);}

/* Siegel: die fremde Bildmarke bekommt einen eigenen, ruhigen Bereich unter den
   Angaben. Der graue Grund trennt sie sichtbar von der Hausfarbe der Seite —
   ein fremdes Zeichen soll nicht wie ein Bestandteil des eigenen Logos wirken. */
.siegel{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 1.8rem;
  padding:1.3rem;border-top:var(--bahn) solid var(--ink);background:var(--ground);}
.siegel img{flex:none;width:auto;height:clamp(3.4rem,7vw,4.4rem);display:block;}
.siegel p{flex:1 1 16rem;margin:0;font-size:.86rem;line-height:1.5;color:var(--ink-2);}

/* ---------- Referenzen ---------- */
.galerie{margin-top:clamp(2.2rem,4.5vw,3.2rem);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:clamp(1rem,2.2vw,1.6rem);}
.bild{position:relative;border:var(--bahn) solid var(--ink);background:var(--paper);}
.bild img{aspect-ratio:4/3;object-fit:cover;width:100%;}
.bild figcaption{padding:.75rem 1rem;border-top:1px solid var(--hair);font-size:.82rem;color:var(--ink-2);}
.platzhalter{aspect-ratio:4/3;display:grid;place-content:center;gap:.5rem;text-align:center;padding:1rem;
  background:repeating-linear-gradient(135deg,#eceef0 0 12px,#e2e6e9 12px 24px);color:var(--ink-3);}
.platzhalter b{font-family:var(--display);font-weight:400;font-size:1.15rem;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink);}
.platzhalter small{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}

/* ---------- Kontakt ---------- */
.kontakt-raster{margin-top:clamp(2.2rem,4.5vw,3.2rem);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start;}
.feld{display:block;margin-bottom:1.15rem;}
.feld span{display:block;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:.4rem;}
.feld input,.feld textarea{width:100%;padding:.85rem 1rem;font:inherit;color:var(--ink);
  background:var(--paper);border:var(--bahn) solid var(--ink);border-radius:0;
  transition:border-color .2s,box-shadow .2s;}
.feld input:hover,.feld textarea:hover{border-color:var(--rot);}
.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--rot);
  box-shadow:0 0 0 3px rgba(209,48,26,.18);}
.feld textarea{min-height:9rem;resize:vertical;}
.feld input::placeholder,.feld textarea::placeholder{color:#687077;opacity:1;}
.feld input[aria-invalid="true"],.feld textarea[aria-invalid="true"]{border-color:var(--rot);background:var(--fehler-grund);}
.fehler{display:block;margin-top:.35rem;font-size:.82rem;font-weight:600;color:var(--rot);}
.zustimmung{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:1.3rem;font-size:.9rem;color:var(--ink-2);}
.zustimmung input{flex:none;width:1.15rem;height:1.15rem;margin-top:.2rem;accent-color:var(--rot);}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-hinweis{margin-top:1rem;font-size:.85rem;color:var(--ink-3);}
.form-meldung{margin-bottom:1.4rem;padding:1rem 1.2rem;border:var(--bahn) solid var(--rot);
  background:var(--fehler-grund);color:var(--fehler-text);font-weight:600;max-width:none;}
.form-meldung a{color:inherit;text-decoration:underline;text-underline-offset:3px;}
.daten{border:var(--bahn) solid var(--ink);background:var(--paper);}
.daten dl{margin:0;}
.karte{border-top:var(--bahn) solid var(--ink);}
.karte svg{width:100%;height:auto;display:block;background:#eef0f2;}
.karte-fuss{padding:.85rem 1.3rem;display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;
  justify-content:space-between;border-top:1px solid var(--hair);font-size:.85rem;}

/* ---------- Fußzeile ---------- */
.fuss{background:var(--ink);color:var(--hell-4);padding-block:clamp(3rem,6vw,4.5rem) 2rem;}
.fuss a{color:#e9edf0;}
.fuss a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.fuss-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:2.2rem;}
.fuss h2{font-family:var(--display);font-weight:400;font-size:1.5rem;text-transform:uppercase;color:#fff;
  margin-bottom:.9rem;}
.fuss li{margin-bottom:.45rem;font-size:.94rem;}
.fuss-unten{margin-top:2.8rem;padding-top:1.4rem;border-top:1px solid var(--linie-dunkel);
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:space-between;font-size:.85rem;}

/* ---------- Anruf-Leiste (mobil) ----------
   Die Leiste sitzt dort, wo der Daumen ohnehin liegt. Auf hellem Grund verschmolz die
   zweite Hälfte mit der Seite und las sich als Seitenende statt als Knopf. Sie liegt
   deshalb auf dunklem Grund: so hat jeder Knopf auf allen vier Seiten eine Kante,
   und die Leiste ist als Bedienung erkennbar, nicht als Rand des Bildschirms. */
.anrufleiste{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;
  grid-template-columns:1.15fr 1fr;gap:.55rem;
  padding:.55rem;padding-bottom:calc(.55rem + env(safe-area-inset-bottom,0px));
  background:var(--ink);box-shadow:0 -12px 28px -12px rgba(14,17,22,.55);}
.anrufleiste a{display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem .5rem;font-weight:700;font-size:.92rem;
  border:var(--bahn) solid transparent;}
.anrufleiste a.ruf{background:var(--rot);border-color:var(--rot);color:#fff;}
.anrufleiste a:not(.ruf){border-color:var(--hell-2);color:var(--hell);}

/* ---------- Demo-Leiste ----------
   Erscheint ausschließlich auf einer Demo-Adresse (siehe main.js) und ist auf der
   echten Domain weder sichtbar noch im Markup vorhanden. */
.demo-leiste{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--ink);color:var(--ground);
  border-bottom:var(--bahn) solid var(--rot);}
.demo-leiste .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.4rem;padding-block:.7rem;}
.demo-leiste .titel{display:flex;align-items:center;gap:.6rem;font-size:.82rem;font-weight:700;
  letter-spacing:.02em;margin-right:auto;}
.demo-leiste .punkt{flex:none;width:9px;height:9px;border-radius:50%;background:var(--rot);
  animation:puls 2.2s ease-in-out infinite;}
.demo-leiste .zusatz{color:var(--hell-3);font-weight:400;}
/* Bis 11.08.2026 stand hier zusätzlich eine Farbwahl für die Bildmarke.
   Sie ist entfallen, nachdem die Entscheidung auf Rot gefallen ist. */

@media (max-width:620px){
  .demo-leiste .titel{margin-right:0;font-size:.76rem;}
  .demo-leiste .zusatz{display:none;}
}

/* ---------- Rechtstexte ---------- */
.recht{padding-block:var(--abschnitt);}
.recht h2{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,3vw,2.2rem);
  text-transform:uppercase;margin-top:2.6rem;margin-bottom:.8rem;}
.recht h3{font-size:1.05rem;font-weight:700;margin-top:1.6rem;margin-bottom:.4rem;}
.recht p,.recht li{color:var(--ink-2);margin-bottom:.7rem;}
.recht ul{list-style:disc;padding-left:1.3rem;}
.recht a{color:var(--rot);text-decoration:underline;text-underline-offset:3px;}

/* ---------- Erscheinen beim Scrollen ---------- */
.auf{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
.auf.da{opacity:1;transform:none;}

/* ---------- Bedienziele bei Fingerbedienung ----------
   Ein Finger trifft nicht, was ein Mauszeiger trifft. Wo tatsächlich getippt wird,
   wachsen die Ziele auf mindestens 24px Höhe, die wichtigen auf 44px. */
@media (pointer:coarse){
  .zeile dd a,.karte-fuss a,.fuss li a,.recht a{
    display:inline-block;min-height:24px;padding-block:.35rem;}
  .fuss li{margin-bottom:.15rem;}
  .marke{min-height:44px;align-items:center;}
  .nav a{min-height:44px;display:flex;align-items:center;}
  .zustimmung{gap:.85rem;}
  .zustimmung input{width:1.5rem;height:1.5rem;margin-top:.1rem;}
  .anrufleiste a{min-height:52px;}
}

/* ---------- Anpassung ---------- */
@media (max-width:960px){
  .zwei,.kontakt-raster{grid-template-columns:1fr;}
  .ablauf{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.2rem;}
  .kreis{grid-template-columns:3.6rem minmax(0,1fr);}
  .kreis-sym{width:3.6rem;}
  .kreis p{grid-column:2;}
}
@media (max-width:1120px){
  .anrufleiste{display:grid;}
  /* Platz für die feste Leiste. Etwas zu viel ist unsichtbar, zu wenig verdeckt Inhalt. */
  body{padding-bottom:calc(5rem + env(safe-area-inset-bottom,0px));}
}
@media (max-width:760px){
  .nav{position:fixed;inset:4.4rem 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--ground);border-bottom:var(--bahn) solid var(--ink);padding:.5rem var(--luft) 1.4rem;
    transform:translateY(-120%);visibility:hidden;
    transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility .3s;}
  .nav[data-offen="true"]{transform:none;visibility:visible;}
  .nav a{padding-block:.9rem;border-bottom:1px solid var(--hair);font-size:1rem;}
  .nav a::after{display:none;}
  .burger{display:flex;}
  .kopf-tel{display:none;}

  .abschnitt::before{display:none;}
  .knoten{padding-left:0;}
  .knoten::before,.knoten::after{display:none;}
}
/* Der Anlagenstrang braucht Breite, sonst wird er zur Briefmarke oder zur Rolltreppe.
   Auf schmalen Schirmen entfällt er deshalb ganz: dort zählt der erste Bildschirm,
   und der besteht aus Nummer, Ort und Knopf. */
@media (max-width:1000px){
  .plan-quer{display:none;}
}
@media (max-width:640px){
  .start-akt{display:grid;grid-template-columns:1fr;gap:.75rem;}
  .start-akt .btn{width:100%;}
  .ablauf{grid-template-columns:1fr;}
  .zeile{grid-template-columns:1fr;gap:.25rem;}
}

@media (prefers-reduced-motion:reduce){
  /* Gezielt abschalten, was von selbst läuft. Die Rückmeldung auf eine Handlung
     bleibt erhalten: ein Knopf darf weiterhin zeigen, dass er gedrückt wurde. */
  html{scroll-behavior:auto;}
  .strom{animation:none;stroke-dasharray:none;opacity:.5;}
  .zuendet{animation:none;opacity:.9;}
  .demo-leiste .punkt{animation:none;opacity:1;transform:none;}
  .auf{opacity:1;transform:none;transition:none;}
  /* Bewegung im Raum entfällt, Farbwechsel als Rückmeldung bleibt */
  .btn-rot:hover,.tel-btn:hover{transform:none;}
  .nav a::after{transition:none;}
}

@media print{
  .kopf,.anrufleiste,.plan,.auf{position:static;}
  body{background:#fff;}
}