/* =========================================================
   Abschnitte aus dem Briefing vom Oktober 2026.

   Die Sprache ist an Architekturseiten angelehnt, nicht an
   Baukastenbausteine: Mikroschrift an den Satzspiegelkanten,
   laufende Nummern als gedrehte Marginalie, Überschriften bündig
   an der Blockkante, Angaben als Zeilen mit Haarlinien wie in einem
   Baubeschrieb, Kennzahlen als Bruch. Keine Pillen, keine
   Symbolkästchen, keine runden Bildecken.
   ========================================================= */

.bfg,.erf,.vario,.plus,.warum,.fam,.vb{position:relative}

/* Die gedrehte Randziffer ist weg. Sie trug 01 bis 05, 07 und 08,
   die 06 fehlte, und unter 1100 Pixeln war sie unsichtbar. Die
   Nummern stehen jetzt in den Teilern zwischen den Abschnitten,
   durchgehend und auf jedem Geraet. */

/* ---------- Überschrift an der Blockkante ----------
   Groß, eng gesetzt, und sie beginnt oben am Block statt in der Mitte
   einer Fläche zu schweben. */
.blockzeile{
  margin:0;max-width:16ch;
  font-size:clamp(1.5rem,2.6vw,2.375rem);line-height:1.08;letter-spacing:-.028em;
  text-wrap:balance;
}
.dark .blockzeile{color:var(--ondark)}

/* ---------- Kopfbereich ---------- */
/* Angabenzeile quer unter dem Menü: drei Angaben, an die Kanten gesetzt. */
.hero-band{
  position:absolute;left:0;right:0;top:calc(var(--nav-h) + clamp(0px,0.8vw,10px));z-index:6;
  display:flex;justify-content:space-between;gap:16px;
  padding:14px clamp(22px,4vw,54px);
  border-top:1px solid rgba(255,255,255,.22);
  border-bottom:1px solid rgba(255,255,255,.22);
  font-family:var(--fd);font-weight:600;font-size:0.6875rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.88);
}
.hero-band span:nth-child(2){display:none}

/* ---------- Kopfbereich, Satzbau ----------
   Alles mittig, und die drei Aussagen stehen als drei Angaben
   nebeneinander statt als ein Satz. Mit Haarlinien dazwischen liest man
   sie einzeln, und genau dafür sind sie gedacht. */
.hero-txt{
  align-items:center;justify-content:center;text-align:center;
  padding:var(--nav-h) clamp(22px,4vw,54px) clamp(76px,9vw,120px);
}
.hero h1{
  max-width:none;letter-spacing:-.045em;line-height:1;
  font-size:clamp(2.75rem,8vw,6.5rem);
}
/* Die drei Aussagen trennt der Punkt im Text. Er wird zur Haarlinie. */
.hero .sub{
  margin-top:clamp(18px,2.2vw,28px);max-width:none;text-align:center;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:0 clamp(16px,2.4vw,34px);
  font-family:var(--fd);font-weight:600;
  font-size:clamp(0.75rem,1vw,0.875rem);letter-spacing:.14em;
  text-transform:uppercase;
}
.hero .sub span{display:inline-flex;align-items:center}
.hero .sub span + span::before{
  content:"";width:1px;height:1em;margin-right:clamp(16px,2.4vw,34px);
  background:currentColor;opacity:.45;
}

.hero-fuss{
  margin-top:clamp(28px,3.6vw,48px);width:100%;
  display:flex;flex-direction:column;align-items:center;gap:0;
}
.hero .cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0}

.hero-fakten{
  position:absolute;left:0;right:0;bottom:0;z-index:5;margin:0;
  padding:14px clamp(22px,4vw,54px) calc(14px + env(safe-area-inset-bottom,0px));
  border-top:1px solid rgba(255,255,255,.22);text-align:center;
  font-size:0.8125rem;letter-spacing:.015em;color:rgba(255,255,255,.82);
}
/* ---------- Kopfbereich Ende ---------- */

/* Der Kopfbereich lief bisher nach unten in die Seitenfarbe aus. Das war
   richtig, solange der Titel in der Mitte stand. Jetzt steht er unten,
   also braucht er dort dunklen Grund statt einer hellen Blende. */
.hero::after{
  height:62%;
  background:linear-gradient(to top,rgba(8,10,14,.74) 0%,rgba(8,10,14,.28) 52%,transparent 100%);
}

/* Die Faktenleiste stiess ohne Abstand an den Kopfbereich. Sie bekommt
   denselben Abstand, den auch alle Bloecke untereinander halten. */
.fakten{margin-top:var(--gapy)}

/* ---------- Kennzahl als Bruch ----------
   Vier von acht, so wie eine Stückzahl auf einem Bauschild steht. */
