/* ============================================================
   0. SCHRIFTEN aus dem Brand Kit, selbst gehostet
   Ersetzt Playfair Display und Geist. Damit steht die Seite auf der
   echten Hausschrift statt auf zwei Google-Allerweltsschnitten, und
   sie laedt nichts mehr von fremden Servern.

   Rollen wie im Brand Kit:
     GT Zirkon      Display, Logo, Zahlen
     Ostia Antica   Fliesstext (Light 300 und Regular 400)
     Adieu          Label, Navigation, Marginalien

   Adieu fehlt das hochgestellte 2. Deshalb steht in --label
   Ostia Antica als erster Ausweichschnitt: "m²" faellt dann
   auf die Hausschrift zurueck, nicht auf Arial.
   ============================================================ */
@font-face{font-family:"GT Zirkon";src:url(fonts/zirkon.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Adieu";src:url(fonts/adieu.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Ostia Antica";src:url(fonts/ostia_l.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Ostia Antica";src:url(fonts/ostia_r.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ============================================================
   1. TOKENS
   Warme, helle Fassung. Der Grund ist warmes Papier, kein Schwarz.
   Rote Schrift steht damit nie auf dunklem Grund, sondern immer auf
   Papier, wie im Druck. Schwarz kommt nur noch als Schrift vor.

   Zum Rot: EF3340 erreicht auf dem Papier 3,7:1. Das traegt grosse
   Schrift (ab 3:1), aber keinen Fliesstext, und als Flaeche mit Text
   darauf waere es wieder die Rot-Schwarz-Paarung. Deshalb traegt das
   Rot hier nie Fliesstext. Es ist Linie, Marke und Grossdisplay.
   Fuer kleine rote Schrift gibt es --accent-tx, denselben Farbton
   abgedunkelt. Radius durchgehend 0.
   ============================================================ */
:root{
  --bg:        #F7F4EF;   /* warmes Papier */
  --bg-2:      #EFEBE4;
  --bg-3:      #E7E2D9;
  --ink:       #1C1917;   /* warmes Tiefbraun als Schrift */
  --muted:     #6A625A;   /* 5,5:1 auf Papier */
  --line:      rgba(28,25,23,.18);
  --line-soft: rgba(28,25,23,.09);
  --accent:    #EF3340;   /* Savoir Rot, PMS Red 032. Linien, Marken, Grossdisplay */
  --accent-tx: #C2202C;   /* derselbe Farbton, abgedunkelt fuer kleine Schrift: 5,4:1 */
  --on-accent: #F7F4EF;

  /* --serif und --sans behalten ihre Namen, damit alle bestehenden Regeln
     weiter greifen. Belegt sind sie jetzt mit der Hausschrift. */
  --serif: "GT Zirkon", "Helvetica Neue", Arial, sans-serif;   /* Display */
  --sans:  "Ostia Antica", Georgia, "Iowan Old Style", serif;  /* Fliesstext */
  --label: "Adieu", "Ostia Antica", Arial, sans-serif;         /* Label, Navigation */

  --pad: clamp(20px, 4.2vw, 68px);
  --maxw: 1560px;
  --ease: cubic-bezier(.16,1,.3,1);

  /* Die Leiste liegt ueber dem Menue, nicht darunter. Andersherum deckte
     das geoeffnete Menue den Schliessen-Knopf zu, und man kam nicht mehr
     heraus. Der Ladebildschirm bleibt oben drueber. */
  --z-grain: 60; --z-loader: 90; --z-menu: 70; --z-nav: 80; --z-float: 30;
}
/* Heller Modus. Die Systemeinstellung greift nur, solange kein Theme
   explizit gesetzt ist, damit ein Umschalter in beide Richtungen gewinnt. */
/* Papier ist fest eingestellt, unabhaengig von der Systemeinstellung.
   Die Seite soll bei jedem hell ankommen. Dunkel gibt es nur, wenn der
   Betrachter ausdruecklich umschaltet, und dann in warmer Umbra. */
:root[data-theme="light"]{
  --bg:#F7F4EF; --bg-2:#EFEBE4; --bg-3:#E7E2D9;
  --ink:#1C1917; --muted:#6A625A;
  --line:rgba(28,25,23,.18); --line-soft:rgba(28,25,23,.09);
  --accent:#EF3340; --accent-tx:#C2202C; --on-accent:#F7F4EF;
}
:root[data-theme="dark"]{
  --bg:#1E1714; --bg-2:#261E19; --bg-3:#2F2620;
  --ink:#F0E9E1; --muted:#A79789;
  --line:rgba(240,233,225,.16); --line-soft:rgba(240,233,225,.08);
  --accent:#EF3340; --accent-tx:#FF7A73; --on-accent:#1E1714;
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip; scroll-behavior:auto; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-weight:300;
  font-size:clamp(15px,1.02vw,17px); line-height:1.6;
  overflow-x:clip; -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button,input,textarea{font:inherit; color:inherit}
h1,h2,h3,p,figure,blockquote{margin:0}
::selection{background:var(--ink); color:var(--bg)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* Sprungmarke. Liegt ausserhalb des Bildes und kommt erst bei Fokus herein,
   damit sie sehend niemanden stoert und mit der Tastatur sofort da ist. */
.skip{
  position:fixed; top:0; left:0; z-index:calc(var(--z-loader) + 1);
  transform:translateY(-120%); transition:transform .2s var(--ease);
  background:var(--ink); color:var(--bg); padding:14px 22px;
  font-family:var(--label); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
}
.skip:focus{transform:translateY(0)}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
/* Grid-Kinder duerfen nicht ueber ihre intrinsische Bildbreite aufgehen */
.contact__grid > *, .bento__grid > *, .figures__grid > *,
.foot__cols > *, .verkauf__inner > *, .news__list a > *{min-width:0}
/* GT Zirkon laeuft im Display enger als Playfair. -.025em statt -.015em
   haelt die grossen Zeilen zusammen, ohne die Buchstaben zu verkleben. */
.serif{font-family:var(--serif); font-weight:400; letter-spacing:-.025em}
.eyebrow{
  font-family:var(--label);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); font-weight:300;
}
.rule{height:1px; background:var(--line); border:0; margin:0}

/* Grain, fixiert und nicht interaktiv, damit kein Repaint beim Scrollen entsteht */
.grain{
  position:fixed; inset:0; z-index:var(--z-grain); pointer-events:none; opacity:.028;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}

/* ============================================================
   2. LOADER
   Deckt das Laden der grossformatigen Renderings ab,
   damit das Hero vollstaendig ankommt statt stueckweise.
   Rein CSS-getrieben, damit die Seite auch ohne JS freigegeben wird.
   ============================================================ */
.loader{
  position:fixed; inset:0; z-index:var(--z-loader); background:var(--bg);
  display:grid; place-items:center; gap:22px; align-content:center;
  animation:loaderOut .9s var(--ease) 1.35s forwards;
}
/* Der Ladeschirm laeuft von selbst weg. Wird er per Knopf, Klick oder
   Taste vorzeitig geschlossen, uebernimmt data-weg und die Animation
   wird abgeschaltet, sonst kaeme sie zurueck. */
.loader[data-weg="true"]{
  animation:none; transform:translateY(-101%); visibility:hidden;
  transition:transform .6s var(--ease), visibility 0s linear .6s;
}
/* Das Kreissymbol ist jetzt die Originalgrafik aus dem Brand Kit, aus dem
   EPS nach SVG gewandelt und in zwei Gruppen zerlegt (24 + 25 Buchstaben-
   pfade). Keine nachgesetzte Schrift mehr, also auch keine Frage nach
   Schriftgrad und Laufweite. currentColor, damit das Symbol der Textfarbe
   folgt statt auf Schwarz festzustehen. */
.loader__mark{width:min(340px,58vw); height:auto; overflow:visible; color:var(--ink);
  opacity:0; animation:loaderIn .8s var(--ease) .1s forwards}
/* Die Ringe drehen um ihren jeweiligen Kreismittelpunkt, nicht um die Mitte
   der Zeichenflaeche. Mittelpunkte in viewBox-Koordinaten ausgemessen:
   linker Kreis (442|441), rechter (925|441), Radius je rund 392. */
/* transform-box ausdruecklich auf view-box: ohne das bezieht der Browser
   transform-origin auf die eigene Bounding-Box der Gruppe. Die Ringe
   kreisten dann um einen versetzten Punkt und schwenkten aus der
   Zeichenflaeche (gemessen 1584x1129 statt 1367x882). */
.loader__ring{transform-box:view-box; transform-origin:center;
  animation:ringDreh 9s linear infinite}
.loader__ring--a{transform-origin:442px 441px}
.loader__ring--b{transform-origin:925px 441px; animation-direction:reverse; animation-duration:7s}
@keyframes ringDreh{to{transform:rotate(360deg)}}
/* Ohne Bewegung steht das Symbol still, der Ladeschirm zieht trotzdem weg. */
@media (prefers-reduced-motion:reduce){ .loader__ring{animation:none} }
.loader__bar{width:min(220px,42vw); height:1px; background:var(--line-soft); overflow:hidden}
.loader__bar i{display:block; height:100%; width:100%; background:var(--accent);
  transform:scaleX(0); transform-origin:left; animation:loaderBar 1.25s var(--ease) .15s forwards}
/* Kommt nach Symbol und Balken herein, damit der Ladeschirm eine
   Reihenfolge hat statt alles gleichzeitig zu zeigen. */
.loader__schriftzug{width:min(190px,34vw); height:auto;
  opacity:0; animation:loaderIn .7s var(--ease) .5s forwards}
@keyframes loaderIn{to{opacity:1}}
@keyframes loaderBar{to{transform:scaleX(1)}}
@keyframes loaderOut{to{transform:translateY(-101%); visibility:hidden}}

/* ============================================================
   3. NAVIGATION  (eine Zeile, Hoehe 84px)

   Aufbau nach dem Vorbild crownd.at: die Leiste liegt ohne eigene
   Flaeche ueber dem Hero, und die Haeuser haengen als aufgeklapptes
   Verzeichnis unter "Projekte" statt in einem zweiten Menue.

   Zwei Unterschiede zum Vorbild, beide bewusst:
   - Crownd bleibt durchgehend transparent mit weisser Schrift. Das
     traegt dort, weil unter der Leiste immer Fotografie liegt. Hier
     ist der Grund nach dem Hero Papier, deshalb wechselt die Leiste
     ab dem Hero-Ende auf Papier und dunkle Schrift.
   - Kein Eckenradius. Die Seite hat durchgehend Radius 0, der bleibt
     auch im Panel.
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-nav); height:84px;
  display:flex; align-items:center;
  transition:transform .5s var(--ease), background-color .4s var(--ease),
             border-color .4s var(--ease), color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav[data-solid="true"]{background:color-mix(in oklab, var(--bg) 86%, transparent); backdrop-filter:blur(14px); border-bottom-color:var(--line-soft)}
.nav[data-hidden="true"]{transform:translateY(-100%)}

/* Ueber dem Hero: keine Flaeche, helle Schrift auf der Fotografie.
   Gesetzt wird der Zustand ueber data-solid, damit es nur einen
   Schalter gibt. Ohne JS steht die Leiste am Seitenanfang, also
   ueber dem Hero, und der helle Zustand ist der richtige. */
.nav:not([data-solid="true"]){ --nav-fg:#FFF; --nav-fg-mute:rgba(255,255,255,.72); --nav-line:rgba(255,255,255,.32) }
.nav[data-solid="true"]{ --nav-fg:var(--ink); --nav-fg-mute:var(--muted); --nav-line:var(--line) }
/* Bei offenem Menue liegt die helle Lade unter der Leiste. Stuende die
   Leiste dann noch im Hell-Zustand fuers Hero-Bild, waeren Logo und
   "Schliessen" weiss auf Papierfarbe - praktisch unlesbar. */
body:has(.menu[data-open="true"]) .nav{
  --nav-fg:var(--ink); --nav-fg-mute:var(--muted); --nav-line:var(--line);
  background:none; backdrop-filter:none; border-bottom-color:transparent;
}
body:has(.menu[data-open="true"]) .nav__logo--hell{opacity:0}
body:has(.menu[data-open="true"]) .nav__logo--dunkel{opacity:1}
.nav__inner{display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%}

/* Schriftzug aus dem Brand Kit. Beide Fassungen liegen uebereinander,
   sichtbar ist die zum Zustand der Leiste passende. */
.nav__logo{position:relative; display:block; width:clamp(116px,11vw,152px); flex:0 0 auto}
.nav__logo img{display:block; width:100%; height:auto}
/* Nur wenn beide Fassungen da sind, liegen sie uebereinander. Steht die
   dunkle allein (Unterseiten, die immer auf Papier stehen), bleibt sie im
   Fluss und sichtbar. */
.nav__logo--hell{opacity:1; transition:opacity .4s var(--ease)}
.nav__logo--hell ~ .nav__logo--dunkel{position:absolute; inset:0; opacity:0; transition:opacity .4s var(--ease)}
.nav[data-solid="true"] .nav__logo--hell{opacity:0}
.nav[data-solid="true"] .nav__logo--hell ~ .nav__logo--dunkel{opacity:1}

.nav__links{display:flex; align-items:center; gap:clamp(20px,2.6vw,48px); list-style:none; margin:0; padding:0}
.nav__links > li{position:relative}
.nav__links a, .nav__trigger{
  font-family:var(--label); font-size:12px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--nav-fg-mute); background:none; border:0; padding:0; cursor:pointer;
  position:relative; display:inline-block; padding-block:8px;
  transition:color .3s var(--ease); white-space:nowrap;
}
.nav__links a::after, .nav__trigger::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--accent);
  transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease);
}
.nav__links a:hover, .nav__trigger:hover{color:var(--nav-fg)}
.nav__links a:hover::after, .nav__trigger:hover::after{transform:scaleX(1); transform-origin:left}

/* --- Projekte-Verzeichnis -------------------------------------------------
   Oeffnet bei Hover und bei Tastaturfokus. Die Bruecke unter dem Ausloeser
   faengt die Mausbewegung ab, damit das Panel auf dem Weg nach unten nicht
   zuklappt. --- */
.nav__has-panel::before{
  content:""; position:absolute; left:-24px; right:-24px; top:100%; height:18px;
}
.nav__panel{
  position:absolute; top:calc(100% + 18px); left:-28px; z-index:1;
  min-width:404px; background:var(--bg); border:1px solid var(--line-soft);
  box-shadow:0 18px 48px rgba(28,25,23,.13);
  padding:10px 0 6px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .32s var(--ease), transform .32s var(--ease), visibility 0s linear .32s;
}
.nav__has-panel:hover .nav__panel,
.nav__has-panel:focus-within .nav__panel{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .32s var(--ease), transform .32s var(--ease), visibility 0s;
}
.nav__panel ul{list-style:none; margin:0; padding:0}
.nav__panel li + li{border-top:1px solid var(--line-soft)}
.nav__panel a{
  display:flex; align-items:baseline; gap:16px;
  padding:13px 26px; color:var(--ink);
  transition:background-color .25s var(--ease), color .25s var(--ease);
}
/* Im Panel steht der Hausname gross und gemischt, nicht als Versalzeile.
   Die Versalien bleiben den Handlungen in der Leiste vorbehalten. */
.nav__panel a::after{display:none}
.nav__panel .n{font-family:var(--serif); font-size:17px; letter-spacing:-.01em; text-transform:none; white-space:nowrap}
.nav__panel .o{font-family:var(--label); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-left:auto; white-space:nowrap; transition:color .25s var(--ease)}
.nav__panel a:hover{background:var(--bg-2); color:var(--accent-tx)}
.nav__panel a:hover .o{color:var(--accent-tx)}
.nav__panel .all{
  display:block; padding:13px 26px 11px; margin-top:4px; border-top:1px solid var(--line);
  font-family:var(--label); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.nav__panel .all:hover{background:transparent; color:var(--ink)}

.nav__toggle{
  font-family:var(--label);
  background:none; border:1px solid var(--nav-line); padding:11px 17px; cursor:pointer;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--nav-fg);
  transition:border-color .3s var(--ease), background-color .3s var(--ease), color .4s var(--ease);
}
.nav__toggle:hover{border-color:var(--nav-fg); background:color-mix(in oklab, var(--nav-fg) 8%, transparent)}
.nav__toggle:active{transform:scale(.98)}
@media (max-width:1080px){ .nav__links{display:none} }
@media (prefers-reduced-motion:reduce){ .nav__panel{transition-duration:.01ms} }

/* Menue als Lade an der rechten Seite.
   Vorher lief es ueber die ganze Flaeche und deckte die Seite zu. Jetzt
   bleibt der Inhalt dahinter sichtbar - man sieht, wohin man zurueckkehrt -
   und die freie Flaeche links ist die Schliessflaeche. */
.menu{
  position:fixed; inset:0; z-index:var(--z-menu);
  background:color-mix(in oklab, var(--ink) 42%, transparent);
  display:flex; justify-content:flex-end;
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease), visibility 0s linear .35s;
}
.menu[data-open="true"]{opacity:1; visibility:visible; transition:opacity .35s var(--ease), visibility 0s}
.menu__panel{
  width:min(92vw, 440px); height:100%; background:var(--bg-2);
  padding:calc(84px + var(--pad)) var(--pad) var(--pad);
  overflow-y:auto; display:flex; flex-direction:column; gap:36px;
  transform:translateX(100%); transition:transform .45s var(--ease);
}
.menu[data-open="true"] .menu__panel{transform:none}
@media (prefers-reduced-motion:reduce){
  .menu__panel{transition-duration:.01ms}
}
.menu__list{list-style:none; margin:0; padding:0}
.menu__list li{overflow:hidden; border-top:1px solid var(--line-soft)}
.menu__list li:last-child{border-bottom:1px solid var(--line-soft)}
/* In der schmalen Lade waren 68px unbrauchbar - zwei Woerter je Zeile.
   Jetzt eine Groesse, die als Menue lesbar bleibt und als Tippziel taugt. */
