/* ============================ UNTERSEITE IMMOBILIE VERKAUFEN (16.09.) ============================
   Vier Hero-Varianten zum Vergleich plus Seitenuebergang. Farben, Schriften und Abstaende
   kommen aus tokens.css bzw. styles.css, hier steht nur, was die Unterseite zusaetzlich braucht. */

/* --- Umschalter --- */
.vh-schalter{position:sticky;top:0;z-index:55;display:flex;align-items:center;gap:var(--r-8);flex-wrap:wrap;
  justify-content:flex-end;padding:var(--r-8) var(--rand);background:var(--papier);border-bottom:1px solid var(--linie)}
.vh-schalter__titel{margin-right:auto;font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-2)}
.vh-schalter button{min-height:40px;padding:0 var(--r-16);border:1px solid var(--linie-stark);background:transparent;
  cursor:pointer;font-family:var(--schrift-hl);font-weight:500;font-size:13px;letter-spacing:.06em;color:var(--tinte)}
.vh-schalter button[aria-selected="true"]{background:var(--rot);border-color:var(--rot);color:var(--weiss)}
.vh-var[hidden]{display:none}

/* Sechs Schritte statt acht, danach laeuft der graue Zug ein. Die Huelle traegt beides:
   die Fahrt der Spur und den Uebergang, der sich ueber eine laengere Strecke zieht --
   kurz gefasst wirkte er abgehackt (Feedback 05.10.). */
.v3-ablauf .hor-buehne{height:420vh}
/* Luft hinter dem Notartermin, damit die letzte Karte frei steht und nicht an der
   Fensterkante klebt. Der Wert geht in die Fahrstrecke ein (siehe script.js). */
.v3-ablauf .hor-spur{padding-right:clamp(90px,13vw,260px)}
/* Volle Fensterhoehe und kein seitlicher Beschnitt: der graue Zug soll die ganze Flaeche
   fuellen. Die Startseite begrenzt beides (82vh, clip-path auf die Menuelinie) -- das gilt
   dort fuer eine Sektion ohne Vollbild und wird hier zurueckgenommen. */
.v3-ablauf .hor-innen{position:sticky;overflow:hidden;clip-path:none}
@media(min-width:769px){.v3-ablauf .hor-innen{height:100vh;height:100svh}}
/* Kopf und Spur zusammen; die Lage uebernimmt die Spaltenaufteilung von .hor-innen,
   damit der eingezogene Rahmen am Aussehen nichts aendert. */
.vk-lage{display:flex;flex-direction:column;gap:clamp(14px,2vh,28px);will-change:transform}

/* --- Der graue Zug: faehrt von rechts ueber den Ablauf (05.10.) ---
   Farben und Koernung wie die Vorhangflaeche der Startseite, nur liegen die Verlaeufe
   waagerecht statt senkrecht. Die weiche Kante links entsteht ueber eine Maske; ihre
   Breite setzt das Skript auf --kante und faehrt sie mit dem Einlaufen auf 0 zurueck,
   damit am Ende eine saubere Flaeche steht. */
