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

:root {
  --nacht: #0b1622;
  --nacht-tief: #060c12;
  --petrol: #304e58;
  --gruen: #3a8453;
  --gelb: #ffd624;
  --papier: #f4f0e8;
  --tinte: #0f1d2a;
  --hell: #f6f3ee;
  --leise: rgba(246, 243, 238, 0.72);
  --linie: rgba(246, 243, 238, 0.18);
  --rand: clamp(20px, 6.67vw, 96px);
  --inhalt: 1248px;
  --fs-claim: clamp(52px, 7.6vw, 132px);
  --fs-titel: clamp(36px, 4.4vw, 72px);
  --fs-text: clamp(16px, 1.15vw, 19px);
  --kopf-h: 76px;
  --tinte-leise: rgba(15, 29, 42, 0.7);
  --tinte-linie: rgba(15, 29, 42, 0.16);
  --kalt: #4f86b5;
  --kuehl: #93b4cc;
  --strom: #c99a00;
  --warm: #cf6f2b;
  --rueck: #c8a27c;
  --kurve: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}
html { scroll-padding-top: 0; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--nacht-tief);
  color: var(--hell);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-stretch: 100%;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--gelb); outline-offset: 3px; border-radius: 2px; }

.sprung {
  position: fixed; left: 12px; top: -60px; z-index: 50;
  background: var(--gelb); color: var(--tinte); padding: 10px 16px; font-weight: 600; text-decoration: none; border-radius: 999px;
}
.sprung:focus { top: 12px; }

.kicker {
  font-size: 12px; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 600; font-stretch: 112%; color: var(--leise);
}

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  font-size: 15px; font-weight: 600; font-stretch: 108%; letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s cubic-bezier(.2,.7,.2,1);
}
.knopf:active { transform: scale(.97); }
.knopf--gelb { background: var(--gelb); color: var(--tinte); }
.knopf--gelb:hover { background: #ffe25a; }
.knopf--rand { border: 1px solid rgba(255,255,255,.55); color: #fff; background: rgba(6,12,18,.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.knopf--rand:hover { border-color: #fff; background: rgba(6,12,18,.34); }
.knopf--tinte { background: var(--tinte); color: var(--hell); }
.knopf--tinte:hover { background: var(--petrol); }

/* Kopf */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 30; height: var(--kopf-h);
  display: flex; align-items: center; gap: 28px; padding: 0 var(--rand);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), background-color .3s ease;
}
.kopf::before {
  content: ''; position: absolute; inset: 0 0 -40px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(6,12,18,.55), rgba(6,12,18,0));
}
.kopf.ist-weg { transform: translateY(-100%); }
.kopf::before { transition: opacity .3s ease; }
.kopf.ist-weg::before, .kopf--grund::before { opacity: 0; }
.kopf--grund { background: rgba(11,22,34,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(246,243,238,.08); }
.kopf--recht::before { display: none; }
.marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.marke img { width: 40px; height: 40px; }
.marke__name { font-weight: 700; font-stretch: 118%; letter-spacing: .06em; text-transform: uppercase; font-size: 17px; }
.kopf__nav { margin-left: auto; display: flex; gap: 26px; }
.kopf__nav a { font-size: 14px; font-weight: 500; font-stretch: 108%; text-decoration: none; color: rgba(255,255,255,.86); padding: 8px 0; position: relative; }
.kopf__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.kopf__nav a:hover::after, .kopf__nav a:focus-visible::after { transform: scaleX(1); }
.kopf__menue { display: none; }
.kopf__aktion { min-height: 42px; padding: 0 18px; font-size: 14px; gap: 0; }

/* ---------- Bühne ---------- */
.buehne { position: relative; }
.buehne__klebend {
  position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--nacht-tief);
}
.js .buehne__klebend { position: sticky; top: 0; }
.buehne__poster, .buehne__modul {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* 3D-Bühne blendet über dem gleichen Standbild ein (wird sie erst nach frühem Scrollen fertig, weich statt hart) */
.buehne__modul { opacity: 0; transition: opacity .45s ease; }
.buehne__schleier {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,12,18,var(--schleier-links, .62)) 0%, rgba(6,12,18,calc(var(--schleier-links, .62) * .55)) 30%, rgba(6,12,18,0) 58%),
    linear-gradient(0deg, rgba(6,12,18,calc(var(--schleier-unten, .5))) 0%, rgba(6,12,18,0) 34%);
}
.buehne__strecke { height: 0; }
.js .buehne__strecke { height: var(--strecke, 600vh); }

/* Hero */
.hero {
  position: absolute; left: var(--rand); bottom: clamp(56px, 11vh, 120px); width: min(760px, 58vw);
  z-index: 5; will-change: opacity, transform;
}
.hero__seo {
  font-size: 13px; line-height: 1.45; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; font-stretch: 112%; color: rgba(255,255,255,.9); max-width: 34ch;
}
.hero__claim {
  margin-top: 18px;
  font-size: var(--fs-claim); line-height: .9; letter-spacing: -.025em;
  font-weight: 600; font-stretch: 125%; color: #fff;
  text-wrap: balance;
}
.hero__text { margin-top: 26px; max-width: 34em; font-size: clamp(17px, 1.3vw, 21px); line-height: 1.5; color: rgba(255,255,255,.9); }
.hero__aktionen { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero__wege { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.hero__wege a {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; text-decoration: none; color: #fff;
  font-size: 14px; font-weight: 600; font-stretch: 112%; letter-spacing: .04em;
}
.hero__wege a::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gelb); }
.hero__wege a span { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; transition: background-size .3s var(--kurve); }
.hero__wege a:hover span { background-size: 0% 1px; background-position: 100% 100%; }
.hero__wege a::after { content: '↓'; font-weight: 500; transition: transform .3s var(--kurve); }
.hero__wege a:hover::after { transform: translateY(3px); }

