/* Letternhof: Gestaltung des Themes. Farben und Schriften kommen aus theme.json. */

:root {
  /* Farben und Schriften kommen aus theme.json; die Werte dahinter gelten, falls die Vorgaben fehlen. */
  --weiss: var(--wp--preset--color--weiss, #ffffff);
  --schwarz: var(--wp--preset--color--schwarz, #111111);
  --grau: var(--wp--preset--color--grau, #6b6b6b);
  --grau-hell: var(--wp--preset--color--grau-hell, #a3a3a3);
  --nebel: var(--wp--preset--color--nebel, #c9c9c9);
  --haar: rgb(17 17 17 / .12);
  --haar-hell: rgb(255 255 255 / .16);
  --serif: var(--wp--preset--font-family--caslon, "Libre Caslon Display", Georgia, serif);
  --sans: var(--wp--preset--font-family--hanken, "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif);
  --rand: clamp(20px, 5vw, 80px);
  --kopf: 72px;
  --aus: cubic-bezier(.22, .61, .36, 1);
  --fokus: var(--schwarz);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.statisch * { transition: none !important; animation: none !important; }

html { background: var(--weiss); color: var(--schwarz); scroll-padding-top: var(--kopf); }
body { margin: 0; font: 400 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; hyphens: auto; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; hyphens: manual; margin: 0; }
p { text-wrap: pretty; }
a { color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--schwarz); color: var(--weiss); }
.dunkel ::selection { background: var(--weiss); color: var(--schwarz); }
/* Fokusrahmen in der Farbe, die sich vom Hintergrund des Abschnitts abhebt */
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 4px; border-radius: 2px; }

.sprung { position: absolute; left: -9999px; top: 12px; z-index: 100; background: var(--schwarz); color: var(--weiss); padding: 10px 16px; text-decoration: none; }
.sprung:focus { left: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.label { font: 500 12px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--grau); margin: 0; }
.dunkel { background: var(--schwarz); color: var(--weiss); --fokus: var(--weiss); }
.dunkel .label { color: var(--grau-hell); }

/* Knopf: Pille mit Kreis; beim Überfahren tauschen die Farben, der Pfeil läuft einmal durch den Kreis */
.knopf {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 7px 7px 7px 22px; border-radius: 999px; border: 1px solid var(--schwarz);
  background: var(--schwarz); color: var(--weiss);
  font: 500 14px/1 var(--sans); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: background-color .35s var(--aus), color .35s var(--aus);
}
.knopf-kreis {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--weiss); color: var(--schwarz); overflow: hidden;
  transition: background-color .35s var(--aus), color .35s var(--aus);
}
.pfeil { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke-width .3s var(--aus); }
:is(.knopf, .rund):is(:hover, :focus-visible) .pfeil { stroke-width: 2.2; animation: durch .6s both; }
:is(.knopf, .rund):is(:hover, :focus-visible) .pfeil.unten { animation-name: durch-unten; }
@keyframes durch {
  0% { translate: 0 0; animation-timing-function: cubic-bezier(.55, 0, .75, .2); }
  45% { translate: 170% 0; }
  45.1% { translate: -170% 0; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  100% { translate: 0 0; }
}
@keyframes durch-unten {
  0% { translate: 0 0; animation-timing-function: cubic-bezier(.55, 0, .75, .2); }
  45% { translate: 0 170%; }
  45.1% { translate: 0 -170%; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  100% { translate: 0 0; }
}
.knopf:is(:hover, :focus-visible) { background: var(--weiss); color: var(--schwarz); }
.knopf:is(:hover, :focus-visible) .knopf-kreis { background: var(--schwarz); color: var(--weiss); }
.knopf.hell { background: var(--weiss); color: var(--schwarz); border-color: var(--weiss); }
.knopf.hell .knopf-kreis { background: var(--schwarz); color: var(--weiss); }
.knopf.hell:is(:hover, :focus-visible) { background: transparent; color: var(--weiss); }
.knopf.hell:is(:hover, :focus-visible) .knopf-kreis { background: var(--weiss); color: var(--schwarz); }

/* Kopfleiste: verschwindet beim Runterscrollen, kehrt beim Hochscrollen zurück, kippt über dunklen Abschnitten */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 30; height: var(--kopf);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-inline: var(--rand);
  background: rgb(255 255 255 / .96); color: var(--schwarz);
  transition: transform .5s var(--aus), background-color .4s var(--aus), color .4s var(--aus);
}
.kopf.weg { transform: translateY(-100%); }
.kopf:focus-within { transform: none; }
.admin-bar .kopf { top: var(--wp-admin--admin-bar--height, 32px); }
.kopf.auf-dunkel { background: rgb(17 17 17 / .96); color: var(--weiss); --fokus: var(--weiss); }
.kopf.auf-dunkel .knopf { background: var(--weiss); color: var(--schwarz); border-color: var(--weiss); }
.kopf.auf-dunkel .knopf .knopf-kreis { background: var(--schwarz); color: var(--weiss); }
.marke { font: 400 27px/1 var(--serif); letter-spacing: -.01em; text-decoration: none; justify-self: start; }
.kopf nav ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 4px; border: 1px solid var(--haar); border-radius: 999px; }
.kopf.auf-dunkel nav ul { border-color: var(--haar-hell); }
.kopf nav a { display: block; padding: 8px 16px; border-radius: 999px; font: 500 13.5px/1 var(--sans); text-decoration: none; transition: background-color .3s var(--aus), color .3s var(--aus); }
.kopf nav a:hover { background: var(--schwarz); color: var(--weiss); }
.kopf.auf-dunkel nav a:hover { background: var(--weiss); color: var(--schwarz); }
.kopf > .knopf { justify-self: end; }

/* Einstieg */
.hero {
  height: 100vh; height: 100svh; min-height: 620px; display: grid; grid-template-rows: auto minmax(0, 1fr);
  padding: calc(var(--kopf) + clamp(20px, 5vh, 64px)) var(--rand) 0; text-align: center; overflow: hidden;
}
.hero-konzept { display: none; }
.hero-kopf .label { text-wrap: balance; }
.hero-titel { font: 400 clamp(58px, 9.6vw, 170px)/.86 var(--serif); letter-spacing: -.03em; margin: 16px 0 0; }
.hero-lead { max-width: 40ch; margin: 22px auto 0; font-size: clamp(16px, 1.25vw, 19px); color: var(--grau); }
.hero-aktion { margin-top: 24px; }
.fabrik { margin: clamp(16px, 3.5vh, 44px) auto 0; width: 100%; max-width: 1280px; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.fabrik svg { display: block; flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; overflow: visible; }
.fabrik figcaption { display: flex; justify-content: space-between; padding: 14px 0 18px; border-top: 1px solid var(--haar); }
.fabrik figcaption span { font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--grau); }

/* Strichgrafiken */
.grafik path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.grafik .l1 { stroke-width: 1.7; }
.grafik .l2 { stroke-width: 1.15; }
.grafik .l3 { stroke-width: .8; }
.grafik .l4 { stroke-width: .55; opacity: .75; }
.grafik .m1 { stroke: var(--grau-hell); stroke-width: .9; }
.grafik .wandflaeche { fill: currentColor; stroke: none; }
.grafik .strichel { fill: none; stroke: currentColor; stroke-width: .8; stroke-dasharray: 6 5; stroke-opacity: .55; }
.grafik .anno { font: 500 12px var(--sans); letter-spacing: .04em; fill: var(--grau); }
.grafik .schild { font: 400 19px var(--serif); letter-spacing: .34em; fill: currentColor; }
.grafik .raum { font: 500 12.5px var(--sans); letter-spacing: .02em; fill: currentColor; }
.grafik .qm { font: 400 11.5px var(--sans); fill: var(--grau-hell); }
.grafik .fach { font: 400 24px var(--serif); fill: currentColor; }
.grafik .sortenzeichen { font: 400 46px var(--serif); fill: currentColor; }
.js .grafik path[data-g] { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.js .grafik [data-fade] { opacity: 0; }
.fertig .grafik path[data-g] { stroke-dashoffset: 0; }
.fertig .grafik [data-fade] { opacity: 1; }

/* Laufband */
.band { background: var(--schwarz); color: var(--weiss); overflow: hidden; padding: clamp(18px, 3vw, 36px) 0; }
.band-spur { display: flex; width: max-content; }
.band-spur span { font: 400 clamp(44px, 6.4vw, 104px)/1 var(--serif); letter-spacing: -.01em; padding-inline: .45em; white-space: nowrap; }
.band-spur span::after { content: ""; display: inline-block; width: .18em; height: .18em; margin-left: .9em; border: 1px solid currentColor; border-radius: 50%; vertical-align: .22em; }

/* Das Haus */
.haus {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px);
  padding: clamp(100px, 16vh, 200px) var(--rand); max-width: 1600px; margin-inline: auto; align-items: start;
}
.haus-text { grid-column: 1 / span 6; }
.haus h2 { font: 400 clamp(46px, 5.4vw, 92px)/.98 var(--serif); letter-spacing: -.02em; margin: 26px 0 40px; }
.einfaerben { font: 400 clamp(24px, 2.2vw, 36px)/1.32 var(--serif); margin: 0; color: var(--schwarz); }
.haus-klein { max-width: 46ch; margin: 36px 0 0; color: var(--grau); }
.setzkasten { grid-column: 8 / span 5; margin: 120px 0 0; }
.setzkasten svg { display: block; width: 100%; height: auto; }
.setzkasten figcaption { margin-top: 18px; font-size: 14px; color: var(--grau); max-width: 40ch; }

/* Bild, das beim Scrollen bis an den Rand wächst */
.weite { height: 260vh; position: relative; }
.weite-buehne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.weite-rahmen { position: absolute; inset: 0; overflow: hidden; clip-path: inset(18% 24% 18% 24%); }
.weite-rahmen img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); transform: scale(1.2); }
.weite-rahmen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .72), rgb(0 0 0 / .3) 42%, transparent 68%); opacity: var(--verlauf, 0); }
.weite-text { position: absolute; left: var(--rand); bottom: clamp(32px, 7vh, 72px); z-index: 2; max-width: 22ch; margin: 0; font: 400 clamp(30px, 3.4vw, 56px)/1.08 var(--serif); color: var(--weiss); opacity: 0; }
.weite-hinweis { position: absolute; right: var(--rand); bottom: clamp(32px, 7vh, 72px); z-index: 2; margin: 0; font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--weiss); opacity: 0; }
.fertig .weite { height: auto; }
.fertig .weite-buehne { position: relative; height: 80vh; }
.fertig .weite-rahmen { clip-path: none; }
.fertig .weite-rahmen img { transform: none; }
.fertig .weite-rahmen::after { opacity: 1; }
.fertig .weite-text, .fertig .weite-hinweis { opacity: 1; }