.hero-stand,.bruch{
  margin:0;display:grid;grid-template-columns:auto auto;justify-content:start;
  align-items:baseline;column-gap:4px;
}
.hero-stand b,.bruch b{
  font-family:var(--fd);font-weight:var(--fdw);letter-spacing:-.05em;line-height:.84;
  font-size:clamp(2.25rem,3.4vw,3.25rem);font-variant-numeric:lining-nums tabular-nums;
}
.hero-stand i,.bruch i{
  font-style:normal;font-family:var(--fd);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(1.25rem,2.2vw,1.875rem);font-variant-numeric:lining-nums tabular-nums;
  opacity:.62;
}
.hero-stand span,.bruch span{
  grid-column:1 / -1;margin-top:10px;max-width:24ch;
  font-family:var(--fd);font-weight:600;font-size:0.6875rem;letter-spacing:.17em;
  text-transform:uppercase;
}
.hero-stand{color:#fff}
.hero-stand b{color:var(--gold-hell)}
.hero-stand span{color:rgba(255,255,255,.8);text-transform:none;letter-spacing:.01em;font-size:0.8125rem;font-weight:500;max-width:30ch}
/* Im Kopfbereich liegt ein Foto darunter, im Verkaufsblock Magenta. */
.bruch b{color:var(--ondark)}
.bruch i,.bruch span{color:var(--ondark2)}
.bruch span{white-space:nowrap}

/* ---------- Angabenzeilen ----------
   Nummer, Merkmal, Erklärung. Dazwischen nur eine Haarlinie. Beim
   Überfahren rückt die Zeile ein Stück ein, sonst passiert nichts. */
.zeilen{list-style:none;margin:clamp(34px,4vw,60px) 0 0;padding:0}
.zeile{
  display:grid;grid-template-columns:clamp(44px,5vw,74px) minmax(0,24ch) minmax(0,1fr);
  gap:6px clamp(16px,2.4vw,44px);align-items:baseline;
  padding:clamp(20px,2.2vw,30px) 0;
  border-top:1px solid var(--line);
  transition:padding-left .4s cubic-bezier(.2,.7,.2,1);
}
.zeile:last-child{border-bottom:1px solid var(--line)}
.zeile:hover{padding-left:12px}
.dark .zeile{border-top-color:var(--darkline)}
.dark .zeile:last-child{border-bottom-color:var(--darkline)}
.zeile-nr{
  font-family:var(--fd);font-weight:600;font-size:0.75rem;letter-spacing:.14em;
  color:var(--acc-txt);font-variant-numeric:lining-nums tabular-nums;
}
/* Auf Magenta steht alles in Beige, unterschieden wird ueber Groesse
   und Schnitt. Eine gedimmte Fassung ginge vom knappen Wert ab. */
.dark .zeile-nr{color:var(--ondark)}
.zeile-titel{
  margin:0;font-family:var(--fd);font-weight:var(--fdw);letter-spacing:-.022em;
  font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.25;text-wrap:balance;
}
.dark .zeile-titel{color:var(--ondark)}
.zeile-text{margin:0;font-size:0.96875rem;line-height:1.6;color:var(--ink2);max-width:52ch}
.dark .zeile-text{color:var(--ondark)}

/* ---------- Knöpfe ohne Pillenform ---------- */
.btn-linie{
  border:0;border-bottom:1px solid currentColor;border-radius:0;
  padding:9px 2px;color:#fff;
}
.btn-linie:hover{color:var(--gold-hell)}
.hero .btn-acc,.nav-knopf{background:var(--acc);color:var(--on-acc)}
.hero .btn-acc:hover,.nav-knopf:hover{background:var(--on-acc);color:var(--acc-txt)}
.nav-knopf{padding:11px 20px;font-size:0.75rem;letter-spacing:.06em}

/* ---------- Klappnavigation ----------
   Bis 920 Pixel stand das Menü auf display:none und war am Handy
   schlicht nicht erreichbar. Jetzt klappt es als Fläche auf. */
.nav-auf{
  display:none;width:44px;height:44px;padding:0;border:0;background:none;
  cursor:pointer;color:#fff;align-items:center;justify-content:center;
}
.nav-auf > span{display:block;width:22px;height:14px;position:relative}
.nav-auf i{
  position:absolute;left:0;right:0;height:1.5px;background:currentColor;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .2s;
}
.nav-auf i:first-child{top:0}
.nav-auf i:last-child{bottom:0}
.nav.menue-auf .nav-auf i:first-child{transform:translateY(6.25px) rotate(45deg)}
.nav.menue-auf .nav-auf i:last-child{transform:translateY(-6.25px) rotate(-45deg)}
.nav-feld{display:contents}
/* Nicht nur eine Transformation macht ein Element zum Bezugsrahmen fuer
   fixierte Kinder, sondern auch backdrop-filter und filter. Beim Scrollen
   bekommt die Leiste .nav--fest und damit backdrop-filter. Von da an
   loeste die Menueflaeche nicht mehr gegen das Fenster auf, sondern gegen
   die Leiste: sie war nur noch so hoch wie diese, und die Menuepunkte
   standen darunter frei auf der Seite. Solange das Menue offen ist,
   faellt deshalb alles drei weg. Zu sehen ist davon nichts, die
   Menueflaeche deckt die Leiste ohnehin ab. */
.nav.menue-auf{
  transform:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  filter:none !important;
}

@media (max-width:920px){
  .nav-auf{display:flex;position:relative;z-index:2}
  .nav-feld{
    display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,4vw,30px);
    position:fixed;inset:0;z-index:1;
    padding:calc(var(--nav-h) + 32px) clamp(22px,7vw,40px) calc(40px + env(safe-area-inset-bottom,0px));
    background:var(--dark);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .32s cubic-bezier(.2,.7,.2,1),transform .32s cubic-bezier(.2,.7,.2,1),visibility .32s;
  }
  .nav.menue-auf .nav-feld{opacity:1;visibility:visible;transform:none}
  /* Schlägt die allgemeine Regel aus der main.css, die das Menü hier
     ausblendet. */
  .nav .navl{
    display:flex;flex-direction:column;gap:clamp(14px,3.4vw,22px);
    font-size:clamp(1.375rem,6vw,2rem);
  }
  .nav .navl a{
    color:var(--ondark);opacity:1;border:0;padding:0;
    font-family:var(--fd);font-weight:var(--fdw);letter-spacing:-.025em;
  }
  .nav .navl a:hover,.nav .navl a:focus-visible{color:#fff}
  /* Die Klappflaeche steht in Magenta, dort kann der Knopf nicht
     wieder Magenta sein. Beige mit Magenta darauf, wie ueberall
     auf einer Magentaflaeche. */
  .nav-feld .nav-knopf{
    align-self:flex-start;margin-top:clamp(14px,3vw,24px);
    background:var(--on-acc);color:var(--acc-txt);
    padding:14px 24px;font-size:0.875rem;
  }
  .nav-feld .nav-knopf:hover{background:#fff;color:var(--acc-txt)}
  body.menue-auf{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){
  .nav-feld,.nav-auf i{transition-duration:.01ms}
}

/* ---------- Baufortschritt ---------- */
.bfg-sub{margin:18px 0 0;max-width:48ch;color:var(--ink2);font-size:1.0625rem}

.zeitleiste{
  list-style:none;margin:clamp(34px,4.4vw,56px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
}
.zl{position:relative;padding:28px 24px 0 0}
.zl::before{content:"";position:absolute;top:5px;left:0;right:0;height:1px;background:var(--line)}
.zl--fertig::before,.zl--laufend::before{background:var(--gold)}
.zl:last-child::before{right:auto;width:14px}
.zl-punkt{position:absolute;top:0;left:0;width:11px;height:11px;border:1px solid var(--line);background:var(--card)}
.zl--fertig .zl-punkt{border-color:var(--gold);background:var(--gold)}
.zl--laufend .zl-punkt{border-color:var(--gold)}
.zl--laufend .zl-punkt::after{content:"";position:absolute;inset:2px;background:var(--gold)}
.zl-titel{
  display:block;font-family:var(--fd);font-weight:var(--fdw);letter-spacing:-.022em;
  font-size:clamp(1rem,1.2vw,1.1875rem);line-height:1.25;
}
.zl-zusatz{
  display:block;margin-top:8px;font-family:var(--fd);font-weight:600;
  font-size:0.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--acc-txt);
}
.zl--offen .zl-titel{color:var(--ink2)}
.zl--offen .zl-zusatz{color:var(--ink2)}

/* Das erste Bild läuft bis an die Kanten des Blocks, die übrigen stehen
   versetzt darunter wie Aufnahmen auf einem Kontaktbogen. */
/* Eine Galerie, keine zwei versetzten Spalten mehr: alle Bilder gleich
   gross nebeneinander, abgerundet, und sie oeffnen sich in der
   Grossansicht. */
.bfg-bilder{
  list-style:none;margin:clamp(24px,2.6vw,36px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr));
  gap:clamp(10px,1vw,14px);
}
.bfg-bild figure{
  margin:0;position:relative;border-radius:14px;overflow:hidden;
  cursor:pointer;background:var(--tief);
}
.bfg-bild img{
  display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
@media (hover:hover){
  .bfg-bild figure:hover img{transform:scale(1.05)}
}
.bfg-bild figure:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
/* Die Steuerung gehoert zur Bahn am Handy. Am Rechner steht sie nicht,
   dort sind ohnehin alle Bilder nebeneinander zu sehen. */
.bfg-steuer{display:none}


/* Die Beschriftung liegt im Bild. Darunter kostete sie je Foto eine
   eigene Zeile samt Trennlinie. */
/* Weiss auf dem Verlauf. Vorher stand hier var(--ink), also dunkel
   auf dunkel, und die Beschriftung war nicht zu lesen. */
.bfg-bild figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:grid;gap:3px;
  padding:34px 12px 11px;color:#fff;
  background:linear-gradient(to top,rgba(20,14,10,.88),rgba(20,14,10,.3) 55%,rgba(20,14,10,0));
}
/* Die laufende Nummer sagt nichts und faellt weg. */
.bfg-nr{display:none}
.bfg-datum{
  order:-1;font-family:var(--fd);font-weight:600;font-size:0.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.82);
}
/* Auf zwei Zeilen begrenzt, sonst ueberdeckt ein langer Satz das
   halbe Foto. Der ganze Text steht in der Grossansicht. */
.bfg-text{
  font-size:0.8125rem;line-height:1.35;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}

/* ---------- Erfahrung ---------- */
/* Oben ausgerichtet und enger. Mittig stand unter der kurzen
   Ueberschrift links eine grosse leere Flaeche. */
.erf{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(18px,2.4vw,44px);align-items:start;
}
/* Logo und Ueberschrift untereinander in derselben Spalte, so wie der
   Hersteller Logo und Ueberschrift nebeneinander hat. Die Wortmarke
   ist breit und kein Quadrat, deshalb eine breite Kachel. */
.erf-kopf{display:grid;gap:clamp(14px,1.8vw,24px);justify-items:start}
/* Die Ueberschrift in der Hausschrift. Sie steht direkt unter der
   Wortmarke, und das spitze A kommt in beiden vor: man sieht ohne
   Bildunterschrift, dass hier die NAMAB spricht. Gewicht 400, weil es
   nur diesen einen Schnitt gibt. */
.erf-kopf h2{font-family:var(--fbero);font-weight:400;letter-spacing:-.005em}
.erf-logo{
  display:block;background:var(--on-acc);border-radius:14px;
  padding:clamp(10px,1.2vw,15px) clamp(14px,1.6vw,20px);
  /* Auf Beige gelten die Hausfarben: Schrift Aubergine, Giebel Magenta. */
  color:#321638;--namab-giebel:#BC238C;
}
.erf-logo svg{display:block;width:auto;height:clamp(22px,2.4vw,34px)}
.erf-lead{margin:0;max-width:52ch;font-size:clamp(1rem,1.1vw,1.125rem);line-height:1.6;color:var(--ink2)}
/* Die Unternehmenskarte steht in Magenta. Dort traegt Beige, und zwar
   ohne Abstufung: 4,30 vertraegt keine. */
.dark .erf-lead,
.dark .erf-namab{color:var(--ondark)}
.dark .erf-lead em{color:var(--ondark);font-weight:400}
.dark .kette{border-top-color:var(--darkline)}
.dark .kette-schritt{border-bottom-color:var(--darkline)}
.dark .kette-nr{color:var(--ondark)}
/* Der Firmenname selbst steht in der Hausschrift. Hervorgehoben wird er
   dadurch genug, fetter Satz wuerde nur gerechnet. */
.erf-lead em{font-style:normal;color:var(--ink);font-weight:400;font-family:var(--fbero)}

/* Die Wertschöpfungskette läuft über die ganze Breite der Karte und
   gibt dem Bauträger das Gewicht, das er gegenüber dem Hersteller
   haben soll. Acht Schritte, nur Haarlinien dazwischen. */
.kette{
  grid-column:1 / -1;list-style:none;margin:clamp(20px,2.2vw,30px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:0;
  border-top:1px solid var(--line);
}
.kette-schritt{
  padding:11px 14px 11px 0;border-bottom:1px solid var(--line);min-width:0;
  display:flex;align-items:baseline;gap:9px;
}
/* Die Ziffern der Kette ebenfalls in der Hausschrift, das zieht die
   Zeile optisch zur Ueberschrift. Die Woerter daneben bleiben in der
   Lesefassung, acht Begriffe in einer Auszeichnungsschrift waeren zu
   viel des Guten. */
.kette-nr{
  font-family:var(--fbero);font-weight:400;font-size:0.75rem;letter-spacing:.1em;
  color:var(--acc-txt);font-variant-numeric:lining-nums tabular-nums;flex:none;
}
.kette-wort{
  font-family:var(--fd);font-weight:500;font-size:clamp(0.9375rem,1.2vw,1.0625rem);
  letter-spacing:-.012em;line-height:1.25;
}
/* Wer der Vertragspartner ist, gehört ins Kleingedruckte, nicht in
   die Überschrift. Aber es muss dastehen. */
.erf-namab{
  grid-column:1 / -1;margin:clamp(22px,2.4vw,32px) 0 0;max-width:62ch;
  font-size:0.8125rem;line-height:1.6;color:var(--ink2);
}

/* ---------- Der Hersteller ----------
   Wenig Inhalt, deshalb kein Raster ueber die volle Hoehe. Logo und
   Ueberschrift stehen nebeneinander, darunter die Eckdaten als Reihe,
   darunter der Hinweis. Vorher stand die Ueberschrift allein in einer
   von zwei Spalten, und weil der Fliesstext daneben leer ist, blieb die
   halbe Karte leer. */
.vario{display:grid;gap:clamp(20px,2.6vw,36px)}
.vario-kopf{
  display:flex;align-items:center;gap:clamp(18px,2.6vw,38px);flex-wrap:wrap;
}
/* Gross genug, um als Marke zu wirken. Mit 72 Pixeln sah es aus wie ein
   vergessenes Symbol. */
.vario-logo{
  display:block;width:clamp(84px,8vw,116px);height:auto;aspect-ratio:1;
  object-fit:contain;flex:none;
  background:var(--on-acc);border-radius:16px;padding:10px;margin:0;
}
.vario-kopf-txt{min-width:0;flex:1 1 20rem}
.vario-kopf .blockzeile{max-width:22ch}
.vario-kopf .lead{margin-top:12px;max-width:54ch}

/* Vier Angaben nebeneinander, Beschriftung ueber dem Wert. Nebeneinander
   brauchte der Wert zu wenig Platz und brach auf drei Zeilen um. */
.vario-daten{
  margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));
  gap:clamp(14px,1.8vw,26px) clamp(20px,2.6vw,44px);
  padding-top:clamp(16px,2vw,26px);border-top:1px solid var(--darkline);
}
.vario-zeile{display:grid;gap:5px;min-width:0}
.vario-zeile dt{
  font-family:var(--fd);font-weight:600;font-size:0.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ondark);opacity:.72;
}
.vario-zeile dd{margin:0;font-size:0.9375rem;line-height:1.4;color:var(--ondark)}
/* Der Herstellername fuehrt zum Hersteller, genauso wie das Logo. */
.vario-zeile dd a{
  display:inline-flex;align-items:center;gap:6px;color:inherit;
  text-decoration:underline;text-decoration-color:rgba(233,225,211,.34);
  text-underline-offset:3px;transition:text-decoration-color .2s;
}
.vario-zeile dd a svg{width:11px;height:11px;flex:none;opacity:.7}
.vario-zeile dd a:hover,.vario-zeile dd a:focus-visible{text-decoration-color:currentColor}
/* Das Logo ist ebenfalls anklickbar. */
.vario-logo-link{display:block;flex:none;border-radius:16px;transition:transform .25s}
@media (hover:hover){.vario-logo-link:hover{transform:translateY(-2px)}}
.vario-logo-link .vario-logo{margin:0}

