/* Lindner Elektrotechnik – ruhiger dunkler Look, Strom-Gelb nur als Fläche (Buttons, Logo, Markierungen), ohne Leuchten.
   Erst Handy, dann größere Bildschirme. Alle Bewegungen nur mit der Klasse .bewegung
   (kommt nicht, wenn „Bewegung reduzieren“ eingestellt ist). */

:root {
  --bg: #09090B;
  --flaeche: #111114;
  --karte: #151519;
  --karte-hoch: #1C1C21;
  --linie: rgba(255, 255, 255, .08);
  --linie-stark: rgba(255, 255, 255, .15);
  --text: #F5F5F7;
  --grau: #A1A1A8;         /* Kontrast auf --bg etwa 7,6:1 */
  --grau-hell: #D1D1D6;
  --volt: #FFD60A;         /* Strom-Gelb: Akzent, Fokusrahmen, Leitungen */
  --volt-tief: #E5A800;
  --volt-hover: #FFE14D;

  --glas: rgba(22, 22, 26, .62);
  --glas-dicht: rgba(14, 14, 17, .86); /* Glas über Fotos: Text bleibt gut lesbar */
  --glas-rand: rgba(255, 255, 255, .12);
  --glas-schatten: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 18px 50px rgba(0, 0, 0, .5);
  --blur: blur(24px) saturate(160%);

  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --schrift-gross: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;

  --r-bild: 14px;
  --r-karte: 12px;
  --abstand: clamp(3.25rem, 7vw, 5.5rem);
  --sanft: cubic-bezier(.2, .7, .2, 1);
  --rand: 16px;            /* Seitenrand, passt zu .wrap */
}
@media (min-width: 760px) { :root { --rand: max(32px, calc((100vw - 1120px) / 2)); } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; scroll-padding-top: 6rem; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 1rem/1.55 var(--schrift); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--volt); color: #0A0A0C; }

.wrap { width: min(100% - 32px, 1120px); margin-inline: auto; }
@media (min-width: 760px) { .wrap { width: min(100% - 64px, 1120px); } }

.nw { white-space: nowrap; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--volt); color: #0A0A0C; padding: .7rem 1rem; border-radius: 12px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

h1, h2, h3 { font-family: var(--schrift-gross); font-weight: 700; letter-spacing: -.028em; line-height: 1.08; margin: 0 0 .5rem; text-wrap: balance; }
h1 { font-size: clamp(2.05rem, 6.2vw, 3.7rem); }
h2 { font-size: clamp(1.55rem, 4vw, 2.5rem); }
h3 { font-size: 1.08rem; letter-spacing: -.012em; line-height: 1.25; }
p { margin: 0 0 .75rem; }
.lead { color: var(--grau); font-size: 1rem; max-width: 42ch; }
@media (min-width: 760px) { .lead { font-size: 1.08rem; } }
.etikett { margin: 0 0 .45rem; font: 600 .84rem/1.3 var(--schrift); color: var(--volt); }
.klein { font-size: .82rem; color: var(--grau); }
.gelb { color: var(--volt); }

