/* ==========================================================================
   Formicas GmbH, Dresden
   Dunkles Design. Tokens und Layout gelten projektweit, nie pro Seite aendern.
   ========================================================================== */

/* --- Schriften, lokal eingebunden (kein CDN, DSGVO) --------------------- */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  /* Datei ist auf die genutzten Achsen beschraenkt (werkzeuge/schrift-subset.py) */
  font-weight: 600 700;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url('/assets/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  /* Datei ist auf die genutzten Achsen beschraenkt (werkzeuge/schrift-subset.py) */
  font-weight: 600 700;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url('/assets/fonts/archivo-latin-ext.woff2') format('woff2');
  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-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/sourcesans3-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/sourcesans3-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304-0305, U+0308, U+0329, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* --- Tokens ------------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* Grundfarben: die Markenfarbe bis ins Schwarz durchgezogen */
  --nacht: #000000;
  --nacht-2: color-mix(in oklch, #0e4a63 16%, #000000);
  --nacht-3: color-mix(in oklch, #0e4a63 28%, #000000);
  --linie: color-mix(in oklch, #0e4a63 44%, #000000);
  --linie-hell: color-mix(in oklch, #0e4a63 66%, #000000);

  /* Marke: #0e4a63 ist die CI-Farbe. Flaechen tragen sie unveraendert,
     Schrift auf dunklem Grund braucht die daraus abgeleiteten hellen Stufen. */
  --marke: #0e4a63;
  --marke-flaeche: var(--marke);
  --marke-hover: #14607f;
  --licht: #4ea3c8;
  --licht-hell: #86c9e4;

  /* Text */
  --text: #eef4f6;
  --text-leise: #9db6c0;
  --auf-licht: #04191f;

  /* semantisch */
  --grund: var(--nacht);
  --akzent: var(--licht);

  /* Raster und Abstaende */
  --breite: 1320px;
  --rand: clamp(1.25rem, 5vw, 3.5rem);
  --luecke: 1.5rem;
  --sektion: clamp(3.5rem, 8vw, 7rem);
  --radius: 4px;

  /* Typo-Skala */
  --t-eyebrow: 0.75rem;
  --t-klein: 0.9375rem;
  --t-text: 1.0625rem;
  --t-gross: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
  --t-h3: clamp(1.125rem, 0.8vw + 0.95rem, 1.4375rem);
  --t-h2: clamp(1.7rem, 2.4vw + 0.9rem, 3rem);
  --t-h1: clamp(2.5rem, 4.8vw + 0.7rem, 5.05rem);
}

/* --- Grundlagen --------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: 'Source Sans 3', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: var(--t-text);
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  text-underline-offset: 0.2em;
}

h1,
h2,
h3,
h4 {
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  margin: 0;
  text-wrap: balance;
}

/* Grosse Headlines: Versalien, eng gesetzt */
h1,
h2 {
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: -0.015em;
  /* Lange Versalienwoerter koennen nicht umbrechen und laufen sonst still aus
     ihrer Spalte heraus. Getrennt wird nur, wenn die Zeile es verlangt. */
  hyphens: auto;
  /* Getrennt wird nur an einer Wortfuge, die beidseits genug Buchstaben laesst,
     sonst steht in einer Versalienzeile ein Rest wie SEND. */
  hyphenate-limit-chars: 12 6 9;
  overflow-wrap: break-word;
}

/* In der H1 der Unterseiten trennt nur die weiche Trennstelle (­) an der Wortfuge:
   Mit automatischer Trennung stand dort GEWERBEBE-LEUCHTUNG, weil der Browser die
   letzte passende Stelle nimmt. Lange Woerter in neuen H1 bekommen deshalb ein ­. */
.seitenhero h1 {
  hyphens: manual;
}

h1 {
  font-size: var(--t-h1);
}

h2 {
  font-size: var(--t-h2);
}

h3 {
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}


/* Der Punkt am Ende einer Headline und einzelne Woerter im Akzent */
.punkt,
.hervor {
  color: var(--akzent);
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--licht-hell);
}

a:hover {
  color: var(--licht);
}

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

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

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Bausteine ---------------------------------------------------------- */

.inhalt {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.lesetext {
  max-width: 62ch;
}

.leise {
  color: var(--text-leise);
}

.sprungmarke {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--marke);
  color: #ffffff;
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  text-decoration: none;
}

.sprungmarke:focus {
  left: 0;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--akzent);
  margin: 0 0 1rem;
}

.eyebrow::after {
  content: '';
  width: 2rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 50px;
  padding: 0.8rem 1.6rem;
  border: 1px solid var(--marke);
  border-radius: var(--radius);
  background: var(--marke);
  color: #ffffff;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: var(--t-klein);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.knopf:hover {
  background: var(--marke-hover);
  border-color: var(--marke-hover);
  color: #ffffff;
}

.knopf--leer {
  background: transparent;
  border-color: var(--linie-hell);
  color: var(--text);
}

.knopf--leer:hover {
  background: var(--nacht-2);
  border-color: var(--licht);
  color: var(--licht);
}

.pfeil-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: var(--t-klein);
  font-weight: 600;
  color: var(--licht-hell);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.pfeil-link::after {
  content: '\2192';
  transition: transform 0.2s ease;
}

.pfeil-link:hover::after {
  transform: translateX(3px);
}

.nur-fuer-screenreader {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.mt-1 {
  margin-top: 1rem;
}
.mt-2 {
  margin-top: 1.5rem;
}
.mt-3 {
  margin-top: 2rem;
}
/* Fuer grosse Bloecke wie Zeichnungen, die Luft zum folgenden Text brauchen */
.mt-4 {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* Die Lichtkante: das markante Element, eine Lichtvoute als Linie */
.lichtkante {
  position: relative;
  isolation: isolate;
}

.lichtkante::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    var(--licht) 15%,
    var(--licht) 85%,
    transparent
  );
  z-index: 2;
}

/* Eine Sektion, die sich flaechig vom schwarzen Grund abhebt */
.sektion--flaeche {
  background: color-mix(in oklch, var(--marke) 38%, var(--nacht));
  border-top: 1px solid color-mix(in oklch, var(--licht) 22%, transparent);
  border-bottom: 1px solid color-mix(in oklch, var(--licht) 22%, transparent);
}

/* --- Kopfzeile ---------------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklch, var(--nacht) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}

.kopf__reihe {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 88px;
}

.kopf__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin-right: auto;
}

.kopf__logo img {
  width: auto;
  height: 40px;
}

@media (max-width: 30rem) {
  .kopf__logo img {
    height: 34px;
  }
}

.kopf__reihe > .knopf {
  flex: 0 0 auto;
  white-space: nowrap;
  display: none;
}

.nav {
  display: none;
  min-width: 0;
}

.nav__liste {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.nav__punkt {
  position: relative;
}

.nav__link {
  display: inline-block;
  padding: 0.6rem 0.45rem;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

/* Die drei Bereiche haben keine eigene Seite mehr, ihr Punkt oeffnet nur das
   Untermenue. Als <button> bleibt er mit der Tastatur erreichbar, ohne Ziel
   vorzutaeuschen. */
.nav__link--gruppe {
  margin: 0;
  background: none;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  cursor: default;
  font: inherit;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nav__link:hover,
.nav__punkt:focus-within > .nav__link {
  color: var(--licht);
  border-bottom-color: var(--licht);
}

/* Punkte mit Untermenue tragen einen kleinen Winkel, sonst findet man die Unterseiten nicht */
.nav__punkt:has(> .nav__unter) > .nav__link::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  opacity: 0.7;
}

/* Auf einer Unterseite ist der Hauptpunkt markiert, zu dem sie gehoert */
.nav__punkt:has([aria-current]) > .nav__link {
  color: var(--licht);
}

.nav__unter [aria-current] {
  color: var(--licht);
}

.nav__unter {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 17rem;
  padding: 0.5rem;
  background: var(--nacht-2);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: 0 20px 40px -24px rgb(0 0 0 / 0.9);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

/* Untermenues am rechten Rand nach innen klappen, sonst scrollt die Seite */
.nav__punkt:last-child > .nav__unter,
.nav__punkt:nth-last-child(2) > .nav__unter {
  left: auto;
  right: 0;
}

.nav__punkt:hover > .nav__unter,
.nav__punkt:focus-within > .nav__unter {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__unter a {
  display: block;
  min-height: 40px;
  padding: 0.55rem 0.75rem;
  font-size: var(--t-klein);
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius);
}

.nav__unter a:hover {
  background: var(--nacht-3);
  color: var(--licht);
}

/* Mobiles Menue ueber die Popover-API, ohne JavaScript */
.menue-knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 0.85rem;
  background: transparent;
  border: 1px solid var(--linie-hell);
  border-radius: var(--radius);
  color: var(--text);
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: var(--t-klein);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.menue-knopf svg {
  width: 18px;
  height: 18px;
}

.menue {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--nacht);
  color: var(--text);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menue:not(:popover-open) {
  display: none;
}

.menue__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--luecke);
  min-height: 76px;
  border-bottom: 1px solid var(--linie);
}

.menue__heim {
  display: flex;
  align-items: center;
}

.menue__logo {
  width: auto;
  height: 34px;
}

.menue__schliessen {
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 0.85rem;
  background: transparent;
  border: 1px solid var(--linie-hell);
  border-radius: var(--radius);
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: var(--t-klein);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.menue__inhalt {
  padding-block: 1.5rem 3rem;
}

.menue__gruppe {
  border-bottom: 1px solid var(--linie);
}

.menue__gruppe > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: 1.0625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.menue__gruppe > summary::-webkit-details-marker {
  display: none;
}

.menue__gruppe > summary::after {
  content: '+';
  font-size: 1.25rem;
  color: var(--licht);
}

.menue__gruppe[open] > summary::after {
  content: '\2013';
}

.menue__gruppe ul {
  padding: 0 0 1rem 0;
}

.menue__gruppe ul a {
  display: block;
  min-height: 44px;
  padding: 0.7rem 0;
  color: var(--text-leise);
  text-decoration: none;
}

.menue__gruppe ul a:hover {
  color: var(--licht);
}

.menue__einzel {
  display: block;
  padding: 1rem 0;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: 1.0625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--linie);
}

.menue__einzel:hover {
  color: var(--licht);
}

.menue__fuss {
  display: grid;
  gap: 0.75rem;
  padding-top: 2rem;
}

/* --- Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--nacht);
}

.hero__raster {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 4.5rem);
}

.hero__plan {
  position: relative;
  min-width: 0;
}

.hero__plan svg {
  display: block;
  width: 100%;
  max-height: 52vh;
  margin-inline: auto;
  overflow: visible;
}

.hero__text {
  position: relative;
  z-index: 1;
}

/* Im Hero steht die Wortmarke, darunter der Claim */
.hero__marke {
  display: grid;
  gap: 1.5rem;
  justify-items: start;
}

.hero__marke img {
  width: auto;
  height: clamp(30px, 4.4vw, 46px);
}

.hero__claim {
  display: block;
  margin: 0;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: clamp(1.25rem, 1.4vw + 0.85rem, 1.9rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--text);
  max-width: 30ch;
}

.hero__vorspann {
  margin-top: 1.25rem;
  font-size: var(--t-gross);
  color: var(--text-leise);
  max-width: 50ch;
}

.hero__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* --- Sektionen ---------------------------------------------------------- */

.sektion {
  padding-block: var(--sektion);
}

.sektion--linie {
  border-top: 1px solid var(--linie);
}

.sektion__kopf {
  display: grid;
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.sektion__kopf h2 {
  max-width: 18ch;
}

.sektion__kopf-neben {
  justify-self: end;
}

.sektion__kopf-neben p {
  color: var(--text-leise);
  max-width: 46ch;
  margin-left: auto;
  text-align: right;
}

/* Leistungskacheln mit Zeichen */
.kacheln {
  display: grid;
  gap: 1rem;
}

.kachel {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--nacht-2);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.kachel:hover {
  border-color: var(--licht);
  background: var(--nacht-3);
  color: var(--text);
}

.kachel svg {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  color: var(--licht);
}

.kachel__name {
  display: block;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: 1.0625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

.kachel__satz {
  margin: 0.4rem 0 0;
  font-size: var(--t-klein);
  color: var(--text-leise);
}

/* Projektraster */
.werke {
  display: grid;
  gap: 1rem;
}

.werk {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--nacht-2);
  text-decoration: none;
  color: var(--text);
}

.werk img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: brightness(0.92);
  transition: transform 0.5s ease, filter 0.3s ease;
}

.werk:hover img {
  transform: scale(1.04);
  filter: brightness(1);
}

.werk__text {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 1.25rem;
  background: linear-gradient(
    to top,
    color-mix(in oklch, var(--nacht) 96%, transparent) 12%,
    color-mix(in oklch, var(--nacht) 72%, transparent) 55%,
    transparent 100%
  );
  padding-top: 3.5rem;
}

.werk__name {
  display: block;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.werk__meta {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--licht);
}

/* Drei Spalten Text */
.spalten {
  display: grid;
  gap: 2rem;
}

.spalte h3 {
  padding-top: 1.25rem;
  border-top: 2px solid var(--licht);
  margin-bottom: 0.6rem;
}

.spalte p {
  font-size: var(--t-klein);
  color: var(--text-leise);
}

/* Ablauf */
.ablauf {
  display: grid;
  gap: 1rem;
}

.ablauf__schritt {
  padding: 1.5rem;
  background: var(--nacht-2);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}

.ablauf__nummer {
  display: block;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--licht);
  line-height: 1;
  margin-bottom: 0.75rem;
}

.ablauf__schritt h3 {
  font-size: 1.0625rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.4rem;
}

.ablauf__schritt p {
  font-size: var(--t-klein);
  color: var(--text-leise);
  margin: 0;
}

/* Ueber uns mit Portrait und Fakten */
.ueber {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: center;
}

.ueber > * {
  min-width: 0;
}

.ueber__portrait {
  max-width: 360px;
}

.ueber__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  filter: brightness(0.95);
}

.ueber__portrait figcaption {
  padding-top: 0.6rem;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.ueber__zitat {
  margin: 1.5rem 0 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--licht);
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}

.ueber__zitat footer {
  margin-top: 0.6rem;
  font-family: 'Source Sans 3', sans-serif;
  font-size: var(--t-klein);
  font-weight: 400;
  color: var(--text-leise);
}

.fakten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  min-width: 0;
}

.fakt {
  min-width: 0;
  padding: 1.25rem;
  background: var(--nacht-2);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}

.fakt svg {
  width: 26px;
  height: 26px;
  color: var(--licht);
  margin-bottom: 0.75rem;
}

.fakt__wert {
  display: block;
  overflow-wrap: break-word;
  hyphens: auto;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.15;
}

.fakt__was {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-leise);
}

/* Fragen */
.fragen {
  border-top: 1px solid var(--linie);
}

.frage {
  padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
  border-bottom: 1px solid var(--linie);
  display: grid;
  gap: 0.5rem 3rem;
}

.frage h3 {
  font-size: 1.0625rem;
}

.frage p {
  margin: 0;
  color: var(--text-leise);
  max-width: 62ch;
}

/* Karriere */
.karriere {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.karriere img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  filter: brightness(0.9);
}

/* Kontakt-Abschluss */
.abschluss {
  position: relative;
  isolation: isolate;
  background: color-mix(in oklch, var(--marke) 46%, var(--nacht));
  border-top: 1px solid color-mix(in oklch, var(--licht) 24%, transparent);
  overflow: hidden;
}

/* Millimeterpapier im Hintergrund, dasselbe Motiv wie der Grundriss oben */
.abschluss::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    repeating-linear-gradient(
      to right,
      color-mix(in oklch, var(--licht) 12%, transparent) 0 1px,
      transparent 1px 56px
    ),
    repeating-linear-gradient(
      to bottom,
      color-mix(in oklch, var(--licht) 12%, transparent) 0 1px,
      transparent 1px 56px
    );
  mask-image: radial-gradient(120% 90% at 30% 40%, #000 30%, transparent 78%);
}

.abschluss__raster {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: var(--sektion);
  align-items: center;
}

.abschluss h2 {
  max-width: 16ch;
  margin-top: 0.75rem;
}

.abschluss__vorspann {
  margin-top: 1.25rem;
  max-width: 42ch;
  color: var(--text-leise);
}

/* Der eigentliche Handlungsblock: Telefon gross, Knopf darunter */
.abschluss__karte {
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: color-mix(in oklch, var(--nacht) 72%, transparent);
  border: 1px solid color-mix(in oklch, var(--licht) 30%, transparent);
  border-radius: var(--radius);
}

.abschluss__telefon {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: clamp(1.6rem, 2.4vw + 0.6rem, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
}

.abschluss__telefon svg {
  flex: 0 0 auto;
  width: 0.85em;
  height: 0.85em;
  color: var(--licht);
}

.abschluss__telefon:hover,
.abschluss__telefon:focus-visible {
  color: var(--licht-hell);
}

.knopf--gross {
  justify-content: center;
  width: 100%;
  min-height: 60px;
  font-size: 1.0625rem;
  background: var(--licht-hell);
  color: color-mix(in oklch, var(--marke) 55%, #000);
  border-color: var(--licht-hell);
}

.knopf--gross:hover,
.knopf--gross:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--nacht);
}

.abschluss__daten {
  display: grid;
  gap: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in oklch, var(--licht) 20%, transparent);
  font-size: var(--t-klein);
}

.abschluss__zeile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.abschluss__zeile svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--licht);
}

.abschluss__zeile a {
  color: var(--text);
  text-decoration: none;
}

.abschluss__zeile a:hover {
  color: var(--licht);
}

/* --- Fusszeile ---------------------------------------------------------- */

.fuss {
  background: var(--nacht);
  border-top: 1px solid var(--linie);
  color: var(--text-leise);
  font-size: var(--t-klein);
}