.vario-fuss{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));
  gap:clamp(16px,2vw,32px);
  padding-top:clamp(16px,2vw,26px);border-top:1px solid var(--darkline);
}
.vario-punkt h3{
  margin:0 0 7px;font-family:var(--fd);font-weight:600;
  font-size:0.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ondark);opacity:.72;
}
.vario-punkt p{margin:0;font-size:0.9375rem;line-height:1.55;color:var(--ondark);max-width:52ch}
.vario-bild{margin:0}
.vario-bild img{width:100%;height:auto;border-radius:12px;display:block}
/* ---------- Hersteller Ende ---------- */



/* Eckdaten wie in einem Datenblatt: Begriff links, Wert rechts,
   dazwischen nur eine Haarlinie. Keine Kästchen, keine Pillen. */

/* ---------- Ausstattungsliste beim Preis ----------
   Eine Aufzählung in drei Spalten, getrennt durch Haarlinien. */
/* Mehr Luft und je Angabe eine Zeile mit Haarlinie. Als enge
   Kachelreihe liefen die Angaben vorher ineinander. */
.pkarten{
  list-style:none;margin:clamp(34px,4vw,56px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));
  gap:0 clamp(24px,3.4vw,56px);border-top:1px solid var(--line);
}
.pkarte{
  padding:15px 0;border-bottom:1px solid var(--line);
  font-family:var(--fd);font-weight:500;font-size:clamp(0.9375rem,1.2vw,1.0625rem);
  line-height:1.35;letter-spacing:-.012em;
}

