/* Neuberger Elektrotechnik: Stylesheet der ProcessWire-Templates.
   Entstanden am 22.10.2026 aus dem Astro-Entwurf (werkzeuge/migration/css-aus-astro.mjs).
   Seitenstile gelten nur unter body[data-seite="..."], Bauteilstile ueberall. */

/* ============================================================
   Neuberger Elektrotechnik: Gestaltungssystem
   Farben aus Logo, Fahrzeug und Arbeitskleidung: Kobaltblau,
   Grau, Weiss, Navy als dunkle Neutralfarbe. Schrift Inter.
   ============================================================ */

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

:root {
  /* Marke */
  --blau: #0763ac;          /* Logo-Blau, 6,2:1 auf Weiss */
  --blau-tief: #054c85;     /* Hover, gedrueckt */
  --blau-hell: #e8f1f9;     /* Flaechen mit Blaustich */
  --blau-licht: #7fb3e3;    /* Blau auf Navy (Grafik, grosse Schrift) */
  --grau: #818383;          /* Logo-Grau: nur gross oder dekorativ */
  /* Neutral */
  --navy: #0d1423;          /* Gehaeuse, Fuss */
  --navy-2: #1a2846;
  --text: #121b29;
  --text-2: #475467;        /* 7,6:1 auf Weiss */
  --linie: #d7dce1;
  --flaeche: #f3f5f7;       /* ruhige Abschnitte */
  --schiene: #e6e9ec;       /* Hutschiene / Gehaeuse innen */
  --weiss: #ffffff;
  /* Zustand */
  --erfolg: #1d7a46;
  --fehler: #b42318;

  --schrift: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --maxbreite: 76rem;
  --rand: clamp(1rem, 4vw, 2.5rem);
  --radius-s: 6px;
  --radius: 10px;
  --radius-l: 18px;
  --schatten: 0 1px 2px rgb(13 20 35 / .06), 0 8px 24px -12px rgb(13 20 35 / .18);
  --schatten-hoch: 0 2px 4px rgb(13 20 35 / .08), 0 18px 40px -16px rgb(13 20 35 / .28);
  --ease: cubic-bezier(.16, 1, .3, 1);   /* exponentiell auslaufend */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; scrollbar-color: #aab3bd var(--flaeche); }
body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--blau); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--blau-tief); text-decoration-thickness: 2px; }
::selection { background: var(--blau); color: var(--weiss); }
:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; border-radius: 4px; }
button, input, select, textarea { font: inherit; color: inherit; }
input, textarea, select { caret-color: var(--blau); }

h1, h2, h3, h4 {
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 .5em;
  text-wrap: balance;
  hyphens: auto;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-top: 0; }
h3 { font-size: 1.3rem; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
.lead { font-size: clamp(1.125rem, 2vw, 1.3rem); color: var(--text-2); max-width: 40rem; }
.text { max-width: 68ch; }

.container { width: min(100% - 2 * var(--rand), var(--maxbreite)); margin-inline: auto; }
.abschnitt { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.abschnitt--ruhig { background: var(--flaeche); }
.abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.abschnitt-kopf h2 { margin: 0; max-width: 32ch; }
.abschnitt-kopf p { margin: 0; color: var(--text-2); max-width: 42ch; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--navy); color: var(--weiss); padding: .6rem 1rem; border-radius: var(--radius-s);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; color: var(--weiss); }

/* ---------- Knoepfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3rem; padding: .7rem 1.25rem;
  border-radius: var(--radius); border: 2px solid transparent;
  font-weight: 650; font-size: 1rem; line-height: 1.2; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.knopf svg { width: 1.2em; height: 1.2em; flex: none; }
.knopf:active { transform: translateY(1px); }
.knopf--primaer { background: var(--blau); color: var(--weiss); }
.knopf--primaer:hover { background: var(--blau-tief); color: var(--weiss); }
.knopf--sekundaer { background: var(--weiss); color: var(--text); border-color: var(--linie); }
.knopf--sekundaer:hover { border-color: var(--blau); color: var(--blau); }
.knopf--hell { background: var(--weiss); color: var(--navy); }
.knopf--hell:hover { background: var(--blau-hell); color: var(--navy); }
.knopf--rahmen-hell { color: var(--weiss); border-color: rgb(255 255 255 / .45); }
.knopf--rahmen-hell:hover { color: var(--weiss); border-color: var(--weiss); }

/* ---------- Segmentauswahl (Optionsfelder als Schaltergruppe) ----------
   Gewaehlt in Navy wie die Segmente im Solarrechner. Das Optionsfeld liegt
   unsichtbar ueber dem ganzen Feld, damit Tastatur und Vorleser es bedienen. */
.segment {
  display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .25rem;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
}
.segment label {
  position: relative; display: inline-flex; align-items: center; gap: .45rem;
  min-height: 2.75rem; padding: .45rem .9rem; border-radius: var(--radius-s);
  font-weight: 650; font-size: .95rem; color: var(--text); cursor: pointer; user-select: none;
  font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.segment input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.segment label:hover { background: var(--blau-hell); }
.segment label:has(input:checked) { background: var(--navy); color: var(--weiss); }
.segment label:has(input:focus-visible) { outline: 3px solid var(--blau); outline-offset: 2px; }

/* ---------- Brotkrumen ---------- */
.brotkrumen { font-size: .9rem; color: var(--text-2); margin-bottom: 1.25rem; }
.brotkrumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem .5rem; padding: 0; margin: 0; }
.brotkrumen li + li::before { content: "/"; color: var(--grau); margin-right: .5rem; }
.brotkrumen a { color: var(--text-2); }
.brotkrumen [aria-current] { color: var(--text); font-weight: 600; }

/* ---------- Seitenkopf (Unterseiten) ---------- */
.seitenkopf { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 5vw, 3.5rem); border-bottom: 1px solid var(--linie); }
.seitenkopf h1 { max-width: 22ch; }
.seitenkopf .lead { margin-bottom: 0; }

/* ---------- Fliesstext (Markdown) ---------- */
.prosa { max-width: 68ch; }
.prosa h2 { font-size: clamp(1.45rem, 2.6vw, 1.85rem); margin-top: 2.4em; }
.prosa h3 { margin-top: 1.8em; }
.prosa ul, .prosa ol { padding-left: 1.3rem; }
.prosa li { margin-bottom: .35em; }
.prosa li::marker { color: var(--navy-2); }
.prosa table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .95rem; font-variant-numeric: tabular-nums; }
.prosa th, .prosa td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.prosa th { font-weight: 700; background: var(--flaeche); }
.prosa strong { font-weight: 700; color: var(--text); }
/* Fotos im Fliesstext: auf jedes Bild folgt ein Absatz als Bildunterschrift */
.prosa p:has(> img:only-child) { margin: 1.75em 0 .5em; }
.prosa img { display: block; width: 100%; height: auto; border-radius: var(--radius-l); }
.prosa p:has(> img:only-child) + p { font-size: .9rem; color: var(--text-2); margin-top: 0; }
.prosa blockquote { margin: 1.5em 0; padding: 1rem 1.25rem; background: var(--blau-hell); border-radius: var(--radius); }

/* ---------- Platzhalter (nur Entwurf) ---------- */
.platzhalter {
  display: grid; place-items: center; text-align: center; gap: .35rem;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgb(7 99 172 / .05) 14px 28px),
    var(--flaeche);
  color: var(--text-2); font-size: .9rem; border: 1px dashed #b8c2cc; border-radius: var(--radius);
  padding: 1rem;
}
.platzhalter svg { width: 2rem; height: 2rem; color: var(--grau); }
.platzhalter strong { color: var(--text); font-weight: 650; }
.platzhalter-text { display: inline-block; padding: 0 .4rem; background: var(--flaeche); border: 1px dashed #b8c2cc; border-radius: 4px; font-size: .9rem; font-weight: 500; }

/* ---------- Bewegung ----------
   Bauteile mit data-ein schalten ein, wenn sie ins Bild kommen (Skript in
   Basis.astro). data-lauf="nein" haelt Daueranimationen ausserhalb des
   Bildes an. Reduzierte Bewegung: jedes Bauteil springt in seinen
   Endzustand, Schleifen laufen nicht. */
[data-lauf="nein"], [data-lauf="nein"] *, [data-lauf="nein"] *::before, [data-lauf="nein"] *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important; transition-delay: 0s !important;
    animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
  }
}

/* ============================================================
   Bauteil aus src/components/Bewertungen.astro
   ============================================================ */
.stimmen-schnitt { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; color: var(--text-2); }
  .stimmen-zahl { font-size: 3rem; font-weight: 800; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
  .stimmen-schnitt small { font-size: .85rem; white-space: nowrap; }
  .stimmen-liste { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 1rem; }
  .stimmen-liste li { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
  .stimmen-liste blockquote { margin: 0 0 .6rem; }
  .stimmen-liste blockquote p { margin: 0; }
  .stimmen-wer { margin: 0; font-weight: 700; font-size: .95rem; }
  .stimmen-wer span { font-weight: 500; color: var(--text-2); margin-left: .35rem; }
  .stimmen-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 650; }
  .stimmen-link svg { width: 1rem; height: 1rem; }

/* ============================================================
   Bauteil aus src/components/Bildfolge.astro
   ============================================================ */
.bf-bilder { display: grid; }
  .bf-bild {
    grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease), visibility 0s linear .3s;
  }
  .bf-bild img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-l); }
  .bf-bild figcaption { font-size: .9rem; color: var(--text-2); margin-top: .5rem; font-variant-numeric: tabular-nums; }
  .bildfolge .segment { margin-top: .75rem; }

/* ============================================================
   Bauteil aus src/components/Einsatzkarte.astro
   ============================================================ */