.menu__list a{
  display:block; padding:clamp(13px,1.6vw,17px) 0; font-family:var(--serif);
  font-size:clamp(22px,2.6vw,30px); line-height:1.15; transition:color .35s var(--ease);
}
.menu__list a:hover{color:var(--accent)}
.menu__haeuser{list-style:none; margin:0 0 30px; padding:0; border-top:1px solid var(--line-soft)}
.menu__haeuser li{border-bottom:1px solid var(--line-soft)}
.menu__haeuser a{display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:9px 0; font-family:var(--serif); font-size:15px; letter-spacing:-.01em; color:var(--ink);
  transition:color .25s var(--ease)}
.menu__haeuser i{font-family:var(--label); font-style:normal; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted)}
.menu__haeuser a:hover{color:var(--accent-tx)}
.menu__aside{padding-bottom:8px; color:var(--muted); font-size:14px; line-height:1.85}
/* Alle Links im Menue waren 18px hohe Tippziele. Im aufgeklappten
   Vollbildmenue trifft man die mit dem Daumen kaum. */
.menu__aside a{display:inline-block; padding-block:8px; min-height:34px}
.menu__aside strong{display:block; color:var(--ink); font-weight:400; margin-bottom:10px}
.menu__aside a:hover{color:var(--ink)}
@media (max-width:860px){ .menu{grid-template-columns:1fr; align-items:start; overflow-y:auto} }

/* ============================================================
   4. BUTTONS
   Primaer: Bone-Flaeche auf dunklem Grund, Text in Hintergrundfarbe.
   Kontrast in beiden Modi weit ueber WCAG AA.
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:11px; white-space:nowrap;
  padding:15px 26px; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid transparent; cursor:pointer; will-change:transform;
  transition:background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
/* Der Strich in jeder Schaltflaeche traegt das Markenrot.
   So steckt das Rot in jedem Aufruf, ohne je Text tragen zu muessen. */