.vk-zug{position:absolute;inset:0;z-index:3;display:grid;place-items:center;
  transform:translate3d(100%,0,0);will-change:transform;
  background-color:#1a1917;
  background-image:
    radial-gradient(42% 70% at 88% 18%, rgba(236,232,226,.20) 0%, rgba(236,232,226,0) 70%),
    radial-gradient(58% 90% at 4% 86%, rgba(8,8,7,.60) 0%, rgba(8,8,7,0) 66%),
    linear-gradient(90deg,#13120F 0%,#1a1917 38%,#2c2a27 100%)}
/* Koernung wie auf der Startseite, sonst wirkt die grosse Flaeche flau. */
.vk-zug::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:screen;
  background-size:220px 220px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
/* --- Sektion 4: Kaeuferpruefung, dunkel weiterlaufend (05.10.) ---
   Derselbe Farbaufbau wie der Zug, aber am Fenster verankert (background-attachment:fixed,
   wie .wisch-flaeche auf der Startseite). Dadurch zeigt die Sektion an jeder Scrollposition
   denselben Ausschnitt wie der stehende Zug darueber -- die Naht zwischen beiden bleibt
   unsichtbar, statt dass der Verlauf an der Kante neu anfaengt. */
.vpruef{position:relative;color:var(--weiss);
  padding:clamp(80px,10vh,150px) 0 clamp(90px,12vh,170px);
  background-color:#1a1917;
  background-image:
    radial-gradient(42% 120% at 88% 50%, rgba(236,232,226,.20) 0%, rgba(236,232,226,0) 70%),
    radial-gradient(58% 140% at 4% 50%, rgba(8,8,7,.60) 0%, rgba(8,8,7,0) 66%),
    linear-gradient(90deg,#13120F 0%,#1a1917 38%,#2c2a27 100%)}
/* Koernung wie beim Zug, sonst wirkt die Flaeche flau. */
.vpruef::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.10;mix-blend-mode:screen;
  background-size:220px 220px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
/* Naht zwischen Zug und Pruefsektion (05.10.): Beide Flaechen tragen dieselben Verlaeufe,
   sitzen aber unterschiedlich hoch -- die radialen Anteile treffen sich an der Kante
   deshalb nicht und es blieb ein sichtbarer Absatz von rund zwoelf Helligkeitsstufen.
   Statt die Verlaeufe anzugleichen, laufen beide Seiten ueber 220 Pixel auf exakt die
   Grundfarbe zu. An der Kante selbst steht dadurch beidseitig derselbe Wert. */
.vk-zug::after,.vpruef::after{content:"";position:absolute;left:0;right:0;height:220px;
  z-index:0;pointer-events:none}
.vk-zug::after{bottom:0;background:linear-gradient(to bottom, rgba(26,25,23,0) 0%, #1a1917 100%)}
.vpruef::after{top:0;background:linear-gradient(to bottom, #1a1917 0%, rgba(26,25,23,0) 100%)}
.vpruef > *{position:relative;z-index:1}
.vpruef .register{color:rgba(255,255,255,.7)}
.vpruef-titel{margin:var(--r-12) 0 0;font-family:var(--schrift-hl);font-weight:700;
  font-size:clamp(30px,4vw,64px);line-height:1.08;letter-spacing:-.03em;color:var(--weiss);
  padding-bottom:.04em;max-width:20ch}
.vpruef-titel .rot-hell{color:var(--rot-hell)}
.vpruef-lead{margin:var(--r-24) 0 0;font-family:var(--schrift);font-size:var(--t-18);
  line-height:1.6;color:rgba(255,255,255,.85);max-width:56ch}
/* Kacheln nach dem Vorbild des Ablauf-Rasters (Feedback 05.10.): helle Flaechen in einem
   feinen Liniengitter, die sich beim Hovern rot fuellen. Die Fuellung waechst von unten
   herauf -- dieselbe Richtung wie die Masken-Slides im Rest des Auftritts.
   Gefuellt wird mit dem Marken-Rot, nicht mit Rot-Hell: weisser Text auf Rot-Hell kommt
   nur auf 3,1:1 und bliebe unter den 4,5:1 der Leitdatei. */
/* Zwei Kacheln pro Reihe als Querformat, mit Abstand statt geschlossenem Gitter
   (Feedback 05.10.). Auf dem dunklen Grund stehen sie so als vier einzelne Tafeln. */
.vpruef-raster{margin-top:clamp(48px,6vw,88px);display:grid;gap:clamp(16px,1.6vw,26px);
  grid-template-columns:1fr}
@media(min-width:760px){.vpruef-raster{grid-template-columns:repeat(2,1fr)}}
/* Hover wie das Leistungsraster unter dem Imagefilm der Startseite (.leistungen li,
   Feedback 05.10.): Das rote Quadrat neben der Nummer waechst aus seiner Ecke heraus,
   bis es die ganze Kachel fuellt -- dieselbe Bewegung wie im Menue, gleiche Dauer und
   Kurve. Keine zweite Flaeche mehr, die von unten heraufkommt. */
.vpruef-punkt{position:relative;isolation:isolate;background:var(--papier);
  padding:clamp(26px,2.6vw,38px) clamp(22px,2.2vw,32px) clamp(30px,3vw,44px)
          calc(clamp(22px,2.2vw,32px) + 20px + var(--r-12));
  min-height:clamp(200px,15vw,250px);
  transition:color .6s cubic-bezier(.39,.52,0,1)}
.vpruef-punkt::before{content:"";position:absolute;z-index:-1;background:var(--rot);
  left:clamp(22px,2.2vw,32px);top:clamp(26px,2.6vw,38px);width:20px;height:20px;
  transition:width .6s cubic-bezier(.39,.52,0,1),height .6s cubic-bezier(.39,.52,0,1),
             left .6s cubic-bezier(.39,.52,0,1),top .6s cubic-bezier(.39,.52,0,1)}
.vpruef-kopfzeile{display:block}
.vpruef-nr{display:block;font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.18em;
  color:var(--rot);line-height:20px;transition:color .6s cubic-bezier(.39,.52,0,1)}
/* Mehr Luft zwischen Nummer und Ueberschrift -- mit 16px wirkte es gequetscht (05.10.) */
.vpruef-punkt h3{margin:clamp(30px,2.8vw,44px) 0 var(--r-12);font-family:var(--schrift-hl);font-weight:700;
  font-size:clamp(19px,1.7vw,27px);line-height:1.15;letter-spacing:-.01em;color:var(--tinte);
  transition:color .6s cubic-bezier(.39,.52,0,1)}
.vpruef-punkt p{margin:0;max-width:46ch;font-family:var(--schrift);font-size:var(--t-18);line-height:1.55;
  color:var(--text-2);transition:color .6s cubic-bezier(.39,.52,0,1)}
@media(hover:hover){
  .vpruef-punkt:hover::before,.vpruef-punkt:focus-within::before{left:0;top:0;width:100%;height:100%}
  .vpruef-punkt:hover .vpruef-nr,.vpruef-punkt:focus-within .vpruef-nr,
  .vpruef-punkt:hover h3,.vpruef-punkt:focus-within h3{color:var(--weiss)}
  .vpruef-punkt:hover p,.vpruef-punkt:focus-within p{color:rgba(255,255,255,.92)}
}
@media(prefers-reduced-motion:reduce){
  .vpruef-punkt::before,.vpruef-punkt *{transition:none}
}

.vk-zug-inhalt{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:var(--r-16)}
/* Groessen wie der Aufruf im Vorhang der Startseite (.wisch-titel/.wisch-text, Feedback
   05.10.) -- beide CTAs sollen sich wie derselbe Baustein lesen. */
.vk-zug-titel{margin:0;font-family:var(--schrift-hl);font-weight:700;
  font-size:clamp(44px,7.4vw,124px);line-height:1;letter-spacing:-.035em;color:var(--weiss);
  padding-bottom:.04em}
.vk-zug-text{margin:0;font-family:var(--schrift);font-size:clamp(18px,1.4vw,22px);line-height:1.6;
  color:rgba(255,255,255,.75);max-width:29.3em}  /* = 644px bei 22px, wie auf der Startseite */
.vk-zug .register{color:rgba(255,255,255,.75)}
.vk-zug .knopf-primaer{margin-top:var(--r-12)}
/* Ohne Skript und bei reduzierter Bewegung steht der Zug einfach da. */
@media(prefers-reduced-motion:reduce){
  .vk-zug{transform:none;-webkit-mask-image:none;mask-image:none}
}
/* Auf schmalen Geraeten faehrt nichts waagerecht: dort steht der Ablauf untereinander
   (siehe .hor-innen in styles.css) und der Zug wird eine normale Sektion darunter.
   Ohne diese Regel bliebe er wegen seiner Grundstellung ausserhalb des Bildes. */
@media(max-width:768px){
  /* Die Huelle darf keine feste Hoehe behalten: untereinander ist der Inhalt hoeher als
     300vh, er lief sonst aus der Huelle heraus und die folgenden Sektionen schoben sich
     darueber. */
  .v3-ablauf .hor-buehne{height:auto}
  .vk-lage{filter:none!important;opacity:1!important;transform:none!important}
  .vk-zug{position:static;transform:none;padding:clamp(56px,12vh,96px) 0;min-height:auto}
  .vk-zug-titel{font-size:clamp(36px,10vw,52px)}
}

/* --- gemeinsame Bausteine --- */
.vh{background:var(--papier);padding:clamp(56px,7vw,120px) 0 clamp(48px,6vw,100px)}
/* Die Groesse der Inter-Fassung setzt styles.css am Dateiende (Abschnitt "Groessen anheben"),
   gemeinsam mit .b2-claim. Hier steht nur der Grundwert der ersten Fassung. */
.vh-titel{margin:var(--r-12) 0 0;font-family:var(--schrift-hl);font-weight:700;font-size:clamp(34px,4.6vw,76px);
  line-height:1.05;letter-spacing:-.025em;text-transform:uppercase;color:var(--tinte)}
.vh-titel .rot{color:var(--rot)}
.vh-lead{margin:var(--r-24) 0 0;font-family:var(--schrift);font-size:var(--t-text);line-height:1.35;
  letter-spacing:-.02em;color:var(--text-2);max-width:48ch}
.vh-lead--hell{color:rgba(255,255,255,.85)}
.vh-knopf{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 clamp(20px,2.4vw,34px);
  border:0;background:var(--rot);color:var(--weiss);cursor:pointer;text-decoration:none;
  font-family:var(--schrift-hl);font-weight:500;font-size:var(--t-18);letter-spacing:.04em;
  transition:background .35s cubic-bezier(.39,.52,0,1)}
.vh-knopf:hover{background:var(--rot-tief)}
.vh-knopf--hell{background:var(--weiss);color:var(--rot)}
.vh-knopf--hell:hover{background:var(--stein)}

/* --- A: Versprechen plus Formular, als Landingpage-Hero (28.09.) ---
   Bild ueber die volle Breite, Text darauf, darunter das Formular als Leiste, die halb ueber
   die Bildkante ragt. Negatives margin-top statt position:absolute, damit die Leiste im Fluss
   bleibt und den folgenden Abschnitt korrekt nach unten schiebt. */
.vh-a{position:relative;padding:0;background:var(--papier)}
/* Das Bild laeuft unter der durchsichtigen Kopfleiste durch und fuellt den Bildschirm
   (28.09.): um die Kopfhoehe nach oben gezogen, Hoehe genau ein Bildschirm.
   svh statt vh, damit auf dem Handy die ein- und ausfahrende Browserleiste nicht springt. */
.vh-a-bild{position:relative;width:100%;margin-top:calc(-1 * var(--kopf-hoehe));
  height:100vh;height:100svh;overflow:hidden;isolation:isolate;background:var(--stein)}
/* Naeher heran und nach der Drittelregel ausgerichtet (28.09.): das Bild ist im Verhaeltnis
   schmaler als der Bildschirm, `cover` beschneidet also nur oben und unten -- waagerecht
   bewirkt object-position nichts. Der Zoom laeuft deshalb ueber transform, und die
   transform-origin ist so gewaehlt, dass das Haus auf dem rechten Drittelpunkt landet. */
.vh-a-bild img{width:100%;height:100%;object-fit:cover;object-position:56% 58%;display:block;
  transform:scale(1.22);transform-origin:57% 73%}
@media(max-width:760px){.vh-a-bild img{transform:scale(1.2);transform-origin:62% 66%}}
/* Verlauf von links, damit die Schrift auf jedem Motiv steht. Anthrazit, kein Rot. */
.vh-a-bild::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(95deg,rgba(20,19,17,.88) 0%,rgba(20,19,17,.72) 34%,rgba(20,19,17,.28) 62%,rgba(20,19,17,.06) 84%),
             linear-gradient(to top,rgba(20,19,17,.42) 0%,rgba(20,19,17,0) 26%)}
/* Korn wie ueber allen anderen Fotos */
.vh-a-bild::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-size:220px 220px;mix-blend-mode:overlay;opacity:.16}
/* Der Text sitzt im unteren Bilddrittel und endet oberhalb der Formularleiste --
   mittig gesetzt lief er darunter (28.09.). */
/* max-width bleibt die des Rahmens: mit max-width:none stand der Claim auf breiten
   Bildschirmen 200px weiter links als Kopf und Formular (28.09.). */
.vh-a-text{position:absolute;left:0;right:0;bottom:clamp(220px,30vh,340px);z-index:3;
  margin-inline:auto;color:var(--weiss)}
@media(max-width:760px){.vh-a-text{bottom:clamp(40px,8vh,90px)}}
.vh-a-text .register{color:var(--weiss);opacity:.9}
.vh-a-text .vh-titel{color:var(--weiss);max-width:14ch}
.vh-a-text .vh-lead{color:rgba(255,255,255,.86);max-width:46ch}
/* Die drei Argumente laufen auf dem Bild waagerecht -- das spart Hoehe und liest sich
   wie eine Vertrauensleiste statt wie eine Aufzaehlung. */
.vh-a-text .vh-punkte li{color:rgba(255,255,255,.9)}
@media(min-width:960px){
  .vh-a-text .vh-punkte{flex-direction:row;flex-wrap:wrap;gap:clamp(20px,2.6vw,42px)}
  .vh-a-text .vh-punkte li{padding-left:var(--r-16)}
  .vh-a-text .vh-punkte li::before{width:8px;height:8px}
}
@media(max-width:760px){
  .vh-a-bild{height:clamp(380px,70vh,560px)}
  .vh-a-text .vh-punkte{display:none}   /* auf dem Handy zaehlt der Claim, nicht die Liste */
}

/* Formularleiste: sitzt am unteren Rand des Bildes, nicht darunter (28.09.). */
.vh-a-leiste{position:absolute;left:0;right:0;bottom:clamp(24px,4vh,56px);z-index:4}
.vh-a-leiste .vh-hinweis,.vh-a-leiste .vh-klein{margin-top:var(--r-8);padding:0;
  color:rgba(255,255,255,.78)}
@media(max-width:760px){
  /* Auf dem Handy passt die Leiste nicht mehr ins Bild: sie ruecht darunter. */
  .vh-a-leiste{position:relative;bottom:auto;margin-top:var(--r-24);padding-bottom:clamp(40px,7vw,72px)}
  .vh-a-leiste .vh-hinweis,.vh-a-leiste .vh-klein{color:var(--text-2)}
}
.vh-punkte{list-style:none;margin:var(--r-24) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--r-12)}
.vh-punkte li{position:relative;padding-left:var(--r-24);font-family:var(--schrift);font-size:var(--t-15);
  line-height:1.35;color:var(--tinte)}
.vh-punkte li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;background:var(--rot)}
/* Die Leiste liegt waagerecht: drei Felder und der Knopf in einer Reihe, durch senkrechte
   Linien getrennt. Unter 960px kippt sie in die urspruengliche Spalte zurueck. */
.vh-form{background:var(--weiss);padding:clamp(24px,2.8vw,44px);display:flex;flex-direction:column;gap:var(--r-16);
  box-shadow:0 22px 50px -26px rgba(20,19,17,.42)}
@media(min-width:960px){
  /* Die Flucht traegt die KANTE des weissen Kastens, nicht der Text darin (28.09.):
     der Kasten beginnt und endet dort, wo auch Logo, Claim und Menue enden. Zwischendurch
     lief er um seinen Innenabstand nach aussen und stand damit als Einziger vor der Linie. */
  .vh-form{flex-direction:row;align-items:end;gap:0;padding:clamp(20px,1.8vw,28px)}
  .vh-form .feld{flex:1 1 0;min-width:0;padding:0 clamp(18px,2vw,30px);border-left:1px solid var(--linie)}
  .vh-form .feld:first-child{border-left:0;padding-left:clamp(20px,2.2vw,34px)}
  /* Der Knopf stand unten buendig mit den Eingabezeilen; mittig sitzt er ruhiger (05.10.) */
  .vh-form .vh-knopf{flex:0 0 auto;margin-left:clamp(18px,2vw,30px);align-self:center}
}
.vh-form-titel{margin:0;font-family:var(--schrift-hl);font-weight:700;font-size:var(--t-24);
  letter-spacing:-.01em;text-transform:uppercase;color:var(--tinte)}
.vh-form .feld{display:flex;flex-direction:column;gap:var(--r-8)}
.vh-form label{font-family:var(--schrift-label);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-2)}
.vh-form input{min-height:52px;padding:var(--r-8) 0;border:0;border-bottom:1px solid var(--linie-stark);
  background:transparent;font-family:var(--schrift);font-size:var(--t-text);color:var(--tinte)}
.vh-form input:focus{outline:none;border-bottom:2px solid var(--rot)}
.vh-hinweis{margin:0;font-family:var(--schrift-label);font-size:var(--t-15);color:var(--rot-fehler);min-height:1.2em}
.vh-klein{margin:0;font-family:var(--schrift-label);font-size:var(--t-15);line-height:1.5;color:var(--text-2)}

/* --- B: nur die Frage --- */
.vh-b{padding:clamp(80px,12vw,200px) 0}
.vh-b-inner{max-width:none}
.vh-b .register{max-width:none}
.vh-frage{margin:var(--r-12) 0 0;max-width:16ch;font-family:var(--schrift-hl);font-weight:700;font-size:clamp(38px,5.6vw,96px);
  line-height:1;letter-spacing:-.03em;text-transform:uppercase;color:var(--tinte)}
.vh-frage .rot{color:var(--rot)}
.vh-b-form{display:flex;align-items:stretch;gap:0;margin-top:clamp(28px,3.4vw,52px);max-width:640px;
  border-bottom:2px solid var(--tinte)}
.vh-b-form input{flex:1;min-height:64px;border:0;background:transparent;font-family:var(--schrift);
  font-size:clamp(17px,1.6vw,22px);color:var(--tinte)}
.vh-b-form input:focus{outline:none}
.vh-b-form button{flex:none;width:64px;border:0;background:var(--rot);color:var(--weiss);cursor:pointer;
  font-size:26px;line-height:1;transition:background .35s}
.vh-b-form button:hover{background:var(--rot-tief)}
.vh-b-klein{margin:var(--r-16) 0 0;font-family:var(--schrift-label);font-size:var(--t-15);color:var(--text-2);max-width:52ch}

/* --- C: Beweis, dunkelrot --- */
.vh-c{background:var(--rot-nacht);color:var(--weiss)}
.vh-c-grid{display:grid;gap:clamp(28px,3.4vw,64px);align-items:center}
@media(min-width:960px){.vh-c-grid{grid-template-columns:minmax(260px,38%) 1fr}}
.vh-c-zahl{margin:var(--r-16) 0 0;display:flex;flex-direction:column;gap:var(--r-8)}
.vh-c-wert{font-family:var(--schrift-hl);font-weight:700;font-size:clamp(80px,11vw,190px);line-height:.88;
  letter-spacing:-.04em;color:var(--rot-hell);border-bottom:3px dashed rgba(245,50,56,.6);align-self:flex-start;padding-bottom:6px}
.vh-c-label{font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.75)}
.vh-c-titel{margin:0;font-family:var(--schrift-hl);font-weight:700;font-size:clamp(30px,3.8vw,62px);
  line-height:1.08;letter-spacing:-.02em;text-transform:uppercase;color:var(--weiss)}
.vh-c-titel .rot-hell{color:var(--rot-hell)}
.vh-c-text .vh-knopf{margin-top:clamp(20px,2.4vw,36px)}

/* --- D: Ihre Situation, wechselndes Wort --- */
.vh-d{padding:clamp(72px,10vw,170px) 0}
.vh-d-titel{margin:var(--r-12) 0 0;font-family:var(--schrift-hl);font-weight:700;
  font-size:clamp(32px,4.6vw,76px);line-height:1.05;letter-spacing:-.025em;text-transform:uppercase;color:var(--tinte)}
.vh-d-zeile1{display:block}
.vh-d-buehne{display:block;position:relative;height:1.1em}  /* kein overflow noetig, die Maske schneidet (16.09.) */
.vh-d-wort{position:absolute;left:0;top:0;white-space:nowrap;color:var(--rot);
  clip-path:inset(100% 0% 0% 0%);will-change:clip-path}
.vh-d-wort.aktiv{clip-path:inset(0% 0% 0% 0%)}
.vh-d-inner .vh-knopf{margin-top:clamp(24px,2.8vw,40px)}

/* --- Platzhalter fuer den Rest der Seite --- */
.vplatz{background:var(--papier-2);padding:clamp(56px,7vw,120px) 0}
.vplatz-titel{margin:var(--r-8) 0 0;font-family:var(--schrift-hl);font-weight:700;font-size:clamp(26px,3.2vw,52px);
  line-height:1.1;letter-spacing:-.02em;text-transform:uppercase;color:var(--tinte)}
.vplatz-titel .rot{color:var(--rot)}
.vplatz-text{margin:var(--r-16) 0 var(--r-24);font-family:var(--schrift);font-size:var(--t-text);
  line-height:1.4;color:var(--text-2);max-width:60ch}

/* ============================ SEITENUEBERGANG (16.09.) ============================
   Zwei Flaechen fahren beim Klick auf einen internen Link von unten hoch, decken die Seite ab,
   danach wird gewechselt. Auf der neuen Seite fahren sie nach oben wieder heraus.
   Ohne JS passiert nichts, der Link funktioniert dann ganz normal. */
/* Die Flaeche steht ausserhalb des Bildes und wandert beim Wechsel hindurch (16.09.).
   Verschieben statt Skalieren: fluessiger, weil der Browser nur die Position aendert. */
/* Die Flaeche parkt ueber dem Bild -- ueber top, NICHT ueber transform.
   transform bleibt dadurch allein der Animation vorbehalten; sonst addiert sich
   die CSS-Verschiebung zu der von GSAP und der Wisch bleibt auf halber Strecke stehen
   (gemessen und behoben 16.09.). */
.uebergang{position:fixed;left:0;right:0;top:-100vh;height:100vh;z-index:999;background:var(--rot);
  pointer-events:none;display:block;will-change:transform;backface-visibility:hidden}
@media(prefers-reduced-motion:reduce){.uebergang{display:none}}

/* ============================ HERO-VARIANTEN E, F, G (16.09.) ============================
   Scrollgekoppelte Bewegung nach dem Vorbild der Referenz, aber auf die Leitdatei abgestimmt:
   kein entkoppeltes Scrollen, alles ohne Animation vollstaendig lesbar, Bewegungen klein. */

/* --- E: Unterlagen faechern beim Scrollen auf --- */
.vh-e-grid{display:grid;gap:clamp(32px,4vw,72px);align-items:center}
@media(min-width:960px){.vh-e-grid{grid-template-columns:1.05fr .95fr}}
.uf-buehne{position:relative;min-height:clamp(320px,36vw,460px);display:flex;align-items:center;justify-content:center;overflow:visible}
.uf-karte{position:absolute;width:clamp(170px,17vw,240px);aspect-ratio:3/4;background:var(--weiss);
  border:1px solid var(--linie);padding:clamp(14px,1.4vw,22px);display:flex;flex-direction:column;gap:4px;
  box-shadow:0 18px 40px -30px rgba(53,9,10,.5);will-change:transform}
.uf-nr{font-family:var(--schrift-label);font-size:12px;letter-spacing:.16em;color:var(--rot)}
.uf-titel{font-family:var(--schrift-hl);font-weight:700;font-size:clamp(15px,1.2vw,19px);line-height:1.15;
  letter-spacing:-.01em;text-transform:uppercase;color:var(--tinte)}
.uf-quelle{margin-top:auto;font-family:var(--schrift-label);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-2)}
.uf-karte[data-i="2"]{border-color:var(--rot)}
.uf-karte[data-i="2"] .uf-titel{color:var(--rot)}

/* --- F: Ebenen mit unterschiedlichem Tempo --- */
.vh-f{position:relative;overflow:hidden}
.vf-flaeche{position:absolute;right:-8%;top:-20%;width:min(46vw,620px);aspect-ratio:1;background:var(--rot);
  opacity:.1;pointer-events:none;will-change:transform}
.vf-inner{position:relative;z-index:1}
.vf-ebene{will-change:transform}

/* --- G: Stapel laeuft auf den Notartermin zu --- */
.vw-grid{display:grid;gap:clamp(32px,4vw,72px);align-items:center}
@media(min-width:960px){.vw-grid{grid-template-columns:1fr 1fr}}
.vw-buehne{position:relative;min-height:clamp(430px,44vw,560px)}
.vw-karte{position:absolute;left:0;right:clamp(0px,6vw,90px);background:var(--papier-2);border:1px solid var(--linie);
  padding:clamp(12px,1.2vw,18px) clamp(16px,1.6vw,24px);display:flex;align-items:baseline;gap:var(--r-16);
  will-change:transform}
.vw-nr{font-family:var(--schrift-label);font-size:12px;letter-spacing:.16em;color:var(--text-2)}
.vw-titel{font-family:var(--schrift-hl);font-weight:700;font-size:clamp(15px,1.3vw,20px);letter-spacing:-.01em;
  text-transform:uppercase;color:var(--tinte)}
.vw-karte--ziel{background:var(--rot);border-color:var(--rot)}
.vw-karte--ziel .vw-nr{color:rgba(255,255,255,.75)}
.vw-karte--ziel .vw-titel{color:var(--weiss)}

@media(prefers-reduced-motion:reduce){
  .uf-karte,.vw-karte,.vf-ebene,.vf-flaeche{transform:none!important}
}

/* =========================================================================================
   SEKTION 2 · drei Entwuerfe (28.09.)
   Gemeinsame Grundlage; die Bewegung steckt jeweils in verkaufen.js.
   Keine Rundungen, Rot als einzige Buntfarbe, Inter -- wie auf der Startseite.
   ========================================================================================= */
.v2{background:var(--papier);padding:clamp(72px,9vw,150px) 0}
.v2-titel{margin:var(--r-12) 0 0;font-family:var(--schrift-hl);font-weight:700;
  font-size:clamp(30px,3.9vw,62px);line-height:1.04;letter-spacing:-.02em;color:var(--tinte)}
.v2-titel .rot{color:var(--rot)}
.v2-lead{margin:var(--r-24) 0 0;max-width:46ch;font-size:var(--t-text);line-height:1.6;color:var(--text-2)}

/* ---------- C: Portal gegen Wirklichkeit ---------- */
.v2-c-kopf{max-width:62ch}
.v2-c-kopf .v2-titel{font-size:clamp(28px,3.5vw,56px)}
/* Drei Spalten: die beiden Seiten und dazwischen die Differenz. Die Fuge ist 2px Linie. */
.v2-c-paar{display:grid;gap:2px;margin-top:clamp(40px,5vw,80px);background:var(--linie);
  perspective:1200px}
@media(min-width:860px){.v2-c-paar{grid-template-columns:1fr auto 1fr}}
.v2-c-seite{position:relative;padding:clamp(28px,3.4vw,56px);display:grid;gap:var(--r-16);
  align-content:start;
  transition:transform .5s cubic-bezier(.22,.61,.36,1), opacity .35s ease, box-shadow .5s cubic-bezier(.22,.61,.36,1)}
.v2-c-seite--kalt{background:var(--papier-2)}
.v2-c-seite--warm{background:var(--tinte);color:var(--weiss)}
/* Fokus auf die Seite, ueber der die Maus steht: beide dimmen, die aktive kommt zurueck
   und hebt sich an. Kein Zustand in JavaScript noetig. */
@media(hover:hover) and (min-width:860px){
  .v2-c-paar:hover .v2-c-seite{opacity:.5}
  /* Spezifischer als die Dimm-Regel darueber, sonst bleibt die aktive Seite mitgedimmt. */
  .v2-c-paar:hover .v2-c-seite:hover,.v2-c-paar .v2-c-seite:focus-visible{opacity:1;transform:translateY(-10px);
    box-shadow:0 30px 60px -34px rgba(20,19,17,.55);z-index:2}
  .v2-c-seite:focus-visible{outline:2px solid var(--rot);outline-offset:3px}
  /* Die Punkte ruecken nacheinander nach, wenn die Seite aktiv wird */
  .v2-c-punkte li{transition:transform .45s cubic-bezier(.22,.61,.36,1)}
  .v2-c-seite:hover .v2-c-punkte li{transform:translateX(6px)}
  .v2-c-seite:hover .v2-c-punkte li:nth-child(2){transition-delay:.05s}
  .v2-c-seite:hover .v2-c-punkte li:nth-child(3){transition-delay:.1s}
}
.v2-c-label{font-family:var(--schrift-label);font-size:13px;letter-spacing:.2em;text-transform:uppercase}
.v2-c-seite--kalt .v2-c-label{color:var(--text-2)}
.v2-c-seite--warm .v2-c-label{color:var(--rot-hell)}
/* Maske wie beim Textblock der Startseite: die Zahl gleitet von unten herein, statt
   einfach aufzutauchen. Aussen overflow:hidden, innen das bewegte Element (28.09.).
   line-height etwas groesser als 1, sonst schneidet die Maske Unterlaengen ab. */
.v2-c-zahl{display:block;overflow:hidden;font-family:var(--schrift-hl);font-weight:700;
  font-size:clamp(34px,4.6vw,72px);line-height:1.12;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.v2-c-innen{display:block;will-change:transform}
.v2-c-seite--kalt .v2-c-zahl{color:var(--logo-grau)}   /* der schwaechere Wert tritt zurueck */
.v2-c-punkte{list-style:none;margin:var(--r-8) 0 0;padding:0;display:grid;gap:var(--r-12)}
.v2-c-punkte li{position:relative;padding-left:var(--r-24);font-size:var(--t-15);line-height:1.5}
.v2-c-punkte li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;background:var(--rot)}
.v2-c-seite--kalt .v2-c-punkte li{color:var(--text-2)}
.v2-c-seite--kalt .v2-c-punkte li::before{background:var(--linie-stark)}
.v2-c-seite--warm .v2-c-punkte li{color:rgba(255,255,255,.82)}

/* Differenz zwischen den beiden Seiten */
.v2-c-mitte{background:var(--papier);display:grid;place-content:center;gap:.4em;
  padding:clamp(20px,2.4vw,36px) clamp(18px,2vw,32px);text-align:center}
.v2-c-diff-label{font-family:var(--schrift-label);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-2)}
.v2-c-diff{display:block;overflow:hidden;font-family:var(--schrift-hl);font-weight:700;
  font-size:clamp(22px,2.2vw,34px);line-height:1.14;letter-spacing:-.01em;color:var(--rot);
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* Nur der Unterschied zaehlt hoch, nur er braucht die feste Breite: mit tabular-nums ist
   ch die Ziffernbreite, damit steht sie schon fest, bevor der Zaehler den Text auf null
   setzt -- sonst waechst die Zahl beim Zaehlen und schiebt das Layout mit. */
.v2-c-innen--diff{min-width:8.6ch}
.v2-c-innen--diff::before{content:"+ "}
@media(max-width:859px){
  .v2-c-mitte{padding:var(--r-16);display:flex;align-items:baseline;justify-content:center;gap:var(--r-12)}
}

/* Fusszeile (05.10.): Der Pfeillink sass direkt hinter dem Hinweistext und wanderte damit
   mit dessen Laenge. Jetzt traegt der Hinweis die linke Flucht, der Link die rechte --
   dieselbe Kante, an der die Notar-Kachel endet. Die Linie darueber macht die Zeile als
   Fussnote kenntlich, statt sie wie ein drittes Vergleichsfeld wirken zu lassen. */
.v2-c-fuss{margin:clamp(28px,3.4vw,48px) 0 0;padding-top:clamp(18px,2vw,28px);
  border-top:1px solid var(--linie);font-size:var(--t-15);line-height:1.6;color:var(--text-2);
  display:flex;flex-wrap:wrap;gap:var(--r-16) var(--r-32);align-items:center;
  justify-content:space-between}
.v2-c-fuss span{flex:1 1 32ch;max-width:62ch}
.v2-c-fuss .pfeillink{flex:0 0 auto;margin-left:auto}

@media(prefers-reduced-motion:reduce){
  .v2-c-seite{transform:none!important}
}

/* =========================================================================================
   SEKTION 3 · drei Entwuerfe (28.09.)
   ========================================================================================= */
.v3-schalter{position:sticky;top:var(--kopf-hoehe);z-index:54;display:flex;align-items:center;
  gap:var(--r-8);flex-wrap:wrap;padding:var(--r-12) var(--rand);background:var(--papier-2);
  border-block:1px solid var(--linie)}
.v3-schalter__titel{margin-right:auto;font-family:var(--schrift-label);font-size:var(--t-15);
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.v3-schalter button{min-height:40px;padding:0 var(--r-16);border:1px solid var(--linie-stark);
  background:transparent;font-family:var(--schrift-label);font-size:var(--t-15);color:var(--tinte);cursor:pointer}
.v3-schalter button[aria-selected="true"]{background:var(--rot);border-color:var(--rot);color:var(--weiss)}
.v3[hidden]{display:none}
.v3{background:var(--papier);padding:clamp(72px,9vw,150px) 0}
.v3-titel{margin:var(--r-12) 0 0;font-family:var(--schrift-hl);font-weight:700;
  font-size:clamp(30px,3.9vw,62px);line-height:1.04;letter-spacing:-.02em;color:var(--tinte)}
.v3-titel .rot{color:var(--rot)}
.v3-lead{margin:var(--r-24) 0 0;max-width:48ch;font-size:var(--t-text);line-height:1.6;color:var(--text-2)}

/* ---------- A: sieben Sparten mit wechselndem Bild ---------- */
.v3-a-grid{display:grid;gap:clamp(32px,4vw,72px);margin-top:clamp(40px,5vw,80px);align-items:start}
@media(min-width:1000px){.v3-a-grid{grid-template-columns:1.05fr .95fr}}
.v3-a-liste{list-style:none;margin:0;padding:0}
.v3-a-zeile{display:grid;grid-template-columns:auto 1fr;gap:var(--r-8) var(--r-16);width:100%;
  padding:clamp(16px,1.7vw,24px) 0;border:0;border-top:1px solid var(--linie);background:transparent;
  text-align:left;cursor:pointer;color:inherit;
  transition:padding-left .45s cubic-bezier(.22,.61,.36,1), opacity .3s ease}
.v3-a-liste li:last-child .v3-a-zeile{border-bottom:1px solid var(--linie)}
.v3-a-nr{grid-row:1 / span 2;font-family:var(--schrift-label);font-size:var(--t-15);
  letter-spacing:.1em;color:var(--logo-grau);transition:color .3s ease}
.v3-a-name{font-family:var(--schrift-hl);font-weight:700;font-size:clamp(18px,1.6vw,26px);
  letter-spacing:-.01em;color:var(--tinte)}
.v3-a-kurz{font-size:var(--t-15);line-height:1.5;color:var(--text-2)}
@media(hover:hover) and (min-width:1000px){
  .v3-a-liste:hover .v3-a-zeile{opacity:.45}
  .v3-a-zeile[aria-current="true"],.v3-a-liste:hover .v3-a-zeile:hover{opacity:1}
}
.v3-a-zeile[aria-current="true"]{padding-left:var(--r-16)}
.v3-a-zeile[aria-current="true"] .v3-a-nr{color:var(--rot)}
.v3-a-zeile:focus-visible{outline:2px solid var(--rot);outline-offset:2px}
/* Buehne: alle Bilder uebereinander, gewechselt wird die Deckkraft */
.v3-a-buehne{position:relative;aspect-ratio:4/3;overflow:hidden;isolation:isolate;
  background:var(--stein)}
.v3-a-buehne img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.v3-a-buehne img.aktiv{opacity:1}
.v3-a-buehne::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-size:220px 220px;mix-blend-mode:overlay;opacity:.16}
@media(max-width:999px){.v3-a-buehne{order:-1;aspect-ratio:16/10}}

/* ---------- B: Zeitstrahl der Wochen danach ---------- */
.v3-b-grid{display:grid;gap:clamp(40px,5vw,90px);align-items:start}
@media(min-width:1000px){.v3-b-grid{grid-template-columns:.85fr 1.15fr}
  .v3-b-kopf{position:sticky;top:calc(var(--kopf-hoehe) + 90px)}}
.v3-b-kopf .pfeillink{margin-top:clamp(24px,3vw,40px);display:inline-flex}
.v3-b-strahl{list-style:none;margin:0;padding:0 0 0 clamp(28px,3vw,44px);position:relative}
/* Die Linie laeuft hinter den Punkten und fuellt sich beim Scrollen */
.v3-b-strahl::before,.v3-b-strahl::after{content:"";position:absolute;left:5px;top:.7em;bottom:.7em;width:2px}
.v3-b-strahl::before{background:var(--linie)}
.v3-b-strahl::after{background:var(--rot);transform-origin:50% 0;transform:scaleY(var(--fuell,0))}
/* Der Abstand zwischen den Stationen liegt als margin aussen, nicht als padding innen:
   so umschliesst die Hervorhebung unten nur den Text und nicht die halbe Luecke. */
.v3-b-strahl li{position:relative;margin-bottom:clamp(32px,4vw,56px)}
.v3-b-strahl li:last-child{margin-bottom:0}
/* Station im Fokus, nach dem Vorbild von .hor-feld.dran auf der Startseite: farbig
   hinterlegt, leicht angehoben, Phase und Ueberschrift in Rot -- die uebrigen treten
   zurueck. Die Flaeche liegt als ::before darunter und endet links vor der Zeitlinie,
   damit Linie und Punkte frei bleiben. */
.v3-b-strahl li::before{content:"";position:absolute;z-index:0;pointer-events:none;
  left:calc(-1 * clamp(10px,1vw,16px));right:calc(-1 * clamp(14px,1.6vw,24px));
  top:calc(-1 * clamp(12px,1.3vw,18px));bottom:calc(-1 * clamp(12px,1.3vw,18px));
  background:var(--rot-schleier);opacity:0;transition:opacity .45s cubic-bezier(.39,.52,0,1)}
.v3-b-strahl li > *{position:relative;z-index:1}
.v3-b-punkt{z-index:2}
/* Das Zuruecktreten gilt nur, wenn das Skript die Fuehrung uebernommen hat -- ohne JS
   bleibt jede Station voll lesbar. */
.v3-b-strahl li{transition:transform .45s cubic-bezier(.39,.52,0,1),opacity .45s ease}
.v3-b-strahl.gefuehrt li{opacity:.55}
.v3-b-strahl li.dran{opacity:1;transform:translateY(-6px)}
.v3-b-strahl li.dran::before{opacity:1}
.v3-b-strahl li.dran h3{color:var(--rot)}
/* Die letzte Station ist das Ziel und traegt die volle Flaeche, wie Schritt 8 im Ablauf. */
.v3-b-strahl li:last-child.dran::before{background:var(--rot)}
.v3-b-strahl li:last-child.dran .v3-b-phase{color:rgba(255,255,255,.82)}
.v3-b-strahl li:last-child.dran h3{color:var(--weiss)}
.v3-b-strahl li:last-child.dran p{color:rgba(255,255,255,.92)}
@media(prefers-reduced-motion:reduce){
  .v3-b-strahl li{opacity:1;transform:none!important}
}
.v3-b-punkt{position:absolute;left:calc(-1 * clamp(28px,3vw,44px));top:.55em;width:12px;height:12px;
  background:var(--papier);border:2px solid var(--linie-stark);transition:background .3s ease,border-color .3s ease}
.v3-b-punkt--ziel{background:var(--rot);border-color:var(--rot)}
.v3-b-phase{display:block;font-family:var(--schrift-label);font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rot)}
.v3-b-strahl h3{margin:.35em 0 .3em;font-family:var(--schrift-hl);font-weight:700;
  font-size:clamp(19px,1.6vw,26px);letter-spacing:-.01em;color:var(--tinte)}