.section { padding-block: var(--abstand); }
.section--eng { padding-block: calc(var(--abstand) * .6); }
.kopfzeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: .5rem 1.5rem; margin-bottom: 1.4rem; }
.kopfzeile h2 { margin: 0; }
.kopfzeile .lead { margin: 0; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .65rem 1.15rem; border-radius: 999px; border: 1px solid transparent;
  font: 600 .93rem/1.1 var(--schrift); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .2s var(--sanft), background-color .2s, box-shadow .3s, border-color .2s;
}
.btn:active { transform: scale(.97); }
.btn--volt { background: var(--volt); color: #0A0A0C; }
.btn--volt:hover { background: var(--volt-hover); }
.btn--hell { background: #F5F5F7; color: #0A0A0C; }
.btn--hell:hover { background: #FFFFFF; }
.btn--leise { background: rgba(255, 255, 255, .06); border-color: var(--linie-stark); color: var(--text); }
.btn--leise:hover { background: rgba(255, 255, 255, .11); }
.btn svg { width: 16px; height: 16px; flex: none; }
.aktionen { display: flex; flex-wrap: wrap; gap: .55rem; }
.link-knopf { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Milchglas */
.glas {
  background: var(--glas); border: 1px solid var(--glas-rand); box-shadow: var(--glas-schatten);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.glas--dicht { background: var(--glas-dicht); }

/* Punkt (Status, Notdienst) */
.punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--volt); flex: none; }
.status { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font: 500 .86rem/1.3 var(--schrift); color: var(--grau-hell); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #6E6E76; flex: none; }
.status.offen::before { background: #30D158; }

/* ---------- Kopfzeile ---------- */
.kopf { position: fixed; inset: 10px 0 auto; z-index: 50; pointer-events: none; }
.kopf__leiste {
  position: relative; pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .35rem .35rem .35rem .85rem; border-radius: 999px;
}
.marke { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; text-decoration: none; font-weight: 700; font-size: .96rem; letter-spacing: -.01em; }
.marke svg { width: 30px; height: 30px; flex: none; }
.marke span { line-height: 1.1; }
.marke small { display: block; font: 500 .74rem/1.2 var(--schrift); color: var(--grau); }
.menu-knopf {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: 0 1rem; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .08); font-weight: 600; font-size: .9rem; cursor: pointer;
}
.menu-knopf span { display: grid; gap: 4px; }
.menu-knopf i { display: block; width: 16px; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .3s var(--sanft), opacity .2s; }
.menu-knopf[aria-expanded="true"] i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menu-knopf[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.menu-knopf[aria-expanded="true"] i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.nav {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; padding: .45rem; border-radius: 24px;
  background: rgba(17, 17, 20, .97); border: 1px solid var(--glas-rand); box-shadow: var(--glas-schatten);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: top center;
  transition: opacity .25s, transform .35s var(--sanft), visibility 0s .35s;
}
.nav.offen { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .35s var(--sanft); }
.nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav a { display: flex; align-items: center; gap: .55rem; min-height: 48px; padding: 0 1rem; border-radius: 16px; text-decoration: none; font-weight: 500; }
.nav a:hover { background: rgba(255, 255, 255, .07); }
.nav a[aria-current="page"] { color: var(--volt); }
.nav__cta a { justify-content: center; margin-top: .3rem; background: var(--volt); color: #0A0A0C; font-weight: 600; }
.nav__cta a:hover { background: var(--volt-hover); }
.nav__cta a[aria-current="page"] { color: #0A0A0C; }
@media (min-width: 900px) {
  .menu-knopf { display: none; }
  .nav { position: static; padding: 0; background: none; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .nav ul { display: flex; align-items: center; gap: .1rem; }
  .nav a { min-height: 40px; padding: 0 .9rem; border-radius: 999px; font-size: .9rem; }
  .nav__notdienst a { color: var(--grau-hell); font-size: .86rem; }
  .nav__cta a { margin: 0 0 0 .35rem; }
}

/* ---------- Startseite: Morph-Hero ----------
   Das Foto beginnt im Vollbild und wird beim Scrollen zur Karte im Inhaltsbereich.
   Ruhige Variante (ohne Bewegung): Überschrift, darunter Foto mit Kontaktkarte. */
.morph { --p: 1; position: relative; }
.morph__buehne { position: relative; display: flex; flex-direction: column; width: min(100% - 32px, 1120px); margin-inline: auto; padding-top: 5.6rem; }
.morph__titel { order: -1; padding-bottom: 1rem; }
.morph__titel .wrap { width: auto; }
.morph__titel h1 { margin: 0; }
.morph__titel p { margin: .45rem 0 0; color: var(--grau-hell); max-width: 40ch; }
.morph__bild { position: relative; height: min(50vh, 420px); min-height: 280px; border-radius: var(--r-bild); overflow: hidden; }
.morph__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.morph__karte { position: relative; margin-top: .6rem; border-radius: var(--r-karte); padding: 1rem 1.1rem 1.1rem; }
.kurzinfo { display: grid; grid-template-columns: auto 1fr; gap: .15rem 1rem; margin: .2rem 0 .9rem; font-size: .95rem; }
.kurzinfo dt { color: var(--grau); }
.kurzinfo dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.kurzinfo a { text-decoration: none; }
.kurzinfo a:hover { color: var(--volt); }
.scroll-hinweis { display: none; }
@media (min-width: 760px) {
  .morph__buehne { width: min(100% - 64px, 1120px); padding-top: 6.5rem; }
  .morph__bild { height: min(62vh, 560px); min-height: 320px; }
  .morph__karte { position: absolute; left: 1.25rem; bottom: 1.25rem; width: min(400px, 100% - 2.5rem); margin: 0; }
}

/* Bewegte Variante. Nur Verschieben, Skalieren und Deckkraft (flüssig am iPhone, siehe CLAUDE.md).
   Das Foto ist rundum etwas größer als der Bildschirm, damit die runden Ecken am Anfang nicht zu sehen sind.
   --oben (Abstand unter der Kopfzeile) und --s (Kartenbreite) setzt main.js. */
.bewegung .morph { --p: 0; --oben: 78px; height: 200vh; height: 200svh; }
.bewegung .morph__buehne { position: sticky; top: 0; display: block; width: auto; height: 100vh; height: 100svh; padding: 0; overflow: hidden; }
.bewegung .morph__bild {
  position: absolute; inset: calc(var(--r-bild) * -1); height: auto; min-height: 0; transform-origin: 50% 0; will-change: transform;
  transform: translateY(calc(var(--p) * (var(--oben) + var(--r-bild)))) scale(calc(1 - var(--p) * (1 - var(--s, .92))));
}
.bewegung .morph__bild img { transform: scale(calc(1.1 - var(--p) * .1)); transform-origin: 50% 40%; will-change: transform; }
.bewegung .morph__bild::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(9, 9, 11, .35) 0%, rgba(9, 9, 11, .1) 35%, rgba(9, 9, 11, .82) 100%);
  opacity: calc(1 - var(--p));
}
.bewegung .morph__titel {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0 0 clamp(2.75rem, 10vh, 5rem);
  opacity: clamp(0, 1 - var(--p) * 2.2, 1); transform: translateY(calc(var(--p) * -60px)); transform-origin: 0 100%;
}
.bewegung .morph__titel .wrap { width: min(100% - 32px, 1120px); }
.bewegung .morph__titel h1 { font-size: clamp(2.3rem, 7vw, 4.6rem); line-height: 1.02; max-width: 14ch; }
.bewegung .morph__titel p { color: #E5E5EA; font-size: clamp(1rem, 1.3vw, 1.12rem); }
.bewegung .morph__karte {
  position: absolute; left: 1.6rem; right: 1.6rem; bottom: 1.6rem; width: auto; margin: 0;
  opacity: clamp(0, (var(--p) - .45) * 2.6, 1);
  transform: translateY(calc((1 - clamp(0, (var(--p) - .45) * 2.6, 1)) * 36px));
}
.bewegung .morph__karte:focus-within { opacity: 1; transform: none; }
.bewegung .scroll-hinweis {
  display: block; position: absolute; left: 50%; bottom: 1.1rem; z-index: 3; width: 2px; height: 34px; translate: -50% 0;
  border-radius: 2px; background: rgba(255, 255, 255, .7); opacity: clamp(0, 1 - var(--p) * 5, 1);
  transform-origin: top; animation: hinweis 2s var(--sanft) infinite;
}
@keyframes hinweis { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (min-width: 760px) {
  .bewegung .morph { --oben: 84px; }
  .bewegung .morph__titel .wrap { width: min(100% - 64px, 1120px); }
  .bewegung .morph__karte { left: calc(var(--rand) + 1.25rem); right: auto; bottom: 2.5rem; width: min(400px, 100vw - 4rem); }
}
@media (max-width: 759px) {
  /* Am Handy kein Zoom und kein Milchglas über dem bewegten Foto, das kostet zu viel Rechenleistung */
  .bewegung .morph__bild img { transform: none; will-change: auto; }
  .morph .glas { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(14, 14, 17, .94); }
  .kopf .glas { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background: rgba(18, 18, 22, .78); }
}

/* Wo der Browser es kann (Safari ab iOS 26, Chrome, Edge): Der Hero hängt direkt am Scrollen,
   ohne Skript. Die Strecke 0 bis 74svh entspricht der Rechnung in main.js. */
@supports (animation-timeline: scroll()) {
  .bewegung .morph__buehne { height: 100vh; height: 100lvh; }
  .bewegung .morph__bild { animation: karte-schrumpfen linear both; animation-timeline: scroll(root); animation-range: 0 74svh; }
  .bewegung .morph__bild img { animation: foto-zoom linear both; animation-timeline: scroll(root); animation-range: 0 74svh; }
  .bewegung .morph__bild::after { animation: ausblenden linear both; animation-timeline: scroll(root); animation-range: 0 74svh; }
  .bewegung .morph__titel { animation: titel-weg linear both; animation-timeline: scroll(root); animation-range: 0 74svh; }
  .bewegung .morph__karte { animation: karte-ein linear both; animation-timeline: scroll(root); animation-range: 0 74svh; }
  .bewegung .morph__karte:focus-within { animation: none; opacity: 1; transform: none; }
  .bewegung .scroll-hinweis { animation: hinweis 2s var(--sanft) infinite, ausblenden linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 15svh; }
  @media (max-width: 759px) { .bewegung .morph__bild img { animation: none; } }
}
@keyframes karte-schrumpfen { from { transform: none; } to { transform: translateY(calc(var(--oben) + var(--r-bild))) scale(var(--s, .92)); } }
@keyframes foto-zoom { from { transform: scale(1.1); } to { transform: none; } }
@keyframes ausblenden { to { opacity: 0; } }
@keyframes titel-weg { 0% { opacity: 1; transform: none; } 45% { opacity: 0; } 100% { opacity: 0; transform: translateY(-60px); } }
@keyframes karte-ein { 0%, 45% { opacity: 0; transform: translateY(36px); } 84%, 100% { opacity: 1; transform: none; } }

/* ---------- Satz, der sich beim Scrollen füllt ---------- */
.licht__raster { display: grid; gap: 1.25rem; align-items: center; }
.lichtsatz { margin: 0; font: 650 clamp(1.4rem, 4.2vw, 2.45rem)/1.22 var(--schrift-gross); letter-spacing: -.025em; text-wrap: pretty; }
.lichtsatz .akzent { color: var(--volt); }
.lichtsatz.geteilt .wort { color: #85858D; transition: color .35s; } /* aus: noch gut lesbar (5,4:1) */
.lichtsatz.geteilt .wort.an { color: var(--text); }
.lichtsatz.geteilt .wort.akzent.an { color: var(--volt); }
.licht__bild { --l: 1; position: relative; border-radius: var(--r-bild); overflow: hidden; aspect-ratio: 16 / 10; }
.licht__bild img { width: 100%; height: 100%; object-fit: cover; }
.bewegung .licht__bild::after { content: ""; position: absolute; inset: 0; background: #09090B; opacity: calc(.78 * (1 - var(--l))); }
@media (min-width: 900px) {
  .licht__raster { grid-template-columns: 1.35fr 1fr; gap: 3.5rem; }
  .licht__bild { aspect-ratio: 4 / 5; max-height: 520px; }
}

/* ---------- Leistungen: Raster mit Foto und einer Zeile Text ---------- */
.raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem .75rem; }
.kachel { display: flex; flex-direction: column; min-width: 0; text-decoration: none; }
.kachel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-karte); margin-bottom: .65rem; transition: opacity .25s; }
.kachel--breit { grid-column: 1 / -1; }
.kachel--breit img { aspect-ratio: 16 / 9; }
.kachel h3 { margin: 0; font-size: 1rem; }
.kachel p { margin: .2rem 0 0; font-size: .86rem; color: var(--grau); }
a.kachel:hover img { opacity: .82; }
a.kachel:hover h3 { color: var(--volt); }
.notdienst {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.5rem;
  padding: 1rem 1.1rem; border-radius: var(--r-karte); background: var(--karte); border: 1px solid var(--linie-stark); border-left: 4px solid var(--volt);
  text-decoration: none;
}
.notdienst__titel { display: block; font-size: 1rem; }
.notdienst__text { display: block; margin-top: .2rem; font-size: .86rem; color: var(--grau); max-width: 46ch; }
.notdienst__nr { font-weight: 700; font-size: 1.2rem; font-variant-numeric: tabular-nums; color: var(--volt); white-space: nowrap; }
.notdienst:hover { border-color: var(--volt); }
@media (min-width: 900px) {
  .raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem 1rem; }
  .kachel--breit { grid-column: span 2; grid-row: span 2; }
  /* Foto füllt die Höhe der beiden Zeilen daneben, ohne sie selbst zu strecken */
  .kachel--breit img { flex: 1 1 0; height: 0; aspect-ratio: auto; min-height: 220px; }
  .kachel h3 { font-size: 1.08rem; }
}

/* ---------- Ablauf mit stehendem Foto, das beim Scrollen wechselt ---------- */
.fluss__raster { display: grid; gap: 1rem; }
.fluss__bilder { position: sticky; top: 4.9rem; z-index: 2; aspect-ratio: 16 / 10; border-radius: var(--r-bild); overflow: hidden; background: var(--karte); box-shadow: 0 -24px 0 var(--bg); }
.fluss__bilder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.fluss__bilder img.aktiv, .fluss__bilder img.vorher { opacity: 1; }
.fluss__bilder img.aktiv { z-index: 2; }
.fluss__bilder img.vorher { z-index: 1; }
/* Neues Foto blendet weich über das alte (nur Deckkraft) */
.bewegung .fluss__bilder img.aktiv { animation: einblenden .7s var(--sanft) both; }
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }
.fluss__nr { position: absolute; left: .6rem; bottom: .6rem; z-index: 3; margin: 0; padding: .3rem .65rem; border-radius: 8px; background: rgba(14, 14, 17, .88); font-size: .8rem; font-weight: 500; }
.fluss__liste { position: relative; }
.fluss__schritte { list-style: none; margin: 0; padding: 0; }
.fluss__leitung { position: absolute; left: 7px; top: 1.6rem; bottom: 1.6rem; width: 2px; border-radius: 2px; background: var(--linie-stark); }
.fluss__leitung i { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--f, 1) * 100%); border-radius: inherit; background: var(--volt); }
.fluss__schritte li { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 36svh; padding: 1.2rem 0 1.2rem 2.1rem; }
.fluss__schritte li::before { content: ""; position: absolute; left: 1px; top: calc(50% - 7px); width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--linie-stark); transition: background-color .3s, border-color .3s, box-shadow .3s; }
.fluss__schritte li.aktiv::before { background: var(--volt); border-color: var(--volt); }
.fluss__schritte .etikett { color: var(--grau); }
.fluss__schritte li.aktiv .etikett { color: var(--volt); }
.fluss__schritte h3 { font-size: 1.3rem; }
.fluss__schritte p { color: var(--grau); margin: 0; max-width: 36ch; }
@media (min-width: 900px) {
  .fluss__raster { grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: start; }
  .fluss__bilder { top: 15vh; aspect-ratio: 4 / 5; max-height: 70vh; box-shadow: none; }
  .fluss__schritte li { min-height: 62vh; }
  .fluss__schritte h3 { font-size: 1.6rem; }
}

/* ---------- Zahlen und Datenblatt (nur das Datenblatt in Monospace) ---------- */
.zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem .75rem; }
.zahl { padding-top: .75rem; border-top: 2px solid var(--volt); }
.zahl strong { display: block; font: 700 clamp(1.5rem, 4.5vw, 2.1rem)/1.05 var(--schrift-gross); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.zahl p { margin: .3rem 0 0; font-size: .86rem; color: var(--grau); }
.datenblatt { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
.datenblatt h3 { font: 500 .7rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--grau); margin-bottom: .4rem; }
.spec { margin: 0; display: grid; grid-template-columns: auto 1fr; font: 500 .74rem/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.spec dt, .spec dd { margin: 0; padding: .62rem 0; border-top: 1px solid var(--linie); }
.spec dt { color: var(--grau); padding-right: 1rem; }
.spec dd { text-align: right; color: var(--text); }
@media (min-width: 760px) {
  .zahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
  .datenblatt { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

/* ---------- Solar-Rechner ---------- */
.rechner { display: grid; border-radius: var(--r-bild); overflow: hidden; background: var(--karte); border: 1px solid var(--linie); }
.rechner__eingabe { padding: 1.25rem; }
.regler { margin: 1rem 0 1.1rem; }
.regler__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .55rem; }
.regler label, .wahl legend { font-weight: 600; font-size: .95rem; }
.regler output { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--volt); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; margin: 0; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(to right, var(--volt) var(--wert, 30%), rgba(255, 255, 255, .14) var(--wert, 30%)); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .14); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--volt); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: #FFF; border: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #FFF; border: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--volt); }
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--volt); }
.wahl { border: 0; margin: 0 0 1rem; padding: 0; }
.wahl legend { margin-bottom: .55rem; padding: 0; }
.segmente { display: flex; flex-wrap: wrap; gap: .4rem; }
.segment { position: relative; }
.segment input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segment span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--linie-stark); font-size: .88rem; font-weight: 500; transition: background-color .2s, color .2s, border-color .2s; }
.segment input:checked + span { background: var(--volt); border-color: var(--volt); color: #0A0A0C; font-weight: 600; }
.segment input:focus-visible + span { outline: 2px solid var(--volt); outline-offset: 3px; }
.rechner__ergebnis { --hell: .5; position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; gap: .55rem; min-height: 320px; padding: 1rem; }
.rechner__ergebnis > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.rechner__ergebnis::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(9, 9, 11, calc(.72 - var(--hell) * .45)); transition: background-color .4s; }
.werte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.wert { padding: .7rem .75rem; border-radius: 10px; min-width: 0; }
.wert .etikett { font-size: .72rem; font-weight: 500; margin-bottom: .2rem; color: var(--grau-hell); }
.wert strong { display: block; font: 700 1.05rem/1.15 var(--schrift); font-variant-numeric: tabular-nums; }
.wert small { font-size: .72rem; color: var(--grau-hell); }
.rechner__hinweis { margin: 0; padding: .7rem .8rem; border-radius: 10px; font-size: .78rem; color: var(--grau-hell); }
@media (min-width: 900px) {
  .rechner { grid-template-columns: 1fr 1.05fr; }
  .rechner__eingabe { padding: 2rem; }
  .rechner__ergebnis { padding: 1.4rem; min-height: 0; }
  .wert { padding: .9rem 1rem; }
  .wert strong { font-size: 1.4rem; }
}

