/* ============================================================
   EMP Fachbetrieb – Stylesheet
   Keine externen Ressourcen (DSGVO): keine Google Fonts, kein CDN.
   Optional: eigene Schrift selbst hosten -> siehe @font-face unten.
   ============================================================ */

/* --- Optional: Schriften selbst hosten (woff2 nach assets/fonts/ legen)
@font-face{font-family:"EMP Display";src:url("fonts/archivo-black.woff2") format("woff2");font-weight:900;font-display:swap;}
--- */

:root{
  --ink:#23262b;
  --ink-2:#31353b;
  --beton:#5f6367;           /* kleine Texte auf hellem Grund   4,95:1 */
  --beton-2:#9aa0a2;         /* kleine Texte auf dunklem Grund  5,73:1 */
  --beton-3:#7d8183;         /* dekorative Trenner auf hell     3,21:1 */
  --papier:#f7f5f0;          /* Seitengrund: hell und warm, H43 S30 L95 */
  --papier-2:#fbfaf7;        /* nahezu weiß – nur auf dunklem Grund verwendet:
                                Schrift, Formularfelder, Plakettentext */
  --band:#ebe8e1;            /* getönter Abschnitt, H42 S20 L90.
                                Stufe zum Seitengrund 1,12:1 – sichtbar, aber ruhig.
                                Die Haarlinie oben/unten trägt das Band auch dann,
                                wenn die Tönung bei Sonnenlicht ausbleicht. */

  /* Orange in vier Rollen – je nach Untergrund und Funktion.
     Ein einziger Wert kann nicht gleichzeitig auf Hell lesbar sein
     und Weiß tragen; deshalb die Aufteilung. */
  --signal:#e8600a;          /* Markenton: Linien, Rahmen, Akzente */
  --signal-hell:#ef6d14;     /* Orange als Text auf dunklem Grund   4,96:1 */
  --signal-flaeche:#c85107;  /* gefüllte Taste, weiße Schrift       4,53:1 */
  --signal-text:#ffffff;     /* Schrift auf Signalfläche */
  --signal-dunkel:#a84207;   /* Orange als Text/Symbol auf hell     4,98:1 */
  --signal-lasur:rgba(232,96,10,.10);  /* Hover- und Hinweislasur */

  --linie:rgba(35,38,43,.18);
  --linie-hell:rgba(251,250,247,.22);

  --display:"EMP Display","Archivo Black","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:Georgia,"Times New Roman",Times,serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --max:1280px;
  --pad:clamp(1.25rem,5vw,3rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
[id]{scroll-margin-top:5.5rem}
body{
  margin:0;background:var(--papier);color:var(--ink);
  font-family:var(--body);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--signal-dunkel);outline-offset:2px}
.dark :focus-visible,.menu :focus-visible,footer :focus-visible{outline-color:var(--signal-hell)}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}

/* ---------- Typografie ---------- */
h1,h2,h3,.display{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  letter-spacing:-.015em;line-height:.98;margin:0;
}
h1,.hero-schlagzeile{font-size:clamp(2.1rem,7.5vw,4.4rem)}
h2{font-size:clamp(1.6rem,4.6vw,2.7rem)}
h3{font-size:clamp(1.05rem,2.4vw,1.3rem);letter-spacing:0}
p{margin:0 0 1rem}
.lead{font-size:clamp(1.05rem,2.3vw,1.25rem);line-height:1.55}

.label{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--beton);display:block;
}

/* Kicker-Zeile INNERHALB der H1 auf den vier Leistungsseiten: traegt den
   Ortsbezug, den Title und Beschreibung bereits zusagen. Bewusst als Teil
   des H1-Textes (nicht als separates Element davor) – Suchmaschinen und
   Screenreader lesen den gesamten Inhalt der Ueberschrift als Einheit,
   unabhaengig von der optischen Groesse der Teile. Visuell an .label
   angelehnt (mono, klein, Sperrung), damit die Leistungs-Ueberschrift
   selbst die groesste, prominenteste Zeile bleibt. */