/* Modultexte */
.modultext {
  position: absolute; left: var(--rand); top: 50%; transform: translateY(-50%);
  width: min(430px, 33vw); z-index: 5;
}
.modultext__kopf, .punkt { will-change: opacity, transform; }
.modultext__titel { margin-top: 14px; font-size: var(--fs-titel); line-height: .98; letter-spacing: -.02em; font-weight: 600; font-stretch: 125%; text-wrap: balance; }
.modultext__hinweis { margin-top: 14px; font-size: 13px; line-height: 1.45; color: rgba(246,243,238,.66); max-width: 38ch; }
.modultext__punkte { margin-top: 38px; display: grid; gap: 22px; }
.punkt { position: relative; padding: 18px 0 0 0; border-top: 1px solid var(--linie); transition: opacity .35s ease; }
.punkt__nr { position: absolute; right: 0; top: 18px; font-size: 12px; font-weight: 600; letter-spacing: .12em; color: rgba(246,243,238,.45); font-variant-numeric: tabular-nums; }
.punkt h3 { font-size: clamp(19px, 1.5vw, 23px); line-height: 1.2; font-weight: 600; font-stretch: 112%; letter-spacing: -.005em; padding-right: 3em; hyphens: manual; }
.punkt p { margin-top: 8px; font-size: var(--fs-text); line-height: 1.55; color: var(--leise); }
.punkt::before { content: ''; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--gelb); transform: scaleX(var(--aktiv, 0)); transform-origin: left; transition: transform .5s cubic-bezier(.2,.7,.2,1); }