/* ---------- Großes Foto mit Glas-Karte (Aufruf zum Kontakt) ---------- */
.cta { --z: 1; position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 440px; padding: .75rem; border-radius: var(--r-bild); overflow: hidden; }
.cta > img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.bewegung .cta > img { transform: scale(calc(1.16 - var(--z) * .16)); }
.cta__karte { max-width: 430px; padding: 1.15rem 1.2rem 1.25rem; border-radius: var(--r-karte); }
.cta__karte p { color: var(--grau-hell); }
@media (min-width: 760px) { .cta { min-height: 520px; padding: 1.5rem; } .cta__karte { padding: 1.6rem; } }

/* ---------- Fußzeile ---------- */
.fuss { position: relative; margin-top: var(--abstand); padding: 2.5rem 0 1.5rem; border-top: 1px solid var(--linie); background: var(--flaeche); }
.fuss__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; }
.fuss__marke { grid-column: 1 / -1; }
.fuss__marke address { font-style: normal; color: var(--grau); font-size: .9rem; margin-top: .4rem; }
.fuss h2 { font: 600 .86rem/1.3 var(--schrift); color: var(--text); margin-bottom: .3rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li a, .fuss li .link-knopf { display: inline-flex; align-items: center; min-height: 44px; font-size: .9rem; color: var(--grau-hell); text-decoration: none; text-align: left; }
.fuss li a:hover, .fuss li .link-knopf:hover { color: var(--volt); }
.fuss__unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid var(--linie); font-size: .8rem; color: var(--grau); }
.fuss__unten p { margin: 0; }
@media (min-width: 900px) {
  .fuss__raster { grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 2rem; }
  .fuss__marke { grid-column: auto; }
}

