/*
Theme Name: Stephan Automation
Theme URI: https://stephan-automation.at/
Author: Stephan Automation e.U.
Description: Schlankes Theme ohne Page-Builder. Inhalte als HTML-Blöcke, Stil aus website/vorschau/style.css.
Version: 1.5.3
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: stephan-automation
*/

/* Diese Datei wird von werkzeuge/theme_bauen.py aus vorschau/style.css erzeugt – dort ändern. */

/* Stephan Automation – Grundstil. Farben aus Logo und bisheriger Website. */

/* Montserrat selbst gehostet (SIL Open Font License, schriften/OFL.txt) – keine Verbindung zu Google */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("schriften/montserrat-latin-700-normal.woff2") format("woff2");
  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;
}

:root {
  --navy: #071f4d;
  --navy-tief: #04142f;
  --orange: #ff8800;
  --orange-dunkel: #db7500;
  --orange-text: #b35900;   /* Orange als Schrift auf Weiß/Grau (Kontrast 4,8 : 1) */
  --grau: #f1f1f1;
  --linie: #dde1e8;
  --text: #1a2233;
  --text-leise: #4a5566;
  --weiss: #fff;

  --schrift-kopf: "Montserrat", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Inhalt höchstens 1200 px, Textspalten höchstens 640 px */
  --breite: 75rem;
  --textbreite: 40rem;
  --rand: clamp(1rem, 4vw, 2rem);
  --radius: 6px;
  --luecke: 1.5rem;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; }   /* Sprungziele nicht unter dem festen Kopf */

/* Schriftgrößen laut Design-Playbook, gemessen bei 375 und 1440 px; dazwischen stufenlos */
body {
  margin: 0;
  font-family: var(--schrift);
  font-size: clamp(1.0625rem, 1.0405rem + .094vw, 1.125rem);
  line-height: 1.5;
  color: var(--text);
  background: var(--weiss);
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  margin: 0 0 .5em;
  overflow-wrap: break-word;
  font-family: var(--schrift-kopf);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--navy);
}
h1 { font-size: clamp(2.125rem, 1.641rem + 2.066vw, 3.5rem); }   /* 34 → 56 px */
h2 { font-size: clamp(1.75rem, 1.486rem + 1.127vw, 2.5rem); }     /* 28 → 40 px */
h3 { font-size: clamp(1.1875rem, 1.1435rem + .188vw, 1.3125rem); line-height: 1.25; } /* 19 → 21 px */
@media (max-width: 22.5rem) { h1 { font-size: 1.875rem; } }       /* 320 px: 30 px */

/* Keine automatische Silbentrennung: Lange Wörter in Überschriften bekommen weiche Trennstellen (­) aus vorschau_bauen.py.
   Ab 1280 px ist genug Platz: Dort wandert ein langes Wort ganz in die nächste Zeile statt getrennt zu werden. */
@media (min-width: 80rem) { h1, h2 { hyphens: none; -webkit-hyphens: none; } }

p { margin: 0 0 1em; }

a { color: var(--navy); transition: color .15s, text-decoration-color .15s; }
a:hover { color: var(--orange-text); text-decoration-color: currentColor; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.wrap { max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }

.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 1rem; top: 1rem; z-index: 10; padding: .5rem 1rem; background: var(--weiss); }

/* Knöpfe: Navy auf Orange, weil Weiß auf Orange zu wenig Kontrast hat */
.knopf {
  display: inline-block;
  padding: .85rem 1.5rem;
  border-radius: var(--radius);
  background: var(--orange);
  color: var(--navy);
  font-family: var(--schrift-kopf);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.knopf:hover { background: var(--orange-dunkel); color: var(--navy); }
.knopf--klein { padding: .75rem 1rem; }

.mehr {
  font-weight: 700;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: .3em;
}
.mehr::after { content: "→"; display: inline-block; margin-left: .3em; transition: transform .15s; }
.mehr:hover { text-decoration-thickness: 3px; }
.mehr:hover::after { transform: translateX(4px); }
/* Auf dunklem Grund wird beim Zeigen das helle Orange verwendet */
.kopfbild a:not(.knopf):hover, .hero--dunkel a:not(.knopf):hover, .abschnitt--dunkel a:not(.knopf):not(.kachel):hover,
.abschluss a:not(.knopf):hover, .fuss a:hover { color: var(--orange); }
.hinweis:hover { color: var(--weiss); }

/* Hinweisleiste */
.hinweis {
  display: block;
  padding: .6rem 0;
  background: var(--navy);
  color: var(--weiss);
  font-size: .9375rem;
  text-align: center;
  text-decoration: none;
}
.hinweis strong { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.hinweis:hover strong { text-decoration-thickness: 3px; }
/* Bis 900 px (Handy und Tablet hochkant) nur „Umbau geplant? → Check ab 890 € netto“ in einer Zeile */
@media (max-width: 56.25rem) { .hinweis__lang { display: none; } }
@media (max-width: 22.5rem) { .hinweis { font-size: .875rem; } }   /* 320 px: sonst zwei Zeilen */

/* Kopfzeile */
.kopf {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
}
.kopf__innen { display: flex; align-items: center; gap: 1rem; min-height: 4.5rem; }
.logo img { width: clamp(130px, 42vw, 170px); }
.kopf ul { list-style: none; margin: 0; padding: 0; }
.kopf nav a {
  color: var(--navy);
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
}
.kopf nav a:hover {
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: .4em;
}

.nav-breit { display: none; }

.unter-knopf {
  display: none;
  place-items: center;
  width: 1.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--navy);
  cursor: pointer;
}
.unter-knopf::before {
  content: "";
  width: .45rem;
  height: .45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .15s;
}

.nav-schmal { margin-left: auto; }
.nav-schmal summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .25rem;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}
.nav-schmal summary::-webkit-details-marker { display: none; }
.burger, .burger::before, .burger::after {
  display: block;
  width: 1.25rem;
  height: 2px;
  background: currentColor;
}
.burger { position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -6px; }
.burger::after { top: 6px; }
.nav-schmal[open] .burger { background: transparent; }
.nav-schmal[open] .burger::before { top: 0; transform: rotate(45deg); }
.nav-schmal[open] .burger::after { top: 0; transform: rotate(-45deg); }
/* Handy-Menü: nur die fünf Hauptpunkte, groß und mit Luft; Leistungen und Wissen klappen über den Pfeil auf
   (Jan, 06.10.2026: „da wird man erschlagen“). Die Seite dahinter wird abgedunkelt. */
.nav-schmal nav {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  max-height: calc(100svh - 7.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .5rem 0 1rem;
  border-top: 3px solid var(--orange);
  background: var(--weiss);
  box-shadow: 0 100vmax 0 100vmax rgb(4 20 47 / .45), 0 12px 24px rgb(7 31 77 / .15);   /* abdunkeln nur unterhalb, Kopf bleibt hell */
}
.nav-schmal nav > ul > li { position: relative; }
.nav-schmal nav > ul > li + li { border-top: 1px solid var(--linie); }
.nav-schmal nav > ul > li > a {
  display: block;
  padding: 1rem var(--rand);
  font-family: var(--schrift-kopf);
  font-size: 1.125rem;
  font-weight: 700;
}
.nav-schmal nav > ul > li > a.aktiv { color: var(--orange-text); }
.nav-schmal .hat-unter > a { margin-right: 3.5rem; }
.nav-schmal .unter-knopf {
  display: grid;
  position: absolute;
  top: .45rem;
  right: calc(var(--rand) - .5rem);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
}
.nav-schmal .unter-knopf[aria-expanded="true"] { background: var(--grau); }
.nav-schmal .unter-knopf[aria-expanded="true"]::before { transform: translateY(2px) rotate(-135deg); }
.nav-schmal .unter, .nav-schmal .sub-menu {
  margin: 0 var(--rand) .85rem;
  padding: .35rem 0;
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--grau);
}
.nav-schmal .unter { display: none; }
.nav-schmal .unter-knopf[aria-expanded="true"] + .unter { display: block; }
.nav-schmal .unter a, .nav-schmal .sub-menu a { display: block; padding: .65rem 1rem; font-size: 1rem; font-weight: 600; }
.nav-schmal .unter__alle a { color: var(--text-leise); font-weight: 500; }

.kopf__knopf { display: none; }

/* Anrufen mit einem Tipp (Handy und Tablet) */
.kopf__tel {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: auto;
  border-radius: 50%;
  background: var(--orange);
  color: var(--navy);
}
.kopf__tel svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kopf__tel:hover { background: var(--orange-dunkel); color: var(--navy); }
.kopf__tel + .nav-schmal { margin-left: 0; }

/* Sprachumschalter DE/EN (Jan, 07.10.2026): kleine Pille rechts im Kopf, führt zur selben Seite in der anderen Sprache */
.sprache {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 2.75rem;
  height: 2.75rem;
  margin-left: auto;
  padding: 0 .5rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--navy);
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.sprache:hover { border-color: var(--orange); color: var(--orange-text); }
.kopf__innen .sprache ~ .kopf__tel, .kopf__innen .sprache ~ .nav-schmal { margin-left: 0; }

@media (min-width: 40rem) {
  .kopf__innen { gap: 1.5rem; }
}

/* Nur ein oranger Knopf im Kopf (Jan, 04.10.2026): auf Handy und Tablet (Touch) „Anrufen“, sonst „Check anfragen“ */
@media (min-width: 40rem) and (pointer: fine), (min-width: 64rem) {
  .kopf__knopf { display: inline-block; }
  .kopf__tel { display: none; }
  .kopf__tel + .nav-schmal { margin-left: auto; }
}