.btn i{display:block; width:16px; height:1px; background:var(--accent); transition:width .4s var(--ease)}
.btn:hover i{width:26px}
.btn--solid{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.btn--solid:hover{background:transparent; color:var(--ink); border-color:var(--accent)}
.btn--ghost{border-color:var(--line); color:var(--ink)}
.btn--ghost:hover{border-color:var(--accent)}
.btn:active{transform:translateY(1px)}
.btn--onphoto{background:rgba(255,255,255,.95); color:#1E1714; border-color:transparent}
.btn--onphoto:hover{background:#fff; border-color:var(--accent)}
.btn--ghostphoto{border-color:rgba(255,255,255,.5); color:#fff}
.btn--ghostphoto:hover{border-color:var(--accent); background:rgba(255,255,255,.1)}

/* ============================================================
   5. HERO  (Fullbleed-Medien, linksbuendig, 3 Textelemente)
   ============================================================ */
.hero{position:relative; min-height:100dvh; display:flex; align-items:flex-end; overflow:clip}
.hero__media{position:absolute; inset:0; overflow:hidden}
.hero__media img{width:100%; height:100%; object-fit:cover; transform-origin:50% 55%}

/* --- Video im Hero ---------------------------------------------------------
   Liegt ueber der Bildfolge. Faellt das Video aus (Datenspar-Modus, alter
   Browser, Autoplay unterbunden), bleibt die Bildfolge darunter sichtbar,
   ohne dass etwas umgeschaltet werden muss.

   Stumm und ohne Bedienelemente: ein Hero-Video ist Kulisse, kein Beitrag.
   Bei prefers-reduced-motion wird es ausgeblendet, dann traegt das erste
   Standbild. --- */
.hero__video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform-origin:50% 55%; z-index:1}
@media (prefers-reduced-motion:reduce){ .hero__video{display:none} }

/* --- Bildfolge im Hero -----------------------------------------------------
   Statt eines stehenden Bildes laufen fuenf Motive ineinander, jedes mit
   langsamer Kamerafahrt. Reines CSS, damit es auch ohne JS laeuft und keine
   Videodatei geladen werden muss: fuenf Standbilder wiegen weniger als
   zwei Sekunden Video und bleiben in jeder Groesse scharf.

   Rechnung: 5 Motive, je 7s Standzeit, 1,8s Ueberblendung -> 35s Umlauf.
   Die Prozentwerte unten sind 100/5 = 20% je Motiv. --- */
.hero__media--folge img{position:absolute; inset:0; opacity:0; animation:heroFolge 35s linear infinite}
.hero__media--folge img:nth-child(1){animation-delay:0s}
.hero__media--folge img:nth-child(2){animation-delay:7s}
.hero__media--folge img:nth-child(3){animation-delay:14s}
.hero__media--folge img:nth-child(4){animation-delay:21s}
.hero__media--folge img:nth-child(5){animation-delay:28s}
@keyframes heroFolge{
  0%    {opacity:0; transform:scale(1.16)}
  5%    {opacity:1}
  20%   {opacity:1}
  25%   {opacity:0}
  100%  {opacity:0; transform:scale(1.03)}
}
/* Ohne Bewegung: erstes Motiv stehen lassen, der Rest bleibt aus. */
@media (prefers-reduced-motion:reduce){
  .hero__media--folge img{animation:none; opacity:0}
  .hero__media--folge img:nth-child(1){opacity:1}
}
/* Die Verlaeufe sind auf Umbra gestimmt, nicht auf Neutralschwarz.
   Ueber der Fotografie bleibt der Ton dadurch warm.

   Seit der Hero eine Bildfolge ist, muss der Schleier mehr leisten: unter
   den Innenaufnahmen liegen helle Waende, auf denen weisse Schrift ohne
   Abdunklung verschwindet. Die Werte sind am hellsten Motiv der Folge
   gemessen, nicht am dunkelsten. */
.hero__scrim{
  position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(to top, rgba(22,15,11,.94) 0%, rgba(22,15,11,.74) 30%, rgba(22,15,11,.42) 58%, rgba(22,15,11,.30) 78%, rgba(22,15,11,.52) 100%);
}

/* Laeuft das Video, liegt darunter kein helles Interieur mehr, sondern eine
   Abendaufnahme der Daecher - gemessen bei 88 von 255 mittlerer Helligkeit.
   Der starke Schleier von oben wuerde sie zudecken. Also nur so viel
   Abdunklung, wie die Schrift am unteren Rand braucht.

   Die Bedingung trifft genau dann zu, wenn das Video sichtbar ist: bei
   prefers-reduced-motion wird es ausgeblendet und die Bildfolge uebernimmt,
   dann gilt wieder der kraeftige Verlauf oben. */
@media (prefers-reduced-motion:no-preference){
  .hero__scrim{
    background:
      linear-gradient(to top, rgba(22,15,11,.74) 0%, rgba(22,15,11,.44) 30%, rgba(22,15,11,.12) 58%, rgba(22,15,11,.04) 78%, rgba(22,15,11,.16) 100%);
  }
}
.hero__body{position:relative; width:100%; padding-bottom:clamp(44px,7vh,92px); color:#fff}
.hero h1{
  font-family:var(--serif); font-weight:400;
  /* 10.5vw waren auf den Claim mit neun Zeichen gerechnet. "Die Kunst des
     schoenen Lebens" ist doppelt so lang und fuellte die Breite bis an den
     Rand. 8.2vw laesst rechts wieder Luft, ohne dass die Zeile klein wirkt. */
  font-size:clamp(2.6rem,8.2vw,7.4rem); line-height:.98; letter-spacing:-.03em;
  /* Der Claim traegt die Seite, deshalb steht er nicht direkt ueber den
     Knoepfen, sondern mit eigenem Abstand darueber. */
  margin-bottom:clamp(26px,4vh,52px);
  max-width:17ch;
}
.hero h1 .line{display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em}
.hero h1 .line > span{display:block}
.hero__foot{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:28px}
/* 82% Weiss reichten ueber dem einen dunklen Motiv, ueber den hellen
   Innenaufnahmen der Bildfolge nicht mehr: 3,7:1 bei 15px. Fliesstext
   braucht 4,5:1, deshalb voll deckendes Weiss. */
.hero__lead{max-width:46ch; font-size:clamp(15px,1.15vw,18px); color:#fff}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap}

/* ============================================================
   6. HALTUNG  (Scroll-Fill-Typografie, Lesetempo als Erzaehlung)
   ============================================================ */
.haltung{padding-block:clamp(110px,17vh,220px)}
.haltung p{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.7rem,4.3vw,4rem); line-height:1.16; letter-spacing:-.02em;
  max-width:22ch;
}
.haltung .w{color:color-mix(in oklab, var(--ink) 22%, transparent); transition:color .1s linear}
.haltung .w.on{color:var(--ink)}
.haltung .w.em{font-style:italic; line-height:1.25}
.haltung .w.em.on{color:var(--accent)}   /* der Schlusssatz landet im Markenrot */

/* ============================================================
   7. ZAHLENLEISTE  (schmales Band, Ziffern in Mono-Anmutung)
   ============================================================ */
.figures{border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
/* Drei gleiche Spalten statt der alten vier ungleichen: seit der Text
   daneben weg ist, gab die 1.4fr-Spalte nur noch Leerraum ab, und die
   Zahlen standen alle links zusammengedraengt. */
.figures__grid{display:grid; grid-template-columns:repeat(3,1fr)}
/* Die Zellen als Flex-Spalten mit Abstand nach unten: dadurch sitzen die
   Bezeichner auf einer Linie, auch wenn eine Zahl zweizeilig umbricht. */
.figures__cell{display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(26px,3.4vw,44px) 24px clamp(26px,3.4vw,44px) 0}
.figures__cell + .figures__cell{border-left:1px solid var(--line-soft); padding-left:clamp(20px,2.6vw,40px)}
@media (max-width:700px){
  .figures__grid{grid-template-columns:1fr}
  .figures__cell{padding-right:0}
  .figures__cell + .figures__cell{border-left:0; border-top:1px solid var(--line-soft); padding-left:0}
}
.figures__num{
  font-family:var(--serif); font-size:clamp(2.2rem,4.4vw,4.2rem); line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:-.03em; display:block;
  color:var(--accent);   /* ab 38px reicht 3:1, hier liegen 4,5:1 an */
  /* "13.000 m²" brach zwischen Zahl und Einheit um. Dadurch stand die
     mittlere Zelle zweizeilig und die Bezeichner sassen auf drei
     verschiedenen Hoehen. Die Einheit haengt jetzt an der Zahl. */
  white-space:nowrap;
}
/* Einheit kleiner als die Zahl, damit "Mio" und "m²" die Ziffern nicht
   erschlagen und alle drei Zellen gleich schwer wirken. */
/* Der Abstand rechnet gegen die eigene, kleine Schriftgroesse - .12em
   ergaben knapp 3px und lasen sich als "98Mio". */
.figures__einheit{font-size:.46em; letter-spacing:-.01em; margin-left:.34em}
.figures__lab{margin-top:14px; font-family:var(--label); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted)}
/* Der alte Zwischenschritt auf zwei Spalten stammt aus der Zeit mit vier
   Zellen. Bei dreien ergaebe er eine Waise in der zweiten Reihe, deshalb
   geht es von drei Spalten direkt auf eine (Regel oben bei 700px). */

/* ============================================================
   8. PROJEKTE  (horizontaler Schwenk, gepinnt)
   ============================================================ */
/* --- Projekte als laufendes Band ------------------------------------------
   Vorher hing der Abschnitt am Scroll: die Seite wurde festgehalten und
   erst weitergegeben, wenn man sich durch alle sechs Karten gescrollt
   hatte. Das ist die Mechanik, die sich beim Lesen wie ein Widerstand
   anfuehlt.

   Jetzt laeuft das Band von selbst weiter, und die Seite scrollt normal
   daran vorbei. Grundlage ist ein echter Scrollbereich mit scroll-snap,
   kein transform: damit funktionieren Wischen am Handy, Trackpad und
   Tastatur ohne eigenen Code, und ohne JavaScript bleibt es ein
   bedienbares Band statt eines toten Stapels. --- */
.pan{position:relative; background:var(--bg-2); padding-block:clamp(70px,10vh,120px)}
.pan__kopf{display:flex; align-items:end; justify-content:space-between; gap:30px; flex-wrap:wrap;
  margin-bottom:clamp(28px,4vw,52px)}
.pan__kopf h2{font-family:var(--serif); font-size:clamp(2.2rem,4.6vw,4.2rem); line-height:1.02;
  letter-spacing:-.025em; margin-block:14px 20px}
.pan__kopf p{color:var(--muted); max-width:38ch}

.pan__band{
  /* Positioniert, damit offsetLeft der Karten im Band gemessen wird und
     nicht in einem hoeher liegenden Element. Sonst rechnet die Steuerung
     mit Werten aus dem falschen Bezugssystem, sobald jemand am Aufbau
     darueber etwas aendert. */
  position:relative;
  display:flex; gap:clamp(16px,2.4vw,40px);
  padding-inline:var(--pad); padding-block:8px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding-inline:var(--pad);
  scrollbar-width:none;
}
.pan__band::-webkit-scrollbar{display:none}
.pan__band .card{
  /* 29vw hiessen drei Karten nebeneinander. Beim Weiterschalten wird dann
     die naechste Karte zentriert, was den Streifen nur um wenige Pixel
     verschiebt - der Selbstlauf lief, war aber nicht zu sehen. Mit 40vw
     passen zwei, und jeder Schritt bewegt rund 500px. */
  scroll-snap-align:center; flex:0 0 clamp(280px,40vw,520px);
  opacity:.88; transition:opacity .6s var(--ease), transform .6s var(--ease);
  transform:scale(.965); transform-origin:50% 60%;
}
/* Die Karte in der Mitte traegt den Blick, die uebrigen treten zurueck.
   Bewusst ohne Weichzeichner: die Renderings sind das Verkaufsargument,
   und ein Bauträger, der seine Haeuser unscharf zeigt, verschenkt sie.
   Der Fokus kommt allein aus Deckkraft und Groesse, die Bilder bleiben
   durchgehend scharf.

   24.08.: von .62 auf .88 angehoben. Bei .62 wirkten die sechs uebrigen
   Haeuser ausgegraut, als laege ein Filter darauf - zusammen mit den
   damals zu kleinen Bildern (850px in einem 1200px-Rahmen) entstand der
   Eindruck, die Projekte seien weichgezeichnet. Der Vorrang der mittleren
   Karte kommt jetzt vor allem aus der Groesse. */
.pan__band .card.ist-aktiv{opacity:1; transform:scale(1)}
/* Beim Ueberfahren nach vorne holen, auch wenn die Karte nicht mittig
   steht: wer eine Karte ansteuert, will sie sehen. */
.pan__band .card:hover{opacity:1}

.pan__steuerung{display:flex; align-items:center; gap:10px}
.pan__knopf{
  width:44px; height:44px; display:grid; place-items:center; cursor:pointer;
  background:none; border:1px solid var(--line); color:var(--ink);
  transition:border-color .3s var(--ease), background-color .3s var(--ease), opacity .3s var(--ease);
}
.pan__knopf:hover{border-color:var(--ink); background:color-mix(in oklab, var(--ink) 6%, transparent)}
.pan__knopf[disabled]{opacity:.3; cursor:default}
.pan__knopf svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.5}

.pan__punkte{display:flex; gap:8px; margin-top:clamp(22px,3vw,34px); padding-inline:var(--pad)}
.pan__punkte button{
  width:34px; height:2px; padding:0; border:0; cursor:pointer; background:var(--line);
  transition:background-color .4s var(--ease);
}
.pan__punkte button[aria-current="true"]{background:var(--accent)}
/* Tippziel vergroessern, ohne den Strich dicker zu machen */
.pan__punkte button::before{content:""; position:absolute; margin:-14px; padding:14px}

@media (prefers-reduced-motion:reduce){
  .pan__band{scroll-behavior:auto}
  .pan__band .card{transition:none}
}
.card{flex:0 0 auto; width:clamp(280px,31vw,470px)}
/* 3:2, weil die Projektfotos so aufgenommen sind (1600x1067).
   Vorher stand hier 3/4 - ein hochformatiger Rahmen fuer querformatige
   Bilder. object-fit:cover warf dabei 47 Prozent der Bildbreite weg und
   zog den Rest doppelt so gross: vom Haus blieb die Mitte, und was im
   Vordergrund stand (Gehsteig, Kiosk, Mistkuebel) beherrschte die Karte.
   Auf /projekte/ fiel das nie auf, weil der Rahmen dort quer ist. */
.card__media{position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--bg-3)}
.card__media img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); will-change:transform}
.card:hover .card__media img{transform:scale(1.05)}
.card__soon{position:absolute; inset:0; display:grid; place-items:center; background:rgba(22,15,11,.72); color:#fff;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase}
.card__head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-top:18px}
.card__head h3{font-family:var(--serif); font-size:clamp(1.35rem,2vw,1.9rem); letter-spacing:-.01em; font-weight:400}
.card__head span{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
/* Adresse links, Status rechts. space-between statt fester Abstand, damit
   die beiden Enden an den Kartenraendern sitzen und die Statusangaben
   ueber alle Karten hinweg auf einer Flucht stehen. */
.card__meta{margin-top:12px; padding-top:12px; border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  color:var(--muted); font-size:13px}
.card__adresse{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* Der Status ist die Angabe, die den Blick fuehrt: als Versalzeile im
   Akzentton, wie die Rubriken bei Aktuelles. */
.card__status{flex:0 0 auto; font-family:var(--label); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-tx)}
@media (max-width:860px){
  /* Am Handy bleibt das Band ein Band, nur schmaler: eine Karte fuellt fast
     die Breite, die naechste lugt hervor und zeigt, dass es weitergeht.
     Die Pfeilknoepfe entfallen, dort wird gewischt. Auch die Abstufung
     faellt weg: bei einer Karte pro Bild gibt es nichts abzustufen. */
  .pan__band .card{flex:0 0 82vw; opacity:1; transform:none}
  .pan__steuerung{display:none}
  /* Am Handy dasselbe Verhaeltnis wie am Schreibtisch. 4/5 war hier der
     gleiche Fehler wie oben, nur staerker: eine 82vw breite Karte wurde
     damit hoeher als der halbe Bildschirm. */
  .card__media{aspect-ratio:3/2}
}

/* ============================================================
   SUCHSEITE /wohnungen/ - Liste links, Karte rechts
   ============================================================
   Die Karte steht fest und die Liste scrollt daran vorbei. Das geht ohne
   position:fixed: die rechte Spalte ist so hoch wie der Rasterzeile, die
   Karte darin klebt (sticky) unter der Kopfleiste.

   Ab 1000 px faellt die Karte weg statt unter die Liste zu rutschen. Eine
   Karte, die man erst nach zwanzig Wohnungen sieht, sieht niemand - und am
   Handy kostet sie eine knappe Megabyte Kacheln fuer nichts.
   ============================================================ */
.suche{padding-top:0}

/* ---- Suchleiste ---------------------------------------------------------
   Eine Pille, wie im Vorbild. Die Beschriftungen liegen ueber den Feldern
   in Versalien - sichtbar, nicht nur fuer Screenreader: ohne sie steht dort
   "Ueberall / Jede Groesse / Jeder Preis" und niemand weiss, was er
   einstellt, sobald einmal etwas anderes drinsteht. */
/* --navh und --leisteh setzt das Skript aus den gemessenen Hoehen. Die
   Werte hier sind nur die Rueckfallebene fuer den Moment vor dem ersten
   Messen und fuer den Fall ohne JavaScript - fest eingetragen waren sie
   schon einmal falsch (72 statt 84), und die Suchleiste schob sich unter
   die Navigation. */
.suche__leiste{position:sticky; top:var(--navh,84px); z-index:40;
  padding:clamp(14px,2vw,22px) 16px; background:var(--bg);
  border-bottom:1px solid var(--line-soft)}
.pille{display:flex; align-items:stretch; gap:0; margin:0 auto; width:max-content;
  max-width:100%; background:var(--bg-2); border:1px solid var(--line);
  border-radius:999px; padding:6px 6px 6px 10px;
  box-shadow:0 6px 24px rgba(22,15,11,.07)}
.pille__feld{display:flex; flex-direction:column; justify-content:center;
  padding:4px 16px; min-width:0; border-right:1px solid var(--line-soft)}
.pille__feld:last-of-type{border-right:0}
.pille__feld label{font-family:var(--label); font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin-bottom:2px}
.pille__feld select{appearance:none; -webkit-appearance:none; border:0; background:transparent;
  font:inherit; font-size:14.5px; color:var(--ink); padding:0 18px 0 0; max-width:22ch;
  text-overflow:ellipsis; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:right 6px center, right 1px center;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat}
.pille__feld select:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}
.pille__knopf{flex:0 0 auto; width:46px; height:46px; margin-left:8px; border:0; border-radius:50%;
  background:var(--accent); color:#fff; display:grid; place-items:center; cursor:pointer;
  transition:transform .3s var(--ease), filter .3s var(--ease)}