.h1-ort{
  display:block;font-family:var(--mono);font-size:.85rem;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--beton);
  margin-top:.6rem;
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Header ---------- */
.top{
  position:sticky;top:0;z-index:50;background:var(--papier);
  border-bottom:1px solid var(--linie);
}
.top-in{display:flex;align-items:center;gap:.75rem;min-height:64px;max-width:100%}
.brand{flex:none;font-family:var(--display);font-size:1rem;letter-spacing:-.01em;text-transform:uppercase;text-decoration:none;line-height:1.05}
.brand span{display:block;font-family:var(--mono);font-size:.62rem;font-weight:400;letter-spacing:.18em;color:var(--beton);text-transform:uppercase}
/* align-items:center statt der Voreinstellung "stretch": Leistungen
   steckt in einer Hülle (.nav-gruppe), Kontakt ist ein einzelnes <a> –
   beide würden bei "stretch" unterschiedlich hoch aufgezogen und ihre
   Linien läge dann nicht auf gleicher Höhe. "center" richtet beide
   an ihrer eigenen Höhe aus, das ist bei fast gleicher Schriftgröße
   auf einem Pixel genau. */
.nav{margin-left:auto;display:none;align-items:center;gap:1.15rem;flex-wrap:nowrap;min-width:0}
.nav a{white-space:nowrap}
.top-in>.menu-btn{margin-left:auto}
.nav a{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding-block:.4rem;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-color:var(--signal)}

/* ---------- Klappmenü "Leistungen" ----------
   Greift nur in der breiten Kopfzeile ab 1250 px, weil .nav darunter
   ausgeblendet ist – schmale Ansichten nutzen weiter die Menütaste.
   Rein über :hover und :focus-within gelöst, ohne Skript: damit ist die
   Klappe auch mit der Tastatur erreichbar (hineintabben hält sie offen). */
/* Die Hülle .nav-gruppe ist ein Block mit Inline-Inhalt. Ihre Höhe wird
   deshalb nicht vom Link bestimmt, sondern vom sogenannten "Strut": einer
   unsichtbaren Mindesthöhe aus der GEERBTEN Schrift (body, 17px * 1,65
   = ca. 28px). Der Link selbst ist mit seiner Mono-Schrift kleiner, trägt
   als Inline-Element aber weder Innenabstand noch Rahmen zur Zeilenhöhe
   bei – die Hülle wurde also ca. 28px hoch.
   "Kontakt" dagegen ist ein direktes Flex-Kind von .nav und wird dadurch
   blockartig: dort zählen Innenabstand und Rahmen mit, macht ca. 34,6px.
   Zwei verschieden hohe Kisten, mittig ausgerichtet -> Text und Linien
   sitzen zwangsläufig auf verschiedenen Höhen.
   display:flex auf der Hülle macht den Link auch dort blockartig. Beide
   Kisten werden nach derselben Formel berechnet und damit exakt gleich
   hoch. DESHALB darf hier kein display:block/inline-block stehen. */
.nav-gruppe{position:relative;display:flex;align-items:center}

/* "Leistungen" muss exakt dieselbe Textbox wie "Kontakt" haben, sonst
   fluchten weder Text noch Unterstrich. Zwei Anläufe sind daran
   gescheitert, weil der Pfeil trotzdem im Textfluss steckte und die
   Zeilenhöhe minimal veränderte: erst display:inline-flex auf dem
   Link (eigener Flex-Kontext, andere Zeilenhöhen-Regeln als normaler
   Text), dann inline-block mit vertical-align (zählt bei der Höhe der
   Zeile weiterhin mit). Einzige Methode, die den Text garantiert NICHT
   berührt: den Pfeil komplett aus dem Fluss nehmen. Mit
   position:absolute hat "Leistungen" bit-genau dieselbe Textbox wie
   "Kontakt" – der Pfeil liegt nur noch optisch darüber, ohne jede
   Auswirkung auf Zeilenhöhe oder Grundlinie. Falls hier je wieder ein
   Höhenunterschied auftaucht: zuerst prüfen, ob der Link selbst noch
   display:block/flex/inline-flex oder Ähnliches hat. */
