/* =========================================================================
   seite-home.css  --  Anordnung der Startseite nach Stevens Mockup vom
   2026-10-26 (R6): Hero bis an die Kanten mit Formularkarte, Schritte als
   Karten auf einem Landschaftsfoto, Vergleich mit Blatt, Foto und Preis,
   Warum Heimtreffer, Gut beraten mit Stevens Fotos, Regional mit Karte,
   dunkelgruenes Schlussband, Fragen. Komponenten (knopf, kicker, h2,
   offerte, karte-ch, faq) aus styles.css; hier nur, was es nur auf der
   Startseite gibt. Geladen ueber include('partials/head', { pageCss: 'home' }).
   Am Handy keine drei gleichen Karten untereinander (A2): Schritte und
   Warum stehen dort als Zeilen in einer Flaeche, der Vergleich bleibt drei
   Blaetter nebeneinander. Keine Pinselstriche unter Titelwoertern
   (DESIGN.md 0, Regel effekt-pinselstrich), keine Blobs.
   ========================================================================= */

/* Texte nur fuer eine Groesse (R11: Handy nach Stevens Mockups vom 2026-10-29, Desktop wie R10) */
@media (max-width: 63.99rem) { .nur-desktop { display: none !important; } }
@media (min-width: 64rem) { .nur-handy { display: none !important; } }

/* --- Hero (S. 1) -------------------------------------------------------------
   Handy und Tablet (R11, Stevens Mockup, Rida 2026-10-29 05:14): weisser Grund mit Titel, Lead, PLZ-Feld und Knopf, die drei
   Vorteile wie bisher, darunter das Foto klar und ohne Schleier mit geschwungener Oberkante. Desktop ab 64rem: Foto bis an die
   Kanten, Text links, Karte rechts (R6 bis R10) */
.r6-hero { position: relative; isolation: isolate; display: flex; flex-direction: column; }
.r6-hero__bild { position: relative; order: 1; height: clamp(15rem, 72vw, 26rem); margin-top: 1.75rem; }
.r6-hero__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 78%; }
.r6-hero__bild::before { content: ''; position: absolute; inset: -1px 0 auto; z-index: 1; height: clamp(1.25rem, 7vw, 2.5rem); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0h100v2.5C84 9 66 1 46 4.5 28 7.5 13 6 0 3z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.r6-hero__page { display: grid; gap: 1.25rem; padding-top: 1.5rem; }
.r6-hero__lead { margin-top: 0.875rem; }
.r6-hero__lead strong { color: var(--marine); font-weight: 700; }
/* E24 (Rida 2026-10-29 09:15, Ausschnitt aus Stevens Hero-Mockup: «Würde noch cool aussehen wenn das sparen so unterstrichen ist»;
   User 11:20 aus drei Varianten «A Pinselzug»): ein Zug unter «sparen.», links kräftig und rund, nach rechts fein auslaufend,
   glatte Kurve (werkzeuge/einmal/heimtreffer-strich-varianten.mjs); viewBox über die Wortbreite, oben knapp unter der Grundlinie
   (0.887em, heimtreffer-strich-grundlinie.mjs). Ausnahme von DESIGN.md 0 (Pinselstrich) nur für heimtreffer */
.r6-hero .strich { position: relative; display: inline-block; }
.r6-hero .strich::after { content: ''; position: absolute; left: 0; right: 0; top: 0.86em; height: 0.44em; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 450 60' preserveAspectRatio='none'%3E%3Cpath d='M30 47C120 30 262 19 442 19C264 25 126 37 35 57A5 5 0 0 1 30 47Z' fill='%23167A55'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
/* Desktop: Strich in --gruen-dunkel wie die Schrift, auf dem Foto mit weichem hellem Schein (wie text-shadow der Buchstaben) */
@media (min-width: 64rem) {
  .r6-hero .strich::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 450 60' preserveAspectRatio='none'%3E%3Cpath d='M30 47C120 30 262 19 442 19C264 25 126 37 35 57A5 5 0 0 1 30 47Z' fill='%230F5E41'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 5px rgb(255 255 255 / 0.75)); }
}
.r6-hero__kicker { margin-bottom: 1rem; letter-spacing: 0.22em; }
.r6-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.875rem 0.375rem 0.625rem; border-radius: var(--r-rund); background: var(--mint); color: var(--gruen-dunkel); font-size: var(--fs-klein); font-weight: 600; line-height: 1.3; }
.r6-badge .icon { width: 1.25rem; height: 1.25rem; color: var(--gruen); }
.r6-hero__karte-titel { margin-top: 0.875rem; color: var(--marine); font: 800 clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem)/1.25 var(--font-titel); letter-spacing: -0.015em; text-wrap: balance; }
.r6-hero__karte-text { margin-top: 0.375rem; color: var(--text); }
.r6-hero__form { max-width: none; margin-top: 0; gap: 0.625rem; }
.r6-hero__form input[type="text"] { background: var(--bg-hell); }
.r6-vorteile { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 1.125rem 0 0; padding: 0; list-style: none; color: var(--marine); font-size: var(--fs-klein); font-weight: 500; }
.r6-vorteile li { display: inline-flex; align-items: center; gap: 0.375rem; white-space: nowrap; }
.r6-vorteile .icon { width: 1.125rem; height: 1.125rem; color: var(--gruen); }
/* Handy (R7, Rida 2026-10-27 Bild 1752): Knopftext auf einer Zeile ab 360px (darunter darf er umbrechen), die drei Vorteile
   in drei gleich breiten Spalten, Icon ueber dem Wort; derselbe Knopf unter den drei Offerten (Bild 1754) */