/* ---------- Baurecht-Anreißer ---------- */
.preise-br{margin-top:clamp(24px,2.6vw,34px);padding-top:24px;border-top:1px solid var(--line)}
.preise-br h3{
  margin:0;font-family:var(--fd);font-weight:var(--fdw);letter-spacing:-.028em;
  font-size:clamp(1.125rem,1.4vw,1.375rem);line-height:1.2;
}
.preise-br p{margin:10px 0 0;font-size:0.96875rem;line-height:1.55;color:var(--ink2);max-width:46ch}

/* ---------- Einheiten: Zins und Knopf ---------- */
.einheit .e-zins{font-size:1rem;color:var(--ink2)}
.einheit .e-status{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.e-knopf{
  display:inline-block;padding:7px 14px;border-radius:2px;text-decoration:none;white-space:nowrap;
  font-family:var(--fd);font-weight:600;font-size:0.6875rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line);color:var(--ink2);transition:background .2s,border-color .2s,color .2s;
}
.e-knopf:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.einheit--verkauft .e-knopf{opacity:.6}
.einheit--verkauft .e-knopf:hover{opacity:1}

/* ---------- Familie ---------- */
.fam-bild{margin:0}
.fam-bild img{width:100%;height:auto;border-radius:16px;display:block}

/* ---------- Verkaufsblock vor dem Fuß ---------- */
.vb{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(26px,3vw,60px) clamp(30px,5vw,90px);align-items:end;
  overflow:hidden;isolation:isolate;
}
.vb-media{position:absolute;inset:0;z-index:-2}
.vb-media img{width:100%;height:100%;object-fit:cover;display:block}
.vb::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(104deg,rgba(26,11,29,.95) 0%,rgba(26,11,29,.86) 42%,rgba(26,11,29,.54) 100%);
}
.vb-h{
  font-size:clamp(1.5rem,2.6vw,2.375rem);line-height:1.08;letter-spacing:-.028em;margin:0;
  color:var(--ondark);max-width:14ch;text-wrap:balance;
}
.vb-h2{
  margin:16px 0 0;max-width:20ch;
  font-family:var(--fd);font-weight:var(--fdw);letter-spacing:-.028em;
  font-size:clamp(1.0625rem,1.4vw,1.3125rem);line-height:1.3;color:var(--ondark);
}
.vb-fuss{
  grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:20px clamp(24px,4vw,60px);
  padding-top:clamp(22px,2.4vw,32px);border-top:1px solid var(--darkline);
}
.vb-fakten{margin:0;max-width:52ch;font-size:0.84375rem;line-height:1.65;color:var(--ondark2)}
.vb-knopf{margin:0}