.nav-gruppe>a{position:relative;padding-right:1.05rem}
.nav-gruppe>a::after{
  content:"";position:absolute;right:0;top:50%;margin-top:-2.5px;
  width:0;height:0;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;
  transition:transform .16s ease;
}
.nav-gruppe:hover>a::after,
.nav-gruppe:focus-within>a::after{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){.nav-gruppe>a::after{transition:none}}

/* Unsichtbare Brücke über die Lücke zwischen Wort und Klappe. Ohne sie
   verlässt der Zeiger auf dem Weg nach unten den Überfahrbereich und die
   Klappe schließt, bevor man sie erreicht. */
.nav-gruppe::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}

.nav-klapp{
  position:absolute;top:calc(100% + 10px);left:0;z-index:60;
  min-width:19rem;display:grid;
  background:var(--papier-2);
  /* Die Fläche allein hebt sich kaum vom Seitengrund ab (1,04:1),
     die Kante trägt der Rand: --beton-3 erreicht 3,6:1. */
  border:1px solid var(--beton-3);
  border-top:2px solid var(--signal-dunkel);
  box-shadow:0 12px 28px rgba(35,38,43,.14);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .14s ease,transform .14s ease,visibility .14s;
}
.nav-gruppe:hover .nav-klapp,
.nav-gruppe:focus-within .nav-klapp{opacity:1;visibility:visible;transform:none}

.nav-klapp a{
  display:grid;gap:.25rem;
  padding:.95rem 1.2rem;border:0;border-left:2px solid transparent;
}
.nav-klapp a strong{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:1.02rem;letter-spacing:0;
}
.nav-klapp a span{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--beton);
}
.nav-klapp a:hover span,
.nav-klapp a[aria-current="page"] span{color:inherit;opacity:.75}
.nav-klapp a:hover,
.nav-klapp a[aria-current="page"]{
  /* --signal wäre hier zu hell (2,8:1 auf dem Band, im Elektrothema 1,7:1).
     --signal-dunkel trägt die Markierung und passt zur Schriftfarbe. */
  border-bottom:0;border-left-color:var(--signal-dunkel);
  background:var(--band);color:var(--signal-dunkel);
}

/* Ist eine Leistungsseite geöffnet, bleibt "Leistungen" markiert –
   sonst verlöre die Kopfzeile die Ortsangabe. */
.nav-gruppe:has(a[aria-current="page"])>a{border-color:var(--signal)}

@media(prefers-reduced-motion:reduce){
  .nav-klapp{transition:none}
}
.top .kopf-cta{display:none}

/* Ab Tablet: Kontakt-Tasten in der Kopfzeile, dafür keine Leiste unten */
@media(min-width:768px){
  .top .kopf-cta{
    display:flex;gap:.5rem;margin-left:auto;flex:none;
  }
  .top .kopf-cta .btn{
    white-space:nowrap;font-size:.7rem;letter-spacing:.08em;
    height:42px;display:inline-flex;align-items:center;
    padding:0 .95rem;border-width:1px;
  }
  /* Alle vier Elemente der Kopfzeile: gleiche Höhe, gleiche Rahmenstärke */
  .top .kopf-cta .btn-ghost{border-color:var(--linie);color:var(--ink)}
  /* .top .kopf-cta .btn-ghost (3 Klassen) ist spezifischer als das
     allgemeine .btn-ghost:hover (2 Klassen + Pseudoklasse) und gewinnt
     bei der Textfarbe – ohne diese Zeile bleibt sie bei :hover auf
     --ink stehen, obwohl der Hintergrund ebenfalls --ink wird: die
     Telefonnummer verschwindet auf eigenem Grund. */
  .top .kopf-cta .btn-ghost:hover{background:var(--ink);color:var(--papier-2);border-color:var(--ink)}
  .top-in>.menu-btn{margin-left:.6rem}
}