@media (min-width: 64rem) {
  .logo img { width: 220px; }
  .sprache { margin-left: 0; min-width: 2.5rem; height: 2.25rem; }
  .nav-schmal { display: none; }
  .nav-breit { display: block; margin-left: auto; }
  .nav-breit ul { display: flex; align-items: center; gap: 1.5rem; }
  .nav-breit .hat-unter, .nav-breit .menu-item-has-children { position: relative; display: flex; align-items: center; }
  /* Alle Hauptpunkte gleich setzen – sonst liegen die Punkte mit Untermenü 2 px höher (Jan, 08.10.2026) */
  .nav-breit > ul > li { display: flex; align-items: center; min-height: 2.75rem; }
  .nav-breit > ul > li > a { display: block; line-height: 1.5; }
  .nav-breit .unter-knopf { display: grid; margin-right: -.5rem; }
  .nav-breit .unter-knopf[aria-expanded="true"]::before, .nav-breit .hat-unter:hover > .unter-knopf::before { transform: translateY(1px) rotate(-135deg); }
  .nav-breit .unter, .nav-breit .sub-menu {
    position: absolute;
    top: calc(100% + 1.55rem);
    left: -1rem;
    z-index: 6;
    display: block;
    min-width: 17rem;
    padding: .5rem 0;
    border: 1px solid var(--linie);
    border-top: 3px solid var(--orange);
    border-radius: 0 0 var(--radius) var(--radius);
    background: var(--weiss);
    box-shadow: 0 14px 30px rgb(7 31 77 / .14);
    opacity: 0;
    visibility: hidden;
    translate: 0 .4rem;
    transition: opacity .15s, translate .15s, visibility .15s;
  }
  /* unsichtbare Brücke zwischen Menüpunkt und Untermenü, damit es beim Hinüberfahren offen bleibt */
  .nav-breit .unter::before, .nav-breit .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 1.7rem; }
  .nav-breit .hat-unter:hover > .unter, .nav-breit .hat-unter:focus-within > .unter, .nav-breit .unter-knopf[aria-expanded="true"] + .unter,
  .nav-breit .menu-item-has-children:hover > .sub-menu, .nav-breit .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; translate: 0 0; }
  .nav-breit .unter li, .nav-breit .sub-menu li { display: block; }
  .nav-breit .unter a, .nav-breit .sub-menu a { display: block; padding: .6rem 1.1rem; white-space: nowrap; }
  .nav-breit .unter a:hover, .nav-breit .sub-menu a:hover { background: var(--grau); text-decoration: none; }
  .nav-breit .unter__alle { margin-top: .35rem; padding-top: .35rem; border-top: 1px solid var(--linie); }
  /* bei 1024 px brachen „Über uns“ und „Check anfragen“ sonst zweizeilig um */
  .nav-breit a, .kopf__knopf { white-space: nowrap; }
}

/* Hero */
.hero {
  padding-block: clamp(2rem, 5vw, 4.5rem) clamp(1rem, 2vw, 1.5rem);
  background: linear-gradient(180deg, var(--grau), var(--weiss));
}
.hero__raster { display: grid; gap: 2rem; align-items: center; }
.hero__raster > * { min-width: 0; }
.hero__text::before {
  content: "";
  display: block;
  width: 3rem;
  height: 4px;
  margin-bottom: 1.25rem;
  background: var(--orange);
}
.unterzeile { max-width: var(--textbreite); margin-bottom: 1.75rem; font-size: clamp(1.1875rem, 1.0775rem + .47vw, 1.5rem); line-height: 1.4; color: var(--text-leise); }

@media (min-width: 60rem) {
  .hero__raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 3rem; }
}

/* Abschnitte */
.abschnitt { padding-block: clamp(3rem, 1.944rem + 4.507vw, 6rem); }   /* 48 px am Handy → 96 px bei 1440 px */
.abschnitt--grau { background: var(--grau); }
.abschnitt h2 { max-width: 46rem; margin-bottom: .9em; }
/* Ab Desktop dürfen Überschriften die ganze Breite nutzen, damit lange Wörter nicht getrennt werden */
@media (min-width: 64rem) { .abschnitt h2 { max-width: none; } }

/* Nutzen */
.nutzen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--luecke); }
.nutzen li { padding-top: 1.25rem; border-top: 3px solid var(--orange); }
.nutzen svg {
  width: 2rem;
  height: 2rem;
  margin-bottom: .75rem;
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nutzen p { margin: 0; color: var(--text-leise); }

@media (min-width: 48rem) {
  .nutzen { grid-template-columns: repeat(3, 1fr); }
}

/* Ablauf */
.ablauf { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--luecke); counter-reset: schritt; }
.ablauf li {
  position: relative;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--weiss);
  counter-increment: schritt;
}
.ablauf li::before {
  content: counter(schritt);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--weiss);
  font-family: var(--schrift-kopf);
  font-weight: 700;
}
.ablauf p { margin: 0; color: var(--text-leise); }
/* Auf weißem Grund graue Karten, auf grauem Grund weiße */
.ablauf li { background: var(--grau); }
.abschnitt--grau .ablauf li { background: var(--weiss); }

/* Am Handy kompakt: Nummer links, Text rechts, weniger Luft */
@media (max-width: 47.99rem) {
  .ablauf { gap: .75rem; }
  .ablauf li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 1rem; padding: 1rem 1.25rem; }
  .ablauf li::before { grid-row: 1 / span 2; width: 2.25rem; height: 2.25rem; margin-bottom: 0; }
  .ablauf h3 { margin-bottom: .2em; }
}

@media (min-width: 48rem) {
  .ablauf { grid-template-columns: repeat(3, 1fr); }
  .ablauf li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 2.75rem;
    right: -1.5rem;
    width: 1.5rem;
    height: 2px;
    background: var(--orange);
  }
}

/* Leistungskacheln */
.kacheln { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--luecke); }
.kachel {
  display: block;
  height: 100%;
  padding: 1.5rem;
  border: 1px solid var(--linie);
  border-top: 4px solid var(--orange);
  border-radius: var(--radius);
  background: var(--weiss);
  color: var(--text);
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.kachel:hover { border-color: var(--orange); box-shadow: 0 10px 28px rgb(7 31 77 / .18); transform: translateY(-2px); }
.kachel h3 { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.kachel__pfeil {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--orange);
  color: var(--navy);
  font-size: 1rem;
  line-height: 1;
  transition: transform .15s;
}
.kachel:hover .kachel__pfeil { transform: translateX(4px); }
.kachel p { margin: 0; font-size: 1rem; color: var(--text-leise); }

/* Am Handy kompakt, damit sechs Kacheln nicht drei Bildschirme füllen */
@media (max-width: 39.99rem) {
  .kacheln { gap: .75rem; }
  .kachel { padding: 1rem 1.25rem; }
  .kachel h3 { margin-bottom: .2em; }
}
@media (min-width: 40rem) { .kacheln { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .kacheln { grid-template-columns: repeat(3, 1fr); } }

/* Kurzporträt mit Meister-Gütesiegel */
.portraet { display: grid; gap: 1.5rem; align-items: center; }
.portraet p { max-width: var(--textbreite); }
.siegel-gross { width: 6.5rem; border-radius: 50%; box-shadow: 0 4px 14px rgb(0 0 0 / .15); }
.hero .siegel-gross { width: 9rem; justify-self: center; }

@media (min-width: 48rem) {
  .portraet { grid-template-columns: 9rem minmax(0, 1fr); gap: 3rem; }
  .siegel-gross { width: 9rem; }
  .hero .siegel-gross { width: 12rem; }
}

/* Abschluss */
.abschluss { background: var(--navy); color: #d5dcea; text-align: center; }
.abschluss h2 { margin-inline: auto; margin-bottom: .6em; color: var(--weiss); }
.abschluss .knopf { margin-top: .5rem; }
/* Telefonnummer unter dem Abschluss-Knopf: als Knopf mit Symbol wie in der Fußzeile (Jan, 06.10.2026) */
.telefon { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem .9rem; margin: 1.5rem 0 0; }
.telefon a {
  gap: .6rem;
  padding: .55rem 1.2rem;
  border: 1px solid rgb(255 255 255 / .28);
  border-radius: 999px;
  color: var(--weiss);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .15s, background-color .15s, color .15s;
}
.telefon a::before {
  content: "";
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  background: var(--orange);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.telefon a:hover, .abschluss .telefon a:hover { border-color: var(--orange); background: rgb(255 136 0 / .12); color: var(--weiss); }

/* Aktive Seite im Menü (auch die Klassen, die WordPress für Elternseiten setzt) */
.kopf nav .current-page-ancestor > a,
.kopf nav .current-menu-ancestor > a,
.kopf nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: .4em;
}

/* Dunkler Kopfbereich (Landingpages) */
.hero--dunkel { background: var(--navy); padding-bottom: clamp(2rem, 5vw, 4.5rem); }
.hero--dunkel h1 { color: var(--weiss); }

@media (min-width: 60rem) {
  .hero--dunkel .hero__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
}
.hero--dunkel .unterzeile { color: #d5dcea; }

/* Stichtag-Box */
.frist {
  padding: 1.75rem;
  border-top: 4px solid var(--orange);
  border-radius: var(--radius);
  background: var(--weiss);
}
.frist__label {
  margin: 0;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-leise);
}
@media (max-width: 22.5rem) { .frist__label { letter-spacing: .02em; } }  /* „Maschinenverordnungs-Check“ passt bei 320 px */
.frist__datum {
  margin: .25rem 0 1rem;
  font-family: var(--schrift-kopf);
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.125rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--navy);
}
.frist p:last-child { margin: 0; color: var(--text-leise); }

/* Kopfbild der Startseite: Jans Foto, mit Gemini bearbeitet (dunkle Halle, orange Lichter), 1:1 übernommen. Ein breites
   Bild für alle Größen; die „Leinwand“ deckt die Fläche ab wie object-fit: cover, so bleiben die Lichter (in % des Bilds)
   an ihrer Stelle. Am Handy Foto über dem Text, ab Desktop (und Handy quer) über die volle Breite mit Verlauf links. */
.kopfbild { position: relative; background: var(--navy); color: #d5dcea; }
.kopfbild__buehne { position: relative; max-width: 120rem; margin-inline: auto; }
.kopfbild__foto { position: relative; aspect-ratio: 3 / 2; overflow: hidden; container-type: size; }
.kopfbild__leinwand {
  --lw: max(100cqw, 100cqh * 2.3571);
  position: absolute;
  left: calc((100cqw - var(--lw)) * var(--fx, .74));
  top: calc((100cqh - var(--lw) / 2.3571) * var(--fy, .2));
  width: var(--lw);
  aspect-ratio: 1584 / 672;
  transform-origin: 72% 35%;
}
.kopfbild__leinwand img { display: block; width: 100%; height: 100%; }
.kopfbild__text { padding-block: 2rem 2.75rem; }
.kopfbild h1 { color: var(--weiss); }
.kopfbild .unterzeile, .kopfbild .hero__weiter { color: #e3e8f1; }
.kopfbild .mehr { color: var(--weiss); }
.kopfkarte { padding-top: var(--luecke); }
/* Handy hochkant: flaches Foto (3:2) und knappe Abstände, damit Überschrift und Knopf in den ersten Bildschirm passen */
@media (max-width: 39.99rem) and (orientation: portrait) {
  .kopfbild__text { padding-top: 1.25rem; }
  .kopfbild__text::before { margin-bottom: 1rem; }
  .kopfbild .unterzeile { margin-bottom: 1.25rem; }
}
@media (min-width: 30rem) and (max-width: 59.99rem) and (orientation: portrait) {
  .kopfbild__foto { aspect-ratio: 4 / 3; }
}

@media (min-width: 60rem), (orientation: landscape) and (min-width: 40rem) {
  .kopfbild__buehne {
    display: grid;
    align-items: center;
    min-height: min(clamp(32rem, 45vw, 52rem), calc(100svh - 7rem));
  }
  .kopfbild__foto { position: absolute; inset: 0; aspect-ratio: auto; }
  .kopfbild__leinwand { --fx: .7; --fy: .25; }
  .kopfbild__buehne::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(7 31 77 / .96) 0%, rgb(7 31 77 / .9) 50%, rgb(7 31 77 / .4) 65%, rgb(7 31 77 / 0) 78%);
  }
  .kopfbild__buehne > .wrap { position: relative; z-index: 1; width: 100%; }
  .kopfbild__text { max-width: min(38rem, 50vw); padding-block: 3.5rem 6.5rem; }
  .kopfkarte { position: relative; z-index: 2; display: flex; justify-content: flex-end; margin-top: -5rem; padding-top: 0; }
  .kopfkarte .hero__karte, .kopfkarte .frist { width: min(26rem, 100%); }
  .hero--mit-karte { padding-bottom: 7.5rem; }
}

/* Breite Bildschirme: Textspalte bleibt links, der Verlauf endet früher. Kontrast der Schrift überall mindestens 5,9 : 1 */
@media (min-width: 80rem) {
  .kopfbild__buehne::after { background: linear-gradient(90deg, rgb(7 31 77 / .96) 0%, rgb(7 31 77 / .9) 40%, rgb(7 31 77 / .5) 60%, rgb(7 31 77 / 0) 75%); }
  .kopfbild__text { max-width: min(38rem, 55vw); }
}

/* Handy quer: Überschrift ohne Scrollen sichtbar */
@media (orientation: landscape) and (max-height: 30rem) and (min-width: 40rem) {
  .kopfbild h1 { font-size: 1.75rem; }
  .kopfbild .unterzeile { margin-bottom: 1rem; font-size: 1rem; }
  .kopfbild__text { padding-block: 1.25rem 4rem; }
  .kopfbild__text::before { display: none; }
}

/* Hallenlicht: beim Öffnen gehen die Lichter flackernd an und bleiben dann ruhig stehen. Kein Atmen, kein Zoom –
   das Bild steht still (Jan, 06.10.2026).
   Schleier und Lichter liegen nur auf der Halle (Maske ohne Jan), Lichter in % des Bilds. */
.kopfbild__licht {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask: url("bilder/kopfbild-halle-maske.webp") 0 0 / 100% 100% no-repeat;
  mask: url("bilder/kopfbild-halle-maske.webp") 0 0 / 100% 100% no-repeat;
}
.kopfbild__schleier { position: absolute; inset: 0; background: rgb(4 20 47 / .8); opacity: 0; }
.licht {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h, var(--w));
  translate: -50% -50%;
  rotate: var(--r, 0deg);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--farbe, rgb(255 160 70 / .75)), rgb(255 136 0 / .12) 65%, transparent);
  mix-blend-mode: screen;
  opacity: .5;
}
.licht--weiss { --farbe: rgb(235 240 255 / .7); }
.bewegung .kopfbild__schleier { animation: halle-an 2.6s .25s linear both; }
.bewegung .licht { animation: licht-an 1s var(--an, .6s) linear both; }
@keyframes halle-an {
  0%, 12% { opacity: 1; }
  14% { opacity: .35; }
  17% { opacity: .95; }
  24% { opacity: .25; }
  27% { opacity: .75; }
  48%, 100% { opacity: 0; }
}
@keyframes licht-an {
  0%, 20% { opacity: 0; }
  24% { opacity: .9; }
  32% { opacity: .1; }
  40% { opacity: 1; }
  100% { opacity: .65; }
}