.v3-b-strahl p{margin:0;max-width:52ch;font-size:var(--t-15);line-height:1.6;color:var(--text-2)}
/* Maskenfenster fuer den Slide von unten (05.10.) -- dieselbe Mechanik wie beim Claim der
   Startseite und bei den Betraegen in Sektion 2. Das Fenster traegt overflow:hidden, das
   innere Element faehrt darin herauf. Die Luft unten bewahrt die Unterlaengen von Inter. */
.v3-b-phase,.v3-b-strahl h3{overflow:hidden;padding-bottom:.06em}
.v3-b-innen{display:block;will-change:transform}
/* Der Punkt sitzt auf der Linie und bekommt beim Erreichen einen Ring nach aussen. */
.v3-b-punkt{transform-origin:50% 50%}
.v3-b-punkt::after{content:"";position:absolute;inset:-4px;border:2px solid var(--rot);
  border-radius:inherit;pointer-events:none;
  opacity:var(--ring-o,0);transform:scale(var(--ring-s,.6))}
@media(prefers-reduced-motion:reduce){
  .v3-b-innen{transform:none!important}
  .v3-b-punkt::after{display:none}
}

/* ---------- C: der Beweis ---------- */
.v3-c-kopf{max-width:60ch}
.v3-c-zahlen{display:grid;gap:2px;margin-top:clamp(40px,5vw,80px);background:var(--linie)}
@media(min-width:760px){.v3-c-zahlen{grid-template-columns:repeat(3,1fr)}}
.v3-c-block{background:var(--papier);padding:clamp(24px,2.8vw,44px);display:grid;gap:var(--r-8)}
.v3-c-wert{display:block;overflow:hidden;font-family:var(--schrift-hl);font-weight:700;
  font-size:clamp(40px,5vw,86px);line-height:1.1;letter-spacing:-.03em;color:var(--rot);
  font-variant-numeric:tabular-nums}