/* Ab hier ist Platz für die vollständige Navigation */
@media(min-width:1250px){
  .nav{display:flex}
  .top .kopf-cta{margin-left:1.4rem}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;padding:.85rem 1.4rem;
  background:var(--ink);color:var(--papier-2);border:2px solid var(--ink);cursor:pointer;
  transition:background .15s,color .15s;
}
.btn:hover{background:var(--signal-flaeche);color:var(--signal-text);border-color:var(--signal-flaeche)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--papier-2);border-color:var(--ink)}
.dark .btn{background:var(--signal-flaeche);border-color:var(--signal-flaeche);color:var(--signal-text)}
.dark .btn-ghost{background:transparent;color:var(--papier-2);border-color:var(--papier-2)}
.dark .btn-ghost:hover{background:var(--papier-2);color:var(--ink)}

/* ---------- Hero ---------- */
.hero{padding:clamp(2rem,6vw,4.5rem) 0 clamp(1rem,3vw,2.5rem)}
.hero-grid{display:grid;gap:1.25rem}
@media(min-width:900px){.hero-grid{grid-template-columns:1.45fr .55fr;align-items:start;gap:3rem}}
/* Der Dreiklang ist reine Gestaltung und liegt deshalb in .hero-schlagzeile,
   nicht in einer Ueberschrift. Die H1 ist die Zeile darunter (.hero .lead) –
   sie traegt die Suchbegriffe. Optisch aendert sich dadurch nichts: die
   Schlagzeile erbt ueber .display alle Ueberschriftvorgaben, und die H1 setzt
   sie ueber .hero .lead wieder zurueck. Beide Regeln zusammen betrachten. */
.hero .hero-schlagzeile em{font-style:normal;display:block;color:var(--beton)}
.hero .lead{max-width:46ch;margin-top:1.4rem}
h1.lead{font-family:var(--body);font-weight:400;text-transform:none;letter-spacing:normal;line-height:1.55}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem}

/* Prüfplakette (Signature-Element) */
.plakette{width:min(215px,58vw);margin-inline:auto;margin-block:.25rem}
@media(min-width:900px){.plakette{width:min(300px,100%)}}
/* Heller Ton statt Anthrazit: eine duenne, hellere Aussenlinie wirkt wie
   ein abgesetzter Stempelabdruck, nicht wie eine gezeichnete Kontur. */
.plakette circle.ring{fill:none;stroke:var(--beton-3);stroke-width:.75}
.plakette .disc{fill:var(--ink)}
.plakette .rot{transform-origin:100px 100px;animation:wiegen 14s ease-in-out infinite}
.plakette text{font-family:var(--mono);fill:var(--papier-2)}
.plakette .ringtext{font-size:11px;letter-spacing:1.6px;fill:var(--ink)}
.plakette .m1{font-family:var(--display);font-size:27px;letter-spacing:-.5px;fill:var(--signal-hell)}
.plakette .m2{font-size:7.4px;letter-spacing:1.6px}
@keyframes wiegen{
  0%,100%{transform:rotate(-13deg)}
  50%    {transform:rotate(13deg)}
}
@media(prefers-reduced-motion:reduce){.plakette .rot{animation:none}}

/* ---------- Protokoll-Zeilen (Leistungen) ---------- */
.rows{border-top:1px solid var(--linie)}
.row{
  display:grid;gap:.35rem 1.5rem;padding:1.5rem 0;
  border-bottom:1px solid var(--linie);text-decoration:none;position:relative;
}
@media(min-width:760px){
  .row{grid-template-columns:5.5rem 1fr 10rem;align-items:baseline}
}
.row .no{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--beton);padding-top:.3rem}
.row h3{transition:color .15s}
.row p{margin:.4rem 0 0;color:var(--ink-2);font-size:.98rem}
.row .go{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--beton);white-space:nowrap}
a.row:hover h3{color:var(--ink)}
a.row:hover{background:linear-gradient(90deg,var(--signal-lasur),transparent 55%)}
a.row:hover .go{color:var(--ink)}

/* ---------- Sektionen ---------- */
section{padding:clamp(2.75rem,7vw,4.75rem) 0}
.sec-head{margin-bottom:2rem;max-width:60ch}
.sec-head h2{margin-top:.5rem}
.dark{background:var(--ink);color:var(--papier-2)}