/* Beschriftungen am 3D-Modul */
.marken, .marken__linien { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.marken__linien { width: 100%; height: 100%; overflow: visible; }
.marken__linien line { stroke: rgba(246,243,238,.55); stroke-width: 1; }
.marken__linien circle { fill: var(--gelb); }
.marke3d { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
.marke3d span {
  display: inline-block; transform: translate(0, -50%);
  font-size: 12px; line-height: 1; font-weight: 600; font-stretch: 112%; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  color: #fff; padding: 7px 10px; border-radius: 999px; background: rgba(6,12,18,.55); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* Leistungen auf der Modulfläche */
.leistungen {
  position: relative; z-index: 6;
  padding: 18vh var(--rand) 26vh;
  background: linear-gradient(90deg, rgba(6,12,18,.66) 0%, rgba(6,12,18,.34) 52%, rgba(6,12,18,.1) 100%);
}
.leistungen__kopf { max-width: 760px; }
.leistungen__titel { margin-top: 14px; font-size: var(--fs-titel); line-height: .98; letter-spacing: -.02em; font-weight: 600; font-stretch: 125%; text-wrap: balance; }
.leistungen__einleitung { margin-top: 22px; max-width: 40em; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: rgba(246,243,238,.86); }
.leistungen__liste { margin-top: 64px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 64px); max-width: 880px; }
.leistung { padding: 26px 0 30px; border-top: 1px solid rgba(246,243,238,.24); }
.leistung h3 { font-size: clamp(21px, 1.7vw, 27px); line-height: 1.15; font-weight: 600; font-stretch: 116%; }
.leistung p { margin-top: 10px; font-size: var(--fs-text); line-height: 1.55; color: rgba(246,243,238,.78); max-width: 36em; }
.leistungen__weitere { margin-top: 40px; font-size: 16px; line-height: 1.6; color: rgba(246,243,238,.82); max-width: 880px; }
.leistungen__weitere a { color: #fff; font-weight: 600; text-decoration-color: var(--gelb); text-underline-offset: 4px; }

/* ---------- Gemeinsame Bausteine der Inhaltsbereiche ---------- */
.abschnitt__titel { margin-top: 14px; font-size: var(--fs-titel); line-height: .98; letter-spacing: -.02em; font-weight: 600; font-stretch: 125%; text-wrap: balance; }
.hell { position: relative; background: var(--papier); color: var(--tinte); }
.hell .kicker { color: rgba(15,29,42,.6); }
.hell a:not(.knopf) { text-decoration-color: rgba(15,29,42,.35); text-underline-offset: 3px; }
section[id], div[id] { scroll-margin-top: 0; }
/* sanfte Einblendung (nur wenn das Skript sie vorbereitet hat) */
.einblenden-aktiv [data-einblenden] { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--kurve), transform .8s var(--kurve); transition-delay: var(--verz, 0s); }
.einblenden-aktiv [data-einblenden].ist-sichtbar { opacity: 1; transform: none; }

/* ---------- Wärmepumpen: Rückfahrt vom Lüftergitter zum Haus ---------- */
.wp { position: relative; background: var(--nacht-tief); color: #fff; }
/* untere Rahmenkante des Moduls wird zur Grenze der Wärmepumpen-Szene */
.wp::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 4; background: linear-gradient(90deg, #1b1e22, #3a3f45 30%, #15181b 70%, #2a2e33); }
.wp .kicker { color: rgba(246,243,238,.78); }
.wp__buehne { position: relative; }
.wp__bild { position: relative; margin: 0; aspect-ratio: 2400 / 1339; max-height: 72vh; max-height: 72svh; width: 100%; overflow: hidden; background: #3a3631; }
.wp__haus, .wp__haus img, .wp__start, .wp__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.wp__haus img, .wp__start { object-fit: cover; object-position: 50% 55%; }
.wp__start, .wp__canvas { display: none; }
.wp__hinweis { position: absolute; right: var(--rand); bottom: 18px; z-index: 3; font-size: 12px; letter-spacing: .02em; color: rgba(255,255,255,.72); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
/* ruhige Fassung (ohne Skript, reduzierte Bewegung): Hausbild, darunter alle Texte */
.wp__texte {
  max-width: calc(var(--inhalt) + 2 * var(--rand)); margin: 0 auto; padding: clamp(56px, 8vh, 96px) var(--rand) clamp(88px, 12vh, 136px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 36px); row-gap: 44px;
}
.wp__phase--titel { grid-column: 1 / 8; }
.wp__phase--angebot { grid-column: 8 / -1; grid-row: 1; align-self: end; }
.wp__phase:nth-child(2) { grid-column: 1 / 5; grid-row: 2; }
.wp__phase:nth-child(3) { grid-column: 5 / 9; grid-row: 2; }
.wp__phase:nth-child(2), .wp__phase:nth-child(3) { padding-top: 18px; border-top: 1px solid rgba(246,243,238,.24); }
.wp__titel { margin-top: 14px; font-size: clamp(44px, 6vw, 104px); line-height: .95; letter-spacing: -.025em; font-weight: 600; font-stretch: 125%; text-wrap: balance; }
.wp__phase h3 { font-size: clamp(21px, 1.7vw, 27px); line-height: 1.15; font-weight: 600; font-stretch: 116%; }
.wp__phase p:not(.kicker) { margin-top: 10px; font-size: var(--fs-text); line-height: 1.6; color: rgba(246,243,238,.86); max-width: 34em; }
.wp__phase .wp__lead { margin-top: 0; font-size: clamp(18px, 1.35vw, 21px); line-height: 1.5; color: #fff; }
.wp__phase .knopf { margin-top: 26px; }

/* Szene (vom Skript eingeschaltet): angeheftet, Bildfolge folgt dem Scrollen, Texte wechseln in derselben Lesefläche */
.wp--szene { height: 340vh; height: 340svh; }
.wp--szene .wp__buehne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.wp--szene .wp__bild { position: absolute; inset: 0; aspect-ratio: auto; max-height: none; }
.wp--szene .wp__start, .wp--szene .wp__canvas { display: block; }
.wp--szene .wp__start { opacity: 1; }
.wp--szene.wp--bereit .wp__start { visibility: hidden; }
/* scharfes Schlussbild legt sich am Ende über das letzte Filmbild (gleicher Ausschnitt) */
.wp--szene .wp__haus { opacity: var(--ende, 0); z-index: 1; }
.wp--szene .wp__bild::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(6,12,18,.66) 0%, rgba(6,12,18,.42) 26%, rgba(6,12,18,0) 50%), linear-gradient(0deg, rgba(6,12,18,.58) 0%, rgba(6,12,18,0) 44%);
}
.wp--szene .wp__texte {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; max-width: none; margin: 0;
  padding: 0 var(--rand) clamp(64px, 11vh, 124px); grid-template-columns: minmax(0, 680px); row-gap: 0;
}
/* Erklärungen in schmaler Spalte am linken Rand: Lüftergitter, Seitenteil und Anschlüsse bleiben frei */
.wp--szene .wp__phase:not(.wp__phase--titel) { max-width: 410px; }
.wp--szene .wp__phase { grid-area: 1 / 1; align-self: end; padding-top: 0; border-top: 0; opacity: var(--o, 0); transform: translateY(calc((1 - var(--o, 0)) * 16px)); }
.wp--szene .wp__phase:first-child { --o: 1; }
.wp--szene .wp__phase:not([data-sichtbar]) { pointer-events: none; }
.wp--szene .wp__phase:focus-within { opacity: 1; transform: none; }
.wp--szene .wp__phase p:not(.kicker) { color: rgba(246,243,238,.9); }

/* ---------- Über Revoltaic ---------- */
.ueber { position: relative; background: var(--papier); color: var(--tinte); padding: clamp(96px, 13vh, 152px) var(--rand) clamp(88px, 12vh, 136px); }
.ueber .kicker { color: rgba(15,29,42,.6); }
.ueber__inhalt { max-width: var(--inhalt); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 36px); row-gap: 48px; position: relative; }
/* weitergeführte Linie: dort, wo die Wärmepumpen-Szene endet, beginnt Über uns */
.ueber__inhalt::before { content: ''; position: absolute; left: 0; right: 0; top: calc(-1 * clamp(48px, 6vh, 72px)); height: 1px; background: var(--tinte-linie); transform: scaleX(var(--linie-ueber, 1)); transform-origin: left; }
.ueber__text { grid-column: 1 / 8; }
.ueber__titel { margin-top: 14px; font-size: var(--fs-titel); line-height: .98; letter-spacing: -.02em; font-weight: 600; font-stretch: 125%; max-width: 14em; text-wrap: balance; }
.ueber__lead { margin-top: 32px; font-size: clamp(20px, 1.6vw, 25px); line-height: 1.45; font-weight: 500; letter-spacing: -.005em; max-width: 32em; }
.ueber__text p + p { margin-top: 18px; font-size: var(--fs-text); line-height: 1.65; color: var(--tinte-leise); max-width: 38em; }
.ueber__zahlen { grid-column: 9 / 13; align-self: end; }
.ueber__zahlen li { padding: 20px 0 22px; border-top: 1px solid var(--tinte-linie); }
.ueber__zahlen li:last-child { border-bottom: 1px solid var(--tinte-linie); }
.ueber__zahlen strong { display: block; font-size: clamp(44px, 4.4vw, 72px); line-height: 1; font-weight: 600; font-stretch: 122%; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ueber__zahlen li:last-child strong { font-size: clamp(32px, 3.1vw, 50px); }
.ueber__zahlen li > span { display: block; margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--tinte-leise); max-width: 24em; }
/* vorbereitet: mit echtem Foto als Bild-Text-Komposition */
.ueber__bild { margin: 0; position: relative; }
.ueber__bild figcaption { position: absolute; left: 14px; bottom: 12px; font-size: 11.5px; letter-spacing: .02em; color: rgba(255,255,255,.8); text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.ueber__bild--haus img { transform: scale(calc(1 + (1 - var(--ankommen, 1)) * .06)); transform-origin: 50% 40%; }
.ueber__bild img { width: 100%; height: 100%; object-fit: cover; }
.ueber--mit-bild .ueber__bild { grid-column: 1 / 6; grid-row: 1 / 3; aspect-ratio: 4 / 5; overflow: hidden; }
.ueber--mit-bild .ueber__text { grid-column: 7 / 13; }
.ueber--mit-bild .ueber__zahlen { grid-column: 7 / 13; }
.leitsatz { background: var(--nacht); padding: clamp(88px, 13vh, 150px) var(--rand); }
.leitsatz__satz { max-width: var(--inhalt); margin: 0 auto; font-size: clamp(44px, 7vw, 120px); line-height: .94; letter-spacing: -.028em; font-weight: 600; font-stretch: 125%; }
.leitsatz__satz span { display: block; opacity: var(--o, 1); }
.leitsatz__satz span:last-child { color: var(--gelb); }

/* ---------- Leistungen ---------- */
.angebot, .vorteile, .fragen { max-width: calc(var(--inhalt) + 2 * var(--rand)); margin: 0 auto; padding: clamp(96px, 14vh, 160px) var(--rand) clamp(72px, 10vh, 120px); }
.angebot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 36px); align-items: start; }
.angebot__kopf { grid-column: 1 / 6; }
.angebot__einleitung { margin-top: 20px; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: var(--tinte-leise); max-width: 26em; }
.paket { grid-column: 7 / 13; align-self: end; padding: 26px 0 0; border-top: 2px solid var(--gelb); }
.paket__marke { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; font-stretch: 112%; color: rgba(15,29,42,.6); }
.paket__teile { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 0 .35em; font-size: clamp(26px, 2.5vw, 40px); line-height: 1.12; font-weight: 600; font-stretch: 120%; letter-spacing: -.015em; }
.paket__teile span:not(:last-child)::after { content: ' +'; color: rgba(15,29,42,.28); font-weight: 500; }
.paket__text { margin-top: 14px; font-size: 16.5px; line-height: 1.55; color: var(--tinte-leise); }
.ergaenzung { grid-column: 1 / -1; margin-top: clamp(56px, 8vh, 96px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 36px); }
.ergaenzung li { padding-top: 18px; border-top: 1px solid var(--tinte-linie); }
.ergaenzung h3 { font-size: clamp(18px, 1.35vw, 21px); line-height: 1.22; font-weight: 600; font-stretch: 112%; }
.ergaenzung p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--tinte-leise); }
.ergaenzung__spezial { grid-column: 1 / -1; margin-top: 36px; font-size: 15px; line-height: 1.6; color: var(--tinte-leise); max-width: 60em; }
.ergaenzung__spezial strong { color: var(--tinte); font-weight: 600; }

/* Zeilen mit Aufklappen (Weitere Lösungen, Fragen) */
.zeile { position: relative; border-top: 1px solid var(--tinte-linie); }
.zeile:last-child { border-bottom: 1px solid var(--tinte-linie); }
.zeile::before { content: ''; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: var(--gelb); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--kurve); }
.zeile:hover::before, .zeile[open]::before, .zeile:focus-within::before { transform: scaleX(1); }
.zeile summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) 28px; align-items: baseline; gap: 4px 24px; padding: 24px 0; -webkit-tap-highlight-color: transparent; }
.zeile summary::-webkit-details-marker { display: none; }
.zeile summary:focus-visible { outline-offset: 6px; }
.zeile__titel { font-size: clamp(19px, 1.55vw, 24px); line-height: 1.2; font-weight: 600; font-stretch: 114%; transition: color .2s ease; }
.zeile__kurz { font-size: 16px; line-height: 1.45; color: var(--tinte-leise); }
.zeile summary:hover .zeile__titel { color: var(--petrol); }
.zeile__zeichen { position: relative; align-self: center; width: 28px; height: 28px; }
.zeile__zeichen::before, .zeile__zeichen::after { content: ''; position: absolute; left: 7px; right: 7px; top: 13px; height: 1.5px; background: currentColor; transition: transform .35s var(--kurve); }
.zeile__zeichen::after { transform: rotate(90deg); }
.zeile[open] .zeile__zeichen::after { transform: rotate(0deg); }
.zeile__text { padding: 0 52px 28px 0; max-width: 54em; overflow: hidden; }
.zeile__text p { font-size: 17px; line-height: 1.62; color: rgba(15,29,42,.82); }
.zeile__text strong { font-weight: 600; color: var(--tinte); }
.zeile--frage summary { grid-template-columns: minmax(0, 1fr) 28px; }