.pille__knopf:hover{transform:scale(1.06); filter:brightness(1.06)}
.pille__knopf svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round}

/* ---- Geteiltes Layout --------------------------------------------------- */
.suche__split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,46%);
  align-items:start}
.suche__innen{padding-block:clamp(22px,3vw,38px); max-width:none}
.suche__kopf{display:flex; align-items:baseline; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-bottom:clamp(18px,2.4vw,28px)}
.suche__kopf h1{font-family:var(--serif); font-weight:400; letter-spacing:-.025em;
  font-size:clamp(1.5rem,2.6vw,2.1rem); margin:0}
.suche__kopf h1 b{font-weight:400; font-variant-numeric:tabular-nums}

.mehrfilter{display:inline-flex; align-items:center; gap:9px; padding:10px 18px;
  border:1px solid var(--line); border-radius:999px; background:var(--bg);
  font:inherit; font-size:13.5px; color:var(--ink); cursor:pointer;
  transition:border-color .3s var(--ease), background-color .3s var(--ease)}
.mehrfilter:hover{border-color:var(--ink)}
.mehrfilter svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round}
.mehrfilter[aria-expanded="true"]{background:var(--bg-3); border-color:var(--ink)}

.filtermehr{display:flex; flex-wrap:wrap; align-items:flex-end; gap:clamp(14px,2vw,28px);
  padding:clamp(14px,2vw,20px); margin-bottom:clamp(18px,2.4vw,26px);
  background:var(--bg-2); border:1px solid var(--line-soft); border-radius:14px}
/* Ohne diese Zeile gewinnt display:flex gegen das hidden-Attribut, und das
   Feld steht offen da, obwohl "Mehr Filter" noch nicht gedrueckt wurde. */