.v3-c-innen{display:block;will-change:transform}
.v3-c-label{font-size:var(--t-15);line-height:1.5;color:var(--text-2);max-width:26ch}
/* Beweisband: laeuft langsam durch, Platzhalterfelder bis die Fotos da sind */
.v3-c-band{margin-top:clamp(40px,5vw,80px);overflow:hidden;background:var(--tinte);
  padding:clamp(20px,2.4vw,36px) 0}
.v3-c-spur{display:flex;width:max-content;gap:var(--r-16);will-change:transform}
.v3-c-feld{flex:0 0 clamp(180px,18vw,260px);aspect-ratio:4/3;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);display:grid;place-content:center}
.v3-c-feld span{font-family:var(--schrift-label);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.45)}
.v3-c-fuss{margin:clamp(24px,3vw,40px) 0 0;font-size:var(--t-15);line-height:1.6;color:var(--text-2);
  display:flex;flex-wrap:wrap;gap:var(--r-12) var(--r-24);align-items:baseline}
.v3-c-fuss span{max-width:56ch}

@media(prefers-reduced-motion:reduce){
  .v3-c-spur,.v3-c-innen{transform:none!important}
  .v3-b-strahl::after{transform:scaleY(1)}
}

/* ======================= SEKTION 5 · Kundenstimmen (05.10.) =======================
   Hell nach der dunklen Pruefsektion. Die Spur beginnt auf der Flucht von Titel und Menue
   und laeuft rechts bis an den Fensterrand, damit man sieht, dass es weitergeht. Gescrollt
   wird nativ (Wischen, Trackpad, Tastatur), die Pfeile springen je eine Karte weiter. */