/* ---------- Vorteile ---------- */
.vorteile { padding-top: clamp(48px, 7vh, 88px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 36px); row-gap: 40px; align-items: start; }
.vorteile__kopf { grid-column: 1 / -1; padding-top: clamp(48px, 7vh, 80px); border-top: 1px solid var(--tinte-linie); }
.vorteile__liste { grid-column: 1 / 10; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 36px); counter-reset: vorteil; }
.vorteile__liste li { counter-increment: vorteil; }
.vorteile__liste li::before { content: counter(vorteil, decimal-leading-zero); display: block; font-size: clamp(36px, 3.4vw, 54px); line-height: 1; font-weight: 600; font-stretch: 120%; color: rgba(15,29,42,.16); font-variant-numeric: tabular-nums; margin-bottom: 18px; }
.vorteile__liste h3 { font-size: clamp(19px, 1.45vw, 22px); line-height: 1.2; font-weight: 600; font-stretch: 112%; }
.vorteile__liste p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--tinte-leise); }
.vorteile__marken { font-weight: 600; color: var(--tinte) !important; }
.empfehlung { grid-column: 10 / 13; padding: 24px 24px 26px; border: 1px solid rgba(15,29,42,.18); border-top: 3px solid var(--gelb); background: rgba(255,255,255,.35); }
.empfehlung__titel { font-size: 20px; line-height: 1.2; font-weight: 600; font-stretch: 116%; }
.empfehlung p + p { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--tinte-leise); }
.empfehlung__link { display: inline-block; margin-top: 16px; font-size: 15px; font-weight: 600; font-stretch: 108%; }
.empfehlung__link::after { content: ' →'; }