/* Getönter Abschnitt – dritte Stufe zwischen hellem Grund und dunkler Sektion.
   Eingesetzt für Zielgruppen- und Einordnungsblöcke, nie für Kernargumente.
   Höchstens ein Band je Seite, sonst wird der Seitenaufbau streifig. */
.band{
  background:var(--band);
  border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie);
}
/* Zwei aneinandergrenzende Bänder sind ein Block, keine zwei:
   die Trennlinie dazwischen entfällt. */
.band + .band{border-top:none}
/* Fehlte bisher: ohne diese Zeile blieb border-bottom des ERSTEN Bandes
   stehen, direkt über der Überschrift des zweiten – sichtbar als Strich
   dicht an der Überschrift, in der (kaum wahrnehmbaren) Linienfarbe.
   Zwei gestapelte Bänder sollen ein Block ohne innere Trennung sein. */
.band:has(+ .band){border-bottom:none}
.dark .label{color:var(--beton-2)}
.dark a{color:var(--papier-2)}
.dark .rows,.dark .row{border-color:var(--linie-hell)}
.dark .row p{color:var(--beton-2)}

.grid-3{display:grid;gap:1.75rem}
@media(min-width:760px){.grid-3{grid-template-columns:repeat(3,1fr);gap:2.25rem}}
.grid-2{display:grid;gap:1.75rem}
@media(min-width:760px){.grid-2{grid-template-columns:1fr 1fr;gap:2.75rem}}

.card{border-top:2px solid var(--ink);padding-top:1rem}
.dark .card{border-color:var(--signal-hell)}
.dark .check li::before{background:var(--signal-hell)}
.card h3{margin-bottom:.6rem}
.card p{font-size:.98rem;margin:0}

/* Ablauf – echte Reihenfolge, daher nummeriert */
.steps{counter-reset:s;display:grid;gap:0}
.step{
  counter-increment:s;display:grid;gap:.4rem 1.5rem;
  padding:1.4rem 0;border-top:1px solid var(--linie-hell);
}
@media(min-width:760px){.step{grid-template-columns:4rem 14rem 1fr;align-items:baseline}}
.step::before{
  content:counter(s,decimal-leading-zero);font-family:var(--mono);
  font-size:.8rem;letter-spacing:.1em;color:var(--signal-hell);
}
.step h3{font-size:1.05rem}
.step p{margin:0;color:var(--beton-2);font-size:.97rem}

/* Listen */
.check{list-style:none;margin:0;padding:0}
.check li{position:relative;padding-left:1.5rem;margin-bottom:.55rem;font-size:.99rem}
.check li::before{
  content:"";position:absolute;left:0;top:.62em;width:.7rem;height:2px;background:var(--signal-dunkel);
}

/* Einsatzgebiet */
.orte{display:flex;flex-wrap:wrap;gap:.4rem .5rem;list-style:none;padding:0;margin:0}
.orte li{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;
  border:1px solid var(--linie);padding:.4rem .65rem;
}

/* FAQ */
details{border-bottom:1px solid var(--linie);padding:1.1rem 0}
details summary{
  cursor:pointer;font-family:var(--display);text-transform:uppercase;
  font-size:1rem;letter-spacing:0;list-style:none;display:flex;gap:1rem;align-items:baseline;
}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";margin-left:auto;font-family:var(--mono);color:var(--beton)}
details[open] summary::after{content:"–"}
details p{margin:.8rem 0 0;font-size:.99rem;max-width:70ch}