/* Wohnungen: Grundriss zeichnet sich, Bild und Text wechseln, die Bühne bleibt beim Scrollen stehen */
.w-kopf { position: relative; text-align: center; padding: clamp(110px, 16vh, 190px) var(--rand) clamp(40px, 6vh, 70px); }
.w-kopf h2 { font: 400 clamp(46px, 6.4vw, 112px)/.95 var(--serif); letter-spacing: -.02em; max-width: 13ch; margin: 24px auto 0; }
.rund { position: absolute; right: calc(var(--rand) + 4vw); top: clamp(120px, 18vh, 210px); width: 118px; height: 118px; display: grid; place-items: center; color: var(--weiss); text-decoration: none; }
.rund > svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: drehen 22s linear infinite; }
.rund text { font: 500 10.5px var(--sans); letter-spacing: .2em; text-transform: uppercase; fill: currentColor; }
.rund span { width: 46px; height: 46px; border-radius: 50%; background: var(--weiss); color: var(--schwarz); display: grid; place-items: center; overflow: hidden; transition: transform .4s var(--aus); }
.rund .pfeil { width: 18px; height: 18px; }
.rund:is(:hover, :focus-visible) span { transform: scale(1.1); }
@keyframes drehen { to { transform: rotate(360deg); } }

.w-weg { height: 420vh; position: relative; }
.w-buehne {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: grid; grid-template-columns: 70px minmax(0, 1fr); padding: calc(var(--kopf) + 3vh) var(--rand) 5vh; gap: 2vw;
}
.w-fortschritt { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 4vh; font: 500 12px/1 var(--sans); letter-spacing: .1em; color: var(--grau-hell); }
.w-nr { color: var(--weiss); }
.w-leiste { width: 1px; height: 38vh; background: var(--haar-hell); position: relative; overflow: hidden; }
.w-leiste span { position: absolute; inset: 0; background: var(--weiss); transform-origin: top; transform: scaleY(0); }
.w-liste { list-style: none; margin: 0; padding: 0; position: relative; }
.w-typ { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: center; visibility: hidden; }
.w-typ:first-child { visibility: visible; }
.w-plan { margin: 0; }
.w-plan svg { display: block; width: 100%; height: auto; max-height: 66vh; }
.w-plan figcaption { margin-top: 10px; font: 500 13px/1.4 var(--sans); letter-spacing: .02em; color: var(--grau-hell); }
.w-seite { display: grid; gap: 28px; align-content: center; }
.w-info h3 { font: 400 clamp(36px, 3.6vw, 62px)/1 var(--serif); letter-spacing: -.01em; margin: 16px 0 12px; }
.w-fakten { font: 500 15px/1.4 var(--sans); margin: 0 0 14px; }
.w-info p:last-child { color: var(--grau-hell); margin: 0; max-width: 38ch; }
.w-bild { margin: 0; }
.rahmen { overflow: hidden; background: #1f1f1f; }
.w-bild .rahmen { aspect-ratio: 4 / 3; }
.rahmen img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.w-bild figcaption { margin-top: 8px; text-align: right; font: 500 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--grau-hell); }