.vks{background:var(--papier);padding:clamp(90px,11vh,160px) 0 clamp(80px,10vh,140px)}
.vks-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--r-24);flex-wrap:wrap}
.vks-titel{margin:var(--r-12) 0 0;font-family:var(--schrift-hl);font-weight:700;
  font-size:clamp(30px,4vw,64px);line-height:1.08;letter-spacing:-.03em;color:var(--tinte);padding-bottom:.04em}
.vks-titel .rot{color:var(--rot)}
.vks-steuerung{display:flex;align-items:center;gap:var(--r-8)}
/* Ablaufbalken wie im Hero der Startseite: laeuft die Standzeit bis zum naechsten Wechsel ab */
.vks-leiste{width:clamp(110px,13vw,190px);height:2px;background:var(--linie);position:relative;margin-right:var(--r-16)}
.vks-leiste-fuellung{position:absolute;left:0;top:0;height:100%;width:0;background:var(--rot)}
.vks-pfeil{width:56px;height:56px;display:grid;place-items:center;border:1px solid var(--linie-stark);
  background:transparent;color:var(--tinte);cursor:pointer;
  transition:background .35s ease,color .35s ease,border-color .35s ease,opacity .35s ease}
.vks-pfeil:hover,.vks-pfeil:focus-visible{background:var(--rot);border-color:var(--rot);color:var(--weiss)}
.vks-buehne{margin-top:clamp(40px,5vw,72px)}
.vks-spur{--anfang:max(var(--rand), calc((100% - var(--max)) / 2 + var(--rand)));
  list-style:none;margin:0;display:flex;gap:clamp(16px,1.8vw,28px);
  padding:0 var(--anfang) 8px;scroll-padding-inline:var(--anfang);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;overscroll-behavior-x:contain}