/* ---------- Unterseiten ---------- */
.seitenkopf { padding: 6.1rem 0 1.25rem; }
.seitenkopf__raster { display: grid; gap: 1.25rem; align-items: center; }
.seitenkopf h1 { font-size: clamp(2rem, 5.5vw, 3.2rem); }
.seitenkopf__bild { position: relative; border-radius: var(--r-bild); overflow: hidden; aspect-ratio: 16 / 10; }
.seitenkopf__bild img { width: 100%; height: 100%; object-fit: cover; }
.bewegung .seitenkopf__bild { animation: aufziehen 1.2s var(--sanft) both .1s; }
@keyframes aufziehen { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.seitenkopf__bild .kachel__marke { z-index: 1; }
@media (min-width: 900px) {
  .seitenkopf { padding-top: 7.5rem; }
  .seitenkopf__raster { grid-template-columns: 1fr 1.05fr; gap: 3rem; }
}

/* Reiter auf der Leistungsseite */
.reiter { position: sticky; top: 74px; z-index: 20; margin: .5rem 0 0; }
.reiter ul { list-style: none; margin: 0; padding: .3rem; display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: none; border-radius: 999px; }
.reiter ul::-webkit-scrollbar { display: none; }
.reiter a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .95rem; border-radius: 999px; font-size: .86rem; font-weight: 500; text-decoration: none; white-space: nowrap; color: var(--grau-hell); transition: background-color .2s, color .2s; }
.reiter a:hover { color: var(--text); }
.reiter a.aktiv { background: rgba(255, 255, 255, .12); color: var(--text); font-weight: 600; }