/* ---------- Kontakt ---------- */
/* Die Karten duerfen schrumpfen. Ohne min-width:0 sprengt eine lange
   E-Mail-Adresse das Raster, und rechts wird abgeschnitten. */
/* Zwei je Reihe, siehe main.css. Hier stand eine zweite Regel, die
   die erste ueberschrieben hat. */
.people{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){
  .people{grid-template-columns:1fr}
}
.person{min-width:0}
/* Die Kontaktdaten stehen in einer Klappflaeche. Drei Karten mit je
   drei Schaltflaechen waren am Handy eine sehr lange Strecke. Echtes
   details, damit es ohne Skript und mit Tastatur funktioniert. */
.ct-klapp{margin-top:clamp(22px,2.4vw,30px)}
.ct-klapp summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  cursor:pointer;list-style:none;padding:13px 16px;border-radius:2px;
  border:1px solid rgba(233,225,211,.34);
  font-family:var(--fd);font-weight:600;font-size:0.8125rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ondark);
  transition:background .22s,border-color .22s;
}
.ct-klapp summary::-webkit-details-marker{display:none}
.ct-klapp summary:hover{background:rgba(233,225,211,.12);border-color:var(--ondark)}
.ct-klapp summary:focus-visible{outline:2px solid var(--ondark);outline-offset:3px}
.ct-klapp summary svg{width:12px;height:8px;flex:none;transition:transform .25s}
.ct-klapp[open] summary svg{transform:rotate(180deg)}
.ct-klapp[open] summary{margin-bottom:7px}
@media (prefers-reduced-motion:reduce){.ct-klapp summary svg{transition:none}}
/* Am Rechner schwebt die aufgeklappte Flaeche unter dem Schalter, statt
   in der Karte Platz zu nehmen. Zwei Karten nebeneinander teilen sich
   die Rasterzeile: waechst eine, waechst die Zeile, und alles darunter
   rutscht nach. Absolut gesetzt bleibt die Karte so gross wie
   zugeklappt, und es bewegt sich nichts. */