.vks-spur::-webkit-scrollbar{display:none}
.vks-spur:focus-visible{outline:2px solid var(--rot);outline-offset:4px}
.vks-karte{flex:0 0 clamp(280px,31vw,470px);scroll-snap-align:start;display:flex;flex-direction:column}
.vks-bild{position:relative;aspect-ratio:4 / 3;overflow:hidden;background:var(--stein)}
.vks-bild img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s cubic-bezier(.39,.52,0,1)}
.vks-karte:hover .vks-bild img{transform:scale(1.04)}
.vks-bild iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
/* Abspielknopf wie in der Kundenstimmen-Vorschau der Startseite: rote Scheibe */
.vks-play{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border:0;
  border-radius:50%;background:var(--rot);color:var(--weiss);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.45);transition:transform .45s cubic-bezier(.39,.52,0,1),background .3s ease}
.vks-play svg{margin-left:3px}
.vks-karte:hover .vks-play,.vks-play:focus-visible{transform:scale(1.08);background:var(--rot-hover)}
.vks-ergebnis{margin-top:var(--r-24);font-family:var(--schrift-label);font-size:var(--t-15);
  letter-spacing:.14em;color:var(--rot)}
.vks-name{margin:var(--r-12) 0 0;font-family:var(--schrift-hl);font-weight:700;
  font-size:clamp(22px,1.9vw,30px);line-height:1.1;letter-spacing:-.02em;color:var(--tinte)}