/* Zahlen */
.zahlen { padding: clamp(80px, 13vh, 150px) var(--rand); border-top: 1px solid var(--haar-hell); }
.zahlen dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2vw; margin: 0 auto; max-width: 1440px; }
.zahlen div { border-left: 1px solid var(--haar-hell); padding-left: 1.4vw; display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.zahlen dd { margin: 0; font: 400 clamp(56px, 7vw, 124px)/1 var(--serif); letter-spacing: -.02em; }
.zahlen dt { margin-top: 14px; font-size: 14px; color: var(--grau-hell); }

/* Ausstattung */
.ausstattung { padding: clamp(110px, 16vh, 190px) var(--rand); max-width: 1440px; margin-inline: auto; }
.a-kopf h2 { font: 400 clamp(46px, 5.4vw, 92px)/.98 var(--serif); letter-spacing: -.02em; max-width: 14ch; margin: 24px 0 clamp(48px, 8vh, 90px); }
.a-liste { list-style: none; margin: 0; padding: 0; }
.a-zeile { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2vw; padding: 34px 0; position: relative; }
.a-zeile::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--haar); transform-origin: left; transform: scaleX(var(--linie, 1)); }
.a-zeile h3 { font: 400 clamp(26px, 2.4vw, 40px)/1.1 var(--serif); transition: transform .5s var(--aus); }
.a-zeile:hover h3 { transform: translateX(10px); }
.a-zeile p { margin: 0 0 16px; max-width: 52ch; color: var(--grau); }
.marken { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.marken li { font: 500 11.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--haar); border-radius: 999px; padding: 8px 12px; }