.leistung { display: grid; gap: 1.1rem; padding-block: 2.25rem; border-top: 1px solid var(--linie); scroll-margin-top: 8.5rem; }
.leistung:first-of-type { border-top: 0; }
.leistung__bild { position: relative; border-radius: var(--r-bild); overflow: hidden; aspect-ratio: 4 / 3; }
.leistung__bild img { width: 100%; height: 100%; object-fit: cover; }
.leistung .spec { margin: .9rem 0 1.1rem; }
@media (min-width: 900px) {
  .leistung { grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; padding-block: 3.25rem; }
  .leistung:nth-of-type(even) .leistung__bild { order: 2; }
}

/* Über uns: Zeitleiste */
.zeitleiste { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.zeitleiste li { display: grid; grid-template-columns: 4.2rem 1fr; gap: .9rem; padding: 1rem; border-radius: var(--r-karte); background: var(--karte); border: 1px solid var(--linie); }
.zeitleiste time { font: 700 1rem/1.3 var(--schrift); font-variant-numeric: tabular-nums; color: var(--volt); }
.zeitleiste h3 { margin-bottom: .2rem; }
.zeitleiste p { margin: 0; color: var(--grau); font-size: .92rem; }
@media (min-width: 900px) { .zeitleiste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } }
.werte-raster { display: grid; gap: .6rem; }
.wert-karte { padding: .9rem 0 0; border-top: 2px solid var(--volt); }
.wert-karte p { margin: 0; color: var(--grau); font-size: .92rem; }
@media (min-width: 760px) { .werte-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; } }