.vks-ort{margin-top:var(--r-4,4px);font-family:var(--schrift);font-size:var(--t-15);color:var(--text-2)}
.vks-text{margin:var(--r-16) 0 0;font-family:var(--schrift);font-size:var(--t-18);line-height:1.55;
  color:var(--tinte);max-width:40ch}
.vks-fuss{margin-top:clamp(36px,4vw,60px)}
.vks-fuss .pfeillink{color:var(--rot)}
@media(max-width:760px){
  .vks-steuerung{display:none}
  .vks-karte{flex-basis:82vw}
}
@media(prefers-reduced-motion:reduce){
  .vks-spur{scroll-behavior:auto}
  .vks-bild img,.vks-play{transition:none}
}

/* ======================= Hell ueber dunkel (05.10.) =======================
   Statt einer harten Kante zwischen Pruefsektion und Kundenstimmen bleibt die dunkle
   Sektion stehen und die helle gleitet mit weichem Schatten darueber -- dieselbe
   Ueberdeckung wie bei der Buero-Sektion der Startseite. CSS-sticky statt Pin, damit sich
   die Seitenhoehe nicht veraendert. Den Haftpunkt setzt das Skript: Ist die Sektion hoeher
   als das Fenster, haftet sie erst, wenn ihre Unterkante den Fensterrand erreicht. */
.vk-ueberdeck{position:relative}
.vk-ueberdeck > .vpruef{position:sticky;top:var(--haft,0px);z-index:1}
.vk-ueberdeck > .vks{position:relative;z-index:2;
  box-shadow:0 -28px 60px -24px rgba(20,19,17,.45)}

/* Ruhezone nach der Pruefsektion (Feedback 05.10.): rund eine halbe Fensterhoehe, in der
   nichts passiert, bevor die Kundenstimmen kommen. Damit die Luecke nie sichtbar wird,
   fuellt die haftende Sektion mindestens das ganze Fenster. */
.vk-pause{height:55vh;height:55svh}
.vk-ueberdeck > .vpruef{min-height:100vh;min-height:100svh;
  padding-bottom:clamp(110px,14vh,200px)}

/* ======================= SEKTION 6 · Abschluss · Drei Wege (06.10.) =======================
   Gemeinsam: Titel wie die uebrigen Sektionen, dieselben drei Felder wie im Hero mit sichtbaren
   Beschriftungen und 56px hohen Feldern (Leitdatei), die Eigentuemer-Durchwahl als grosser
   Knopf. Kein Kalender. */
.vab{background:var(--papier);padding:clamp(96px,12vh,160px) 0}
.vab-titel{margin:var(--r-12) 0 0;font-family:var(--schrift-hl);font-weight:700;
  font-size:clamp(30px,4vw,64px);line-height:1.08;letter-spacing:-.03em;color:var(--tinte);padding-bottom:.04em}
.vab-titel .rot{color:var(--rot)}
.vab-titel .rot-hell{color:var(--rot-hell)}
.vab-lead{margin:0 0 var(--r-24);font-family:var(--schrift);font-size:var(--t-18);line-height:1.55;color:var(--text-2);max-width:44ch}

