/* ============================================================
   Badenweiler Ausblick — system.css (v6, 01.08.2026)
   Neue Bau-Schicht der v6-Runde. Tokens kommen aus index.html :root
   (CI-Manual Edition 01/2026). Kein Code zwischen den WOHNUNGEN-Markern.
   ============================================================ */

/* ========================================================================
   v10 (04.08.2026) — Ausblick führt · Collage · Benefits · Investment
   Nikitas Befund zur v9: „die flasht mich nicht, das Bild oben ist billig
   platziert, es hat gar keine Wirkung." Ursache war nicht die Ausführung,
   sondern die Reihenfolge: die Seite führte mit der Fassade und erklärte
   danach in Prosa, was sie ist. Jetzt führt der Ort (Hero), dann sieht man
   in EINEM Block alles (Collage), dann erst wird geredet.
   ======================================================================== */

/* ---------- Hero v10: der Ausblick führt --------------------------------
   Ein Kaufinteressent zieht nicht ein, weil eine Fassade schön ist — er
   zieht wegen des Ortes ein. Das Motiv zeigt beides in einem Bild: Burgruine,
   Kirchturm, der bewaldete Blauen, die Rheinebene am Horizont — und das Haus
   als Anker im Vordergrund. Der Text steht links unten in einer eigenen
   dunklen Bank; darüber bleibt das Bild unangetastet offen. */
.hero.hero-v10{position:relative;min-height:100svh;overflow:hidden;background:var(--tief);
  display:flex;align-items:flex-end;text-align:left}
.hero.hero-v10 .hero-ebene{position:absolute;inset:0}
.hero.hero-v10 .hero-ebene picture{display:block;width:100%;height:100%}
/* 42 % statt Mitte: der Beschnitt sitzt im Bild, aber bei sehr hohen
   Fenstern soll eher der Ort stehen bleiben als der Vorplatz. */
.hero.hero-v10 .hero-foto{width:100%;height:100%;object-fit:cover;display:block;
  object-position:50% 42%}
/* Ganz langsames Heranfahren: 20 s auf 1.05. Kein Effekt zum Anschauen,
   sondern eine Ahnung von Bewegung, damit das Standbild nicht klebt.
   Läuft einmal, nicht in Schleife — eine endlos atmende Seite wirkt unruhig. */
@media (prefers-reduced-motion:no-preference){
  .hero.hero-v10 .hero-foto{animation:heroNah 20s cubic-bezier(.22,.61,.36,1) forwards}
}
/* Scrim: unten eine echte dunkle Bank für den Text, oben eine schmale für
   die Wortmarke im Kopf. Das CI verbietet Schatten/Filter AUF dem Logo —
   die Lesbarkeit liegt darum im Grund DAHINTER. Alpha ist gegen den
   HELLSTEN Bildpunkt bemessen (hier: die weiße Dachfläche), nicht gegen
   den Durchschnitt. */
/* Erste Sichtprüfung v10: der Fuß-Verlauf allein reichte nicht — die Headline
   stand auf den hellen Ziegeldächern und der Kirche und war praktisch weg
   (derselbe Befund wie am 24.07. und 02.08., zum dritten Mal).
   Ursache: ein Verlauf von unten deckt die BILDHÖHE ab, der Text steht aber
   in der linken BILDBREITE. Darum jetzt drei Schichten — eine linke Bank,
   die den Text trägt, ein Fuß und ein schmaler Kopf für die Wortmarke.
   Rechts bleibt das Bild offen: Hügel, Wald und Himmel stehen unangetastet,
   die Seite wirkt dadurch heller als mit einem Flächen-Schleier. */
.hero.hero-v10::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(to right,rgba(19,28,22,.88) 0%,rgba(19,28,22,.78) 22%,rgba(19,28,22,.50) 40%,rgba(19,28,22,.17) 56%,rgba(19,28,22,0) 70%),
             linear-gradient(to top,rgba(19,28,22,.86) 0%,rgba(19,28,22,.60) 16%,rgba(19,28,22,.24) 32%,rgba(19,28,22,0) 48%),
             linear-gradient(to bottom,rgba(19,28,22,.52) 0%,rgba(19,28,22,.30) 8%,rgba(19,28,22,.08) 15%,rgba(19,28,22,0) 23%)}
.hero.hero-v10 .hero-inner{position:relative;z-index:4;width:100%;max-width:none;
  margin:0;padding:0 clamp(24px,4vw,56px) clamp(52px,9vh,84px);text-align:left}
.hero.hero-v10 h1{color:var(--creme);margin:0;max-width:14ch;font-weight:700;
  font-size:clamp(2.5rem,5.2vw,4.6rem);line-height:1.02;letter-spacing:-.005em}