/* Dunkle Abschnitte (Navy-Fläche statt Stockfoto) */
.abschnitt--dunkel { background: var(--navy); color: #d5dcea; }
.abschnitt--dunkel h2 { color: var(--weiss); }

/* Nach der Check-Karte weniger Luft, sonst entsteht unter dem Kopfbild eine Lücke */
.abschnitt--nach-karte { padding-top: 3rem; }

/* Meisterstück: Bild und Text nebeneinander */
.meisterstueck { display: grid; gap: 2rem; align-items: center; }
.meisterstueck__bild {
  display: grid;
  place-items: center;
  min-height: 16rem;
  margin: 0;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--weiss);
  text-align: center;
}
.meisterstueck p { max-width: var(--textbreite); }
@media (min-width: 48rem) {
  .meisterstueck { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; }
}

/* Bilder in Abschnitten und Praxis-Karten (hochformatige Bilder nicht zu groß) */
.meisterstueck__bild img, .abschnitt-bild__bild img, .referenz-karte__bild img { width: auto; height: auto; max-width: 100%; max-height: 32rem; }
.abschnitt-bild { display: grid; gap: 2rem; align-items: center; }
.abschnitt-bild__bild { display: grid; place-items: center; margin: 0; padding: 1.5rem; border-radius: var(--radius); background: var(--weiss); }
.referenz-karte--bild { display: grid; gap: 1.5rem; align-items: center; max-width: 52rem; }
.referenz-karte__bild { display: grid; place-items: center; margin: 0; padding: .75rem; border-radius: var(--radius); background: var(--weiss); }
.referenz-karte__bild img { max-height: 16rem; }
@media (min-width: 40rem) {
  .referenz-karte--bild { grid-template-columns: 9rem minmax(0, 1fr); }
}
@media (min-width: 48rem) {
  .abschnitt-bild { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; }
}

/* Ansprechpartner mit Porträt, das Gütesiegel ragt an der Ecke ins Foto */
.portraet--foto { gap: 2.5rem; }
.portraet__bilder { position: relative; width: min(15rem, 60vw); }
.portraet__foto { width: 100%; border-radius: var(--radius); }
.portraet__bilder .siegel-gross { position: absolute; right: -1.25rem; bottom: -1.25rem; width: 5.5rem; }
@media (min-width: 48rem) {
  .portraet--foto { grid-template-columns: 15rem minmax(0, 1fr); gap: 4rem; }
  .portraet__bilder .siegel-gross { width: 6rem; }
}

/* Über mich: Porträt groß im Kopf; Kontakt: Porträt klein mit Namen */
.portraet__bilder--gross { width: min(22rem, 75vw); justify-self: center; }
.portraet__bilder--gross .siegel-gross { width: 6.5rem; }
.ansprechpartner { display: flex; align-items: center; gap: 1rem; margin: 0; color: var(--text-leise); }
.ansprechpartner .portraet__foto { width: 5.5rem; }
.ansprechpartner strong { font-family: var(--schrift-kopf); color: var(--navy); }
@media (min-width: 48rem) {
  .portraet__bilder--gross .siegel-gross { width: 8rem; }
}
@media (min-width: 60rem) {
  .ansprechpartner { flex-direction: column; align-items: flex-start; justify-self: end; }
  .ansprechpartner .portraet__foto { width: 11rem; }
}

/* Aufklappbare Details: sichtbar bleibt das Wichtigste, der Rest steht im Quelltext (Google und KI lesen ihn mit) */
.aufklapp summary {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: .3em;
}
.aufklapp summary::-webkit-details-marker { display: none; }
.aufklapp summary::after { content: "+"; font-size: 1.25em; line-height: 1; }
.aufklapp[open] summary::after { content: "–"; }
.aufklapp[open] summary { margin-bottom: 1rem; }
.aufklapp-abschnitt > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; cursor: pointer; list-style: none; }
.aufklapp-abschnitt > summary h2 { flex: 0 1 auto; min-width: 0; }
.aufklapp-abschnitt > summary::-webkit-details-marker { display: none; }
.abschnitt .aufklapp-abschnitt > summary h2 { margin-bottom: 0; }
.aufklapp-abschnitt__hinweis {
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: .3em;
}
.aufklapp-abschnitt__hinweis::after { content: " +"; }
.aufklapp-abschnitt[open] .aufklapp-abschnitt__hinweis { font-size: 0; text-decoration: none; }
.aufklapp-abschnitt[open] .aufklapp-abschnitt__hinweis::after { content: "–"; font-size: 1.0625rem; }
.aufklapp-abschnitt[open] > summary { margin-bottom: 1.5rem; }

/* WPForms im WordPress-Theme: sieht aus wie das Vorschau-Formular.
   Einbau: Shortcode in <div class="formular">…</div>; WPForms » Einstellungen » Allgemein:
   „Moderne Markup“ an, „Formular-Styling einbinden“ = „Nur Basis-Styling“. */