@media (min-width:761px){
  .ct-klapp{position:relative}
  .ct-klapp[open] > summary{margin-bottom:0}
  .ct-klapp[open] > .ct{
    position:absolute;z-index:2;top:calc(100% + 7px);left:0;right:0;
    background:var(--tief);border:1px solid rgba(233,225,211,.34);
    border-radius:2px;padding:7px;
    box-shadow:0 26px 56px rgba(16,6,20,.55);
  }
  /* Karten ohne eigene Ebene werden in der Reihenfolge des Quelltextes
     gemalt. Ohne das verschwaende die Flaeche der ersten Person hinter
     der dritten. */
  .person--offen{position:relative;z-index:3}
  /* .card beschneidet, damit nichts ueber die runden Ecken laeuft. Die
     schwebende Flaeche muss aber hinaus duerfen, sonst verliert die
     unterste Karte ihr unteres Drittel. Nur solange etwas offen ist, und
     nur hier: die Kinder dieses Abschnitts laufen nirgends ueber, und der
     Hintergrund bleibt an den Ecken beschnitten, das macht border-radius
     und nicht overflow. */
  .reden--offen{overflow:visible;position:relative;z-index:2}
}
/* Dasselbe ohne Skript, fuer Browser die :has() koennen. */
@media (min-width:761px){
  .reden:has(.ct-klapp[open]){overflow:visible;position:relative;z-index:2}
}
.ct{display:flex;flex-direction:column;gap:7px;min-width:0}
.ct-knopf{
  display:block;padding:12px 16px;border-radius:2px;text-decoration:none;min-width:0;
  border:1px solid rgba(233,225,211,.34);color:var(--ondark);
  transition:background .22s,border-color .22s,color .22s;
}
/* Auf Geraeten ohne Zeigegeraet bleibt ein Hover sonst nach dem Tippen
   kleben. */