.fuss__raster {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.fuss h2,
.fuss__titel {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--licht);
  margin-bottom: 1rem;
}

.fuss a {
  color: var(--text-leise);
  text-decoration: none;
}

.fuss a:hover {
  color: var(--text);
}

.fuss li + li {
  margin-top: 0.5rem;
}

.fuss__heim {
  display: inline-block;
}

.fuss__logo img {
  width: auto;
  height: 48px;
  margin-bottom: 1.5rem;
}

.fuss__adresse {
  font-style: normal;
  line-height: 1.7;
}

.fuss__unten {
  border-top: 1px solid var(--linie);
  padding-block: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: var(--t-eyebrow);
  color: var(--text-leise);
}

/* --- Ab 640px ----------------------------------------------------------- */

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

  .werke {
    grid-template-columns: repeat(2, 1fr);
  }

  .spalten {
    grid-template-columns: repeat(2, 1fr);
  }

  .ablauf {
    grid-template-columns: repeat(2, 1fr);
  }

  .frage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  }

  .fuss__raster {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Der Anfragen-Knopf braucht Luft neben der Navigation */
@media (min-width: 70rem) {
  .kopf__reihe > .knopf {
    display: inline-flex;
  }
}

/* --- Ab 1024px ---------------------------------------------------------- */

@media (min-width: 64rem) {
  .nav {
    display: block;
  }

  .menue-knopf {
    display: none;
  }

  /* Hero: Text links, Grundriss rechts, beides in der Inhaltsbreite */
  .hero__raster {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 4vw, 4rem);
  }

  .hero__plan svg {
    max-height: 72vh;
  }

  .hero__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .sektion__kopf {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }

  .kacheln {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Ein grosses Bild links, vier kleine rechts */
  .werke {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(0, 1fr);
  }

  .werk--gross {
    grid-column: span 2;
    grid-row: span 2;
  }

  .werk--gross img {
    aspect-ratio: auto;
    height: 100%;
  }

  .spalten {
    grid-template-columns: repeat(3, 1fr);
  }

  .ablauf {
    grid-template-columns: repeat(4, 1fr);
  }

  .ueber {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr) minmax(0, 1.05fr);
  }

  .ueber__portrait {
    max-width: none;
  }

  .karriere {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }

  .abschluss__raster {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }

  .fuss__raster {
    grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
  }
}

/* --- Bewegung sparsam --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Druck -------------------------------------------------------------- */

@media print {
  .kopf,
  .menue-knopf,
  .hero__plan {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .sektion {
    padding-block: 1.5rem;
    break-inside: avoid;
  }
}

/* ==========================================================================
   Bildgefuehrte Sektionen
   ========================================================================== */

/* --- Leistungen als Bildkacheln ---------------------------------------- */

.bildkacheln {
  display: grid;
  gap: 1rem;
}

.bildkachel {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--nacht-2);
  color: var(--text);
  text-decoration: none;
  isolation: isolate;
}

.bildkachel__bild {
  display: block;
  position: relative;
  overflow: hidden;
}

.bildkachel__bild img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  filter: brightness(0.68) saturate(0.9);
  transition: filter 0.45s ease, transform 0.6s ease;
}

.bildkachel:hover .bildkachel__bild img,
.bildkachel:focus-within .bildkachel__bild img {
  filter: brightness(0.95) saturate(1);
  transform: scale(1.03);
}

/* Der Lichtschein: faehrt beim Ueberfahren ueber das Bild, wie eingeschaltetes Licht */
.bildkachel__bild::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    62% 52% at 50% 8%,
    color-mix(in oklch, #ffd9a0 42%, transparent),
    transparent 72%
  );
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.bildkachel:hover .bildkachel__bild::after,
.bildkachel:focus-within .bildkachel__bild::after {
  opacity: 1;
}

.bildkachel__kopf {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 1.1rem 1.25rem;
  background: linear-gradient(
    to top,
    color-mix(in oklch, var(--nacht) 92%, transparent) 20%,
    transparent
  );
}

.bildkachel__zeichen {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  color: var(--licht);
}

.bildkachel__name {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  /* Nicht breit laufend: WANDGESTALTUNG und KOMPLETTAUSBAU brechen sonst mitten
     im Wort, weil die Kachelspalte dafuer zu schmal ist. */
  font-stretch: 100%;
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.bildkachel__inhalt {
  display: block;
  padding: 1.25rem;
}

.bildkachel__satz {
  display: block;
  margin: 0 0 0.9rem;
  font-size: var(--t-klein);
  color: var(--text-leise);
}

.bildkachel__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.bildkachel__links > span > :is(span, a) {
  display: inline-block;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-leise);
  text-decoration: none;
}

.bildkachel:hover .bildkachel__links > span > :is(span, a),
.bildkachel:focus-within .bildkachel__links > span > :is(span, a) {
  border-color: var(--linie-hell);
  color: var(--text);
}

.bildkachel__links a:hover,
.bildkachel__links a:focus-visible {
  border-color: var(--licht);
  color: var(--licht);
}

/* --- Tag und Nacht: Licht anschalten ------------------------------------ */

.tagnacht {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.tagnacht__buehne {
  position: relative;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
}

.tagnacht__bilder {
  position: relative;
  display: grid;
}

.tagnacht__bilder img {
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: opacity 0.6s ease;
}

.tagnacht__bild--nacht {
  opacity: 0;
}

.tagnacht input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tagnacht__schalter {
  position: absolute;
  z-index: 2;
  left: 1rem;
  bottom: 1rem;
  display: flex;
  gap: 2px;
  padding: 3px;
  background: color-mix(in oklch, var(--nacht) 82%, transparent);
  border: 1px solid var(--linie-hell);
  border-radius: var(--radius);
  backdrop-filter: blur(6px);
}

.tagnacht__schalter label {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.4rem 0.9rem;
  border-radius: 2px;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-leise);
  cursor: pointer;
}

.tagnacht input:focus-visible + label {
  outline: 2px solid var(--licht);
  outline-offset: 2px;
}

#tag:checked ~ .tagnacht__schalter label[for='tag'],
#nacht:checked ~ .tagnacht__schalter label[for='nacht'] {
  background: var(--marke);
  color: #ffffff;
}

#nacht:checked ~ .tagnacht__bilder .tagnacht__bild--nacht {
  opacity: 1;
}

.tagnacht__punkte {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.tagnacht__punkt {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
}

/* Fluchtet mit den Texten der Punkte darunter */
.tagnacht__einleitung {
  padding-left: calc(26px + 0.9rem);
}

.tagnacht__punkt svg {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  color: var(--licht);
  margin-top: 2px;
}

.tagnacht__punkt h3 {
  font-size: 1.0625rem;
  margin-bottom: 0.2rem;
}

.tagnacht__punkt p {
  margin: 0;
  font-size: var(--t-klein);
  color: var(--text-leise);
}

/* --- Ablauf als Strahl -------------------------------------------------- */

.strahl {
  display: grid;
  gap: 1.5rem;
  counter-reset: schritt;
}

.strahl__schritt {
  position: relative;
  padding-top: 2.25rem;
  border-top: 1px solid var(--linie);
}

.strahl__schritt::before {
  counter-increment: schritt;
  content: counter(schritt, decimal-leading-zero);
  position: absolute;
  top: -0.9rem;
  left: 0;
  padding-right: 0.75rem;
  background: var(--grund);
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--licht);
}

.strahl__schritt h3 {
  font-size: 1.0625rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.4rem;
}

.strahl__schritt p {
  margin: 0;
  font-size: var(--t-klein);
  color: var(--text-leise);
}

/* --- Fragen als Aufklapper ---------------------------------------------- */

.frage-block {
  border-bottom: 1px solid var(--linie);
}

.frage-block summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem 0;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.frage-block summary::-webkit-details-marker {
  display: none;
}

.frage-block summary::after {
  content: '';
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--licht);
  border-bottom: 2px solid var(--licht);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform 0.25s ease;
}

.frage-block[open] summary::after {
  transform: rotate(-135deg) translate(-3px, -3px);
}