.filtermehr[hidden]{display:none}
.filtermehr .pille__feld{border-right:0; padding:0}
.filtermehr__reset{margin-left:auto; border:0; background:none; font:inherit; font-size:13px;
  color:var(--muted); text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.filtermehr__reset:hover{color:var(--accent-tx)}

/* Zwei Karten nebeneinander, auch wenn die Spalte schmal wird - im Vorbild
   steht die Liste ebenso zweispaltig. */
.immo__grid--such{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1240px){ .immo__grid--such{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .immo__grid--such{grid-template-columns:1fr} }

.immo__leer-reset{margin-left:10px; border:0; background:none; font:inherit;
  color:var(--accent-tx); text-decoration:underline; text-underline-offset:3px; cursor:pointer}

/* ---- Karte -------------------------------------------------------------- */
.suche__karte{position:sticky; top:calc(var(--navh,84px) + var(--leisteh,107px));
  height:calc(100dvh - var(--navh,84px) - var(--leisteh,107px))}
.karte{width:100%; height:100%; background:var(--bg-3)}
.karte__hinweis{padding:24px; color:var(--muted)}

/* Marker: Zahl der freien Einheiten, wie im Vorbild. Als <button>, damit er
   mit der Tastatur erreichbar ist - ein <div> mit Klickhandler waere es
   nicht. */
.marker{width:38px; height:38px; border-radius:50%; border:2px solid #fff;
  background:var(--ink); color:#fff; font:inherit; font-size:13px; font-weight:500;
  font-variant-numeric:tabular-nums; display:grid; place-items:center; cursor:pointer;
  box-shadow:0 3px 12px rgba(22,15,11,.3);
  transition:transform .25s var(--ease), background-color .25s var(--ease)}
.marker:hover,
.marker[data-aktiv="true"]{transform:scale(1.18); background:var(--accent)}
.marker[data-leer="true"]{background:var(--bg-3); color:var(--muted); opacity:.55}
.maplibregl-popup-content{font:inherit; font-size:13.5px; border-radius:10px;
  padding:12px 15px; box-shadow:0 6px 24px rgba(22,15,11,.16)}

@media (max-width:1000px){
  .suche__split{grid-template-columns:1fr}
  .suche__karte{display:none}
  .immo__grid--such{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .pille{flex-wrap:wrap; width:100%; border-radius:22px; padding:10px}
  .pille__feld{border-right:0; flex:1 1 40%; padding:6px 10px}
  .pille__feld select{max-width:100%; width:100%}
  .pille__knopf{margin:6px 0 0 auto}
  .immo__grid--such{grid-template-columns:1fr}
}

/* ============================================================
   WOHNUNGSSUCHE als eigene Seite (/wohnungen/)
   ============================================================ */
/* Fuer Ueberschriften, die die Gliederung braucht, die Gestaltung aber
   nicht zeigen soll. Nicht display:none - das nehmen Vorleseprogramme
   ebenfalls aus der Gliederung. */
.visuell-versteckt{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.immo__einstieg{max-width:62ch; margin-bottom:clamp(26px,3.4vw,44px); color:var(--muted)}
.immo__einstieg p + p{margin-top:1em}
/* ---- Bereits vergebene Einheiten (Projektseite) ----------------------------
   Bewusst kein Bildraster: die Liste steht neben den verfuegbaren Wohnungen
   und soll die nicht erschlagen. Zwei Spalten mit Haarlinien, wie die
   Ausstattung und das Ankaufsprofil - die Seite fuehrt eine Art von Liste. */
.verkauft{padding-block:clamp(36px,5vh,70px)}
.verkauft__liste{margin:0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(24px,4vw,56px)}
.verkauft__liste a{display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; padding-block:clamp(11px,1.3vw,15px);
  border-bottom:1px solid var(--line-soft); color:var(--muted);
  transition:color .3s var(--ease)}
.verkauft__liste a:hover{color:var(--ink)}
.vk__t{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vk__m{flex:0 0 auto; font-size:13px; font-variant-numeric:tabular-nums}
@media (max-width:640px){ .verkauft__liste{grid-template-columns:1fr} }

/* Preiskasten einer vergebenen Wohnung: der Preis bleibt sichtbar, aber
   durchgestrichen und ruhig - er ist Auskunft, nicht mehr Angebot. */
.wbox--weg .wbox__preis{color:var(--muted)}
.wbox--weg .wbox__preis s{text-decoration-thickness:1px; text-underline-offset:2px}

/* ---- Fliesstext mit Zwischenueberschriften ---------------------------------
   Ein Textblock, der gelesen werden soll: Zeilenlaenge auf 62 Zeichen
   begrenzt, Ueberschriften in der Serifenschrift wie die uebrigen H2, und
   vor jeder ein deutlicher Absatz - sonst kleben Text und naechste
   Ueberschrift aneinander und die Gliederung verschwindet. */
.langtext{padding-block:clamp(32px,4.5vh,60px)}
.langtext h2{font-family:var(--serif); font-weight:400; letter-spacing:-.02em;
  font-size:clamp(1.3rem,2.2vw,1.75rem); max-width:34ch;
  margin-bottom:clamp(10px,1.2vw,16px)}
.langtext h2 + p{margin-top:0}
.langtext h2:not(:first-child){margin-top:clamp(28px,3.6vw,46px)}
.langtext p{max-width:62ch; color:var(--muted)}

/* ---- Ankaufsprofil (/immobilienankauf/) ------------------------------------
   Drei Karten nebeneinander, jede mit Einleitung und Aufzaehlung. Dieselbe
   Sprache wie die Ausstattung weiter unten: Haarlinien statt Punkte, damit
   die Seite nicht zwei Arten von Listen fuehrt. */
.profil{padding-block:clamp(40px,6vh,80px)}
.profil__grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,44px); align-items:start}
.profil__karte{padding-top:clamp(16px,2vw,22px); border-top:2px solid var(--ink)}
.profil__karte h3{font-family:var(--serif); font-weight:400; letter-spacing:-.02em;
  font-size:clamp(1.25rem,1.9vw,1.6rem); margin-bottom:.5em}
.profil__karte > p{color:var(--muted); max-width:36ch; margin-bottom:clamp(12px,1.6vw,18px)}
.profil__karte ul{margin:0; padding:0; list-style:none}
.profil__karte li{padding-block:clamp(9px,1.1vw,12px);
  border-bottom:1px solid var(--line-soft); font-size:.97rem}
.profil__karte li:last-child{border-bottom:0}
@media (max-width:900px){
  .profil__grid{grid-template-columns:1fr; gap:clamp(24px,4vw,36px)}
  .profil__karte > p{max-width:60ch}
}

/* ---- Ausstattung -----------------------------------------------------------
   Erster Versuch waren Stichworte mit kleinen Strichen davor. Die Striche
   schwebten neben dem Text, der Block hatte keine Kante und zerfiel in zwei
   lose Spalten.
   Jetzt dieselbe Form wie die Projektdaten direkt darunter: eine Zeile je
   Angabe, getrennt durch Haarlinien. Das braucht keine Aufzaehlungszeichen -
   die Linie leistet dasselbe und bindet den Block an den Rest der Seite. */
.ausstattung{max-width:62ch; margin-bottom:clamp(26px,3.4vw,44px)}
.ausstattung__label{font-family:var(--label); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); font-weight:400;
  padding-top:clamp(18px,2.2vw,26px); border-top:1px solid var(--line);
  margin-bottom:clamp(4px,1vw,10px)}
.ausstattung__liste{margin:0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(24px,4vw,56px)}
.ausstattung__liste li{padding-block:clamp(10px,1.2vw,13px);
  border-bottom:1px solid var(--line-soft); color:var(--ink); font-size:.97rem}
/* Die letzte Zeile jeder Spalte ohne Linie - sonst haengt unten ein Strich
   ins Leere, wenn die Spalten unterschiedlich lang sind. */
.ausstattung__liste li:last-child,
.ausstattung__liste li:nth-last-child(2):nth-child(odd){border-bottom:0}
@media (max-width:560px){
  .ausstattung__liste{grid-template-columns:1fr}
  .ausstattung__liste li:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--line-soft)}
}
.immo__titel{font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.4rem); font-weight:400;
  letter-spacing:-.025em; margin-bottom:clamp(16px,2vw,24px)}

.haeuser{padding-block:clamp(50px,7vw,90px)}
.haeuser > h2{font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.4rem); font-weight:400;
  letter-spacing:-.025em; margin-bottom:clamp(22px,3vw,36px)}
.haeuser__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,64px)}
.haeuser__bild{display:block; aspect-ratio:4/3; overflow:hidden; background:var(--bg-3); margin-bottom:18px}
.haeuser__bild img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.haeuser__bild:hover img{transform:scale(1.04)}
.haeuser h3{font-family:var(--serif); font-size:clamp(1.3rem,2.2vw,1.8rem); font-weight:400; letter-spacing:-.02em}
.haeuser h3 a:hover{color:var(--accent-tx)}
/* Diese Zeile traegt echte Information (Adresse, Einheiten, verfuegbar) und
   ist mit 44 Zeichen zu lang fuer 10.5px Versalien. Kurze Marken duerfen
   klein sein, ein Satz nicht. */
.haeuser__ort{font-family:var(--label); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-block:9px 14px; line-height:1.5}
.haeuser p{color:var(--muted); max-width:46ch}
.haeuser__mehr{display:inline-block; margin-top:14px; color:var(--ink); border-bottom:1px solid var(--line)}
.haeuser__mehr:hover{color:var(--accent-tx); border-bottom-color:var(--accent)}
@media (max-width:860px){ .haeuser__grid{grid-template-columns:1fr} }

/* Nummerierter Ablauf. Die Ziffer steht als Marginalie, damit die
   Reihenfolge auch beim Ueberfliegen ablesbar bleibt. */
.ablauf{list-style:none; margin:0; padding:0; counter-reset:schritt;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(24px,3vw,48px)}
.ablauf li{counter-increment:schritt; border-top:1px solid var(--line); padding-top:18px}
.ablauf li::before{content:counter(schritt,decimal-leading-zero);
  font-family:var(--label); font-size:10px; letter-spacing:.16em; color:var(--accent-tx); display:block; margin-bottom:12px}
.ablauf h3{font-family:var(--serif); font-size:clamp(1.15rem,1.8vw,1.45rem); font-weight:400; letter-spacing:-.01em}
.ablauf p{color:var(--muted); margin-top:10px; max-width:40ch}
.ablauf p + p{margin-top:8px}

/* Werdegang: gleiche Optik wie .ablauf, aber die Marke ueber dem Titel ist
   das Jahr statt einer Schrittnummer. Eine Chronologie ist kein Ablauf -
   "01" ueber "2022" waere doppelt gemoppelt und sachlich falsch. */
.ablauf--jahre li::before{content:none}
.ablauf--jahre .jahr{display:block; margin-bottom:12px;
  font-family:var(--label); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-tx)}
/* Offene Punkte sichtbar markieren, damit nichts unbemerkt live geht. */
.offen{color:var(--accent-tx)}
dd.offen{color:var(--accent-tx)}

/* Rechtstexte: schmale Spalte, damit lange Absaetze lesbar bleiben. */
.rechtstext{max-width:68ch; padding-bottom:clamp(50px,8vw,110px)}
.rechtstext p{margin-bottom:1em}
.rechtstext h2{font-family:var(--serif); font-size:clamp(1.3rem,2.2vw,1.7rem); font-weight:400;
  letter-spacing:-.02em; margin-block:clamp(30px,4vw,48px) 14px}
.rechtstext__firma{font-family:var(--serif); font-size:1.3rem; letter-spacing:-.01em}
.dl{display:grid; grid-template-columns:minmax(150px,auto) 1fr; gap:0 clamp(20px,3vw,44px);
  margin:0; border-top:1px solid var(--line-soft)}