/* Lettern */
.lettern { padding: clamp(90px, 14vh, 170px) var(--rand) clamp(70px, 10vh, 120px); text-align: center; overflow: hidden; }
.lettern h2 { font: 400 clamp(46px, 5.6vw, 96px)/.98 var(--serif); letter-spacing: -.02em; margin: 24px 0 22px; }
.lettern-text { max-width: 46ch; margin: 0 auto; color: var(--grau); }
.lettern-bild { margin: clamp(40px, 6vh, 70px) auto 0; max-width: 820px; }
.lettern-bild svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Anfrage */
.anfrage { padding: clamp(110px, 16vh, 190px) var(--rand); }
.anfrage h2 { font: 400 clamp(60px, 9.6vw, 170px)/.9 var(--serif); letter-spacing: -.03em; margin: 22px 0 clamp(48px, 8vh, 90px); }
.k-raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 4vw; max-width: 1440px; }
.k-text p { margin: 0 0 14px; max-width: 34ch; font-size: 18px; }
.k-text .k-hinweis { color: var(--grau-hell); font-size: 14px; }
.k-form { display: grid; gap: 26px; }
.k-form label { display: grid; gap: 8px; }
.k-form label span { font: 500 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--grau-hell); }
.k-form input, .k-form select, .k-form textarea {
  font: 400 18px/1.4 var(--sans); color: var(--weiss); background: transparent;
  border: 0; border-bottom: 1px solid var(--haar-hell); padding: 8px 0 12px; border-radius: 0; outline: none;
  transition: border-color .3s var(--aus);
}
.k-form select option { color: var(--schwarz); }
.k-form input:focus-visible, .k-form select:focus-visible, .k-form textarea:focus-visible { border-bottom-color: var(--weiss); outline: 1px solid var(--weiss); outline-offset: 6px; }
.k-form .knopf { justify-self: start; margin-top: 8px; }
.k-meldung { margin: 0; min-height: 1.4em; color: var(--grau-hell); font-size: 15px; }