/* ---------- Formular ---------- */
.form{display:grid;gap:1.1rem;max-width:640px}
.field{display:grid;gap:.35rem}
.field label{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:1rem;padding:.75rem .8rem;
  border:1px solid var(--linie);background:var(--papier-2);color:var(--ink);border-radius:0;
}
.field textarea{min-height:130px;resize:vertical}
/* Dateifeld: keine eigene Flaeche, kein Rahmen.
   Das Feld liegt in <section class="dark">. Farbe daher --papier-2 statt --ink –
   dieselbe Variable, die die Zustimmungszeile ("Ich bin damit einverstanden…")
   traegt, weil sie von .dark{color:var(--papier-2)} erbt. --papier-2 auf --ink
   misst 14,54:1 – reichlich Reserve.

   color:var(--papier-2) auf dem <input> selbst faerbt den vom Browser
   gezeichneten Hinweistext ("Keine Datei ausgewaehlt" / "3 Dateien ausgewaehlt");
   dafuer gibt es keinen eigenen Selektor, er folgt der color-Eigenschaft des Feldes.

   border:none hebt den ererbten 1px-Rahmen aus der Sammelregel
   ".field input,.field select,.field textarea" auf. Ein Rahmen wuerde hier eine
   Eingabeflaeche suggerieren, die es nicht gibt: anklickbar ist allein der Button.
   Der Rahmen MUSS ueber border:none weg, nicht ueber border-color – sonst bleibt
   die 1px-Breite als Abstand stehen und das Feld sitzt gegenueber den anderen
   Feldern um ein Pixel versetzt.

   padding links auf 0, damit der Button ohne Rahmen buendig unter dem
   Beschriftungstext steht und nicht eingerueckt wirkt. */
.field input[type=file]{
  font-family:var(--mono);font-size:.8rem;padding:.35rem 0;
  background:none;color:var(--papier-2);border:none;
}
/* Der Knopf ist eine gefuellte helle Flaeche, kein Umriss – er soll im dunklen
   Abschnitt als anklickbares Element sofort erkennbar sein.
   Rahmen in derselben Farbe wie die Fuellung: haelt die Aussenmasse stabil,
   damit der Knopf beim Ueberfahren nicht um zwei Pixel springt.
   --ink auf --papier-2 misst 14,54:1. */
.field input[type=file]::file-selector-button{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  background:var(--papier-2);color:var(--ink);border:1px solid var(--papier-2);
  padding:.45rem .8rem;margin-right:.8rem;cursor:pointer;border-radius:0;
  transition:background .15s,border-color .15s;
}
/* Beim Ueberfahren leicht abgedunkelt. --band, nicht --papier:
   --papier-2 -> --papier waere nur Faktor 1,04 Helligkeitsunterschied und damit
   praktisch unsichtbar, --band liegt bei 1,17 und ist wahrnehmbar, ohne dass der
   Knopf dunkel wirkt. Kontrast zur Schrift bleibt bei 12,40:1. */
.field input[type=file]::file-selector-button:hover{
  background:var(--band);border-color:var(--band);
}
.hp{position:absolute;left:-9999px}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;line-height:1.5}
.consent input{margin-top:.25rem;width:1.1rem;height:1.1rem;flex:none}
.hint{font-size:.85rem;color:var(--beton);margin:0}
/* Auf dunklem Grund ist --beton mit 2,51:1 unlesbar (AA verlangt 4,5:1).
   --beton-2 ist der Grauton fuer dunkle Abschnitte und erreicht 5,73:1 –
   dieselbe Farbe wie der Absatz "Formular ausfuellen" daneben. */
.dark .hint{color:var(--beton-2)}
.notice{border-left:3px solid var(--signal);padding:.8rem 0 .8rem 1rem;background:var(--signal-lasur);font-size:.95rem}

/* ---------- Footer + Mobile-Callbar ---------- */
footer{background:var(--ink);color:var(--beton-2);padding:3rem 0 calc(6rem + env(safe-area-inset-bottom,0px));font-size:.9rem}
footer h3{color:var(--papier-2);font-size:.95rem;margin-bottom:.8rem}
footer a{color:var(--papier-2);text-decoration:none;border-bottom:1px solid var(--linie-hell)}
footer a:hover{border-color:var(--signal)}
.foot-grid{display:grid;gap:2rem}
@media(min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot-bottom{margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid var(--linie-hell);display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}

.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;
  grid-template-columns:1fr 1fr;border-top:1px solid var(--ink);
}
.callbar a{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;text-align:center;
  background:var(--ink);color:var(--papier-2);
  /* Der Sicherheitsbereich des Home-Indikators liegt INNEN in der Taste,
     sonst bliebe er unbemalt und die Seite schiene durch. Mit max() ersetzt
     er den normalen Abstand, statt sich darauf zu addieren – die Leiste
     bleibt dadurch so hoch wie ohne Systemzone. */
  padding:1rem .5rem max(1rem, env(safe-area-inset-bottom,0px));
}
.callbar a+a{background:var(--signal-flaeche);color:var(--signal-text)}
@media(min-width:768px){.callbar{display:none}footer{padding-bottom:3rem}}