/* ---------- Ablauf ---------- */
.ablauf { background: var(--nacht); padding: clamp(96px, 14vh, 160px) var(--rand); }
.ablauf__inhalt { max-width: var(--inhalt); margin: 0 auto; }
.ablauf__schritte { margin-top: clamp(48px, 7vh, 80px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: clamp(18px, 2vw, 32px); position: relative; }
.ablauf__schritte::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--linie); }
.ablauf__schritte::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--gelb); transform: scaleX(var(--linie-p, 1)); transform-origin: left; }
.ablauf__schritte li { padding-top: 26px; position: relative; }
.ablauf__schritte li::before { content: ''; position: absolute; left: 0; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--nacht); border: 1.5px solid var(--gelb); }
.ablauf__nr { display: block; font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--gelb); font-variant-numeric: tabular-nums; }
.ablauf__schritte h3 { margin-top: 12px; font-size: clamp(19px, 1.45vw, 23px); line-height: 1.2; font-weight: 600; font-stretch: 114%; }
.ablauf__schritte p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--leise); }

/* ---------- Fragen und Vertrauen ---------- */
.fragen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 36px); align-items: start; }
.fragen__kopf { grid-column: 1 / 5; position: sticky; top: calc(var(--kopf-h) + 32px); }
.fragen__liste { grid-column: 6 / 13; }