.dl dt{padding:11px 0; color:var(--muted); font-size:14px; border-bottom:1px solid var(--line-soft)}
.dl dd{padding:11px 0; margin:0; border-bottom:1px solid var(--line-soft)}
.dl dd a{border-bottom:1px solid var(--line)}
.dl dd a:hover{color:var(--accent-tx)}
@media (max-width:600px){
  .dl{grid-template-columns:1fr; gap:0}
  .dl dt{border-bottom:0; padding-bottom:0}
}

.fragen{padding-block:clamp(50px,7vw,90px); border-top:1px solid var(--line-soft)}
.fragen > h2{font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.4rem); font-weight:400;
  letter-spacing:-.025em; margin-bottom:clamp(20px,2.6vw,32px)}
.fragen__liste{margin:0; max-width:76ch; border-top:1px solid var(--line-soft)}
.fragen__liste dt{font-family:var(--serif); font-size:1.15rem; letter-spacing:-.01em;
  padding-top:22px; margin:0}
.fragen__liste dd{margin:10px 0 0; padding-bottom:22px; border-bottom:1px solid var(--line-soft);
  color:var(--muted); max-width:66ch}
.fragen__liste dd a{color:var(--ink); border-bottom:1px solid var(--line)}
.fragen__liste dd a:hover{color:var(--accent-tx)}

/* ============================================================
   AKTUELL IM VERKAUF
   Kompakter Verweis statt Projektstrecke. Die Ausfuehrlichkeit
   gehoert auf die jeweilige Projektseite, hier zaehlt nur:
   welches Haus ist gerade dran und wo geht es weiter.
   ============================================================ */
.verkauf{padding-block:clamp(70px,10vh,120px); background:var(--bg-2)}
.verkauf__inner{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,64px); align-items:center}
.verkauf__bild{display:block; aspect-ratio:4/3; overflow:hidden; background:var(--bg-3)}
.verkauf__bild img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.verkauf__bild:hover img{transform:scale(1.04)}
.verkauf__text h2{font-family:var(--serif); font-size:clamp(2rem,4.2vw,3.4rem); line-height:1;
  letter-spacing:-.03em; margin-block:14px 18px}
.verkauf__lead{color:var(--muted); max-width:44ch}
.verkauf__zahlen{display:flex; flex-wrap:wrap; gap:clamp(22px,3vw,48px); margin-top:28px;
  padding-top:22px; border-top:1px solid var(--line)}
.verkauf__zahlen b{display:block; font-family:var(--serif); font-size:clamp(1.4rem,2.2vw,2rem);
  font-weight:400; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.verkauf__zahlen span{display:block; font-family:var(--label); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-top:7px}
.verkauf__cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:32px}
@media (max-width:860px){ .verkauf__inner{grid-template-columns:1fr} }

/* ============================================================
   10. LEISTUNGEN  (Bento, 4 Inhalte in genau 4 Feldern,
       zwei davon bildgefuehrt, zwei flaechig)
   ============================================================ */
/* Unten mehr Luft als oben: darunter beginnt der dunkle Bildabschnitt, und
   die Kacheln stiessen bisher ohne Abstand daran. Der Ueberstand kam
   zusaetzlich aus der Einblendung, die die Kacheln bis zum Ausloesen 26px
   tiefer haelt - deshalb overflow:clip, damit nichts in die dunkle Flaeche
   ragt, waehrend die Animation noch aussteht. */
.bento{padding-block:clamp(70px,10vh,120px) clamp(90px,13vh,150px); overflow:clip}
.bento__title{font-size:clamp(2rem,4.2vw,3.4rem); line-height:1.02; letter-spacing:-.03em; max-width:16ch}
/* Einleitung unter der Ueberschrift. Schmaler als die Kachelreihe darunter,
   damit die Zeilen lesbar kurz bleiben - 62 Zeichen wie in den uebrigen
   Abschnitten, nicht die volle Breite des Rasters. */
.bento__lead{max-width:62ch; margin-top:clamp(18px,2.2vw,26px); color:var(--muted)}
.bento__grid{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(12px,1.4vw,22px); margin-top:clamp(28px,4vw,52px)}
.tile{position:relative; overflow:hidden; min-height:clamp(280px,40vh,420px); display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(22px,2.4vw,36px)}
.tile--a{grid-column:span 7; background:var(--bg-2)}
.tile--b{grid-column:span 5}
.tile--c{grid-column:span 5}
/* War eine rote Vollflaeche mit Text darauf. Jetzt warme Flaeche,
   das Rot sitzt in der Oberkante und in der Ueberschrift. */
.tile--d{grid-column:span 7; background:var(--bg-3); box-shadow:inset 0 3px 0 var(--accent)}
/* Auf der gehobenen Flaeche kaeme das reine Markenrot im hellen Modus
   nur auf 2,9:1. Hier traegt der aufgehellte Ton. */
.tile--d h3{color:var(--accent-tx)}
.tile__img{position:absolute; inset:0}
.tile__img img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.tile:hover .tile__img img{transform:scale(1.06)}
.tile__img::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(22,15,11,.9), rgba(22,15,11,.15) 62%)}
.tile__body{position:relative; max-width:38ch}
.tile h3{font-family:var(--serif); font-size:clamp(1.6rem,2.6vw,2.4rem); font-weight:400; margin-bottom:10px; letter-spacing:-.015em}
.tile p{font-size:14.5px; line-height:1.65}
.tile--a p, .tile--d p{color:var(--muted); opacity:1}
.tile--b .tile__body, .tile--c .tile__body{color:#fff}
.tile--b p, .tile--c p{color:rgba(255,255,255,.8)}
@media (max-width:860px){ .tile{grid-column:1/-1 !important; min-height:300px} }

/* ============================================================
   11. UEBER UNS  (Fullbleed-Aussage ueber Bild)
   ============================================================ */
/* Vorher 90dvh - fast ein voller Bildschirm fuer eine Ueberschrift und
   zwei Zeilen. Der Abschnitt ist ein Verweis auf /ueber-uns/, kein
   eigenes Kapitel, und braucht die Hoehe nicht. */
.about{position:relative; min-height:46dvh; display:grid; align-items:center; overflow:clip; color:#fff}
.about__media{position:absolute; inset:0; overflow:hidden}
.about__media img{width:100%; height:100%; object-fit:cover; will-change:transform}
.about__media::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(22,15,11,.92) 8%, rgba(22,15,11,.46) 58%, rgba(22,15,11,.2) 100%)}
.about__body{position:relative; max-width:46ch; padding-block:clamp(52px,7vh,80px)}
.about__body h2{font-family:var(--serif); font-size:clamp(1.7rem,3vw,2.6rem); line-height:1.08; letter-spacing:-.025em; margin-block:14px 16px; font-weight:400}
/* Volles Weiss statt 82%: der Verlauf ist an dieser Stelle heller als im
   Hero, und 82% kamen bei 15px nicht auf die 4,5:1 fuer Fliesstext. */
.about__body p{color:#fff; margin-bottom:24px}

/* ============================================================
   12. AKTUELLES  (Index mit bildvorschau am Zeiger)
   ============================================================ */
/* ============================================================
   IMMOBILIENSUCHE

   Der wichtigste Abschnitt der Seite und bisher der schwaechste:
   auf savoir.at liegt an dieser Stelle ein iframe auf
   savoirvivre2.immo-export.at. Damit stehen Titel, Text, Preis und
   Schema aller Wohnungen auf einer fremden Domain, savoir.at selbst
   hat auf /immobiliensuche/ 290 Zeichen und keine H1.

   Deshalb hier: echte Liste im eigenen Dokument, jede Einheit als
   eigener Link auf eine eigene URL, Zahlen als Text statt als Bild,
   dazu ItemList/RealEstateListing weiter unten im Dokument.
   ============================================================ */
.immo{padding-block:clamp(90px,13vh,160px); background:var(--bg-2)}
.immo__head{max-width:60ch; margin-bottom:clamp(26px,3.4vw,44px)}
.immo__head h2{font-family:var(--serif); font-size:clamp(2rem,4vw,3.4rem); font-weight:400; letter-spacing:-.025em; margin-block:12px 0}
.immo__lead{color:var(--muted); margin-top:14px}

/* Leiste ueber dem Raster: Zaehler links, Filter rechts.
   Ohne JS bleiben alle Einheiten sichtbar, die Filter sind dann
   eine reine Uebersicht. Indexiert wird ohnehin der volle Bestand. */
.immo__bar{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:clamp(20px,2.6vw,30px);
}
.immo__zaehler{font-family:var(--label); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
/* Steht der Zaehler direkt unter den Filterknoepfen, braucht er Luft nach
   beiden Seiten - sonst klebt er an den Pillen und wirkt wie deren Beschriftung. */
.immo__filter + .immo__zaehler{margin-block:clamp(18px,2.4vw,28px) clamp(14px,1.8vw,20px)}
.immo__zaehler b{color:var(--ink); font-weight:300}
.immo__filter{display:flex; gap:8px; flex-wrap:wrap}
.immo__filter button{
  font-family:var(--label); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  background:none; border:1px solid var(--line); color:var(--muted); padding:9px 15px; cursor:pointer;
  transition:border-color .3s var(--ease), color .3s var(--ease), background-color .3s var(--ease);
}
.immo__filter button:hover{border-color:var(--ink); color:var(--ink)}
.immo__filter button[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--bg)}

/* Zweispaltig wie im Vorbild: links der Bestand, rechts der Lageplan,
   der beim Scrollen stehen bleibt. */
.immo__split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,48px); align-items:start}
.immo__grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:clamp(16px,1.6vw,24px);
}
/* Anreisser auf der Startseite: drei Einheiten nebeneinander in voller
   Breite, statt des schmalen Rasters neben dem Lageplan. */
.immo__grid--drei{grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,36px)}
@media (max-width:860px){ .immo__grid--drei{grid-template-columns:1fr} }
.immo__grid li[hidden]{display:none}
.immo__grid a{display:block; transition:color .3s var(--ease)}
/* Karte ohne Verknuepfung: gleiche Gestalt, aber kein Zeigefinger, keine
   Vergroesserung beim Ueberfahren und keine Farbaenderung - nichts, was
   Klickbarkeit verspricht. */
.k__ruhend{display:block; cursor:default}
.k__ruhend .k__bild img{transition:none}
.k__bild{display:block; position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--bg-3); margin-bottom:14px}
/* Status auf dem Bild statt darunter. Der Fleck aus Papierfarbe traegt in
   jedem Motiv - ueber hellem Himmel wie ueber dunkler Fassade -, weil er
   deckend ist und nicht durchscheint. Deshalb kein halbtransparentes Feld. */