.frage-block p {
  margin: 0 0 1.25rem;
  max-width: 68ch;
  color: var(--text-leise);
}

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

  .strahl {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 80rem) {
  .bildkacheln {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 64rem) {
  .tagnacht {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  }

  .strahl {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- Raumzeichnung ------------------------------------------------------ */

.raum {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.raum__buehne {
  view-timeline: --zeichnung block;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 0.5rem;
}

.raumzeichnung {
  width: 100%;
  height: auto;
  overflow: visible;
}

.raumzeichnung .rz-flaeche {
  fill: color-mix(in oklch, var(--marke) 22%, var(--nacht));
  stroke: var(--linie-hell);
  stroke-width: 1.2;
}

.raumzeichnung .rz-wand {
  fill: color-mix(in oklch, var(--marke) 42%, var(--nacht));
  stroke: var(--linie-hell);
  stroke-width: 1.2;
}

.raumzeichnung .rz-wand-2 {
  fill: color-mix(in oklch, var(--marke) 26%, var(--nacht));
  stroke: var(--linie-hell);
  stroke-width: 1.2;
}

.raumzeichnung .rz-decke {
  fill: color-mix(in oklch, var(--marke) 30%, var(--nacht));
  stroke: var(--licht);
  stroke-width: 1.2;
}

.raumzeichnung .rz-fein {
  stroke: color-mix(in oklch, var(--licht) 34%, transparent);
  stroke-width: 0.8;
}

.raumzeichnung .rz-licht {
  fill: var(--licht);
  stroke: none;
}

.raumzeichnung .rz-schein {
  fill: color-mix(in oklch, var(--licht) 26%, transparent);
  stroke: none;
}

.raumzeichnung .rz-spot {
  fill: var(--licht);
  stroke: none;
}

.raumzeichnung .rz-kegel {
  fill: color-mix(in oklch, var(--licht) 12%, transparent);
  stroke: none;
}

.raumzeichnung .rz-bauteil {
  fill: color-mix(in oklch, var(--marke) 60%, var(--nacht));
  stroke: var(--licht);
  stroke-width: 1.2;
}

.raumzeichnung .rz-bauteil-2 {
  fill: var(--marke);
  stroke: var(--licht);
  stroke-width: 1.2;
}

.raumzeichnung .rz-spachtel {
  stroke: color-mix(in oklch, var(--licht) 34%, transparent);
  stroke-width: 1.8;
  stroke-linecap: round;
}

.raumzeichnung .rz-moebel {
  fill: color-mix(in oklch, var(--marke) 52%, var(--nacht));
  stroke: var(--licht);
  stroke-width: 1.1;
}

.raumzeichnung .rz-moebel-2 {
  fill: color-mix(in oklch, var(--marke) 38%, var(--nacht));
  stroke: var(--licht);
  stroke-width: 1.1;
}

.raumzeichnung .rz-moebel-oben {
  fill: color-mix(in oklch, var(--marke) 66%, var(--nacht));
  stroke: var(--licht);
  stroke-width: 1.1;
}

.raumzeichnung .rz-leiste {
  fill: color-mix(in oklch, var(--marke) 62%, var(--nacht));
  stroke: var(--linie-hell);
  stroke-width: 0.9;
}

.raumzeichnung .rz-oeffnung {
  fill: color-mix(in oklch, #000 46%, var(--nacht));
  stroke: color-mix(in oklch, var(--licht) 70%, transparent);
  stroke-width: 1;
}

.raumzeichnung .rz-zarge {
  fill: color-mix(in oklch, var(--marke) 70%, var(--nacht));
  stroke: var(--licht);
  stroke-width: 1;
}

.raumzeichnung .rz-detail {
  fill: color-mix(in oklch, var(--licht) 55%, var(--nacht));
  stroke: none;
}

.raumzeichnung .rz-leitung {
  fill: none;
  stroke: var(--licht);
  stroke-width: 1.6;
  stroke-dasharray: 7 5;
}

.raumzeichnung .rz-mass,
.raumzeichnung .rz-hilf {
  stroke: var(--linie-hell);
  stroke-width: 1;
}

.raumzeichnung .rz-hilf {
  stroke-dasharray: 3 4;
}

.raumzeichnung .rz-zeiger {
  fill: none;
  stroke: var(--licht);
  stroke-width: 1.2;
}

.raumzeichnung .rz-pfeil {
  fill: var(--licht);
}

.raumzeichnung .rz-text {
  fill: var(--text);
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Beschriftungen sind Links: Hover zeigt eine Vorschau der Leistung */
.raumzeichnung .rz-zeiger,
.aussenzeichnung .rz-zeiger,
.raumzeichnung .rz-pfeil,
.aussenzeichnung .rz-pfeil {
  pointer-events: none;
}

.raumzeichnung .rz-link,
.aussenzeichnung .rz-link {
  cursor: pointer;
}

.raumzeichnung .rz-hit,
.aussenzeichnung .rz-hit {
  fill: transparent;
  stroke: none;
}

.raumzeichnung .rz-link:hover .rz-text,
.aussenzeichnung .rz-link:hover .rz-text,
.raumzeichnung .rz-link:focus .rz-text,
.aussenzeichnung .rz-link:focus .rz-text {
  fill: var(--licht-hell);
}

.raumzeichnung .rz-link:focus-visible,
.aussenzeichnung .rz-link:focus-visible {
  outline: none;
}

.raumzeichnung .rz-link:focus-visible .rz-hit,
.aussenzeichnung .rz-link:focus-visible .rz-hit {
  stroke: var(--licht-hell);
  stroke-width: 2;
}

.raumzeichnung .rz-marke,
.aussenzeichnung .rz-marke {
  fill: color-mix(in oklch, var(--marke) 42%, var(--nacht));
  stroke: var(--licht);
  stroke-width: 1.4;
  transition: fill 0.16s ease-out;
}

.raumzeichnung .rz-marke__kreuz,
.aussenzeichnung .rz-marke__kreuz {
  stroke: var(--licht-hell);
  stroke-width: 1.8;
  fill: none;
  transition: stroke 0.16s ease-out;
}

.raumzeichnung .rz-link:hover .rz-marke,
.aussenzeichnung .rz-link:hover .rz-marke,
.raumzeichnung .rz-link:focus .rz-marke,
.aussenzeichnung .rz-link:focus .rz-marke {
  fill: var(--licht-hell);
}

.raumzeichnung .rz-link:hover .rz-marke__kreuz,
.aussenzeichnung .rz-link:hover .rz-marke__kreuz,
.raumzeichnung .rz-link:focus .rz-marke__kreuz,
.aussenzeichnung .rz-link:focus .rz-marke__kreuz {
  stroke: var(--nacht);
}

.raumzeichnung .rz-karte,
.aussenzeichnung .rz-karte {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease-out;
}

.raumzeichnung .rz-ebene-karten,
.aussenzeichnung .rz-ebene-karten {
  pointer-events: none;
}

/* Vorschau der zugehoerigen Beschriftung einblenden (Karten liegen in einer eigenen Ebene) */
.raumzeichnung:has(.rz-ebene-labels > .rz-link:nth-child(1):hover) .rz-ebene-karten > .rz-link:nth-child(1) .rz-karte,
.raumzeichnung:has(.rz-ebene-labels > .rz-link:nth-child(1):focus) .rz-ebene-karten > .rz-link:nth-child(1) .rz-karte,
.raumzeichnung:has(.rz-ebene-labels > .rz-link:nth-child(2):hover) .rz-ebene-karten > .rz-link:nth-child(2) .rz-karte,
.raumzeichnung:has(.rz-ebene-labels > .rz-link:nth-child(2):focus) .rz-ebene-karten > .rz-link:nth-child(2) .rz-karte,
.raumzeichnung:has(.rz-ebene-labels > .rz-link:nth-child(3):hover) .rz-ebene-karten > .rz-link:nth-child(3) .rz-karte,
.raumzeichnung:has(.rz-ebene-labels > .rz-link:nth-child(3):focus) .rz-ebene-karten > .rz-link:nth-child(3) .rz-karte,
.raumzeichnung:has(.rz-ebene-labels > .rz-link:nth-child(4):hover) .rz-ebene-karten > .rz-link:nth-child(4) .rz-karte,
.raumzeichnung:has(.rz-ebene-labels > .rz-link:nth-child(4):focus) .rz-ebene-karten > .rz-link:nth-child(4) .rz-karte,
.raumzeichnung:has(.rz-ebene-labels > .rz-link:nth-child(5):hover) .rz-ebene-karten > .rz-link:nth-child(5) .rz-karte,
.raumzeichnung:has(.rz-ebene-labels > .rz-link:nth-child(5):focus) .rz-ebene-karten > .rz-link:nth-child(5) .rz-karte,
.raumzeichnung:has(.rz-ebene-labels > .rz-link:nth-child(6):hover) .rz-ebene-karten > .rz-link:nth-child(6) .rz-karte,
.raumzeichnung:has(.rz-ebene-labels > .rz-link:nth-child(6):focus) .rz-ebene-karten > .rz-link:nth-child(6) .rz-karte,
.raumzeichnung:has(.rz-ebene-labels > .rz-link:nth-child(7):hover) .rz-ebene-karten > .rz-link:nth-child(7) .rz-karte,
.raumzeichnung:has(.rz-ebene-labels > .rz-link:nth-child(7):focus) .rz-ebene-karten > .rz-link:nth-child(7) .rz-karte,
.raumzeichnung:has(.rz-ebene-labels > .rz-link:nth-child(8):hover) .rz-ebene-karten > .rz-link:nth-child(8) .rz-karte,
.raumzeichnung:has(.rz-ebene-labels > .rz-link:nth-child(8):focus) .rz-ebene-karten > .rz-link:nth-child(8) .rz-karte,
.aussenzeichnung:has(.rz-ebene-labels > .rz-link:nth-child(1):hover) .rz-ebene-karten > .rz-link:nth-child(1) .rz-karte,
.aussenzeichnung:has(.rz-ebene-labels > .rz-link:nth-child(1):focus) .rz-ebene-karten > .rz-link:nth-child(1) .rz-karte,
.aussenzeichnung:has(.rz-ebene-labels > .rz-link:nth-child(2):hover) .rz-ebene-karten > .rz-link:nth-child(2) .rz-karte,
.aussenzeichnung:has(.rz-ebene-labels > .rz-link:nth-child(2):focus) .rz-ebene-karten > .rz-link:nth-child(2) .rz-karte,
.aussenzeichnung:has(.rz-ebene-labels > .rz-link:nth-child(3):hover) .rz-ebene-karten > .rz-link:nth-child(3) .rz-karte,
.aussenzeichnung:has(.rz-ebene-labels > .rz-link:nth-child(3):focus) .rz-ebene-karten > .rz-link:nth-child(3) .rz-karte,
.aussenzeichnung:has(.rz-ebene-labels > .rz-link:nth-child(4):hover) .rz-ebene-karten > .rz-link:nth-child(4) .rz-karte,
.aussenzeichnung:has(.rz-ebene-labels > .rz-link:nth-child(4):focus) .rz-ebene-karten > .rz-link:nth-child(4) .rz-karte,
.aussenzeichnung:has(.rz-ebene-labels > .rz-link:nth-child(5):hover) .rz-ebene-karten > .rz-link:nth-child(5) .rz-karte,
.aussenzeichnung:has(.rz-ebene-labels > .rz-link:nth-child(5):focus) .rz-ebene-karten > .rz-link:nth-child(5) .rz-karte,
.aussenzeichnung:has(.rz-ebene-labels > .rz-link:nth-child(6):hover) .rz-ebene-karten > .rz-link:nth-child(6) .rz-karte,
.aussenzeichnung:has(.rz-ebene-labels > .rz-link:nth-child(6):focus) .rz-ebene-karten > .rz-link:nth-child(6) .rz-karte,
.aussenzeichnung:has(.rz-ebene-labels > .rz-link:nth-child(7):hover) .rz-ebene-karten > .rz-link:nth-child(7) .rz-karte,
.aussenzeichnung:has(.rz-ebene-labels > .rz-link:nth-child(7):focus) .rz-ebene-karten > .rz-link:nth-child(7) .rz-karte,
.aussenzeichnung:has(.rz-ebene-labels > .rz-link:nth-child(8):hover) .rz-ebene-karten > .rz-link:nth-child(8) .rz-karte,
.aussenzeichnung:has(.rz-ebene-labels > .rz-link:nth-child(8):focus) .rz-ebene-karten > .rz-link:nth-child(8) .rz-karte,
.raumzeichnung .rz-ebene-karten > .rz-link:hover .rz-karte,
.aussenzeichnung .rz-ebene-karten > .rz-link:hover .rz-karte {
  opacity: 1;
  pointer-events: auto;
}

.raumzeichnung .rz-karte__grund,
.aussenzeichnung .rz-karte__grund {
  fill: color-mix(in oklch, var(--marke) 12%, #000000);
  stroke: var(--licht);
  stroke-width: 1.4;
}

.raumzeichnung .rz-karte__kante,
.aussenzeichnung .rz-karte__kante {
  stroke: color-mix(in oklch, var(--licht) 60%, transparent);
  stroke-width: 1.2;
}

.raumzeichnung .rz-karte__titel,
.aussenzeichnung .rz-karte__titel {
  fill: var(--text);
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: 42px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.raumzeichnung .rz-karte__text,
.aussenzeichnung .rz-karte__text {
  fill: var(--text-leise);
  font-family: 'Source Sans 3', ui-sans-serif, system-ui, sans-serif;
  font-size: 30px;
}

.raumzeichnung .rz-karte__mehr,
.aussenzeichnung .rz-karte__mehr {
  fill: var(--licht-hell);
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .raumzeichnung .rz-karte,
  .aussenzeichnung .rz-karte {
    transition: none;
  }
}

/* Ein orchestrierter Moment: die Zeichnung baut sich beim Hereinscrollen auf */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .raumzeichnung .rz-zeiger {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      animation: rz-zeichnen linear both;
      animation-timeline: --zeichnung;
      animation-range: cover 28% cover 41%;
    }

    .raumzeichnung .rz-leitung {
      stroke-dasharray: 7 5;
      animation: none;
    }

    .raumzeichnung .rz-licht,
    .raumzeichnung .rz-schein,
    .raumzeichnung .rz-spot,
    .raumzeichnung .rz-kegel {
      animation: licht-zuendet linear both;
      animation-timeline: --zeichnung;
      animation-range: cover 24% cover 37%;
    }

    .raumzeichnung .rz-text,
    .raumzeichnung .rz-marke,
    .raumzeichnung .rz-marke__kreuz,
    .raumzeichnung .rz-pfeil {
      animation: rz-einblenden linear both;
      animation-timeline: --zeichnung;
      animation-range: cover 33% cover 45%;
    }
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Die Zeichnung baut sich in der Reihenfolge auf, in der auch gebaut wird */
    .raumzeichnung .rz-schicht,
    .aussenzeichnung .rz-schicht {
      animation: schicht-auf linear both;
      animation-timeline: --zeichnung;
    }

    .raumzeichnung .rz-schicht--1,
    .aussenzeichnung .rz-schicht--1 { animation-range: cover 2% cover 13%; }

    .raumzeichnung .rz-schicht--2,
    .aussenzeichnung .rz-schicht--2 { animation-range: cover 7% cover 18%; }

    .raumzeichnung .rz-schicht--3,
    .aussenzeichnung .rz-schicht--3 { animation-range: cover 12% cover 23%; }

    .raumzeichnung .rz-schicht--4,
    .aussenzeichnung .rz-schicht--4 { animation-range: cover 17% cover 28%; }

    .raumzeichnung .rz-schicht--5,
    .aussenzeichnung .rz-schicht--5 { animation-range: cover 22% cover 33%; }
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Die Sonne pulsiert leicht, ihr Licht liegt auf den Modulen */
  .aussenzeichnung .az-sonne,
  .aussenzeichnung .az-sonnenstrahl {
    animation: sonne-pulst 4.5s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
  }

  .aussenzeichnung .az-sonnenstrahl {
    animation-name: strahlen-pulsen;
  }

  /* Strompakete laufen vom Modul über die Wallbox zur Säule und ins Auto */
  .aussenzeichnung .az-energie {
    animation: energie-fliesst 4.2s linear infinite;
  }

  .aussenzeichnung .az-energie--2 { animation-delay: 1.4s; }
  .aussenzeichnung .az-energie--3 { animation-delay: 2.8s; }

  .aussenzeichnung .az-ladering {
    animation: laedt 2.2s ease-out infinite;
    transform-box: fill-box;
    transform-origin: center;
  }

  /* Der Akku über dem Auto füllt sich Balken für Balken */
  .aussenzeichnung .az-akku-balken {
    animation: akku-fuellt 4.2s steps(1, end) infinite;
  }

  .aussenzeichnung .az-akku-balken--2 { animation-delay: 1.4s; }
  .aussenzeichnung .az-akku-balken--3 { animation-delay: 2.8s; }
}

@keyframes energie-fliesst {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

@keyframes sonne-pulst {
  0%,
  100% {
    opacity: 0.9;
  }
  50% {
    opacity: 1;
  }
}

@keyframes strahlen-pulsen {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes akku-fuellt {
  0%,
  32% {
    opacity: 0.15;
  }
  34%,
  100% {
    opacity: 1;
  }
}

@keyframes laedt {
  0% {
    opacity: 0.9;
    transform: scale(0.5);
  }
  70% {
    opacity: 0;
    transform: scale(1.9);
  }
  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}

@keyframes schicht-auf {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 -8% 0 0);
  }
}

@keyframes licht-zuendet {
  0%,
  48% {
    opacity: 0;
  }
  52% {
    opacity: 0.85;
  }
  57% {
    opacity: 0.12;
  }
  63% {
    opacity: 1;
  }
  68% {
    opacity: 0.35;
  }
  76%,
  100% {
    opacity: 1;
  }
}

@keyframes rz-zeichnen {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes rz-licht-an {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes rz-einblenden {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.raum__punkte {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 64rem) {
  .raum {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }

  /* Aussenzeichnung seitenverkehrt: Text links, Zeichnung rechts */
  .raum--gedreht {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  }

  .raum--gedreht > .raum__buehne {
    grid-column: 2;
    grid-row: 1;
  }

  .raum--gedreht > .raum__punkte {
    grid-column: 1;
    grid-row: 1;
  }
}

.raumzeichnung .rz-kante {
  stroke: var(--licht);
  stroke-width: 1.4;
}

/* Mobil: Die Zeichnungen passen ganz ins Bild, statt im Container zu scrollen.
   Vorher erzwang eine Mindestbreite von 760 bzw. 780 px seitliches Wischen, und
   man sah bei 390 px nur die linke Haelfte. Weil das SVG dabei auf rund 45 Prozent
   schrumpft, wachsen die Beschriftungen gegen und die Hover-Vorschau faellt weg:
   Auf dem Telefon gibt es kein Hover, und die Karten sind dort ohnehin zu gross. */
@media (max-width: 63.999rem) {
  .raumzeichnung .rz-text,
  .aussenzeichnung .rz-text {
    font-size: 46px;
    letter-spacing: 0.04em;
  }

  .raumzeichnung .rz-marke,
  .aussenzeichnung .rz-marke,
  .raumzeichnung .rz-marke__kreuz,
  .aussenzeichnung .rz-marke__kreuz,
  .raumzeichnung .rz-ebene-karten,
  .aussenzeichnung .rz-ebene-karten {
    display: none;
  }

  .raumzeichnung .rz-zeiger,
  .aussenzeichnung .rz-zeiger {
    stroke-width: 2.4;
  }

  /* Die Buehne zieht ueber das Seitenpolster hinaus, es bleiben 6 px Rand.
     Sonst steht die Zeichnung bei 390 px nur 350 px breit da. */
  .raum__buehne {
    overflow-x: visible;
    margin-inline: calc(var(--rand) * -1 + 0.375rem);
  }
}

/* --- Aussenzeichnung ---------------------------------------------------- */

.aussenzeichnung {
  width: 100%;
  height: auto;
  overflow: visible;
}

.aussenzeichnung .az-gelaende {
  fill: color-mix(in oklch, var(--marke) 20%, var(--nacht));
  stroke: var(--linie-hell);
  stroke-width: 1.2;
}

.aussenzeichnung .az-erde {
  fill: color-mix(in oklch, var(--marke) 58%, #000);
  stroke: var(--linie-hell);
  stroke-width: 1.2;
}

.aussenzeichnung .az-erde-2 {
  fill: color-mix(in oklch, var(--marke) 44%, #000);
  stroke: var(--linie-hell);
  stroke-width: 1.2;
}

.aussenzeichnung .az-schraffur {
  stroke: color-mix(in oklch, var(--licht) 26%, transparent);
  stroke-width: 0.9;
}

.aussenzeichnung .az-weg {
  fill: color-mix(in oklch, var(--marke) 34%, var(--nacht));
  stroke: var(--linie-hell);
  stroke-width: 1;
}

.aussenzeichnung .az-mauer-oben {
  fill: color-mix(in oklch, var(--marke) 46%, var(--nacht));
  stroke: var(--licht);
  stroke-width: 1.1;
}

.aussenzeichnung .az-mauer {
  fill: color-mix(in oklch, var(--marke) 30%, var(--nacht));
  stroke: var(--licht);
  stroke-width: 1.1;
}

.aussenzeichnung .az-mauer-2 {
  fill: color-mix(in oklch, var(--marke) 22%, var(--nacht));
  stroke: var(--licht);
  stroke-width: 1.1;
}

.aussenzeichnung .az-haus,
.aussenzeichnung .az-haus-2,
.aussenzeichnung .az-haus-oben {
  fill: color-mix(in oklch, var(--marke) 38%, var(--nacht));
  stroke: var(--linie-hell);
  stroke-width: 1.2;
}

.aussenzeichnung .az-haus-2 {
  fill: color-mix(in oklch, var(--marke) 26%, var(--nacht));
}

.aussenzeichnung .az-haus-oben {
  fill: color-mix(in oklch, var(--marke) 52%, var(--nacht));
}

.aussenzeichnung .az-graben-oeffnung {
  fill: color-mix(in oklch, #000 70%, var(--nacht));
  stroke: var(--licht);
  stroke-width: 1.1;
}

.aussenzeichnung .az-graben,
.aussenzeichnung .az-graben-2,
.aussenzeichnung .az-graben-3,
.aussenzeichnung .az-graben-sohle {
  fill: color-mix(in oklch, var(--nacht) 88%, #000);
  stroke: var(--licht);
  stroke-width: 1;
}

.aussenzeichnung .az-graben-2,
.aussenzeichnung .az-graben-3 {
  fill: color-mix(in oklch, var(--marke) 18%, #000);
}

.aussenzeichnung .az-sand {
  fill: color-mix(in oklch, var(--licht) 22%, var(--nacht));
  stroke: none;
}

.aussenzeichnung .az-fundament {
  fill: color-mix(in oklch, var(--marke) 40%, var(--nacht));
  stroke: var(--linie-hell);
  stroke-width: 1;
}

/* Haus: Sockel, Fenster, Tuer, Dach */
.aussenzeichnung .az-sockel {
  fill: color-mix(in oklch, var(--marke) 58%, transparent);
  stroke: var(--linie-hell);
  stroke-width: 1;
}

.aussenzeichnung .az-sockel-2 {
  fill: color-mix(in oklch, var(--marke) 46%, var(--nacht));
  stroke: var(--linie-hell);
  stroke-width: 1;
}

.aussenzeichnung .az-fenster {
  fill: color-mix(in oklch, var(--licht) 46%, var(--nacht));
  stroke: var(--licht);
  stroke-width: 1.1;
}

.aussenzeichnung .az-fenster-2 {
  fill: color-mix(in oklch, var(--licht) 30%, var(--nacht));
  stroke: var(--licht);
  stroke-width: 1.1;
}

.aussenzeichnung .az-sprosse {
  stroke: color-mix(in oklch, var(--marke) 40%, #000);
  stroke-width: 1.1;
}

.aussenzeichnung .az-bank {
  fill: color-mix(in oklch, var(--marke) 66%, var(--nacht));
  stroke: var(--linie-hell);
  stroke-width: 0.9;
}

.aussenzeichnung .az-tuer {
  fill: color-mix(in oklch, var(--marke) 52%, var(--nacht));
  stroke: var(--licht);
  stroke-width: 1.1;
}

.aussenzeichnung .az-griff {
  fill: var(--licht);
  stroke: none;
}

.aussenzeichnung .az-giebel {
  fill: color-mix(in oklch, var(--marke) 30%, var(--nacht));
  stroke: var(--linie-hell);
  stroke-width: 1.2;
}

.aussenzeichnung .az-dach {
  fill: color-mix(in oklch, var(--marke) 20%, var(--nacht));
  stroke: var(--licht);
  stroke-width: 1.2;
}

.aussenzeichnung .az-dach-2 {
  fill: color-mix(in oklch, var(--marke) 54%, var(--nacht));
  stroke: var(--linie-hell);
  stroke-width: 1;
}

.aussenzeichnung .az-dachfuge {
  stroke: color-mix(in oklch, var(--licht) 20%, transparent);
  stroke-width: 0.8;
}

.aussenzeichnung .az-schornstein {
  fill: color-mix(in oklch, var(--marke) 42%, var(--nacht));
  stroke: var(--linie-hell);
  stroke-width: 1;
}

.aussenzeichnung .az-schornstein-2 {
  fill: color-mix(in oklch, var(--marke) 32%, var(--nacht));
  stroke: var(--linie-hell);
  stroke-width: 1;
}

.aussenzeichnung .az-schornstein-oben {
  fill: color-mix(in oklch, var(--marke) 62%, var(--nacht));
  stroke: var(--linie-hell);
  stroke-width: 1;
}

.aussenzeichnung .az-gras {
  stroke: color-mix(in oklch, var(--licht) 26%, transparent);
  stroke-width: 1.1;
  stroke-linecap: round;
}

.aussenzeichnung .az-schatten {
  fill: color-mix(in oklch, #000 42%, transparent);
  stroke: none;
}

.aussenzeichnung .az-aushub {
  fill: color-mix(in oklch, var(--marke) 46%, #000);
  stroke: var(--linie-hell);
  stroke-width: 1;
}

/* Auto */
.aussenzeichnung .az-auto {
  fill: color-mix(in oklch, var(--marke) 58%, transparent);
  stroke: var(--licht);
  stroke-width: 1.3;
  stroke-linejoin: round;
}

.aussenzeichnung .az-auto-2 {
  fill: color-mix(in oklch, var(--marke) 42%, var(--nacht));
  stroke: var(--licht);
  stroke-width: 1.1;
}

.aussenzeichnung .az-auto-oben {
  fill: color-mix(in oklch, var(--marke) 74%, var(--nacht));
  stroke: var(--licht);
  stroke-width: 1.1;
}

.aussenzeichnung .az-scheibe {
  fill: color-mix(in oklch, var(--licht) 24%, var(--nacht));
  stroke: var(--licht);
  stroke-width: 1;
}

.aussenzeichnung .az-fuge {
  stroke: color-mix(in oklch, var(--licht) 34%, transparent);
  stroke-width: 0.9;
}

.aussenzeichnung .az-rad {
  fill: color-mix(in oklch, var(--marke) 26%, #000);
  stroke: var(--licht);
  stroke-width: 1.1;
}

.aussenzeichnung .az-radkappe {
  fill: color-mix(in oklch, var(--marke) 70%, var(--nacht));
  stroke: var(--licht);
  stroke-width: 0.9;
}

.aussenzeichnung .az-klappe {
  fill: color-mix(in oklch, var(--marke) 82%, var(--nacht));
  stroke: var(--licht);
  stroke-width: 1;
}

.aussenzeichnung .az-leuchte {
  fill: color-mix(in oklch, var(--licht) 78%, var(--nacht));
  stroke: none;
}

.aussenzeichnung .az-stecker {
  fill: color-mix(in oklch, var(--marke) 30%, #000);
  stroke: var(--licht);
  stroke-width: 0.8;
}

.aussenzeichnung .az-kabel {
  fill: none;
  stroke: var(--licht);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.aussenzeichnung .az-sonne {
  fill: color-mix(in oklch, var(--licht-hell) 82%, #ffffff);
  stroke: none;
}

.aussenzeichnung .az-sonnenstrahl {
  stroke: color-mix(in oklch, var(--licht-hell) 70%, transparent);
  stroke-width: 2;
  stroke-linecap: round;
}

.aussenzeichnung .az-sonnenlicht {
  fill: color-mix(in oklch, var(--licht) 15%, transparent);
  stroke: none;
}

.aussenzeichnung .az-stromweg {
  fill: none;
  stroke: color-mix(in oklch, var(--licht) 26%, transparent);
  stroke-width: 1.4;
  stroke-dasharray: 3 6;
}

.aussenzeichnung .az-energie {
  fill: var(--licht-hell);
  stroke: none;
  offset-rotate: 0deg;
  opacity: 0;
}

.aussenzeichnung .az-ladering {
  fill: none;
  stroke: var(--licht-hell);
  stroke-width: 2;
  opacity: 0;
}

.aussenzeichnung .az-akku {
  fill: color-mix(in oklch, #000 55%, var(--marke));
  stroke: var(--licht-hell);
  stroke-width: 1.6;
}

.aussenzeichnung .az-akku-kopf {
  fill: var(--licht-hell);
  stroke: none;
}

.aussenzeichnung .az-akku-balken {
  fill: var(--licht-hell);
  stroke: none;
  opacity: 0.15;
}

.aussenzeichnung .az-akku-kabel {
  stroke: color-mix(in oklch, var(--licht) 40%, transparent);
  stroke-width: 1.2;
  stroke-dasharray: 3 4;
}

.aussenzeichnung .az-pv {
  fill: color-mix(in oklch, var(--marke) 88%, #000);
  stroke: var(--licht);
  stroke-width: 1.2;
}

.aussenzeichnung .az-pv-fuge {
  stroke: color-mix(in oklch, var(--licht) 55%, transparent);
  stroke-width: 0.9;
}

.aussenzeichnung .az-first {
  stroke: var(--licht);
  stroke-width: 1.3;
}

.aussenzeichnung .az-griff-auto {
  fill: color-mix(in oklch, var(--licht) 60%, var(--nacht));
  stroke: none;
}

.aussenzeichnung .rz-mass-text,
.raumzeichnung .rz-mass-text {
  fill: var(--text-leise);
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* gleiche Bausteine wie in der Raumzeichnung */
.aussenzeichnung .rz-fein,
.aussenzeichnung .rz-bauteil,
.aussenzeichnung .rz-bauteil-2,
.aussenzeichnung .rz-licht,
.aussenzeichnung .rz-kegel,
.aussenzeichnung .rz-leitung,
.aussenzeichnung .rz-mass,
.aussenzeichnung .rz-hilf,
.aussenzeichnung .rz-zeiger,
.aussenzeichnung .rz-pfeil,
.aussenzeichnung .rz-text {
  /* erben aus den Regeln der Raumzeichnung, hier nur Sammelselektor */
}

.aussenzeichnung .rz-fein {
  stroke: color-mix(in oklch, var(--licht) 30%, transparent);
  stroke-width: 0.8;
}

.aussenzeichnung .rz-bauteil {
  fill: color-mix(in oklch, var(--marke) 62%, var(--nacht));
  stroke: var(--licht);
  stroke-width: 1.2;
}

.aussenzeichnung .rz-bauteil-2 {
  fill: var(--marke);
  stroke: var(--licht);
  stroke-width: 1.2;
}

.aussenzeichnung .rz-licht {
  fill: var(--licht);
  stroke: none;
}

.aussenzeichnung .rz-kegel {
  fill: color-mix(in oklch, var(--licht) 14%, transparent);
  stroke: none;
}

.aussenzeichnung .rz-leitung {
  fill: none;
  stroke: var(--licht);
  stroke-width: 1.6;
  stroke-dasharray: 7 5;
}

.aussenzeichnung .rz-mass,
.aussenzeichnung .rz-hilf {
  stroke: var(--linie-hell);
  stroke-width: 1;
}

.aussenzeichnung .rz-hilf {
  stroke-dasharray: 3 4;
}

.aussenzeichnung .rz-zeiger {
  fill: none;
  stroke: var(--licht);
  stroke-width: 1.2;
}

.aussenzeichnung .rz-pfeil {
  fill: var(--licht);
}

.aussenzeichnung .rz-text {
  fill: var(--text);
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .aussenzeichnung .rz-zeiger {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      animation: rz-zeichnen linear both;
      animation-timeline: --zeichnung;
      animation-range: cover 28% cover 41%;
    }

    .aussenzeichnung .rz-licht,
    .aussenzeichnung .rz-kegel {
      animation: licht-zuendet linear both;
      animation-timeline: --zeichnung;
      animation-range: cover 24% cover 37%;
    }

    .aussenzeichnung .rz-text,
    .aussenzeichnung .rz-marke,
    .aussenzeichnung .rz-marke__kreuz,
    .aussenzeichnung .rz-pfeil {
      animation: rz-einblenden linear both;
      animation-timeline: --zeichnung;
      animation-range: cover 33% cover 45%;
    }
  }
}

/* --- Bewegung: Strom, Licht und Aufbau beim Scrollen --------------------- */

@media (prefers-reduced-motion: no-preference) {
  /* Strom fließt durch die gestrichelten Leitungen der beiden Zeichnungen */
  .raumzeichnung .rz-leitung,
  .aussenzeichnung .rz-leitung {
    animation: strom-fliesst 3s linear infinite;
  }

  /* Der Knopf bekommt beim Überfahren einen Lichtdurchlauf */
  .knopf {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .knopf::after {
    content: '';
    position: absolute;
    inset-block: 0;
    left: -40%;
    width: 35%;
    background: linear-gradient(
      100deg,
      transparent,
      color-mix(in oklch, #ffffff 34%, transparent),
      transparent
    );
    transform: skewX(-18deg);
    opacity: 0;
    pointer-events: none;
    z-index: -1;
  }

  .knopf:hover::after,
  .knopf:focus-visible::after {
    animation: knopf-licht 0.75s ease-out;
  }

  /* Hero: Zeile für Zeile aufblenden, danach zündet die Lichtkante */
  .hero__text h1,
  .hero__claim,
  .hero__vorspann,
  .hero__knoepfe {
    animation: aufsteigen 0.85s cubic-bezier(0.22, 0.8, 0.3, 1) both;
  }

  .hero__text h1 { animation-delay: 0.1s; }
  .hero__claim { animation-delay: 0.3s; }
  .hero__vorspann { animation-delay: 0.42s; }
  .hero__knoepfe { animation-delay: 0.54s; }

  /* Eine Lichtleiste unter der Kopfzeile zeigt, wie weit die Seite gelesen ist */
  .kopf::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(to right, var(--marke), var(--licht-hell));
    transform: scaleX(0);
    transform-origin: left center;
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .kopf::after {
      animation: kante-an linear both;
      animation-timeline: scroll(root);
    }

    /* Die Lichtkante der Leistungssektion zündet beim Hereinscrollen */
    .lichtkante::before {
      transform-origin: left center;
      animation: kante-an linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }

    /* Die Linie neben dem Eyebrow wird gezogen wie eine Leitung */
    .sektion .eyebrow::after {
      animation: leitung-legen linear both;
      animation-timeline: view();
      animation-range: entry 15% cover 32%;
    }

    /* Überschrift und Beitext steigen beim Hereinscrollen auf */
    .sektion__kopf h2,
    .sektion__kopf-neben > * {
      animation: aufsteigen linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 30%;
    }

    /* Bildkacheln und Projekte gehen nacheinander an */
    .bildkachel,
    .werk {
      animation: kachel-an linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 34%;
    }

    .bildkachel:nth-child(2),
    .werk:nth-child(2) { animation-range: entry 12% cover 36%; }

    .bildkachel:nth-child(3),
    .werk:nth-child(3) { animation-range: entry 14% cover 38%; }

    .bildkachel:nth-child(4),
    .werk:nth-child(4) { animation-range: entry 16% cover 40%; }

    .werk:nth-child(5) { animation-range: entry 18% cover 42%; }
    .werk:nth-child(6) { animation-range: entry 20% cover 44%; }

    /* Die Fakten neben dem Porträt kommen gestaffelt */
    .fakten > * {
      animation: aufsteigen linear both;
      animation-timeline: view();
      animation-range: entry 12% cover 34%;
    }

    .fakten > *:nth-child(2) { animation-range: entry 15% cover 37%; }
    .fakten > *:nth-child(3) { animation-range: entry 18% cover 40%; }
    .fakten > *:nth-child(4) { animation-range: entry 21% cover 43%; }
  }
}

@keyframes strom-fliesst {
  to {
    stroke-dashoffset: -24;
  }
}

@keyframes knopf-licht {
  from {
    left: -40%;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  to {
    left: 120%;
    opacity: 0;
  }
}

@keyframes aufsteigen {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes kachel-an {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes leitung-legen {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 2rem;
    opacity: 0.6;
  }
}

@keyframes kante-an {
  from {
    transform: scaleX(0.02);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* ==========================================================================
   Grundriss im Hero: ein Bauplan, der sich selbst zeichnet
   ========================================================================== */

.planzeichnung {
  --pz-linie: color-mix(in oklch, var(--licht) 38%, transparent);
  --pz-wandton: color-mix(in oklch, var(--marke) 72%, var(--licht));
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
}

.pz-blatt {
  fill: color-mix(in oklch, var(--marke) 20%, var(--nacht));
  stroke: color-mix(in oklch, var(--licht) 26%, transparent);
  stroke-width: 1;
}

.pz-raster {
  stroke: color-mix(in oklch, var(--licht) 14%, transparent);
  stroke-width: 1;
}

.pz-raster--stark {
  stroke: color-mix(in oklch, var(--licht) 24%, transparent);
}

.pz-wand {
  fill: var(--pz-wandton);
  stroke: color-mix(in oklch, var(--licht-hell) 45%, transparent);
  stroke-width: 1;
}

/* Laeuft beim Aufbau ueber das Blatt, wie der Kopf eines Plotters */
.pz-plotter {
  fill: var(--licht-hell);
  opacity: 0;
}

.pz-fenster {
  stroke: var(--licht-hell);
  stroke-width: 3.5;
}

.pz-tuerblatt {
  stroke: color-mix(in oklch, var(--licht) 70%, transparent);
  stroke-width: 2.5;
}

.pz-tuerbogen {
  fill: none;
  stroke: var(--pz-linie);
  stroke-width: 1.2;
  stroke-dasharray: 5 5;
}

.pz-masslinie,
.pz-massstrich,
.pz-stempellinie {
  stroke: color-mix(in oklch, var(--licht) 34%, transparent);
  stroke-width: 1.2;
}

.pz-masstext {
  fill: var(--text-leise);
  font-size: 21px;
  letter-spacing: 0.08em;
}

.pz-raumname {
  fill: var(--text);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: 0.16em;
}

.pz-raumflaeche {
  fill: var(--text-leise);
  font-size: 21px;
  letter-spacing: 0.06em;
}

.pz-leitung {
  fill: none;
  stroke: var(--licht);
  stroke-width: 2.2;
  stroke-dasharray: 0.035 0.02;
  opacity: 0.85;
}

.pz-funke {
  fill: var(--licht-hell);
  offset-rotate: 0deg;
  opacity: 0;
}

.pz-verteiler {
  fill: color-mix(in oklch, var(--marke) 70%, var(--nacht));
  stroke: var(--licht);
  stroke-width: 2;
}

.pz-verteilertext {
  fill: var(--licht-hell);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.pz-leuchte {
  fill: color-mix(in oklch, var(--nacht) 70%, transparent);
  stroke: var(--licht-hell);
  stroke-width: 2.2;
}

.pz-leuchtenkreuz {
  stroke: var(--licht-hell);
  stroke-width: 2.2;
}

.pz-dose path,
.pz-dose line {
  fill: none;
  stroke: var(--licht);
  stroke-width: 2;
}

.pz-schalter {
  fill: none;
  stroke: var(--licht);
  stroke-width: 2;
}

.pz-schalterstrich {
  stroke: var(--licht);
  stroke-width: 2;
}

.pz-lichtkegel {
  fill: color-mix(in oklch, #ffd9a0 22%, transparent);
  filter: blur(26px);
}

/* Ohne Animation stehen die Tueren offen und das Licht brennt */
.pz-tuer {
  transform: rotate(var(--pz-tuer-drehung, 75deg));
}

.pz-spachtel,
.pz-kunststein {
  fill: color-mix(in oklch, var(--licht) 30%, transparent);
  stroke: var(--licht-hell);
  stroke-width: 1.5;
}

.pz-flaechentext {
  fill: var(--licht-hell);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.pz-stempel {
  fill: var(--text-leise);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.16em;
}

.pz-stempel--leise {
  fill: color-mix(in oklch, var(--text-leise) 70%, transparent);
  font-weight: 400;
}

/* --- Aufbau beim Laden -------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .pz-schicht {
    opacity: 0;
    animation: pz-auf 0.7s ease-out both;
  }

  .pz-schicht--raster { animation-delay: 0.15s; }
  .pz-schicht--wand {
    animation: pz-wischen 1s cubic-bezier(0.3, 0.8, 0.3, 1) both;
    animation-delay: 0.5s;
  }
  .pz-schicht--tuer { animation-delay: 1.5s; }

  .pz-plotter {
    animation: pz-plotter-laeuft 1s cubic-bezier(0.3, 0.8, 0.3, 1) 0.5s both;
  }
  .pz-schicht--mass { animation-delay: 1.2s; }
  .pz-schicht--raum { animation-delay: 1.7s; }
  .pz-schicht--elektro { animation-delay: 2.1s; }
  .pz-schicht--licht { animation-delay: 3.1s; opacity: 1; animation: none; }
  .pz-schicht--flaeche { animation-delay: 3.6s; }
  .pz-schicht--stempel { animation-delay: 0.9s; }

  .pz-tuer {
    animation: pz-tuer-auf 0.9s cubic-bezier(0.3, 0.9, 0.3, 1) both;
    animation-delay: 1.6s;
  }

  .pz-leitung {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: pz-legen 1.4s ease-out both;
    animation-delay: 2.2s;
  }

  .pz-funke {
    animation: pz-funke-laeuft 2.6s linear infinite;
    animation-delay: 3.4s;
  }

  .pz-funke--2 { animation-duration: 3.1s; animation-delay: 3.7s; }
  .pz-funke--3 { animation-duration: 3.4s; animation-delay: 3.9s; }
  .pz-funke--4 { animation-duration: 2.8s; animation-delay: 4.1s; }

  .pz-lichtkegel {
    --pz-d: 3.5s;
    animation:
      pz-licht-an 1.1s ease-out var(--pz-d) both,
      pz-licht-atmet 6s ease-in-out calc(var(--pz-d) + 1.2s) infinite;
  }

  .pz-lichtkegel--2 { --pz-d: 3.75s; }
  .pz-lichtkegel--3 { --pz-d: 3.95s; }
  .pz-lichtkegel--4 { --pz-d: 4.15s; }

  .pz-spachtel,
  .pz-kunststein,
  .pz-moos {
    transform-box: fill-box;
    transform-origin: left center;
    animation: pz-flaeche-auf 0.8s cubic-bezier(0.3, 0.8, 0.3, 1) both;
    animation-delay: 4.4s;
  }
}

@keyframes pz-auf {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pz-wischen {
  from {
    opacity: 1;
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 -4% 0 0);
  }
}

@keyframes pz-plotter-laeuft {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  12% {
    opacity: 0.9;
  }
  88% {
    opacity: 0.9;
  }
  to {
    opacity: 0;
    transform: translateX(910px);
  }
}

@keyframes pz-tuer-auf {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(var(--pz-tuer-drehung, 75deg));
  }
}

@keyframes pz-legen {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes pz-funke-laeuft {
  from {
    offset-distance: 0%;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  to {
    offset-distance: 100%;
    opacity: 0;
  }
}

@keyframes pz-licht-an {
  0% {
    opacity: 0;
  }
  18% {
    opacity: 0.75;
  }
  26% {
    opacity: 0.1;
  }
  38% {
    opacity: 0.9;
  }
  46% {
    opacity: 0.3;
  }
  to {
    opacity: 1;
  }
}

@keyframes pz-licht-atmet {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.72;
  }
}

@keyframes pz-flaeche-auf {
  from {
    opacity: 0;
    transform: scaleX(0.02);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- Hof, Einfahrt und Aussenlicht im Grundriss ------------------------- */

.pz-pflaster {
  stroke: color-mix(in oklch, var(--licht) 11%, transparent);
  stroke-width: 1;
}

.pz-wegkante {
  stroke: color-mix(in oklch, var(--licht) 30%, transparent);
  stroke-width: 1.4;
  stroke-dasharray: 8 6;
}

.pz-mauer {
  fill: color-mix(in oklch, var(--licht) 30%, transparent);
  stroke: var(--licht-hell);
  stroke-width: 1.5;
}

.pz-stellplatz {
  fill: none;
  stroke: color-mix(in oklch, var(--licht) 34%, transparent);
  stroke-width: 1.4;
  stroke-dasharray: 10 7;
}

.pz-auto {
  fill: color-mix(in oklch, var(--marke) 55%, var(--nacht));
  stroke: color-mix(in oklch, var(--licht) 60%, transparent);
  stroke-width: 1.8;
}

.pz-autolinie {
  stroke: color-mix(in oklch, var(--licht) 45%, transparent);
  stroke-width: 1.6;
}

.pz-ladekabel {
  fill: none;
  stroke: var(--licht-hell);
  stroke-width: 2.2;
}

.pz-leitung--erde {
  stroke-dasharray: 0.02 0.014;
}

.pz-poller {
  fill: color-mix(in oklch, var(--nacht) 60%, transparent);
  stroke: var(--licht-hell);
  stroke-width: 2;
}

.pz-strahler {
  fill: color-mix(in oklch, var(--nacht) 60%, transparent);
  stroke: var(--licht-hell);
  stroke-width: 1.8;
}

.pz-lichtkegel--klein {
  fill: color-mix(in oklch, #ffd9a0 26%, transparent);
  filter: blur(16px);
}

@media (prefers-reduced-motion: no-preference) {
  .pz-schicht--aussen { animation-delay: 2.6s; }

  .pz-leitung--erde {
    animation-delay: 2.9s;
  }

  .pz-funke--5 { animation-duration: 3.6s; animation-delay: 4.3s; }
  .pz-funke--6 { animation-duration: 4.2s; animation-delay: 4.6s; }

  .pz-lichtkegel--klein { --pz-d: 4.4s; }

  .pz-ladekabel {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: pz-legen 0.9s ease-out 3.4s both;
  }
}



.pz-schwelle {
  stroke: var(--licht-hell);
  stroke-width: 3;
}

/* Mooswand: einzige gruene Flaeche im Plan, damit sie sofort als Moos lesbar ist */
.pz-moos {
  fill: color-mix(in oklch, #6fae6a 42%, transparent);
  stroke: #9fd49a;
  stroke-width: 1.5;
}

.pz-flaechentext--moos {
  fill: #c4ecbf;
}

/* ==========================================================================
   Unterseiten: Pfad, Seitenkopf, Schnittzeichnung, Kostenfaktoren
   ========================================================================== */

.pfad ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.pfad li + li::before {
  content: '/';
  margin-right: 0.6rem;
  color: var(--linie-hell);
}

.pfad a {
  color: var(--text-leise);
  text-decoration: none;
}

.pfad a:hover {
  color: var(--licht-hell);
}

.pfad [aria-current] {
  color: var(--text);
}

.seitenhero {
  padding-block: clamp(1.5rem, 3vw, 2.25rem) clamp(2.5rem, 6vw, 4.5rem);
}

.seitenhero__raster {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  margin-top: clamp(1.5rem, 4vw, 3rem);
}

.seitenhero__raster > * {
  min-width: 0;
}

.seitenhero h1 {
  font-size: clamp(1.8rem, 1.95vw + 0.9rem, 3rem);
  line-height: 1.02;
  max-width: 20ch;
}

.seitenhero h1 .hervor {
  display: block;
}

.seitenhero__vorspann {
  margin-top: 1.5rem;
  font-size: var(--t-gross);
  color: var(--text-leise);
  max-width: 52ch;
}

.seitenhero__bild {
  position: relative;
  margin: 0;
}

.seitenhero__bild img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--linie);
}

/* Bildunterschrift im Seitenkopf */
.seitenhero__bild figcaption {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  padding: 0.3rem 0.6rem;
  background: color-mix(in oklch, var(--nacht) 78%, transparent);
  border: 1px solid var(--linie-hell);
  border-radius: 2px;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  backdrop-filter: blur(4px);
}

/* Licht-Abschnitt: Schnitt links, Erklaerungen rechts */
.licht {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}

.licht > * {
  min-width: 0;
}

.licht .tagnacht__punkte {
  margin-top: 0;
}

.licht__weiter {
  padding-left: calc(26px + 0.9rem);
}

.schnitt {
  position: relative;
  margin: 0;
}

.schnitt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.schnitt__buehne {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: color-mix(in oklch, var(--marke) 10%, var(--nacht));
  overflow-x: auto;
}

.schnitt__svg {
  display: block;
  width: 100%;
  min-width: 520px;
  height: auto;
}

.schnitt__schalter {
  display: inline-flex;
  gap: 2px;
  margin-top: 0.75rem;
  padding: 3px;
  border: 1px solid var(--linie-hell);
  border-radius: var(--radius);
}

.schnitt__schalter label {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.4rem 0.9rem;
  border-radius: 2px;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-leise);
  cursor: pointer;
}

#schnitt-aus:checked ~ .schnitt__schalter label[for='schnitt-aus'],
#schnitt-an:checked ~ .schnitt__schalter label[for='schnitt-an'] {
  background: var(--marke);
  color: #ffffff;
}

.schnitt:has(input:focus-visible) .schnitt__schalter {
  outline: 2px solid var(--licht);
  outline-offset: 3px;
}

.sn-rohbau {
  fill: color-mix(in oklch, var(--marke) 45%, var(--nacht));
  stroke: var(--linie-hell);
  stroke-width: 1;
}

.sn-boden {
  fill: color-mix(in oklch, var(--marke) 22%, var(--nacht));
  stroke: var(--linie-hell);
  stroke-width: 1;
}

.sn-decke {
  fill: color-mix(in oklch, var(--marke) 70%, var(--nacht));
  stroke: var(--linie-hell);
  stroke-width: 1;
}

.sn-geraet {
  fill: var(--nacht-3);
  stroke: var(--licht);
  stroke-width: 1;
}

.sn-klappe {
  stroke: var(--licht);
  stroke-width: 2;
  stroke-dasharray: 5 4;
}

.sn-fels {
  fill: #6d6a62;
  stroke: #8d897f;
  stroke-width: 1;
  transition: fill 0.6s ease;
}

.sn-rohr {
  fill: none;
  stroke: var(--licht);
  stroke-width: 2;
  stroke-dasharray: 6 4;
}

.sn-dose {
  fill: var(--nacht-3);
  stroke: var(--licht);
  stroke-width: 1;
}

.sn-led {
  fill: #6d6a62;
  transition: fill 0.4s ease;
}

.sn-licht {
  fill: #ffd9a0;
  opacity: 0;
  filter: blur(10px);
  transition: opacity 0.6s ease;
}

.sn-schatten {
  fill: #1a1814;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.sn-kante {
  fill: none;
  stroke: #ffe7c2;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.sn-zeiger path {
  fill: none;
  stroke: var(--text-leise);
  stroke-width: 1;
}

.sn-text {
  fill: var(--text);
  font-family: 'Source Sans 3', ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
}

.sn-text--licht {
  fill: #ffd9a0;
}

.sn-stempel {
  fill: var(--text-leise);
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: 10px;
  letter-spacing: 0.14em;
}

.sn-nur-an {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.schnitt:has(#schnitt-an:checked) .sn-nur-an {
  opacity: 1;
}

/* Licht an: Voute leuchtet, Relief bekommt Kanten und Schatten */
.schnitt:has(#schnitt-an:checked) .sn-licht {
  opacity: 0.55;
}

.schnitt:has(#schnitt-an:checked) .sn-led {
  fill: #fff4e0;
}

.schnitt:has(#schnitt-an:checked) .sn-fels {
  fill: #a39a88;
}

.schnitt:has(#schnitt-an:checked) .sn-schatten {
  opacity: 0.85;
}

.schnitt:has(#schnitt-an:checked) .sn-kante {
  opacity: 0.9;
}

/* Kostenfaktoren */
.faktoren {
  display: grid;
  gap: 1px;
  margin: 0;
  background: var(--linie);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
}

.faktoren > div {
  padding: 1.25rem;
  background: var(--grund);
}

.faktoren dt {
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.faktoren dd {
  margin: 0;
  font-size: var(--t-klein);
  color: var(--text-leise);
}

/* Nachbarleistungen am Ende */
.nachbarn {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.nachbarn ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}

@media (min-width: 40rem) {
  .spalten--vier,
  .faktoren {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .seitenhero__raster {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }

  .licht {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }

  .schnitt__svg {
    min-width: 0;
  }

  .spalten--vier,
  .faktoren {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ==========================================================================
   Unterseiten: Bildplaetze (Musterflaechen, Einsatzorte, Grossbild, Kosten)
   ========================================================================== */

/* Einsatzorte als Bildkacheln: zwei statt vier Spalten, damit die Fotos gross
   bleiben und der Text darunter nicht zur Spalte schrumpft. */
.bildkachel--ort {
  cursor: default;
}

/* Breiteres Format, weil hier nur zwei Kacheln nebeneinander stehen */
.bildkachel--ort .bildkachel__bild img {
  aspect-ratio: 16 / 10;
  /* Die Ortsbilder sind Nachtmotive und von sich aus dunkel, die 0.55 der
     Startseitenkacheln machen sie unlesbar. */
  filter: brightness(0.92) saturate(0.95);
}

.bildkachel--ort:hover .bildkachel__bild img,
.bildkachel--ort:focus-within .bildkachel__bild img {
  filter: brightness(1.12) saturate(1);
}

h3.bildkachel__name {
  margin: 0;
}

.bildkachel--ort .bildkachel__name {
  font-size: clamp(1.125rem, 2.4vw, 1.3125rem);
}

.bildkachel__inhalt p {
  margin: 0;
  font-size: var(--t-klein);
  color: var(--text-leise);
}

/* Musterflaechen: drei Steinarten nebeneinander */
.muster {
  list-style: none;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.muster__stueck {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--nacht-2);
}

.muster__stueck img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: brightness(0.72) saturate(0.9);
  transition: filter 0.45s ease, transform 0.6s ease;
}

.muster__stueck:hover img {
  filter: brightness(0.95) saturate(1);
  transform: scale(1.03);
}

.muster__text {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 1rem 1.15rem;
  background: linear-gradient(
    to top,
    color-mix(in oklch, var(--nacht) 92%, transparent) 25%,
    transparent
  );
}

.muster__name {
  display: block;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: 1.0625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.muster__satz {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--t-klein);
  color: var(--text-leise);
}

/* Grossbild ueber die volle Breite: Atempause zwischen zwei Textsektionen */
.grossbild {
  margin: 0;
  position: relative;
}

.grossbild img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  filter: brightness(0.78) saturate(0.92);
}

.grossbild figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding-block: clamp(1.25rem, 3vw, 2.25rem);
  background: linear-gradient(
    to top,
    color-mix(in oklch, var(--nacht) 88%, transparent) 30%,
    transparent
  );
}

.grossbild__text {
  display: block;
  max-width: 44ch;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: clamp(1rem, 2.2vw, 1.375rem);
  line-height: 1.35;
}

@media (max-width: 47.9375rem) {
  .grossbild img {
    aspect-ratio: 4 / 3;
  }
}

/* Kosten: Bild neben den Faktoren */
.kosten__raster {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
}

.kosten__bild {
  margin: 0;
}

.kosten__bild img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  filter: brightness(0.8) saturate(0.9);
}

/* Kurze Faktorenliste (Ladesaeulen): quadratisches Bild, sonst haengt es unten heraus */
.kosten__bild--quadrat img {
  aspect-ratio: 1 / 1;
}

.kosten__bild figcaption {
  margin-top: 0.75rem;
  font-size: var(--t-klein);
  color: var(--text-leise);
}

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

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

  .kosten__raster {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }

  .kosten__raster .faktoren {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Die Marke sitzt im Bildcontainer, der dafuer relativ positioniert sein muss */
.muster__stueck,
.kosten__bild {
  position: relative;
}

/* Hinweiskasten auf Leistungsseiten: abgesetzter Absatz mit Stand-Datum, z.B. Foerderung */
.hinweis {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--linie);
  border-left: 2px solid var(--licht);
  border-radius: var(--radius);
  background: color-mix(in oklch, var(--marke) 16%, var(--nacht));
}

.hinweis h3 {
  margin: 0 0 0.5rem;
  font-size: 1.0625rem;
}

.hinweis p {
  margin: 0;
  max-width: 78ch;
  color: var(--text-leise);
}

/* ==========================================================================
   Wallbox-Schnitt: vom Zaehlerschrank zur Wallbox, zwei Montagearten
   ========================================================================== */

.wz {
  position: relative;
  margin: 0;
}

.wz input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.wz__buehne {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: color-mix(in oklch, var(--marke) 10%, var(--nacht));
  overflow-x: auto;
}

.wz-svg {
  display: block;
  width: 100%;
  min-width: 620px;
  height: auto;
}

.wz__schalter {
  display: inline-flex;
  gap: 2px;
  margin-top: 0.75rem;
  padding: 3px;
  border: 1px solid var(--linie-hell);
  border-radius: var(--radius);
}

.wz__schalter label {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.4rem 0.9rem;
  border-radius: 2px;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-leise);
  cursor: pointer;
}

#wz-wand:checked ~ .wz__schalter label[for='wz-wand'],
#wz-stele:checked ~ .wz__schalter label[for='wz-stele'] {
  background: var(--marke);
  color: #ffffff;
}

.wz:has(input:focus-visible) .wz__schalter {
  outline: 2px solid var(--licht);
  outline-offset: 3px;
}

/* Baukoerper und Grund */
.wz-erdreich { fill: color-mix(in oklch, var(--marke) 14%, var(--nacht)); }
.wz-gelaende { fill: none; stroke: var(--linie-hell); stroke-width: 1.5; }
.wz-pflaster { fill: color-mix(in oklch, var(--marke) 26%, var(--nacht)); stroke: var(--linie-hell); stroke-width: 1; }
.wz-fuge { fill: none; stroke: var(--linie); stroke-width: 1; }
.wz-innen { fill: color-mix(in oklch, var(--marke) 8%, var(--nacht)); }
.wz-wand { fill: color-mix(in oklch, var(--marke) 46%, var(--nacht)); stroke: var(--linie-hell); stroke-width: 1; }
.wz-fundament { fill: color-mix(in oklch, var(--marke) 34%, var(--nacht)); stroke: var(--linie-hell); stroke-width: 1; }
.wz-decke { fill: color-mix(in oklch, var(--marke) 62%, var(--nacht)); stroke: var(--linie-hell); stroke-width: 1; }
.wz-boden { fill: color-mix(in oklch, var(--marke) 34%, var(--nacht)); stroke: var(--linie-hell); stroke-width: 1; }

/* Zaehlerschrank */
.wz-schrank { fill: var(--nacht-3); stroke: var(--licht); stroke-width: 1.5; }
.wz-zaehler { fill: color-mix(in oklch, var(--marke) 40%, var(--nacht)); stroke: var(--linie-hell); stroke-width: 1; }
.wz-zaehler-text { fill: var(--licht); font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
 font-stretch: 125%; font-size: 13px; letter-spacing: 0.08em; }
.wz-sicherung { fill: color-mix(in oklch, var(--marke) 55%, var(--nacht)); stroke: var(--linie-hell); stroke-width: 0.75; }
.wz-abgang { fill: var(--licht); stroke: var(--licht); stroke-width: 1; }

/* Leitung, Graben, Rohr */
.wz-leitung {
  fill: none;
  stroke: var(--licht);
  stroke-width: 2.5;
  stroke-dasharray: 7 5;
  stroke-linecap: round;
}
.wz-durchbruch { fill: color-mix(in oklch, var(--marke) 20%, var(--nacht)); stroke: var(--licht); stroke-width: 1; }
.wz-grabenkante { fill: none; stroke: var(--licht); stroke-width: 1.5; stroke-dasharray: 5 5; opacity: 0.55; }
.wz-sandbett { fill: color-mix(in oklch, var(--marke) 36%, var(--nacht)); stroke: var(--linie); stroke-width: 1; }
.wz-warnband { fill: none; stroke: #e0a13c; stroke-width: 3; stroke-dasharray: 12 6; }
.wz-mass { fill: none; stroke: var(--text-leise); stroke-width: 1; }
.wz-mass-text { fill: var(--text-leise); font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
 font-stretch: 125%; font-size: 13px; letter-spacing: 0.06em; }

/* Wallbox und Stele */
.wz-wallbox { fill: var(--nacht-3); stroke: var(--licht); stroke-width: 1.5; rx: 6; }
.wz-stele { fill: var(--nacht-3); stroke: var(--licht); stroke-width: 1.5; }
.wz-ring {
  fill: none;
  stroke: var(--licht);
  stroke-width: 3.5;
  filter: drop-shadow(0 0 6px color-mix(in oklch, var(--licht) 70%, transparent));
}
.wz-schlitz { fill: color-mix(in oklch, var(--marke) 50%, var(--nacht)); }
.wz-kabel { fill: none; stroke: var(--text-leise); stroke-width: 4; stroke-linecap: round; }

/* Auto */
.wz-auto { fill: color-mix(in oklch, var(--marke) 52%, var(--nacht)); stroke: var(--linie-hell); stroke-width: 1.5; stroke-linejoin: round; }
.wz-scheibe { fill: color-mix(in oklch, var(--marke) 22%, var(--nacht)); stroke: var(--linie-hell); stroke-width: 1; }
.wz-rad { fill: var(--nacht); stroke: var(--linie-hell); stroke-width: 2; }
.wz-felge { fill: color-mix(in oklch, var(--marke) 45%, var(--nacht)); }
.wz-klappe { fill: var(--nacht-3); stroke: var(--licht); stroke-width: 1.5; }
.wz-klappe-puls { fill: none; stroke: var(--licht); stroke-width: 2; opacity: 0; }

/* Beschriftungen */
.wz-zeiger path { fill: none; stroke: var(--text-leise); stroke-width: 1; }
.wz-zeiger circle { fill: var(--licht); }
.wz-text { fill: var(--text); font-family: 'Source Sans 3', ui-sans-serif, system-ui, sans-serif; font-size: 15px; }
.wz-stempel { fill: var(--text-leise); font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
 font-stretch: 125%; font-size: 11px; letter-spacing: 0.14em; }

/* --- Photovoltaik: ein Tag mit eigener Anlage ---------------------------- */
/* Drei feste Bilder nebeneinander: morgens, mittags, abends. Der Umschalter
   (mit oder ohne Speicher) wechselt Speicherkasten, Leitungen und Saetze,
   ohne Skript, ueber zwei Radios und :has().
   Vorher lief der Tag als Film durch eine einzige Szene. Verworfen am
   21.09.2026: Man musste auf die passende Phase warten, und der Vergleich
   zwischen den Tageszeiten stand nie gleichzeitig im Bild. Generator der
   Vorfassung ist werkzeuge/pvtag.py, die gueltige Fassung pvdrei.py. */

.pv {
  position: relative;
  margin: 0;
}

.pv input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pv__schalter {
  display: inline-flex;
  gap: 2px;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  padding: 3px;
  border: 1px solid var(--linie-hell);
  border-radius: var(--radius);
}

.pv__schalter label {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.4rem 0.9rem;
  border-radius: 2px;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-leise);
  cursor: pointer;
}

#pv-ohne:checked ~ .pv__schalter label[for='pv-ohne'],
#pv-mit:checked ~ .pv__schalter label[for='pv-mit'] {
  background: var(--marke);
  color: #ffffff;
}

.pv:has(input:focus-visible) .pv__schalter {
  outline: 2px solid var(--licht);
  outline-offset: 3px;
}

/* Die drei Karten */
.pv__reihe {
  display: grid;
  gap: clamp(1rem, 3vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pv-karte {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: clamp(0.75rem, 2vw, 1rem);
  background: color-mix(in oklch, var(--marke) 10%, var(--nacht));
}

.pvd {
  display: block;
  width: 100%;
  height: auto;
}

.pv-karte__zeit {
  margin: 0.9rem 0 0.3rem;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--licht);
}

.pv-karte__satz {
  margin: 0;
  font-size: var(--t-klein);
  color: var(--text);
}

/* Der Vergleich zwischen den drei Tageszeiten ist der Sinn der Reihe, deshalb
   stehen sie schon auf dem Tablet nebeneinander. */
@media (min-width: 44rem) {
  .pv__reihe {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Was der Umschalter wechselt. Ausgeblendet wird mit display, nicht mit
   opacity: Die laufende Strichelung setzt opacity selbst. */
.pv:has(#pv-ohne:checked) .pvd-nur-mit,
.pv:has(#pv-mit:checked) .pvd-nur-ohne {
  display: none;
}

/* Himmel: morgens daemmrig, mittags hell, abends dunkel. Die Kausalitaet muss
   im Bild stehen, nicht nur im Text. */
.pvd-himmel--morgen {
  fill: color-mix(in oklch, var(--marke) 12%, var(--nacht));
}

.pvd-himmel--mittag {
  fill: color-mix(in oklch, var(--marke) 40%, var(--nacht));
}

.pvd-himmel--abend {
  fill: color-mix(in oklch, var(--marke) 5%, var(--nacht));
}

.pvd-erde {
  fill: color-mix(in oklch, var(--marke) 24%, var(--nacht));
}

.pvd-boden {
  fill: none;
  stroke: var(--linie-hell);
  stroke-width: 2;
}

.pvd-einfahrt {
  fill: none;
  stroke: var(--linie-hell);
  stroke-width: 12;
  opacity: 0.5;
}

.pvd-fuge {
  fill: none;
  stroke: color-mix(in oklch, var(--marke) 40%, var(--nacht));
  stroke-width: 1.2;
}

/* Haus */
.pvd-wand {
  fill: color-mix(in oklch, var(--marke) 34%, var(--nacht));
  stroke: var(--linie-hell);
  stroke-width: 1.5;
}

.pvd-dach {
  fill: color-mix(in oklch, var(--marke) 52%, var(--nacht));
  stroke: var(--linie-hell);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.pvd-fenster,
.pvd-tuer {
  fill: color-mix(in oklch, var(--marke) 18%, var(--nacht));
  stroke: var(--linie-hell);
  stroke-width: 1.5;
}

.pvd-fensterlicht {
  fill: #f2c98a;
  opacity: 0.85;
}

.pvd-sprosse {
  fill: none;
  stroke: var(--linie-hell);
  stroke-width: 1;
  opacity: 0.7;
}

.pvd-klinke {
  fill: var(--linie-hell);
}

.pvd-modul {
  fill: color-mix(in oklch, var(--licht) 18%, var(--nacht));
  stroke: var(--licht);
  stroke-width: 1.3;
  stroke-linejoin: round;
  opacity: 0.45;
}

.pvd-modul--hell {
  fill: color-mix(in oklch, var(--licht) 55%, var(--nacht));
  opacity: 1;
}

/* Sonne */
.pvd-sonne {
  fill: #f4d08a;
}

.pvd-strahl {
  fill: none;
  stroke: #f4d08a;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.85;
}

/* Auto, Ladepunkt und Netz */
.pvd-auto {
  fill: color-mix(in oklch, var(--marke) 46%, var(--nacht));
  stroke: var(--linie-hell);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.pvd-scheibe {
  fill: color-mix(in oklch, var(--marke) 22%, var(--nacht));
  stroke: var(--linie-hell);
  stroke-width: 1.2;
}

.pvd-rad {
  fill: color-mix(in oklch, var(--marke) 20%, var(--nacht));
  stroke: var(--linie-hell);
  stroke-width: 2;
}

.pvd-felge {
  fill: color-mix(in oklch, var(--marke) 44%, var(--nacht));
}

.pvd-klappe {
  fill: none;
  stroke: var(--licht);
  stroke-width: 2;
}

.pvd-fahrt {
  fill: none;
  stroke: var(--linie-hell);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.6;
}

.pvd-wallbox {
  fill: color-mix(in oklch, var(--marke) 54%, var(--nacht));
  stroke: var(--linie-hell);
  stroke-width: 1.5;
}

.pvd-wallbox-ring {
  fill: none;
  stroke: var(--licht);
  stroke-width: 2;
}

.pvd-kabel {
  fill: none;
  stroke: var(--linie-hell);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.pvd-mast {
  fill: none;
  stroke: var(--linie-hell);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0.55;
}

/* Der Mast fuehrt, wenn das Haus Strom kauft */
.pvd-mast--an {
  stroke: var(--licht);
  opacity: 1;
}

/* Der Speicher an der Fassade: der sichtbare Unterschied des Umschalters */
.pvd-speicher {
  fill: color-mix(in oklch, var(--marke) 54%, var(--nacht));
  stroke: var(--linie-hell);
  stroke-width: 1.5;
}

.pvd-speicher-kopf {
  fill: var(--linie-hell);
}

.pvd-speicher-schacht {
  fill: color-mix(in oklch, var(--marke) 18%, var(--nacht));
}

.pvd-speicher-stand {
  fill: color-mix(in oklch, var(--licht) 62%, var(--nacht));
}

/* Leitungen: ruhend grau, fuehrend in Lichtfarbe. Der Strom laeuft durch die
   Leitung, nicht als Punkte darauf (die sahen aus wie Murmeln). Jeder aktive
   Weg ist im Generator in Flussrichtung geschrieben. */
.pvd-leitung {
  fill: none;
  stroke: var(--linie-hell);
  stroke-width: 2;
  stroke-linejoin: round;
  opacity: 0.22;
}

.pvd-strom {
  fill: none;
  stroke: var(--licht);
  stroke-width: 3.2;
  filter: drop-shadow(0 0 3px color-mix(in oklch, var(--licht) 60%, transparent));
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 8 12;
}

@media (prefers-reduced-motion: no-preference) {
  .pvd-strom {
    animation: pvd-fliesst 1.1s linear infinite;
  }
}

@keyframes pvd-fliesst {
  to { stroke-dashoffset: -20; }
}

/* Umschalten zwischen den beiden Montagearten */
.wz-nur-wand,
.wz-nur-stele {
  transition: opacity 0.45s ease;
}

.wz:has(#wz-wand:checked) .wz-nur-stele,
.wz:has(#wz-stele:checked) .wz-nur-wand {
  opacity: 0;
  pointer-events: none;
}

/* Strom fliesst sichtbar durch die Leitung, wie in den Zeichnungen der Startseite */
@media (prefers-reduced-motion: no-preference) {
  .wz-leitung {
    animation: wz-strom 3s linear infinite;
  }

  .wz-klappe-puls {
    animation: wz-puls 2.4s ease-in-out infinite;
  }
}

@keyframes wz-strom {
  to { stroke-dashoffset: -24; }
}

@keyframes wz-puls {
  0%, 100% { opacity: 0; r: 11; }
  40% { opacity: 0.8; r: 11; }
  100% { opacity: 0; r: 20; }
}

.wz-korn { fill: color-mix(in oklch, var(--marke) 62%, var(--nacht)); }

/* Leistungsvergleich: volle und gedrosselte Ladeleistung als Balken */
.leistung {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}

.leistung__balken {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: color-mix(in oklch, var(--marke) 18%, var(--nacht));
}

.leistung__zeile {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.leistung__name {
  font-size: var(--t-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.leistung__spur {
  display: block;
  height: 14px;
  border-radius: 2px;
  background: color-mix(in oklch, var(--marke) 34%, var(--nacht));
  overflow: hidden;
}

.leistung__fuellung {
  display: block;
  width: var(--anteil);
  height: 100%;
  background: var(--marke-hell, var(--marke));
  border-right: 2px solid var(--licht);
}

.leistung__fuellung--gedimmt {
  background: color-mix(in oklch, var(--marke) 62%, var(--nacht));
}

.leistung__wert {
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--licht);
}

.leistung__fuss {
  margin: 0;
  font-size: var(--t-klein);
  color: var(--text-leise);
}

.leistung__text h3 {
  margin: 0 0 0.4rem;
}

.leistung__text h3 + p {
  margin: 0 0 1.5rem;
}

.leistung__text p:last-child {
  margin-bottom: 0;
}

@media (min-width: 64rem) {
  .leistung {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .leistung__zeile {
    grid-template-columns: 1fr;
  }
}

/* Duo: Bild und Textpunkte nebeneinander, statt Bilder lose zwischen die Sektionen zu legen */
.duo {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}

.duo__bild {
  margin: 0;    /* figure bringt eigene Raender mit, die das Bild aus der Spalte ruecken */
}

.duo__bild img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  filter: brightness(0.88) saturate(0.92);
}

.duo__text {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

.duo__punkt h3 {
  margin: 0 0 0.4rem;
}

.duo__punkt p {
  margin: 0;
}

@media (min-width: 64rem) {
  .duo {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: stretch;
  }

  /* Das Bild laeuft ueber die volle Hoehe der Textspalte, sonst bleibt darunter Loch */
  .duo__bild {
    height: 100%;
  }

  .duo__bild img {
    height: 100%;
    aspect-ratio: auto;
  }

  /* Gespiegelt: Text links, Bild rechts. Wie .raum--gedreht auf der Startseite,
     damit zwei Duo-Sektionen hintereinander nicht gleich aussehen. */
  .duo--gedreht {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }
}

/* Leistungsvergleich: volle und gedrosselte Ladeleistung als Balken */
.leistung {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}

.leistung__balken {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: color-mix(in oklch, var(--marke) 18%, var(--nacht));
}

.leistung__zeile {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.leistung__name {
  font-size: var(--t-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.leistung__spur {
  display: block;
  height: 14px;
  border-radius: 2px;
  background: color-mix(in oklch, var(--marke) 34%, var(--nacht));
  overflow: hidden;
}

.leistung__fuellung {
  display: block;
  width: var(--anteil);
  height: 100%;
  background: var(--marke-hell, var(--marke));
  border-right: 2px solid var(--licht);
}

.leistung__fuellung--gedimmt {
  background: color-mix(in oklch, var(--marke) 62%, var(--nacht));
}

.leistung__wert {
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--licht);
}

.leistung__fuss {
  margin: 0;
  font-size: var(--t-klein);
  color: var(--text-leise);
}

.leistung__text h3 {
  margin: 0 0 0.4rem;
}

.leistung__text h3 + p {
  margin: 0 0 1.5rem;
}

.leistung__text p:last-child {
  margin-bottom: 0;
}

@media (min-width: 64rem) {
  .leistung {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .leistung__zeile {
    grid-template-columns: 1fr;
  }
}

/* Bildband: drei Aufnahmen nebeneinander, bricht lange Textstrecken auf */
.band {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.bildband {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.bildband__stueck {
  display: grid;
  gap: 0.75rem;
}

.bildband__stueck img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  filter: brightness(0.86) saturate(0.92);
  transition: filter 0.45s ease;
}

.bildband__stueck:hover img {
  filter: brightness(1) saturate(1);
}

.bildband__text {
  font-size: var(--t-klein);
  color: var(--text-leise);
  max-width: 34ch;
}

/* Zwei grosse Aufnahmen statt drei kleiner */
.bildband--zwei .bildband__stueck img {
  aspect-ratio: 3 / 2;
}

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

  .bildband--zwei {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1rem, 3vw, 2rem);
  }
}

/* --- Ladesaeulen: vier Autos an einem Anschluss -------------------------- */
/* Eigenes Element der Seite /ladesaeulen-dresden/. Zeigt in einem Bild, warum
   Lastmanagement bei mehreren Ladepunkten der Regelfall ist: Ohne Steuerung
   rechnet der Netzbetreiber mit voller Gleichzeitigkeit, die Summe liegt dann
   weit ueber dem, was der Anschluss hergibt. Umschalter ueber zwei Radios und
   :has(), kein Skript, wie bei Tag und Nacht auf der Startseite. */

.lm {
  /* Beide Spuren haben dieselbe Skala: Die Summe ist die Addition der vier
     Balken darueber, sonst stimmt das Bild arithmetisch nicht. */
  --lm-grenze: 46%;          /* Position der Anschlussmarke in der Spur */
  --lm-einzeln: 24%;         /* Fuellung je Ladepunkt, volle Ladeleistung */
  --lm-summe: 96%;           /* vier mal voll, weit ueber dem Anschluss */
  position: relative;
  margin: 0;
}

.lm input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lm__schalter {
  display: inline-flex;
  gap: 2px;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  padding: 3px;
  border: 1px solid var(--linie-hell);
  border-radius: var(--radius);
}

.lm__schalter label {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.4rem 0.9rem;
  border-radius: 2px;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-leise);
  cursor: pointer;
}

#lm-mit:checked ~ .lm__schalter label[for='lm-mit'],
#lm-ohne:checked ~ .lm__schalter label[for='lm-ohne'] {
  background: var(--marke);
  color: #ffffff;
}

.lm:has(input:focus-visible) .lm__schalter {
  outline: 2px solid var(--licht);
  outline-offset: 3px;
}

.lm__tafel {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: color-mix(in oklch, var(--marke) 18%, var(--nacht));
}

.lm__punkte {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lm__zeile {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.lm__name {
  font-size: var(--t-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.lm__spur {
  position: relative;
  display: block;
  height: 14px;
  border-radius: 2px;
  background: color-mix(in oklch, var(--marke) 34%, var(--nacht));
}

.lm__fuellung {
  display: block;
  width: var(--lm-einzeln);
  height: 100%;
  border-radius: 2px;
  background: var(--marke);
  border-right: 2px solid var(--licht);
  transition: width 0.5s ease;
}

/* Die Summenzeile ist der Punkt der Grafik, deshalb hoeher und abgesetzt */
.lm__zeile--summe {
  margin: 1.75rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linie);
}

.lm__zeile--summe .lm__spur {
  height: 22px;
}

.lm__fuellung--summe {
  width: var(--lm-summe);
  background: color-mix(in oklch, var(--licht) 42%, var(--nacht));
}

/* Was der Anschluss hergibt: senkrechter Strich mit Beschriftung darunter */
.lm__marke {
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: var(--lm-grenze);
  width: 2px;
  background: var(--licht-hell);
}

.lm__marke span {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  white-space: nowrap;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--licht-hell);
}

.lm__satz {
  margin: 2.75rem 0 0;
  font-size: var(--t-klein);
  color: var(--text-leise);
  max-width: 62ch;
}

/* Mit Lastmanagement teilen sich die vier, was da ist: Summe genau an der
   Marke. Ohne Lastmanagement laeuft jeder voll und die Summe weit darueber,
   in Warmton, weil die Palette kein Rot kennt. */
.lm:has(#lm-mit:checked) {
  --lm-einzeln: 11.5%;
  --lm-summe: 46%;
}

.lm:has(#lm-mit:checked) .lm__nur-ohne,
.lm:has(#lm-ohne:checked) .lm__nur-mit {
  display: none;
}

.lm:has(#lm-ohne:checked) .lm__fuellung--summe {
  background: repeating-linear-gradient(
    135deg,
    color-mix(in oklch, #f2c98a 46%, var(--nacht)) 0 8px,
    color-mix(in oklch, #f2c98a 30%, var(--nacht)) 8px 16px
  );
  border-right-color: #f2c98a;
}

@media (prefers-reduced-motion: reduce) {
  .lm__fuellung {
    transition: none;
  }
}

/* Seitenkopf mit groesserer Ueberschrift: Die H1 der Unterseiten war genauso gross
   wie jede H2 darunter, damit hatte die Seite keinen Hoehepunkt. Erst auf der Seite
   Elektroinstallation im Einsatz, bevor es auf die uebrigen Leistungsseiten geht. */
.seitenhero--gross h1 {
  font-size: clamp(1.75rem, 2.55vw + 0.9rem, 3.7rem);
}

/* ================================================================
   Sektion mit Foto im Hintergrund
   Das Bild liegt unscharf und abgedunkelt hinter dem Inhalt, nicht
   als eigener Block davor. Es kommt aus der Variablen --bildgrund,
   die im style-Attribut der Sektion steht, damit das Stylesheet
   keine Seiteninhalte kennt. Der Text laeuft darueber weiter mit
   der normalen Schriftfarbe.
   ================================================================ */
.sektion--bildgrund {
  position: relative;
  isolation: isolate;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  overflow: hidden;
}

.sektion--bildgrund::before {
  content: '';
  position: absolute;
  inset: -2rem;                 /* Ueberstand, damit die Unschaerfe keine hellen Raender zieht */
  z-index: -2;
  background-image: var(--bildgrund);
  background-size: cover;
  background-position: center;
  filter: blur(6px) brightness(var(--bildgrund-helligkeit, 0.5)) saturate(0.8);
}

/* Dunkler Schleier darueber: oben am dunkelsten, weil dort der Sektionskopf steht.
   In der Mitte darf das Foto durchkommen, unten deckt es wieder ab. */
.sektion--bildgrund::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    color-mix(in oklch, var(--nacht) 82%, transparent),
    color-mix(in oklch, var(--nacht) 58%, transparent) 55%,
    color-mix(in oklch, var(--nacht) 72%, transparent)
  );
}

@media (prefers-reduced-motion: no-preference) {
  /* Das Foto wandert beim Scrollen langsam, damit die Sektion Tiefe bekommt */
  .sektion--bildgrund::before {
    animation-name: bildgrund-wandert;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
}

@keyframes bildgrund-wandert {
  from { transform: scale(1.06) translateY(-1.5%); }
  to   { transform: scale(1.06) translateY(1.5%); }
}

/* Faktorenliste auf einem Bildgrund: keine schwarze Tafel ueber dem Foto,
   sondern vier einzelne Karten aus mattiertem Glas, die das Motiv durchlassen. */
.sektion--bildgrund .faktoren {
  counter-reset: faktor;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}

.sektion--bildgrund .faktoren > div {
  counter-increment: faktor;
  position: relative;
  padding: clamp(1.4rem, 2.2vw, 1.9rem) clamp(1.25rem, 2vw, 1.6rem);
  background: color-mix(in oklch, var(--nacht) 62%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid color-mix(in oklch, var(--licht) 24%, transparent);
  border-radius: var(--radius);
}

/* Feine Lichtkante oben auf jeder Karte, dasselbe Motiv wie die Lichtvoute */
.sektion--bildgrund .faktoren > div::after {
  content: '';
  position: absolute;
  inset: -1px 1.25rem auto;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    color-mix(in oklch, var(--licht-hell) 70%, transparent),
    transparent
  );
}

.sektion--bildgrund .faktoren dt::before {
  content: counter(faktor, decimal-leading-zero);
  display: block;
  margin-bottom: 0.65rem;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--licht);
}

.sektion--bildgrund .faktoren dt {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.55rem;
}

.sektion--bildgrund .faktoren dd {
  color: var(--text);
  opacity: 0.86;
}

/* Hinweiskasten auf einem Bildgrund: dieselbe Glasbehandlung wie die Faktorenkarten */
.sektion--bildgrund .hinweis {
  background: color-mix(in oklch, var(--nacht) 62%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border-color: color-mix(in oklch, var(--licht) 24%, transparent);
  border-left-color: var(--licht);
}

/* Der Zeitstrahl liegt auf einem Bildgrund ebenfalls auf Glaskarten,
   die Schrittnummer steht dann im Kasten statt auf der Linie. */
.sektion--bildgrund .strahl__schritt {
  padding: clamp(1.4rem, 2.2vw, 1.9rem) clamp(1.25rem, 2vw, 1.6rem);
  background: color-mix(in oklch, var(--nacht) 62%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid color-mix(in oklch, var(--licht) 24%, transparent);
  border-radius: var(--radius);
}

.sektion--bildgrund .strahl__schritt::before {
  position: static;
  display: block;
  padding: 0;
  margin-bottom: 0.65rem;
  background: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.sektion--bildgrund .strahl__schritt p {
  color: var(--text);
  opacity: 0.86;
}

/* ================================================================
   Über uns
   ================================================================ */

/* Im Seitenkopf steht hier ein Porträt im Hochformat, deshalb bekommt
   das Bild die schmalere Spalte und nicht wie sonst die breitere. */
.seitenhero__bild--hoch img {
  aspect-ratio: 4 / 5;
  object-position: center 20%;
}

@media (min-width: 64rem) {
  .seitenhero__raster--portrait,
  .seitenhero__raster--textbreit {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  }
}

/* Zwei Punkte nebeneinander statt untereinander, wenn kein Bild danebensteht */
@media (min-width: 48rem) {
  .duo__text--breit {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.75rem, 4vw, 3rem);
  }
}

/* --- Schnittstellen-Bild: wer mit wem reden muss ----------------------- */

.wege {
  margin-top: clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto;           /* auf schmalen Bildschirmen scrollt die Grafik selbst */
}

.wege__bild {
  display: block;
  width: 100%;
  min-width: 34rem;
  height: auto;
}

.wege__kopf {
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--licht);
}

.wege__fuss {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 15px;
  fill: var(--text-leise);
}

.wege__knoten rect {
  fill: color-mix(in oklch, var(--marke) 20%, var(--nacht));
  stroke: var(--linie-hell);
  stroke-width: 1;
}

.wege__knoten text {
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: 16px;
  font-weight: 600;
  text-anchor: middle;
  fill: var(--text);
}

.wege__knoten--bauherr rect {
  fill: color-mix(in oklch, var(--marke) 34%, var(--nacht));
}

.wege__knoten--wir rect {
  fill: var(--marke);
  stroke: var(--licht);
}

.wege__klein {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 15px;
  text-anchor: middle;
  fill: var(--text-leise);
}

.wege__linie {
  fill: none;
  stroke: var(--linie-hell);
  stroke-width: 1.5;
}

/* Die Abstimmung der Fachbetriebe untereinander ist der eigentliche Aufwand,
   deshalb gestrichelt: sie steht im Angebot von niemandem. */
.wege__linie--quer {
  stroke-dasharray: 5 5;
  stroke: color-mix(in oklch, var(--licht) 55%, var(--nacht));
}

.wege__linie--stark {
  stroke: var(--licht);
  stroke-width: 2.5;
}

.wege__trenner {
  stroke: var(--linie);
  stroke-width: 1;
}

@media (prefers-reduced-motion: no-preference) {
  /* Die Wege zeichnen sich beim Hereinscrollen, die kurze Seite zuerst */
  .wege__linie {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation-name: weg-zeichnet;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: cover 15% cover 45%;
  }

  .wege__linie--quer {
    stroke-dasharray: 5 5;
    stroke-dashoffset: 0;
    animation-name: weg-blendet;
    animation-range: cover 30% cover 55%;
  }
}

@keyframes weg-zeichnet {
  to { stroke-dashoffset: 0; }
}

@keyframes weg-blendet {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Auch Textpunkte auf einem Bildgrund stehen auf Glas, sonst liegt die Schrift
   direkt im Motiv und wird unruhig. */
.sektion--bildgrund .duo__punkt {
  padding: clamp(1.4rem, 2.2vw, 1.9rem) clamp(1.25rem, 2vw, 1.6rem);
  background: color-mix(in oklch, var(--nacht) 62%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid color-mix(in oklch, var(--licht) 24%, transparent);
  border-radius: var(--radius);
}

.sektion--bildgrund .duo__punkt p {
  color: var(--text);
  opacity: 0.86;
}

/* --- Das Zeichen als Lichtobjekt im Seitenkopf -------------------------- */

.seitenhero--zeichen {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Das Markenzeichen selbst, als Maske. So ist die Form garantiert die echte
   und nicht nachgezeichnet. Darin wandert ein Lichtstreifen wie in einer Voute. */
.zeichen-licht {
  position: absolute;
  z-index: -1;
  left: clamp(-9rem, -6vw, -2.5rem);
  top: 50%;
  translate: 0 -50%;
  width: min(34rem, 46vw);
  aspect-ratio: 420 / 385;
  pointer-events: none;
  opacity: 0.62;
  background: linear-gradient(
      108deg,
      transparent 34%,
      color-mix(in oklch, var(--licht) 42%, transparent) 46%,
      color-mix(in oklch, var(--licht-hell) 58%, transparent) 50%,
      color-mix(in oklch, var(--licht) 42%, transparent) 54%,
      transparent 66%
    ),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--marke) 46%, transparent),
      color-mix(in oklch, var(--marke) 14%, transparent)
    );
  background-size: 280% 100%, 100% 100%;
  background-position: 100% 0, 0 0;
  -webkit-mask-image: url('/assets/logo/formicas-zeichen-weiss.png');
  mask-image: url('/assets/logo/formicas-zeichen-weiss.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

@media (prefers-reduced-motion: no-preference) {
  .zeichen-licht {
    animation: zeichen-leuchtet 14s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }
}

@keyframes zeichen-leuchtet {
  0%,
  8% {
    background-position: 100% 0, 0 0;
  }
  58%,
  100% {
    background-position: -40% 0, 0 0;
  }
}

/* --- Drei Balken: Elektro, Licht, Wand ---------------------------------- */

.balken {
  display: grid;
  /* Untereinander brauchen die drei Säulen mehr Luft als Bild und Text
     innerhalb einer Säule, sonst verschwimmen die Gruppen. */
  gap: clamp(2.25rem, 6vw, 2.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.balken__saeule {
  display: grid;
  grid-template-rows: auto;
  gap: 1.25rem;
}

.balken__bild {
  position: relative;
  margin: 0;
  align-self: end;
  overflow: hidden;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}

.balken__bild img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: brightness(0.82) saturate(0.9);
  transition: filter 0.4s ease, scale 0.6s cubic-bezier(0.2, 0, 0.1, 1);
}

/* Lichtkante an der Oberkante jedes Balkens, sie zündet beim Überfahren */
.balken__bild::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--licht-hell), transparent);
  opacity: 0.35;
  transition: opacity 0.4s ease;
}

.balken__saeule:hover .balken__bild img {
  filter: brightness(1) saturate(1);
  scale: 1.03;
}

.balken__saeule:hover .balken__bild::after {
  opacity: 1;
}

.balken__name {
  margin: 0 0 0.35rem;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--licht);
}

.balken__text h3 {
  margin: 0 0 0.45rem;
  font-size: 1.0625rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.balken__text p:last-child {
  margin: 0;
  font-size: var(--t-klein);
  color: var(--text-leise);
}

@media (min-width: 52rem) {
  .balken {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(1.25rem, 2.5vw, 2rem);
  }

  /* Die drei Balken stehen auf einer Linie und sind unterschiedlich hoch,
     wie die drei Balken im Zeichen. --hoehe steuert den Anteil. */
  .balken__saeule {
    grid-template-rows: 1fr auto;
  }

  .balken__bild {
    height: calc(var(--hoehe) * 100%);
  }

  .balken__bild img {
    aspect-ratio: auto;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Die Balken wachsen beim Hereinscrollen von unten, einer nach dem anderen */
  .balken__bild {
    clip-path: inset(100% 0 0 0);
    animation-name: balken-waechst;
    animation-duration: auto;
    animation-timing-function: cubic-bezier(0.2, 0, 0.1, 1);
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: cover 12% cover 42%;
  }

  .balken__saeule:nth-child(2) .balken__bild {
    animation-range: cover 17% cover 47%;
  }

  .balken__saeule:nth-child(3) .balken__bild {
    animation-range: cover 22% cover 52%;
  }
}

@keyframes balken-waechst {
  to { clip-path: inset(0 0 0 0); }
}

/* --- Oberflaechen, die der Browser sonst selbst faerbt ------------------ */

::selection {
  background: color-mix(in oklch, var(--licht) 70%, var(--nacht));
  color: #fff;
}

:root {
  color-scheme: dark;
  accent-color: var(--licht);
  scrollbar-color: color-mix(in oklch, var(--marke) 60%, var(--nacht)) var(--nacht);
}

input,
textarea {
  caret-color: var(--licht-hell);
}

/* Kleines Bild von Ben im Kontakt-Abschluss: wer am anderen Ende der Nummer steht */
.signatur {
  display: grid;
  grid-template-columns: clamp(8.5rem, 20vw, 13rem) auto;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.4rem);
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
}

.signatur img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--linie-hell);
  border-radius: var(--radius);
  filter: brightness(0.92) saturate(0.95);
}

.signatur figcaption {
  display: grid;
  gap: 0.2rem;
}

.signatur__name {
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.signatur__was {
  font-size: var(--t-klein);
  color: var(--text-leise);
}

/* --- Offene Stellen: Zeilen zum Aufklappen ------------------------------ */

.stellen {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linie);
}

.stelle {
  border-bottom: 1px solid var(--linie);
}

.stelle__block > summary {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.35rem 1.5rem;
  padding: clamp(1.4rem, 3vw, 2.1rem) 0;
  cursor: pointer;
  list-style: none;
  transition: padding-left 0.35s cubic-bezier(0.2, 0, 0.1, 1);
}

.stelle__block > summary::-webkit-details-marker {
  display: none;
}

/* Das Licht läuft beim Überfahren an der Unterkante der Zeile entlang,
   wie eine Voute, die angeht. Offen bleibt es an. */
.stelle__block > summary::before {
  content: '';
  position: absolute;
  inset: auto 0 0 auto;
  width: 0;
  height: 1px;
  background: linear-gradient(to right, var(--licht), var(--licht-hell));
  box-shadow: 0 0 10px color-mix(in oklch, var(--licht) 60%, transparent);
  transition: width 0.45s cubic-bezier(0.2, 0, 0.1, 1);
}

.stelle__block > summary:hover,
.stelle__block > summary:focus-visible {
  padding-left: clamp(0.75rem, 1.5vw, 1.25rem);
}

.stelle__block > summary:hover::before,
.stelle__block > summary:focus-visible::before,
.stelle__block[open] > summary::before {
  width: 100%;
}

.stelle__kopf {
  display: grid;
  gap: 0.35rem;
}

.stelle__name {
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.stelle__zusatz {
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-leise);
}

.stelle__art {
  font-size: var(--t-klein);
  color: var(--text-leise);
}

.stelle__zeichen {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--linie-hell);
  border-radius: var(--radius);
  color: var(--licht-hell);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.stelle__zeichen svg {
  width: 1.1rem;
  height: 1.1rem;
}

.stelle__block > summary:hover .stelle__zeichen,
.stelle__block > summary:focus-visible .stelle__zeichen {
  background: var(--marke);
  color: #fff;
}

/* Aus dem Plus wird beim Aufklappen ein Kreuz, nur das Zeichen dreht sich */
.stelle__block[open] .stelle__zeichen {
  background: var(--marke);
  color: #fff;
}

.stelle__zeichen svg {
  transition: rotate 0.35s cubic-bezier(0.2, 0, 0.1, 1);
}

.stelle__block[open] .stelle__zeichen svg {
  rotate: 45deg;
}

.stelle__mehr {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(1.75rem, 3.5vw, 2.5rem);
}

.stelle__spalte h3 {
  margin: 0 0 0.6rem;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--licht);
}

.stelle__spalte ul {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stelle__spalte li {
  position: relative;
  padding-left: 1.15rem;
  font-size: var(--t-klein);
  color: var(--text-leise);
}

/* Der Haken im Logo-Duktus: zwei gerade Striche, keine Rundung */
.stelle__spalte li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.45rem;
  height: 0.25rem;
  border-left: 2px solid var(--licht);
  border-bottom: 2px solid var(--licht);
  rotate: -45deg;
}

.stelle__spalte--schluss p {
  margin: 0 0 1.25rem;
  font-size: var(--t-klein);
  color: var(--text);
}

.stelle--offen .stelle__name {
  color: var(--licht-hell);
}

@media (min-width: 52rem) {
  .stelle__mehr {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Der Inhalt fährt beim Aufklappen auf, ohne Skript */
  .stelle__block[open] .stelle__mehr {
    animation: stelle-klappt 0.4s cubic-bezier(0.2, 0, 0.1, 1) both;
  }
}

@keyframes stelle-klappt {
  from {
    opacity: 0;
    translate: 0 -0.5rem;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* ================================================================
   Kontakt: Karte im Seitenkopf und Anfrageformular
   ================================================================ */

.kontaktkarte {
  display: grid;
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
}

.kontaktkarte__zeile {
  display: grid;
  grid-template-columns: 1.5rem auto;
  align-items: start;
  gap: 0.9rem;
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
  background: color-mix(in oklch, var(--marke) 16%, var(--nacht));
  color: inherit;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

a.kontaktkarte__zeile:hover,
a.kontaktkarte__zeile:focus-visible {
  background: color-mix(in oklch, var(--marke) 30%, var(--nacht));
}

.kontaktkarte__zeile > svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--licht);
}

.kontaktkarte__was {
  display: block;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.kontaktkarte__wert {
  display: block;
  margin-top: 0.3rem;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
}

/* --- Formular ---------------------------------------------------------- */

.anfrage {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}

.formular {
  display: grid;
  gap: clamp(1.1rem, 2.2vw, 1.5rem);
}

.feld {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.feld > label,
.feld > legend {
  padding: 0;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--licht);
}

.feld__paar {
  display: grid;
  gap: clamp(1.1rem, 2.2vw, 1.5rem);
}

.formular input[type='text'],
.formular input[type='tel'],
.formular input[type='email'],
.formular select,
.formular textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font: inherit;
  color: var(--text);
  background: color-mix(in oklch, var(--marke) 12%, var(--nacht));
  border: 1px solid var(--linie-hell);
  border-radius: var(--radius);
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.formular textarea {
  resize: vertical;
  min-height: 7rem;
}

.formular select {
  appearance: none;
  padding-right: 2.75rem;
  /* Der Winkel ist derselbe wie im Menü: zwei gerade Striche, keine Rundung */
  background-image: linear-gradient(45deg, transparent 50%, var(--licht) 50%),
    linear-gradient(135deg, var(--licht) 50%, transparent 50%);
  background-position: calc(100% - 1.35rem) 55%, calc(100% - 1rem) 55%;
  background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
  background-repeat: no-repeat;
}

.formular input:hover,
.formular select:hover,
.formular textarea:hover {
  border-color: var(--licht);
}

.formular input:focus-visible,
.formular select:focus-visible,
.formular textarea:focus-visible {
  outline: 2px solid var(--licht-hell);
  outline-offset: 2px;
  border-color: var(--licht-hell);
}

.formular ::placeholder {
  color: color-mix(in oklch, var(--text-leise) 70%, var(--nacht));
}

/* Die Kundenart als Schalterreihe, dasselbe Muster wie Tag und Nacht */
.wahl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.wahl input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.wahl label {
  display: flex;
  align-items: center;
  min-height: 2.75rem;      /* Fingergroesse, nicht Schriftgroesse */
  padding: 0.6rem 1rem;
  font-size: var(--t-klein);
  border: 1px solid var(--linie-hell);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.wahl label:hover {
  border-color: var(--licht);
}

.wahl input:checked + label {
  background: var(--marke);
  border-color: var(--licht);
  color: #fff;
}

.wahl input:focus-visible + label {
  outline: 2px solid var(--licht-hell);
  outline-offset: 2px;
}

.feld--haken {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.feld--haken input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
}

.feld--haken label {
  font-size: var(--t-klein);
  color: var(--text-leise);
  text-transform: none;
  letter-spacing: 0;
  font-family: inherit;
  font-weight: 400;
}

.formular button[type='submit'] {
  justify-self: start;
  margin-top: 0.5rem;
  border: 0;
  cursor: pointer;
  font: inherit;
}

.anfrage__neben {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  align-content: start;
}

@media (min-width: 40rem) {
  .feld__paar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .anfrage {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(2.5rem, 5vw, 4rem);
  }
}

/* --- Ben freigestellt neben dem Formular -------------------------------- */

.ben {
  position: relative;
  margin: 0 0 clamp(0.5rem, 1.5vw, 1rem);
  isolation: isolate;
}

/* Er steht nicht im Nichts: hinter ihm liegt eine weiche Lichtfläche in der
   Markenfarbe, die nach unten ausläuft. */
.ben::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 12% 0 14%;
  background: radial-gradient(
    72% 55% at 50% 42%,
    color-mix(in oklch, var(--marke) 58%, transparent),
    transparent 72%
  );
}

.ben img {
  display: block;
  width: 100%;
  max-width: 22rem;
  height: auto;
  margin-inline: auto;
  /* Die Schultern sind vom Originalbild gerade abgeschnitten. Der Verlauf
     unten macht daraus ein Auslaufen statt einer Kante. */
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 82%, transparent 99%);
}

.ben figcaption {
  display: grid;
  gap: 0.35rem;
  padding-top: clamp(0.75rem, 2vw, 1.25rem);
  border-top: 1px solid var(--linie);
}

.ben__name {
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.ben__was {
  font-size: var(--t-klein);
  color: var(--text-leise);
  max-width: 30ch;
}

/* ================================================================
   Schalterreihe, gemeinsam für alle schaltbaren Zeichnungen
   Muster: <div class="schalter"><input type="radio" id=… name=…><label for=…>…
   Der Zustand der Zeichnung kommt über :has() im jeweiligen Element.
   Vorher hatte jede Zeichnung ihre eigene, fast gleiche Schalter-Regel
   (.schnitt__schalter, .wz__schalter, .pv__schalter, .lm__schalter).
   ================================================================ */

.schalter {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  padding: 3px;
  border: 1px solid var(--linie-hell);
  border-radius: var(--radius);
}

.schalter input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.schalter label {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.4rem 0.9rem;
  border-radius: 2px;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-leise);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.schalter label:hover {
  color: var(--text);
}

.schalter input:checked + label {
  background: var(--marke);
  color: #fff;
}

.schalter input:focus-visible + label {
  outline: 2px solid var(--licht);
  outline-offset: 2px;
}

/* Vier Bilder statt drei in der Musterreihe */
@media (min-width: 64rem) {
  .muster--vier {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ================================================================
   Drei Sektionsformen gegen die Gleichförmigkeit
   .spalt   Bild läuft bis an den Bildschirmrand, Text daneben
   .aussage Ein Satz groß, ohne Bild
   .werte   Zahlen als Tafel, ohne Bild
   ================================================================ */

.spalt {
  display: grid;
  padding: 0;
  /* Ohne min-width zieht der laengste unumbrechbare Inhalt die Sektion auf. */
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}

.spalt > * {
  min-width: 0;
}

.spalt__bild {
  margin: 0;
  min-height: clamp(16rem, 42vw, 30rem);
}

.spalt__bild img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  /* Die halbe Bildschirmbreite ist viel Fläche: helle Motive werden sonst zur Lampe.
     Dunkle Nachtmotive brauchen das nicht, sie setzen --spalt-helligkeit höher. */
  filter: brightness(var(--spalt-helligkeit, 0.66)) saturate(0.9);
}

.spalt__text {
  padding: var(--sektion) clamp(1.25rem, 5vw, 2.5rem);
}

.spalt__text > .sektion__kopf {
  display: block;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.spalt__punkte {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

@media (min-width: 64rem) {
  .spalt {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }

  /* Der Text sitzt in seiner Hälfte so, dass er mit dem Inhaltsraster fluchtet */
  .spalt__text {
    max-width: calc(var(--breite) / 2);
    padding-inline: clamp(2rem, 4vw, 3.5rem);
  }

  /* Gespiegelt: Text links, Bild rechts */
  .spalt--gedreht .spalt__bild {
    order: 2;
  }

  .spalt--gedreht .spalt__text {
    justify-self: end;
  }
}

/* --- Ein Satz, groß ---------------------------------------------------- */

.aussage {
  max-width: 34ch;
  margin: 0;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 100%;
  font-size: clamp(1.4rem, 2.2vw + 0.45rem, 2.3rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.aussage__quelle {
  display: block;
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  font-family: 'Source Sans 3', sans-serif;
  font-size: var(--t-klein);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-leise);
}

.aussage-raster {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (min-width: 64rem) {
  .aussage-raster {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}

/* Zeile mit den beteiligten Gewerken unter einer Projektkachel */
.bildkachel__meta {
  margin-top: 0.85rem;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--licht);
}

/* --- Traglast-Vergleich (nur /komplettausbau-dresden/) ------------------- */

.traglast {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  background: color-mix(in oklch, var(--marke) 22%, var(--nacht));
  border: 1px solid var(--linie);
}

@media (min-width: 52rem) {
  .traglast {
    grid-template-columns: 1fr 1fr;
  }
  .traglast__fuss {
    grid-column: 1 / -1;
  }
}

.traglast__name {
  margin: 0;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: 0.9375rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
}

.traglast__wert {
  margin: 0.5rem 0 0.75rem;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  color: var(--text-leise);
}

.traglast__wert b {
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  font-weight: 700;
  line-height: 1;
  color: var(--licht-hell);
  font-variant-numeric: tabular-nums;
  margin-right: 0.35rem;
}

.traglast__balken {
  height: 0.5rem;
  background: color-mix(in oklch, var(--licht) 16%, transparent);
  position: relative;
  overflow: hidden;
}

.traglast__balken::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--anteil, 100%);
  background: var(--marke);
  border-right: 2px solid var(--licht-hell);
}

@media (prefers-reduced-motion: no-preference) {
  .traglast__balken::before {
    animation: traglast-wachsen 1.1s cubic-bezier(0.2, 0.7, 0.3, 1) both;
    animation-timeline: view();
    animation-range: entry 20% entry 70%;
  }
}

@keyframes traglast-wachsen {
  from { width: 0; }
  to { width: var(--anteil, 100%); }
}

.traglast__dazu {
  margin: 0.75rem 0 0;
  font-size: var(--t-klein);
  color: var(--text-leise);
}

.traglast__fuss {
  margin: 0;
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
  border-top: 1px solid var(--linie);
  font-size: var(--t-klein);
  color: var(--text-leise);
  max-width: 70ch;
}

.hinweis__stand {
  display: block;
  margin-top: 0.6rem;
  font-size: var(--t-klein);
  color: var(--text-leise);
  letter-spacing: 0.03em;
}

/* --- Zahlen als Tafel --------------------------------------------------- */

.werte {
  margin: 0;
  border-top: 1px solid var(--linie);
}

.werte > div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0.35rem 1.5rem;
  padding: clamp(1rem, 2.4vw, 1.5rem) 0;
  border-bottom: 1px solid var(--linie);
}

.werte dt {
  grid-column: 1;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 700;
  line-height: 1;
  color: var(--licht-hell);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.werte dd {
  grid-column: 2;
  margin: 0;
}

.werte__was {
  display: block;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  /* Bewusst nicht breit laufend: Woerter wie FEHLERSTROMSCHUTZ sprengen sonst
     die schmale Spalte der Werte-Tafel. */
  font-stretch: 100%;
  font-size: 1.0625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.werte__dazu {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--t-klein);
  color: var(--text-leise);
  max-width: 60ch;
}

@media (min-width: 52rem) {
  .werte > div {
    /* Mindestens 13rem, sonst laeuft ein langer Wert wie "40 bis 60 %" in die
       Bezeichnung daneben; er darf wegen white-space: nowrap nicht umbrechen. */
    grid-template-columns: minmax(13rem, max-content) 1fr;
    gap: 0 2rem;
  }
}
/* ================================================================
   Lichtplan (nur /lichtplanung-dresden/)
   Ein kleiner Planauszug neben der Legende, erzeugt von
   werkzeuge/lichtplan.py, Klassen mit Praefix lp-.
   ================================================================ */

.plan {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 64rem) {
  .plan { grid-template-columns: 1.25fr 1fr; gap: 3.5rem; }
}

.plan__blatt {
  margin: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.lichtplan {
  display: block;
  width: 100%;
  min-width: 21rem;
  height: auto;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
}

.lp-flaeche { fill: color-mix(in oklch, var(--marke) 22%, var(--nacht)); }

.lp-wand {
  fill: color-mix(in oklch, var(--marke) 70%, var(--licht));
  stroke: color-mix(in oklch, var(--licht-hell) 34%, transparent);
  stroke-width: 1;
}

.lp-fenster {
  stroke: var(--licht-hell);
  stroke-width: 3;
}

/* Laeuft beim Aufbau ueber den Grundriss, wie der Kopf eines Plotters */
.lp-plotter {
  fill: var(--licht-hell);
  opacity: 0;
}

.lp-tuerblatt {
  stroke: color-mix(in oklch, var(--licht) 60%, transparent);
  stroke-width: 2;
}

.lp-tuerbogen {
  fill: none;
  stroke: color-mix(in oklch, var(--licht) 30%, transparent);
  stroke-width: 1.2;
  stroke-dasharray: 5 5;
}

.lp-moebel {
  fill: color-mix(in oklch, var(--marke) 34%, var(--nacht));
  stroke: color-mix(in oklch, var(--licht) 28%, transparent);
  stroke-width: 1.2;
}

.lp-moebelfein {
  stroke: color-mix(in oklch, var(--licht) 20%, transparent);
  stroke-width: 1;
}

.lp-masslinie,
.lp-massstrich {
  stroke: color-mix(in oklch, var(--licht) 34%, transparent);
  stroke-width: 1.2;
}

.lp-masstext {
  fill: var(--text-leise);
  font-size: 19px;
  letter-spacing: 0.1em;
}

/* ---- Leuchten ---- */
.lp-voute {
  fill: color-mix(in oklch, var(--licht-hell) 34%, var(--nacht));
  stroke: var(--licht-hell);
  stroke-width: 2;
}

.lp-leuchte circle {
  fill: color-mix(in oklch, var(--nacht) 65%, transparent);
  stroke: var(--licht-hell);
  stroke-width: 2.2;
}

.lp-leuchte line {
  stroke: var(--licht-hell);
  stroke-width: 2.2;
}

.lp-pendel {
  fill: none;
  stroke: var(--licht-hell);
  stroke-width: 2.2;
}

.lp-pendelkern { fill: var(--licht-hell); }

.lp-wandleuchte {
  fill: color-mix(in oklch, var(--nacht) 65%, transparent);
  stroke: var(--licht-hell);
  stroke-width: 2;
}

.lp-sockel {
  fill: var(--licht-hell);
  stroke: var(--licht-hell);
  stroke-width: 1.5;
}

.lp-schein {
  fill: var(--licht);
  opacity: 0.12;
  filter: blur(13px);
}

.lp-schein--klein { opacity: 0.1; }

.lp-schein--voute {
  fill: url(#lp-voutenschein);
  opacity: 0.42;
  filter: blur(9px);
}

.lp-voutenschein-0 { stop-color: var(--licht-hell); stop-opacity: 0.55; }
.lp-voutenschein-1 { stop-color: var(--licht); stop-opacity: 0; }

.lp-marke rect {
  fill: color-mix(in oklch, var(--marke) 40%, var(--nacht));
  stroke: var(--licht);
  stroke-width: 1.2;
}

.lp-marke text {
  fill: var(--licht);
  font-size: 14px;
  font-weight: 700;
}

/* ---- Legende neben dem Plan ---- */
.planlegende {
  display: grid;
  gap: 1.5rem;
  margin: 0;
}

.planlegende dt {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--schrift-display);
  font-size: 0.9375rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
}

.planlegende dt b {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--licht);
  color: var(--licht);
  font-size: 0.8125rem;
}

.planlegende dd {
  margin: 0.4rem 0 0 2.4rem;
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* ================================================================
   Der Plan zeichnet sich einmal selbst, sobald die Sektion im Bild
   ist. Start ohne Skript ueber die registrierte Eigenschaft --lauf.
   ================================================================ */

@property --lauf {
  syntax: "*";
  inherits: true;
  initial-value: paused;
}

@keyframes lp-start { to { --lauf: running; } }

@media (prefers-reduced-motion: no-preference) {
  .plan {
    animation: lp-start linear both;
    animation-timeline: view();
    animation-range: entry 45% entry 46%;
  }

  .lp-schicht--wand,
  .lp-plotter,
  .lp-schicht--tuer,
  .lp-schicht--moebel,
  .lp-schicht--licht,
  .lp-gruppe,
  .lp-leuchte {
    animation-play-state: var(--lauf);
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  }

  .lp-schicht--wand {
    animation-name: lp-wischen;
    animation-duration: 0.9s;
    animation-delay: 0.1s;
  }

  .lp-plotter {
    animation-name: lp-fahren;
    animation-duration: 0.9s;
    animation-delay: 0.1s;
  }

  .lp-schicht--tuer,
  .lp-schicht--moebel {
    animation-name: lp-auf;
    animation-duration: 0.6s;
    animation-delay: 1s;
  }

  .lp-gruppe--a { animation: lp-auf 0.5s both 1.6s; animation-play-state: var(--lauf); }
  .lp-gruppe--b { animation: lp-auf 0.5s both 2.1s; animation-play-state: var(--lauf); }
  .lp-gruppe--c { animation: lp-auf 0.5s both 2.9s; animation-play-state: var(--lauf); }
  .lp-gruppe--d { animation: lp-auf 0.5s both 3.4s; animation-play-state: var(--lauf); }

  .lp-gruppe--b .lp-leuchte {
    animation-name: lp-zuenden;
    animation-duration: 0.45s;
    animation-delay: calc(2.2s + var(--n) * 0.09s);
  }

  .lp-schicht--licht {
    animation-name: lp-auf;
    animation-duration: 1.1s;
    animation-delay: 1.9s;
  }

}

@keyframes lp-wischen {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes lp-fahren {
  0% { opacity: 0.9; transform: translateX(0); }
  99% { opacity: 0.9; }
  100% { opacity: 0; transform: translateX(760px); }
}

@keyframes lp-auf {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes lp-zuenden {
  0% { opacity: 0; }
  40% { opacity: 1; }
  55% { opacity: 0.3; }
  70% { opacity: 1; }
  100% { opacity: 1; }
}

/* ================= Rechtstexte (Impressum, Datenschutz) =================
   Reiner Lesetext. Die Abschnitte sind H2, damit die Gliederung stimmt, werden
   aber nicht als Versalien-Headline gesetzt: Bei zwanzig Abschnitten am Stueck
   erschlaegt das den Text, den man wirklich lesen soll. */
.rechtstext {
  max-width: 68ch;
}

.rechtstext h2 {
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  font-size: var(--t-h3);
  font-weight: 600;
  font-stretch: 100%;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--text);
}

.rechtstext > h2:first-child {
  margin-top: 0;
}

.rechtstext h3 {
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
  font-size: 1.0625rem;
  color: var(--text);
}

.rechtstext h4 {
  margin-top: 1.25rem;
  margin-bottom: 0.4rem;
  font-size: 0.9375rem;
  font-weight: 600;
  font-stretch: 100%;
  color: var(--text);
}

.rechtstext p,
.rechtstext li {
  color: var(--text-leise);
}

.rechtstext ul {
  margin: 0 0 1em;
  padding-left: 1.25rem;
}

.rechtstext li {
  margin-bottom: 0.35rem;
}

/* Unter 64 rem laeuft Archivo nicht als Expanded: In der schmalen Spalte passen
   lange Versalienwoerter wie FIRMENPARKPLATZ oder ANSPRECHPARTNER sonst nicht in
   eine Zeile und laufen aus dem Bild. Auf dem Desktop bleibt die breite Schnitt. */
@media (max-width: 63.99rem) {
  h1,
  h2,
  .aussage,
  .stelle__name,
  .werte__was {
    font-stretch: 100%;
  }

  /* Als inline-flex schrumpft eine Schalterreihe nicht unter ihre Inhaltsbreite,
     damit laufen zwei lange Beschriftungen aus dem Bild. */
  .schalter,
  .lm__schalter,
  .wz__schalter,
  .pv__schalter,
  .schnitt__schalter {
    display: flex;
    flex-wrap: wrap;
  }

  /* Ein Grid-Element ist von Haus aus mindestens so breit wie sein laengster
     unumbrechbarer Inhalt und zieht damit die ganze Sektion auseinander. */
  .spalt > *,
  .werte > div > * {
    min-width: 0;
  }

  .werte dt {
    white-space: normal;
  }
}