/* Fuß */
.fuss { padding: clamp(60px, 10vh, 110px) var(--rand) 40px; border-top: 1px solid var(--haar-hell); }
.fuss-raster { display: grid; grid-template-columns: 1.2fr 1fr 1.4fr; gap: 4vw; max-width: 1440px; margin-inline: auto; align-items: start; }
.fuss-marke { margin: 0; font: 400 clamp(40px, 4vw, 64px)/1 var(--serif); }
.fuss-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fuss-nav a { text-decoration: none; }
.fuss-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.fuss-recht p { margin: 0 0 10px; font-size: 14px; color: var(--grau-hell); }

.hinweis {
  position: fixed; left: 16px; bottom: 16px; z-index: 25;
  font: 500 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  background: var(--weiss); color: var(--schwarz); border: 1px solid var(--haar); border-radius: 999px; padding: 9px 14px;
}

/* Wohnungsfinder: Stockwerk in der Zeichnung wählen, Liste filtern, Wohnung mit Grundriss ansehen */
.finden { padding: clamp(110px, 16vh, 190px) var(--rand) clamp(90px, 12vh, 150px); max-width: 1600px; margin-inline: auto; }
.f-kopf h2 { font: 400 clamp(46px, 5.6vw, 96px)/.98 var(--serif); letter-spacing: -.02em; margin: 24px 0 20px; }
.f-intro { margin: 0; max-width: 56ch; color: var(--grau); }
.f-fabrik { margin: clamp(40px, 6vh, 64px) auto 0; max-width: 1180px; }
.f-fabrik svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafik .zone path { fill: rgb(17 17 17 / 0); stroke: none; cursor: pointer; transition: fill .3s var(--aus); }
.grafik .zone:hover path { fill: rgb(17 17 17 / .07); }
.grafik .zone.aktiv path { fill: rgb(17 17 17 / .13); stroke: var(--schwarz); stroke-width: 1.6; }
.grafik .zone.markiert:not(.aktiv) path { fill: rgb(17 17 17 / .05); }
.grafik .zone:focus { outline: none; }
.grafik .zone:focus-visible path { stroke: var(--schwarz); stroke-width: 2.2; stroke-dasharray: 6 4; }
.finder-svg text { pointer-events: none; }
.f-hinweis { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--haar); font: 500 13.5px/1.4 var(--sans); }
.f-hinweis-tipp { color: var(--grau); }