.k__marke{
  position:absolute; left:12px; top:12px; z-index:3;
  font-family:var(--label); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  background:var(--bg); color:var(--ink); padding:6px 10px;
  transition:opacity .3s var(--ease);
}

/* Kennzahlen, die beim Ueberfahren ueber das Bild kommen.
   Sie stehen immer im HTML und werden nur sichtbar gemacht - deshalb
   opacity und nicht display:none, sonst waere die Blende nicht weich.
   Der Status oben links bleibt darueber stehen (z-index 3). */
.k__fakten{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:center; gap:clamp(8px,1.2vw,14px);
  padding:clamp(18px,2.4vw,28px);
  background:rgba(22,15,11,.84); color:#fff;
  opacity:0; transition:opacity .4s var(--ease);
}
.k__fakt{display:block; line-height:1.15}
.k__fakt b{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:clamp(1.05rem,1.7vw,1.35rem); font-variant-numeric:tabular-nums;
}
.k__fakt i{
  display:block; margin-top:3px; font-style:normal;
  font-family:var(--label); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
/* Nur wo es einen Mauszeiger gibt. Am Handy gibt es kein Ueberfahren -
   dort fuehrt die Karte direkt zur Projektseite, wo dieselben Zahlen
   ohnehin gross stehen. */
@media (hover:hover) and (pointer:fine){
  .immo__grid a:hover .k__fakten{opacity:1}
  /* Die Marke weicht: sonst verdeckt sie den obersten Wert. Der Status
     steht ohnehin schon im Filter, unter dem die Karte gerade liegt. */
  .immo__grid a:hover .k__marke{opacity:0}
}
/* Wer mit der Tastatur navigiert, sieht sie ebenfalls. */
.immo__grid a:focus-visible .k__fakten{opacity:1}
.immo__grid a:focus-visible .k__marke{opacity:0}
.k__bild img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.immo__grid a:hover .k__bild img{transform:scale(1.05)}
.k__t{display:block; font-family:var(--serif); font-size:1.02rem; line-height:1.25; letter-spacing:-.01em}
.k__o{display:block; font-family:var(--label); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:8px}
.k__p{display:block; font-size:1.15rem; margin-top:12px; font-variant-numeric:tabular-nums; transition:color .3s var(--ease)}
.k__m{display:block; font-size:13px; color:var(--muted); margin-top:4px; font-variant-numeric:tabular-nums}
/* ---- Projektdaten: Text links, Eckdaten rechts ----------------------------
   Vorher standen die Kennzahlen als Reihe grosser Zahlen nebeneinander. Das
   liest sich gut bei drei gleichartigen Werten, bricht aber, sobald die
   Bezeichnungen unterschiedlich lang sind ("Bauende" neben "m² Wohnfläche").
   Als Liste untereinander hat jede Zeile so viel Platz, wie sie braucht. */
/* Die Textspalte bekommt ihr Mass, die Eckdaten den Rest - nicht umgekehrt.
   Andersherum stand der Text in einer 870 Pixel breiten Spalte, fuellte davon
   aber nur 510, und zwischen den beiden Spalten klaffte eine Luecke von
   ueber 300 Pixeln. Jetzt schliesst die Liste direkt an, und ihre Haarlinien
   spannen ueber die volle Restbreite. */
.pdaten{
  display:grid; grid-template-columns:minmax(0,34ch) minmax(0,1fr);
  gap:clamp(28px,5vw,80px); align-items:start;
  margin-top:clamp(26px,3.4vw,48px);
}
@media (max-width:860px){ .pdaten{grid-template-columns:1fr} }

/* Links steht nur die Adresse und der Knopf - die Spalte ist mit 34ch darauf
   bemessen. Der Beschreibungstext stand hier einmal und passt hier nicht: ein
   Absatz von 300 Zeichen stapelt sich in dieser Breite zu elf Zeilen neben
   einer viel kuerzeren Eckdatenliste.
   Er steht deshalb als eigener Block ueber den Projektdaten, mit dem Mass von
   .immo__einstieg. Ganz von der Seite genommen war er eine Zeit lang - dann
   trugen die Projektseiten aber nur noch 13 bis 31 sichtbare Woerter. */
.pdaten__ort{
  margin:0; font-family:var(--serif); font-size:clamp(17px,1.4vw,21px);
  line-height:1.4; color:var(--ink);
}

/* ---- Bildstrecke auf der Projektseite -------------------------------------
   Das erste Motiv laeuft ueber die volle Breite und traegt den Abschnitt,
   die uebrigen stehen zu zweit. Kein Lichtkasten, kein Skript: die Bilder
   sind gross genug, um fuer sich zu stehen, und jede Zusatzmechanik waere
   eine weitere Stelle, die klemmen kann. */
.galerie{padding-block:clamp(40px,6vh,84px)}
.galerie__grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(12px,1.6vw,24px);
}
@media (max-width:700px){ .galerie__grid{grid-template-columns:1fr} }
.galerie__grid figure{margin:0}
/* height:auto ist hier nicht kosmetisch: die Attribute width/height im
   HTML setzen eine feste Hoehe, und eine feste Hoehe schlaegt aspect-ratio.
   Ohne diese Zeile standen die Bilder in ihrer vollen Originalhoehe. */
.galerie__grid img{
  display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover;
  background:var(--bg-3);
}
.galerie__grid figure:first-child{grid-column:1 / -1}
.galerie__grid figure:first-child img{aspect-ratio:16/9}
/* Hochformate bekommen einen hochformatigen Rahmen. Im 3:2-Kasten verloren
   sie rund die Haelfte der Hoehe - beim Hauseingang waeren damit genau die
   Boegen weg, derentwegen das Bild aufgenommen wurde.
   Die Nachbarkachel bleibt niedriger; in einer Bildstrecke liest sich das
   als Absicht, nicht als Fehler. */
.galerie__grid figure.hoch img{aspect-ratio:3/4}
.galerie__grid{align-items:start}

.pdaten__liste{margin:0}
.pdaten__liste > div{padding-block:clamp(11px,1.3vw,15px); border-bottom:1px solid var(--line)}
.pdaten__liste > div:first-child{padding-top:0}
.pdaten__liste dt{font-family:var(--serif); font-style:italic; font-size:14.5px; color:var(--muted)}
.pdaten__liste dd{margin:4px 0 0; font-size:1.02rem; font-variant-numeric:tabular-nums}

.immo__grid a:hover .k__t{color:var(--accent-tx)}
.immo__grid a:hover .k__p{color:var(--accent-tx)}

/* Lageplan. Bewusst ein gezeichneter Plan und keine eingebettete
   Google-Karte: die braucht Einwilligung und laedt von fremden Servern.
   Vor Livegang durch eine echte Karte ersetzen, siehe SEO-Immobiliensuche.md. */
.immo__karte{position:sticky; top:104px; background:var(--bg); border:1px solid var(--line-soft); padding:22px}
.immo__karte svg{display:block; width:100%; height:auto}
.immo__karte figcaption{font-size:13px; color:var(--muted); margin-top:16px; line-height:1.6}
.immo__karte .pin-t{font-family:var(--label); font-size:9px; letter-spacing:.14em; text-transform:uppercase; fill:var(--ink)}
.immo__karte .pin-s{font-family:var(--label); font-size:8px; letter-spacing:.12em; text-transform:uppercase; fill:var(--muted)}

.immo__leer{padding:28px 0; color:var(--muted)}
.immo__fuss{margin-top:clamp(24px,3vw,36px); padding-top:18px; border-top:1px solid var(--line-soft);
  display:flex; gap:26px; flex-wrap:wrap; align-items:center; color:var(--muted); font-size:13.5px}

@media (max-width:1080px){
  .immo__split{grid-template-columns:1fr}
  .immo__karte{position:static; order:-1}
}

.news{padding-block:clamp(60px,8vh,100px); position:relative}
.news__head{display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:clamp(26px,4vw,48px)}
.news__head h2{font-family:var(--serif); font-size:clamp(2rem,4vw,3.4rem); font-weight:400; letter-spacing:-.025em}
/* Bildkarten statt Textliste. Vorher lief eine Bildvorschau am Mauszeiger
   mit - huebsch am Schreibtisch, aber am Handy gibt es keinen Zeiger, und
   die Motive tauchten nur auf, wenn man daruebergefahren ist. Jetzt tragen
   die Karten ihr Bild selbst.

   Die erste Meldung nimmt die volle Breite, die beiden folgenden teilen
   sich die Zeile darunter. Damit ist ohne Datum ablesbar, was das Neueste
   ist. */
/* Drei gleich grosse Karten nebeneinander. Vorher lief die erste Meldung
   ueber die volle Breite im Format 21:9 - das ergab mit den beiden
   darunter einen Abschnitt von rund 1200px. Aktuelles ist ein Ausblick,
   kein Kapitel; drei gleichrangige Karten in einer Zeile genuegen. */
.news__list{list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,36px)}
.news__list a{display:block; transition:color .3s var(--ease)}
.news__bild{display:block; aspect-ratio:3/2; overflow:hidden; background:var(--bg-3); margin-bottom:16px}
.news__bild img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.news__list a:hover .news__bild img{transform:scale(1.04)}
/* Die Rubrik ist der einzige farbige Punkt der Karte, wie im Vorbild. */
.news__rubrik{display:block; font-family:var(--label); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent-tx); margin-bottom:10px}
.news__title{display:block; font-family:var(--serif); font-weight:400; letter-spacing:-.02em;
  font-size:clamp(1.1rem,1.6vw,1.35rem); line-height:1.2}