@media (hover:hover){
  .ct-knopf:hover{background:rgba(233,225,211,.12);border-color:var(--ondark)}
  .ct-knopf--acc:hover{background:#fff;border-color:#fff;color:var(--acc-txt)}
}
/* Ein Fokusrahmen fehlte ganz. Auf dem dunklen Grund trug keine der
   vorhandenen Farben, Gold kommt dort auf 8,8. */
.ct-knopf:focus-visible{outline:2px solid var(--ondark);outline-offset:3px}
.ct-was{
  display:block;font-family:var(--fd);font-weight:600;font-size:0.65625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ondark2);
}
.ct-wert{display:block;margin-top:5px;font-size:0.96875rem;overflow-wrap:anywhere}
/* Der Hauptknopf dreht die Flaechen um: Beige mit Magenta darauf,
   5,25. Er ist damit das Hellste auf der ganzen Seite. */
.ct-knopf--acc{background:var(--on-acc);border-color:var(--on-acc);color:var(--acc-txt)}
/* Die Beschriftung darf nicht blasser werden als der Wert darunter. */
.ct-knopf--acc .ct-was{color:var(--acc-txt)}
.ct-knopf--acc:hover .ct-was{color:var(--acc-txt)}
/* ---------- Schmale Fenster ---------- */
@media (max-width:1100px){
  .erf{grid-template-columns:1fr;gap:20px}
  .kette{grid-template-columns:repeat(2,1fr)}
  .pkarten{grid-template-columns:repeat(2,1fr)}
}
/* Nur im Zweispalter: die Leiste steht in zwei Reihen, und am Ende der
   ersten Reihe wird die Linie gekappt. Am Handy ist die Leiste
   einspaltig und die Linie senkrecht, dort waere aus der Breite ein
   dicker Balken geworden. */
@media (min-width:761px) and (max-width:980px){
  .zeitleiste{grid-template-columns:1fr 1fr;gap:26px 0}
  .zl:nth-child(2)::before{right:auto;width:16px}
}