.f-etagen { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px auto 0; max-width: 1180px; }
.chip {
  font: 500 13px/1 var(--sans); color: inherit; background: transparent; cursor: pointer;
  border: 1px solid var(--haar); border-radius: 999px; padding: 10px 15px;
  transition: background-color .25s var(--aus), color .25s var(--aus), border-color .25s var(--aus);
}
.chip:hover { border-color: var(--schwarz); }
.chip[aria-pressed="true"] { background: var(--schwarz); color: var(--weiss); border-color: var(--schwarz); }
.merk-zahl { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 5px; border-radius: 999px; background: var(--schwarz); color: var(--weiss); font-size: 11px; }
.merk-chip[aria-pressed="true"] .merk-zahl { background: var(--weiss); color: var(--schwarz); }

.f-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); margin-top: clamp(36px, 5vh, 56px); align-items: start; }
.f-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding-bottom: 18px; border-bottom: 1px solid var(--haar); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.f-regler { flex: 1 1 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px clamp(20px, 3vw, 40px); margin-top: 8px; }
.regler { display: grid; gap: 12px; font: 500 13.5px/1 var(--sans); }
.regler output { font-variant-numeric: tabular-nums; }
.regler input { width: 100%; margin: 0; accent-color: var(--schwarz); cursor: pointer; }
.schalter { display: inline-flex; align-items: center; gap: 9px; margin-left: auto; font: 500 13.5px/1 var(--sans); cursor: pointer; }
.schalter input { width: 18px; height: 18px; margin: 0; accent-color: var(--schwarz); }
.f-status { margin: 16px 0 8px; font-size: 14px; color: var(--grau); }
.f-status button { font: inherit; color: var(--schwarz); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.f-kopfzeile, .einheit {
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: 70px minmax(0, 1.4fr) minmax(0, .7fr) minmax(0, .8fr) minmax(0, .9fr) minmax(0, 1fr);
  grid-template-areas: "nr lage zi qm miete stand";
}
.f-kopfzeile { padding: 0 52px 8px 10px; font: 500 11.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--grau); }
.f-liste { list-style: none; margin: 0; padding: 0; }
.f-liste li { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; border-top: 1px solid var(--haar); }
.f-liste li:last-child { border-bottom: 1px solid var(--haar); }
.einheit { width: 100%; padding: 15px 10px; text-align: left; font: inherit; font-size: 15px; color: inherit; background: none; border: 0; cursor: pointer; transition: background-color .25s var(--aus), color .25s var(--aus); }
.einheit:hover { background: rgb(17 17 17 / .045); }
.f-liste li:has([aria-current="true"]) { background: var(--schwarz); color: var(--weiss); }
.e-nr { grid-area: nr; font: 400 22px/1 var(--serif); }
.e-lage { grid-area: lage; }
.e-zi { grid-area: zi; }
.e-qm { grid-area: qm; }
.e-miete { grid-area: miete; font-variant-numeric: tabular-nums; }
.e-stand { grid-area: stand; }
.vergeben .einheit:not([aria-current="true"]) { color: var(--grau); }
.punkt { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; vertical-align: 1px; border: 1px solid currentColor; }
.punkt.frei { background: currentColor; }
.punkt.vermietet { border-style: dashed; }
.merken { width: 44px; height: 44px; display: grid; place-items: center; color: inherit; background: none; border: 0; cursor: pointer; transition: transform .3s var(--aus); }
.merken:hover { transform: scale(1.15); }
.merken svg, .merken-gross svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; transition: fill .25s var(--aus); }
.merken[aria-pressed="true"] svg, .merken-gross[aria-pressed="true"] svg { fill: currentColor; }
.e-zusatz { display: none; }