.formular__danke {
  margin: 1rem 0 0;
  padding: .85rem 1rem;
  border-left: 4px solid #2e7d32;
  border-radius: var(--radius);
  background: #e8f3ea;
  color: var(--text);
  font-weight: 600;
}
.formular__fehler { margin: 0 0 1rem; padding: .85rem 1rem; border-left: 4px solid #c0392b; border-radius: var(--radius); background: #fdecea; color: #7a1f16; font-weight: 600; }
/* Honigtopf der Anfrageformulare: für Menschen unsichtbar, für einfache Bots ein Feld wie jedes andere */
.sa-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular__danke:focus { outline: none; }
.formular .wpforms-container { margin: 0; padding: 0; }
.formular > .klein { margin: 0; font-size: .875rem; color: var(--text-leise); }
.formular .wpforms-form .wpforms-field-container { display: grid; gap: 1rem; }
.formular .wpforms-form .wpforms-field { margin: 0; padding: 0; }
.formular .wpforms-form .wpforms-field-label {
  display: block;
  margin: 0 0 .35rem;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy);
}
.formular .wpforms-form .wpforms-required-label { color: var(--navy); font-weight: 600; }
.formular .wpforms-form .wpforms-field input,
.formular .wpforms-form .wpforms-field select,
.formular .wpforms-form .wpforms-field textarea {
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 2.75rem;
  padding: .7rem .85rem;
  border: 1px solid #b9c1ce;
  border-radius: var(--radius);
  background: var(--weiss);
  box-shadow: none;
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
}
.formular .wpforms-form .wpforms-field textarea { min-height: 8rem; resize: vertical; }
.formular .wpforms-form .wpforms-field input:focus,
.formular .wpforms-form .wpforms-field select:focus,
.formular .wpforms-form .wpforms-field textarea:focus { border-color: var(--navy); outline: 3px solid var(--orange); outline-offset: 1px; box-shadow: none; }
.formular .wpforms-form .wpforms-field-description,
.formular .wpforms-form .wpforms-field-sublabel { margin-top: .3rem; font-size: .875rem; color: var(--text-leise); }
.formular .wpforms-form label.wpforms-error,
.formular .wpforms-form em.wpforms-error { display: block; margin-top: .3rem; font-size: .875rem; font-style: normal; color: #b3261e; }
.formular .wpforms-form .wpforms-field input.wpforms-error,
.formular .wpforms-form .wpforms-field select.wpforms-error,
.formular .wpforms-form .wpforms-field textarea.wpforms-error { border-color: #b3261e; }
.formular .wpforms-form .wpforms-submit-container { margin: 1rem 0 0; padding: 0; }
.formular .wpforms-form button.wpforms-submit {
  display: inline-block;
  min-height: 2.75rem;
  padding: .85rem 1.5rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--orange);
  color: var(--navy);
  font-family: var(--schrift-kopf);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}
.formular .wpforms-form button.wpforms-submit:hover,
.formular .wpforms-form button.wpforms-submit:focus { background: var(--orange-dunkel); color: var(--navy); }
.formular .wpforms-confirmation-container-full,
.formular div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
  margin: 0;
  padding: 1rem 1.25rem;
  border: 0;
  border-left: 4px solid var(--orange);
  border-radius: var(--radius);
  background: var(--grau);
  color: var(--text);
}
@media (min-width: 40rem) {
  /* Name, Firma, E-Mail, Telefon zweispaltig wie in der Vorschau; Auswahl und Nachricht über die ganze Breite */
  .formular .wpforms-form .wpforms-field-container { grid-template-columns: 1fr 1fr; }
  .formular .wpforms-form .wpforms-field-select,
  .formular .wpforms-form .wpforms-field-textarea,
  .formular .wpforms-form .wpforms-field-container > :only-child { grid-column: 1 / -1; }
}

/* Bild rechts im Kopf der Leistungsseiten */
.hero__bild { margin: 0; }
.hero__bild img { width: 100%; max-width: 30rem; border-radius: var(--radius); }

/* Beispielbericht: Text links, drei Seiten rechts */
.bericht { display: grid; gap: 2rem; align-items: center; }
.bericht p { max-width: var(--textbreite); }
.bericht__bild { width: min(34rem, 100%); justify-self: center; }
@media (min-width: 60rem) {
  .bericht { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4rem; }
}

/* Tippflächen mindestens 44 × 44 px (Design-Playbook „Alle Geräte“) */
.nav-schmal summary, .aufklapp summary, .aufklapp-abschnitt > summary { min-height: 2.75rem; }
.telefon a, .kontaktweg__wert { display: inline-flex; align-items: center; min-height: 2.75rem; }
@media (max-width: 22.5rem) { .kopf__innen { gap: .75rem; } }

/* Check-Karte im Kopf der Startseite */
.hero__karte { border: 1px solid var(--linie); border-top: 4px solid var(--orange); box-shadow: 0 6px 20px rgb(7 31 77 / .08); }
.haken { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .5rem; }
.haken:last-child { margin-bottom: 0; }
.haken li { position: relative; padding-left: 1.75rem; }
.haken li::before {
  content: "";
  position: absolute;
  left: .35rem;
  top: .3rem;
  width: .4rem;
  height: .75rem;
  border: solid var(--orange-dunkel);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.hero__weiter { margin: 1.25rem 0 0; font-size: 1rem; color: var(--text-leise); }
.aenderungen__mehr, .faq__mehr { margin-top: .6rem !important; }

/* Nummerierte Änderungen */
.aenderungen { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; max-width: calc(var(--textbreite) + 3.5rem); counter-reset: punkt; }
.aenderungen li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1rem;
  counter-increment: punkt;
}
.aenderungen li::before {
  content: counter(punkt);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--weiss);
  font-family: var(--schrift-kopf);
  font-weight: 700;
}
.aenderungen h3 { margin: .4rem 0 .35em; }
.aenderungen p { margin: 0; color: var(--text-leise); }

/* Check-Übersicht */
.check {
  max-width: 52rem;
  margin: 0;
  padding: .25rem 1.5rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}
.check > div { display: grid; gap: .25rem; padding: 1.1rem 0; }
.check > div + div { border-top: 1px solid var(--linie); }
.check dt { font-family: var(--schrift-kopf); font-weight: 700; color: var(--navy); overflow-wrap: break-word; }
.check dd { margin: 0; }
.preis { font-family: var(--schrift-kopf); font-size: 1.5rem; font-weight: 700; color: var(--navy); }

/* Begriff links, Text rechts erst, wenn die Liste selbst breit genug ist – nicht nach Fensterbreite: Neben einem Bild
   (Referenzen, 768 px) blieben sonst 100 px für den Text. 14 rem fassen auch „Sicherheitsfunktionen“; zu lange Wörter bricht overflow-wrap um. */
.check { container-type: inline-size; }
@container (min-width: 34rem) {
  .check > div { grid-template-columns: 14rem minmax(0, 1fr); gap: 1.5rem; }
}

/* FAQ */
.faq { max-width: 48rem; border-top: 1px solid var(--linie); }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary {
  position: relative;
  padding: 1.1rem 2.5rem 1.1rem 0;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; font-size: clamp(1.0625rem, 1.0185rem + .188vw, 1.1875rem); line-height: 1.3; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: .25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--navy);
}
.faq details[open] summary::after { content: "–"; }
.faq details p { max-width: var(--textbreite); margin: 0 0 1.25rem; color: var(--text-leise); }

/* Ab Desktop: Überschrift links, Fragen rechts, damit rechts keine leere Fläche bleibt */
@media (min-width: 64rem) {
  .wrap:has(> h2 + .faq) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 4rem; align-items: start; }
  .wrap:has(> h2 + .faq) > * { grid-column: 2; }
  .wrap:has(> h2 + .faq) > h2 { grid-column: 1; grid-row: 1 / span 9; margin-bottom: 0; }
  .wrap:has(> h2 + .faq) > .faq { max-width: none; }
}