@media (max-width: 47.99rem) {
  .r6-vergleich__knopf .knopf { gap: 0.5rem; padding-inline: 0.75rem; font-size: clamp(0.8125rem, 3.6vw, 1.0625rem); }
  .r6-vergleich__knopf .knopf .icon { flex: none; width: 1.125rem; height: 1.125rem; }
  .r6-vorteile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; text-align: center; font-size: clamp(0.75rem, 3.4vw, var(--fs-klein)); line-height: 1.25; }
  .r6-vorteile li { flex-direction: column; justify-content: flex-start; gap: 0.375rem; white-space: normal; text-wrap: balance; }
}
@media (min-width: 22.5rem) and (max-width: 47.99rem) { .r6-hero__form .knopf, .r6-vergleich__knopf .knopf { white-space: nowrap; } }
/* E18 (Rida 2026-10-27 Bild 1858 «Formular ein wenig weiter hoch»): PLZ-Feld und Knopf stehen in 390x590, 375x600 und 360x600
   im ersten Bildschirm (werkzeuge/einmal/heimtreffer-r7-formular-hoehe.mjs) */
@media (min-width: 64rem) {
  .r6-hero { display: block; min-height: min(calc(100svh - var(--header-h)), 54rem); }
  .r6-hero__bild { position: absolute; inset: 0; z-index: -1; height: auto; margin: 0; }
  .r6-hero__bild::before { content: none; }
  /* R9 (Rida 2026-10-28 «Ein klares bild bitte»): Schein an den Buchstaben statt Nebel ueber dem Foto */
  .r6-hero__text { text-shadow: 0 0 0.04em #fff, 0 0 0.1em #fff, 0 0 0.22em rgb(255 255 255 / 0.9), 0 0 0.5em rgb(255 255 255 / 0.55); }
  .r6-hero__text .akzent, .r6-hero__kicker { color: var(--gruen-dunkel); }
  /* R10 (Fremdblick: "sparen." dunkelgruen auf dunklem Laub): See und Himmel links hinter dem Titel, Haeuser mit Modulen unten rechts */
  .r6-hero__bild img { object-position: 50% 12%; }   /* R10: keine Vergroesserung (scale 1.5 machte das Foto unscharf) */
  /* R9: nur noch ein schwacher Schleier links, das Foto bleibt klar */
  .r6-hero__bild::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(255 255 255 / 0.34) 0%, rgb(255 255 255 / 0.26) 32%, rgb(255 255 255 / 0.08) 46%, rgb(255 255 255 / 0) 54%); }
  .r6-hero__page { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; gap: clamp(2rem, 4vw, 4rem); padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(3rem, 6vw, 5rem); }
  .r6-hero__karte { justify-self: end; width: 100%; max-width: 33rem; padding: 1.75rem 2rem 1.5rem; border-radius: var(--r-gross); background: #fff; box-shadow: var(--schatten-hoch); }
  .r6-hero__form { margin-top: 1.25rem; gap: 0.75rem; }
  .r6-vorteile { font-size: var(--fs-mini); }
}
/* eine Zeile mit Trennstrichen erst, wenn die Karte breit genug ist */
@media (min-width: 80rem) {
  .r6-vorteile { flex-wrap: nowrap; justify-content: space-between; gap: 0.75rem; }
  .r6-vorteile li + li { padding-left: 0.75rem; border-left: 1px solid var(--linie); }
}

/* --- So einfach geht's (S. 2): Landschaft unten, Karten rechts ------------ */
.r6-schritte { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--pad) clamp(8rem, 30vw, 11rem); background: var(--himmel); }
.r6-schritte__bild { position: absolute; inset: 0; z-index: -2; }
.r6-schritte__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 85%; }
/* E25 (Rida 2026-10-29 09:41 «So ein übergang bild zu bild sieht nicht schön aus, nutz den hintergrund wie vorher bei so einfach gehts
   also transparenter»): wieder der helle Verlauf von vor R10, oben fast weiss, unten das klare Foto; trennt den Hero-Fotostreifen vom Himmel */