/* Formular */
.vab-form{display:flex;flex-direction:column;gap:var(--r-24)}
.vab-form .feld{display:flex;flex-direction:column;gap:var(--r-8)}
.vab-form label{font-family:var(--schrift-label);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-2)}
.vab-form input{min-height:56px;padding:var(--r-8) 0;border:0;border-bottom:1px solid var(--linie-stark);
  background:transparent;font-family:var(--schrift);font-size:var(--t-18);color:var(--tinte)}
.vab-form input:focus{outline:none;border-bottom:2px solid var(--rot)}
.vab-form input:focus-visible{outline:3px solid var(--rot);outline-offset:2px}
.vab-form .knopf-primaer{align-self:flex-start;margin-top:var(--r-8)}
.vab-hinweis{margin:0;font-family:var(--schrift);font-size:var(--t-15);line-height:1.5;color:var(--text-2)}
.vab-form--dunkel label{color:rgba(255,255,255,.72)}
.vab-form--dunkel input{color:var(--weiss);border-bottom-color:rgba(255,255,255,.45)}
.vab-form--dunkel input::placeholder{color:rgba(255,255,255,.5)}
.vab-form--dunkel input:focus{border-bottom-color:var(--rot-hell)}
.vab-form--dunkel .vab-hinweis{color:rgba(255,255,255,.7)}

/* C: drei Wege (06.10., ueberarbeitet)
   Jede Kachel traegt ihr Zeichen im roten Quadrat -- dieselbe Form wie im Menue. Anrufen
   und Buero sind komplett klickbar und sagen das auch: ein Knopf unten in der Kachel. Den
   Platz unter dem Text fuellen Aktion bzw. Foto, damit unten kein Leerraum stehen bleibt.
   Beim Darueberfahren waechst das Quadrat ueber die ganze Kachel wie bei der
   Kaeuferpruefung; die Formular-Kachel bekommt das nicht, die Flaeche laege sonst ueber
   den Eingabefeldern. */
.vab-c-raster{margin-top:clamp(40px,5vw,72px);display:grid;gap:clamp(16px,1.6vw,26px);grid-template-columns:1fr;align-items:stretch}
@media(min-width:1000px){.vab-c-raster{grid-template-columns:1.25fr 1fr 1fr}}
.vab-c-weg{--pad:clamp(26px,2.6vw,40px);position:relative;isolation:isolate;display:flex;flex-direction:column;gap:var(--r-12);
  padding:var(--pad);background:var(--weiss);border:1px solid var(--linie);color:var(--tinte);text-decoration:none;
  transition:color .6s cubic-bezier(.39,.52,0,1),border-color .6s ease}
.vab-c-kopf{display:flex;align-items:center;gap:var(--r-16)}
.vab-c-icon{width:48px;height:48px;flex:none;display:grid;place-items:center;background:var(--rot);color:var(--weiss)}
.vab-c-nr{font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.14em;color:var(--rot);transition:color .6s cubic-bezier(.39,.52,0,1)}
.vab-c-weg h3{margin:var(--r-16) 0 0;font-family:var(--schrift-hl);font-weight:700;font-size:clamp(22px,1.9vw,30px);letter-spacing:-.02em}
.vab-c-text{font-family:var(--schrift);font-size:var(--t-18);line-height:1.5;color:var(--text-2);transition:color .6s cubic-bezier(.39,.52,0,1)}
.vab-c-weg--form .vab-form{margin-top:var(--r-8)}
.vab-c-weg--form:focus-within{border-color:var(--rot)}

/* Klickbare Kacheln: rote Flaeche waechst aus dem Symbol-Quadrat */
.vab-c-weg--link::before{content:"";position:absolute;z-index:-1;background:var(--rot);
  left:var(--pad);top:var(--pad);width:48px;height:48px;
  transition:width .6s cubic-bezier(.39,.52,0,1),height .6s cubic-bezier(.39,.52,0,1),
             left .6s cubic-bezier(.39,.52,0,1),top .6s cubic-bezier(.39,.52,0,1)}
.vab-c-aktion{padding-top:var(--r-16);display:flex;flex-direction:column;gap:var(--r-16)}
/* Kristin fuellt die Anruf-Kachel wie das Buero die dritte -- man sieht, mit wem man spricht */
/* Anrufen ohne Foto: Nummer und Knopf sitzen unten, eine Linie trennt sie vom Text */
.vab-c-weg--tel .vab-c-aktion{margin-top:auto;padding-top:var(--r-24);border-top:1px solid var(--linie,rgba(26,25,23,.14));transition:border-color .6s cubic-bezier(.39,.52,0,1)}
@media(hover:hover){.vab-c-weg--tel:hover .vab-c-aktion{border-color:rgba(255,255,255,.35)}}
.vab-c-gross{font-family:var(--schrift-hl);font-weight:700;font-size:clamp(28px,2.5vw,40px);letter-spacing:-.02em;color:var(--rot);
  transition:color .6s cubic-bezier(.39,.52,0,1)}
.vab-c-knopf{display:inline-flex;align-items:center;justify-content:space-between;gap:var(--r-16);min-height:56px;padding:0 var(--r-24);
  background:var(--rot);color:var(--weiss);font-family:var(--schrift-hl);font-weight:500;font-size:var(--t-18);letter-spacing:.06em;
  transition:background .45s ease,color .45s ease}
.vab-c-knopf svg{transition:transform .45s cubic-bezier(.39,.52,0,1)}
.vab-c-foto{position:relative;flex:1 1 auto;min-height:170px;margin-top:var(--r-8);overflow:hidden;background:var(--stein)}
.vab-c-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 60%;
  transition:transform 1.1s cubic-bezier(.39,.52,0,1)}
.vab-c-weg--buero .vab-c-knopf{margin-top:var(--r-16)}

@media(hover:hover){
  .vab-c-weg--link:hover::before,.vab-c-weg--link:focus-visible::before{left:0;top:0;width:100%;height:100%}
  .vab-c-weg--link:hover,.vab-c-weg--link:focus-visible{color:var(--weiss);border-color:var(--rot)}
  .vab-c-weg--link:hover .vab-c-nr,.vab-c-weg--link:focus-visible .vab-c-nr,
  .vab-c-weg--link:hover .vab-c-gross,.vab-c-weg--link:focus-visible .vab-c-gross{color:var(--weiss)}
  .vab-c-weg--link:hover .vab-c-text,.vab-c-weg--link:focus-visible .vab-c-text{color:rgba(255,255,255,.9)}
  .vab-c-weg--link:hover .vab-c-knopf,.vab-c-weg--link:focus-visible .vab-c-knopf{background:var(--weiss);color:var(--rot)}
  .vab-c-weg--link:hover .vab-c-knopf svg,.vab-c-weg--link:focus-visible .vab-c-knopf svg{transform:translateX(5px)}
  .vab-c-weg--buero:hover .vab-c-knopf svg{transform:translate(3px,-3px)}
  .vab-c-weg--buero:hover .vab-c-foto img{transform:scale(1.05)}
  /* Der Hoerer klingelt kurz an */
  .vab-c-weg--tel:hover .vab-c-icon--tel svg{animation:vab-klingeln .9s cubic-bezier(.36,.07,.19,.97) both}
}
.vab-c-weg--link:focus-visible{outline:3px solid var(--rot);outline-offset:3px}
@keyframes vab-klingeln{
  0%,100%{transform:rotate(0)} 15%{transform:rotate(-16deg)} 30%{transform:rotate(14deg)}
  45%{transform:rotate(-12deg)} 60%{transform:rotate(9deg)} 75%{transform:rotate(-5deg)}}
@media(prefers-reduced-motion:reduce){
  .vab-c-weg,.vab-c-weg--link::before,.vab-c-foto img,.vab-c-knopf,.vab-c-knopf svg{transition:none}
  .vab-c-weg--tel:hover .vab-c-icon--tel svg{animation:none}
}