.f-detail { position: sticky; top: calc(var(--kopf) + 24px); scroll-margin-top: 16px; border: 1px solid var(--haar); padding: clamp(20px, 2.4vw, 34px); min-height: 380px; }
.f-leer { display: grid; place-items: center; min-height: 320px; text-align: center; color: var(--grau); }
.f-leer p { max-width: 30ch; margin: 0; }
.f-karte h3 { font: 400 clamp(34px, 3vw, 52px)/1 var(--serif); letter-spacing: -.01em; margin: 12px 0 20px; }
.f-werte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; }
.f-werte div { border-left: 1px solid var(--haar); padding-left: 10px; }
.f-werte dt { font: 500 11.5px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--grau); }
.f-werte dd { margin: 6px 0 0; font: 400 21px/1.1 var(--serif); }
.f-stand { margin: 18px 0 0; font-size: 14px; }
.f-plan { margin: 22px 0 0; color: var(--schwarz); }
.f-plan svg { display: block; width: 100%; height: auto; }
.f-plan .raum { font-size: 15px; }
.f-plan .qm { font-size: 13px; fill: var(--grau); }
.f-plan figcaption { margin-top: 6px; font-size: 12.5px; color: var(--grau); }
.f-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.merken-gross { display: inline-flex; align-items: center; gap: 9px; font: 500 14px/1 var(--sans); color: inherit; background: none; border: 1px solid var(--haar); border-radius: 999px; padding: 13px 18px; cursor: pointer; transition: background-color .25s var(--aus), color .25s var(--aus); }
.merken-gross[aria-pressed="true"] { background: var(--schwarz); color: var(--weiss); border-color: var(--schwarz); }

@media (max-width: 960px) {
  .f-raster { grid-template-columns: 1fr; }
  .f-detail { position: relative; top: auto; }
  .f-kopfzeile { display: none; }
  .einheit { grid-template-columns: 52px auto auto minmax(0, 1fr); grid-template-areas: "nr zi qm miete" "nr lage lage stand"; row-gap: 4px; padding: 14px 6px; }
  .e-miete, .e-stand { justify-self: end; }
  .e-lage, .e-stand { font-size: 13px; color: var(--grau); }
  .einheit[aria-current="true"] .e-lage, .einheit[aria-current="true"] .e-stand { color: var(--grau-hell); }
  .e-zusatz { display: inline; }
  .schalter { margin-left: 0; }
  .f-detail:has(.f-leer) { display: none; }
  .f-hinweis-tipp { display: none; }
}