@media (max-width:980px){
  .zeile{grid-template-columns:clamp(38px,6vw,56px) minmax(0,1fr)}
  .zeile-text{grid-column:2}
  .vb{grid-template-columns:1fr;align-items:start}
  /* Eine Bahn zum Wischen und Durchdruecken statt sieben Bilder
     untereinander. Untereinander war das am Handy eine lange Strecke,
     durch die man nur scrollen konnte. */
  .bfg-steuer{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    margin-top:clamp(20px,2.6vw,30px);
  }
  .bfg-zaehler{
    font-family:var(--fd);font-weight:600;font-size:0.6875rem;letter-spacing:.16em;
    color:var(--ink2);font-variant-numeric:lining-nums tabular-nums;
  }
  .bfg-zaehler b{color:var(--acc-txt);font-weight:600}
  .bfg-knoepfe{display:flex;gap:8px}
  .bfg-knopf{
    width:42px;height:42px;border-radius:50%;flex:none;
    border:1px solid var(--ink2);background:transparent;color:var(--ink);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:background .2s,border-color .2s,color .2s,opacity .2s;
  }
  .bfg-knopf svg{width:16px;height:16px}
  .bfg-knopf[disabled]{opacity:.3;cursor:default}
  .bfg-knopf:not([disabled]):active{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
  .bfg-knopf:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

  .bfg-bilder{
    display:flex;gap:10px;margin-top:12px;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    /* Bis an die Kartenkanten, damit das naechste Bild hereinschaut. */
    margin-inline:calc(-1 * clamp(18px,5vw,22px));
    padding-inline:clamp(18px,5vw,22px);
    scroll-padding-inline:clamp(18px,5vw,22px);
  }
  .bfg-bilder::-webkit-scrollbar{display:none}
  /* Am Handy ein Bild mit Vorschau auf das naechste, auf dem Tablet
     zwei. 84 Prozent waeren dort ein sehr grosses Bild. */
  .bfg-bild{flex:0 0 min(84%,420px);scroll-snap-align:start}
  /* In einer waagerechten Bahn darf nichts beschnitten bleiben: die
     Einblendung haengt an der senkrechten Lage, und die ist fuer alle
     Bilder dieselbe. */
  .js .bfg-bild.rvi{clip-path:none}
  .js .bfg-bild.rvi img{transform:none}
}
/* ---------- Am Handy weniger auf einmal ----------
   Bis zum Verkauf war die Strecke zu lang. Das Lagebild und der
   Abschlussblock wiederholen, was weiter oben schon steht, und
   fallen deshalb am Handy weg. Beides bleibt am Rechner. */
@media (max-width:760px){
  .banner,
  .vb{display:none}
}

@media (max-width:760px){
  .hero-band{
    top:auto;bottom:0;border-bottom:0;flex-direction:column;gap:5px;
    padding:12px clamp(18px,5vw,22px) calc(12px + env(safe-area-inset-bottom,0px));
    font-size:0.625rem;letter-spacing:.16em;text-align:center;align-items:center;
  }
  .hero-band span:nth-child(2){display:block}
  .hero-txt{
    padding:calc(var(--nav-h) + 48px) clamp(18px,5vw,22px) 108px;
    justify-content:center;
  }
  /* Untereinander, und der Trennstrich legt sich waagerecht dazwischen.
     Senkrecht ging nicht, er stand nach einem Umbruch am Zeilenanfang.
     Ganz ohne Strich und mit sieben Pixeln Abstand lasen sich die drei
     Aussagen aber als ein Block, und genau das sollen sie nicht sein. */
  .hero .sub{flex-direction:column;align-items:center;gap:0}
  .hero .sub span{position:relative;padding:9px 0;justify-content:center}
  .hero .sub span + span::before{
    content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:34px;height:1px;margin:0;background:currentColor;opacity:.38;
  }
  /* Die Faktenzeile lag auf der Angabenzeile, beide sitzen unten. Sie
     wiederholt ohnehin den Termin, der dort schon steht. */
  .hero-fakten{display:none}
  .hero h1{font-size:clamp(2rem,8.8vw,2.875rem)}
  .hero .sub{margin-top:14px;font-size:0.96875rem}
  .hero-fuss{flex-direction:column-reverse;align-items:stretch;gap:18px}
  .hero .cta{flex-direction:column;align-items:stretch}
  .hero .cta .btn{justify-content:center}
  .hero-stand b{font-size:2.5rem}
  .hero-fakten{font-size:0.78125rem}

  .zeitleiste{grid-template-columns:1fr;gap:0}
  .zl{padding:0 0 24px 26px}
  .zl::before{top:0;bottom:0;left:5px;right:auto;width:1px;height:auto}
  .zl:last-child::before{bottom:auto;height:14px;width:1px}
  .zl-punkt{top:0;left:0}

  .pkarten{grid-template-columns:1fr}
  .bfg-bild figcaption{padding:20px 9px 8px;font-size:0.6875rem}
  /* Datum wieder ueber den Text. Daneben gestellt war es gedacht fuer die
     kleinen Bilder im alten Raster; in der Bahn sind die Bilder gross, und
     danebengestellt lag das Datum ueber der Beschriftung. */
  .bfg-datum{grid-column:1;justify-self:start}
  .vb-fuss{flex-direction:column;align-items:stretch}
  .vb-knopf{width:100%;justify-content:center}
}

/* ---------- Objektliste, Aufklapper ----------
   Die Zeile zeigt nur, was man zum Vergleichen braucht. Adresse,
   Geschoss und die Unterlagen liegen darunter. Echtes details, damit es
   ohne Skript und mit Tastatur funktioniert. */
.einheit-klapp > summary{
  cursor:pointer;list-style:none;
  transition:background .2s;
}
.einheit-klapp > summary::-webkit-details-marker{display:none}
.einheit-klapp > summary:hover{background:var(--tint)}
.einheit-klapp > summary:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.e-auf{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-family:var(--fd);font-weight:600;font-size:0.75rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--acc-txt);
}
.e-auf svg{width:11px;height:7px;flex:none;transition:transform .25s}
.einheit-klapp[open] .e-auf svg{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.e-auf svg{transition:none}}

.einheit-mehr{
  display:grid;gap:clamp(16px,2vw,24px);
  padding:0 clamp(14px,1.8vw,24px) clamp(18px,2vw,26px);
}
/* Drei Spalten statt fuenf, Beschriftung ueber dem Wert. Nebeneinander
   und fuenfspaltig brachen die Werte auf drei Zeilen um. */
/* Elf Paare ohne Linien lesen sich als Wolke. Je eine Haarlinie
   unter jedem Paar ordnet sie zu Zeilen und Spalten. */
.e-daten{
  margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr));
  gap:0 clamp(20px,2.6vw,44px);
  border-top:1px solid var(--line);
}
.e-daten > div{
  display:grid;gap:4px;min-width:0;align-content:start;
  padding:11px 0 13px;border-bottom:1px solid var(--line);
}
.e-daten dt{
  font-family:var(--fd);font-weight:600;font-size:0.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink2);min-width:0;
}
.e-daten dd{margin:0;font-size:0.9375rem;line-height:1.4}

/* ---------- Objektliste Ende ---------- */

/* Der Teil nach der Wertschoepfungskette braucht keine eigene Linie:
   die Kette endet schon mit einer. Zwei Linien dicht uebereinander
   lesen sich als Fehler. */
.erf + .teil{border-top:0;padding-top:0;margin-top:clamp(20px,2.4vw,34px)}

.einheit-docs{padding-top:clamp(12px,1.4vw,18px)}