.karte {
    --welle: 1.8s;      /* Laufzeit der Funkwelle bis zum Rand (WEITE) */
    --start: .25s;
    margin: 0;
  }
  .karte svg { width: 100%; height: auto; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-l); }
  .karte figcaption { font-size: .85rem; color: var(--text-2); margin-top: .5rem; }
  .ring { fill: none; stroke: var(--blau); stroke-width: 1.5; stroke-dasharray: 5 6; opacity: .55; transform-box: fill-box; transform-origin: center; }
  .ring-text { font-size: 15px; fill: var(--blau); font-weight: 650; }
  .nord path { fill: var(--text); }
  .nord text { font-size: 14px; font-weight: 800; fill: var(--text); }
  .ort circle { fill: var(--weiss); stroke: var(--text); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; }
  .ort text { font-size: 18px; font-weight: 650; fill: var(--text); paint-order: stroke; stroke: var(--weiss); stroke-width: 5px; stroke-linejoin: round; }
  .betrieb circle { fill: var(--blau); }
  .betrieb .betrieb-hof { fill: var(--blau); opacity: .18; transform-box: fill-box; transform-origin: center; }
  .betrieb text { font-size: 19px; font-weight: 800; fill: var(--blau-tief); paint-order: stroke; stroke: var(--weiss); stroke-width: 5px; stroke-linejoin: round; }

  /* Luftlinien und Welle sind Schmuck: ohne Skript bleiben sie unsichtbar */
  .luftlinien line { stroke: var(--blau); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .35; }
  .welle { fill: none; stroke: var(--blau); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; vector-effect: non-scaling-stroke; }

  /* Vor dem Einschalten: Orte ohne Strom (grau), Ringe noch nicht gezogen */
  .js .karte:not([data-ein="an"]) .ort circle { stroke: var(--linie); }
  .js .karte:not([data-ein="an"]) .ring { opacity: 0; }

  /* Einschalten */
  .karte[data-ein="an"] .ring { animation: karte-ring .7s var(--ease) var(--start) backwards; }
  .ort--klein circle { stroke-width: 2; }
  .karte[data-ein="an"] .ring--aussen { animation-delay: calc(var(--start) + var(--welle) * .5); }
  @keyframes karte-ring { from { opacity: 0; transform: scale(.6); } }
  .karte[data-ein="an"] .welle { animation: karte-welle var(--welle) linear var(--start); }
  @keyframes karte-welle {
    0% { opacity: .9; transform: scale(0); }
    80% { opacity: .5; }
    100% { opacity: 0; transform: scale(1); }
  }
  .karte[data-ein="an"] .luftlinien line {
    stroke-dashoffset: 0;
    animation: karte-linie calc(var(--welle) * var(--anteil)) linear var(--start) backwards;
  }
  @keyframes karte-linie { from { stroke-dashoffset: 1; } }
  .karte[data-ein="an"] .ort circle {
    animation: karte-ort .9s var(--ease) calc(var(--start) + var(--welle) * var(--anteil)) backwards;
  }
  @keyframes karte-ort {
    0% { fill: var(--weiss); stroke: var(--linie); transform: scale(1); }
    15% { fill: var(--blau); stroke: var(--blau); transform: scale(1.6); }
    100% { fill: var(--weiss); stroke: var(--text); transform: scale(1); }
  }
  /* Der Betrieb sendet weiter, solange die Karte im Bild ist */
  .karte[data-ein="an"] .betrieb-hof { animation: karte-sender 2.8s ease-out calc(var(--start) + var(--welle)) infinite; }
  .karte[data-lauf="nein"] .betrieb-hof { animation-play-state: paused; }
  @keyframes karte-sender {
    0% { transform: scale(1); opacity: .18; }
    70%, 100% { transform: scale(2.6); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .karte[data-ein="an"] .betrieb-hof, .karte[data-ein="an"] .welle { animation: none; }
  }

/* ============================================================
   Bauteil aus src/components/Fuss.astro
   ============================================================ */
.fuss { background: var(--navy); color: #c9d2dc; padding-top: clamp(3rem, 7vw, 4.5rem); font-size: .97rem; }
  .fuss a { color: #e4ebf2; text-decoration: none; }
  .fuss a:hover { color: var(--weiss); text-decoration: underline; }
  .fuss-raster { display: grid; grid-template-columns: 1.4fr 1.2fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; }
  .fuss-betrieb img { width: 176px; margin-bottom: 1rem; }
  .fuss-leitsatz { color: var(--weiss); font-weight: 700; margin-bottom: 1.25rem; }
  .fuss address { font-style: normal; line-height: 1.7; margin-bottom: 1rem; }
  .fuss-route { display: inline-flex; gap: .5rem; align-items: center; font-weight: 600; }
  .fuss-titel { font-size: .95rem; color: var(--weiss); letter-spacing: 0; margin-bottom: 1rem; }
  .fuss-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
  .fuss-liste a, .fuss-zeiten { display: inline-flex; align-items: center; gap: .6rem; overflow-wrap: anywhere; }
  .fuss svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--blau-licht); }
  .fuss-liste--schlicht { gap: .45rem; }
  .fuss-gebiet { margin: 0 0 .9rem; line-height: 1.6; }
  .fuss-unten {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem;
    border-top: 1px solid rgb(255 255 255 / .12); padding-block: 1.5rem 6rem; font-size: .9rem;
  }
  .fuss-unten p { margin: 0; }
  .fuss-unten .fuss-erstellt { margin-top: .35rem; font-size: .85rem; }
  .fuss-unten nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
  @media (min-width: 641px) { .fuss-unten { padding-bottom: 1.75rem; } }
  @media (max-width: 1000px) { .fuss-raster { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .fuss-raster { grid-template-columns: 1fr; gap: 2rem; } }

/* ============================================================
   Bauteil aus src/components/Kontaktkasten.astro
   ============================================================ */
.kasten-band { background: var(--blau); color: #e3eef8; padding-block: clamp(2.5rem, 6vw, 4rem); }
  .kasten { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem 4rem; align-items: center; }
  .kasten h2 { color: var(--weiss); margin-bottom: .5rem; }
  .kasten p { margin: 0; max-width: 52ch; }
  .kasten-wege { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
  .kasten-wege .knopf { width: 100%; justify-content: flex-start; font-variant-numeric: tabular-nums; }
  .kasten-wege .knopf--hell { color: var(--blau-tief); }
  @media (max-width: 899px) { .kasten { grid-template-columns: 1fr; } }

/* ============================================================
   Bauteil aus src/components/Kontaktleiste.astro
   ============================================================ */
.kontaktleiste { display: none; }
  @media (max-width: 640px) {
    .kontaktleiste {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
      position: fixed; inset: auto 0 0 0; z-index: 60;
      padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom));
      background: rgb(255 255 255 / .97); border-top: 1px solid var(--linie);
      box-shadow: 0 -8px 24px -18px rgb(13 20 35 / .45);
    }
    .kontaktleiste a {
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
      min-height: 3.25rem; border-radius: var(--radius); text-decoration: none;
      color: var(--text); font-size: .8rem; font-weight: 650; border: 1px solid var(--linie);
    }
    .kontaktleiste a svg { width: 1.35rem; height: 1.35rem; color: var(--blau); }
    .kontaktleiste .kontaktleiste-anfrage { background: var(--blau); color: var(--weiss); border-color: var(--blau); }
    .kontaktleiste .kontaktleiste-anfrage svg { color: var(--weiss); }
  }

/* ============================================================
   Bauteil aus src/components/Kopf.astro
   ============================================================ */
.kopf {
    position: sticky; top: 0; z-index: 50;
    background: rgb(255 255 255 / .96);
    border-bottom: 1px solid var(--linie);
    backdrop-filter: saturate(1.4) blur(8px);
  }
  .kopf-innen { display: flex; align-items: center; gap: 1.5rem; min-height: 4.5rem; }
  .kopf-logo { flex: none; display: block; padding-block: .5rem; }
  .kopf-logo img { width: clamp(140px, 16vw, 176px); height: auto; }
  .kopf-nav { margin-left: auto; }
  .kopf-nav ul { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
  .kopf-nav a {
    display: block; padding: .55rem .7rem; border-radius: var(--radius-s);
    color: var(--text); text-decoration: none; font-weight: 550; font-size: .97rem;
  }
  .kopf-nav a:hover { background: var(--blau-hell); color: var(--blau-tief); }
  .kopf-nav a[aria-current="page"] { color: var(--blau); box-shadow: inset 0 -2px 0 var(--blau); border-radius: 0; }
  .kopf-aktion { display: flex; align-items: center; gap: .5rem; }
  .kopf-anruf { min-height: 2.75rem; padding: .55rem 1rem; font-variant-numeric: tabular-nums; }
  .kopf-anruf-kurz { display: none; }

  .kopf-menu { display: none; position: relative; }
  .kopf-menu summary {
    list-style: none; cursor: pointer; display: grid; place-items: center;
    width: 2.75rem; height: 2.75rem; border-radius: var(--radius); border: 1px solid var(--linie);
  }
  .kopf-menu summary::-webkit-details-marker { display: none; }
  .kopf-menu summary svg { width: 1.4rem; height: 1.4rem; }
  .kopf-menu .zu, .kopf-menu[open] .auf { display: none; }
  .kopf-menu[open] .zu { display: block; }
  .kopf-menu-tafel {
    position: absolute; right: 0; top: calc(100% + .6rem); width: min(20rem, calc(100vw - 2rem));
    background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-l);
    box-shadow: var(--schatten-hoch); padding: .75rem;
  }
  .kopf-menu-tafel ul { list-style: none; margin: 0; padding: 0; }
  .kopf-menu-tafel a { display: block; padding: .75rem .85rem; border-radius: var(--radius); text-decoration: none; color: var(--text); font-weight: 600; }
  .kopf-menu-tafel a:hover, .kopf-menu-tafel a[aria-current="page"] { background: var(--blau-hell); color: var(--blau-tief); }
  .kopf-menu-zeiten { display: flex; gap: .5rem; align-items: center; margin: .5rem .85rem .25rem; color: var(--text-2); font-size: .9rem; }
  .kopf-menu-zeiten svg { width: 1.1rem; }
  .zeiten-teil { white-space: nowrap; }

  /* Leseleitung (jede Seite): waechst mit dem Scrollen, der Stecker faehrt
     mit und erreicht am Seitenende die Dose. Nur wo der Browser
     scrollgesteuerte Animationen kann, sonst bleibt sie weg. Ist die Seite
     zu kurz zum Scrollen, ruht die Zeitachse: dann gilt der Ausgangszustand
     (kein Kabel, Stecker links, Dose aus). */
  .leseleitung { display: none; }
  @supports (animation-timeline: scroll()) {
    .leseleitung {
      display: block; position: absolute; left: 0; right: 0; bottom: -3px; height: 5px;
      container-type: inline-size; pointer-events: none;
    }
    /* Die Leitung ist 37px kuerzer als die Leiste: Der Stecker faehrt bis
       100cqw - 41px, so endet das Kabel immer 4px im Steckerkoerper */
    .leseleitung-draht {
      position: absolute; left: 0; right: 37px; top: 1px; height: 3px; background: var(--blau);
      transform-origin: left center; transform: scaleX(0);
      animation: lese-draht auto linear both;
    }
    .leseleitung-stecker {
      position: absolute; left: 0; top: -4px; width: 14px; height: 13px; border-radius: 3px; background: var(--navy);
      animation: lese-stecker auto linear both;
    }
    /* Zeitachse in eigener Regel mit hoeherer Spezifitaet: der CSS-Minifier
       wuerde sie sonst in die Kurzschreibweise ziehen, die Browser verwerfen */
    .leseleitung > span { animation-timeline: scroll(root block); }
    /* zwei Stifte nach rechts */
    .leseleitung-stecker::before, .leseleitung-stecker::after {
      content: ""; position: absolute; left: 14px; width: 6px; height: 2px; border-radius: 1px; background: #8f99a4;
    }
    .leseleitung-stecker::before { top: 3px; }
    .leseleitung-stecker::after { bottom: 3px; }
    .leseleitung-dose {
      position: absolute; right: 4px; top: -6px; width: 17px; height: 17px; border-radius: 4px;
      background: var(--weiss); border: 2px solid var(--navy);
      animation: lese-dose auto linear both;
    }
    @keyframes lese-draht { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    @keyframes lese-stecker { from { transform: translateX(0); } to { transform: translateX(calc(100cqw - 41px)); } }
    @keyframes lese-dose { 0%, 97% { border-color: var(--navy); background: var(--weiss); } 100% { border-color: var(--blau); background: var(--blau-hell); } }
  }

  @media (max-width: 1180px) {
    .kopf-anruf-nummer { display: none; }
    .kopf-anruf-kurz { display: inline; }
  }
  @media (max-width: 1000px) {
    .kopf-nav { display: none; }
    .kopf-aktion { margin-left: auto; }
    .kopf-menu { display: block; }
  }
  @media (max-width: 640px) {
    /* Auf dem Handy uebernimmt die Kontaktleiste unten den Anruf */
    .kopf-anruf { display: none; }
  }

/* ============================================================
   Bauteil aus src/components/Seitenkopf.astro
   ============================================================ */
.seitenkopf .seitenkopf-aktionen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
  .seitenkopf--bild { background: var(--flaeche); }
  .seitenkopf--bild .seitenkopf-raster {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 33rem); gap: clamp(2rem, 5vw, 4rem); align-items: center;
  }
  @media (max-width: 999px) {
    .seitenkopf--bild .seitenkopf-raster { grid-template-columns: 1fr; }
    .seitenkopf-bild { max-width: 36rem; }
  }

/* ============================================================
   Bauteil aus src/components/Sonnenbahn.astro
   ============================================================ */
.bahn { width: 100%; max-width: 30rem; }
  .bahn svg { width: 100%; height: auto; overflow: visible; }
  .bahn-weg { fill: none; stroke: #3a4862; stroke-width: 1.5; stroke-dasharray: 3 6; }
  .bahn-horizont { stroke: #3a4862; stroke-width: 1.5; }
  .bahn-flaeche { fill: var(--blau-licht); opacity: .16; }
  .bahn-kurve { fill: none; stroke: var(--blau-licht); stroke-width: 2.5; stroke-linejoin: round; }
  .bahn-sonne circle { fill: var(--weiss); }
  .bahn-sonne line { stroke: var(--blau-licht); stroke-width: 2.5; stroke-linecap: round; }
  .bahn-modul { fill: var(--navy-2); stroke: #3a4862; stroke-width: 1.5; }
  .bahn-zellen { stroke: #2b3a57; stroke-width: 1; fill: none; }
  .bahn-leuchten { fill: var(--blau-licht); opacity: .9; }
  .bahn-zeit { font-size: 12px; font-weight: 600; fill: #9fb0c4; letter-spacing: .02em; }

/* ============================================================
   Bauteil aus src/components/Steckverbindung.astro
   ============================================================ */
.steck { margin: 0 0 1.5rem; width: min(100%, 20rem); }
  .steck svg { width: 100%; height: auto; overflow: visible; }
  .steck-kabel { fill: none; stroke: var(--navy-2); stroke-width: 7; stroke-linecap: round; }
  .steck-koerper { fill: var(--navy-2); }
  .steck-griff { stroke: #3a4862; stroke-width: 3; stroke-linecap: round; }
  .steck-pin { fill: #c3cad2; }
  .steck-dose { fill: var(--weiss); stroke: var(--text); stroke-width: 2; }
  .steck-schlitz { stroke: var(--text); stroke-width: 2; }
  .steck-leuchte { fill: #b7c0c9; }
  .steck-zeichen circle { fill: var(--fehler); }
  .steck-zeichen path { fill: none; stroke: var(--weiss); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
  .steck-stecker { transform: translateX(-28px); }

  /* Verbunden: Stecker steckt, Leuchte und Haken in Erfolgsgruen */
  .steck--verbunden .steck-stecker { transform: translateX(58px); animation: steck-rein .7s cubic-bezier(.5, 0, .2, 1) .3s backwards; }
  .steck--verbunden .steck-leuchte { fill: var(--erfolg); animation: steck-leuchte .2s ease 1s backwards; }
  .steck--verbunden .steck-zeichen circle { fill: var(--erfolg); }
  .steck--verbunden .steck-zeichen { animation: steck-zeichen .3s var(--ease) 1.1s backwards; transform-box: fill-box; transform-origin: center; }
  @keyframes steck-rein { from { transform: translateX(-28px); } }
  @keyframes steck-leuchte { from { fill: #b7c0c9; } }
  @keyframes steck-zeichen { from { opacity: 0; scale: .4; } }

/* ============================================================
   Bauteil aus src/components/Typenschild.astro
   ============================================================ */
.schild {
    position: relative; padding: 1.2rem 1.4rem 1.1rem;
    background: var(--flaeche);
    border: 1px solid var(--linie); border-radius: var(--radius);
  }
  .schild-kopf {
    display: flex; align-items: center; gap: .75rem; margin: 0 0 .45rem; padding-bottom: .6rem;
    border-bottom: 2px solid var(--text); font-weight: 800; font-size: .95rem;
    letter-spacing: .06em; text-transform: uppercase; line-height: 1.25;
  }
  .schild-kopf img { width: 2.25rem; height: 2.25rem; flex: none; }
  .schild-daten { margin: 0 0 .85rem; display: grid; }
  .schild-daten div {
    display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: .34rem 0;
    border-bottom: 1px solid #c9d0d7;
  }
  .schild-daten dt { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); padding-top: .2rem; }
  .schild-daten dd { margin: 0; font-weight: 600; }
  /* Betriebsanzeige mit Meldeleuchte wie am Leitungsschutzschalter */
  .schild-jetzt { display: flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 600; line-height: 1.35; color: var(--text-2); }
  .schild-jetzt[hidden] { display: none; }
  .schild-led { width: 1.1rem; height: .3rem; border-radius: 2px; background: #b7c0c9; flex: none; }
  .schild-jetzt--an { color: var(--blau-tief); }
  .schild-jetzt--an .schild-led { background: var(--blau); }
  .schild-ziffern { font-variant-numeric: tabular-nums; }
  .schild-aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
  .schild-register {
    margin: .7rem 0 0; padding-top: .5rem; border-top: 1px solid #c9d0d7;
    font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2);
  }
  /* Auf dem Handy übernimmt die Kontaktleiste Anruf und WhatsApp */
  @media (max-width: 640px) {
    /* Kompakt: schmale Leiste mit Standort und Erreichbarkeit */
    .schild--kompakt { padding: .6rem 1rem; }
    .schild--kompakt .schild-kopf, .schild--kompakt .schild-register, .schild--kompakt .schild-zusatz, .schild--kompakt .schild-aktionen { display: none; }
    .schild--kompakt .schild-daten { margin-bottom: 0; }
    .schild--kompakt .schild-daten div { grid-template-columns: 6.5rem 1fr; gap: .5rem; padding: .35rem 0; }
    .schild--kompakt .schild-daten div:nth-child(2) { border-bottom: 0; }
  }
  @media (max-width: 420px) {
    .schild:not(.schild--kompakt) .schild-daten div { grid-template-columns: 1fr; gap: .1rem; }
    .schild-aktionen { grid-template-columns: 1fr; }
  }

/* ============================================================
   Bauteil aus src/components/Verteiler.astro
   ============================================================ */
/* Fuellstand der Kammschiene und Bereitschaft der Abgaenge, als Eigenschaften
     registriert, damit sie sich animieren lassen */
  @property --vk-fuell { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
  @property --vk-bereit { syntax: "<number>"; inherits: true; initial-value: 1; }

  .vk {
    --vk-hub: 1.6rem;
    --vk-innen: clamp(.75rem, 2.5vw, 1.75rem);
    --vk-strom: var(--blau-licht);   /* Leiter unter Spannung */
    --vk-tot: #8f99a4;               /* Leiter ohne Spannung (Flansch-Grau) */
    background: var(--flaeche); padding-top: clamp(1.25rem, 2vw, 1.5rem);
  }
  .vk-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.5rem; margin-bottom: .8rem; }
  .vk-kopf h2 { margin: 0; font-size: clamp(1.7rem, 2.8vw, 2.1rem); }
  .vk-kopf p { margin: 0; color: var(--text-2); }

  .vk-feld { border: 0; margin: 0; padding: 0; min-width: 0; }
  .vk-option { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

  /* Gehaeuse */
  .vk-gehaeuse {
    position: relative; background: var(--navy); border-radius: var(--radius-l) var(--radius-l) 0 0;
    padding: .7rem var(--vk-innen) 1.5rem;
    border: 1px solid #22304a; box-shadow: var(--schatten);
    animation: vk-bereit 1ms step-end 1.15s backwards;
  }
  @keyframes vk-bereit { from { --vk-bereit: 0; } to { --vk-bereit: 1; } }
  .vk-typ {
    margin: 0 0 .6rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
    color: #8c99ad; font-weight: 600;
  }
  .vk-typ span { color: var(--blau-licht); margin-right: .4rem; }

  .vk-reihe { display: grid; grid-template-columns: minmax(6.25rem, 1.25fr) minmax(0, 6fr); }
  .vk-schiene { display: grid; grid-template-columns: repeat(6, 1fr); }
  .vk-kreis, .vk-fi {
    --vk-ein: 0;
    position: relative; display: grid; justify-items: center; align-content: start; gap: .9rem;
    border-radius: var(--radius); padding-bottom: .25rem;
  }
  .vk-kreis { cursor: pointer; -webkit-tap-highlight-color: transparent; }

  /* Hutschiene: laeuft ueber die ganze Breite des Stromkreises, so
     ergeben benachbarte Stromkreise eine durchgehende Schiene */
  .vk-sitz { position: relative; display: grid; justify-items: center; width: 100%; }
  .vk-sitz::before {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.4rem; transform: translateY(-50%);
    /* Hutschienen-Profil flach: Flansche dunkler, Steg heller */
    background: linear-gradient(#8f99a4 0 24%, #c3cad2 24% 76%, #8f99a4 76%);
  }

  /* Kammschiene: verbindet die oberen Klemmen der Leitungsschutzschalter.
     Unter Spannung fuellt sie sich in Blau, ohne Spannung bleibt sie grau. */
  .vk-kreis .vk-sitz::after {
    content: ""; position: absolute; left: 0; right: 0; top: calc(.95rem - 1px); height: 4px; z-index: 2;
    background: linear-gradient(var(--vk-strom) 0 0) 0 0 / var(--vk-fuell) 100% no-repeat, var(--vk-tot);
    transition: --vk-fuell .12s linear calc(.3s + var(--i) * 45ms);
    animation: vk-kamm .16s linear calc(.55s + var(--i) * 70ms) backwards;
  }
  @keyframes vk-kamm { from { --vk-fuell: 0%; } to { --vk-fuell: 100%; } }

  /* Einspeisung von links in die obere Klemme des FI: steht immer unter Spannung */
  .vk-einspeisung {
    position: absolute; left: calc(-1 * var(--vk-innen) - 1px); right: 50%; top: calc(.95rem - 1px); height: 4px; z-index: 2;
    background: var(--vk-strom); transform-origin: left center;
    animation: vk-zuleitung .25s var(--ease) .1s backwards;
  }
  @keyframes vk-zuleitung { from { transform: scaleX(0); } }
  /* Bruecke vom Ausgang des FI (untere Klemme) hinauf zur Kammschiene */
  .vk-bruecke {
    position: absolute; left: 50%; right: 0; top: calc(.95rem - 1px); bottom: calc(.95rem - 3px); z-index: 0;
    border: solid var(--vk-strom); border-width: 0 4px 4px 0; border-bottom-right-radius: 8px;
    transition: border-color .2s var(--ease) .25s;
    animation: vk-bruecke .2s linear .48s backwards;
  }
  @keyframes vk-bruecke { from { border-color: var(--vk-tot); } }

  /* Beschriftungsfeld */
  .vk-schild {
    width: calc(100% - .5rem); height: 4.25rem; padding: .4rem .45rem;
    display: grid; align-content: center; justify-items: center; text-align: center; gap: .1rem;
    background: var(--weiss); color: var(--text); border-radius: var(--radius-s);
    transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
  }
  .vk-kreis .vk-schild { animation: vk-schild-an .3s var(--ease) 1.05s backwards; }
  @keyframes vk-schild-an { from { background: var(--weiss); color: var(--text); } }
  .vk-kennung { font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--text-2); font-variant-numeric: tabular-nums; transition: color .25s var(--ease); }
  .vk-kreis .vk-kennung { animation: vk-kennung-an .3s var(--ease) 1.05s backwards; }
  @keyframes vk-kennung-an { from { color: var(--text-2); } }
  .vk-name { font-weight: 750; font-size: clamp(.86rem, 1.4vw, 1rem); line-height: 1.15; hyphens: manual; }
  .vk-schild--fi { background: var(--schiene); }

  /* Leitungsschutzschalter */
  .vk-automat {
    position: relative; width: 4.6rem; padding: .5rem .45rem;
    display: grid; justify-items: center; gap: .45rem;
    background: var(--weiss);
    border: 1px solid #b7c0c9; border-radius: 4px;
  }
  .vk-klemme {
    position: relative; z-index: 3;
    width: .9rem; height: .9rem; border-radius: 50%;
    background: var(--schiene); border: 1px solid #8f99a4;
  }
  .vk-klemme::before { content: ""; position: absolute; left: 20%; right: 20%; top: calc(50% - .5px); height: 1px; background: #5b6570; transform: rotate(-35deg); }
  .vk-front { display: grid; justify-items: center; gap: .2rem; }
  .vk-stellung { font-size: .62rem; font-weight: 700; color: #6b7684; line-height: 1; }
  .vk-fenster {
    position: relative; width: 1.9rem; height: calc(var(--vk-hub) + 1.75rem);
    background: var(--schiene); border: 1px solid #aab3bd; border-radius: 3px;
    display: flex; align-items: flex-end; justify-content: center; padding: .15rem;
  }
  .vk-hebel {
    width: 100%; height: 1.6rem; border-radius: 3px;
    background: var(--navy-2);
    transition: transform .26s var(--ease), background-color .2s var(--ease);
  }
  .vk-kreis .vk-hebel { animation: vk-hebel-ein .26s var(--ease) .95s backwards; }
  @keyframes vk-hebel-ein { from { transform: none; background: var(--navy-2); } }
  /* Ablauf beim Umlegen: erst der Hebel, dann die Meldeleuchte, dann Abgang und Tafel */
  .vk-melder {
    width: 1.9rem; height: .3rem; border-radius: 2px; background: #b7c0c9;
    transition: background-color .18s var(--ease) .16s;
    /* Lampentest beim Einschalten der Anlage, einer nach dem anderen */
    animation: vk-lampentest .34s linear calc(.62s + var(--i) * 70ms) backwards;
  }
  @keyframes vk-lampentest {
    0% { background: #b7c0c9; }
    20%, 65% { background: var(--blau); }
    100% { background: #b7c0c9; }
  }

  .vk-kreis:hover .vk-hebel { transform: translateY(-.2rem); }
  .vk-kreis:hover .vk-schild { box-shadow: 0 0 0 2px var(--blau-licht); }

  /* Abgang: Leitung vom gewaehlten Stromkreis hinunter zur Tafel, mit Strompuls */
  .vk-abgang {
    display: none; position: absolute; left: calc(50% - 2px); width: 4px;
    top: calc(100% - .25rem); height: 1.75rem;
    background: var(--vk-strom); opacity: var(--vk-bereit);
  }
  .vk-abgang::after {
    content: ""; position: absolute; left: -3px; top: -5px; width: 10px; height: 10px; border-radius: 50%;
    background: var(--weiss); opacity: 0;
    animation: vk-puls .26s cubic-bezier(.5, 0, .75, 0) .18s;
  }
  @keyframes vk-puls {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 1; transform: translateY(1.75rem); }
  }

  /* FI-Schutzschalter: zwei Teilungseinheiten breit, Hebel und Prueftaste */
  .vk-automat--fi { width: 6.4rem; }
  .vk-klemmen { display: flex; gap: 1.6rem; }
  .vk-front--fi { display: flex; align-items: center; gap: .55rem; }
  .vk-fi-hebel { display: grid; justify-items: center; gap: .2rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .vk-fi .vk-hebel { animation: vk-hebel-ein .26s var(--ease) .3s backwards; }
  .vk-fi-hebel:hover .vk-hebel { transform: translateY(-.2rem); }
  .vk-pruef {
    display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 4px;
    background: var(--schiene); border: 1px solid #8f99a4; box-shadow: 0 2px 0 #8f99a4;
    font-size: .8rem; font-weight: 800; color: var(--navy); cursor: pointer; user-select: none;
    transition: transform .1s var(--ease), box-shadow .1s var(--ease), background-color .2s var(--ease);
    -webkit-tap-highlight-color: transparent;
  }
  .vk-pruef:hover { background: var(--blau-hell); }
  .vk-fi-hinweis { display: none; }
  .vk-pruef:active { transform: translateY(2px); box-shadow: 0 0 0 #8f99a4; }

  /* FI ein */
  .vk-fi-schalter:checked ~ .vk-gehaeuse .vk-fi .vk-hebel { transform: translateY(calc(-1 * var(--vk-hub))); background: var(--blau); }
  .vk-fi-schalter:focus-visible ~ .vk-gehaeuse .vk-fi { outline: 3px solid var(--blau-licht); outline-offset: 4px; }

  /* FI ausgeloest: Hebel faellt, Kammschiene entleert sich von rechts nach links,
     der gewaehlte Stromkreis bleibt eingelegt, hat aber keinen Strom */
  .vk-fi-schalter:not(:checked) ~ .vk-gehaeuse .vk-fi .vk-hebel { transition-duration: .12s; }
  .vk-fi-schalter:not(:checked) ~ .vk-gehaeuse .vk-bruecke { border-color: var(--vk-tot); transition-delay: 0s; }
  .vk-fi-schalter:not(:checked) ~ .vk-gehaeuse .vk-kreis .vk-sitz::after {
    --vk-fuell: 0%; transition-delay: calc((5 - var(--i)) * 30ms);
  }
  .vk-fi-schalter:not(:checked) ~ .vk-gehaeuse .vk-kreis .vk-schild {
    background: var(--weiss) !important; color: var(--text) !important;
    box-shadow: inset 0 0 0 calc(var(--vk-ein) * 2px) var(--navy-2);
  }
  .vk-fi-schalter:not(:checked) ~ .vk-gehaeuse .vk-kreis .vk-kennung { color: var(--text-2) !important; }
  .vk-fi-schalter:not(:checked) ~ .vk-gehaeuse .vk-melder { background: #b7c0c9 !important; transition-delay: 0s; }
  .vk-fi-schalter:not(:checked) ~ .vk-gehaeuse .vk-abgang { background: #3a4862; }
  .vk-fi-schalter:not(:checked) ~ .vk-gehaeuse .vk-abgang::after { animation: none; }
  .vk-fi-schalter:not(:checked) ~ .vk-gehaeuse .vk-pruef { pointer-events: none; opacity: .55; box-shadow: none; transform: translateY(2px); }
  .vk-fi-schalter:not(:checked) ~ .vk-tafeln > .vk-tafel { display: none !important; }
  .vk-fi-schalter:not(:checked) ~ .vk-tafeln > .vk-tafel-fi { display: grid !important; }

  /* Tafel (Stromkreisverzeichnis) */
  .vk-tafeln {
    background: var(--weiss); border: 1px solid var(--linie); border-top: 0;
    border-radius: 0 0 var(--radius-l) var(--radius-l); box-shadow: var(--schatten);
  }
  .vk-tafel {
    display: none; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, 3rem);
    padding: clamp(1.25rem, 3.5vw, 2.5rem);
    animation: vk-tafel-ein .32s var(--ease) .3s both;
  }
  .vk-tafel-fi { animation-delay: .12s; }
  @keyframes vk-tafel-ein { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }
  .vk-tafel h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin-bottom: .6rem; }
  .vk-tafel-text > p { color: var(--text-2); }
  .vk-punkte { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .5rem; }
  .vk-punkte li { display: flex; gap: .6rem; align-items: flex-start; }
  .vk-punkte svg { width: 1.2rem; height: 1.2rem; flex: none; margin-top: .2rem; color: var(--navy); }
  .vk-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
  .vk-mehr { display: inline-flex; align-items: center; gap: .4rem; font-weight: 650; }
  .vk-mehr svg { width: 1.1rem; height: 1.1rem; }
  .vk-beleg figure { margin: 0; }
  .vk-ablauf { margin: 0; padding-left: 1.25rem; display: grid; gap: .75rem; color: var(--text-2); }
  .vk-ablauf strong { color: var(--text); display: block; }
  .vk-wieder { cursor: pointer; }

  /* FI-Pruefung als Bildfolge */
  .vk-pruefung svg { width: 100%; height: auto; }
  .pr-flaeche { fill: var(--flaeche); }
  .pr-geraet { fill: var(--weiss); stroke: #b7c0c9; stroke-width: 1.5; }
  .pr-klemme { fill: var(--schiene); stroke: #8f99a4; stroke-width: 1.5; }
  .pr-fenster { fill: var(--schiene); stroke: #aab3bd; stroke-width: 1.5; }
  .pr-hebel { fill: var(--navy-2); }
  .pr-hebel--ein { fill: var(--blau); }
  .pr-stellung { font-size: 9px; font-weight: 700; fill: #6b7684; text-anchor: middle; }
  .pr-taste { fill: var(--schiene); stroke: #8f99a4; stroke-width: 1.5; }
  .pr-taste--aktiv { fill: var(--blau-hell); stroke: var(--blau); stroke-width: 2; }
  .pr-t { font-size: 11px; font-weight: 800; fill: var(--navy); text-anchor: middle; }
  .pr-pfeil { fill: none; stroke: var(--navy); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
  .pr-nr { font-size: 13px; font-weight: 800; fill: var(--navy); text-anchor: middle; font-variant-numeric: tabular-nums; }
  .pr-text { font-size: 12.5px; font-weight: 600; fill: var(--text-2); text-anchor: middle; }

  /* Szenen je Stromkreis (teile/szene/): kurze Vorgaenge auf Planpapier, SMIL ueber
     data-smil. Animierte Werte stehen als Attribute in der Zeichnung, hier nur, was
     sich nicht bewegt. */
  .vk-beleg--szene { align-self: center; }
  .vk-szene { margin: 0; display: grid; gap: .6rem; }
  .vk-szene-blatt {
    border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden;
    background:
      linear-gradient(#e9edf1 1px, transparent 1px) 0 0 / 60px 60px,
      linear-gradient(90deg, #e9edf1 1px, transparent 1px) 0 0 / 60px 60px,
      linear-gradient(#f2f4f7 1px, transparent 1px) 0 0 / 12px 12px,
      linear-gradient(90deg, #f2f4f7 1px, transparent 1px) 0 0 / 12px 12px,
      var(--weiss);
  }
  .vk-szene svg { display: block; width: 100%; height: auto; }
  .vk-szene figcaption { font-size: .9rem; color: var(--text-2); }
  .sz-text { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; fill: var(--text-2); font-variant-numeric: tabular-nums; }
  .sz-text--mitte { text-anchor: middle; }
  .sz-text--klein { font-size: 9px; }
  .sz-text--hell { fill: #c9d2dc; }
  .sz-anzeige { font-size: 14px; font-weight: 750; fill: var(--weiss); text-anchor: middle; font-variant-numeric: tabular-nums; }
  .sz-wand { fill: none; stroke: var(--text); stroke-width: 5; stroke-linecap: square; }
  .sz-wand--innen { stroke-width: 4; }
  .sz-wand--duenn { stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
  .sz-raum { fill: none; stroke: var(--text); stroke-width: 3; }
  .sz-dach { fill: none; stroke: var(--text); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
  .sz-strich { fill: none; stroke: #8f99a4; stroke-width: 1.5; }
  .sz-rahmen { fill: none; stroke: var(--text); stroke-width: 2.5; }
  .sz-geraet { fill: var(--weiss); stroke: var(--text); stroke-width: 1.5; }
  .sz-fenster { stroke: var(--text); stroke-width: 1.5; }
  .sz-leitung { fill: none; stroke: var(--blau); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
  .sz-leitung--stich { stroke-width: 2; }
  .sz-dose { fill: var(--weiss); stroke: var(--text); stroke-width: 1.5; }
  .sz-punkt { fill: var(--text); }
  .sz-kreuz { fill: none; stroke: var(--text); stroke-width: 1.5; }
  .sz-symbol { fill: none; stroke: var(--navy); stroke-width: 1.25; stroke-linecap: round; }
  .sz-gehaeuse { fill: var(--schiene); stroke: var(--text); stroke-width: 2; }
  .sz-gehaeuse-innen { fill: var(--flaeche); stroke: #aab3bd; stroke-width: 1; }
  .sz-automat { fill: var(--weiss); stroke: #8f99a4; stroke-width: 1.5; }
  .sz-messgeraet { fill: var(--navy-2); stroke: var(--navy); stroke-width: 2; }
  .sz-messleitung { fill: none; stroke: #8193ab; stroke-width: 3; stroke-linecap: round; }
  .sz-mast { fill: none; stroke: var(--text); stroke-width: 1.75; stroke-linejoin: round; }
  .sz-modul { fill: var(--navy-2); stroke: var(--navy); stroke-width: .8; }
  .sz-sonne line { stroke: var(--blau); stroke-width: 2.5; stroke-linecap: round; }
  .sz-sonne circle { fill: var(--blau-hell); stroke: var(--blau); stroke-width: 2.5; }
  .sz-mond { fill: #e6e9ec; stroke: #8193ab; stroke-width: 1.5; }
  .sz-fluss { fill: none; stroke: var(--blau); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 8; }
  .sz-bus { fill: none; stroke: var(--blau); stroke-width: 2; stroke-linejoin: round; opacity: .45; }
  .sz-welle path { fill: none; stroke: #ffa757; stroke-width: 2; stroke-linecap: round; }
  .sz-erfassung path { fill: none; stroke: var(--blau); stroke-width: 2; stroke-linecap: round; }
  .sz-person circle { fill: var(--navy-2); }
  .sz-person path { fill: none; stroke: var(--navy-2); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
  .sz-trasse { fill: none; stroke: #aab3bd; stroke-width: 2; }
  .sz-rotor path { fill: none; stroke: var(--text); stroke-width: 3; stroke-linecap: round; }
  .sz-rotor circle { fill: var(--text); }

  @media (max-width: 899px) {
    .vk-tafel { grid-template-columns: 1fr; }
    /* Schmal: erst die Szene, dann der Text */
    .vk-beleg--szene { order: -1; }
  }
  /* Handy: Zeichnung wird stark verkleinert, Beschriftungen im Bild groesser */
  @media (max-width: 560px) {
    .sz-text { font-size: 13px; }
    .sz-anzeige { font-size: 16px; }
  }
  /* Nebeneinander auf der Schiene: FI so hoch wie die Leitungsschutzschalter
     (er hat keine Meldeleuchte), damit die Hutschiene durchgehend auf
     derselben Hoehe liegt. Die Klemmen sitzen oben und unten. */
  @media (min-width: 700px) {
    .vk-fi { grid-template-rows: auto 1fr; }
    .vk-automat--fi { align-content: space-between; }
  }
  @media (max-width: 699px) {
    .vk { --vk-hub: 1.25rem; }
    /* Handy: Stromkreise in zwei Reihen zu je drei, der FI darunter quer */
    .vk-reihe { grid-template-columns: 1fr; row-gap: 1.5rem; }
    .vk-fi { order: 2; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: stretch; gap: .75rem; }
    .vk-fi .vk-schild { width: auto; }
    .vk-fi .vk-sitz::before { left: -.75rem; right: -.75rem; }
    .vk-fi-hinweis {
      display: block; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
      line-height: 1.4; color: #8c99ad;
    }
    .vk-einspeisung, .vk-bruecke, .vk-abgang { display: none !important; }
    .vk-schiene { grid-template-columns: repeat(3, 1fr); row-gap: 1.5rem; }
    .vk-automat { width: 3.9rem; }
    .vk-automat--fi { width: 5.6rem; }
    .vk-klemmen { gap: 1.2rem; }
    .vk-name { font-size: .86rem; }
  }

/* ============================================================
   Bauteil aus src/components/plan/Gewerbe.astro
   ============================================================ */
.dr-kopf text { font-size: 12px; font-weight: 750; fill: var(--weiss); letter-spacing: .06em; }
  .dr-kopf .dr-werte { text-anchor: end; fill: #9fb0c4; font-variant-numeric: tabular-nums; }
  .dr-muster { fill: none; stroke-width: 3; stroke-linecap: round; }
  .dr-schirm { fill: #111c30; stroke: #3a4862; stroke-width: 1.5; }
  .dr-raster { stroke: #22304a; stroke-width: 1; }
  .dr-raster--null { stroke: #3a4862; }
  .dr-welle { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
  .dr-l1 { stroke: var(--blau-licht); }
  .dr-l2 { stroke: var(--weiss); }
  .dr-l3 { stroke: #9fb0c4; stroke-dasharray: 7 5; }
  .dr-wellen { animation: dr-lauf 3s linear infinite; }
  @keyframes dr-lauf { to { transform: translateX(-144px); } }
  .dr-feld-text { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; fill: #9fb0c4; }
  .dr-feld-text--wert { fill: var(--weiss); }
  .dr-led { fill: #22304a; stroke: #3a4862; stroke-width: 1.5; animation: dr-folge 1.5s steps(1) infinite; animation-delay: calc(var(--n) * .5s); }
  @keyframes dr-folge {
    0% { fill: var(--blau-licht); }
    33.33%, 100% { fill: #22304a; }
  }
  .dr-led-text { font-size: 11px; font-weight: 750; fill: #9fb0c4; text-anchor: middle; }
  .dr-pfeil { fill: none; stroke: var(--blau-licht); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  /* Schirm schaltet ein: Wellen erscheinen, wenn die Zeichnung steht */
  .js .planblatt:not([data-ein="an"]) .dr-welle { opacity: 0; }
  .planblatt[data-ein="an"] .dr-welle { animation: dr-an .6s ease backwards; }
  .planblatt[data-ein="an"] .dr-l1 { animation-delay: .3s; }
  .planblatt[data-ein="an"] .dr-l2 { animation-delay: .5s; }
  .planblatt[data-ein="an"] .dr-l3 { animation-delay: .7s; }
  @keyframes dr-an { from { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) {
    .dr-wellen, .dr-led { animation: none; }
    .dr-led { fill: var(--blau-licht); }
  }

/* ============================================================
   Bauteil aus src/components/plan/Licht.astro
   ============================================================ */
.planblatt { --licht: #ffa757; --hell: 1; }
  .li-wand { fill: var(--licht); opacity: calc(var(--hell) * .07); transition: fill .5s ease, opacity .5s ease; }
  .li-boden { fill: none; stroke: #3a4862; stroke-width: 2; }
  .li-stop { stop-color: var(--licht); transition: stop-color .5s ease; }
  .li-licht { opacity: var(--hell); transition: opacity .5s ease; }
  .li-fleck { fill: var(--licht); opacity: .7; transition: fill .5s ease; }
  .li-moebel path { fill: none; stroke: #8193ab; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
  .li-kabel { stroke: #8193ab; stroke-width: 1.5; }
  .li-schirm { fill: var(--navy-2); stroke: #8193ab; stroke-width: 1.5; }
  .li-birne { fill: var(--licht); transition: fill .5s ease; }
  .li-anzeige text { font-size: 13px; font-weight: 750; fill: var(--weiss); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
  .li-anzeige .li-anzeige-zeile { font-size: 12px; font-weight: 600; fill: #9fb0c4; }
  .li-anzeige-k, .li-anzeige-h, .li-anzeige-w { display: none; }

  /* Einschalten: erst die Zeichnung, dann geht die Leuchte an */
  .js .planblatt:not([data-ein="an"]) .li-licht { opacity: 0; }
  .planblatt[data-ein="an"] .li-licht { animation: li-an .9s ease 1s backwards; }
  .planblatt[data-ein="an"] .li-birne { animation: li-birne .9s ease 1s backwards; }
  @keyframes li-an { from { opacity: 0; } }
  @keyframes li-birne { from { fill: #3a4862; } }

  .li-steuerung { display: flex; flex-wrap: wrap; gap: .6rem; }
  .li-muster { width: .85rem; height: .85rem; border-radius: 50%; flex: none; border: 1px solid rgb(13 20 35 / .2); }
  .li-hinweis { flex-basis: 100%; margin: .15rem 0 0; font-size: .9rem; color: var(--text-2); }

/* ============================================================
   Bauteil aus src/components/plan/Neubau.astro
   ============================================================ */
.nb-wand { fill: none; stroke: var(--text); stroke-width: 5; stroke-linejoin: miter; }
  .nb-fein { fill: none; stroke: var(--text-2); stroke-width: 1.25; }
  .nb-fenster { fill: var(--weiss); stroke: var(--text-2); stroke-width: 1.25; }
  .nb-ausschnitt { fill: var(--weiss); }
  .nb-raum text { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; fill: var(--text-2); text-anchor: middle; }
  .nb-uv { fill: var(--navy); }
  .nb-uv-text { font-size: 11px; font-weight: 800; letter-spacing: .08em; fill: var(--navy); }
  .nb-symbol { fill: none; stroke: var(--navy); stroke-width: 1.75; stroke-linecap: round; }
  .nb-leuchte { fill: var(--blau-hell); stroke: var(--navy); stroke-width: 1.75; }
  .nb-schein { fill: var(--blau); opacity: .12; }
  .nb-zuleitung { fill: none; stroke: var(--text-2); stroke-width: 1.25; stroke-dasharray: 1; }
  .nb-bogen { fill: none; stroke: var(--blau); stroke-width: 1.75; stroke-linecap: round; }
  .nb-stempel { color: var(--blau); }
  .nb-stempel rect { fill: none; stroke: currentColor; stroke-width: 2; }
  .nb-stempel .nb-stempel-innen { stroke-width: 1; }
  .nb-stempel text { fill: currentColor; text-anchor: middle; font-size: 14px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
  .nb-stempel .nb-stempel-norm { font-size: 8.5px; letter-spacing: .08em; font-weight: 700; }

  /* Inbetriebnahme: Leuchten gehen an, dann der Stempel */
  .js .planblatt:not([data-ein="an"]) .nb-schein { opacity: 0; }
  .js .planblatt:not([data-ein="an"]) .nb-stempel { opacity: 0; }
  .planblatt[data-ein="an"] .nb-leuchte { animation: nb-an .35s ease 2.9s backwards; }
  .planblatt[data-ein="an"] .nb-schein { animation: nb-schein .5s ease 2.9s backwards; }
  .planblatt[data-ein="an"] .nb-stempel { animation: nb-stempel .28s cubic-bezier(.55, 0, .9, .4) 3.25s backwards; transform-box: fill-box; transform-origin: center; }
  @keyframes nb-an { from { fill: var(--weiss); } }
  @keyframes nb-schein { from { opacity: 0; } }
  @keyframes nb-stempel {
    from { opacity: 0; scale: 1.6; }
    to { opacity: 1; scale: 1; }
  }

/* ============================================================
   Bauteil aus src/components/plan/Photovoltaik.astro
   ============================================================ */
.pv-haus { fill: none; stroke: var(--text); stroke-width: 2.5; stroke-linejoin: round; }
  .pv-modul { fill: var(--navy-2); stroke: var(--navy); stroke-width: 1; transition: fill .6s ease; }
  .pv-zellen { stroke: #3a4862; stroke-width: .8; fill: none; }
  .pv-sonne line { stroke: var(--blau); stroke-width: 2.5; stroke-linecap: round; }
  .pv-sonne circle { fill: var(--blau-hell); stroke: var(--blau); stroke-width: 2.5; }
  .pv-sonne, .pv-mond { transition: opacity .6s ease, transform .6s var(--ease); }
  .pv-mond { fill: var(--navy-2); opacity: 0; }
  .pv-leitung { fill: none; stroke: var(--linie); stroke-width: 4; stroke-linejoin: round; }
  .pv-fluss {
    fill: none; stroke: var(--blau); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 2 10; transition: opacity .4s ease;
    animation: pv-fliessen .8s linear infinite;
  }
  @keyframes pv-fliessen { to { stroke-dashoffset: -12; } }
  .pv-geraet { fill: var(--weiss); stroke: var(--text); stroke-width: 1.75; }
  .pv-symbol { fill: none; stroke: var(--navy); stroke-width: 1.5; stroke-linecap: round; }
  .pv-pol { fill: var(--text); }
  .pv-ladung { fill: var(--blau); transition: fill .6s ease; }
  .pv-verbraucher { fill: var(--blau-hell); stroke: var(--navy); stroke-width: 1.75; }
  .pv-mast { fill: none; stroke: var(--text); stroke-width: 1.75; stroke-linejoin: round; }
  .pv-kwh { font-size: 10px; font-weight: 800; fill: var(--navy); text-anchor: middle; letter-spacing: .04em; }
  .pv-text { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; fill: var(--text-2); text-anchor: middle; }
  .pv-text--links { text-anchor: end; }

  .pv-steuerung { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.25rem; }
  .pv-zustand { margin: 0; font-size: .95rem; color: var(--text-2); max-width: 34ch; }
  .pv-zustand--nacht { display: none; }

  /* Nachts: nur Speicher zum Haus, Module dunkel, Mond statt Sonne */
  .planblatt:has(input[value="nacht"]:checked) .pv-fluss--modul,
  .planblatt:has(input[value="nacht"]:checked) .pv-fluss--wr,
  .planblatt:has(input[value="nacht"]:checked) .pv-fluss--zaehler,
  .planblatt:has(input[value="nacht"]:checked) .pv-fluss--netz { opacity: 0; }
  .planblatt:has(input[value="nacht"]:checked) .pv-fluss--speicher { animation-direction: reverse, normal; }
  .planblatt:has(input[value="nacht"]:checked) .pv-sonne { opacity: 0; transform: translateY(28px); }
  .planblatt:has(input[value="nacht"]:checked) .pv-mond { opacity: 1; }
  .planblatt:has(input[value="nacht"]:checked) .pv-ladung { fill: var(--blau-hell); }
  .planblatt:has(input[value="nacht"]:checked) .pv-modul { fill: #3a4862; }
  .planblatt:has(input[value="nacht"]:checked) .pv-zustand--tag { display: none; }
  .planblatt:has(input[value="nacht"]:checked) .pv-zustand--nacht { display: inline; }

  /* Strom setzt ein, wenn die Zeichnung steht */
  .js .planblatt:not([data-ein="an"]) .pv-fluss { opacity: 0; }
  .planblatt[data-ein="an"] .pv-fluss { animation: pv-fliessen .8s linear infinite, pv-strom-ein .6s ease 1.6s backwards; }
  @keyframes pv-strom-ein { from { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) {
    .pv-fluss { animation: none !important; stroke-dasharray: none; }
  }

/* ============================================================
   Bauteil aus src/components/plan/Planblatt.astro
   ============================================================ */
.planblatt {
    margin: 0; width: 100%;
    /* Millimeterraster: fein alle 12 px, kraeftiger alle 60 px; auch fuer
       Ebenen innerhalb der Zeichnung (Vorher/Nachher) */
    --pb-raster:
      linear-gradient(#e9edf1 1px, transparent 1px) 0 0 / 60px 60px,
      linear-gradient(90deg, #e9edf1 1px, transparent 1px) 0 0 / 60px 60px,
      linear-gradient(#f2f4f7 1px, transparent 1px) 0 0 / 12px 12px,
      linear-gradient(90deg, #f2f4f7 1px, transparent 1px) 0 0 / 12px 12px,
      var(--weiss);
  }
  .pb-blatt {
    background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-l);
    overflow: hidden;
  }
  /* Dunkles Blatt ist ein Messgeraet und traegt den Geraeteschatten */
  .planblatt--dunkel .pb-blatt { box-shadow: var(--schatten); }
  .pb-zeichnung { position: relative; background: var(--pb-raster); }
  .pb-zeichnung svg { display: block; width: 100%; height: auto; }
  .planblatt--dunkel .pb-zeichnung { background: var(--navy); }
  .planblatt--dunkel .pb-blatt { border-color: #22304a; }

  .pb-schriftfeld {
    display: grid; grid-template-columns: 1.5fr auto 1.2fr auto;
    border-top: 2px solid var(--text); background: var(--weiss);
    font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2);
    font-variant-numeric: tabular-nums;
  }
  .pb-feld { padding: .45rem .7rem; border-left: 1px solid var(--linie); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pb-feld:first-child { border-left: 0; }
  .pb-feld b { color: var(--text); font-weight: 800; }
  .pb-feld--betrieb { color: var(--text); }
  .pb-steuerung { margin-top: .9rem; }

  /* Zeichnen beim Einschalten */
  .planblatt .pb-zug { stroke-dasharray: 1; stroke-dashoffset: 0; }
  .js .planblatt:not([data-ein="an"]) .pb-zug { stroke-dashoffset: 1; }
  .js .planblatt:not([data-ein="an"]) .pb-ein { opacity: 0; }
  .planblatt[data-ein="an"] .pb-zug { animation: pb-zug var(--d, .7s) cubic-bezier(.65, 0, .35, 1) calc(var(--v, 0) * 1s) backwards; }
  .planblatt .pb-ein { transform-box: fill-box; transform-origin: center; }
  .planblatt[data-ein="an"] .pb-ein { animation: pb-ein .45s var(--ease) calc(var(--v, 0) * 1s) backwards; }
  @keyframes pb-zug { from { stroke-dashoffset: 1; } }
  /* scale statt transform, damit vorhandene transform-Attribute erhalten bleiben */
  @keyframes pb-ein { from { opacity: 0; scale: .7; } }

  @media (max-width: 520px) {
    .pb-schriftfeld { grid-template-columns: 1fr auto; }
    .pb-feld--betrieb, .pb-feld--art { display: none; }
    .pb-feld:nth-child(2) { border-left: 0; }
  }

/* ============================================================
   Bauteil aus src/components/plan/Sanierung.astro
   ============================================================ */
.sa-bild { position: relative; }
  .sa-bild svg { display: block; width: 100%; height: auto; }
  .sa-nachher-ebene {
    position: absolute; inset: 0; background: var(--pb-raster);
    clip-path: inset(0 0 0 0);
    transition: clip-path .9s cubic-bezier(.65, 0, .35, 1);
  }
  .sa-kante {
    position: absolute; top: 0; bottom: 0; left: 0; width: 3px; margin-left: -1.5px;
    background: var(--blau); opacity: 0; pointer-events: none;
    transition: left .9s cubic-bezier(.65, 0, .35, 1), opacity .2s;
  }
  .planblatt:has(input[value="vorher"]:checked) .sa-nachher-ebene { clip-path: inset(0 0 0 100%); }

  /* Einschalten: alt zuerst, dann schiebt sich der neue Schrank von rechts herein */
  .js .planblatt:not([data-ein="an"]) .sa-nachher-ebene { clip-path: inset(0 0 0 100%); }
  .planblatt[data-ein="an"] .sa-nachher-ebene { animation: sa-wisch 1.3s cubic-bezier(.65, 0, .35, 1) 1.1s backwards; }
  .planblatt[data-ein="an"] .sa-kante { animation: sa-kante 1.3s cubic-bezier(.65, 0, .35, 1) 1.1s backwards; }
  @keyframes sa-wisch { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
  @keyframes sa-kante {
    0% { left: 100%; opacity: 1; }
    95% { opacity: 1; }
    100% { left: 0; opacity: 0; }
  }

  .sa-schrank { fill: var(--weiss); stroke: var(--text); stroke-width: 2.5; }
  .sa-schrank--alt { fill: var(--flaeche); stroke: var(--text-2); stroke-dasharray: 2 0; }
  .sa-trenn { stroke: var(--linie); stroke-width: 1.5; }
  .sa-zaehler-alt { fill: var(--schiene); stroke: var(--text-2); stroke-width: 1.5; }
  .sa-sichtfenster { fill: var(--weiss); stroke: #8f99a4; stroke-width: 1.25; }
  .sa-scheibe { fill: #8f99a4; }
  .sa-marke { fill: var(--navy); }
  .sa-rolle { fill: var(--weiss); stroke: #8f99a4; stroke-width: 1; }
  .sa-diazed { fill: var(--schiene); stroke: var(--text-2); stroke-width: 1.5; }
  .sa-diazed-kopf { fill: var(--weiss); stroke: #8f99a4; stroke-width: 1.25; }
  .sa-draht { fill: none; stroke: #8f99a4; stroke-width: 2; stroke-dasharray: 3 3; }

  .sa-zaehler { fill: var(--flaeche); stroke: var(--text); stroke-width: 1.5; }
  .sa-display { fill: var(--navy); }
  .sa-display-text { font-size: 13px; font-weight: 700; fill: var(--blau-licht); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
  .sa-display-einheit { font-size: 10px; font-weight: 700; fill: #9fb0c4; text-anchor: end; }
  .sa-led { fill: var(--blau); }
  .sa-schiene { fill: #c3cad2; }
  .sa-geraet { fill: var(--weiss); stroke: #8f99a4; stroke-width: 1.25; }
  .sa-geraet--uess { fill: var(--blau-hell); }
  .sa-geraet--blind { fill: var(--schiene); stroke-dasharray: 2 2; }
  .sa-hebel { fill: var(--navy-2); }
  .sa-hebel--ein { fill: var(--blau); }
  .sa-pruef { fill: var(--schiene); stroke: var(--navy); stroke-width: 1; }
  .sa-kamm { fill: var(--blau); }

  .sa-notiz path { fill: none; stroke: var(--text-2); stroke-width: 1; }
  .sa-notiz text { font-size: 11px; font-weight: 650; fill: var(--text); }
  .sa-stempel { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; fill: var(--text-2); }
  .sa-stempel--neu { fill: var(--blau); }

  @media (prefers-reduced-motion: reduce) {
    .sa-kante { display: none; }
  }

/* ============================================================
   Bauteil aus src/components/plan/SmartHome.astro
   ============================================================ */
.sh-wand { fill: none; stroke: var(--text); stroke-width: 4; }
  .sh-kabel { stroke: var(--text-2); stroke-width: 1.5; }
  .sh-schirm { fill: var(--navy-2); }
  .sh-lampe { fill: var(--blau-hell); stroke: var(--navy); stroke-width: 1.25; transition: fill .3s ease; }
  .sh-stop { stop-color: var(--blau); }
  .sh-kegel { opacity: 0; transition: opacity .5s ease; }
  .sh-rahmen { fill: var(--blau-hell); stroke: var(--text); stroke-width: 1.75; }
  .sh-sprosse { stroke: var(--text); stroke-width: 1.25; }
  .sh-kasten { fill: var(--schiene); stroke: var(--text); stroke-width: 1.5; }
  .sh-lamelle { fill: var(--flaeche); stroke: #8f99a4; stroke-width: 1; }
  .sh-panzer { transform: translateY(-92px); transition: transform 1.4s cubic-bezier(.45, 0, .55, 1); }
  .sh-heizkoerper { fill: var(--weiss); stroke: var(--text); stroke-width: 1.5; }
  .sh-rippe { stroke: #8f99a4; stroke-width: 1.25; }
  .sh-waerme path { fill: none; stroke: var(--blau); stroke-width: 2; stroke-linecap: round; opacity: 0; transition: opacity .5s ease; }
  .sh-tasterplatte { fill: var(--weiss); stroke: var(--text); stroke-width: 1.5; }
  .sh-wippe { fill: var(--flaeche); stroke: #8f99a4; stroke-width: 1; }
  .sh-bus { fill: none; stroke: var(--navy); stroke-width: 2.5; stroke-linejoin: round; }
  .sh-aktor { fill: var(--weiss); stroke: var(--text); stroke-width: 1.75; }
  .sh-kanal { fill: #b7c0c9; transition: fill .2s ease; }
  .sh-kanal-hebel { fill: var(--navy-2); transition: transform .26s var(--ease), fill .2s ease; transform-box: fill-box; }
  .sh-text { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; fill: var(--text-2); text-anchor: middle; }
  .sh-text--bus { fill: var(--navy); }
  .sh-telegramm { fill: var(--blau); opacity: 0; }

  /* Taster gedrueckt: Telegramm laeuft zum Aktor (0,8 s), dann schaltet der Kanal */
  .planblatt:has(input[value="licht"]:checked) .sh-telegramm--licht,
  .planblatt:has(input[value="rollladen"]:checked) .sh-telegramm--rollladen,
  .planblatt:has(input[value="heizung"]:checked) .sh-telegramm--heizung { animation: sh-telegramm .8s linear; }
  @keyframes sh-telegramm {
    0% { opacity: 1; transform: translate(0, 0); }
    23.2% { transform: translate(0, 124px); }
    85.6% { transform: translate(328px, 124px); }
    99% { opacity: 1; transform: translate(328px, 46px); }
    100% { opacity: 0; transform: translate(328px, 46px); }
  }
  .planblatt:has(input[value="licht"]:checked) .sh-kegel { opacity: 1; transition-delay: .8s; }
  .planblatt:has(input[value="licht"]:checked) .sh-lampe { fill: var(--blau); transition-delay: .8s; }
  .planblatt:has(input[value="rollladen"]:checked) .sh-panzer { transform: none; transition-delay: .8s; }
  .planblatt:has(input[value="heizung"]:checked) .sh-waerme path { opacity: 1; transition-delay: .8s; animation: sh-steigen 1.6s ease-in-out .8s infinite; }
  @keyframes sh-steigen { 50% { transform: translateY(-6px); } }
  .planblatt:has(input[value="licht"]:checked) .sh-kanal--licht,
  .planblatt:has(input[value="rollladen"]:checked) .sh-kanal--rollladen,
  .planblatt:has(input[value="heizung"]:checked) .sh-kanal--heizung { fill: var(--blau); transition-delay: .8s; }

  /* Taster als Bedienfeld */
  .sh-taster {
    display: inline-grid; grid-template-columns: repeat(3, minmax(6.5rem, 1fr)); gap: .5rem;
    padding: .5rem; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  }
  .sh-knopf {
    position: relative; display: grid; justify-items: center; gap: .45rem;
    padding: .7rem .6rem .65rem; min-height: 3.5rem;
    background: var(--flaeche); border: 1px solid #c9d0d7; border-radius: var(--radius-s);
    font-weight: 650; font-size: .95rem; cursor: pointer; user-select: none;
    transition: transform .1s var(--ease), border-color .2s var(--ease);
    -webkit-tap-highlight-color: transparent;
  }
  .sh-knopf input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .sh-knopf:hover { border-color: var(--blau); }
  .sh-knopf:active { transform: translateY(1px); }
  .sh-knopf:has(input:focus-visible) { outline: 3px solid var(--blau); outline-offset: 2px; }
  .sh-knopf-led { width: 1.6rem; height: .3rem; border-radius: 2px; background: #b7c0c9; transition: background-color .2s ease; }
  .sh-knopf:has(input:checked) .sh-knopf-led { background: var(--blau); }
  .sh-knopf:has(input:checked) { border-color: var(--navy); }

  @media (prefers-reduced-motion: reduce) {
    .sh-telegramm { display: none; }
  }

/* ============================================================
   Seite rechtliches (aus src/pages/[seite].astro)
   ============================================================ */
[data-seite="rechtliches"] .recht { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem); }
  [data-seite="rechtliches"] .recht h2 { margin-top: 2em; }
  [data-seite="rechtliches"] .recht h2:first-child { margin-top: 0; }
  [data-seite="rechtliches"] .recht a { overflow-wrap: anywhere; }
  [data-seite="rechtliches"] .recht-stand { color: var(--text-2); font-size: .95rem; margin-top: 2.5rem; }

/* ============================================================
   Seite nicht-gefunden (aus src/pages/404.astro)
   ============================================================ */
[data-seite="nicht-gefunden"] .nichts {
    --hub: 2.6rem;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 0 clamp(2rem, 6vw, 5rem); align-items: center;
    grid-template-areas: "intro geraet" "liste geraet";
    padding-block: clamp(3rem, 8vw, 6rem);
  }
  [data-seite="nicht-gefunden"] .nichts-intro { grid-area: intro; align-self: end; }
  [data-seite="nicht-gefunden"] .nichts-liste { grid-area: liste; align-self: start; }
  [data-seite="nicht-gefunden"] .nichts-geraet { grid-area: geraet; }
  [data-seite="nicht-gefunden"] .nichts h1 { max-width: 18ch; }
  [data-seite="nicht-gefunden"] .nichts .lead { margin-bottom: 2rem; }
  [data-seite="nicht-gefunden"] .nichts-titel { font-size: 1.05rem; margin-bottom: .75rem; }
  [data-seite="nicht-gefunden"] .nichts-kreise { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; max-width: 40rem; }
  [data-seite="nicht-gefunden"] .nichts-kreise a {
    display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--linie);
    color: var(--text); font-weight: 600; text-decoration: none;
  }
  [data-seite="nicht-gefunden"] .nichts-kreise a:hover { color: var(--blau); }
  [data-seite="nicht-gefunden"] .nichts-kreise span {
    display: grid; place-items: center; min-width: 2.6rem; height: 1.8rem; padding-inline: .3rem; border-radius: var(--radius-s);
    background: var(--flaeche); color: var(--text-2); font-size: .78rem; font-weight: 800; letter-spacing: .06em; font-variant-numeric: tabular-nums;
    transition: background-color .2s var(--ease), color .2s var(--ease);
  }
  [data-seite="nicht-gefunden"] .nichts-kreise span svg { width: 1rem; height: 1rem; }
  [data-seite="nicht-gefunden"] .nichts-kreise a:hover span { background: var(--blau); color: var(--weiss); }

  /* Gehaeuse mit einem Leitungsschutzschalter in Stellung O */
  [data-seite="nicht-gefunden"] .nichts-geraet { display: grid; justify-items: center; gap: .75rem; }
  [data-seite="nicht-gefunden"] .nichts-gehaeuse {
    width: 100%; max-width: 16rem; padding: .8rem 1.25rem 1.75rem; border-radius: var(--radius-l);
    background: var(--navy); border: 1px solid #22304a; box-shadow: var(--schatten);
  }
  [data-seite="nicht-gefunden"] .nichts-typ { margin: 0 0 .9rem; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #8c99ad; }
  [data-seite="nicht-gefunden"] .nichts-typ span { color: var(--blau-licht); margin-right: .4rem; }
  [data-seite="nicht-gefunden"] .sicherung { display: grid; justify-items: center; gap: 1rem; text-decoration: none; color: inherit; border-radius: var(--radius); -webkit-tap-highlight-color: transparent; }
  [data-seite="nicht-gefunden"] .sicherung:focus-visible { outline: 3px solid var(--blau-licht); outline-offset: 6px; }
  [data-seite="nicht-gefunden"] .sicherung-schild {
    width: 100%; display: grid; justify-items: center; gap: .1rem; padding: .55rem;
    background: var(--weiss); color: var(--text); border-radius: var(--radius-s); text-align: center;
  }
  [data-seite="nicht-gefunden"] .sicherung-kennung { font-size: .78rem; font-weight: 700; letter-spacing: .08em; color: var(--fehler); font-variant-numeric: tabular-nums; }
  [data-seite="nicht-gefunden"] .sicherung-name { font-weight: 750; }
  [data-seite="nicht-gefunden"] .sicherung-sitz { position: relative; width: 100%; display: grid; justify-items: center; }
  [data-seite="nicht-gefunden"] .sicherung-sitz::before {
    content: ""; position: absolute; left: -1.25rem; right: -1.25rem; top: 50%; height: 2rem; transform: translateY(-50%);
    background: linear-gradient(#8f99a4 0 24%, #c3cad2 24% 76%, #8f99a4 76%);
  }
  [data-seite="nicht-gefunden"] .sicherung-automat {
    position: relative; display: grid; justify-items: center; gap: .5rem; width: 6.5rem; padding: .7rem .6rem;
    background: var(--weiss); border: 1px solid #b7c0c9; border-radius: 5px;
  }
  [data-seite="nicht-gefunden"] .sicherung-klemme { width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--schiene); border: 1px solid #8f99a4; }
  [data-seite="nicht-gefunden"] .sicherung-stellung { font-size: .75rem; font-weight: 700; color: #6b7684; line-height: 1; }
  [data-seite="nicht-gefunden"] .sicherung-fenster {
    width: 2.7rem; height: calc(var(--hub) + 2.6rem); padding: .2rem;
    display: flex; align-items: flex-end; justify-content: center;
    background: var(--schiene); border: 1px solid #aab3bd; border-radius: 4px;
  }
  [data-seite="nicht-gefunden"] .sicherung-hebel {
    width: 100%; height: 2.4rem; border-radius: 4px; background: var(--navy-2);
    transition: transform .26s var(--ease), background-color .2s var(--ease);
    /* Beim Laden faellt der Hebel beschleunigt nach unten: die Sicherung fliegt raus */
    animation: sicherung-fliegt .22s cubic-bezier(.5, 0, .75, 0) .5s backwards;
  }
  @keyframes sicherung-fliegt {
    from { transform: translateY(calc(-1 * var(--hub))); background: var(--blau); }
  }
  [data-seite="nicht-gefunden"] .sicherung-automat { animation: sicherung-ruck .26s ease .7s; }
  @keyframes sicherung-ruck { 25% { translate: -2px 0; } 50% { translate: 2px 0; } 75% { translate: -1px 0; } }
  [data-seite="nicht-gefunden"] .sicherung-melder { width: 2.7rem; height: .35rem; border-radius: 2px; background: #b7c0c9; transition: background-color .18s var(--ease) .16s; }
  [data-seite="nicht-gefunden"] .sicherung:hover .sicherung-hebel { transform: translateY(-.35rem); }
  [data-seite="nicht-gefunden"] .sicherung:active .sicherung-hebel, [data-seite="nicht-gefunden"] .sicherung--ein .sicherung-hebel { transform: translateY(calc(-1 * var(--hub))); background: var(--blau); }
  [data-seite="nicht-gefunden"] .sicherung--ein .sicherung-melder { background: var(--blau); }
  [data-seite="nicht-gefunden"] .sicherung--ein .sicherung-kennung { color: var(--blau); }
  [data-seite="nicht-gefunden"] .nichts-hinweis { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }

  @media (max-width: 760px) {
    [data-seite="nicht-gefunden"] .nichts { --hub: 2rem; grid-template-columns: 1fr; grid-template-areas: "intro" "geraet" "liste"; }
    [data-seite="nicht-gefunden"] .nichts-geraet { justify-items: start; margin-bottom: 2.5rem; }
    [data-seite="nicht-gefunden"] .nichts-gehaeuse { max-width: 12rem; }
    [data-seite="nicht-gefunden"] .nichts-kreise { grid-template-columns: 1fr; }
  }

/* ============================================================
   Seite elektriker (aus src/pages/elektriker/index.astro)
   ============================================================ */
[data-seite="elektriker"] .gebiet { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4rem); padding-block: clamp(2.5rem, 6vw, 4.5rem); align-items: start; }
  [data-seite="elektriker"] .gebiet-orte { display: grid; gap: 2rem; }
  [data-seite="elektriker"] .gebiet-orte h2 { font-size: 1.25rem; margin-bottom: .75rem; }
  [data-seite="elektriker"] .gebiet-orte > section > ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--linie); }
  [data-seite="elektriker"] .gebiet-orte > section > ul > li { padding-block: .75rem; border-bottom: 1px solid var(--linie); scroll-margin-top: 7rem; }
  [data-seite="elektriker"] .gebiet-orte li:target { background: var(--blau-hell); }
  [data-seite="elektriker"] .ort-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
  [data-seite="elektriker"] .ort-zeile h3 { font-size: 1.05rem; margin: 0; letter-spacing: 0; }
  [data-seite="elektriker"] .ort-zeile span { color: var(--text-2); font-variant-numeric: tabular-nums; font-size: .95rem; }
  [data-seite="elektriker"] .ort-projekte { margin: .4rem 0 0; padding-left: 1.1rem; color: var(--text-2); font-size: .95rem; }
  [data-seite="elektriker"] .gebiet-hinweis { margin: 0; color: var(--text-2); }
  @media (max-width: 899px) { [data-seite="elektriker"] .gebiet { grid-template-columns: 1fr; } }

/* ============================================================
   Seite start (aus src/pages/index.astro)
   ============================================================ */
[data-seite="start"] .start { padding-block: clamp(1.25rem, 2vw, 1.5rem); }
  [data-seite="start"] .start-raster { display: grid; grid-template-columns: 1.3fr .9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
  [data-seite="start"] .start h1 { margin-bottom: .3em; font-size: clamp(2.1rem, 4.4vw, 3.15rem); }
  [data-seite="start"] .start-leitsatz { font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 750; color: var(--navy-2); margin-bottom: .9rem; letter-spacing: -0.01em; }
  [data-seite="start"] .start .lead { margin-bottom: 1.5rem; }
  [data-seite="start"] .start-aktionen { display: flex; flex-wrap: wrap; gap: .75rem; }

  [data-seite="start"] .mehr-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 650; margin-top: 1.75rem; }
  [data-seite="start"] .mehr-link svg { width: 1.1rem; height: 1.1rem; }

  [data-seite="start"] .projekte { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  [data-seite="start"] .projekt img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); margin-bottom: .9rem; }
  [data-seite="start"] .projekt-ort { font-size: .88rem; font-weight: 600; color: var(--text-2); margin: 0; }
  [data-seite="start"] .projekt h3 { font-size: 1.15rem; }

  [data-seite="start"] .vertrauen { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); }
  [data-seite="start"] .vertrauen h2 { margin-bottom: 1.25rem; }

  [data-seite="start"] .team { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  [data-seite="start"] .team .team-foto { width: 100%; height: auto; border-radius: var(--radius-l); }

  [data-seite="start"] .solar { background: var(--navy); color: #d5dde6; padding-block: clamp(2.5rem, 6vw, 4.5rem); overflow: hidden; }
  [data-seite="start"] .solar-innen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); align-items: center; gap: 2rem clamp(2rem, 6vw, 5rem); }
  [data-seite="start"] .solar h2 { color: var(--weiss); margin-bottom: .4rem; }
  [data-seite="start"] .solar p { margin: 0 0 1.5rem; max-width: 52ch; }
  [data-seite="start"] .solar-innen .bahn { justify-self: end; }
  @media (max-width: 899px) {
    [data-seite="start"] .solar-innen { grid-template-columns: 1fr; }
    [data-seite="start"] .solar-innen .bahn { justify-self: start; order: -1; max-width: 26rem; }
  }

  [data-seite="start"] .ratgeber { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  [data-seite="start"] .ratgeber li { border-top: 2px solid var(--text); padding-top: 1rem; }
  [data-seite="start"] .ratgeber-meta { font-size: .85rem; font-weight: 600; color: var(--text-2); margin: .6rem 0 0 !important; }
  [data-seite="start"] .ratgeber h3 { font-size: 1.15rem; }
  [data-seite="start"] .ratgeber h3 a { color: var(--text); text-decoration: none; }
  [data-seite="start"] .ratgeber h3 a:hover { color: var(--blau); text-decoration: underline; }
  [data-seite="start"] .ratgeber li > p { color: var(--text-2); margin: 0; }

  @media (max-width: 640px) {
    [data-seite="start"] .start-zweit { display: none; }
    [data-seite="start"] .start .lead { margin-bottom: 1.25rem; }
    /* Region steht auf dem Handy im kompakten Typenschild (Standort) */
    [data-seite="start"] .start-region { display: none; }
    [data-seite="start"] .start-raster { gap: 1.5rem; }
  }
  @media (max-width: 899px) {
    [data-seite="start"] .start-raster, [data-seite="start"] .vertrauen, [data-seite="start"] .team { grid-template-columns: 1fr; }
    [data-seite="start"] .projekte, [data-seite="start"] .ratgeber { grid-template-columns: 1fr; }
  }
  @media (min-width: 600px) and (max-width: 899px) {
    [data-seite="start"] .projekte { grid-template-columns: repeat(2, 1fr); }
  }

/* ============================================================
   Seite danke (aus src/pages/kontakt/danke.astro)
   ============================================================ */
[data-seite="danke"] .meldung { padding-block: clamp(3.5rem, 10vw, 7rem); max-width: 46rem; }
  [data-seite="danke"] .meldung .lead { margin-bottom: 2rem; }

/* ============================================================
   Seite fehler (aus src/pages/kontakt/fehler.astro)
   ============================================================ */
[data-seite="fehler"] .meldung { padding-block: clamp(3.5rem, 10vw, 7rem); max-width: 50rem; }
  [data-seite="fehler"] .meldung-wege { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem; }

/* ============================================================
   Seite kontakt (aus src/pages/kontakt/index.astro)
   ============================================================ */
[data-seite="kontakt"] .senden-laeuft { display: none; align-items: center; gap: .6rem; }
  [data-seite="kontakt"] .senden[data-zustand="sendet"] { cursor: progress; background: var(--blau-tief); }
  [data-seite="kontakt"] .senden[data-zustand="sendet"] .senden-text { display: none; }
  [data-seite="kontakt"] .senden[data-zustand="sendet"] .senden-laeuft { display: inline-flex; }
  /* Meldeleuchte wie am Leitungsschutzschalter, blinkt waehrend des Sendens */
  [data-seite="kontakt"] .senden-melder { width: 1.4rem; height: .3rem; border-radius: 2px; background: var(--weiss); animation: senden-blinkt .7s steps(2, jump-none) infinite; }
  @keyframes senden-blinkt { 50% { opacity: .25; } }
  [data-seite="kontakt"] .kontakt { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 5vw, 4.5rem); padding-block: clamp(2.5rem, 6vw, 4.5rem); align-items: start; }
  [data-seite="kontakt"] .formular h2 { font-size: clamp(1.45rem, 2.6vw, 1.85rem); }
  [data-seite="kontakt"] .formular-hinweis { color: var(--text-2); font-size: .95rem; }
  [data-seite="kontakt"] .feld { display: grid; gap: .35rem; margin-bottom: 1.1rem; }
  [data-seite="kontakt"] .feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
  [data-seite="kontakt"] .feld label { font-weight: 650; font-size: .97rem; }
  [data-seite="kontakt"] .feld input, [data-seite="kontakt"] .feld select, [data-seite="kontakt"] .feld textarea {
    width: 100%; min-height: 3rem; padding: .7rem .85rem; border: 1px solid #aeb7c1; border-radius: var(--radius);
    background: var(--weiss); font-size: 1rem;
  }
  [data-seite="kontakt"] .feld textarea { resize: vertical; min-height: 9rem; }
  [data-seite="kontakt"] .feld input:focus-visible, [data-seite="kontakt"] .feld select:focus-visible, [data-seite="kontakt"] .feld textarea:focus-visible { outline: 3px solid var(--blau); outline-offset: 1px; border-color: var(--blau); }
  [data-seite="kontakt"] .feld input:user-invalid, [data-seite="kontakt"] .feld textarea:user-invalid { border-color: var(--fehler); }
  [data-seite="kontakt"] .feld-hilfe { margin: 0; font-size: .88rem; color: var(--text-2); }
  [data-seite="kontakt"] .feld--falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  [data-seite="kontakt"] .formular-datenschutz { font-size: .9rem; color: var(--text-2); }
  [data-seite="kontakt"] .kontakt-seite { display: grid; gap: 2rem; position: sticky; top: 6rem; }
  [data-seite="kontakt"] .kontakt-wege h2 { font-size: 1.1rem; }
  [data-seite="kontakt"] .kontakt-wege ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
  [data-seite="kontakt"] .kontakt-wege li { display: flex; gap: .65rem; align-items: center; overflow-wrap: anywhere; }
  [data-seite="kontakt"] .kontakt-wege svg { width: 1.2rem; height: 1.2rem; flex: none; color: var(--blau); }
  @media (max-width: 899px) {
    [data-seite="kontakt"] .kontakt { grid-template-columns: 1fr; }
    [data-seite="kontakt"] .kontakt-seite { position: static; order: -1; }
  }
  @media (max-width: 560px) { [data-seite="kontakt"] .feld-paar { grid-template-columns: 1fr; } }

/* ============================================================
   Seite leistung (aus src/pages/leistungen/[slug].astro)
   ============================================================ */
[data-seite="leistung"] .leistung { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: clamp(2rem, 5vw, 4.5rem); padding-block: clamp(2.5rem, 6vw, 4.5rem); }
  [data-seite="leistung"] .leistung-haupt { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); align-content: start; }
  [data-seite="leistung"] .leistung-haupt h2 { font-size: clamp(1.45rem, 2.6vw, 1.85rem); }

  [data-seite="leistung"] .ablauf ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
  [data-seite="leistung"] .ablauf li { display: grid; grid-template-columns: 3.25rem 1fr; gap: 1rem; padding-block: 1.1rem; border-top: 1px solid var(--linie); }
  [data-seite="leistung"] .ablauf li:last-child { border-bottom: 1px solid var(--linie); }
  [data-seite="leistung"] .ablauf-nr { font-weight: 800; font-size: 1.35rem; color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1.3; }
  [data-seite="leistung"] .ablauf h3 { font-size: 1.1rem; margin-bottom: .25rem; }
  [data-seite="leistung"] .ablauf p { margin: 0; color: var(--text-2); }

  [data-seite="leistung"] .leistung-ratgeber { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
  [data-seite="leistung"] .leistung-ratgeber a { font-weight: 700; font-size: 1.1rem; }
  [data-seite="leistung"] .leistung-ratgeber p { margin: .25rem 0 0; color: var(--text-2); }

  [data-seite="leistung"] .leistung-seite { display: grid; gap: 1.5rem; align-content: start; position: sticky; top: 6rem; align-self: start; }
  [data-seite="leistung"] .leistung-karte { background: var(--flaeche); border-radius: var(--radius-l); padding: 1.5rem; }
  [data-seite="leistung"] .leistung-seite h2 { font-size: 1.05rem; margin-bottom: 1rem; }
  [data-seite="leistung"] .leistung-karte ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
  [data-seite="leistung"] .leistung-karte li { display: flex; gap: .6rem; align-items: flex-start; font-size: .97rem; }
  [data-seite="leistung"] .leistung-karte svg { width: 1.15rem; height: 1.15rem; flex: none; margin-top: .2rem; color: var(--navy); }
  [data-seite="leistung"] .leistung-andere ul { list-style: none; padding: 0; margin: 0; }
  [data-seite="leistung"] .leistung-andere a { display: flex; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--linie); text-decoration: none; color: var(--text); font-weight: 600; }
  [data-seite="leistung"] .leistung-andere a:hover { color: var(--blau); }
  [data-seite="leistung"] .leistung-andere span { color: var(--text-2); font-size: .85rem; font-weight: 700; min-width: 1.75rem; font-variant-numeric: tabular-nums; padding-top: .1rem; }

  @media (max-width: 999px) {
    [data-seite="leistung"] .leistung { grid-template-columns: 1fr; }
    [data-seite="leistung"] .leistung-seite { position: static; }
  }

/* ============================================================
   Seite leistungen (aus src/pages/leistungen/index.astro)
   ============================================================ */
[data-seite="leistungen"] .verzeichnis { padding-block: clamp(2rem, 5vw, 3.5rem); }
  [data-seite="leistungen"] .verzeichnis > ol { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--text); }
  [data-seite="leistungen"] .verzeichnis > ol > li {
    display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 3rem; gap: 1.5rem; align-items: start;
    padding-block: clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid var(--linie);
  }
  [data-seite="leistungen"] .verzeichnis-kennung {
    position: relative; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: var(--radius);
    background: var(--navy); color: var(--weiss); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .04em;
    transition: background-color .25s var(--ease);
  }
  /* Meldeleuchte wie am Leitungsschutzschalter: Zeile im Blick, Stromkreis ein */
  [data-seite="leistungen"] .verzeichnis-kennung::after {
    content: ""; position: absolute; left: 50%; bottom: .45rem; width: 1.3rem; height: .22rem; margin-left: -.65rem;
    border-radius: 2px; background: #3a4862; transition: background-color .18s var(--ease) .12s;
  }
  [data-seite="leistungen"] .verzeichnis > ol > li:hover .verzeichnis-kennung,
  [data-seite="leistungen"] .verzeichnis > ol > li:has(a:focus-visible) .verzeichnis-kennung { background: var(--blau); }
  [data-seite="leistungen"] .verzeichnis > ol > li:hover .verzeichnis-kennung::after,
  [data-seite="leistungen"] .verzeichnis > ol > li:has(a:focus-visible) .verzeichnis-kennung::after { background: var(--blau-hell); }
  [data-seite="leistungen"] .verzeichnis h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); margin-bottom: .4rem; }
  [data-seite="leistungen"] .verzeichnis h2 a { color: var(--text); text-decoration: none; }
  [data-seite="leistungen"] .verzeichnis h2 a:hover { color: var(--blau); text-decoration: underline; }
  [data-seite="leistungen"] .verzeichnis-text > p { color: var(--text-2); max-width: 62ch; }
  [data-seite="leistungen"] .verzeichnis-text ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; font-size: .95rem; }
  [data-seite="leistungen"] .verzeichnis-text li { display: flex; gap: .45rem; align-items: center; }
  [data-seite="leistungen"] .verzeichnis-text svg { width: 1.05rem; height: 1.05rem; color: var(--navy); flex: none; }
  [data-seite="leistungen"] .verzeichnis-pfeil { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--linie); color: var(--text); }
  [data-seite="leistungen"] .verzeichnis-pfeil:hover { border-color: var(--blau); color: var(--blau); }
  [data-seite="leistungen"] .verzeichnis-pfeil svg { width: 1.2rem; height: 1.2rem; }
  [data-seite="leistungen"] .solar-hinweis { padding-block: 0 clamp(3rem, 6vw, 4.5rem); }
  [data-seite="leistungen"] .solar-hinweis h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); }
  [data-seite="leistungen"] .solar-hinweis p { color: var(--text-2); max-width: 60ch; }
  @media (max-width: 640px) {
    [data-seite="leistungen"] .verzeichnis > ol > li { grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; }
    [data-seite="leistungen"] .verzeichnis-kennung { width: 2.75rem; height: 2.75rem; font-size: .9rem; }
    [data-seite="leistungen"] .verzeichnis-pfeil { display: none; }
  }

/* ============================================================
   Seite projekte (aus src/pages/projekte/index.astro)
   ============================================================ */
[data-seite="projekte"] .projekte { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
  [data-seite="projekte"] .projekte > ul { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
  [data-seite="projekte"] .projekte article { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
  [data-seite="projekte"] .projekte article > picture img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-l); }
  [data-seite="projekte"] .projekt-meta { font-size: .9rem; font-weight: 600; color: var(--text-2); margin: -.2rem 0 1rem; }
  [data-seite="projekte"] .projekte h2 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); }
  [data-seite="projekte"] .projekte dl { display: grid; grid-template-columns: 6rem 1fr; gap: .5rem 1rem; margin: 0 0 1rem; }
  [data-seite="projekte"] .projekte dt { font-weight: 700; }
  [data-seite="projekte"] .projekte dd { margin: 0; color: var(--text-2); }
  @media (max-width: 899px) { [data-seite="projekte"] .projekte article { grid-template-columns: 1fr; } }

/* ============================================================
   Seite artikel (aus src/pages/ratgeber/[slug].astro)
   ============================================================ */
[data-seite="artikel"] .artikel-meta { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; margin: 1.25rem 0 0; font-size: .92rem; color: var(--text-2); }
  [data-seite="artikel"] .artikel { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: clamp(2rem, 5vw, 4.5rem); padding-block: clamp(2.5rem, 6vw, 4rem); }
  [data-seite="artikel"] .artikel-text h2 { scroll-margin-top: 6.5rem; }
  [data-seite="artikel"] .artikel-text > *:first-child { margin-top: 0; }
  [data-seite="artikel"] .quellen { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); font-size: .95rem; }
  [data-seite="artikel"] .quellen h2 { font-size: 1.15rem; margin-top: 0; }
  [data-seite="artikel"] .quellen a { overflow-wrap: anywhere; }
  [data-seite="artikel"] .artikel-seite { display: grid; gap: 1.75rem; align-content: start; position: sticky; top: 6rem; align-self: start; }
  [data-seite="artikel"] .artikel-seite h2 { font-size: 1.05rem; margin-bottom: .75rem; }
  [data-seite="artikel"] .artikel-inhalt ol { padding-left: 1.1rem; margin: 0; display: grid; gap: .45rem; font-size: .95rem; }
  [data-seite="artikel"] .artikel-leistung { background: var(--flaeche); border-radius: var(--radius-l); padding: 1.4rem; display: grid; gap: .6rem; justify-items: start; }
  [data-seite="artikel"] .artikel-leistung h2 { margin: 0; }
  [data-seite="artikel"] .artikel-leistung p { margin: 0; color: var(--text-2); }
  [data-seite="artikel"] .artikel-mehr { display: inline-flex; gap: .4rem; align-items: center; font-weight: 650; }
  [data-seite="artikel"] .artikel-mehr svg { width: 1.05rem; height: 1.05rem; }
  [data-seite="artikel"] .weitere { padding-bottom: clamp(3rem, 7vw, 4.5rem); }
  [data-seite="artikel"] .weitere h2 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); }
  [data-seite="artikel"] .weitere ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  [data-seite="artikel"] .weitere li { border-top: 2px solid var(--text); padding-top: 1rem; }
  [data-seite="artikel"] .weitere a { font-weight: 700; color: var(--text); }
  [data-seite="artikel"] .weitere p { color: var(--text-2); margin: .4rem 0 0; font-size: .95rem; }
  @media (max-width: 999px) {
    [data-seite="artikel"] .artikel { grid-template-columns: 1fr; }
    [data-seite="artikel"] .artikel-seite { position: static; }
    [data-seite="artikel"] .weitere ul { grid-template-columns: 1fr; }
  }

/* ============================================================
   Seite ratgeber (aus src/pages/ratgeber/index.astro)
   ============================================================ */
[data-seite="ratgeber"] .liste { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem); }
  [data-seite="ratgeber"] .liste ul { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--text); }
  [data-seite="ratgeber"] .liste li { padding-block: 1.5rem; border-bottom: 1px solid var(--linie); }
  [data-seite="ratgeber"] .liste li > .liste-meta { font-size: .88rem; margin-top: .5rem; }
  [data-seite="ratgeber"] .liste h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin-bottom: .35rem; }
  [data-seite="ratgeber"] .liste h2 a { color: var(--text); text-decoration: none; }
  [data-seite="ratgeber"] .liste h2 a:hover { color: var(--blau); text-decoration: underline; }
  [data-seite="ratgeber"] .liste li > p { margin: 0; color: var(--text-2); max-width: 70ch; }

/* ============================================================
   Seite solarrechner (aus src/pages/solarrechner/index.astro)
   ============================================================ */
[data-seite="solarrechner"] .sr { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 3.5rem); padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 6vw, 4.5rem); align-items: start; }
  [data-seite="solarrechner"] .sr-ohne-js { grid-column: 1 / -1; margin: 0; padding: .9rem 1.1rem; border-radius: var(--radius); background: var(--blau-hell); }

  /* Aufbau (27.10.2026): Die Anzeige mit Anlagenbild und Ergebnis bleibt immer im
     Blick, breit rechts mitlaufend, schmal oben klebend. Die Eingaben stehen links in
     vier Schritten mit Reitern; ohne Skript stehen alle Schritte untereinander. */
  [data-seite="solarrechner"] .sr { grid-template-areas: "schritte anzeige"; }
  [data-seite="solarrechner"] .sr-anzeige { grid-area: anzeige; display: grid; gap: 1rem; min-width: 0; position: sticky; top: calc(4.5rem + 1.25rem); }
  [data-seite="solarrechner"] .sr-schritte { grid-area: schritte; display: grid; gap: 1.25rem; min-width: 0; }
  [data-seite="solarrechner"] .sr-schritt[hidden] { display: none; }
  /* Breit: Bildhoehe richtet sich nach der Fensterhoehe, damit Bild und Ergebnis
     zusammen unter dem Kopf Platz haben */
  @media (min-width: 1051px) {
    [data-seite="solarrechner"] .sr-anlage-bild .ab { max-height: clamp(8.5rem, 100svh - 35.5rem, 338px); }
    [data-seite="solarrechner"] .sr-anzeige .sr-zaehler { padding: 1rem 1.2rem; }
    [data-seite="solarrechner"] .sr-anzeige .sr-zaehler-kopf { margin-bottom: .7rem; }
    [data-seite="solarrechner"] .sr-anzeige .sr-werte { margin-bottom: .75rem; }
    [data-seite="solarrechner"] .sr-anzeige .sr-werte div { padding: .65rem .8rem; }
    [data-seite="solarrechner"] .sr-anzeige .sr-vergleich { font-size: .8rem; line-height: 1.45; padding: .5rem .7rem; }
  }
  @media (min-width: 1051px) and (max-height: 700px) {
    [data-seite="solarrechner"] .sr-anlage-legende, [data-seite="solarrechner"] .sr-anlage h3 { display: none; }
  }

  /* Reiter als Schaltergruppe: weisse Leiste mit Haarlinie, gewaehlt in Navy */
  [data-seite="solarrechner"] .sr-reiter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; padding: .25rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--weiss); }
  [data-seite="solarrechner"] .sr-reiter[hidden] { display: none; }
  [data-seite="solarrechner"] .sr-reiter button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
    min-height: 3.6rem; padding: .45rem .35rem; border: 0; border-radius: calc(var(--radius) - 3px);
    background: transparent; color: var(--text); font: inherit; font-size: .9rem; font-weight: 650; line-height: 1.15; text-align: center; cursor: pointer;
    transition: background-color .2s var(--ease), color .2s var(--ease);
  }
  [data-seite="solarrechner"] .sr-reiter button:hover { background: var(--blau-hell); }
  [data-seite="solarrechner"] .sr-reiter button[aria-selected="true"] { background: var(--navy); color: var(--weiss); }
  [data-seite="solarrechner"] .sr-reiter button:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }
  [data-seite="solarrechner"] .sr-reiter .sr-nr { width: 1.45rem; height: 1.45rem; font-size: .75rem; background: var(--schiene); color: var(--text); }
  [data-seite="solarrechner"] .sr-reiter [aria-selected="true"] .sr-nr { background: var(--blau); color: var(--weiss); }
  [data-seite="solarrechner"] .sr-reiter-kurz { display: none; }
  /* Mit Reitern traegt der Reiter den Namen des Schritts; die Legende bleibt fuer Screenreader */
  [data-seite="solarrechner"] .sr--schritte .sr-gruppe > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  [data-seite="solarrechner"] .sr-auswertung { display: grid; gap: 1.25rem; }
  [data-seite="solarrechner"] .sr-blaettern { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
  [data-seite="solarrechner"] .sr-blaettern[hidden], [data-seite="solarrechner"] .sr-blaettern [hidden] { display: none; }
  [data-seite="solarrechner"] .sr-blaettern button:disabled { opacity: .45; cursor: not-allowed; }

  /* Eingaben */
  [data-seite="solarrechner"] .sr-eingaben { display: grid; gap: 1.25rem; }
  [data-seite="solarrechner"] .sr-gruppe { border: 1px solid var(--linie); border-radius: var(--radius-l); padding: 1.25rem 1.35rem 1.4rem; margin: 0; min-width: 0; background: var(--weiss); display: grid; gap: 1.15rem; }
  [data-seite="solarrechner"] .sr-gruppe > legend { font-weight: 800; font-size: 1.15rem; padding: 0 .4rem; margin-left: -.4rem; display: flex; align-items: center; gap: .6rem; }
  [data-seite="solarrechner"] .sr-nr { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 6px; background: var(--navy); color: var(--weiss); font-size: .85rem; font-variant-numeric: tabular-nums; }
  [data-seite="solarrechner"] .sr-feld { display: grid; gap: .4rem; min-width: 0; }
  [data-seite="solarrechner"] .sr-feld > label, [data-seite="solarrechner"] .sr-abh > label, [data-seite="solarrechner"] .sr-paar label, [data-seite="solarrechner"] .sr-unter > legend { font-weight: 650; font-size: .97rem; }
  [data-seite="solarrechner"] .sr-unter { border: 0; padding: 0; margin: 0; }
  [data-seite="solarrechner"] .sr-unter > legend { padding: 0; margin-bottom: .45rem; }
  [data-seite="solarrechner"] .sr-zahl { display: flex; align-items: center; border: 1px solid #aeb7c1; border-radius: var(--radius); background: var(--weiss); overflow: hidden; }
  [data-seite="solarrechner"] .sr-zahl:focus-within { outline: 3px solid var(--blau); outline-offset: 1px; border-color: var(--blau); }
  [data-seite="solarrechner"] .sr-zahl input { flex: 1; min-width: 0; border: 0; padding: .7rem .85rem; font-size: 1.05rem; font-weight: 650; font-variant-numeric: tabular-nums; background: transparent; outline: none; }
  [data-seite="solarrechner"] .sr-zahl span { padding: 0 .85rem; color: var(--text-2); font-size: .92rem; white-space: nowrap; }
  [data-seite="solarrechner"] .sr select, [data-seite="solarrechner"] .sr-anfrage-form input:not([type="hidden"]), [data-seite="solarrechner"] .sr-anfrage-form textarea {
    width: 100%; min-height: 3rem; padding: .65rem .8rem; border: 1px solid #aeb7c1; border-radius: var(--radius); background: var(--weiss); font-size: 1rem;
  }
  [data-seite="solarrechner"] .sr-anfrage-form textarea { font-size: .95rem; line-height: 1.5; }
  [data-seite="solarrechner"] .sr select:focus-visible, [data-seite="solarrechner"] .sr-anfrage-form input:focus-visible, [data-seite="solarrechner"] .sr-anfrage-form textarea:focus-visible { outline: 3px solid var(--blau); outline-offset: 1px; }
  [data-seite="solarrechner"] .sr-hilfe { margin: 0; font-size: .88rem; color: var(--text-2); }
  [data-seite="solarrechner"] .sr-paar { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
  [data-seite="solarrechner"] .sr-paar > div { display: grid; gap: .4rem; align-content: start; }

  [data-seite="solarrechner"] .sr-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
  [data-seite="solarrechner"] .sr-chip {
    min-height: 2.5rem; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--linie); background: var(--flaeche);
    font-size: .9rem; font-weight: 600; cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  }
  [data-seite="solarrechner"] .sr-chip:hover { border-color: var(--blau); }
  [data-seite="solarrechner"] .sr-chip[aria-pressed="true"] { background: var(--blau); border-color: var(--blau); color: var(--weiss); }

  [data-seite="solarrechner"] .sr-schalter-feld { display: grid; gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--linie); }
  [data-seite="solarrechner"] .sr-schalter { display: flex; gap: .7rem; align-items: flex-start; font-weight: 650; cursor: pointer; }
  [data-seite="solarrechner"] .sr-schalter input { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; accent-color: var(--blau); flex: none; }
  [data-seite="solarrechner"] .sr-schalter--klein { font-weight: 500; font-size: .93rem; color: var(--text-2); }
  [data-seite="solarrechner"] .sr-abh { display: grid; gap: .5rem; padding-left: 1.95rem; }
  [data-seite="solarrechner"] .sr-schalter-feld:has(input[name="wp"]:not(:checked)) [data-abh="wp"],
  [data-seite="solarrechner"] .sr-schalter-feld:has(input[name="eauto"]:not(:checked)) [data-abh="eauto"] { display: none; }

  [data-seite="solarrechner"] .sr-segment { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
  [data-seite="solarrechner"] .sr-segment label { position: relative; }
  [data-seite="solarrechner"] .sr-segment input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  [data-seite="solarrechner"] .sr-segment span {
    display: grid; place-items: center; min-height: 2.75rem; padding: .3rem .4rem; text-align: center; border-radius: var(--radius);
    border: 1px solid var(--linie); font-weight: 650; font-size: .93rem; background: var(--weiss); transition: background-color .2s var(--ease), color .2s var(--ease);
  }
  [data-seite="solarrechner"] .sr-segment input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--weiss); }
  [data-seite="solarrechner"] .sr-segment input:focus-visible + span { outline: 3px solid var(--blau); outline-offset: 2px; }
  [data-seite="solarrechner"] .sr-segment label:hover span { border-color: var(--blau); }

  [data-seite="solarrechner"] .sr-feld output { float: right; font-weight: 750; color: var(--navy); font-variant-numeric: tabular-nums; }
  [data-seite="solarrechner"] .sr-regler { width: 100%; accent-color: var(--blau); height: 2rem; }
  [data-seite="solarrechner"] .sr-skala { display: flex; justify-content: space-between; font-size: .8rem; color: var(--text-2); margin-top: -.3rem; }

  [data-seite="solarrechner"] .sr-optionen { display: grid; gap: .5rem; }
  [data-seite="solarrechner"] .sr-option { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem .9rem; border: 1px solid var(--linie); border-radius: var(--radius); cursor: pointer; font-size: .93rem; color: var(--text-2); }
  [data-seite="solarrechner"] .sr-option strong { display: block; color: var(--text); font-size: 1rem; }
  [data-seite="solarrechner"] .sr-option input { width: 1.2rem; height: 1.2rem; margin: .15rem 0 0; accent-color: var(--blau); flex: none; }
  [data-seite="solarrechner"] .sr-option:has(input:checked) { border-color: var(--blau); background: var(--blau-hell); }
  [data-seite="solarrechner"] .sr-smart:has(input:disabled) { opacity: .5; cursor: not-allowed; }

  /* Ergebnis: Anzeige wie ein Zählerdisplay im Navy-Gehäuse */
  [data-seite="solarrechner"] .sr-zaehler { background: var(--navy); color: #c9d2dc; border-radius: var(--radius-l); padding: 1.35rem 1.4rem 1.25rem; box-shadow: var(--schatten); }
  [data-seite="solarrechner"] .sr-zaehler-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
  [data-seite="solarrechner"] .sr-zaehler h2 { color: var(--weiss); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin: 0; }
  /* "Alle Werte" gibt es nur in der schmalen Anzeige */
  [data-seite="solarrechner"] .sr-mehr { display: none; }
  [data-seite="solarrechner"] .sr-werte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0 0 1rem; background: rgb(255 255 255 / .1); border-radius: var(--radius); overflow: hidden; }
  [data-seite="solarrechner"] .sr-werte div { background: #141d30; padding: .85rem .9rem; display: grid; gap: .2rem; align-content: start; }
  [data-seite="solarrechner"] .sr-werte dt { font-size: .78rem; font-weight: 600; color: #9fb0c4; }
  [data-seite="solarrechner"] .sr-werte dd { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 800; color: var(--weiss); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1.2; }
  [data-seite="solarrechner"] .sr-werte small { font-size: .85rem; font-weight: 600; color: #9fb0c4; }
  [data-seite="solarrechner"] .sr-vergleich { margin: 0; font-size: .9rem; color: #c9d2dc; border: 1px solid rgb(255 255 255 / .16); border-radius: var(--radius); padding: .7rem .85rem; }

  [data-seite="solarrechner"] .sr-karte { border: 1px solid var(--linie); border-radius: var(--radius-l); padding: 1.2rem 1.3rem; background: var(--weiss); min-width: 0; }
  [data-seite="solarrechner"] .sr-karte h3 { font-size: 1.1rem; margin-bottom: .9rem; }
  [data-seite="solarrechner"] .sr-legende { list-style: none; padding: 0; margin: 0 0 .75rem; display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .85rem; color: var(--text-2); }
  [data-seite="solarrechner"] .sr-legende li { display: flex; align-items: center; gap: .4rem; }
  [data-seite="solarrechner"] .sr-details { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem 1.5rem; margin: 1rem 0 0; font-size: .92rem; }
  [data-seite="solarrechner"] .sr-details div { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--linie); }
  [data-seite="solarrechner"] .sr-details dt { color: var(--text-2); }
  [data-seite="solarrechner"] .sr-details dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
  [data-seite="solarrechner"] .sr-tabelle { margin-top: .9rem; font-size: .9rem; }
  [data-seite="solarrechner"] .sr-tabelle summary { cursor: pointer; font-weight: 650; color: var(--blau); list-style: none; display: inline-flex; align-items: center; gap: .4rem; }
  [data-seite="solarrechner"] .sr-tabelle summary::-webkit-details-marker { display: none; }
  [data-seite="solarrechner"] .sr-tabelle summary svg { width: 1rem; height: 1rem; transition: transform .2s var(--ease); }
  [data-seite="solarrechner"] .sr-tabelle[open] summary svg { transform: rotate(90deg); }
  [data-seite="solarrechner"] .sr-tabelle > div { overflow-x: auto; margin-top: .6rem; }
  [data-seite="solarrechner"] .sr-hinweis { display: flex; gap: .6rem; align-items: flex-start; margin: 0; font-size: .9rem; color: var(--text-2); }
  [data-seite="solarrechner"] .sr-hinweis svg { width: 1.1rem; height: 1.1rem; flex: none; margin-top: .2rem; color: var(--blau); }

  /* Anfrage */
  [data-seite="solarrechner"] .sr-anfrage { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
  [data-seite="solarrechner"] .sr-anfrage h2 { margin-bottom: .6rem; }
  [data-seite="solarrechner"] .sr-anfrage > div > p { color: var(--text-2); }
  [data-seite="solarrechner"] .sr-anfrage-form { display: grid; gap: 1rem; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-l); padding: clamp(1.1rem, 3vw, 1.75rem); }
  [data-seite="solarrechner"] .sr-anfrage-form .sr-feld label { font-weight: 650; }
  [data-seite="solarrechner"] .sr-falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  [data-seite="solarrechner"] .sr-anfrage-form button { justify-self: start; }

  /* Annahmen */
  [data-seite="solarrechner"] .sr-annahmen-rahmen { overflow-x: auto; }
  [data-seite="solarrechner"] .sr-annahmen { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 40rem; }
  [data-seite="solarrechner"] .sr-annahmen th, [data-seite="solarrechner"] .sr-annahmen td { text-align: left; vertical-align: top; padding: .75rem .8rem; border-bottom: 1px solid var(--linie); }
  [data-seite="solarrechner"] .sr-annahmen thead th { background: var(--flaeche); font-size: .85rem; }
  [data-seite="solarrechner"] .sr-annahmen tbody th { width: 13rem; }
  [data-seite="solarrechner"] .sr-annahmen td:last-child { width: 15rem; }
  [data-seite="solarrechner"] .sr-nicht { margin-top: 1.25rem; color: var(--text-2); font-size: .93rem; max-width: 80ch; }

  /* Fragen */
  [data-seite="solarrechner"] .sr-fragen { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
  [data-seite="solarrechner"] .sr-fragen details { border-bottom: 1px solid var(--linie); }
  [data-seite="solarrechner"] .sr-fragen details:first-child { border-top: 1px solid var(--linie); }
  [data-seite="solarrechner"] .sr-fragen summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; }
  [data-seite="solarrechner"] .sr-fragen summary::-webkit-details-marker { display: none; }
  [data-seite="solarrechner"] .sr-fragen summary svg { width: 1.2rem; height: 1.2rem; flex: none; color: var(--navy); transition: transform .2s var(--ease); }
  [data-seite="solarrechner"] .sr-fragen details[open] summary svg { transform: rotate(90deg); }
  [data-seite="solarrechner"] .sr-fragen summary h3 { margin: 0; font-size: 1.05rem; letter-spacing: 0; }
  [data-seite="solarrechner"] .sr-fragen details p { margin: 0 0 1.1rem; color: var(--text-2); max-width: 70ch; }

  @media (max-width: 1050px) {
    [data-seite="solarrechner"] .sr { grid-template-columns: minmax(0, 1fr); grid-template-areas: "anzeige" "schritte"; }
    [data-seite="solarrechner"] .sr-anfrage, [data-seite="solarrechner"] .sr-fragen { grid-template-columns: 1fr; }

    /* Schmale Anzeige: klebt unter dem Kopf, Bild links, die drei wichtigsten Werte
       rechts; liegt ueber der Seite und traegt deshalb den Leisten-Schatten */
    [data-seite="solarrechner"] .sr-anzeige {
      top: calc(4.5rem + 1px); z-index: 20;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: .6rem;
      margin-inline: calc(-1 * var(--rand)); padding: .55rem var(--rand);
      background: var(--weiss); border-bottom: 1px solid var(--linie);
      box-shadow: 0 8px 24px -18px rgb(13 20 35 / .45);
    }
    [data-seite="solarrechner"] .sr-anlage { padding: 0; border: 0; background: none; }
    [data-seite="solarrechner"] .sr-anlage h3,
    [data-seite="solarrechner"] .sr-zaehler h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    [data-seite="solarrechner"] .sr-anlage-text, [data-seite="solarrechner"] .sr-anlage-legende { display: none; }
    [data-seite="solarrechner"] .sr-anlage-bild { margin: 0; }
    [data-seite="solarrechner"] .sr-anlage-bild .ab { max-height: 30svh; }
    [data-seite="solarrechner"] .sr-zaehler { padding: .5rem .7rem .45rem; border-radius: var(--radius); box-shadow: none; }
    [data-seite="solarrechner"] .sr-zaehler-kopf { order: 2; justify-content: flex-end; margin: .25rem 0 0; }
    [data-seite="solarrechner"] .sr-zaehler { display: flex; flex-direction: column; }
    [data-seite="solarrechner"] .sr-mehr {
      display: inline-flex; padding: .2rem 0; border: 0; background: none; cursor: pointer;
      color: var(--blau-licht); font: inherit; font-size: .78rem; font-weight: 650; text-decoration: underline; text-underline-offset: 3px;
    }
    [data-seite="solarrechner"] .sr-mehr[hidden] { display: none; }
    [data-seite="solarrechner"] .sr-mehr:focus-visible { outline: 3px solid var(--blau-licht); outline-offset: 2px; }
    [data-seite="solarrechner"] .sr-werte { grid-template-columns: 1fr; margin: 0; background: none; gap: 0; }
    [data-seite="solarrechner"] .sr-werte div { gap: 0; padding: .22rem 0; background: none; border-bottom: 1px solid rgb(255 255 255 / .1); }
    [data-seite="solarrechner"] .sr-werte div:nth-child(3) { border-bottom: 0; }
    [data-seite="solarrechner"] .sr-werte dt { font-size: .7rem; line-height: 1.15; }
    [data-seite="solarrechner"] .sr-werte dd { font-size: 1rem; line-height: 1.2; white-space: nowrap; }
    [data-seite="solarrechner"] .sr-werte small { font-size: .75rem; }
    [data-seite="solarrechner"] .sr-werte div:nth-child(n+4), [data-seite="solarrechner"] .sr-vergleich { display: none; }

    /* Aufgeklappt: alle sechs Werte in zwei Spalten unter dem Bild, dazu der Vergleich */
    [data-seite="solarrechner"] .sr-anzeige.ist-offen .sr-anlage,
    [data-seite="solarrechner"] .sr-anzeige.ist-offen .sr-zaehler { grid-column: 1 / -1; }
    [data-seite="solarrechner"] .sr-anzeige.ist-offen .sr-anlage-bild .ab { max-height: 14svh; }
    [data-seite="solarrechner"] .ist-offen .sr-werte { grid-template-columns: 1fr 1fr; column-gap: 1rem; }
    [data-seite="solarrechner"] .ist-offen .sr-werte div:nth-child(n+4) { display: grid; }
    [data-seite="solarrechner"] .ist-offen .sr-werte div:nth-child(3) { border-bottom: 1px solid rgb(255 255 255 / .1); }
    [data-seite="solarrechner"] .ist-offen .sr-vergleich { display: block; margin-top: .45rem; font-size: .8rem; padding: .45rem .6rem; }

    [data-seite="solarrechner"] .sr-reiter-lang { display: none; }
    [data-seite="solarrechner"] .sr-reiter-kurz { display: inline; }
  }
  @media (max-width: 1050px) and (min-width: 561px) {
    [data-seite="solarrechner"] .sr-reiter-lang { display: inline; }
    [data-seite="solarrechner"] .sr-reiter-kurz { display: none; }
  }
  @media (max-width: 560px) {
    [data-seite="solarrechner"] .sr-paar, [data-seite="solarrechner"] .sr-details { grid-template-columns: 1fr; }
    [data-seite="solarrechner"] .ist-offen .sr-werte { grid-template-columns: 1fr 1fr; }
    [data-seite="solarrechner"] .sr-segment { grid-template-columns: repeat(2, 1fr); }
    [data-seite="solarrechner"] .sr-gruppe { padding-inline: 1rem; }
    [data-seite="solarrechner"] .sr-reiter button { min-height: 3.3rem; font-size: .76rem; padding-inline: .15rem; }
  }

/* ============================================================
   Bauteil aus src/pages/solarrechner/index.astro (global)
   ============================================================ */
/* Anlagenbild: Haus in Schraegansicht, folgt den Eingaben */
  .sr-anlage h3 { margin-bottom: .5rem; }
  .sr-anlage-bild { margin: 0 -.3rem; }
  .ab { display: block; width: 100%; height: auto; }
  .ab-boden { stroke: var(--text); stroke-width: 2; }
  .ab-sonne line { stroke: var(--blau); stroke-width: 2.5; stroke-linecap: round; }
  .ab-sonne circle { fill: var(--blau-hell); stroke: var(--blau); stroke-width: 2.5; }
  .ab-strahl { fill: none; stroke: var(--blau); stroke-width: 1.25; stroke-dasharray: 3 7; opacity: .45; animation: ab-strahl 1.6s linear infinite; }
  @keyframes ab-strahl { to { stroke-dashoffset: -10; } }
  .ab-kompass circle { fill: var(--weiss); stroke: var(--linie); stroke-width: 1.5; }
  .ab-kompass text { font-size: 10.5px; font-weight: 800; fill: var(--text-2); text-anchor: middle; }
  .ab-nadel path { fill: var(--blau); }
  .ab-nadel line { stroke: var(--text-2); stroke-width: 1.5; }
  .ab-nadel--west { display: none; }
  .ab--ow .ab-nadel--west { display: inline; }
  .ab-seite { fill: var(--flaeche); stroke: var(--text); stroke-width: 2; stroke-linejoin: round; }
  .ab-dach { fill: var(--schiene); stroke: var(--text); stroke-width: 2; stroke-linejoin: round; }
  .ab-first { stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; }
  .ab-giebel { fill: var(--weiss); stroke: var(--text); stroke-width: 2; stroke-linejoin: round; }
  .ab-modul {
    fill: var(--navy-2); stroke: var(--navy); stroke-width: .6; opacity: 0;
    transition: opacity .25s ease;
  }
  .ab-modul--an { opacity: 1; }
  .ab-winkel { fill: none; stroke: var(--blau); stroke-width: 1.5; }
  .ab-winkel-text { font-size: 11px; font-weight: 800; fill: var(--blau-tief); font-variant-numeric: tabular-nums; }
  .ab-geraet { fill: var(--weiss); stroke: var(--text); stroke-width: 1.5; }
  .ab-symbol { fill: none; stroke: var(--navy); stroke-width: 1.25; stroke-linecap: round; }
  .ab-verbraucher { fill: var(--blau-hell); stroke: var(--navy); stroke-width: 1.5; }
  .ab-tuer { fill: var(--flaeche); stroke: var(--text); stroke-width: 1.5; }
  .ab-ladung { fill: var(--blau); }
  .ab-bahn { fill: none; stroke: var(--linie); stroke-linecap: round; stroke-linejoin: round; transition: opacity .3s ease; }
  .ab-fluss {
    fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 9;
    animation: ab-fliessen .9s linear infinite; transition: opacity .3s ease;
  }
  @keyframes ab-fliessen { from { stroke-dashoffset: 10; } to { stroke-dashoffset: 0; } }
  .ab-fluss--solar { stroke: var(--blau); }
  .ab-fluss--netz, .ab-fluss--mix, .ab-fluss--auto { stroke: var(--navy-2); }
  .ab--ueberschuss .ab-fluss--auto { stroke: var(--blau); }
  .ab-mast { fill: none; stroke: var(--text); stroke-width: 1.75; stroke-linejoin: round; }
  .ab-luefter-ring { fill: var(--flaeche); stroke: var(--text); stroke-width: 1.25; }
  .ab-luefter { animation: ab-drehen 1.1s linear infinite; transform-box: fill-box; transform-origin: center; }
  .ab-luefter path { stroke: var(--navy); stroke-width: 2.5; stroke-linecap: round; }
  @keyframes ab-drehen { to { transform: rotate(360deg); } }
  .ab-gitter { stroke: #8f99a4; stroke-width: 1.25; }
  .ab-wagen { fill: var(--weiss); stroke: var(--text); stroke-width: 1.75; stroke-linejoin: round; }
  .ab-rad { fill: var(--navy-2); }
  .ab-name { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; fill: var(--text-2); text-anchor: middle; transition: opacity .3s ease; }
  /* Speicher, Waermepumpe und E-Auto erscheinen nur, wenn gewaehlt */
  .ab-speicher, .ab-wp, .ab-auto { opacity: 0; transition: opacity .35s ease, translate .45s cubic-bezier(.16, 1, .3, 1); translate: 0 8px; }
  .ab--speicher .ab-speicher, .ab--wp .ab-wp, .ab--auto .ab-auto { opacity: 1; translate: 0 0; }
  .ab-name--speicher, .ab-name--wp, .ab-name--auto { opacity: 0; }
  .ab--speicher .ab-name--speicher, .ab--wp .ab-name--wp, .ab--auto .ab-name--auto { opacity: 1; }
  .sr-anlage-text { margin: .5rem 0 .35rem; font-weight: 650; font-variant-numeric: tabular-nums; }
  .sr-anlage-legende { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; font-size: .85rem; color: var(--text-2); }
  .sr-anlage-legende li { display: inline-flex; align-items: center; gap: .45rem; }
  .sr-anlage-muster { width: 1.4rem; height: 3px; border-radius: 2px; }
  .sr-anlage-muster--solar { background: var(--blau); }
  .sr-anlage-muster--netz { background: var(--navy-2); }
  @media (prefers-reduced-motion: reduce) {
    .ab-fluss, .ab-strahl, .ab-luefter { animation: none; }
  }
  /* Handy: Bild wird stark verkleinert, Beschriftungen im Bild groesser */
  @media (max-width: 560px) {
    .sr-anlage-bild { margin: 0 -1.1rem; }
    .ab-name { font-size: 16px; letter-spacing: .04em; }
    .ab-kompass text { font-size: 15px; }
    .ab-winkel-text { font-size: 16px; }
  }
  /* Diagrammfarben Solarrechner (Inhalte werden per Skript ersetzt) */
  .sg-direkt { background: var(--blau); fill: var(--blau); }
  .sg-speicher { background: var(--blau-licht); fill: var(--blau-licht); }
  .sg-einspeisung { background: #b9c3cd; fill: #b9c3cd; }
  .sg-netz { background: var(--navy-2); fill: var(--navy-2); }
  .sg-verlust { background: repeating-linear-gradient(135deg, #b9c3cd 0 3px, #fff 3px 6px); }
  .sg-farbe { display: inline-block; width: .85rem; height: .85rem; border-radius: 3px; flex: none; }

  .sg-monate { position: relative; padding-left: 2.6rem; }
  .sg-feld { position: relative; height: 13rem; border-bottom: 1px solid var(--text-2); }
  .sg-linie { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--linie); }
  .sg-linie > span { position: absolute; right: calc(100% + .4rem); top: -.55rem; font-size: .72rem; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .sg-spalten { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; }
  .sg-spalte { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
  .sg-paar { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; }
  .sg-balken { width: min(42%, 1rem); display: flex; flex-direction: column-reverse; border-radius: 2px 2px 0 0; overflow: hidden; min-height: 1px; }
  .sg-balken > span { display: block; flex-basis: 0; min-height: 0; }
  .sg-balken--verbrauch { outline: 1px solid rgb(13 20 35 / .25); outline-offset: -1px; }
  .sg-monat { position: absolute; top: calc(100% + .3rem); left: 0; right: 0; text-align: center; font-size: .72rem; color: var(--text-2); }
  .sg-kurz { display: none; }
  .sg-hinweis { margin: 1.9rem 0 0; font-size: .82rem; color: var(--text-2); }
  @media (max-width: 560px) { .sg-lang { display: none; } .sg-kurz { display: inline; } .sg-monate { padding-left: 2.3rem; } }

  .sg-jahr + .sg-jahr { margin-top: 1.2rem; }
  .sg-jahr-titel { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .45rem; font-weight: 700; font-size: .95rem; }
  .sg-jahr-titel span { font-variant-numeric: tabular-nums; color: var(--text-2); font-weight: 600; }
  .sg-jahr-balken { display: flex; height: 1.4rem; border-radius: 4px; overflow: hidden; background: var(--flaeche); }
  .sg-jahr-balken > span { display: block; height: 100%; }
  .sg-jahr ul { list-style: none; padding: 0; margin: .55rem 0 0; display: grid; gap: .2rem; font-size: .88rem; color: var(--text-2); }
  .sg-jahr li { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
  .sg-jahr strong { color: var(--text); font-variant-numeric: tabular-nums; }

  .sg-wirtschaft { width: 100%; height: auto; display: block; }
  .sg-raster { stroke: var(--linie); stroke-width: 1; stroke-dasharray: 3 4; }
  .sg-null { stroke: var(--text-2); stroke-dasharray: none; }
  .sg-achsentext { font-size: 14px; fill: var(--text-2); font-variant-numeric: tabular-nums; }
  .sg-achsentitel { font-size: 13px; }
  .sg-flaeche { fill: var(--blau); opacity: .1; }
  .sg-kurve { fill: none; stroke: var(--blau); stroke-width: 3; stroke-linejoin: round; }
  .sg-marke { stroke: var(--navy); stroke-width: 1.5; stroke-dasharray: 4 4; }
  .sg-marken-text { font-size: 14px; font-weight: 700; fill: var(--navy); }
  @media (max-width: 560px) { .sg-achsentext, .sg-marken-text { font-size: 21px; } }

  .sg-tabelle { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .85rem; }
  .sg-tabelle caption { text-align: left; font-weight: 650; margin-bottom: .4rem; }
  .sg-tabelle th, .sg-tabelle td { padding: .35rem .5rem; border-bottom: 1px solid var(--linie); text-align: right; white-space: nowrap; }
  .sg-tabelle th[scope="row"], .sg-tabelle thead th:first-child { text-align: left; }
  .sg-tabelle thead th { background: var(--flaeche); font-weight: 650; }

/* ============================================================
   Seite ueber-uns (aus src/pages/ueber-uns/index.astro)
   ============================================================ */
[data-seite="ueber-uns"] .ueber { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); padding-block: clamp(2.5rem, 6vw, 4.5rem); align-items: start; }
  [data-seite="ueber-uns"] .ueber-foto { margin: 0; }
  [data-seite="ueber-uns"] .ueber-foto img { width: 100%; height: auto; border-radius: var(--radius-l); }
  [data-seite="ueber-uns"] .ueber-foto figcaption { font-size: .9rem; color: var(--text-2); margin-top: .5rem; }
  [data-seite="ueber-uns"] .ueber-text h2:first-child { margin-top: 0; }
  [data-seite="ueber-uns"] .fakten-raster { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); }
  [data-seite="ueber-uns"] .fakten-raster h2 { margin-bottom: 1.25rem; }
  [data-seite="ueber-uns"] .fakten { margin: 0 0 1.5rem; display: grid; border-top: 2px solid var(--text); }
  [data-seite="ueber-uns"] .fakten div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding-block: .65rem; border-bottom: 1px solid var(--linie); }
  [data-seite="ueber-uns"] .fakten dt { font-weight: 700; }
  [data-seite="ueber-uns"] .fakten dd { margin: 0; color: var(--text-2); }
  @media (max-width: 899px) { [data-seite="ueber-uns"] .ueber, [data-seite="ueber-uns"] .fakten-raster { grid-template-columns: 1fr; } }
  @media (max-width: 480px) { [data-seite="ueber-uns"] .fakten div { grid-template-columns: 1fr; gap: .1rem; } }