.news__proj{display:block; font-family:var(--label); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-top:9px}
.news__list a:hover .news__title{color:var(--accent-tx)}
@media (max-width:860px){ .news__list{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .news__list{grid-template-columns:1fr} }

/* ============================================================
   13. KONTAKT
   ============================================================ */
.contact{padding-block:clamp(90px,13vh,160px); background:var(--bg-2)}
.contact__grid{display:grid; grid-template-columns:1.25fr .85fr; gap:clamp(36px,6vw,110px); align-items:start}
.contact h2{font-family:var(--serif); font-size:clamp(2.2rem,4.6vw,3.8rem); font-weight:400; letter-spacing:-.03em; line-height:1.02; margin-block:14px 30px}
.form{display:grid; gap:20px}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.field{display:grid; gap:8px}
.field label{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.field input, .field textarea{
  background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:10px 0 12px; width:100%; transition:border-color .3s var(--ease);
}
.field textarea{resize:vertical; min-height:96px}
.field input::placeholder, .field textarea::placeholder{color:color-mix(in oklab, var(--muted) 78%, transparent)}
.field input:focus, .field textarea:focus{outline:0; border-bottom-color:var(--accent)}
.field .err{font-size:12.5px; color:var(--accent-tx); min-height:1em}
.field[data-invalid="true"] input, .field[data-invalid="true"] textarea{border-bottom-color:var(--accent)}
.check{display:flex; gap:12px; align-items:flex-start; font-size:14px; color:var(--muted); cursor:pointer}
.check input{width:16px; height:16px; margin-top:3px; accent-color:var(--accent); flex:0 0 auto}
.check a{color:var(--ink); border-bottom:1px solid var(--line)}
.form__foot{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:6px}
.form__state{font-size:13.5px; color:var(--muted)}
.form__state[data-tone="ok"]{color:var(--accent-tx)}
/* Fehler nicht ueber die Farbe allein melden - Rot ist hier die Hausfarbe
   und traegt keine Warnung. Das Gewicht macht den Unterschied sichtbar. */
.form__state[data-tone="err"]{color:var(--ink); font-weight:500}
.form__state[data-tone="err"] a{color:var(--accent-tx); border-bottom:1px solid currentColor}
.spin{display:inline-block; width:13px; height:13px; border:1px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; vertical-align:-2px; margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}
.contact__aside{display:grid; gap:26px; font-size:15px; line-height:1.8}
.contact__aside dt{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.contact__aside dd{margin:0}
.contact__aside a:hover{color:var(--accent-tx)}
.contact__map{aspect-ratio:16/11; background:var(--bg-3); overflow:hidden}
.contact__map img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); opacity:.92}
@media (max-width:900px){ .contact__grid{grid-template-columns:1fr} .form__row{grid-template-columns:1fr} }

/* ============================================================
   14. FOOTER
   ============================================================ */
.foot{padding-top:clamp(60px,8vh,100px); padding-bottom:26px}
.foot__mark{
  font-family:var(--serif); font-weight:400; line-height:.82; letter-spacing:-.04em;
  font-size:clamp(3rem,15.5vw,15rem); color:var(--accent);
  border-bottom:1px solid var(--line); padding-bottom:.06em;
}
.foot__cols{display:grid; grid-template-columns:repeat(4,1fr); gap:30px; padding-block:40px 34px}
.foot__cols h4{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:400; margin:0 0 14px}
.foot__cols ul{list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:14.5px}
.foot__cols a:hover{color:var(--accent-tx)}
.foot__legal{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; border-top:1px solid var(--line-soft); padding-top:22px; font-size:12.5px; color:var(--muted)}
.foot__legal nav{display:flex; gap:22px}
@media (max-width:760px){ .foot__cols{grid-template-columns:1fr 1fr} }

/* ============================================================
   15. REDUCED MOTION
   Alles ueber Stufe 3 faellt auf statisch zurueck.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .loader{display:none}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .haltung .w{color:var(--ink)}
  .news__peek{display:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   DETAILSEITE EINER WOHNUNG  (wohnung.html)

   Aufbau nach dem Vorbild crownd.at/wohnungen/ruban-apt-15/:
   vollflaechige Galerie, darunter zweispaltig Inhalt und eine
   klebende Preisspalte. Uebernommen sind die Reihenfolge der
   Abschnitte und die Aufteilung, nicht die Gestaltung.

   Ein Unterschied: crownd sperrt Grundriss, Expose und Tour
   hinter eine Mitgliedschaft. Hier steht alles offen, das ist
   fuer einen Bautraeger der direkt verkauft die passendere
   Haltung und nebenbei besser auffindbar.
   ============================================================ */
.wohnung{padding-top:84px}

/* Brotkrumen */
.krumen{padding-block:18px; font-family:var(--label); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.krumen ol{list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0}
.krumen li::after{content:"·"; margin-left:10px; color:var(--line)}
.krumen li:last-child::after{content:""}
.krumen a:hover{color:var(--ink)}
.krumen [aria-current]{color:var(--ink)}
/* Am Handy waren die Brotkrumen-Links nur 13px hoch. WCAG 2.5.8 verlangt
   24px in beide Richtungen, sonst trifft man mit dem Daumen daneben.
   Die Polsterung vergroessert nur das Tippziel, nicht die Zeile. */
.krumen a, .krumen [aria-current]{display:inline-block; padding-block:6px}
.krumen ol{align-items:center}

/* Galerie: ein grosses Motiv, daneben zwei kleine */
.wg{display:grid; grid-template-columns:2fr 1fr; gap:8px; margin-bottom:clamp(28px,4vw,56px)}
.wg__haupt{aspect-ratio:3/2; overflow:hidden; background:var(--bg-3)}
.wg__neben{display:grid; grid-template-rows:1fr 1fr; gap:8px}
.wg__neben > span{overflow:hidden; background:var(--bg-3); position:relative}
.wg img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.wg a:hover img{transform:scale(1.04)}
.wg__mehr{
  position:absolute; right:14px; bottom:14px; background:var(--bg); color:var(--ink);
  font-family:var(--label); font-size:10px; letter-spacing:.14em; text-transform:uppercase; padding:9px 14px;
}
@media (max-width:860px){ .wg{grid-template-columns:1fr} .wg__neben{grid-template-columns:1fr 1fr; grid-template-rows:none} }

/* Kopf */
.wh{margin-bottom:clamp(26px,3.4vw,44px)}
.wh__top{font-family:var(--label); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-tx)}
.wh h1{font-family:var(--serif); font-weight:400; letter-spacing:-.025em; line-height:1.06;
  font-size:clamp(1.9rem,3.6vw,3rem); margin-top:12px; max-width:22ch}

/* Zweispaltig: Inhalt und klebende Preisspalte */
.wsplit{display:grid; grid-template-columns:minmax(0,1.9fr) minmax(300px,1fr); gap:clamp(28px,4vw,72px); align-items:start}
@media (max-width:960px){ .wsplit{grid-template-columns:1fr} }

/* Eckdaten als Reihe */
.eck{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:20px;
  padding-block:24px; border-block:1px solid var(--line)}
.eck b{display:block; font-family:var(--serif); font-size:clamp(1.3rem,2.1vw,1.75rem); font-weight:400; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
/* 10px waren am Handy zu klein fuer Zeilen wie "SANIERT, NICHT NEU GEBAUT".
   11.5px mit etwas engerer Sperrung bleibt in der Anmutung gleich und
   ist lesbar. */
.eck span{display:block; font-family:var(--label); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:7px}

/* Abschnitte */
.wsec{padding-block:clamp(30px,4vw,52px); border-bottom:1px solid var(--line-soft)}
.wsec > h2{font-family:var(--label); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:20px}
.wsec p + p{margin-top:1em}
.wsec__text{max-width:64ch; color:var(--ink)}

/* Datentabelle */
.dt{width:100%; border-collapse:collapse}
.dt th,.dt td{text-align:left; padding:11px 0; border-bottom:1px solid var(--line-soft); font-weight:400; vertical-align:baseline}
.dt th{color:var(--muted); font-size:14px; width:48%}
.dt td{font-variant-numeric:tabular-nums}
.dt tr:last-child th,.dt tr:last-child td{border-bottom:0}
.dt .offen{color:var(--accent-tx)}

/* Projektkarte im Fliesstext */
.wproj{display:flex; gap:20px; align-items:center; padding:18px; background:var(--bg-2); border:1px solid var(--line-soft)}
.wproj img{width:104px; height:78px; object-fit:cover; flex:0 0 auto}
.wproj b{display:block; font-family:var(--serif); font-size:1.2rem; font-weight:400; letter-spacing:-.01em}
/* Gleiche Begruendung wie bei .haeuser__ort: Adresse und Einheitenzahl
   sind ein Satz, kein Etikett. */
.wproj span{display:block; font-family:var(--label); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:6px; line-height:1.5}

/* Klebende Preisspalte */
.wbox{position:sticky; top:104px; border:1px solid var(--line); background:var(--bg); padding:26px}
.wbox__top{font-family:var(--label); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.wbox__preis{font-family:var(--serif); font-size:clamp(1.8rem,3vw,2.4rem); font-weight:400; letter-spacing:-.025em; margin-top:10px; font-variant-numeric:tabular-nums}
.wbox__zusatz{font-size:13px; color:var(--muted); margin-top:8px; line-height:1.6}
.wbox__cta{display:flex; flex-direction:column; gap:10px; margin-top:22px}
.wbox__cta .btn{justify-content:center; text-align:center}
.wbox__mini{margin-top:22px; padding-top:18px; border-top:1px solid var(--line-soft); font-size:13px; color:var(--muted); line-height:1.75}
.wbox__mini a{color:var(--ink)}
.wbox__mini a:hover{color:var(--accent-tx)}

/* Weitere Einheiten im Haus */
.mehr{padding-block:clamp(50px,7vw,90px)}
.mehr__head{display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:26px}
.mehr__head h2{font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.4rem); font-weight:400; letter-spacing:-.025em}

/* ============================================================
   HANDY: TIPPZIELE UND KLEINSTSCHRIFT

   Am Schreibtisch faellt beides nicht auf, am Telefon schon. Gemessen
   bei 375px Breite: 24 von 45 sichtbaren Klickzielen waren niedriger
   als 44px, die Fusszeilenlinks nur 19px. Und die Ortszeile der
   Wohnungskarten stand auf 10,5px in Versalien mit weiter Laufweite,
   was am Telefon kaum noch zu lesen ist.

   44px ist das Mass, das sowohl Apple als auch die WCAG (2.5.8)
   als Mindestgroesse fuer Bedienelemente nennen.
   ============================================================ */
@media (max-width:860px){
  .foot__cols a,
  .foot__legal nav a,
  .immo__fuss a{display:inline-block; padding-block:12px}
  .foot__cols ul{margin-block:-12px}
  .immo__filter button{padding-block:14px; min-height:44px}
  .menu__haeuser a{padding-block:14px}
  .nav__toggle{padding-block:14px}
  .nav__logo{padding-block:7px}

  /* Kleinstschrift anheben, Laufweite dafuer zuruecknehmen.
     12px ist die Schwelle, ab der Lighthouse Text als lesbar wertet. */
  .k__o{font-size:12px; letter-spacing:.1em}
  .card__head span{font-size:12px}
  .immo__zaehler{font-size:12px}
  .nav__panel .o,
  .menu__haeuser i,
  .eyebrow{font-size:12px}
}