/* Die Leiste weicht, sobald der Kontaktbereich der Startseite im Sichtfeld
   ist – dort stehen dieselben Tasten, und doppelte Tasten uebereinander
   sind schlechter als keine. Geschaltet ueber eine Klasse, nicht ueber
   style.display: die Tastatur-Regel darueber setzt display inline und
   wuerde sich sonst mit dieser Regel ins Gehege kommen. */
.callbar{transition:transform .18s ease}
.callbar.verborgen{transform:translateY(110%)}
@media(prefers-reduced-motion:reduce){.callbar{transition:none}}

/* Fließtext-Seiten (Impressum/Datenschutz) */
.prose{max-width:70ch}
.prose h2{margin:2.5rem 0 .8rem}
.prose h3{margin:1.8rem 0 .5rem}
.prose ul{padding-left:1.2rem}
.prose li{margin-bottom:.4rem}

/* ---------- Fortschrittsanzeige Formularversand ---------- */
.fortschritt{display:grid;gap:.5rem}
.fortschritt[hidden]{display:none}
.fortschritt-bahn{
  height:6px;background:var(--linie-hell);overflow:hidden;
}
.fortschritt-balken{
  height:100%;width:0;background:var(--signal);
  transition:width .2s linear;
}
.fortschritt-text{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--beton-2);margin:0;
}