/* ---------- Kontakt ---------- */
.kontakt { background: var(--nacht); }
.kontakt__band { position: relative; min-height: 78vh; min-height: 78svh; display: flex; align-items: flex-end; overflow: hidden; --nacht: 0; --par: 0; }
.kontakt__bild { position: absolute; inset: -6% 0; transform: translateY(calc(var(--par) * 1%)); will-change: transform; }
.kontakt__bild picture, .kontakt__bild img { position: absolute; inset: 0; width: 100%; height: 100%; }
.kontakt__bild img { object-fit: cover; }
.kontakt__nacht {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--nacht) * 160% - 60%), transparent calc(var(--nacht) * 160% - 5%));
  mask-image: linear-gradient(to bottom, #000 calc(var(--nacht) * 160% - 60%), transparent calc(var(--nacht) * 160% - 5%));
}
.kontakt__band::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(6,12,18,.6) 0%, rgba(6,12,18,.28) 34%, rgba(6,12,18,0) 60%), linear-gradient(0deg, rgba(11,22,34,1) 0%, rgba(11,22,34,.55) 18%, rgba(11,22,34,0) 46%); }
.kontakt__kopf { position: relative; z-index: 2; width: min(760px, 62vw); margin-left: max(var(--rand), calc((100vw - var(--inhalt)) / 2)); padding-bottom: clamp(28px, 5vh, 56px); }
.kontakt__kopf .kicker { color: rgba(255,255,255,.8); }
.kontakt__titel { margin-top: 14px; font-size: clamp(42px, 5.6vw, 96px); line-height: .94; letter-spacing: -.025em; font-weight: 600; font-stretch: 125%; text-wrap: balance; }
.kontakt__einleitung { margin-top: 20px; max-width: 34em; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: rgba(255,255,255,.9); }
.kontakt__inhalt { max-width: calc(var(--inhalt) + 2 * var(--rand)); margin: 0 auto; padding: clamp(40px, 6vh, 72px) var(--rand) clamp(88px, 12vh, 136px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 36px); row-gap: 48px; }
.kontakt__daten { grid-column: 1 / 5; }
.kontakt__untertitel { font-size: 12px; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; font-stretch: 112%; color: var(--leise); }
.kontakt__daten dl { margin: 22px 0 0; display: grid; gap: 4px; }
.kontakt__daten dt { margin-top: 16px; font-size: 13px; color: var(--leise); }
.kontakt__daten dd { margin: 2px 0 0; font-size: clamp(18px, 1.4vw, 22px); line-height: 1.45; font-weight: 500; }
.kontakt__daten a { text-decoration-color: rgba(255,214,36,.65); text-underline-offset: 4px; }
.kontakt__daten a:hover { text-decoration-color: var(--gelb); }
.anfrage { grid-column: 6 / 13; }
.anfrage__felder { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.feld { display: grid; gap: 8px; }
.feld--breit { grid-column: 1 / -1; }
.feld--falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.anfrage { position: relative; }
.anfrage[aria-busy="true"] .knopf { opacity: .6; pointer-events: none; }
.anfrage__status[data-art="fehler"] { color: #ffb3a1; }
.anfrage__status[data-art="erfolg"] { color: var(--gelb); }
.feld label { font-size: 13px; color: var(--leise); }
.feld label span { color: rgba(246,243,238,.45); }
.feld input, .feld select, .feld textarea {
  width: 100%; font: 400 17px/1.4 'Archivo', system-ui, sans-serif; color: var(--hell); background: rgba(255,255,255,.04);
  border: 1px solid rgba(246,243,238,.22); border-radius: 3px; padding: 13px 14px; transition: border-color .2s ease, background-color .2s ease;
}
.feld select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--leise) 50%), linear-gradient(135deg, var(--leise) 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.feld select option { color: var(--tinte); }
.feld textarea { resize: vertical; min-height: 120px; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: rgba(246,243,238,.4); }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: none; border-color: var(--gelb); background: rgba(255,255,255,.07); }
.feld [aria-invalid="true"] { border-color: #ff9d85; }
.feld__fehler { font-size: 13px; color: #ffb3a1; }
.anfrage__fuss { margin-top: 26px; display: grid; grid-template-columns: auto 1fr; gap: 16px 24px; align-items: center; }
.anfrage__hinweis { font-size: 13px; line-height: 1.5; color: rgba(246,243,238,.6); max-width: 36em; }
.anfrage__status { margin-top: 16px; font-size: 15px; line-height: 1.5; color: var(--hell); }
.anfrage__status:empty { display: none; }

/* ---------- Fuß ---------- */
.fuss { background: var(--nacht-tief); padding: 64px var(--rand) 44px; border-top: 1px solid var(--linie); }
.fuss__inhalt { max-width: var(--inhalt); margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 36px clamp(20px, 3vw, 48px); align-items: start; }
.fuss__marke { display: flex; gap: 12px; align-items: center; }
.fuss__marke strong { display: block; font-weight: 700; font-stretch: 118%; letter-spacing: .06em; text-transform: uppercase; font-size: 16px; }
.fuss__marke span { display: block; font-size: 13px; color: var(--leise); }
.fuss__spalte { display: grid; gap: 8px; align-content: start; font-size: 14.5px; line-height: 1.6; color: rgba(246,243,238,.8); }
.fuss__spalte h2 { margin-bottom: 6px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; font-stretch: 112%; color: var(--leise); }
.fuss__spalte a { color: rgba(246,243,238,.86); text-decoration: none; width: fit-content; }
.fuss__spalte a:hover, .fuss__spalte a:focus-visible { color: #fff; text-decoration: underline; text-decoration-color: var(--gelb); text-underline-offset: 3px; }
.fuss__klein { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid var(--linie); font-size: 12.5px; line-height: 1.6; color: rgba(246,243,238,.5); }

/* ---------- Rechtstexte (Unterseiten) ---------- */
.recht { background: var(--papier); color: var(--tinte); min-height: 100vh; padding: calc(var(--kopf-h) + 64px) var(--rand) 96px; }
.recht__inhalt { max-width: 760px; margin: 0 auto; }
.recht h1 { font-size: clamp(36px, 4.4vw, 64px); line-height: 1; font-weight: 600; font-stretch: 125%; letter-spacing: -.02em; }
.recht h2 { margin-top: 44px; font-size: 22px; line-height: 1.25; font-weight: 600; font-stretch: 114%; }
.recht p, .recht li { margin-top: 12px; font-size: 17px; line-height: 1.65; color: rgba(15,29,42,.84); }
.recht ul { padding-left: 1.2em; list-style: disc; }
.recht a { text-underline-offset: 3px; }
.recht__hinweis { margin-top: 20px; padding: 14px 16px; border-left: 3px solid var(--gelb); background: rgba(255,255,255,.5); font-size: 15px; }
.kopf--recht { background: var(--nacht); }
.kopf--recht .kopf__zurueck { margin-left: auto; color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; }
.kopf--recht .kopf__zurueck:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Ohne JavaScript / ruhige Fassung ---------- */
html:not(.js) .hero, .ruhig .hero { position: relative; left: auto; bottom: auto; width: auto; padding: 40vh var(--rand) 60px; }
html:not(.js) .buehne__klebend, .ruhig .buehne__klebend { height: auto; min-height: 100svh; }
html:not(.js) .modultext, .ruhig .modultext { position: relative; left: auto; top: auto; transform: none; width: auto; max-width: 720px; padding: 0 var(--rand) 80px; }
html:not(.js) .marken, html:not(.js) .marken__linien, .ruhig .marken, .ruhig .marken__linien { display: none; }
.ruhig .buehne__strecke { height: 0; }
.ruhig .buehne__poster { position: absolute; }
.ruhig .modultext__kopf, .ruhig .punkt, .ruhig .hero { opacity: 1 !important; transform: none !important; }
html:not(.js) .kontakt__band, .ruhig .kontakt__band { --nacht: 1; }
html:not(.js) .leitsatz__satz span, .ruhig .leitsatz__satz span { opacity: 1 !important; }

/* ---------- Hochformat / Handy ---------- */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  :root { --kopf-h: 64px; --fs-claim: clamp(46px, 13.6vw, 72px); --fs-titel: clamp(30px, 8.6vw, 44px); }
  .kopf { gap: 14px; }
  .kopf__nav { display: none; }
  .kopf__aktion { margin-left: auto; min-height: 40px; padding: 0 14px; font-size: 13px; }
  .marke img { width: 34px; height: 34px; }
  .marke__name { font-size: 15px; }
  .buehne__schleier {
    background:
      linear-gradient(180deg, rgba(6,12,18,calc(var(--schleier-links, .62) * .82)) 0%, rgba(6,12,18,calc(var(--schleier-links, .62) * .62)) 42%, rgba(6,12,18,calc(var(--schleier-links, .62) * .3)) 60%, rgba(6,12,18,0) 74%),
      linear-gradient(0deg, rgba(6,12,18,var(--schleier-unten, .5)) 0%, rgba(6,12,18,0) 40%);
  }
  .hero { left: var(--rand); right: var(--rand); top: calc(var(--kopf-h) + 4svh); bottom: auto; width: auto; }
  .hero__seo { font-size: 11.5px; letter-spacing: .14em; }
  .hero__claim { margin-top: 12px; }
  .hero__text { margin-top: 14px; font-size: 15.5px; line-height: 1.45; }
  .hero__aktionen { margin-top: 18px; flex-wrap: nowrap; gap: 10px; }
  .hero__aktionen .knopf { min-height: 44px; padding: 0 15px; font-size: 14px; }
  .hero__wege { margin-top: 16px; gap: 6px 22px; }
  .hero__wege a { font-size: 13px; }
  .modultext { left: var(--rand); right: var(--rand); top: auto; bottom: max(20px, env(safe-area-inset-bottom)); transform: none; width: auto; }
  .modultext__kopf { margin-bottom: 0; }
  .modultext__titel { font-size: clamp(26px, 7.4vw, 36px); }
  .modultext__hinweis { font-size: 11.5px; margin-top: 8px; }
  .modultext__punkte { margin-top: 16px; display: block; position: relative; min-height: 132px; }
  .punkt { position: absolute; left: 0; right: 0; top: 0; padding-top: 14px; }
  .punkt__nr { top: 14px; }
  .punkt h3 { font-size: 19px; }
  .punkt p { font-size: 15.5px; }
  .leistungen { padding: 16svh var(--rand) 22svh; background: linear-gradient(180deg, rgba(6,12,18,.62), rgba(6,12,18,.5)); }
  .leistungen__liste { grid-template-columns: 1fr; margin-top: 40px; }
  .kopf__menue { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
  .nur-breit { display: none; }
  .kopf__menue-zeichen { position: relative; width: 20px; height: 12px; }
  .kopf__menue-zeichen::before, .kopf__menue-zeichen::after { content: ''; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .25s var(--kurve), top .25s var(--kurve); }
  .kopf__menue-zeichen::before { top: 2px; }
  .kopf__menue-zeichen::after { top: 9px; }
  .menue-offen .kopf__menue-zeichen::before { top: 5.5px; transform: rotate(45deg); }
  .menue-offen .kopf__menue-zeichen::after { top: 5.5px; transform: rotate(-45deg); }
  .kopf__nav {
    display: flex; position: fixed; left: 0; right: 0; top: var(--kopf-h); flex-direction: column; gap: 0; padding: 8px var(--rand) 28px; margin: 0;
    background: rgba(11,22,34,.97); border-bottom: 1px solid var(--linie);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s ease, transform .25s var(--kurve), visibility 0s linear .25s;
  }
  .menue-offen .kopf__nav { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .25s var(--kurve); }
  .kopf__nav a { font-size: 22px; font-weight: 600; font-stretch: 116%; padding: 14px 0; border-top: 1px solid var(--linie); color: #fff; }
  .kopf__nav a:first-child { border-top: 0; }
  .kopf__nav a::after { display: none; }
  /* Wärmepumpen: Bild oben (Hochformat-Ausschnitt), Texte darunter auf dunklem Grund */
  .wp__bild { aspect-ratio: 4 / 5; }
  .wp__texte { display: block; padding: 36px var(--rand) 72px; }
  .wp__phase + .wp__phase { margin-top: 30px; }
  .wp__titel { font-size: clamp(38px, 11vw, 54px); }
  .wp__phase p:not(.kicker) { font-size: 16px; }
  .wp__hinweis { right: auto; left: var(--rand); bottom: 12px; font-size: 11.5px; }
  .wp--szene { height: 300vh; height: 300svh; }
  .wp--szene .wp__bild { inset: 0 0 auto 0; height: min(150vw, 66svh); }
  .wp--szene .wp__bild::after { background: linear-gradient(0deg, var(--nacht-tief) 0%, rgba(6,12,18,0) 22%); }
  .wp--szene .wp__texte { top: min(150vw, 66svh); bottom: auto; padding: 18px var(--rand) 0; display: grid; grid-template-columns: minmax(0, 1fr); }
  .wp--szene .wp__phase { align-self: start; }
  .wp--szene .wp__phase + .wp__phase { margin-top: 0; }
  .wp--szene .wp__hinweis { bottom: auto; top: calc(min(150vw, 66svh) - 30px); }
  .ueber { padding-top: 88px; padding-bottom: 80px; }
  .ueber__inhalt { display: block; }
  .ueber__zahlen { margin-top: 40px; }
  .ueber__zahlen strong { font-size: 52px; }
  .ueber__zahlen li:last-child strong { font-size: 38px; }
  .ueber--mit-bild .ueber__bild { margin: 0 calc(-1 * var(--rand)) 36px; aspect-ratio: 4 / 3; }
  .leitsatz { padding: 80px var(--rand); }
  .leitsatz__satz { font-size: clamp(38px, 11vw, 60px); }
  .angebot, .vorteile, .fragen { padding-top: 80px; padding-bottom: 64px; }
  .angebot { display: block; }
  .paket { margin-top: 40px; }
  .ergaenzung { grid-template-columns: 1fr; row-gap: 26px; margin-top: 48px; }
  .vorteile { display: block; }
  .vorteile__liste { grid-template-columns: 1fr; row-gap: 30px; margin-top: 36px; }
  .vorteile__liste li::before { font-size: 34px; margin-bottom: 10px; }
  .empfehlung { margin-top: 36px; }
  .zeile summary { grid-template-columns: minmax(0, 1fr) 28px; padding: 20px 0; }
  .zeile__kurz { grid-column: 1 / 2; font-size: 15px; }
  .zeile__zeichen { grid-column: 2; grid-row: 1; }
  .zeile__text { padding-right: 0; }
  .zeile__text p { font-size: 16px; }
  .ablauf { padding-top: 88px; padding-bottom: 88px; }
  .ablauf__schritte { grid-template-columns: 1fr; row-gap: 30px; padding-left: 26px; }
  .ablauf__schritte::before { left: 4px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
  .ablauf__schritte::after { left: 4px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; transform: scaleY(var(--linie-p, 1)); transform-origin: top; }
  .ablauf__schritte li { padding-top: 0; }
  .ablauf__schritte li::before { left: -26px; top: 3px; }
  .fragen { display: block; }
  .fragen__kopf { position: static; margin-bottom: 26px; }
  .kontakt__band { min-height: 86svh; align-items: flex-start; }
  .kontakt__band::after { background: linear-gradient(180deg, rgba(6,12,18,.74) 0%, rgba(6,12,18,.5) 44%, rgba(6,12,18,0) 70%), linear-gradient(0deg, rgba(11,22,34,1) 0%, rgba(11,22,34,0) 26%); }
  .kontakt__kopf { width: auto; margin: 0 var(--rand); padding: calc(var(--kopf-h) + 4svh) 0 0; }
  .kontakt__titel { font-size: clamp(38px, 10.6vw, 56px); }
  .kontakt__einleitung { font-size: 16px; }
  .kontakt__inhalt { display: block; padding-top: 24px; }
  .anfrage { margin-top: 48px; }
  .anfrage__felder { grid-template-columns: 1fr; }
  .anfrage__fuss { grid-template-columns: 1fr; }
  .fuss__inhalt { grid-template-columns: 1fr 1fr; }
  .fuss__marke { grid-column: 1 / -1; }
  .marke3d span { font-size: 10.5px; padding: 6px 8px; }
  html:not(.js) .modultext, .ruhig .modultext { padding-bottom: 60px; }
}

/* Tablet hochkant: Handy-Abfolge, aber zweispaltig wo es Lesbarkeit bringt */
@media (min-width: 600px) and (max-aspect-ratio: 4/5) {
  .ergaenzung { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; }
  .vorteile__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; }
  .anfrage__felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss__inhalt { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .knopf, .kopf, .punkt, .punkt::before, .kopf__nav a::after, .zeile::before, .zeile__zeichen::before, .zeile__zeichen::after, .kopf__nav, .hero__wege a span, .hero__wege a::after { transition: none; }
  .einblenden-aktiv [data-einblenden] { opacity: 1; transform: none; transition: none; }
  .ueber__bild--haus img { transform: none; }
}