/* Lage: schematische Karte, daneben Ziele; ein gewähltes Ziel zeichnet seinen Weg in die Karte */
.lage { padding: clamp(110px, 16vh, 190px) var(--rand); }
.l-kopf, .l-raster { max-width: 1440px; margin-inline: auto; }
.l-kopf h2 { font: 400 clamp(46px, 5.4vw, 92px)/.98 var(--serif); letter-spacing: -.02em; max-width: 13ch; margin: 24px 0 20px; }
.l-intro { max-width: 54ch; margin: 0; color: var(--grau-hell); }
.l-raster { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(40px, 6vh, 72px); }
.l-karte { margin: 0; }
.l-karte svg { display: block; width: 100%; height: auto; }
.l-karte figcaption { margin-top: 10px; font-size: 13px; color: var(--grau-hell); }
.grafik .haus-flaeche, .grafik .tor-punkt { fill: currentColor; stroke: none; }
.grafik .karte-text { font: 500 17px var(--sans); letter-spacing: .16em; fill: currentColor; }
.grafik .karte-name { font: 400 38px var(--serif); fill: currentColor; }
.grafik .karte-s { font: 600 21px var(--sans); fill: currentColor; }
.lage-svg text { paint-order: stroke; stroke: var(--schwarz); stroke-width: 9px; stroke-linejoin: round; }
.grafik .weg { stroke-width: 3.2; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--aus); }
.grafik .weg.an { stroke-dashoffset: 0; }
.grafik .weg-punkt { fill: currentColor; opacity: 0; transition: opacity .3s var(--aus); }
.grafik .weg-punkt.an { opacity: 1; transition-delay: .8s; }
.l-ziele { list-style: none; margin: 0; padding: 0; }
.l-ziele li:last-child { border-bottom: 1px solid var(--haar-hell); }
.l-ziel { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: center; gap: 16px; width: 100%; padding: 18px 0; text-align: left; font: inherit; color: inherit; background: none; border: 0; border-top: 1px solid var(--haar-hell); cursor: pointer; transition: border-color .3s var(--aus); }
.l-zeit { font: 400 clamp(40px, 3.6vw, 60px)/1 var(--serif); letter-spacing: -.02em; transition: transform .45s var(--aus); }
.l-ort { display: block; font-size: 17px; }
.l-weg { display: block; margin-top: 2px; font-size: 13.5px; color: var(--grau-hell); }
.nb { white-space: nowrap; }
.l-ziel:hover .l-zeit, .l-ziel[aria-pressed="true"] .l-zeit { transform: translateX(8px); }
.l-ziel[aria-pressed="true"] { border-top-color: var(--weiss); }

@media (max-width: 960px) {
  .l-raster { grid-template-columns: 1fr; }
  .l-ziele { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .l-ziele li:nth-last-child(2) { border-bottom: 1px solid var(--haar-hell); }
  .l-ziel { grid-template-columns: 1fr; align-items: start; gap: 8px; }
  .l-ziel:hover .l-zeit, .l-ziel[aria-pressed="true"] .l-zeit { transform: none; }
}
@media (max-width: 760px) {
  .grafik .karte-text { font-size: 24px; }
  .grafik .karte-name { font-size: 54px; }
}

/* Zeichenweise Überschriften und Einblenden; ohne JavaScript steht alles sofort da */
.js [data-zeichen] .wort { display: inline-block; white-space: nowrap; }
.js [data-zeichen] .z { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.js [data-zeichen] .z > span { display: inline-block; transform: translateY(108%); }
.js [data-auf] { opacity: 0; transform: translateY(28px); }
.fertig [data-zeichen] .z > span, .fertig [data-auf] { transform: none !important; opacity: 1 !important; }
.fertig .w-weg { height: auto; }
.fertig .w-buehne { position: relative; height: auto; display: block; }
.fertig .w-fortschritt { display: none; }
.fertig .w-typ { position: relative; inset: auto; visibility: visible; margin-bottom: 12vh; }

@media (max-width: 960px) {
  .kopf { grid-template-columns: 1fr auto; }
  .kopf nav { display: none; }
  .haus-text, .setzkasten { grid-column: 1 / -1; }
  .setzkasten { margin-top: 60px; }
  .w-weg { height: auto; }
  .w-buehne { position: relative; height: auto; display: block; padding-top: 0; }
  .w-fortschritt { display: none; }
  .w-typ { position: relative; inset: auto; visibility: visible; grid-template-columns: 1fr; margin-bottom: 12vh; }
  .rund { position: relative; right: auto; top: auto; margin: 32px auto 0; }
  .zahlen dl { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .a-zeile { grid-template-columns: 1fr; gap: 14px; }
  .k-raster { grid-template-columns: 1fr; gap: 40px; }
  .fuss-raster { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 760px) {
  .hero-konzept { display: block; margin-bottom: 8px; color: var(--schwarz); }
  .hinweis { display: none; }
  .fabrik figcaption span:last-child { display: none; }
  .fabrik .anno, .fabrik .m1 { display: none; } /* Bemaßung wäre auf dem Handy zu klein zum Lesen */
  .weite { height: 200vh; }
}

@media (prefers-reduced-motion: reduce) {
  .rund > svg, .pfeil { animation: none !important; }
}