/* ---------- Menütaste (nur mobil sichtbar) ---------- */
.menu-btn{
  margin-left:auto;margin-right:0;order:99;
  background:transparent;border:1px solid var(--linie);
  width:44px;height:42px;display:grid;place-items:center;cursor:pointer;padding:0;
  flex:none;
}
.menu-icon,.menu-icon::before,.menu-icon::after{
  display:block;width:20px;height:2px;background:var(--ink);transition:transform .2s,opacity .2s;
}
.menu-icon::before,.menu-icon::after{content:"";position:relative}
.menu-icon::before{top:-6px}
.menu-icon::after{top:4px}
.menu-btn[aria-expanded="true"] .menu-icon{background:transparent}
.menu-btn[aria-expanded="true"] .menu-icon::before{top:-2px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-icon::after{top:-4px;transform:rotate(-45deg)}

/* ---------- Aufklappmenü ---------- */
.menu{
  background:var(--ink);color:var(--papier-2);
  border-top:1px solid var(--linie);
  max-height:calc(100dvh - 64px);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
@supports not (height:100dvh){
  .menu{max-height:calc(100vh - 64px)}
}
.menu[hidden]{display:none}
.menu a{
  display:grid;gap:.15rem;padding:1rem 0;text-decoration:none;color:var(--papier-2);
  border-bottom:1px solid var(--linie-hell);
}
.menu a strong{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:1.05rem;letter-spacing:0;
}
.menu a span{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--beton-2);
}
.menu a[aria-current="page"] strong{color:var(--signal-hell)}
.menu a:last-of-type{border-bottom:none;margin-bottom:1.2rem}

@media(min-width:1250px){
  .menu-btn{display:none}
  .menu{display:none !important}
}


/* ---------- Zwei gleichwertige Kontaktwege ---------- */
.weg{
  border-top:2px solid var(--signal);
  padding-top:1.25rem;
  padding-bottom:2.5rem;
  margin-top:2rem;
}
.weg h3{font-size:1.15rem}
.weg p{margin-bottom:1.5rem}
.weg .btn{display:inline-block;margin-bottom:0}
.weg + .weg{
  border-top-color:var(--linie-hell);
  margin-top:1rem;
  padding-bottom:0;
}


/* ---------- Breadcrumb ---------- */
.krume{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline;margin-bottom:.9rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
}
.krume a{color:var(--beton);text-decoration:none;border-bottom:1px solid var(--linie)}
.krume a:hover{color:var(--ink);border-color:var(--signal)}
.krume span[aria-hidden]{color:var(--beton-3)}
.krume span[aria-current]{color:var(--ink)}

.grid-4{display:grid;gap:1.75rem}
@media(min-width:700px){.grid-4{grid-template-columns:1fr 1fr;gap:2.25rem}}
@media(min-width:1000px){.grid-4{grid-template-columns:repeat(4,1fr)}}


/* Querformat auf dem Telefon: Menü kompakt, damit alle Punkte
   ohne Scrollen erreichbar sind */
@media (max-height:520px){
  .menu a{padding:.5rem 0;gap:.1rem}
  .menu a strong{font-size:.88rem}
  .menu a span{font-size:.62rem;letter-spacing:.08em}
  .menu a:last-of-type{margin-bottom:.5rem}
}


/* ============================================================
   Elektrodemontage: eigenes Farbthema. Gelb ist die
   Kennfarbe elektrischer Gefährdung – hier ist sie am Platz,
   im übrigen Auftritt bewusst nicht.
   ============================================================ */
/* Gelb hat auf hellem Grund kaum Eigenkontrast (1,7–1,9:1). Eine gelb
   gefüllte Taste auf der hellen Seite hätte dort keine erkennbare Kante,
   deshalb bekommt sie im Elektrothema einen dunklen Rand. In dunklen
   Sektionen trägt die Fläche selbst (7,5:1), dort bleibt der Rand gelb. */
body.thema-elektro .btn:hover,
body.thema-elektro .wa:hover{border-color:var(--ink)}
body.thema-elektro .dark .btn:hover{border-color:var(--signal-flaeche)}

body.thema-elektro{
  --signal:#f5a623;
  --signal-hell:#f5a623;      /* auf dunklem Grund            7,49:1 */
  --signal-flaeche:#f5a623;   /* Taste gelb, Schrift anthrazit 7,49:1 */
  --signal-text:#23262b;
  --signal-dunkel:#875406;    /* Text/Symbol auf hell          5,20:1 */
  --signal-lasur:rgba(245,166,35,.16);
}


/* ---------- WhatsApp-Symbol in der Kopfzeile ---------- */
.wa{
  display:grid;place-items:center;width:44px;height:42px;flex:none;
  margin-left:auto;color:var(--signal-dunkel);text-decoration:none;
  border:1px solid var(--linie);
}
.wa:hover{background:var(--signal-flaeche);color:var(--signal-text);border-color:var(--signal-flaeche)}
.wa svg{width:21px;height:21px;fill:currentColor;display:block}
.top-in>.wa + .menu-btn{margin-left:.45rem}
@media(min-width:768px){
  .wa{margin-left:auto}
  .top .kopf-cta{margin-left:.5rem}
}
@media(min-width:1250px){
  .wa{margin-left:1.2rem}
  .top .kopf-cta{margin-left:.5rem}
}

/* ---------- Teaser unter der Einleitung ---------- */
.teaser{
  display:grid;gap:0;margin-top:2rem;border-top:1px solid var(--linie);
}
@media(min-width:760px){
  .teaser{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 2rem}
}
.teaser a,
.teaser.gruende div{
  display:block;padding:1.1rem 0;text-decoration:none;
  border-bottom:1px solid var(--linie);
}
@media(min-width:760px){
  .teaser a,
  .teaser.gruende div{border-bottom:none;border-top:2px solid transparent;margin-top:-1px}
  .teaser a:hover{border-top-color:var(--signal)}
  .teaser.gruende div{border-top-color:var(--signal)}
}
.teaser strong{
  display:block;font-family:var(--display);text-transform:uppercase;
  font-size:.95rem;letter-spacing:0;color:var(--ink);margin-bottom:.3rem;
}
.teaser span{display:block;font-size:.92rem;color:var(--ink-2);line-height:1.45}
.teaser em{
  display:block;font-style:normal;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--signal-dunkel);margin-top:.45rem;
}
.teaser a:hover strong{color:var(--signal-dunkel)}