.hero.hero-v10 h1 .it{display:block;font-weight:600;color:var(--stein,#E2D9C9)}
.hero.hero-v10 .sub{color:var(--stein,#E2D9C9);margin:20px 0 32px;max-width:48ch}
.hero.hero-v10 .sub b{color:var(--creme);font-weight:600;white-space:nowrap}
.hero.hero-v10 .hero-cta{justify-content:flex-start}
.hero.hero-v10 .btn-primary{background:var(--messing);border-color:var(--messing);color:var(--tief)}
.hero.hero-v10 .btn-primary:hover{background:var(--messing-tief);border-color:var(--messing-tief)}
.hero.hero-v10 .btn-line{background:transparent;color:var(--creme);border-color:rgba(244,239,230,.5)}
.hero.hero-v10 .btn-line:hover{border-color:var(--creme);background:rgba(244,239,230,.08)}
/* Der Hochformat-Zuschnitt zeigt unten die helle Klinkerfassade und den
   hellen Vorplatz — creme Schrift stand dort praktisch auf ihrer eigenen
   Farbe (derselbe Befund wie am 24.07. und 02.08.). Die untere Bank muss
   hier deutlich dichter sein als im Querformat. */
@media(max-width:760px){
  /* Auf 390 px gibt es keine linke Bildhälfte, in die man den Text stellen
     könnte — hier deckt wieder der Fuß, und zwar dichter als im Querformat:
     der Hochformat-Zuschnitt zeigt unten den hellen Vorplatz. */
  .hero.hero-v10::after{
    background:linear-gradient(to top,rgba(20,29,23,.96) 0%,rgba(20,29,23,.93) 26%,rgba(20,29,23,.74) 46%,rgba(20,29,23,.36) 64%,rgba(20,29,23,.06) 80%,rgba(20,29,23,0) 92%),
               linear-gradient(to bottom,rgba(20,29,23,.78) 0%,rgba(20,29,23,.5) 10%,rgba(20,29,23,.14) 19%,rgba(20,29,23,0) 28%)}
  /* Kein Heranfahren auf dem Handy: frisst Akku, kaum wahrnehmbar. */
  .hero.hero-v10 .hero-foto{animation:none}
}
@media(max-width:640px){
  .hero.hero-v10 h1{font-size:clamp(2rem,8.8vw,2.7rem)}
  .hero.hero-v10 .sub{font-size:14.5px;max-width:none}
  .hero.hero-v10 .sub b{display:block;margin-top:4px}
  .hero.hero-v10 .sub .sep{display:none}
  .hero.hero-v10 .hero-cta{flex-direction:column;width:100%}
  .hero.hero-v10 .hero-cta .btn{width:100%;justify-content:center}
}

/* ---------- COLLAGE: alles auf einen Blick ------------------------------
   Nikitas Vorgabe: „eine Collage mit verschiedenen Bildern — mal hochkant,
   mal quadratisch, mal breit, dazwischen immer wieder ein Video, damit das
   Ganze lebendig wirkt."
   Umgesetzt als Mehrspalten-Satz (CSS columns) statt als Raster mit festen
   Kacheln: so behält JEDES Bild sein eigenes Seitenverhältnis, nichts wird
   zurechtgeschnitten, und die Wand bekommt von selbst den unregelmäßigen
   Rhythmus, der eine Collage von einer Bildergalerie unterscheidet. */
.collage{background:var(--creme);padding:clamp(72px,10vw,132px) 0}
.collage .head{max-width:760px;margin:0 0 clamp(40px,5.5vw,64px)}
.collage .head h2{color:var(--tanne);font-size:clamp(2rem,4.4vw,3.4rem);font-weight:500;
  line-height:1.08;max-width:19ch}
.collage .head h2 .it{font-style:italic;color:var(--messing)}
.collage .head p{color:var(--soft);font-size:clamp(16px,1.5vw,18px);line-height:1.75;
  margin:22px 0 0;max-width:52ch}
.col-wand{columns:3;column-gap:clamp(12px,1.5vw,20px)}
.col-wand figure{break-inside:avoid;margin:0 0 clamp(12px,1.5vw,20px);
  /* break-inside allein reicht Safari nicht — inline-block hält die Kachel
     zuverlässig zusammen, sonst reißt ein Bild zwischen zwei Spalten. */
  display:inline-block;width:100%}
.col-wand .rahmen{position:relative;overflow:hidden;border-radius:3px;background:var(--stein);
  display:block}
.col-wand img,.col-wand video{display:block;width:100%;height:auto}
.col-wand .rahmen img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.col-wand figure:hover .rahmen img{transform:scale(1.035)}
/* Bildunterschrift wie im Tafelverzeichnis eines Bildbands: immer sichtbar,
   sehr leise. Hover-Beschriftungen sind auf dem Handy unsichtbar — und die
   Zielgruppe 50+ will wissen, was sie gerade ansieht. */
/* Gemischter Satz statt Versalien: fünfzehn gesperrte Versalzeilen ergaben
   ein durchgehendes graues Rauschen durch die ganze Wand, und das System
   behält Versalien den Daten-Labels vor (design-critic 04.08.). */
.col-wand figcaption{font-family:var(--sans);font-size:13px;font-weight:500;
  letter-spacing:.01em;color:var(--soft);margin-top:9px;line-height:1.5}
/* Video-Kachel: stumm, geloopt, ohne Bedienelemente — Atmosphäre, kein Film,
   den jemand „abspielt". Ein Messing-Punkt sagt, dass es sich bewegt. */
.col-wand .ist-video .rahmen::after{content:"";position:absolute;right:13px;top:13px;
  width:7px;height:7px;border-radius:50%;background:var(--messing);
  box-shadow:0 0 0 5px rgba(159,134,84,.22)}
@media (prefers-reduced-motion:no-preference){
  .col-wand .ist-video .rahmen::after{animation:kachelPuls 2.6s ease-in-out infinite}
}
@keyframes kachelPuls{0%,100%{opacity:.45}50%{opacity:1}}
@media(max-width:1000px){.col-wand{columns:2}}
@media(max-width:520px){
  /* Eine Spalte wäre ein 15 Kacheln langer Turm — zwei halten die Sektion
     überschaubar und erhalten den Collage-Charakter. */
  .col-wand{columns:2;column-gap:9px}
  .col-wand figure{margin-bottom:9px}
  /* 11 px ist die Untergrenze des Systems — darunter ist die Zeile für die
     Zielgruppe 50+ nicht mehr lesbar. */
  .col-wand figcaption{font-size:11px;margin-top:6px}
}

/* ---------- BENEFITS: was vor der Tür liegt ----------------------------- */
.benefit{background:var(--tanne);color:var(--creme);padding:clamp(76px,10vw,140px) 0}
.benefit .head{max-width:820px;margin:0 auto clamp(48px,6vw,76px);text-align:center}
.benefit .head h2{color:var(--creme-hell);font-size:clamp(2rem,4.4vw,3.4rem);font-weight:600;
  line-height:1.08;max-width:20ch;margin:0 auto}
.benefit .head h2 .it{font-style:italic;color:var(--stein)}
.benefit .head p{color:rgba(244,239,230,.78);margin:22px auto 0;max-width:50ch;
  font-size:clamp(15.5px,1.4vw,17px);line-height:1.75}
.ben-grid{display:grid;grid-template-columns:1fr;gap:0;
  border-top:1px solid rgba(226,217,201,.20)}
@media(min-width:700px){.ben-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1060px){.ben-grid{grid-template-columns:1fr 1fr 1fr}}
.ben{padding:clamp(26px,3vw,38px) 0 clamp(28px,3.4vw,40px);
  border-bottom:1px solid rgba(226,217,201,.20)}
@media(min-width:700px){
  .ben:nth-child(odd){padding-right:clamp(24px,3vw,44px)}
  .ben:nth-child(even){padding-left:clamp(24px,3vw,44px);border-left:1px solid rgba(226,217,201,.20)}
}
@media(min-width:1060px){
  /* Bei drei Spalten stimmt die odd/even-Logik nicht mehr — die Trennlinie
     gehört an jede Kachel außer der ersten je Reihe. */
  .ben{padding-left:clamp(24px,2.4vw,40px);padding-right:clamp(24px,2.4vw,40px);
    border-left:1px solid rgba(226,217,201,.20)}
  .ben:nth-child(3n+1){border-left:0;padding-left:0}
  .ben:nth-child(3n){padding-right:0}
}
.ben .wert{font-family:var(--serif);font-weight:500;color:var(--messing-hell,#C0A469);
  font-size:clamp(1.45rem,2.4vw,1.9rem);line-height:1.1;margin:0 0 4px;
  font-feature-settings:"lnum" 1,"tnum" 1;font-variant-numeric:lining-nums}
.ben h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.25rem,2vw,1.5rem);
  color:var(--creme-hell);margin:0 0 12px;line-height:1.2}
.ben p{margin:0;font-family:var(--sans);font-size:14.5px;line-height:1.75;
  color:rgba(244,239,230,.72);max-width:36ch}
/* Karte unter den Vorteilen: sie belegt, was die Zeilen behaupten. */
.ben-karte{display:grid;gap:clamp(26px,4vw,44px);
  margin-top:clamp(52px,7vw,86px);grid-template-columns:1fr}
/* Bewusst NICHT zweispaltig: die gezeichnete Karte braucht die volle Breite,
   sonst schrumpft ihre Beschriftung unter die Lesbarkeitsgrenze (in der
   schmalen Spalte waren es 11 px). Text darueber, Karte darunter. */
.ben-karte > div:first-child{max-width:62ch}
/* ---------- Gezeichnete Ortskarte (05.08.) ----------------------------
   Ersetzt den Google-Maps-Screenshot. Alles hier ist Linie und Schraffur,
   eine Tinte, keine Graufläche — dasselbe Vokabular wie der Kupferstich im
   Hero (marke/zeichenstil/ZEICHENSTIL.md). Erzeugt: tools/karte-bauen.mjs. */
.ben-karte .bk-karte{position:relative}
.ben-karte .ka-karte{display:block;width:100%;height:auto}
/* Die Tinte: cremeweiß auf dem Tannengrün der Sektion. Flächen bekommen nur
   Schraffur, nie Füllung — sonst kippt die Karte in Infografik. */
.ka-schraffur{stroke:rgba(244,239,230,.30);stroke-width:.9}
.ka-schraffur--leicht{stroke:rgba(244,239,230,.20);stroke-width:.8}
.ka-punkt{fill:rgba(244,239,230,.26)}
.ka-flaeche{stroke:rgba(244,239,230,.22);stroke-width:.9;fill-rule:evenodd}
/* Drei Stärken, wie in einem Stadtplanstich: Hauptachse, Wohnstraße, Fußweg.
   Ohne diese Staffelung liest sich das Blatt als Kabelsalat. */
.ka-pfad{fill:none;stroke:rgba(244,239,230,.16);stroke-width:.7;stroke-dasharray:2.5 3}
.ka-weg{fill:none;stroke:rgba(244,239,230,.40);stroke-width:1.1}
/* Häuserzeilen: nur Kontur. Eine Füllung würde mit den Zielpunkten um
   Aufmerksamkeit streiten — sie sollen den Ort andeuten, nicht ihn erklären. */
.ka-haeuser{fill:rgba(244,239,230,.06);stroke:rgba(244,239,230,.26);stroke-width:.65;stroke-linejoin:round}
.ka-strasse{fill:none;stroke:rgba(244,239,230,.62);stroke-width:1.7}
/* Der Fußweg zur Therme: gestrichelt, weil er eine Entfernung zeigt und
   keinen Straßenverlauf behauptet. */
.ka-fussweg{fill:none;stroke:var(--messing-hell);stroke-width:1.4;stroke-dasharray:5 5;opacity:.9}
.ka-ziel-punkt{fill:none;stroke:var(--creme);stroke-width:1.5}
.ka-ziel-name{font-family:var(--sans);font-size:16px;font-weight:600;fill:var(--creme-hell);
  letter-spacing:.01em;paint-order:stroke;stroke:var(--tanne);stroke-width:3.5;stroke-linejoin:round}
.ka-ziel-zeit{font-family:var(--sans);font-size:13.5px;font-weight:500;fill:var(--messing-hell);
  letter-spacing:.04em;paint-order:stroke;stroke:var(--tanne);stroke-width:3.5;stroke-linejoin:round}
/* Das Haus ist der einzige Messing-Punkt der Karte — der eine Lichtpunkt. */
.ka-haus-ring{fill:none;stroke:var(--messing-hell);stroke-width:1.2;opacity:.65}
.ka-haus-punkt{fill:var(--messing-hell);stroke:var(--tanne);stroke-width:2}
.ka-haus-name{font-family:var(--serif);font-weight:700;font-size:23px;fill:var(--creme-hell);
  paint-order:stroke;stroke:var(--tanne);stroke-width:4.5;stroke-linejoin:round}
.ka-haus-sub{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;fill:var(--messing-hell);
  paint-order:stroke;stroke:var(--tanne);stroke-width:4;stroke-linejoin:round}
.ben-karte .bk-maps{display:inline-flex;gap:8px;align-items:center;margin-top:18px;
  background:rgba(244,239,230,.08);border:1px solid rgba(244,239,230,.30);
  color:var(--creme);font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.03em;
  padding:11px 18px;border-radius:2px;transition:.25s;text-decoration:none}
.ben-karte .bk-maps:hover{background:rgba(244,239,230,.16);border-color:var(--creme)}
.ben-karte .bk-quelle{margin-top:12px;font-size:11.5px;color:rgba(244,239,230,.42);letter-spacing:.02em}
@media(max-width:760px){
  /* Auf dem Handy trägt die Karte die Beschriftung nur, wenn sie größer steht
     als der Bildschirm — sonst kleben die Namen aufeinander. */
  .ben-karte .bk-karte{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ben-karte .ka-karte{min-width:660px}
  .ka-ziel-name{font-size:15px}
}
.ben-karte h3{font-family:var(--serif);font-weight:600;color:var(--creme-hell);
  font-size:clamp(1.5rem,2.6vw,2.1rem);margin:0 0 16px;line-height:1.15}
.ben-karte p{margin:0;color:rgba(244,239,230,.76);font-size:15.5px;line-height:1.75;max-width:44ch}
.ben-karte .adresse{font-family:var(--sans);font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--messing-hell,#C0A469);margin:0 0 14px}

/* ---------- INVESTMENT: Sachwert mit nachprüfbaren Zahlen ---------------
   Bewusst OHNE Rendite-, Miet- oder Steuerversprechen: in den Unterlagen
   stehen 33 Preise und 33 Flächen, sonst nichts. Genau die zeigt die
   Sektion — und sagt beim Steuerthema ehrlich, dass es ins Gespräch mit
   Steuerberater gehört. Ein Zahlenversprechen, das später nicht hält,
   kostet den Verkauf, nicht nur die Sympathie. */
.invest{background:var(--creme-warm);color:var(--tief);padding:clamp(76px,10vw,140px) 0}
.invest .head{max-width:780px;margin:0 0 clamp(44px,5.5vw,68px)}
.invest .head h2{color:var(--tanne);font-size:clamp(2rem,4.4vw,3.4rem);font-weight:500;
  line-height:1.08;max-width:18ch}
.invest .head h2 .it{font-style:italic;color:var(--messing)}
.invest .head p{color:var(--soft);font-size:clamp(16px,1.5vw,18px);line-height:1.78;
  margin:24px 0 0;max-width:54ch}
.inv-zahlen{display:grid;grid-template-columns:1fr;gap:0;
  margin:clamp(40px,5vw,60px) 0 clamp(34px,4vw,48px);border-top:1px solid var(--line)}
@media(min-width:720px){.inv-zahlen{grid-template-columns:repeat(3,1fr)}}
.inv-z{padding:clamp(22px,2.6vw,30px) 0;border-bottom:1px solid var(--line)}
@media(min-width:720px){
  .inv-z+.inv-z{border-left:1px solid var(--line);padding-left:clamp(24px,3vw,44px)}
  .inv-z:not(:last-child){padding-right:clamp(24px,3vw,44px)}
}
.inv-z .n{font-family:var(--serif);font-weight:500;color:var(--tanne);
  font-size:clamp(2rem,3.6vw,2.9rem);line-height:1;
  font-feature-settings:"lnum" 1,"tnum" 1;font-variant-numeric:lining-nums;letter-spacing:.005em}
/* Labels beschriften, sie handeln nicht — Messing bleibt CTA, Preis und
   Horizontlinie vorbehalten (design-critic 04.08.: „der eine Punkt war
   dekorativ verteilt"). Die Zahl darüber trägt bereits genug. */
.inv-z .l{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--soft);margin-top:13px}
.inv-z .d{font-family:var(--sans);font-size:13.5px;color:var(--soft);margin-top:8px;
  line-height:1.6;max-width:34ch}
/* Streubild: technische Zeichnung, kein Marketing-Diagramm. Dünne Linien,
   ein Akzent, sonst Grau — dasselbe Vokabular wie der Gebäudeschnitt. */
.inv-bild{background:#FCFAF5;border:1px solid var(--line);border-radius:3px;
  padding:clamp(20px,3vw,34px) clamp(16px,3vw,34px) clamp(14px,2vw,22px)}
.inv-bild .preisbild{display:block;width:100%;height:auto}
.inv-bild .bu{font-family:var(--sans);font-size:12.5px;color:var(--soft);line-height:1.65;
  margin:clamp(14px,2vw,20px) 0 0;max-width:74ch}
/* Die Zeichnung steht jetzt INLINE im HTML (tools/investment-grafik.mjs
   schreibt sie zwischen die PREISBILD-Marker) — damit erbt sie die selbst
   gehostete Manrope und die Token aus :root. Als <img src="…svg"> geladen tat
   sie das nicht: die Beschriftung lief in Arial und die Farben mussten
   doppelt gepflegt werden (design-critic 04.08.). Alle Werte hier sind Token,
   kein neuer Grauton. */
.preisbild{display:block;width:100%;height:auto}
.preisbild .pb-achslinie,.preisbild .pb-tick{stroke:var(--stein-tief);stroke-width:1}
.preisbild .pb-achse{font-family:var(--sans);font-size:12px;fill:var(--soft);
  font-feature-settings:"lnum" 1,"tnum" 1}
.preisbild .pb-hilf{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
.preisbild .pb-hilf-t{font-family:var(--sans);font-size:11px;fill:var(--soft);
  opacity:.72;letter-spacing:.04em}
/* Ringe, keine Farbfelder: 33 gefüllte Messing-Scheiben haben den EINEN
   Akzent über die halbe Fläche verteilt und aus der Zeichnung ein
   Marketing-Diagramm gemacht. Als Kontur bleibt es Linienzeichnung —
   dasselbe Vokabular wie der Gebäudeschnitt. */
.preisbild .pb-punkt{fill:none;stroke:var(--messing);stroke-width:1.6}
/* Die sechs großen Einheiten (ab 60 m²) in Tanne: sie sind der Teil des
   Bestands, den ein Anleger als Erstes sucht. */
.preisbild .pb-punkt--gross{stroke:var(--tanne);stroke-width:1.8}
.inv-schluss{margin:clamp(34px,4.5vw,52px) 0 0;padding-top:clamp(26px,3vw,36px);
  border-top:1px solid var(--line);display:grid;gap:clamp(24px,3vw,48px);grid-template-columns:1fr}
@media(min-width:860px){.inv-schluss{grid-template-columns:1.1fr .9fr;align-items:start}}
.inv-schluss h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2.2vw,1.7rem);
  color:var(--tanne);margin:0 0 12px}
.inv-schluss p{margin:0;font-family:var(--sans);font-size:14.5px;line-height:1.75;color:var(--soft)}
.inv-schluss p+p{margin-top:14px}
.inv-schluss .btn{margin-top:22px}

/* ---------- Hero v9: das Haus führt (02.08.) ----------------------------
   Bis v8 stand hier ein gedeckter Esstisch. Ein Kaufinteressent muss in den
   ersten drei Sekunden sehen, WAS verkauft wird — bei einer Immobilie ist
   das die Immobilie. Motiv jetzt: die gegradete Frontalansicht mit beiden
   Türmchen, auf dem Handy ein eigener Hochformat-Zuschnitt.
   Der frühere Zwei-Akte-Scrollwischer bleibt gestrichen (Nikita 01.08.:
   „sieht billig aus"), und Scroll-Hijacking verbietet motion.md ohnehin. */

.hero.hero-v9{position:relative;min-height:100svh;overflow:hidden;background:var(--tief);
  display:flex;align-items:flex-end;text-align:left}
.hero.hero-v9 .hero-ebene{position:absolute;inset:0}
.hero.hero-v9 .hero-ebene picture{display:block;width:100%;height:100%}
/* Bildmitte statt Bildkante: der Beschnitt sitzt bereits im Bild
   (tools/bilder-bauen.mjs), CSS soll nichts mehr nachschneiden. */
.hero.hero-v9 .hero-foto{width:100%;height:100%;object-fit:cover;display:block;
  object-position:50% 46%}
/* Ganz langsames Heranfahren: 18 s auf 1.05. Kein Effekt zum Anschauen,
   sondern eine Ahnung von Bewegung, damit das Standbild nicht klebt.
   Läuft einmal, nicht in Schleife — eine endlos atmende Seite wirkt unruhig. */
@media (prefers-reduced-motion:no-preference){
  .hero.hero-v9 .hero-foto{animation:heroNah 18s cubic-bezier(.22,.61,.36,1) forwards}
}
@keyframes heroNah{from{transform:scale(1)}to{transform:scale(1.05)}}
/* Scrim: das Motiv ist oben hell (Himmel) und unten hell (Putzsockel).
   Der Text braucht unten eine echte dunkle Bank, die Wortmarke oben eine
   eigene — Alpha gegen den HELLSTEN Bildpunkt bemessen, nicht den Schnitt.
   Das CI verbietet Schatten/Filter AUF dem Logo, darum liegt die
   Lesbarkeit hier im Grund DAHINTER. */
.hero.hero-v9::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(to top,rgba(24,32,26,.90) 0%,rgba(24,32,26,.78) 20%,rgba(24,32,26,.46) 40%,rgba(24,32,26,.14) 58%,rgba(24,32,26,0) 72%),
             linear-gradient(to bottom,rgba(24,32,26,.72) 0%,rgba(24,32,26,.48) 9%,rgba(24,32,26,.16) 17%,rgba(24,32,26,0) 26%)}
/* Über dem Hero (Header noch nicht solid) müssen die Nav-Links hell sein. */
.site-head:not(.solid) a.navlink{color:var(--creme);opacity:.92}
.hero.hero-v9 .hero-inner{position:relative;z-index:4;width:100%;max-width:none;
  margin:0;padding:0 clamp(24px,4vw,56px) clamp(48px,8vh,72px);text-align:left}
/* Ortsmarke über der Headline: ein leiser Anker, bevor die Wucht kommt. */
/* v9-Sichtprüfung: in Messing stand die Zeile auf der altrosa Fassade und
   war praktisch weg. Creme trägt, die Linie davor bleibt Messing — der
   Akzent sitzt damit im Strich, nicht in der Schrift. */
.hero-ort{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--creme);margin:0 0 16px;
  display:flex;align-items:center;gap:14px;text-shadow:0 1px 14px rgba(20,26,22,.55)}
.hero-ort::before{content:"";width:clamp(26px,4vw,54px);height:1px;background:var(--messing);flex:none}
/* Gewicht 700: Bodoni ist eine Didone — bei 500 sind die Haarlinien auf Foto
   praktisch weg (Nikita 01.08.: „Schrift geht unter auf den Bildern"). */
.hero.hero-v9 h1{color:var(--creme);margin:0;max-width:15ch;font-weight:700;
  font-size:clamp(2.5rem,5vw,4.4rem);line-height:1.02;letter-spacing:-.005em}
.hero.hero-v9 h1 .it{display:block;font-weight:600;color:var(--stein,#E2D9C9)}
.hero.hero-v9 .sub{color:var(--stein,#E2D9C9);margin:20px 0 32px;max-width:46ch}
.hero.hero-v9 .sub b{color:var(--creme);font-weight:600;white-space:nowrap}
.hero.hero-v9 .hero-cta{justify-content:flex-start}
.hero.hero-v9 .btn-primary{background:var(--messing);border-color:var(--messing);color:var(--tief)}
.hero.hero-v9 .btn-primary:hover{background:var(--messing-tief);border-color:var(--messing-tief)}
.hero.hero-v9 .btn-line{background:transparent;color:var(--creme);border-color:rgba(244,239,230,.5)}
.hero.hero-v9 .btn-line:hover{border-color:var(--creme);background:rgba(244,239,230,.08)}

/* ---------- Ankommen: Portal + Treppenhaus-Schleife (v9) ----------------
   Zweistufig: der Portalbogen steht als ruhiges Band über der ganzen
   Breite, darunter Text und stehende Videoschleife nebeneinander.
   (Erster Aufbau stellte alle drei nebeneinander — dafür ist der Bogen zu
   breit geworden, seit er eng auf die Gravur geschnitten ist.) */
.ankommen{background:var(--creme);padding:clamp(64px,9vw,112px) 0}
.ank-portal{margin:0 0 clamp(34px,5vw,60px)}
.ank-portal picture{display:block}
.ank-portal img{display:block;width:100%;height:auto;border-radius:3px;background:var(--stein)}
.ankommen .ank-unten{display:grid;grid-template-columns:1.62fr .58fr;
  gap:clamp(28px,4vw,64px);align-items:center}
.ank-text h2{font-size:clamp(1.75rem,3.1vw,2.7rem);color:var(--tanne);margin:0 0 20px;
  font-weight:500;line-height:1.14;max-width:17ch}
.ank-text h2 .it{font-style:italic;color:var(--messing)}
.ank-text p{color:var(--mokka);font-size:clamp(15.5px,1.35vw,17px);line-height:1.75;margin:0;max-width:46ch}
.ank-video{margin:0}
/* Gedeckelt: bei voller 9:16-Höhe lief die Schleife dem Text um zwei
   Drittel davon und wurde zum Hauptdarsteller der Sektion — sie ist aber
   der Nebensatz zum Portal darüber. */
.ank-video video{display:block;width:100%;aspect-ratio:9/16;max-height:520px;
  object-fit:cover;border-radius:3px;background:var(--stein);margin:0 auto}
.ank-video figcaption{font-family:var(--sans);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--soft);margin-top:12px;text-align:center}
@media(max-width:720px){
  /* Auf dem Handy untereinander. Die Schleife wird flacher gesetzt — ein
     9:16-Clip in voller Breite fuellt sonst den ganzen Schirm und der
     Besucher verliert den Faden. */
  .ankommen .ank-unten{grid-template-columns:1fr;gap:32px}
  .ank-video video{aspect-ratio:3/4;max-height:70vh;margin:0 auto}
  /* Bewusst OHNE feste Höhe und ohne object-fit: jeder seitliche Beschnitt
     kappt das K von AUSBLICK (durchprobiert). Die Wortmarke geht vor
     Bildhöhe — das Band läuft flach, aber vollständig über die Breite. */
  .ank-portal{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw}
  .ank-portal img{border-radius:0}
}

/* Hero auf schmalen Schirmen: der Hochformat-Zuschnitt zeigt unten die
   helle Klinkerfassade statt dunklem Grund — die creme Headline stand
   praktisch auf ihrer eigenen Farbe. Die untere Bank muss hier deutlich
   dichter sein als im Querformat (v9-Sichtprüfung, derselbe Befund wie
   schon am 24.07.: „Schrift geht unter"). */
@media(max-width:760px){
  .hero.hero-v9::after{
    background:linear-gradient(to top,rgba(22,30,24,.96) 0%,rgba(22,30,24,.92) 26%,rgba(22,30,24,.72) 46%,rgba(22,30,24,.34) 64%,rgba(22,30,24,.06) 80%,rgba(22,30,24,0) 92%),
               linear-gradient(to bottom,rgba(22,30,24,.78) 0%,rgba(22,30,24,.5) 10%,rgba(22,30,24,.14) 19%,rgba(22,30,24,0) 28%)}
  /* Kein Heranfahren auf dem Handy: die Bewegung frisst Akku und ist auf
     der kleinen Fläche kaum wahrnehmbar. */
  .hero.hero-v9 .hero-foto{animation:none}
}

/* Bild in der Haus-Sektion: trägt die Aussage „schmiedeeiserne Geländer",
   die vorher nur im Fließtext stand. */
.haus-bild{margin:0 0 clamp(22px,3vw,34px)}
.haus-bild img{display:block;width:100%;height:auto;border-radius:3px}
.haus-bild figcaption{font-family:var(--sans);font-size:11.5px;letter-spacing:.08em;
  color:var(--soft);margin-top:10px}

/* ---------- KI-Kennzeichnung als Flächen-Label (über allen Scrims) ---------- */
.figure-full .bild-ki{position:absolute;left:18px;bottom:16px;z-index:3;
  background:rgba(28,30,27,.72);color:var(--creme);font-family:var(--sans);
  font-size:12px;font-weight:500;letter-spacing:.3px;padding:7px 11px;pointer-events:none}
/* 02.08.: Auf schmalen Schirmen laeuft die Bildunterschrift bis an die
   Unterkante — das Label lag dann quer ueber der letzten Textzeile
   („in wenigen Gehminuten"). Der Text bekommt den Platz des Labels frei. */
@media(max-width:760px){
  .figure-full .figure-cap{padding-bottom:58px}
}

/* ---------- Musterstück AP25 ----------
   Die Sektion ist mit dem v8-Schnitt (02.08.) entfallen — Foto, Grundriss,
   Fläche und Preis von AP25 standen bereits im Wohnungsverzeichnis und im
   Zustands-Paar der Residenzen. Rund 50 Zeilen Regler-CSS mit raus. */

/* ---------- Wellness/Lage-Sektion auf Tannengrün (Farb-Sprung) ---------- */
section.lage.pad{background:var(--tanne)}
.lage .lead{color:var(--creme-hell,#F4EFE6)}
/* Messing bleibt Horizontlinie/CTA/Preis — Headline-Italic läuft in Stein
   (finish-review Fix 4) */
.lage .lead .it{color:var(--stein,#E2D9C9)}
.lage .body-lg{color:rgba(244,239,230,.85)}
.lage .nearby li{border-color:rgba(226,217,201,.22)}
.lage .nearby .place{color:var(--creme)}
.lage .nearby .dist{color:rgba(226,217,201,.75)}
.lage .lage-cap{color:rgba(226,217,201,.75)}
/* 01.08.: border-top raus — die Liste darueber schliesst schon mit einer
   Linie ab, es standen zwei Striche mit Luft dazwischen untereinander. */
.lage-schluss{margin-top:28px;color:rgba(226,217,201,.85);font-size:15.5px;line-height:1.65;
  max-width:52ch}

/* ---------- Wohnungsverzeichnis: Gebäudeschnitt (Generator-Zone) ---------- */
/* Die Bühne ist die große Tannengrün-Fläche der Sektion (Committed-Farbe). */
.wv-schnitt-buehne{background:var(--tanne);width:100vw;margin-left:calc(50% - 50vw);
  padding:clamp(40px,6vw,72px) clamp(20px,4vw,64px) clamp(44px,6vw,76px);
  margin-bottom:clamp(44px,6vw,72px)}
.wv-schnitt-buehne .wv-schnitt{max-width:1120px;display:block;margin:0 auto;height:auto}
/* Comp-2-Topologie ab Desktop: linke Editorial-Schiene (Regler + Legende)
   neben dem Schnitt (finish-review Fix 3) */
@media(min-width:1100px){
  .wv-schnitt-buehne{display:grid;grid-template-columns:340px minmax(0,1fr);
    gap:16px clamp(32px,4vw,64px);align-items:center;
    max-width:1400px;padding-left:clamp(32px,5vw,80px);padding-right:clamp(32px,5vw,80px)}
  .wv-preisregler{grid-column:1;margin:0;text-align:left}
  .wv-preisregler .wvp-zeile{justify-content:space-between}
  .wv-legende{grid-column:1;flex-direction:column;align-items:flex-start;
    gap:13px;margin:26px 0 0;max-width:none}
  .wv-schnitt-scroll{grid-column:2;grid-row:1 / span 2}
}
/* Preisregler (JS baut Inhalt) */
.wv-preisregler{max-width:520px;margin:0 auto 34px;text-align:center}
.wv-preisregler .wvp-wert{font-family:var(--serif);font-weight:500;font-size:clamp(20px,2.2vw,26px);
  color:var(--messing-hell,#C2A57B);margin:0 0 10px}
.wv-preisregler input[type=range]{width:100%;appearance:none;height:2px;
  background:rgba(226,217,201,.28);outline:none}
.wv-preisregler input[type=range]::-webkit-slider-thumb{appearance:none;width:22px;height:22px;
  border-radius:50%;background:var(--creme);border:1.5px solid var(--messing);cursor:pointer}
.wv-preisregler input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--messing);outline-offset:2px}
.wv-preisregler .wvp-zeile{display:flex;justify-content:space-between;color:var(--stein);
  font-size:12px;margin-top:8px;opacity:.75}
.wv-preisregler .wvp-anzahl{color:var(--stein);font-size:13.5px;margin-top:14px}
.wv-preisregler .wvp-anzahl b{color:var(--creme);font-weight:600}
/* Legende (Comp-2-Soll): erklärt Gold/Grün/Schraffur */
.wv-legende{display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:center;
  max-width:760px;margin:0 auto 30px}
.wv-legende .wl{display:flex;align-items:center;gap:10px;color:var(--stein);
  font-family:var(--sans);font-size:13px}
.wv-legende .sw{width:17px;height:13px;flex:none;border:1px solid rgba(244,239,230,.75);display:inline-block}
.wv-legende .sw-voll{background:var(--messing);border-color:var(--messing)}
.wv-legende .sw-leer{background:rgba(244,239,230,.08)}
.wv-legende .sw-schraf{background:repeating-linear-gradient(45deg,transparent 0 3px,rgba(244,239,230,.45) 3px 4px)}
/* SVG-Gerüst */
.wv-schnitt .wv-kontur,.wv-schnitt .wv-turm{fill:none;stroke:#F4EFE6;stroke-width:1.4}
/* Dachaufbau im Zeichenstil der Marke: Kontur in voller Tinte, Fläche als
   Parallelschraffur — nie als Graufläche (ZEICHENSTIL.md §1). */
.wv-schnitt .wv-dach{fill:url(#wv-dachschraffur);stroke:#F4EFE6;stroke-width:1.4;stroke-linejoin:round}
.wv-schnitt .wv-dachlinie{stroke:rgba(244,239,230,.34);stroke-width:.8}
.wv-schnitt .wv-turm{stroke-width:1.2}
.wv-schnitt .wv-turm-spitze{stroke:var(--messing);stroke-width:1.4}
.wv-schnitt .wv-gelaende{stroke:#E2D9C9;stroke-width:1.2;opacity:.8}
.wv-schnitt .wv-gruendach{stroke:var(--messing);stroke-width:1.2}
.wv-schnitt .wv-erde-linie{stroke:rgba(226,217,201,.18);stroke-width:1}
.wv-schnitt .wv-schraffur-bg{fill:rgba(244,239,230,.06)}
.wv-schnitt .wv-schraffur-linie{stroke:rgba(244,239,230,.5);stroke-width:1}
.wv-schnitt .wv-geschoss-label{font-family:var(--sans);font-size:10.5px;fill:var(--stein);
  letter-spacing:2.2px;font-weight:600;opacity:.8}
.wv-schnitt .wv-klein,.wv-schnitt .wv-feld-hinweis{font-family:var(--sans);font-size:9px;
  fill:var(--stein);opacity:.85;letter-spacing:.4px}
.wv-schnitt .wv-keller{fill:none;stroke:rgba(244,239,230,.25);stroke-width:1;stroke-dasharray:3 4}
/* Felder */
.wv-feld{cursor:pointer;outline:none}
.wv-feld rect{fill:rgba(244,239,230,.08);stroke:rgba(244,239,230,.6);stroke-width:1;
  transition:fill .18s ease,transform .18s ease}
.wv-feld .wv-feld-nr{font-family:var(--sans);font-size:12px;fill:var(--creme);font-weight:500;pointer-events:none}
.wv-feld--im-preis rect{fill:#9F8654;stroke:#9F8654}
.wv-feld--im-preis .wv-feld-nr{fill:#1C1E1B;font-weight:600}
.wv-feld--anfrage rect{fill:url(#wv-schraffur)}
.wv-feld:hover rect,.wv-feld:focus-visible rect,.wv-feld--aktiv rect{fill:#F4EFE6;stroke:#F4EFE6}
.wv-feld:hover .wv-feld-nr,.wv-feld:focus-visible .wv-feld-nr,.wv-feld--aktiv .wv-feld-nr{fill:#1F3A2E;font-weight:600}
/* Hover-Karte */
.wv-tipp{position:absolute;z-index:6;background:var(--creme);color:var(--tanne);
  padding:14px 18px;border-radius:2px;pointer-events:none;opacity:0;
  transition:opacity .18s ease;max-width:300px;transform:translate(-50%,-100%)}
.wv-tipp.zeigt{opacity:1}
.wv-tipp .t1{font-family:var(--sans);font-weight:600;font-size:14.5px;white-space:nowrap}
.wv-tipp .t2{font-family:var(--sans);font-size:12.5px;color:var(--mokka);margin-top:3px}
/* Ziel-Zeile kurz hervorheben nach Klick im Schnitt */
.wv-row--blink{outline:2px solid var(--messing);outline-offset:3px}
@media(max-width:640px){
  .wv-schnitt-buehne{padding:32px 14px 36px}
  /* 33 Felder brauchen Breite: der Schnitt scrollt seitlich statt zu schrumpfen */
  .wv-schnitt-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:thin;padding-bottom:6px}
  .wv-schnitt-buehne .wv-schnitt{min-width:680px}
  .wv-schnitt-hinweis{display:block;text-align:center;color:var(--stein);opacity:.65;
    font-size:11px;letter-spacing:1.6px;text-transform:uppercase;margin-top:10px}
  .wv-tipp{display:none}
}
@media(min-width:641px){.wv-schnitt-hinweis{display:none}}

@media(max-width:640px){
  .hero.hero-v7 h1{font-size:clamp(2rem,8.6vw,2.6rem)}
  .hero.hero-v7 .sub{font-size:14.5px;max-width:none}
  .hero.hero-v7 .sub b{display:block;margin-top:4px}
  .hero.hero-v7 .sub .sep{display:none}
  .hero.hero-v7 .hero-cta{flex-direction:column;width:100%}
  .hero.hero-v7 .hero-cta .btn{width:100%;justify-content:center}
  /* Hochformat-Ausschnitt: das Fenster mit der Burgruine muss stehen
     bleiben — sonst bleibt nur weisse Wand und Tischplatte uebrig. */
  .hero.hero-v7 .hero-ebene .hero-foto{object-position:21% 46%}
  /* Auf 390 steht der Text auf viel weniger Bildhoehe: fruehere Deckung. */
  .hero.hero-v7::after{
    background:linear-gradient(to top,rgba(24,32,26,.9) 0%,rgba(24,32,26,.8) 30%,rgba(24,32,26,.5) 52%,rgba(24,32,26,.14) 70%,rgba(24,32,26,0) 84%),
               linear-gradient(to bottom,rgba(24,32,26,.6) 0%,rgba(24,32,26,0) 20%)}
}

/* ---------- Nachträge aus dem Gremium-Pass (04.08.) --------------------- */
/* Bedienhinweis über dem Gebäudeschnitt. Steht auf der Creme-Fläche der
   Sektion, nicht auf der grünen Bühne — er gehört zum Text, nicht zur
   Zeichnung. */
.wv-anleitung{font-family:var(--sans);font-size:14.5px;line-height:1.7;color:var(--soft);
  max-width:56ch;margin:clamp(34px,4.5vw,52px) auto clamp(20px,2.5vw,28px);text-align:center}
/* Das PS unter dem Finale-CTA: eine Stufe lauter als die Kleinzeile darüber,
   damit es gelesen wird, aber leiser als der Knopf. */
.finale .ps{max-width:52ch;margin:30px auto 0;padding-top:26px;
  border-top:1px solid rgba(244,239,230,.16);
  font-family:var(--sans);font-size:14.5px;line-height:1.7;color:rgba(245,240,231,.8)}