/* Anfrage mit Kurzformular */
.anfrage { background: var(--navy); color: #d5dcea; }
.anfrage h2 { color: var(--weiss); }
.anfrage__raster { display: grid; gap: 2rem; }
.formular {
  display: grid;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--radius);
  background: var(--weiss);
  color: var(--text);
}
.zweispaltig { display: grid; gap: 1rem; }
.formular label { display: block; margin-bottom: .35rem; font-size: .9375rem; font-weight: 600; color: var(--navy); }
.formular input, .formular textarea {
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid #b9c1ce;
  border-radius: var(--radius);
  background: var(--weiss);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
}
.formular input:focus, .formular textarea:focus { border-color: var(--navy); }
.formular button { justify-self: start; border: 0; cursor: pointer; font-size: 1rem; }
.formular .klein { margin: 0; font-size: .875rem; color: var(--text-leise); }
.quelle { margin-top: 2.5rem; font-size: .875rem; color: #aab5c9; }
.quelle a { color: var(--weiss); }

@media (min-width: 40rem) {
  .zweispaltig { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 60rem) {
  .anfrage__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3.5rem; align-items: start; }
}

/* Leistungsseiten */
.kopf nav a.aktiv {
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: .4em;
}
.brotkrumen { margin-bottom: 1.5rem; font-size: .875rem; color: #aab5c9; }
.brotkrumen a { color: var(--weiss); }
.hero__text--breit { max-width: 50rem; }
.text-block { max-width: var(--textbreite); }
.text-block p:last-child { margin-bottom: 0; }

.umfang { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem 2.5rem; }
.umfang li { position: relative; padding-left: 2rem; }
.umfang li::before {
  content: "";
  position: absolute;
  left: .4rem;
  top: .2rem;
  width: .45rem;
  height: .85rem;
  border: solid var(--orange-dunkel);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.umfang h3 { margin-bottom: .3em; }
.umfang p { margin: 0; color: var(--text-leise); }

@media (min-width: 48rem) {
  .umfang { grid-template-columns: 1fr 1fr; }
}

.referenz-karte {
  max-width: 52rem;
  padding: 1.5rem 1.75rem;
  border-left: 4px solid var(--orange);
  border-radius: var(--radius);
  background: var(--grau);
}
.referenz-karte p { color: var(--text-leise); }

@media (min-width: 48rem) {
  .ablauf--4 { grid-template-columns: repeat(2, 1fr); }
  .ablauf--4 li::after { display: none; }
}
@media (min-width: 64rem) {
  .ablauf--4 { grid-template-columns: repeat(4, 1fr); }
  .ablauf--4 li:not(:last-child)::after { display: block; }
}

/* Über uns */
.abschnitt--eng { padding-block: clamp(2rem, 4vw, 3rem); }
.fakten { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--luecke); }
.fakten li {
  display: grid;
  gap: .35rem;
  padding: 1.25rem;
  border-top: 3px solid var(--orange);
  background: var(--grau);
}
.fakten strong { font-family: var(--schrift-kopf); font-size: clamp(1.1875rem, 1.1435rem + .188vw, 1.3125rem); color: var(--navy); }
.fakten span { font-size: 1rem; color: var(--text-leise); }

@media (min-width: 40rem) { .fakten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .fakten { grid-template-columns: repeat(4, 1fr); } }

/* Kontakt */
.kontaktwege { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: var(--luecke); }
.kontaktwege li {
  padding: 1.5rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}
.kontaktwege svg {
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: .75rem;
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kontaktwege h2 { margin-bottom: .35em; font-size: clamp(1.1875rem, 1.1435rem + .188vw, 1.3125rem); }
.kontaktweg__wert {
  display: inline-block;
  font-family: var(--schrift-kopf);
  font-size: 1.125rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.kontaktwege p { margin: .35rem 0 0; font-size: 1rem; color: var(--text-leise); }
.adresse { margin: 0; color: var(--text-leise); }
.adresse strong { color: var(--navy); }

@media (min-width: 48rem) { .kontaktwege { grid-template-columns: repeat(3, 1fr); } }

.formular--breit { max-width: 46rem; }
.formular select {
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid #b9c1ce;
  border-radius: var(--radius);
  background: var(--weiss);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
}
.formular small { display: block; margin-top: .3rem; font-size: .875rem; color: var(--text-leise); }

/* Übersichtsseiten: Absätze und Listen lesbar begrenzen */
.inhalt > p, .inhalt > ul:not(.kacheln):not(.umfang) { max-width: var(--textbreite); }
.inhalt > .check + h2, .inhalt > p + .check { margin-top: 1.5rem; }
.inhalt > p { color: var(--text-leise); }
.hero__zeile { margin: -.75rem 0 1.5rem; font-size: .9375rem; color: var(--text-leise); }

/* Rechtstexte (Datenschutz, Impressum) */
.rechtstext { max-width: var(--textbreite); }
.rechtstext h2 { margin: 2.25em 0 .6em; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext ul { margin: 0 0 1em; padding-left: 1.25rem; }
.rechtstext li { margin-bottom: .35em; }

/* Leistungssymbole in Kacheln */
.kachel__symbol {
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1rem;
  padding: .55rem;
  border-radius: var(--radius);
  background: var(--navy);
}

/* Referenzen auf der Startseite: zwei Karten nebeneinander */
.referenzen-paar { display: grid; gap: var(--luecke); margin-bottom: var(--luecke); }
.abschnitt--grau .referenz-karte { background: var(--weiss); }
@media (min-width: 48rem) { .referenzen-paar { grid-template-columns: 1fr 1fr; } }

/* Platzhalter nur in der Vorschau sichtbar machen */
mark.platzhalter { padding: 0 .2em; border-radius: 3px; background: #ffe08a; color: var(--text); }

/* Fußzeile – Logo links auf heller Karte, zwei Linkspalten rechts, alles auf der Inhaltskante der Seite.
   Etwas dunkler als Navy, damit sie sich vom dunklen Abschlussblock darüber absetzt. */
.fuss { padding-block: clamp(3rem, 6vw, 5rem) 1.75rem; background: var(--navy-tief); color: #c9d1e0; font-size: .9375rem; }
.fuss a { color: var(--weiss); }
.fuss__raster { display: grid; gap: 2.5rem; }
.fuss__logo {
  display: inline-block;
  padding: 1rem 1.5rem;
  border-radius: var(--radius);
  background: var(--grau);
  box-shadow: 0 4px 14px rgb(0 0 0 / .25);
}
.fuss__logo img { width: 230px; }
.fuss__kontakt { display: flex; flex-wrap: wrap; gap: .75rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
.fuss__kontakt a {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.75rem;
  padding: .55rem 1.1rem;
  border: 1px solid rgb(255 255 255 / .22);
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s, background-color .15s, color .15s;
}
.fuss__kontakt a:hover { border-color: var(--orange); background: rgb(255 136 0 / .12); }
.fuss__kontakt svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fuss__nav { display: grid; gap: 1.5rem 4rem; }
.fuss__nav ul { list-style: none; margin: 0; padding: 0; }
.fuss__nav li + li { margin-top: .65rem; }
@media (min-width: 30rem) { .fuss__nav { grid-template-columns: repeat(2, auto); justify-content: start; } }
.fuss__nav a {
  font-family: var(--schrift-kopf);
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
}
.fuss__nav a:hover { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: .35em; }
.fuss__nav .fuss__social { display: flex; gap: .5rem; grid-column: 1 / -1; }
.fuss__social li + li { margin-top: 0; }
.fuss__social a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius); }
.fuss__social a:hover { background: rgb(255 255 255 / .1); }
.fuss__social svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.fuss__unten { margin-top: clamp(2.5rem, 5vw, 3.5rem); margin-bottom: 0; padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / .12); font-size: .875rem; }

@media (min-width: 48rem) {
  .fuss__raster { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; align-items: start; }
}

/* ==========================================================================================================
   Bewegung (Freigabe Jan, 06.10.2026; ersetzt die Regel „keine Animationen außer Hover“ aus dem Design-Playbook).
   Animiert wird nur ohne „Bewegung reduzieren“: dann trägt <html> die Klasse .bewegung (Inline-Skript im <head>).
   Was erst beim Scrollen erscheint, braucht zusätzlich .bewegung-bereit von bewegung.js – lädt das Skript nicht,
   bleibt nichts versteckt. Ohne beide Klassen ist alles sofort sichtbar und ruhig.
   ========================================================================================================== */

/* Knopf zum Anhalten endloser Animationen (WCAG 2.2.2) */
.bewegung-pause {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgb(255 255 255 / .25);
  border-radius: 50%;
  background: rgb(4 20 47 / .6);
  color: #c9d3e6;
  cursor: pointer;
}
.bewegung-pause[hidden] { display: none; }
.bewegung-pause:hover { border-color: var(--orange); color: var(--weiss); }
.bewegung-pause:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.bewegung-pause svg { width: 1rem; height: 1rem; fill: currentColor; }
.bewegung-pause[aria-pressed="true"] .bewegung-pause__halt,
.bewegung-pause[aria-pressed="false"] .bewegung-pause__weiter { display: none; }
.angehalten *, .angehalten *::before, .angehalten *::after { animation-play-state: paused !important; }

/* Raster wie auf einem Zeichnungsblatt (Kopf mit Schaltplan, Schrittkette oder Logo-Zeichen) */
.hero--marke { position: relative; overflow: hidden; }
.hero--marke > .wrap { position: relative; z-index: 1; }
.hero__marke {
  position: absolute;
  top: 50%;
  right: max(-6rem, (100% - var(--breite)) / 2 - 8rem);
  width: min(36rem, 70vw);
  height: auto;
  translate: 0 -50%;
  pointer-events: none;
}
.hero__marke path { fill: rgb(255 255 255 / .03); stroke: rgb(255 255 255 / .16); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hero__marke .hero__marke-s { fill: rgb(255 136 0 / .1); stroke: rgb(255 136 0 / .55); }
@media (max-width: 59.99rem) {
  .hero__marke { top: auto; bottom: -3rem; right: -5rem; width: min(22rem, 70vw); translate: 0 0; opacity: .7; }
}
.hero--marke, .hero--schema {
  background-image:
    radial-gradient(ellipse 70% 80% at 70% 50%, transparent 35%, var(--navy) 90%),
    radial-gradient(ellipse 40% 50% at 78% 52%, rgb(255 136 0 / .07), transparent 70%),
    linear-gradient(rgb(255 255 255 / .045) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / .045) 1px, transparent 1px);
  background-size: auto, auto, 2rem 2rem, 2rem 2rem;
  background-position: center, center, -1px -1px, -1px -1px;
}
.hero--schema .schema-rahmen { width: 100%; max-width: 21rem; justify-self: center; }
@media (min-width: 60rem) {
  .hero--schema .hero__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .hero--schema .schema-rahmen { max-width: 30rem; justify-self: end; }
}

/* Not-Halt-Schaltplan (bausteine/not-halt-schema.html): Linien zeichnen sich, Strom fließt, Not-Halt löst aus,
   sicherer Zustand, Quittieren, Betrieb. Zustand im Attribut data-zustand (bereit, quittieren, laeuft, halt). */
.schema-rahmen { position: relative; margin: 0; }
.schema { display: block; width: 100%; height: auto; overflow: visible; }
.schema .l { fill: none; stroke: #b4c2dc; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bewegung .schema .l { stroke-dasharray: 1; stroke-dashoffset: 1; animation: schema-zeichnen 1.3s cubic-bezier(.6, 0, .2, 1) forwards; }
.bewegung .schema .t2 .l { animation-delay: .2s; }
.bewegung .schema .t3 .l { animation-delay: .45s; }
.bewegung .schema .t4 .l { animation-delay: .7s; }
.bewegung .schema .t5 .l { animation-delay: .5s; }
.bewegung .schema .t6 .l { animation-delay: 1s; }
@keyframes schema-zeichnen {
  0% { stroke-dashoffset: 1; stroke-dasharray: 1; }
  99.9% { stroke-dashoffset: 0; stroke-dasharray: 1; }
  100% { stroke-dashoffset: 0; stroke-dasharray: none; }
}
.bewegung .schema .ein { opacity: 0; animation: schema-ein .6s 1.4s forwards; }
.bewegung .schema .pulse { opacity: 0; animation: schema-ein .6s 1.9s forwards; }
@keyframes schema-ein { to { opacity: 1; } }

.schema .strich { fill: none; stroke: #8fa1c4; stroke-width: 1.2; stroke-dasharray: 4 3; }
.schema .linie { fill: none; stroke: #b4c2dc; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.schema .pilzkopf { fill: var(--orange); transition: filter .3s; }
.schema .punkte { fill: #b4c2dc; }
.schema text { font-family: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace; font-size: 11px; fill: #8fa1c4; }
.schema .leise { fill: #6f83aa; font-family: var(--schrift); font-size: 10.5px; }
.schema .klemme { font-size: 9px; fill: #6f83aa; }
.schema .motor { font-family: var(--schrift-kopf); font-weight: 700; font-size: 20px; fill: #d5dcea; }
.schema .status__text { font-size: 10.5px; letter-spacing: .06em; opacity: 0; transition: opacity .4s; }

.schema .kontakt, .schema .pilz, .schema .taster, .schema .koppel { transform-box: view-box; transition: transform .35s cubic-bezier(.3, .7, .3, 1); }
.schema .pilz, .schema .taster, .schema .koppel { transition-property: transform, opacity; }
.schema[data-zustand="halt"] .nothalt { transform: rotate(12deg); }
.schema[data-zustand="halt"] .pilz { transform: translateX(5px); }
.schema[data-zustand="halt"] .pilzkopf { filter: drop-shadow(0 0 5px rgb(255 136 0 / .9)); }
.schema[data-zustand="quittieren"] .quittieren { transform: rotate(18.4deg); }
.schema[data-zustand="quittieren"] .taster { transform: translateX(5px); }
.schema[data-zustand="laeuft"] .rueck { transform: rotate(12deg); }
.schema[data-zustand="laeuft"] .haupt { transform: rotate(18.4deg); }
.schema[data-zustand="laeuft"] .koppel { transform: translateX(5px); }

.schema .puls { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-linecap: round; opacity: 0; transition: opacity .35s; }
.bewegung .schema .puls { stroke-dasharray: 8 42; animation: schema-fliessen 1.1s linear infinite; filter: drop-shadow(0 0 3px rgb(255 136 0 / .9)); }
@keyframes schema-fliessen { from { stroke-dashoffset: 50; } to { stroke-dashoffset: 0; } }
.schema:not([data-zustand="halt"]) .puls--kanal,
.schema[data-zustand="quittieren"] .puls--quitt,
.schema[data-zustand="laeuft"] .puls--aus,
.schema[data-zustand="laeuft"] .puls--haupt { opacity: .85; }
.bewegung .schema:not([data-zustand="halt"]) .puls--kanal,
.bewegung .schema[data-zustand="quittieren"] .puls--quitt,
.bewegung .schema[data-zustand="laeuft"] .puls--aus,
.bewegung .schema[data-zustand="laeuft"] .puls--haupt { opacity: 1; }

.schema .spule { transition: fill .3s, stroke .3s; }
.schema[data-zustand="laeuft"] .spule { fill: rgb(255 136 0 / .22); stroke: var(--orange); }
.schema .led { fill: #2c3f66; transition: fill .3s; }
.schema[data-zustand="laeuft"] .led { fill: var(--orange); }
.schema .glut { opacity: 0; transition: opacity .8s; }
.schema[data-zustand="laeuft"] .glut { opacity: 1; }
.schema .rotor { fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 22 141; opacity: 0; transform-box: view-box; transform-origin: 395px 352px; transition: opacity .6s; }
.bewegung .schema .rotor { animation: schema-drehen 1.4s linear infinite; }
@keyframes schema-drehen { to { transform: rotate(360deg); } }
.schema[data-zustand="laeuft"] .rotor { opacity: 1; }
.schema[data-zustand="laeuft"] .status--laeuft { opacity: 1; fill: #b4c2dc; }
.schema[data-zustand="halt"] .status--halt { opacity: 1; fill: var(--orange); }
.schema[data-zustand="bereit"] .status--bereit,
.schema[data-zustand="quittieren"] .status--bereit { opacity: 1; fill: #b4c2dc; }
/* Am Handy kräftigere Linien, ohne Beschriftung (wäre zu klein) */
@media (max-width: 39.99rem) {
  .schema .l, .schema .linie { stroke-width: 2.4; }
  .schema .puls { stroke-width: 3.5; }
  .schema .beschriftung, .schema .status { display: none; }
}

/* Schrittkette (bausteine/schrittkette.html) im Stil von S7-Graph: aktiver Schritt orange, die erfüllte
   Weiterschaltbedingung leuchtet auf, während „Füllen“ läuft der Füllstand bis zum Sollwert. */
.schrittkette-rahmen { position: relative; width: 100%; max-width: 25rem; margin: 0 auto; }
.schrittkette { display: block; width: 100%; height: auto; overflow: visible; }
.schrittkette .kette { fill: none; stroke: #b4c2dc; stroke-width: 1.5; }
.schrittkette path.kette[d$="Z"] { fill: #b4c2dc; stroke: none; }
.schrittkette .kette--zug { stroke: var(--orange); stroke-width: 2.5; opacity: 0; transition: opacity .2s; }
.bewegung .schrittkette .kette--zug { stroke-dasharray: 5 7; animation: kette-zug .5s linear infinite; }
@keyframes kette-zug { from { stroke-dashoffset: 12; } to { stroke-dashoffset: 0; } }
.schritt rect { fill: rgb(255 255 255 / .04); stroke: #b4c2dc; stroke-width: 1.5; transition: fill .3s, stroke .3s; }
.schritt rect.schritt__innen { fill: none; stroke-width: 1; }
.schrittkette text { font-family: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace; font-size: 10px; fill: #6f83aa; }
.schrittkette .schritt__nr { font-weight: 700; fill: #8fa1c4; transition: fill .3s; }
.schrittkette .schritt__name { font-family: var(--schrift); font-size: 12px; fill: #e3e8f1; }
.schrittkette .weiter__bed { font-family: var(--schrift); font-size: 11.5px; fill: #8fa1c4; transition: fill .25s; }
.weiter path { stroke: #b4c2dc; stroke-width: 3; stroke-linecap: round; transition: stroke .25s; }
.fuellstand__rahmen { fill: rgb(255 255 255 / .06); stroke: #6f83aa; stroke-width: 1; }
.fuellstand__balken { fill: var(--orange); transform-box: fill-box; transform-origin: left center; transform: scaleX(.62); }
.fuellstand__soll { stroke: var(--orange); stroke-width: 1.5; stroke-dasharray: 2 2; }
.bewegung .schrittkette .fuellstand__balken { transform: scaleX(0); transition: transform .4s; }
.bewegung .schrittkette[data-schritt="S3"] .fuellstand__balken { transform: scaleX(1); transition: transform 2.4s linear; }
.bewegung .schrittkette[data-schritt="T3"] .fuellstand__balken { transform: scaleX(1); }
.schrittkette[data-schritt="S1"] [data-schritt="S1"] rect:first-of-type, .schrittkette[data-schritt="T1"] [data-schritt="S1"] rect:first-of-type,
.schrittkette[data-schritt="S2"] [data-schritt="S2"] rect, .schrittkette[data-schritt="T2"] [data-schritt="S2"] rect,
.schrittkette[data-schritt="S3"] [data-schritt="S3"] rect, .schrittkette[data-schritt="T3"] [data-schritt="S3"] rect,
.schrittkette[data-schritt="S4"] [data-schritt="S4"] rect, .schrittkette[data-schritt="T4"] [data-schritt="S4"] rect,
.schrittkette[data-schritt="S5"] [data-schritt="S5"] rect, .schrittkette[data-schritt="T5"] [data-schritt="S5"] rect { fill: rgb(255 136 0 / .2); stroke: var(--orange); }
.schrittkette[data-schritt="S1"] [data-schritt="S1"] .schritt__nr, .schrittkette[data-schritt="T1"] [data-schritt="S1"] .schritt__nr,
.schrittkette[data-schritt="S2"] [data-schritt="S2"] .schritt__nr, .schrittkette[data-schritt="T2"] [data-schritt="S2"] .schritt__nr,
.schrittkette[data-schritt="S3"] [data-schritt="S3"] .schritt__nr, .schrittkette[data-schritt="T3"] [data-schritt="S3"] .schritt__nr,
.schrittkette[data-schritt="S4"] [data-schritt="S4"] .schritt__nr, .schrittkette[data-schritt="T4"] [data-schritt="S4"] .schritt__nr,
.schrittkette[data-schritt="S5"] [data-schritt="S5"] .schritt__nr, .schrittkette[data-schritt="T5"] [data-schritt="S5"] .schritt__nr { fill: var(--orange); }
.schrittkette[data-schritt="T1"] [data-weiter="T1"] path, .schrittkette[data-schritt="T2"] [data-weiter="T2"] path,
.schrittkette[data-schritt="T3"] [data-weiter="T3"] path, .schrittkette[data-schritt="T4"] [data-weiter="T4"] path,
.schrittkette[data-schritt="T5"] [data-weiter="T5"] path { stroke: var(--orange); filter: drop-shadow(0 0 4px rgb(255 136 0 / .9)); }
.schrittkette[data-schritt="T1"] [data-weiter="T1"] .weiter__bed, .schrittkette[data-schritt="T2"] [data-weiter="T2"] .weiter__bed,
.schrittkette[data-schritt="T3"] [data-weiter="T3"] .weiter__bed, .schrittkette[data-schritt="T4"] [data-weiter="T4"] .weiter__bed,
.schrittkette[data-schritt="T5"] [data-weiter="T5"] .weiter__bed { fill: var(--weiss); }
.schrittkette[data-schritt="T1"] [data-nach="S2"], .schrittkette[data-schritt="T2"] [data-nach="S3"],
.schrittkette[data-schritt="T3"] [data-nach="S4"], .schrittkette[data-schritt="T4"] [data-nach="S5"],
.schrittkette[data-schritt="T5"] [data-nach="S1"] { opacity: 1; }

/* Stichtag: Countdown (Tage) und Zeitstrahl vom Inkrafttreten bis zum Stichtag */
.countdown { margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--linie); color: var(--text-leise); }
.countdown__zahl { font-family: var(--schrift-kopf); font-size: 1.375rem; color: var(--navy); font-variant-numeric: tabular-nums; }
.frist p.countdown { margin-top: 1rem; }
.frist p.countdown--kurz { margin: -.5rem 0 0; padding-top: 0; border-top: 0; }
.countdown--kurz:has(.countdown__rest[hidden]) { display: none; }
.zeitstrahl { margin: 2.25rem 0 1.25rem; }
.zeitstrahl__spur { position: relative; height: 6px; border-radius: 3px; background: var(--linie); }
.zeitstrahl__fortschritt { position: absolute; inset: 0 auto 0 0; width: calc(var(--anteil, 0) * 100%); border-radius: inherit; background: var(--orange); transition: width 1.8s cubic-bezier(.3, .7, .3, 1); }
.zeitstrahl__heute { position: absolute; top: 50%; left: calc(var(--anteil, 0) * 100%); width: 1rem; height: 1rem; translate: -50% -50%; border: 3px solid var(--orange); border-radius: 50%; background: var(--weiss); transition: left 1.8s cubic-bezier(.3, .7, .3, 1); }
.zeitstrahl__heute span { position: absolute; bottom: calc(100% + .35rem); left: 50%; translate: -50% 0; font-size: .8125rem; font-weight: 700; color: var(--navy); white-space: nowrap; }
.zeitstrahl__enden { display: flex; justify-content: space-between; gap: 1rem; margin: .6rem 0 0; font-size: .8125rem; line-height: 1.35; color: var(--text-leise); }
.zeitstrahl__enden span:last-child { text-align: right; }
.zeitstrahl__enden strong { color: var(--navy); }

/* Ablauf: Karten erscheinen nacheinander, die Nummer leuchtet kurz orange, die Verbindung zieht sich auf */
.bewegung-bereit .ablauf li { opacity: 0; translate: 0 1rem; transition: opacity .6s, translate .6s cubic-bezier(.2, .7, .3, 1); }
.bewegung-bereit .ablauf.ist-sichtbar li { opacity: 1; translate: 0 0; }
.bewegung-bereit .ablauf.ist-sichtbar li::before { animation: ablauf-nummer .9s both; }
.bewegung-bereit .ablauf li:nth-child(2), .bewegung-bereit .ablauf li:nth-child(2)::before { transition-delay: .35s; animation-delay: .35s; }
.bewegung-bereit .ablauf li:nth-child(3), .bewegung-bereit .ablauf li:nth-child(3)::before { transition-delay: .7s; animation-delay: .7s; }
.bewegung-bereit .ablauf li:nth-child(4), .bewegung-bereit .ablauf li:nth-child(4)::before { transition-delay: 1.05s; animation-delay: 1.05s; }
@keyframes ablauf-nummer {
  0% { transform: scale(.6); background: var(--navy); color: var(--weiss); }
  45% { transform: scale(1.15); background: var(--orange); color: var(--navy); }
  100% { transform: scale(1); background: var(--navy); color: var(--weiss); }
}
@media (min-width: 48rem) {
  .bewegung-bereit .ablauf li::after { transform: scaleX(0); transform-origin: left; transition: transform .5s .3s; }
  .bewegung-bereit .ablauf.ist-sichtbar li::after { transform: scaleX(1); }
  .bewegung-bereit .ablauf.ist-sichtbar li:nth-child(2)::after { transition-delay: .65s; }
  .bewegung-bereit .ablauf.ist-sichtbar li:nth-child(3)::after { transition-delay: 1s; }
}

/* Musterbericht: drei Seiten fächern auf, die Ampel-Bilanz zählt hoch */
.bericht__stapel { position: relative; width: min(34rem, 100%); aspect-ratio: 1 / 1.12; justify-self: center; }
.bericht__seite {
  position: absolute;
  left: calc(var(--i) * 15.3%);
  top: calc((2 - var(--i)) * 6.1%);
  width: 69.4%;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 10px 28px rgb(7 31 77 / .22);
}
.bewegung-bereit .bericht__seite { transition: left 1s cubic-bezier(.2, .7, .3, 1), top 1s cubic-bezier(.2, .7, .3, 1), rotate 1s; transition-delay: calc(var(--i) * .18s); }
.bewegung-bereit .bericht__stapel:not(.ist-sichtbar) .bericht__seite { left: 0; top: 12.2%; rotate: calc(var(--i) * -2.5deg); }
.ampel-bilanz { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; list-style: none; margin: 0 0 1.25rem; padding: 0; }
.ampel-bilanz li { display: flex; align-items: center; gap: .5rem; color: var(--text-leise); }
.ampel-bilanz li::before { content: ""; width: 1rem; height: 1rem; border-radius: 50%; background: var(--ampel); }
.ampel-bilanz strong { font-family: var(--schrift-kopf); font-size: 1.375rem; color: var(--navy); font-variant-numeric: tabular-nums; }
.ampel-bilanz--gruen { --ampel: #2e7d32; }
.ampel-bilanz--gelb { --ampel: #e0a100; }
.ampel-bilanz--rot { --ampel: #c62828; }
.ampel-bilanz--hinweis { --ampel: #1f6fb2; }
.bewegung-bereit .ampel-bilanz li::before { scale: 0; transition: scale .5s cubic-bezier(.3, 1.6, .5, 1); }
.bewegung-bereit .ampel-bilanz.ist-sichtbar li::before { scale: 1; }
.bewegung-bereit .ampel-bilanz.ist-sichtbar li:nth-child(2)::before { transition-delay: .25s; }
.bewegung-bereit .ampel-bilanz.ist-sichtbar li:nth-child(3)::before { transition-delay: .5s; }
.bewegung-bereit .ampel-bilanz.ist-sichtbar li:nth-child(4)::before { transition-delay: .75s; }

/* Punkte im Foto (Schaltschrankbau): Antippen oder Zeigen erklärt das Bauteil */
.punkte { position: relative; max-width: 30rem; }
.punkte img { display: block; width: 100%; }
.punkt {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 2.75rem;
  height: 2.75rem;
  translate: -50% -50%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.punkt__nr {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: auto;
  border-radius: 50%;
  background: var(--orange);
  color: var(--navy);
  font-family: var(--schrift-kopf);
  font-size: .875rem;
  font-weight: 700;
  box-shadow: 0 0 0 3px rgb(255 255 255 / .85), 0 2px 8px rgb(0 0 0 / .35);
}
.bewegung .punkt__nr { animation: punkt-puls 1.6s .6s 3 ease-out; }
@keyframes punkt-puls {
  0% { box-shadow: 0 0 0 3px rgb(255 255 255 / .85), 0 0 0 3px rgb(255 136 0 / .7); }
  100% { box-shadow: 0 0 0 3px rgb(255 255 255 / .85), 0 0 0 18px rgb(255 136 0 / 0); }
}
.punkt__text {
  position: absolute;
  bottom: calc(100% - .25rem);
  left: 50%;
  z-index: 2;
  width: max-content;
  max-width: min(16rem, 70vw);
  padding: .6rem .8rem;
  border-radius: var(--radius);
  background: var(--weiss);
  box-shadow: 0 8px 24px rgb(7 31 77 / .3);
  font-size: .875rem;
  line-height: 1.4;
  text-align: left;
  translate: -50% 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.punkt__text strong { display: block; color: var(--navy); }
.punkt--links .punkt__text { left: 0; translate: -.5rem 0; }
.punkt--rechts .punkt__text { left: auto; right: 0; translate: .5rem 0; }
.punkt--unten .punkt__text { top: calc(100% - .25rem); bottom: auto; }
.punkt[aria-expanded="true"] .punkt__text, .punkt:focus-visible .punkt__text { opacity: 1; }
@media (hover: hover) { .punkt:hover .punkt__text { opacity: 1; } }
.punkt[aria-expanded="true"], .punkt:hover, .punkt:focus-visible { z-index: 3; }
.punkt:focus-visible { outline: none; }
.punkt:focus-visible .punkt__nr { outline: 2px solid var(--weiss); outline-offset: 3px; }
.punkte__hinweis { margin: .75rem 0 0; font-size: .875rem; color: #c9d3e6; }

/* Vorher/Nachher-Schieber (bausteine/vorher-nachher.html, Retrofit-Seite): gezeichneter Schaltschrank, links alt, rechts neu.
   Der Regler ist ein unsichtbares <input type="range"> über der ganzen Fläche – Maus, Finger und Pfeiltasten. */
.vergleich { width: 100%; max-width: 30rem; margin: 0; justify-self: center; }
.vergleich__buehne { position: relative; aspect-ratio: 480 / 400; overflow: hidden; border-radius: var(--radius); touch-action: pan-y; }
.vergleich__bild { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.vergleich__vorher { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.vergleich__griff { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; translate: -1px 0; background: var(--orange); pointer-events: none; }
.vergleich__griff::after {
  content: "‹ ›";
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--orange);
  color: var(--navy);
  font-weight: 700;
  letter-spacing: .1em;
  box-shadow: 0 4px 14px rgb(0 0 0 / .35);
}
.vergleich__buehne:has(.vergleich__regler:focus-visible) .vergleich__griff::after { outline: 3px solid var(--weiss); outline-offset: 3px; }
.vergleich__regler { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.vergleich__marke { position: absolute; top: .6rem; padding: .2rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.vergleich__marke--vorher { left: .6rem; background: rgb(4 20 47 / .8); color: #e3d3b0; }
.vergleich__marke--nachher { right: .6rem; background: var(--orange); color: var(--navy); }
.vergleich figcaption { margin-top: .75rem; font-size: .875rem; line-height: 1.45; color: #c9d3e6; }
.vg text { font-family: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace; font-size: 9px; }
.vg .rahmen { fill: #05173a; stroke: #8fa1c4; stroke-width: 2; }   /* deckend, sonst scheint die andere Ebene durch */
.vg .rahmen-linie { stroke: #8fa1c4; stroke-width: 3; stroke-linecap: round; }
.vg-alt .platte { fill: #1d2c44; stroke: #8a7f6a; }
.vg-alt .traeger { fill: none; stroke: #8a7f6a; stroke-width: 1.5; }
.vg-alt .teil, .vg-alt .klemme { fill: rgb(201 179 138 / .14); stroke: #b9a888; stroke-width: 1.2; }
.vg-alt .stecker { fill: rgb(201 179 138 / .08); stroke: #8f846c; stroke-dasharray: 2 2; }
.vg-alt .teil-linie { stroke: #8f846c; }
.vg-alt .led { fill: #a35d4f; }
.vg-alt .spule { fill: none; stroke: #b9a888; }
.vg-alt .draht { fill: none; stroke-width: 1.3; opacity: .9; }
.vg-alt .ende { fill: #d0c29c; }
.vg-alt .zettel { fill: #e8d98a; opacity: .9; }
.vg-alt .zettel-text { fill: #5a4a20; font-size: 9px; }
.vg-alt text { fill: #c9b896; }
.vg-neu .platte { fill: #0c2552; stroke: #8fa1c4; }
.vg-neu .teil { fill: rgb(255 255 255 / .07); stroke: #b4c2dc; stroke-width: 1.2; }
.vg-neu .kopf { fill: #6f83aa; }
.vg-neu .kopf-orange, .vg-neu .bmk { fill: var(--orange); }
.vg-neu .anzeige { fill: #1e3a6e; stroke: #b4c2dc; }
.vg-neu .led-gruen { fill: #3fae6a; }
.vg-neu .sicher { fill: rgb(242 194 48 / .28); stroke: #f2c230; stroke-width: 1.2; }
.vg-neu .kanal { fill: rgb(255 255 255 / .1); stroke: #8fa1c4; }
.vg-neu .schlitz { stroke: #6f83aa; stroke-dasharray: 2 5; }
.vg-neu .leitung { stroke: #d5dcea; stroke-width: 1.1; opacity: .8; }
.vg-neu .profinet { fill: none; stroke: #3fae6a; stroke-width: 2.2; stroke-linecap: round; }
.vg-neu .klemme-neu { fill: rgb(80 140 220 / .25); stroke: #b4c2dc; }
.vg-neu .klemme-pe { fill: rgb(63 174 106 / .35); stroke: #e3d36a; }
.vg-neu .bruecke { stroke: var(--orange); stroke-width: 2; }
.vg-neu .port { fill: #3fae6a; }
.vg-neu .plan { fill: rgb(255 255 255 / .9); stroke: #b4c2dc; }
.vg-neu .plan-linie { stroke: #8fa1c4; }
.vg-neu .plan + .plan-linie + text, .vg-neu text { fill: #b4c2dc; }

/* Kontaktseite (Jan, 07.10.2026: „besser designen“): dunkler Kopf mit Logo-Zeichen, darunter eine Karte „Direkt erreichen“
   und das Formular als Karte – am Desktop nebeneinander, am Handy die Karte zuerst. Ohne Foto. */
.kontakt-kopf { padding-bottom: clamp(5rem, 9vw, 7.5rem); }
.kontakt { padding-top: 0; background: var(--grau); }
.kontakt__raster { position: relative; z-index: 2; display: grid; grid-template-areas: "karte" "formular"; gap: var(--luecke); margin-top: -3.5rem; }
.kontakt__karte, .kontakt__formular { border-radius: var(--radius); background: var(--weiss); box-shadow: 0 14px 34px rgb(7 31 77 / .12); }
.kontakt__karte { grid-area: karte; padding: clamp(1.25rem, 3vw, 1.75rem); border-top: 4px solid var(--orange); }
.kontakt__formular { grid-area: formular; padding: clamp(1.25rem, 3vw, 2.25rem); }
.kontakt__formular h2, .kontakt__karte h2 { margin-bottom: 1.25rem; font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); }
.kontakt__formular .formular { padding: 0; }
.kontakt__wege { display: grid; gap: .75rem; list-style: none; margin: 0 0 1.25rem; padding: 0; container-type: inline-size; }
.kontakt__wege a {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  transition: border-color .15s, background-color .15s;
}
.kontakt__wege a:hover { border-color: var(--orange); background: rgb(255 136 0 / .06); color: var(--text); }
.kontakt__symbol { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--orange); color: var(--navy); }
.kontakt__symbol svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Die E-Mail-Adresse soll in einer Zeile stehen: Schrift wächst mit der Breite der Liste (cqi), 13–17 px. Wird es trotzdem zu eng
   (320 px), bricht sie nach dem @ um, nicht mitten in „stephan-automation“. */
.kontakt__wege strong { display: block; font-family: var(--schrift-kopf); font-size: 1.0625rem; font-size: clamp(.8125rem, (100cqi - 4.75rem) / 15.5, 1.0625rem); color: var(--navy); }
.kein-umbruch { white-space: nowrap; }
.kontakt__termin { padding: 1.25rem; border-radius: var(--radius); background: var(--navy); color: #d5dcea; }
.kontakt__termin h3 { margin: 0 0 .35rem; color: var(--weiss); }
.kontakt__termin p { margin: 0 0 1rem; font-size: .9375rem; }
.kontakt__termin .knopf { display: block; text-align: center; }
.kontakt__ort { margin: 1.25rem 0 0; font-size: .875rem; line-height: 1.5; color: var(--text-leise); }
/* Nebeneinander erst ab 1056 px: darunter wäre die Karte so schmal, dass die E-Mail-Adresse umbricht */
@media (min-width: 66rem) {
  .kontakt__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); grid-template-areas: "formular karte"; align-items: start; }
  .kontakt__karte { position: sticky; top: 6.5rem; }
}

/* Kopf-Zeichnungen der Leistungsseiten (werkzeuge/kopfzeichnungen_bauen.py → bausteine/risikograph, stromlaufplan, fernwartung,
   projektplan; Jan, 07.10.2026). Die Zeichnung baut sich beim ersten Sichtbarwerden einmal auf (4–5 s) und bleibt dann stehen.
   Ohne .bewegung-bereit (kein JavaScript, „Bewegung reduzieren“) steht sofort das fertige Bild; .z-lauf (Strom, Motor) gibt es
   nur mit Bewegung, .z-aus (rote Störung) nur bis zu ihrem Zeitpunkt. Einsatz je Element als --v, Dauer als --d. */
.zeichnung { position: relative; width: 100%; max-width: 26rem; margin: 0; justify-self: center; }
@media (min-width: 60rem) { .zeichnung { max-width: 30rem; justify-self: end; } }
.zeichnung svg { display: block; width: 100%; height: auto; overflow: visible; }
.zeichnung text { font-family: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace; font-size: 10px; fill: #8fa1c4; }
.zeichnung .z-name { font-family: var(--schrift); font-size: 12px; fill: #e3e8f1; }
.zeichnung .z-hmi { font-family: var(--schrift); font-size: 10.5px; fill: #e3e8f1; }
.zeichnung .z-klein { font-size: 8.5px; }
.zeichnung .z-leise { fill: #8fa1c4; }
.zeichnung .z-ot { fill: var(--orange); font-weight: 700; }
.zeichnung .z-bmk { font-size: 9.5px; font-weight: 700; fill: var(--orange); }
.zeichnung .z-pl { font-family: var(--schrift-kopf); font-size: 13px; font-weight: 700; fill: #e3e8f1; }
.zeichnung .z-pl--an { fill: var(--navy); }
.zeichnung .z-motor { font-family: var(--schrift-kopf); font-size: 16px; font-weight: 700; fill: #d5dcea; }
.zeichnung .z-l { fill: none; stroke: #b4c2dc; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.zeichnung .z-d { fill: none; stroke: #8fa1c4; stroke-width: 1; stroke-dasharray: 3 3; }
.zeichnung .z-f { fill: rgb(255 255 255 / .05); stroke: #b4c2dc; stroke-width: 1.2; }
.zeichnung .z-geraet { fill: #0b2552; stroke: #b4c2dc; stroke-width: 1.2; }
.zeichnung .z-bildschirm { fill: var(--navy-tief); }
.zeichnung .z-modul { fill: rgb(255 255 255 / .07); stroke: #6f83aa; stroke-width: 1; }
.zeichnung .z-rahmen { fill: none; stroke: #6f83aa; stroke-width: 1; }
.zeichnung .z-zone { fill: none; stroke: #6f83aa; stroke-width: 1.2; stroke-dasharray: 6 5; }
.zeichnung .z-raster { fill: none; stroke: rgb(255 255 255 / .12); stroke-width: 1; }
.zeichnung .z-punkt { fill: #b4c2dc; }
.zeichnung .z-o { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgb(255 136 0 / .7)); }
.zeichnung .z-of { fill: var(--orange); }
.zeichnung .z-an { fill: rgb(255 136 0 / .3); stroke: var(--orange); stroke-width: 1.5; }
.zeichnung .z-rot { fill: #e0533d; }
.zeichnung .z-gruen { fill: #3fae6a; }
.zeichnung .z-schloss { fill: var(--navy-tief); stroke: var(--orange); stroke-width: 1.5; }
.zeichnung .z-kiste { fill: #6f83aa; stroke: #b4c2dc; stroke-width: 1; }
.zeichnung .z-balken--ich { fill: var(--orange); }
.zeichnung .z-balken--team { fill: rgb(255 255 255 / .08); stroke: #8fa1c4; stroke-width: 1.2; }
.zeichnung .z-wachsen { transform-box: fill-box; transform-origin: left center; }
.zeichnung .z-klinke, .zeichnung .z-tasten, .zeichnung .z-dreh { transform-box: view-box; }
.zeichnung .z-lauf, .zeichnung .z-aus { visibility: hidden; }
.bewegung-bereit .zeichnung .z-lauf, .bewegung-bereit .zeichnung .z-aus { visibility: visible; }
.bewegung-bereit .zeichnung .z-zeichnen { stroke-dasharray: 1; stroke-dashoffset: 1; }
.bewegung-bereit .zeichnung .z-ein { opacity: 0; }
.bewegung-bereit .zeichnung .z-wachsen { transform: scaleX(0); }
.bewegung-bereit .zeichnung.ist-sichtbar .z-zeichnen { animation: schema-zeichnen var(--d, .8s) var(--v, 0s) cubic-bezier(.6, 0, .2, 1) forwards; }
.bewegung-bereit .zeichnung.ist-sichtbar .z-ein { animation: schema-ein .5s var(--v, 0s) forwards; }
.bewegung-bereit .zeichnung.ist-sichtbar .z-aus { animation: zeichnung-aus .4s var(--v, 0s) forwards; }
.bewegung-bereit .zeichnung.ist-sichtbar .z-wachsen { animation: zeichnung-wachsen .7s var(--v, 0s) cubic-bezier(.3, .7, .3, 1) forwards; }
.bewegung-bereit .zeichnung.ist-sichtbar .z-klinke { animation: zeichnung-schliessen .25s var(--s, 0s) ease-in forwards; }
.bewegung-bereit .zeichnung.ist-sichtbar .z-tasten { animation: zeichnung-tasten .9s var(--s, 0s) both; }
.bewegung-bereit .zeichnung.ist-sichtbar .z-dreh { animation: schema-drehen 1.4s var(--v, 0s) cubic-bezier(.4, 0, .4, 1) both; }
.bewegung-bereit .zeichnung.ist-sichtbar .z-schieben { animation: zeichnung-schieben 1.2s var(--v, 0s) cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes zeichnung-aus { to { opacity: 0; } }
@keyframes zeichnung-wachsen { to { transform: scaleX(1); } }
@keyframes zeichnung-schliessen { to { transform: rotate(30.3deg); } }
@keyframes zeichnung-tasten { 0%, 100% { transform: none; } 20%, 75% { transform: rotate(30.3deg); } }
@keyframes zeichnung-schieben { to { transform: translateX(40px); } }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .kachel:hover .kachel__pfeil { transform: none; }
}