/* Kontakt */
.kontakt { display: grid; gap: .75rem; padding-bottom: 1rem; }
.infos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; align-content: start; }
.info { padding: 1rem; border-radius: var(--r-karte); background: var(--karte); border: 1px solid var(--linie); min-width: 0; }
.info h2 { font: 500 .82rem/1.3 var(--schrift); color: var(--grau); margin-bottom: .3rem; }
.info p, .info address { margin: 0; font-style: normal; font-size: .93rem; overflow-wrap: anywhere; }
.info a { text-decoration: none; }
.info a:hover { color: var(--volt); }
.info--breit { grid-column: 1 / -1; }
.info--notdienst { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: var(--karte); border-left: 4px solid var(--volt); }
.info--notdienst strong { display: block; font: 700 1.15rem/1.2 var(--schrift); font-variant-numeric: tabular-nums; }
.zeiten { display: grid; grid-template-columns: auto 1fr; gap: .2rem .9rem; margin: .4rem 0 0; font-size: .88rem; font-variant-numeric: tabular-nums; }
.zeiten dt { color: var(--grau); }
.zeiten dd { margin: 0; }
.formular-karte { padding: 1.15rem; border-radius: var(--r-bild); background: var(--karte); border: 1px solid var(--linie); }
.formular { display: grid; gap: .9rem; margin-top: .75rem; }
.feld { display: grid; gap: .35rem; }
.feld label, .anliegen legend { font-weight: 600; font-size: .9rem; }
.freiwillig { font-weight: 400; color: var(--grau); }
.feld input, .feld textarea {
  width: 100%; min-height: 48px; padding: .7rem .9rem; border-radius: 14px; background: #0D0D10; border: 1px solid var(--linie-stark);
  transition: border-color .2s, box-shadow .2s;
}
.feld textarea { min-height: 130px; resize: vertical; }
.feld input:focus, .feld textarea:focus { outline: none; border-color: var(--volt); box-shadow: 0 0 0 3px rgba(255, 214, 10, .22); }
.feld input[aria-invalid="true"], .feld textarea[aria-invalid="true"] { border-color: #FF8A80; }
.feld-reihe { display: grid; gap: .9rem; }
.fehler { margin: 0; min-height: 0; font-size: .85rem; color: #FF9E95; }
.fehler:empty { display: none; }
.anliegen { border: 0; margin: 0; padding: 0; }
.anliegen legend { margin-bottom: .5rem; padding: 0; }
.formular__fuss { display: grid; gap: .6rem; }
.formular__fuss p { margin: 0; font-size: .82rem; color: var(--grau); }
.meldung { margin: 0; font-weight: 600; color: var(--volt); }
.meldung:empty { display: none; }
.honig { position: absolute; left: -9999px; }
@media (min-width: 760px) {
  .feld-reihe { grid-template-columns: 1fr 1fr; }
  .formular-karte { padding: 1.75rem; }
  .formular__fuss { grid-template-columns: auto 1fr; align-items: center; gap: 1.25rem; }
}
@media (min-width: 900px) {
  .kontakt { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 1rem; align-items: start; }
}

/* Karte (Google Maps, erst nach Zustimmung) */
.split { display: grid; gap: 1rem; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1.2fr; gap: 3rem; } }
.karte { position: relative; height: 220px; border-radius: var(--r-karte); overflow: hidden; background: var(--karte); border: 1px solid var(--linie); display: grid; place-items: center; margin-bottom: .6rem; }
.karte iframe { width: 100%; height: 100%; border: 0; filter: invert(.9) hue-rotate(180deg) saturate(.6) contrast(.92); }
.karte__knopf { text-align: center; padding: 1rem; }
.karte__sperre { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: .7rem; background: transparent; border: 0; cursor: pointer; }
.karte__sperre span { padding: .4rem .8rem; border-radius: 999px; background: rgba(14, 14, 17, .88); border: 1px solid var(--glas-rand); font-size: .8rem; }
.karte.aktiv .karte__sperre { display: none; }

/* Textseiten (Impressum, Datenschutz) */
.textseite { max-width: 720px; padding-bottom: 2rem; }
.textseite h2 { font-size: 1.25rem; margin-top: 2rem; }
.textseite h3 { margin-top: 1.25rem; font-size: 1rem; }
.textseite p, .textseite address, .textseite li { color: var(--grau-hell); font-style: normal; }
.textseite a { color: var(--volt); }
.beispiel { padding: .9rem 1rem; border-radius: 14px; background: rgba(255, 214, 10, .08); border: 1px solid rgba(255, 214, 10, .35); margin-bottom: 1.5rem; }
.beispiel p { margin: 0; color: var(--text); }
.hinweis-text { margin-top: 2rem; font-size: .84rem; color: var(--grau); }

/* Cookie-Hinweis */
.cookie { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; max-width: 460px; max-height: calc(100svh - 24px); overflow-y: auto; padding: 1.1rem; border-radius: 16px; background: rgba(17, 17, 20, .94); }
.cookie h2 { font-size: 1.05rem; }
.cookie p { font-size: .85rem; color: var(--grau-hell); }
.cookie a { color: var(--volt); }
.cookie .aktionen .btn { flex: 1 1 auto; }
.cookie__wahl { border: 0; padding: 0; margin: 0 0 .9rem; display: grid; gap: .5rem; }
.schalter { display: flex; gap: .7rem; align-items: flex-start; padding: .65rem .75rem; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--linie); cursor: pointer; font-size: .84rem; color: var(--grau-hell); }
.schalter input { width: 20px; height: 20px; margin: .1rem 0 0; accent-color: var(--volt); flex: none; }
.schalter strong { display: block; color: var(--text); }
@media (min-width: 760px) { .cookie { left: 24px; bottom: 24px; } }

/* Weiches Erscheinen und Foto-Morph beim Scrollen */
.bewegung .zeigen { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--sanft), transform .9s var(--sanft); }
.bewegung .zeigen.da { opacity: 1; transform: none; }
.bewegung .enthuellen { opacity: 0; transform: scale(.96); transition: opacity .8s var(--sanft), transform 1s var(--sanft); }
.bewegung .enthuellen.da { opacity: 1; transform: none; }
.bewegung .enthuellen img { transform: scale(1.12); transition: transform 1.4s var(--sanft); }
.bewegung .enthuellen.da img { transform: none; }