.r6-schritte::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(255 255 255 / 0.95) 0%, rgb(255 255 255 / 0.88) 55%, rgb(255 255 255 / 0.2) 85%, rgb(255 255 255 / 0) 100%); }
/* Kicker, Titel und Lead auf einer weissen Karte statt auf dem Foto (Kontrast Kicker 3.4 und Lead 3.5 gemessen, Soll 4.5) */
.r6-schritte__kopf { padding: 1.25rem 1.25rem 1.5rem; border-radius: var(--r-gross); background: #fff; box-shadow: var(--schatten); }
@media (min-width: 48rem) { .r6-schritte__kopf { padding: 1.75rem 2rem 2rem; } }
.r6-schritte__knopf { margin-top: 1.75rem; }
/* Handy: drei Schritte als Zeilen in einer Flaeche (A2) */
.r6-schritte__liste { display: grid; margin: 1.75rem 0 0; padding: 0.25rem 1.125rem; list-style: none; border-radius: var(--r-gross); background: #fff; box-shadow: var(--schatten); }
.r6-schritt { position: relative; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 1rem; align-items: start; padding-block: 1.125rem; }
.r6-schritt + .r6-schritt { border-top: 1px solid var(--linie); }
.r6-schritt__nr { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--mint); color: var(--gruen); font: 800 var(--fs-text)/1 var(--font-titel); letter-spacing: 0.02em; }
.r6-schritt__karte { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: center; }
.r6-schritt__karte > .icon-kreis { display: none; }
.r6-schritt__text { padding-top: 0.125rem; }
.r6-schritt__text p { margin-top: 0.375rem; }
@media (max-width: 47.99rem) { .r6-schritt__text p { font-size: var(--fs-klein); } }
.r6-schritt__bild { display: none; }
@media (min-width: 36rem) {
  .r6-schritt__karte { grid-template-columns: minmax(0, 1fr) auto; }
  .r6-schritt__bild { position: relative; display: grid; place-items: center; width: 6rem; height: 5rem; }
}
@media (min-width: 64rem) {
  .r6-schritte { padding-bottom: clamp(6rem, 9vw, 8rem); }
  .r6-schritte__page { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-areas: "kopf liste" "knopf liste"; grid-template-rows: auto 1fr; gap: 0 clamp(3rem, 5vw, 5rem); align-items: start; }
  .r6-schritte__kopf { grid-area: kopf; }
  .r6-schritte__liste { grid-area: liste; gap: 1.25rem; margin: 0 !important; padding: 0; background: none; box-shadow: none; }
  .r6-schritte__knopf { grid-area: knopf; margin-top: 2rem; }
  .r6-schritt { grid-template-columns: 3.25rem minmax(0, 1fr); gap: 1.5rem; align-items: center; padding: 0; }
  .r6-schritt + .r6-schritt { border-top: 0; }
  .r6-schritt__nr { width: 3.25rem; height: 3.25rem; }
  /* gestrichelte Verbindung von Nummer zu Nummer */
  .r6-schritt:not(:last-child)::before { content: ''; position: absolute; left: calc(1.625rem - 0.75px); top: calc(50% + 2.125rem); height: calc(100% - 3rem); border-left: 1.5px dashed #A9D3BF; }
  .r6-schritt__karte { grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.25rem; padding: 1.25rem 1.25rem 1.25rem 1.5rem; border-radius: var(--r-karte); background: #fff; box-shadow: var(--schatten-hoch); }
  .r6-schritt__karte > .icon-kreis { display: inline-grid; }
}
/* kleine Bilder in den Schritten: Fragebogen, drei Offerten, Beratung mit Haus */
.r6-blatt { display: grid; gap: 0.4rem; width: 4.25rem; padding: 0.625rem 0.5rem; border: 1px solid var(--linie); border-radius: 8px; background: #fff; box-shadow: var(--schatten); rotate: -6deg; }
.r6-blatt > span { display: flex; align-items: center; gap: 0.3rem; }
.r6-blatt > span::after { content: ''; flex: 1; height: 0.3rem; border-radius: 3px; background: var(--linie); }
.r6-blatt .icon { width: 0.8rem; height: 0.8rem; padding: 0.1rem; border-radius: 3px; background: var(--gruen); color: #fff; stroke-width: 4; }
.r6-faecher { position: relative; width: 6rem; height: 4.5rem; }
.r6-mini { position: absolute; top: 0.5rem; left: 50%; display: grid; place-items: center; width: 2.5rem; height: 3.25rem; margin-left: -1.25rem; border: 1px solid var(--linie); border-radius: 6px; background: #fff linear-gradient(var(--linie), var(--linie)) 50% 72% / 60% 0.25rem no-repeat; box-shadow: var(--schatten); }
.r6-mini:first-child { translate: -1.6rem 0.25rem; rotate: -10deg; }
.r6-mini:last-child { translate: 1.6rem 0.25rem; rotate: 10deg; }
.r6-mini--mitte { z-index: 1; top: 0; width: 2.75rem; height: 3.6rem; margin-left: -1.375rem; background-position: 50% 80%; }
.r6-mini--mitte .icon { width: 1.25rem; height: 1.25rem; margin-top: -0.75rem; color: var(--gruen); }
.r6-rund { display: block; width: 4.25rem; height: 4.25rem; overflow: hidden; border: 3px solid #fff; border-radius: 50%; box-shadow: var(--schatten); }
.r6-rund img { width: 100%; height: 100%; object-fit: cover; }
.r6-blase { position: absolute; top: 0; left: 0.25rem; display: grid; place-items: center; width: 2rem; height: 1.625rem; border-radius: 8px 8px 8px 2px; background: var(--gruen); color: #fff; }
.r6-blase .icon { width: 1.125rem; height: 1.125rem; }

/* --- Nicht jede Offerte ist gleich (S. 3) ---------------------------------- */
.r6-vergleich { background: linear-gradient(180deg, var(--bg) 0%, var(--mint-hell) 100%); }
.r6-vergleich .vergleich { max-width: 66rem; }
/* width: max-content, weil WebKit die absolut gesetzte Pille (left: 50%) sonst zu schmal macht und das letzte «g» weiss auf Hellgrau steht (Bild 1900) */
.r6-offerte__badge { display: inline-flex; align-items: center; gap: 0.3em; width: max-content; }
.r6-offerte__badge .icon { width: 1.1em; height: 1.1em; fill: currentColor; }
/* R7 (Rida 2026-10-27 Bild 1859 «Andere passende Bilder bspw. Icon»): statt Hausfoto ein leicht schraeges Offerten-Blatt mit Solarmodul-Icon und grauen
   Zeilen auf Mint, das Preisschild liegt unten auf dem Blatt; am Handy und am Desktop gleich gebaut, nur die Masse wechseln */
.r6-offerte__bild { position: relative; display: block; height: 7.5rem; margin: 0.5rem 0 1.875rem; border-radius: 8px; background: var(--mint); }
.r6-offerte--empfohlen .r6-offerte__bild { background: var(--mint-2); }
/* R11 (Rida 2026-10-29 «das man vlt solche module und speicher sieht»): statt Blatt eine Zeichnung mit Modulen und Speicher (index.ejs produkte) */
.r6-produkte { position: absolute; top: 0.25rem; left: 0; width: 100%; height: calc(100% - 2.25rem); }
.r6-produkte__kreis { fill: #fff; opacity: 0.65; }
.r6-produkte__schatten { fill: rgb(11 31 58 / 0.1); }
.r6-produkte__modul rect { fill: var(--marine-2); stroke: #C9D3DE; stroke-width: 1.5; }
.r6-produkte__modul--hinten rect { fill: #2A4A70; }
.r6-produkte__modul path { fill: none; stroke: rgb(255 255 255 / 0.3); stroke-width: 0.8; }
.r6-produkte__speicher rect, .r6-produkte__kasten rect { fill: #fff; stroke: #C5D0DC; stroke-width: 1.2; }
.r6-produkte__seite { fill: #DCE3EA; }
.r6-produkte .r6-produkte__led { fill: var(--gruen); stroke: none; }
.r6-produkte .r6-produkte__anzeige { fill: var(--marine-2); stroke: none; }
.r6-produkte__blitz { fill: var(--gruen); }
.r6-offerte__preis { color: var(--text-2); font-size: 0.625rem; line-height: 1.3; }
.r6-offerte__preis strong { display: block; color: var(--marine); font: 800 0.875rem/1.2 var(--font-titel); white-space: nowrap; }
.r6-ja { display: inline-grid; place-items: center; width: 1rem; height: 1rem; border-radius: 50%; background: var(--gruen); color: #fff; }
.r6-ja .icon { width: 0.625rem; height: 0.625rem; stroke-width: 3.5; }
/* Handy: Bezeichnung ueber dem Wert, damit drei Blaetter nebeneinander Platz haben */
@media (max-width: 29.99rem) {
  .r6-vergleich .vergleich { gap: 0.5rem; margin-inline: -0.625rem; }
  .r6-offerte { padding-inline: 0.375rem; }
  .r6-offerte .offerte__zeilen { font-size: clamp(0.625rem, 2.95vw, 0.75rem); }
  .r6-offerte .offerte__zeile { flex-direction: column; align-items: flex-start; gap: 0.125rem; }
  .r6-offerte .offerte__zeile dd { margin: 0; }
}
/* Handy (R7): der Preis als weisse Plakette unten auf dem Blatt statt als Text darunter (Entscheid User 2026-10-27, Bild 1754); drei Karten bleiben nebeneinander (A2).
   Pille «Beispiel» ganz ueber der Kartenreihe, ueber Karte 2, ohne eine Karte zu beruehren (Bild 1900: in WebKit deckte Karte 3 das «g» ab, z-index griff nicht) */
@media (max-width: 63.99rem) {
  .r6-vergleich .vergleich { padding-top: 2rem; }
  .r6-offerte .badge { top: auto; bottom: 100%; translate: -50% 0; margin-bottom: 0.4375rem; }
  .r6-offerte__preis { position: absolute; right: -0.375rem; bottom: -1.5rem; left: -0.375rem; padding: 0.3125rem 0.125rem; border-radius: 10px; background: #fff; box-shadow: var(--schatten-hoch); text-align: center; text-wrap: balance; }
  .r6-offerte__preis strong { font-size: clamp(0.6875rem, 3.6vw, 0.875rem); }
}
@media (min-width: 30rem) {
  .r6-offerte__preis { font-size: var(--fs-mini); }
  .r6-offerte__preis strong { font-size: 1.0625rem; }
}
@media (min-width: 64rem) {
  .r6-offerte { padding-top: 1.75rem; }
  .r6-offerte__bild { height: 12rem; margin: 1rem 0 0.75rem; border-radius: 12px; }
  .r6-produkte { top: 0.5rem; height: calc(100% - 4.5rem); }   /* ueber dem Preisschild unten rechts */
  .r6-offerte__preis { position: absolute; right: 0.75rem; bottom: 0.75rem; padding: 0.5rem 0.875rem; border-radius: 12px; background: #fff; box-shadow: var(--schatten-hoch); }
  .r6-offerte__preis strong { font-size: var(--fs-text); }
  .r6-offerte .offerte__zeile dd { flex: none; width: 5.75rem; margin: 0; text-align: left; }
  .r6-ja, .r6-offerte .wert--nein { width: 1.75rem; height: 1.75rem; }
  .r6-ja .icon { width: 1rem; height: 1rem; }
  .r6-offerte .wert--nein .icon { width: 0.875rem; height: 0.875rem; }
}
.r6-vergleich__knopf { display: flex; justify-content: center; margin-top: 2rem; }
.r6-vergleich .fussnote { max-width: 30rem; margin: 1rem auto 0; }

/* --- Vergleichen lohnt sich (Handy und Tablet, R11 nach Stevens Mockup 2026-10-29, User «Just like the mock up») -------
   Titel links auf Weiss, darunter eine Landschaft, die von oben weich einblendet (Maske am Foto, kein Schleier darueber);
   drei Karten nebeneinander (A2) ohne Preise wie im Mockup, Zeilen Module, Speicher, Montage, Garantie (Punkte), Notstrom */
.r11-vergleich { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--pad) clamp(6rem, 30vw, 9rem); background: var(--bg); }
.r11-vergleich__bild { position: absolute; inset: 22rem 0 0; z-index: -1; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10rem); mask-image: linear-gradient(180deg, transparent 0, #000 10rem); }
.r11-vergleich__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.r11-vergleich__lead strong { color: var(--marine); font-weight: 700; }
.r11-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 0.5rem; align-items: start; margin: 1.75rem -0.625rem 0; }
.r11-karte { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; padding: 0.75rem 0.4375rem 0.5rem; border-radius: var(--r-karte); background: #fff; box-shadow: var(--schatten-hoch); }
.r11-karte--empfohlen { background: var(--mint-hell); box-shadow: inset 0 0 0 1.5px #8FCBB0, var(--schatten-hoch); }
.r11-karte__titel { color: var(--marine); font: 800 clamp(0.875rem, 3.9vw, 1.0625rem)/1.2 var(--font-titel); }
.r11-karte__art { margin-top: 0.125rem; color: var(--text-2); font-size: clamp(0.6875rem, 2.9vw, 0.8125rem); line-height: 1.3; }
.r11-karte__bild { position: relative; height: clamp(4.5rem, 21vw, 7rem); margin: 0.5rem 0 0.375rem; }
.r11-karte__bild .r6-produkte { top: 0; height: 100%; }
.r11-karte .r6-produkte__kreis { fill: var(--mint); opacity: 1; }
.r11-karte--empfohlen .r6-produkte__kreis { fill: #DDEFE6; }
.r11-karte__zeilen { margin: 0; padding: 0.25rem 0 0; list-style: none; border-top: 1px solid var(--linie); }
.r11-karte__zeilen li { display: grid; grid-template-columns: 0.8125rem minmax(0, 1fr) auto; gap: 0.25rem; align-items: center; padding-block: 0.3rem; color: var(--marine); font-size: clamp(0.6875rem, 2.9vw, 0.8125rem); line-height: 1.2; }
.r11-karte__zeilen > li > .icon { width: 0.8125rem; height: 0.8125rem; color: var(--marine-2); }
.r11-ja { display: inline-grid; color: var(--gruen); }
.r11-ja .icon { width: 0.9375rem; height: 0.9375rem; stroke-width: 3; }
.r11-nein { display: inline-grid; place-items: center; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: var(--linie); color: var(--text-2); }
.r11-nein .icon { width: 0.5rem; height: 0.5rem; stroke-width: 3.5; }
.r11-punkte { display: inline-flex; gap: 2px; }
.r11-punkte i { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: #D5DCE3; }
.r11-punkte i.an { background: var(--gruen); }
.r11-tipp { display: flex; align-items: center; gap: 0.875rem; margin-top: 1.25rem; padding: 0.875rem 1rem; border-radius: var(--r-gross); background: var(--mint-hell); box-shadow: var(--schatten); }
.r11-tipp .icon-kreis { flex: none; width: 3.25rem; height: 3.25rem; background: var(--mint); }
.r11-tipp__titel { color: var(--marine); font: 800 var(--fs-text)/1.3 var(--font-titel); }
.r11-tipp__text { margin-top: 0.125rem; color: var(--text); font-size: var(--fs-klein); line-height: 1.4; }
.r11-vergleich__knopf { margin-top: 1rem; }
.r11-vergleich__knopf .knopf { width: 100%; }
@media (min-width: 30rem) { .r11-karten { column-gap: 0.75rem; margin-inline: 0; } .r11-karte { padding-inline: 0.75rem; } }

/* --- Warum Heimtreffer (S. 4): am Handy Zeilen in einer Flaeche, breit drei Karten */
.r6-warum { padding-top: var(--pad-eng); background: var(--mint-hell); }
.r6-warum__liste { display: grid; margin: 1.75rem 0 0; padding: 0.25rem 1.125rem; list-style: none; border-radius: var(--r-gross); background: #fff; box-shadow: var(--schatten); }
.r6-warum__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; padding-block: 1.125rem; }
.r6-warum__item + .r6-warum__item { border-top: 1px solid var(--linie); }
.r6-warum__kopf { display: grid; justify-items: center; gap: 0.375rem; }
.r6-warum__nr { color: var(--gruen); font: 700 var(--fs-klein)/1 var(--font-titel); letter-spacing: 0.04em; }
.r6-warum__text { margin-top: 0.375rem; }
@media (max-width: 47.99rem) { .r6-warum__text { font-size: var(--fs-klein); } }
.r6-warum__knopf { margin-top: 1.75rem; }
@media (min-width: 64rem) {
  .r6-warum__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2.5rem !important; padding: 0; background: none; box-shadow: none; }
  .r6-warum__item { display: block; padding: 1.75rem 1.75rem 2rem; border-radius: var(--r-karte); background: #fff; box-shadow: var(--schatten); }
  .r6-warum__item + .r6-warum__item { border-top: 0; }
  .r6-warum__kopf { display: flex; align-items: center; gap: 1.125rem; margin-bottom: 1.5rem; }
  .r6-warum__nr { font-size: var(--fs-text); }
  .r6-warum__knopf { display: flex; justify-content: center; margin-top: 2.5rem; }
}

/* --- Gut beraten (S. 5): Text links, Stevens Fotos rechts ------------------ */
.r6-beratung__page { display: grid; grid-template-areas: "kopf" "bilder" "pille" "knopf"; gap: 1.75rem; }
.r6-beratung__page > * { margin-top: 0; }
.r6-beratung__kopf { grid-area: kopf; }
.r6-beratung__bilder { grid-area: bilder; display: grid; }
.r6-beratung__haupt { align-self: start; width: min(78%, 24rem); overflow: hidden; border-radius: var(--r-gross); box-shadow: var(--schatten-hoch); }
.r6-beratung__haupt img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; }
/* Handy: zweites Foto rechts ueber dem unteren Rand des ersten, die Notiz darunter */
.r6-beratung__neben { display: flex; flex-direction: column-reverse; gap: 1.5rem; width: min(64%, 22rem); margin: -6rem 0 0 auto; }
.r6-beratung__neben-bild { position: relative; }
.r6-beratung__neben-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 4px solid #fff; border-radius: var(--r-karte); box-shadow: var(--schatten-hoch); }
.r6-beratung__bildtext { position: absolute; left: 0.625rem; bottom: -1rem; display: inline-flex; align-items: center; gap: 0.5rem; max-width: calc(100% - 1.25rem); padding: 0.5rem 0.875rem; border-radius: var(--r-rund); background: #fff; box-shadow: var(--schatten); color: var(--marine); font-size: var(--fs-mini); font-weight: 600; line-height: 1.3; }
.r6-beratung__bildtext .icon { width: 1.125rem; height: 1.125rem; color: var(--gruen); }
.r6-beratung__notiz { display: flex; align-items: flex-end; gap: 0.5rem; color: var(--gruen-dunkel); font: 700 var(--fs-klein)/1.4 var(--font-titel); }
.r6-beratung__notiz .icon { width: 1.5rem; height: 1.5rem; color: var(--gruen); rotate: 180deg; }
.r6-pille { grid-area: pille; display: flex; align-items: center; gap: 1rem; width: fit-content; max-width: 30rem; padding: 0.75rem 1.5rem 0.75rem 0.75rem; border-radius: var(--r-rund); background: var(--mint-hell); box-shadow: inset 0 0 0 1px var(--mint-2); }
.r6-pille .icon-kreis { width: 3rem; height: 3rem; background: var(--mint); }
.r6-pille__titel { color: var(--marine); font: 700 var(--fs-text)/1.3 var(--font-titel); }
.r6-pille__text { color: var(--text); font-size: var(--fs-klein); line-height: 1.4; }
.r6-beratung__knopf { grid-area: knopf; }
@media (min-width: 64rem) {
  .r6-beratung__page { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); grid-template-areas: "kopf bilder" "pille bilder" "knopf bilder"; grid-template-rows: auto auto 1fr; gap: 1.75rem clamp(3rem, 5vw, 5rem); align-items: start; }
  .r6-beratung__bilder { position: relative; }
  .r6-beratung__haupt { width: 52%; }
  .r6-beratung__neben { position: absolute; top: 0; right: 0; flex-direction: column; gap: 0.75rem; width: 52%; margin: 0; }
  .r6-beratung__notiz { justify-content: flex-end; min-height: 5.5rem; padding-left: 2rem; text-align: right; }
  .r6-beratung__notiz .icon { rotate: none; }
  .r6-beratung__bildtext { font-size: var(--fs-klein); }
}

/* --- Persoenlich fuer Sie da (Handy und Tablet, R11 nach Stevens Mockup 2026-10-29): Text, Stevens Foto bis an die Kanten, darueber
   eine weisse Karte mit drei Punkten und Knopf. Der Text steht auf Weiss ueber dem Foto, nicht darauf (E21: kein Nebel) ------- */
.r6-persoenlich__bild { margin-top: 1.75rem; }
.r6-persoenlich__bild img { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; object-position: 72% 50%; }
.r6-persoenlich__karte { position: relative; margin-top: -3.5rem; padding: 0.5rem 1.25rem 1.25rem; border-radius: var(--r-gross); background: #fff; box-shadow: var(--schatten-hoch); }
.r6-persoenlich__liste { margin: 0 0 1.25rem; padding: 0; list-style: none; }
.r6-persoenlich__liste li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; padding-block: 1rem; }
.r6-persoenlich__liste li + li { border-top: 1px solid var(--linie); }
.r6-persoenlich .icon-kreis { width: 3.5rem; height: 3.5rem; }
.r6-persoenlich .knopf { width: 100%; }
/* Tablet: Stevens Foto gibt es nur bis 1024px, darum hoechstens 32rem breit (Retina) */
@media (min-width: 33rem) {
  .r6-persoenlich > .page, .r6-persoenlich__bild { max-width: 32rem; margin-inline: auto; }
  .r6-persoenlich__bild { overflow: hidden; border-radius: var(--r-gross); }
}

/* --- Regional verankert (S. 6): Text und zwei Punkte links, Karte rechts --- */
.r6-regional { padding-top: var(--pad-eng); }
.r6-regional__page { display: grid; gap: 2rem; }
.r6-regional__punkte { display: grid; gap: 1.25rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.r6-regional__punkte li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; }
.r6-punkt__titel { color: var(--marine); font: 700 var(--fs-text)/1.3 var(--font-titel); }
.r6-punkt__text { margin-top: 0.25rem; font-size: var(--fs-klein); line-height: 1.5; }
.r6-regional__karte { position: relative; margin-inline: calc(-1 * var(--gutter)); }
.r6-regional__karte .karte-ch__quelle { padding-inline: var(--gutter); }
.r6-karte__namen { position: absolute; top: 0; left: 0; width: 100%; height: auto; pointer-events: none; }
.r6-karte__namen text { fill: var(--marine); font-family: var(--font-titel); font-weight: 800; letter-spacing: -0.01em; paint-order: stroke; stroke: rgb(255 255 255 / 0.5); stroke-width: 4px; stroke-linejoin: round; }
@media (min-width: 36rem) { .r6-regional__punkte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  .r6-regional__page { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: clamp(2rem, 4vw, 4rem); }
  .r6-regional__karte { margin-inline: 0 calc(-1 * var(--gutter)); }
  .r6-regional__karte .karte-ch__quelle { padding-inline: 0; }
}

/* --- Jetzt starten (S. 7): dunkelgruenes Band, Foto rechts eingeblendet ---- */
/* overflow: clip statt hidden, sonst steht die Scroll-Zeitleiste des Fotos still (DESIGN.md 6, Bewegung unten) */
.r6-schluss { position: relative; isolation: isolate; overflow: clip; background: linear-gradient(135deg, #0B4A33 0%, var(--gruen-dunkel) 100%); color: rgb(255 255 255 / 0.86); }
.r6-schluss__page { position: relative; z-index: 1; padding-block: var(--pad) 0; }
.r6-schluss .kicker, .r6-schluss .h2 { color: var(--auf-dunkel); }
.r6-schluss .akzent { color: var(--mint-auf-dunkel); }
.r6-schluss .lead { color: rgb(255 255 255 / 0.86); }
.r6-schluss__knopf { margin-top: 1.75rem; color: var(--gruen-dunkel); box-shadow: none; }
.r6-schluss__bild { height: clamp(11rem, 52vw, 18rem); margin-top: -1rem; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 45%); mask-image: linear-gradient(180deg, transparent 0, #000 45%); }
.r6-schluss__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
@media (hover: hover) { .r6-schluss__knopf:hover { background: var(--mint); color: var(--gruen-dunkel); } }
@media (min-width: 64rem) {
  .r6-schluss__page { padding-block: clamp(4rem, 7vw, 6rem); }
  .r6-schluss .kopfblock { max-width: 34rem; }
  .r6-schluss__bild { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; height: auto; margin: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%); mask-image: linear-gradient(90deg, transparent 0, #000 42%); }
}

/* --- Haeufige Fragen: Titel links, Fragen rechts (wie bisher) -------------- */
.fragen__knopf { margin-top: 1.75rem; }
@media (min-width: 64rem) {
  .fragen__page { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .fragen__kopf { position: sticky; top: calc(var(--header-h) + 2rem); }
  .fragen__liste { margin-top: 0 !important; }
}

/* --- Bewegung der Startseite («auflegen», theme.css und styles.css 23) ------
   Endzustand = Stand vor der Bewegung. Ausgangszustaende nur unter .js und ohne
   Reduced Motion; [data-inview] mit Zahl in index.ejs: Ausloesung erst, wenn die
   Oberkante so viele Prozent ueber dem unteren Rand steht (main.js). */
@property --ring { syntax: '<angle>'; inherits: false; initial-value: 180deg; }

@media (prefers-reduced-motion: no-preference) {
  /* Auftritt beim Laden, fertig nach rund 1,6 s: das Foto setzt sich, die Linie
     des Kickers zieht sich, die Titelzeilen steigen, der Strich unter «sparen.»
     zieht sich von links, am Desktop legt sich die Karte von rechts auf das Foto */
  .r6-hero__bild img { animation: ht-setzen calc(2180ms * var(--tempo)) var(--ease-auflegen) backwards; }
  .r6-hero__kicker { animation: ht-da calc(750ms * var(--tempo)) var(--ease) calc(120ms * var(--tempo)) backwards; }
  .r6-hero__kicker::after { transform-origin: left center; animation: ht-ziehen-x calc(var(--dur-linie) * var(--tempo)) var(--ease-ziehen) calc(330ms * var(--tempo)) backwards; }
  .r6-hero .h1 { --z-start: 220ms; }
  .r6-hero .strich::after { animation: ht-wischen calc(960ms * var(--tempo)) var(--ease-ziehen) calc(1410ms * var(--tempo)) backwards; }
  .r6-hero__lead { animation: ht-da calc(1050ms * var(--tempo)) var(--ease) calc(630ms * var(--tempo)) backwards; }

  /* So einfach geht's: ein Weg. Schritt fuer Schritt setzt sich die Nummer, die
     Karte legt sich, die gestrichelte Linie zieht sich zur naechsten Nummer;
     dann die kleinen Bilder: Haken auf dem Fragebogen, drei Blaetter faechern
     sich auf, die Sprechblase setzt sich ans Haus */
  .r6-schritte { --hub: 1.25rem; }
  .r6-schritt { --s: 0ms; }
  .r6-schritt:nth-child(2) { --s: 400ms; }
  .r6-schritt:nth-child(3) { --s: 800ms; }
  .r6-schritt__nr { transition: opacity 450ms var(--ease) var(--s), transform 900ms var(--ease-auflegen) var(--s); }
  .r6-schritt__karte { transition: opacity 540ms var(--ease) calc(var(--s) + 90ms), transform var(--dur-blatt) var(--ease-auflegen) calc(var(--s) + 90ms); }
  .js .r6-schritte__liste:not(.is-in) .r6-schritt__nr { opacity: 0; transform: scale(0.6); }
  .js .r6-schritte__liste:not(.is-in) .r6-schritt__karte { opacity: 0; transform: translateX(var(--hub)) rotate(0.8deg); }
  .r6-blatt > span .icon { transition: transform 570ms var(--ease-auflegen) calc(var(--s) + 1020ms + var(--k, 0ms)); }
  .r6-blatt > span:nth-child(2) .icon { --k: 200ms; }
  .r6-blatt > span:nth-child(3) .icon { --k: 390ms; }
  .js .r6-schritte__liste:not(.is-in) .r6-blatt .icon { transform: scale(0); }
  .r6-mini { transition: translate 1140ms var(--ease-auflegen) calc(var(--s) + 930ms), rotate 1140ms var(--ease-auflegen) calc(var(--s) + 930ms); }
  .js .r6-schritte__liste:not(.is-in) .r6-mini { translate: 0 0.25rem; rotate: 0deg; }
  .js .r6-schritte__liste:not(.is-in) .r6-mini--mitte { translate: 0 0; }
  .r6-blase { transform-origin: 0 100%; transition: opacity 300ms var(--ease) calc(var(--s) + 1050ms), transform 750ms var(--ease-auflegen) calc(var(--s) + 1050ms); }
  .js .r6-schritte__liste:not(.is-in) .r6-blase { opacity: 0; transform: scale(0.5); }

  /* Signatur, Desktop: drei Offerten legen sich 1-2-3 von rechts nebeneinander
     auf den Tisch (Konzept-Satz), mit dem Schatten eines Blatts in der Luft; das
     Preisschild legt sich auf jedes Blatt; dann werden die Zeilen quer ueber alle
     drei abgeglichen (gleiche Zeile, gleicher Moment); zuletzt legt sich die Pille
     auf die passende Offerte, und ihr Rahmen zieht sich von der Pille aus beidseits
     um das Blatt (--ring, Maske). Ohne JS bleibt der Rahmen der box-shadow. */
  .r6-offerte { --o: 0ms; transition: opacity 450ms var(--ease) var(--o), transform var(--dur-blatt) var(--ease-auflegen) var(--o); }
  .r6-offerte:nth-child(2) { --o: var(--takt); }
  .r6-offerte:nth-child(3) { --o: calc(2 * var(--takt)); }
  .r6-offerte::before { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--schatten-flug); opacity: 0; pointer-events: none; transition: opacity var(--dur-blatt) var(--ease-auflegen) var(--o); }
  .js .r6-vergleich__raster:not(.is-in) .r6-offerte { opacity: 0; transform: translateX(var(--hub)) rotate(1deg); }
  .js .r6-vergleich__raster:not(.is-in) .r6-offerte::before { opacity: 1; }
  .r6-offerte__preis { transition: opacity 450ms var(--ease) calc(var(--o) + 630ms), transform 900ms var(--ease-auflegen) calc(var(--o) + 630ms); }
  .js .r6-vergleich__raster:not(.is-in) .r6-offerte__preis { opacity: 0; transform: translateY(0.625rem); }
  .r6-offerte .offerte__zeile { --r: 0ms; }
  .r6-offerte .offerte__zeile:nth-child(2) { --r: 150ms; }
  .r6-offerte .offerte__zeile:nth-child(3) { --r: 300ms; }
  .r6-offerte .offerte__zeile:nth-child(4) { --r: 450ms; }
  .r6-offerte .offerte__zeile dd { transition: opacity 390ms var(--ease) calc(720ms + var(--r)), transform 780ms var(--ease-auflegen) calc(720ms + var(--r)); }
  .js .r6-vergleich__raster:not(.is-in) .offerte__zeile dd { opacity: 0; transform: translateX(0.625rem); }
  .r6-offerte__badge { transition: opacity 330ms var(--ease) 630ms, transform 840ms var(--ease-auflegen) 630ms; }
  .js .r6-vergleich__raster:not(.is-in) .r6-offerte__badge { opacity: 0; transform: translateY(-0.75rem); }
  .js .r6-offerte.offerte--empfohlen { box-shadow: var(--schatten-hoch); }
  .js .r6-offerte.offerte--empfohlen::after { content: ''; position: absolute; inset: -2px; border: 2px solid var(--gruen); border-radius: calc(var(--r-karte) + 2px); pointer-events: none;
    -webkit-mask-image: conic-gradient(#000 var(--ring), transparent 0 calc(360deg - var(--ring)), #000 0); mask-image: conic-gradient(#000 var(--ring), transparent 0 calc(360deg - var(--ring)), #000 0);
    transition: --ring 1350ms var(--ease-ziehen) 930ms; }
  .js .r6-vergleich__raster:not(.is-in) .r6-offerte.offerte--empfohlen::after { --ring: 0deg; }

  /* Vergleich am Handy: die drei Karten legen sich 1-2-3, die Garantie fuellt
     sich Punkt fuer Punkt, die Haken setzen sich */
  .r11-vergleich { --hub: 1.5rem; }
  .r11-karte { --o: 0ms; transition: opacity 450ms var(--ease) var(--o), transform var(--dur-blatt) var(--ease-auflegen) var(--o); }
  .r11-karte:nth-child(2) { --o: var(--takt); }
  .r11-karte:nth-child(3) { --o: calc(2 * var(--takt)); }
  .js .r11-karten:not(.is-in) .r11-karte { opacity: 0; transform: translateX(var(--hub)) rotate(1deg); }
  .r11-punkte i.an { transition: background-color 330ms var(--ease) calc(var(--o) + 1080ms + var(--p, 0ms)); }
  .r11-punkte i:nth-child(2) { --p: 210ms; }
  .r11-punkte i:nth-child(3) { --p: 420ms; }
  .js .r11-karten:not(.is-in) .r11-punkte i.an { background: #D5DCE3; }
  .r11-ja .icon { transition: transform 630ms var(--ease-auflegen) calc(var(--o) + 960ms); }
  .js .r11-karten:not(.is-in) .r11-ja .icon { transform: scale(0); }

  /* Warum Heimtreffer: die drei Zeichen ziehen sich nacheinander (styles.css 23, data-zeichnen) */
  .r6-warum__item:nth-child(2) { --zeichnen-ab: 300ms; }
  .r6-warum__item:nth-child(3) { --zeichnen-ab: 600ms; }

  /* Gut beraten: Stevens Foto oeffnet sich von unten im Fenster und setzt sich,
     das Foto der Offertenanalyse legt sich von rechts darueber, die Notiz kommt
     und ihr Pfeil zeigt auf das Foto, das Schild legt sich auf die Kante */
  .js .r6-beratung__haupt { clip-path: inset(-3rem -3rem -3rem -3rem); transition: clip-path 1500ms var(--ease-ziehen); }
  .js .r6-beratung__bilder:not(.is-in) .r6-beratung__haupt { clip-path: inset(100% -3rem 0 -3rem); }
  .r6-beratung__haupt img { transition: transform 2100ms var(--ease-auflegen); }
  .js .r6-beratung__bilder:not(.is-in) .r6-beratung__haupt img { transform: scale(1.06); }
  .r6-beratung__neben-bild { transition: opacity 450ms var(--ease) 450ms, transform var(--dur-blatt) var(--ease-auflegen) 450ms; }
  .js .r6-beratung__bilder:not(.is-in) .r6-beratung__neben-bild { opacity: 0; transform: translateX(var(--hub)) rotate(1.1deg); }
  .r6-beratung__bildtext { transition: opacity 390ms var(--ease) 1230ms, transform 840ms var(--ease-auflegen) 1230ms; }
  .js .r6-beratung__bilder:not(.is-in) .r6-beratung__bildtext { opacity: 0; transform: translateX(-0.75rem); }
  .r6-beratung__notiz { transition: opacity 600ms var(--ease) 630ms; }
  .r6-beratung__notiz .icon { transition: transform 780ms var(--ease-auflegen) 840ms; }
  .js .r6-beratung__bilder:not(.is-in) .r6-beratung__notiz { opacity: 0; }
  .js .r6-beratung__bilder:not(.is-in) .r6-beratung__notiz .icon { transform: translateY(-0.625rem); }

  /* Persoenlich fuer Sie da (Handy): die weisse Karte legt sich auf Stevens Foto */
  .r6-persoenlich__karte { transition: opacity 480ms var(--ease) 120ms, transform var(--dur-blatt) var(--ease-auflegen) 120ms; }
  .js .r6-persoenlich__karte:not(.is-in) { opacity: 0; transform: translateY(1.5rem) rotate(-0.8deg); }

  /* Regional verankert: Gebiet und Pins in styles.css 23, die Kantonsnamen danach */
  .r6-karte__namen { transition: opacity 750ms var(--ease) 780ms; }
  .js .r6-regional__karte:has(.karte-ch:not(.is-in)) .r6-karte__namen { opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 64rem) {
  .r6-hero__karte { position: relative; animation: ht-auflegen calc(var(--dur-blatt) * 1.1 * var(--tempo)) var(--ease-auflegen) calc(570ms * var(--tempo)) backwards; }
  .r6-hero__karte::before { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--schatten-flug); opacity: 0; pointer-events: none; animation: ht-flug calc(var(--dur-blatt) * 1.1 * var(--tempo)) var(--ease-auflegen) calc(570ms * var(--tempo)) backwards; }
  .r6-schritte { --hub: 2rem; }
  .r6-schritt:not(:last-child)::before { clip-path: inset(0 -2px 0 -2px); transition: clip-path 520ms var(--ease-ziehen) calc(var(--s) + 120ms); }
  .js .r6-schritte__liste:not(.is-in) .r6-schritt:not(:last-child)::before { clip-path: inset(0 -2px 100% -2px); }
}

/* Jetzt starten: das Solardach setzt sich, waehrend das Band hereinscrollt (Nebenbewegung, 5 Prozent) */
@supports (animation-timeline: view()) and (animation-range: entry) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 48rem) {
    .r6-schluss__bild img { animation: ht-setzen linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
  }
}