/* Estate Art Startseite. Ablauf der Abschnitte in estateart/BRIEF.md, Regeln in estateart/DESIGN.md. */

/* Datenblock wie im Exposé: echte Liste mit Linien, Tabellenziffern */
.daten { margin: 0; display: grid; }
.daten > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 13px 0; border-top: 1px solid var(--linie); }
.daten > div:last-child { border-bottom: 1px solid var(--linie); }
.daten dt { color: var(--grau); }
.daten dd { margin: 0; text-align: right; font-weight: 520; }

/* Abschnittsköpfe: Überschrift links, Satz rechts unten */
.kopf-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px var(--rand); align-items: end; }

/* ================= 1 Held: das Foto aus dem Exposé wird zum Aquarell =================
   Kein Film und keine stehende Strecke. start.js rechnet das Aquarell live in die Leinwand (WebGL): Nach dem Laden breitet
   es sich vom Haus aus im Foto aus, am Ende gehen die Ränder des Fotos ins Papier der Seite über. Ohne WebGL blendet das
   Aquarell mit weichem Rand über das Foto, bei reduzierter Bewegung steht es gleich da. */
.held {
  position: relative; display: grid; grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); align-items: center; gap: clamp(28px, 4.2vw, 80px);
  min-height: 100vh; min-height: 100svh; padding: clamp(100px, 14vh, 150px) var(--rand) clamp(48px, 9vh, 104px);
  background: var(--papier); color: var(--tinte);
}
.held-text { position: relative; z-index: 2; }
.held h1 { --zv: 120ms; font-size: clamp(3.2rem, 0.6rem + 6.2vw, 8.6rem); max-width: 9.5ch; }
.held-unter { margin-top: 30px; font-size: var(--t-lead); line-height: 1.42; max-width: 30ch; }
.held-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: 38px; }
.held-vertrauen { margin-top: 30px; font-size: var(--t-klein); color: var(--grau); max-width: 40ch; }

/* Das Bild: erst ein Abzug mit Schatten, am Ende ein Aquarell ohne Kante */
.held-bild { position: relative; justify-self: end; width: min(100%, calc((100svh - 230px) * 1.5)); aspect-ratio: 3 / 2; }
.held-bild > picture, .held-leinwand, .held-schatten { position: absolute; inset: 0; }
.held-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 99% 50%; }
.held-bild .held-aquarell img { object-position: 81% 50%; }
.held-foto img { border-radius: 2px; }
.held-schatten { border-radius: 2px; box-shadow: 0 1px 2px rgba(14, 22, 37, .12), 0 44px 80px -40px rgba(14, 22, 37, .55); transition: opacity 1600ms var(--ease-out); }
.held.aufgeloest .held-schatten { opacity: 0; }
.held-leinwand { display: block; width: 100%; height: 100%; visibility: hidden; }
.held--gl .held-leinwand { visibility: visible; }
.held--gl .held-foto { visibility: hidden; }
.held-aquarell { display: none; }
.held--ohne-gl .held-aquarell { display: block; opacity: 0; transition: opacity 1800ms var(--ease-out);
  -webkit-mask: radial-gradient(closest-side, #000 70%, transparent) center / 110% 116% no-repeat; mask: radial-gradient(closest-side, #000 70%, transparent) center / 110% 116% no-repeat; }
.held--ohne-gl .held-foto { transition: opacity 1800ms var(--ease-out); }
.held--ohne-gl.aufgeloest .held-aquarell { opacity: 1; }
.held--ohne-gl.aufgeloest .held-foto { opacity: 0; }

/* Datenblatt aus dem Exposé, liegt auf der Ecke des Bildes */
.held-daten {
  position: absolute; z-index: 3; left: clamp(-36px, -2.4vw, -16px); bottom: clamp(-60px, -6vh, -28px); width: min(320px, 24vw);
  padding: 20px 22px 16px; background: var(--papier-hell); color: var(--tinte); border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 32px 64px -32px rgba(14, 22, 37, .5);
}
.daten-titel { font: 400 1.5rem/1.1 var(--serif); margin-bottom: 14px; letter-spacing: -0.01em; }
.held-daten .daten > div { padding: 10px 0; font-size: .9375rem; }
.daten-stand dd { position: relative; display: grid; justify-items: end; }
.daten-stand dd > span { grid-area: 1 / 1; transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out); }
.stand-neu { color: var(--tanne); opacity: 0; transform: translateY(6px); }
.held.verkauft .stand-alt { opacity: 0; transform: translateY(-6px); }
.held.verkauft .stand-neu { opacity: 1; transform: none; }

/* Auftritt nach dem Vorhang */
.js .held-unter, .js .held-aktion, .js .held-vertrauen, .js .held-daten { opacity: 0; translate: 0 18px; transition: opacity 1000ms var(--ease-out), translate 1200ms var(--ease-weich); }
.js .held-bild { opacity: 0; translate: 0 28px; transition: opacity 1100ms var(--ease-out), translate 1400ms var(--ease-weich); }
.js .held.da .held-unter, .js .held.da .held-aktion, .js .held.da .held-vertrauen, .js .held.da .held-daten, .js .held.da .held-bild { opacity: 1; translate: 0 0; }
.js .held.da .held-bild { transition-delay: 150ms; }
.js .held.da .held-unter { transition-delay: 450ms; }
.js .held.da .held-aktion { transition-delay: 560ms; }
.js .held.da .held-vertrauen { transition-delay: 680ms; }
.js .held.da .held-daten { transition-delay: 800ms; }

@media (max-width: 900px), (orientation: portrait) and (max-width: 1100px) {
  .held { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 34px; min-height: 0; padding: 88px var(--rand) 8px; }
  .held-bild { order: -1; justify-self: stretch; width: 100%; aspect-ratio: 4 / 3; }
  .held-daten { display: none; }
}
@media (max-width: 900px) {
  .held-bild img { object-position: 81% 50%; }
  .held-bild .held-aquarell img { object-position: 69% 50%; }
  .held h1 { font-size: clamp(3.1rem, 13.6vw, 4.8rem); }
  .held-unter { font-size: 1.125rem; margin-top: 20px; }
  .held-aktion { margin-top: 26px; }
  .held-aktion .knopf { flex: 1 1 100%; }
  .held-vertrauen { margin-top: 22px; }
}

/* ================= 2 Eckdaten ================= */
.eckdaten { padding: clamp(64px, 8vw, 120px) var(--rand) 0; max-width: var(--breite); margin: 0 auto; }
.eckdaten-liste { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px var(--rand); }
.eckdaten-liste > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 14px; padding-top: 22px; border-top: 1px solid var(--linie); }
.eckdaten-liste dt { font-size: .9688rem; color: var(--grau); max-width: 24ch; }
.eckdaten-liste dd { margin: 0; font: 400 clamp(2.6rem, 1.4rem + 3vw, 4.6rem)/1 var(--serif); letter-spacing: -0.03em; white-space: nowrap; }
.eckdaten-liste dd small { font-size: .5em; letter-spacing: 0; }
@media (max-width: 900px) { .eckdaten-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; } }

/* ================= Räume: echte Fotos, der Rahmen sitzt im Maßstab darauf =================
   Werte je Raum (Bildmitte in Prozent des quadratischen Fotos, Breite eines 70 cm breiten Rahmens, Lichtrichtung).
   --zoom vergrößert das Foto, --cx/--cy legen fest, wo die Bildmitte im Ausschnitt liegt. */
.raum { position: relative; margin: 0; overflow: hidden; container-type: size; aspect-ratio: 5 / 4.4; background: #DCD8D0; }
.raum--sideboard { --mx: .477; --my: .324; --r70: .2276; --licht: -1; --zoom: 2.15; --cx: .5; --cy: .4; }
.raum--wohnzimmer { --mx: .486; --my: .318; --r70: .1965; --licht: -1; --zoom: 1.85; --cx: .5; --cy: .44; }
.raum--flur { --mx: .596; --my: .307; --r70: .2136; --licht: 1; --zoom: 1.6; --cx: .5; --cy: .42; }
.szene { position: absolute; aspect-ratio: 1; width: calc(var(--zoom) * 100cqw); left: calc(var(--cx) * 100cqw - var(--mx) * var(--zoom) * 100cqw); top: calc(var(--cy) * 100cqh - var(--my) * var(--zoom) * 100cqw); transform-origin: calc(var(--mx) * 100%) calc(var(--my) * 100%); }
.szene > picture, .szene > picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
.raum-rahmen { position: absolute; left: calc(var(--mx) * 100%); top: calc(var(--my) * 100%); width: calc(var(--r70) * 100%); aspect-ratio: 7 / 5; translate: -50% -50%;
  padding: calc(var(--r70) * 100% * 2.2 / 70);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), inset 1px 1px 0 rgba(255, 255, 255, .22),
    calc(var(--licht) * .22cqw) .34cqw .34cqw rgba(40, 34, 28, .26), calc(var(--licht) * 1cqw) 1.4cqw 2.2cqw rgba(40, 34, 28, .17); }
.raum-rahmen .pp { height: 100%; display: grid; padding: 8% 7% 12.5%; }
.raum-rahmen .pp > img, .raum-rahmen .wisch { width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; }
.raum-text { margin-top: 14px; color: #4A4F58; }

/* ================= 3 Vorschau ================= */
.vorschau { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--rand); align-items: center; padding: var(--abschnitt) var(--rand); max-width: var(--breite); margin: 0 auto; }
.vorschau-raum { grid-column: 1 / span 7; }
.vorschau-text { grid-column: 9 / span 4; display: grid; gap: 36px; justify-items: start; }
.vorschau-text h2 { font-size: clamp(2.6rem, 1.2rem + 3.6vw, 5.2rem); }
.vorschau-inhalt { display: grid; gap: 32px; justify-items: start; width: 100%; }
.vorschau-inhalt .daten { width: 100%; }
.wisch { position: relative; overflow: hidden; }
.wisch img { position: absolute; inset: 0; width: 100%; height: 100%; }
.wisch-foto { object-fit: cover; }
.wisch-bild { object-fit: contain;
}
/* Das Foto liegt oben und wird von links nach rechts weggewischt; darunter liegt das Aquarell auf dem Papier */
.wisch-foto { --wp: 0; z-index: 1;
  -webkit-mask-image: linear-gradient(100deg, transparent calc(var(--wp) * 150% - 50%), #000 calc(var(--wp) * 150%)); mask-image: linear-gradient(100deg, transparent calc(var(--wp) * 150% - 50%), #000 calc(var(--wp) * 150%)); }
@media (max-width: 900px) {
  .vorschau-raum, .vorschau-text { grid-column: 1 / -1; }
  .vorschau-raum { margin: 0 calc(var(--rand) * -1) 48px; }
  .vorschau-raum .raum-text { padding: 0 var(--rand); }
}

/* ================= 4 Aussage ================= */
.aussage { padding: var(--abschnitt) var(--rand); background-color: var(--nacht); }
.aussage-innen { max-width: var(--breite); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(48px, 6vw, 96px) var(--rand); }
.aussage h2 { grid-column: 1 / span 8; font-size: clamp(2.8rem, 1rem + 5.4vw, 7rem); }
.aussage-text { grid-column: 3 / span 10; font: 400 clamp(1.9rem, .9rem + 2.9vw, 4.1rem)/1.18 var(--serif); letter-spacing: -0.02em; text-wrap: pretty; }
.aussage-text .w { opacity: var(--hell, .16); transition: opacity 300ms ease; }
@media (max-width: 900px) { .aussage h2, .aussage-text { grid-column: 1 / -1; } }

/* ================= 5 Drei Momente ================= */
.momente { background: var(--papier); padding: var(--abschnitt) var(--rand); }
/* Drei Momente als Karten wie im Ablauf (Nico 18.10.2026: „genauso wie unten bei So läuft es“) */
.momente-kopf, .momente .stapel { max-width: var(--breite); margin-left: auto; margin-right: auto; }
.moment-bild { grid-column: 7 / span 6; position: relative; width: 100%; margin: 0; aspect-ratio: 5 / 4.4; border-radius: 22px; overflow: hidden; isolation: isolate; display: grid; place-items: center; }
.moment-bild--tisch { background: var(--stein); }
.moment-rahmen { width: 64%; rotate: -3deg; translate: -8% -6%; }
.expose { position: absolute; right: 7%; bottom: 8%; width: min(270px, max(46%, 196px)); padding: 20px 22px 16px; background: var(--weiss); border-radius: 14px; box-shadow: 0 30px 60px -30px rgba(14, 22, 37, .45); font-size: .8125rem; rotate: 2deg; }
.expose-kopf { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grau); }
.expose-titel { font: 400 1.3rem/1.1 var(--serif); margin: 8px 0 12px; }
.expose dl { margin: 0; }
.expose dl div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid #E6E4DE; }
.expose dt { color: var(--grau); } .expose dd { margin: 0; font-weight: 560; white-space: nowrap; }
@media (max-width: 900px) { .expose { width: min(270px, max(46%, 164px)); padding: 13px 14px 9px; font-size: .75rem; } .expose-titel { font-size: 1.05rem; margin: 6px 0 8px; } .expose dl div { padding: 5px 0; gap: 8px; } }
.moment-bild--handy { background-color: var(--anthrazit); background-image: var(--dunkel-licht); }
.handy { width: min(310px, 62%); background: var(--weiss); color: var(--tinte); border-radius: 34px; padding: 18px 0 20px; box-shadow: 0 0 0 7px #0B111D, 0 40px 80px -30px rgba(0, 0, 0, .7); }
.handy-kopf { display: flex; align-items: center; gap: 10px; padding: 0 16px 12px; font-size: .8125rem; line-height: 1.25; }
.handy-kopf small { display: block; color: var(--grau); }
.handy-zeichen { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--tanne); color: var(--weiss); font-size: .75rem; font-weight: 600; }
.handy-bild { background: #FBF9F5; aspect-ratio: 1; display: grid; place-items: center; padding: 6% 4%; isolation: isolate; }
.handy-bild .aq { aspect-ratio: 3 / 2; }
.handy-text { padding: 14px 16px 0; font-size: .8125rem; line-height: 1.45; }
.moment-bild--raum .raum { position: absolute; inset: 0; aspect-ratio: auto; }
@media (max-width: 900px) {
  .moment-bild { grid-column: 1 / -1; border-radius: 18px; }
}

/* ================= 6 Beweis ================= */
.beweis { padding: var(--abschnitt) var(--rand); background-color: var(--anthrazit); overflow: hidden; }
.beweis-kopf { max-width: var(--breite); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px var(--rand); align-items: end; }
.beweis-kopf h2 { grid-column: 1 / span 7; }
.beweis-kopf .lead { grid-column: 9 / span 4; }
.beweis-wahl { max-width: var(--breite); margin: clamp(48px, 6vw, 80px) auto 0; display: flex; flex-wrap: wrap; gap: 10px; }
.beweis-wahl button { min-height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: rgba(241, 239, 234, .08); color: var(--auf-dunkel); font: 500 .9688rem/1 var(--sans); cursor: pointer; transition: background-color 200ms ease, color 200ms ease; }
.beweis-wahl button[aria-selected="true"] { background: var(--auf-dunkel); color: var(--tinte); }
@media (hover: hover) and (pointer: fine) { .beweis-wahl button[aria-selected="false"]:hover { background: rgba(241, 239, 234, .16); } }
.beweis-buehne { max-width: var(--breite); margin: clamp(40px, 5vw, 72px) auto 0; display: grid; }
.paar { grid-area: 1 / 1; margin: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--rand); align-items: center; visibility: hidden; }
.paar.ist { visibility: visible; }
.abzug { grid-column: 1 / span 5; grid-row: 1; z-index: 1; padding: 2.4%; background: #FCFBF8; box-shadow: 0 2px 3px rgba(0, 0, 0, .18), 0 34px 60px -30px rgba(0, 0, 0, .7); rotate: -3deg;
  opacity: 0; translate: -40px 20px; transition: opacity 700ms var(--ease-out), translate 1100ms var(--ease-weich), rotate 1100ms var(--ease-weich); }
.abzug img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.paar-rahmen { grid-column: 5 / span 7; aspect-ratio: 7 / 5; grid-row: 1; z-index: 2; opacity: 0; translate: 40px 0; transition: opacity 700ms var(--ease-out) 120ms, translate 1100ms var(--ease-weich) 120ms; }
.paar.ist .abzug { opacity: 1; translate: 0 0; rotate: -4deg; }
.paar.ist .paar-rahmen { opacity: 1; translate: 0 0; }
.paar-rahmen .pp { height: 100%; display: grid; }
.paar-rahmen .aq { height: 100%; min-height: 0; aspect-ratio: auto; }
.paar figcaption { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--rand); margin-top: 26px; font-size: var(--t-klein); color: var(--auf-dunkel-weich); }
.paar figcaption span:first-child { grid-column: 1 / span 4; }
.paar figcaption span:last-child { grid-column: 5 / span 7; }
@media (max-width: 900px) {
  .beweis-kopf h2, .beweis-kopf .lead { grid-column: 1 / -1; }
  .beweis-wahl { gap: 8px; }
  .beweis-wahl button { padding: 0 16px; }
  .abzug { grid-column: 1 / span 9; }
  .paar-rahmen { grid-column: 2 / -1; grid-row: 2; margin-top: -14%; }
  .paar figcaption { grid-row: 3; display: grid; grid-template-columns: 1fr; gap: 4px; }
  .paar figcaption span:first-child, .paar figcaption span:last-child { grid-column: 1; }
}

/* ================= 7 Ablauf: Karten legen sich übereinander ================= */
.ablauf { padding: var(--abschnitt) var(--rand); max-width: var(--breite); margin: 0 auto; }
.ablauf-kopf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px var(--rand); align-items: end; margin-bottom: clamp(48px, 6vw, 88px); }
.ablauf-kopf h2 { grid-column: 1 / span 7; }
.ablauf-kopf .lead { grid-column: 9 / span 4; }
.stapel { list-style: none; margin: 0; padding: 0; display: grid; gap: 6vh; }
.stapel-karte { --i: 0; position: sticky; top: calc(104px + var(--i) * 24px); min-height: min(72svh, 680px); border-radius: 30px; padding: clamp(28px, 4vw, 64px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px var(--rand); align-items: center; background: var(--papier-hell);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 -30px 60px -50px rgba(14, 22, 37, .5); transform-origin: 50% 0; will-change: transform; }
.stapel-karte:nth-child(1) { --i: 0; background: var(--weiss); }
.stapel-karte:nth-child(2) { --i: 1; background: var(--stein); }
.stapel-karte:nth-child(3) { --i: 2; background: #D9DEE6; }
.stapel-karte--dunkel { --i: 3 !important; background-color: var(--anthrazit) !important; background-image: var(--dunkel-licht) !important; color: var(--auf-dunkel); }
.stapel-karte--dunkel .stapel-zahl { color: color-mix(in srgb, var(--knopf-gold-hell) 58%, transparent); }
.stapel-text { grid-column: 1 / span 6; align-self: stretch; display: grid; grid-template-rows: 1fr auto auto; gap: 18px; }
.stapel-zahl { font: 400 clamp(4rem, 2rem + 6vw, 9rem)/.8 var(--serif); letter-spacing: -0.04em; color: color-mix(in srgb, currentColor 22%, transparent); }
.stapel-text h3 { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.6rem); }
.stapel-text p { max-width: 42ch; color: var(--grau); font-size: 1.0625rem; }
.stapel-karte--dunkel .stapel-text p { color: var(--auf-dunkel-weich); }
.stapel-karte .karte { grid-column: 8 / span 5; justify-self: center; width: min(360px, 100%); }
.karte { background: var(--weiss); color: var(--tinte); border-radius: 18px; padding: 18px; box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 30px 60px -36px rgba(14, 22, 37, .45); font-size: .875rem; }
.karte-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 14px; }
.karte dl { margin: 12px 0 0; display: grid; }
.karte dl div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid #E8E6E0; }
.karte dt { color: var(--grau); }
.karte dd { margin: 0; font-weight: 520; }
.karte > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; }
.karte-bild { background: #FBF9F5; border-radius: 6px; padding: 6%; isolation: isolate; }
.karte-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.karte-zeile { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; color: var(--grau); }
.karte-pfeil { color: var(--tanne); font-weight: 600; }
.mini-knopf { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 1px solid var(--knopf-gold); border-radius: 999px; background: var(--knopf-grund); color: var(--knopf-schrift); font-size: .8125rem; font-weight: 560; }
.mini-knopf--flach { background: transparent; color: var(--tinte); }
/* Stand wie im Partnerbereich: Wort in Tinte, Punkt in der Farbe des Stands */
.stand { display: inline-flex; align-items: center; gap: 7px; font-size: .75rem; font-style: normal; font-weight: 560; color: #2F3542; white-space: nowrap; }
.stand::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #8C97AB; flex: none; }
.stand--neu::before { background: #8C97AB; }
.stand--entwurf::before { background: #3E63B8; box-shadow: 0 0 0 3px rgba(62, 99, 184, .18); }
.stand--druck::before { background: #6C82A8; }
.stand--fertig::before { background: #5D6576; }
@media (max-width: 900px) {
  .ablauf-kopf h2, .ablauf-kopf .lead { grid-column: 1 / -1; }
  .stapel { gap: 20px; }
  .stapel-karte { top: calc(80px + var(--i) * 14px); min-height: 0; border-radius: 24px; padding: 28px 22px; gap: 28px; }
  .stapel-text, .stapel-karte .karte { grid-column: 1 / -1; }
  .stapel-text { grid-template-rows: auto; gap: 14px; }
  .stapel-zahl { font-size: 3.6rem; }
}

/* ================= 8 Rechnung ================= */
.rechnung { padding: 0 var(--rand) var(--abschnitt); max-width: var(--breite); margin: 0 auto; display: grid; gap: clamp(48px, 6vw, 88px); }
.rechnung-kopf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px var(--rand); align-items: end; }
.rechnung-kopf h2 { grid-column: 1 / span 6; }
.rechnung-regler { grid-column: 8 / span 5; display: grid; gap: 22px; }
.regler { display: grid; gap: 6px; }
.regler label { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-weight: 500; }
.regler output { font: 400 1.75rem/1 var(--serif); letter-spacing: -0.01em; white-space: nowrap; }
.regler input[type="range"] { --glanz: 205, 160, 80; -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; }
.regler input[type="range"]:focus-visible { outline: none; }
.regler input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(var(--tanne), var(--tanne)) 0 0 / var(--fuell, 50%) 100% no-repeat, var(--linie); }
.regler input[type="range"]::-moz-range-track { height: 3px; border-radius: 2px; background: var(--linie); }
.regler input[type="range"]::-moz-range-progress { height: 3px; background: var(--tanne); }
/* Der Griff bekommt denselben Goldring wie die Knöpfe: beim Anfassen, mit der Tastatur und bei feiner Maus schon beim Überfahren */
.regler input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -12.5px; border-radius: 50%; background: var(--weiss); box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 6px 16px -4px rgba(14, 22, 37, .35); transition: scale 200ms var(--ease-out), box-shadow 220ms ease; }
.regler input[type="range"]:active::-webkit-slider-thumb { scale: 1.12; }
.regler input[type="range"]:is(:active, :focus-visible)::-webkit-slider-thumb { box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 6px 16px -4px rgba(14, 22, 37, .35), 0 0 0 4px var(--papier), 0 0 0 5.5px rgba(var(--glanz), .95), 0 0 14px 5px rgba(var(--glanz), .3); }
.regler input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--weiss); box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 6px 16px -4px rgba(14, 22, 37, .35); transition: box-shadow 220ms ease; }
.regler input[type="range"]:is(:active, :focus-visible)::-moz-range-thumb { box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 6px 16px -4px rgba(14, 22, 37, .35), 0 0 0 4px var(--papier), 0 0 0 5.5px rgba(var(--glanz), .95), 0 0 14px 5px rgba(var(--glanz), .3); }
@media (hover: hover) and (pointer: fine) {
  .regler input[type="range"]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 6px 16px -4px rgba(14, 22, 37, .35), 0 0 0 4px var(--papier), 0 0 0 5.5px rgba(var(--glanz), .95), 0 0 14px 5px rgba(var(--glanz), .3); }
  .regler input[type="range"]:hover::-moz-range-thumb { box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 6px 16px -4px rgba(14, 22, 37, .35), 0 0 0 4px var(--papier), 0 0 0 5.5px rgba(var(--glanz), .95), 0 0 14px 5px rgba(var(--glanz), .3); }
}
.kacheln { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 14px; }
.kachel { position: relative; padding: clamp(26px, 3vw, 44px); display: grid; align-content: space-between; gap: 28px; border-radius: 30px; container-type: inline-size; }
/* Die Zahl wird nie breiter als ihre Kachel, auch bei 150.000 € */
.kachel-zahl { font: 400 min(clamp(3.4rem, 1.4rem + 5.2vw, 7.6rem), 21cqi)/.92 var(--serif); letter-spacing: -0.035em; white-space: nowrap; }
.kachel-satz { font-size: 1.0625rem; max-width: 24ch; }
/* Die Fläche wird nach oben rechts etwas heller, das gibt ihr Tiefe; die Zahl steht im Gold der Knöpfe */
.kachel--gross { grid-column: 1 / span 7; grid-row: 1 / span 2; min-height: 560px; overflow: hidden; color: var(--auf-dunkel); background-color: var(--anthrazit); background-image: var(--dunkel-licht); }
.kachel--gross .kachel-zahl { font-size: min(clamp(4rem, 1.4rem + 7vw, 10rem), 21cqi); color: var(--knopf-gold-hell); }
.kachel--gross .kachel-satz { color: var(--auf-dunkel-weich); }
.kachel--hell { grid-column: 8 / span 5; background: var(--weiss); }
.kachel--stein { grid-column: 8 / span 5; background: var(--stein); }
.kachel-pakete { margin-top: 14px; font-size: var(--t-klein); color: var(--grau); text-wrap: balance; }
/* Die Bilderwand: je Verkauf ein gerahmtes Bild in Eiche, Schwarz oder Weiß, quer und hoch auf einer Mittellinie gehängt wie zu Hause */
.rahmenwand { --b: .8; --q: calc(var(--b) * 96px); display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--b) * 22px) calc(var(--b) * 18px); align-self: end; max-width: 620px; min-height: var(--q); }
.rahmenwand span { --rahmen: #C4A270; --bild: url("../img/villa-aquarell-800.webp"); flex: none; width: var(--q); aspect-ratio: 7 / 5; padding: calc(var(--q) * .06); background: linear-gradient(140deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, .2)), var(--rahmen); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .16), 0 calc(var(--q) * .1) calc(var(--q) * .18) calc(var(--q) * -.05) rgba(0, 0, 0, .65); }
.rahmenwand span.hoch { width: calc(var(--q) * 5 / 7); aspect-ratio: 5 / 7; }
/* Der weiße Rand mit dem Aquarell darin, wie beim echten Bild */
.rahmenwand span::before { content: ""; display: block; width: 100%; height: 100%; background: #FBF9F5 var(--bild) center / 76% auto no-repeat; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2); }
.rahmenwand span:nth-child(3n+2) { --rahmen: #26292F; }
.rahmenwand span:nth-child(3n) { --rahmen: #ECEAE4; }
.rahmenwand span:nth-child(4n+2) { --bild: url("../img/held-aquarell-1200.webp"); }
.rahmenwand span:nth-child(4n+3) { --bild: url("../img/bauhaus-aquarell-800.webp"); }
.rahmenwand span:nth-child(4n) { --bild: url("../img/land-aquarell-800.webp"); }
/* Ein neues Bild erscheint knapp und ohne Umweg; der erste Auftritt wartet, bis die Wand zu sehen ist */
@media (prefers-reduced-motion: no-preference) {
  .rahmenwand span { animation: rahmenDa 200ms var(--ease-out) both paused; }
  .rahmenwand.sichtbar span { animation-play-state: running; }
}
@keyframes rahmenDa { from { opacity: 0; transform: translateY(8px) scale(.94); } }
@media (max-width: 900px) {
  .rechnung-kopf h2, .rechnung-regler { grid-column: 1 / -1; }
  .kachel--gross, .kachel--hell, .kachel--stein { grid-column: 1 / -1; grid-row: auto; min-height: 0; }
  .kachel { border-radius: 24px; }
  .rahmenwand { --q: calc(var(--b) * 76px); }
}

/* ================= 9 Das Bild ================= */
.bild { padding: 0 var(--rand) var(--abschnitt); max-width: var(--breite); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px var(--rand); align-items: center; }
.bild-foto { grid-column: 1 / span 6; position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 30px; background: var(--stein); }
.bild-foto picture, .bild-foto img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; }
.bild-text { grid-column: 8 / span 5; display: grid; gap: 40px; }
.bild-text .daten { width: 100%; }
.bild-wahl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; }
.bild-rahmen { width: 100%; aspect-ratio: 7 / 5; }
.bild-rahmen .pp { height: 100%; display: grid; }
.bild-rahmen .aq { height: 100%; min-height: 0; aspect-ratio: auto; }
.rahmenwahl { border: 0; margin: 0; padding: 0; display: grid; gap: 2px; }
.rahmenwahl legend { font-size: var(--t-klein); color: var(--grau); margin-bottom: 8px; }
.rahmenwahl label { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-weight: 500; white-space: nowrap; }
.rahmenwahl input { position: absolute; opacity: 0; pointer-events: none; }
.muster { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); transition: box-shadow 200ms ease; }
.muster--eiche { background: linear-gradient(135deg, #D9BE94, #C8A676 50%, #A27F50); }
.muster--schwarz { background: linear-gradient(135deg, #45484E, #2B2E33 50%, #121417); }
.muster--weiss { background: linear-gradient(135deg, #FFFFFF, #F7F5F0 50%, #D6D3CC); }
.rahmenwahl input:checked + .muster { box-shadow: 0 0 0 2px var(--papier), 0 0 0 4px var(--tanne); }
.rahmenwahl input:focus-visible + .muster { outline: 2px solid var(--tanne); outline-offset: 5px; }
@media (max-width: 900px) {
  .bild-foto, .bild-text { grid-column: 1 / -1; }
  .bild-foto { border-radius: 24px; aspect-ratio: 4 / 4.4; }
  .bild-wahl { grid-template-columns: 1fr; }
  .rahmenwahl { grid-auto-flow: column; justify-content: start; gap: 20px; }
}

/* ================= 10 Preise ================= */
.preise { padding: 0 var(--rand) var(--abschnitt); max-width: var(--breite); margin: 0 auto; }
.preise-kopf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px var(--rand); align-items: end; margin-bottom: clamp(48px, 6vw, 88px); }
.preise-kopf h2 { grid-column: 1 / span 7; }
.preise-kopf .lead { grid-column: 9 / span 4; }
.einstieg { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin-bottom: 14px; padding: 26px clamp(26px, 3vw, 44px); border-radius: 30px; background: var(--tanne-blass); }
.einstieg-zahl { display: flex; align-items: baseline; gap: 8px; }
.einstieg-zahl .zahl { font: 400 clamp(2.6rem, 1.6rem + 2.4vw, 4rem)/1 var(--serif); letter-spacing: -0.03em; }
.einstieg-text { font-size: 1.125rem; max-width: 52ch; }
.preis-felder { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.preis-feld { min-height: 620px; padding: clamp(30px, 3.6vw, 56px); display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 20px; border-radius: 30px; }
.preis-feld--einzel { grid-column: 1 / span 5; background: var(--stein); }
.preis-feld--paket { grid-column: 6 / span 7; background-color: var(--anthrazit); }
.preis-feld--paket .preis .zahl { color: var(--knopf-gold-hell); }
.preis-feld h3 { font-size: clamp(2.6rem, 1.4rem + 3.2vw, 4.8rem); }
.preis-fuer { font-size: var(--t-lead); max-width: 26ch; }
.preis-text { max-width: 44ch; }
.preis-feld--einzel .preis-text { grid-row: 4; align-self: start; color: var(--grau); }
.preis-feld--paket .preis-text { color: var(--auf-dunkel-weich); }
.preis-fuss { grid-row: 5; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }
.preis { display: flex; align-items: baseline; gap: 12px; }
.preis .zahl { font: 400 clamp(4rem, 1.8rem + 6.4vw, 9rem)/.85 var(--serif); letter-spacing: -0.04em; }
.preis small { font-size: 1rem; opacity: .8; }
.paketwahl { display: flex; flex-wrap: wrap; gap: 8px; }
.paketwahl button { min-width: 64px; min-height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--auf-dunkel); font: 500 1rem/1 var(--sans); cursor: pointer; transition: background-color 200ms ease, color 200ms ease, transform 120ms var(--ease-out); }
.paketwahl button:active { transform: scale(.97); }
.paketwahl button[aria-checked="true"] { background: var(--auf-dunkel); color: var(--tinte); }
@media (hover: hover) and (pointer: fine) { .paketwahl button[aria-checked="false"]:hover { background: rgba(255, 255, 255, .16); } }
.preise-fuss { padding: 24px 4px 0; font-size: var(--t-klein); color: var(--grau); max-width: 72ch; }
@media (max-width: 900px) {
  .preise-kopf h2, .preise-kopf .lead { grid-column: 1 / -1; }
  .preis-feld--einzel, .preis-feld--paket { grid-column: 1 / -1; min-height: 0; border-radius: 24px; }
  .preis-feld--paket { order: -1; }
  .preis-fuss .knopf { width: 100%; }
}

/* ================= 11 Partnerbereich ================= */
.bereich { padding: var(--abschnitt) var(--rand); background-color: var(--nacht); overflow: hidden; }
.bereich-kopf { max-width: var(--breite); margin: 0 auto clamp(56px, 7vw, 104px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px var(--rand); align-items: end; }
.bereich-kopf h2 { grid-column: 1 / span 7; }
.bereich-kopf .lead { grid-column: 9 / span 4; }
.oberflaeche-buehne { max-width: 1240px; margin: 0 auto; perspective: 1800px; }
.oberflaeche { position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr); background: #F6F6F3; color: #10141C; border-radius: 6px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 60px 120px -50px rgba(0, 0, 0, .8); font-size: .875rem; transform-origin: 50% 0; will-change: transform; }
.ob-seite { background: var(--nacht); color: var(--auf-dunkel); padding: 26px 0 18px 18px; display: grid; grid-template-rows: auto 1fr auto; gap: 30px; }
.ob-seite > .ob-marke, .ob-ansprech { margin-right: 18px; }
.ob-marke { width: 128px; }
.ob-seite ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; align-content: start; }
.ob-seite li { position: relative; padding: 10px 12px; border-radius: 10px 0 0 10px; color: var(--auf-dunkel-weich); }
/* Wie im Partnerbereich: der gewählte Eintrag ist ein Stück der Seite */
.ob-seite li.an { background: #F6F6F3; color: #10141C; }
.ob-seite li.an::before, .ob-seite li.an::after { content: ""; position: absolute; right: 0; width: 12px; height: 12px; }
.ob-seite li.an::before { top: -12px; background: radial-gradient(circle at 0 0, transparent 11.5px, #F6F6F3 12px); }
.ob-seite li.an::after { bottom: -12px; background: radial-gradient(circle at 0 100%, transparent 11.5px, #F6F6F3 12px); }
.ob-ansprech { display: grid; gap: 3px; padding: 14px; border-radius: 4px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); font-size: .8125rem; }
.ob-ansprech b { font: italic 400 1.1rem/1.15 var(--serif); }
.ob-ansprech small { color: var(--auf-dunkel-weich); }
.ob-ansprech span { color: var(--auf-dunkel-weich); }
.ob-haupt { padding: 30px 32px 34px; display: grid; gap: 24px; }
.ob-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid #10141C; }
.ob-kopf p { font: italic 400 clamp(1.7rem, 1.2rem + 1.2vw, 2.4rem)/1.02 var(--serif); letter-spacing: -0.02em; }
.ob-zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.ob-zahlen div { padding: 2px 18px 4px; border-left: 1px solid #DADBD7; display: grid; gap: 6px; }
.ob-zahlen div:first-child { padding-left: 0; border-left: 0; }
.ob-zahlen small, .ob-zahlen span { color: #5E636C; }
.ob-zahlen span { font-size: .75rem; }
.ob-zahlen b { font: 400 2.2rem/1 var(--serif); letter-spacing: -0.02em; }
.ob-galerie { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ob-galerie li { display: grid; gap: 8px; padding: 16px 16px 14px; background: #FFFFFF; border-radius: 2px; box-shadow: 0 1px 2px rgba(16, 20, 28, .06), 0 24px 44px -32px rgba(16, 20, 28, .4); }
.ob-rahmen { padding: 5px; aspect-ratio: 7 / 5; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), 0 10px 20px -12px rgba(14, 22, 37, .5); }
.ob-rahmen .pp { height: 100%; display: grid; padding: 9% 8% 12%; }
.ob-rahmen .aq { height: 100%; min-height: 0; aspect-ratio: auto; }
.ob-galerie span { font: italic 400 1.05rem/1.15 var(--serif); margin-top: 6px; padding-top: 10px; border-top: 1px solid #ECECE8; }
.ob-hinweis { margin-top: 18px; text-align: center; color: var(--auf-dunkel-weich) !important; }
@media (max-width: 900px) {
  .bereich-kopf h2, .bereich-kopf .lead { grid-column: 1 / -1; }
  .oberflaeche { grid-template-columns: 1fr; border-radius: 18px; }
  .ob-seite { display: none; }
  .ob-haupt { padding: 20px 16px 22px; }
  .ob-kopf { flex-wrap: wrap; }
  .ob-zahlen { grid-template-columns: 1fr 1fr; }
  .ob-zahlen div:last-child { display: none; }
  .ob-zahlen div { padding: 2px 12px 4px; }
  .ob-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ob-galerie li { padding: 10px; }
}

/* ================= 12 Fragen ================= */
.fragen { padding: var(--abschnitt) var(--rand); max-width: var(--breite); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px var(--rand); align-items: start; }
.fragen-kopf { grid-column: 1 / span 5; position: sticky; top: 120px; display: grid; gap: 28px; }
.fragen-kopf a { color: var(--tinte); font-weight: 520; }
.fragen-liste { grid-column: 7 / span 6; display: grid; }
.fragen details { border-top: 1px solid var(--linie); interpolate-size: allow-keywords; }
.fragen details:last-child { border-bottom: 1px solid var(--linie); }
.fragen summary { list-style: none; display: grid; grid-template-columns: 1fr 28px; gap: 20px; align-items: center; min-height: 84px; padding: 22px 0; cursor: pointer; font: 400 clamp(1.4rem, 1.1rem + .8vw, 1.9rem)/1.15 var(--serif); letter-spacing: -0.01em; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: ""; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--linie);
  background: linear-gradient(currentColor, currentColor) center / 11px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 11px no-repeat; transition: rotate 400ms var(--ease-weich), background-size 300ms ease; }
.fragen details[open] summary::after { rotate: 135deg; }
.fragen details p { padding: 0 48px 28px 0; color: var(--grau); max-width: 60ch; }
/* Die Antwort steht sofort in voller Höhe da und blendet nur kurz auf; keine Höhenbewegung, die die Seite darunter mitschiebt */
@media (prefers-reduced-motion: no-preference) { .fragen details[open] p { animation: antwortDa 220ms var(--ease-out); } }
@keyframes antwortDa { from { opacity: 0; translate: 0 -6px; } }
@media (max-width: 900px) {
  .fragen-kopf, .fragen-liste { grid-column: 1 / -1; }
  .fragen-kopf { position: static; }
  .fragen details p { padding-right: 0; }
}

/* ================= 13 Schluss ================= */
.schluss { padding: 0 var(--rand) var(--abschnitt); max-width: var(--breite); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px var(--rand); align-items: center; }
.schluss-film { grid-column: 1 / span 7; position: relative; margin: 0; aspect-ratio: 1; border-radius: 30px; overflow: hidden; background: var(--nacht); }
.schluss-film video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.film-start { position: absolute; left: clamp(18px, 5%, 44px); bottom: clamp(18px, 5%, 44px); display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.film-start[hidden] { display: none; }
.film-start .spiel { width: 14px; height: 14px; flex: none; }
.film-dauer { font-size: var(--t-klein); color: var(--auf-dunkel-weich); }
.schluss-text { grid-column: 9 / span 4; display: grid; gap: 26px; }
.schluss-text h2 { font-size: clamp(2.8rem, 1.2rem + 4vw, 5.6rem); }
.anmeldung { display: grid; gap: 16px; margin-top: 8px; }
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.anmeldung .knopf { justify-self: start; }
.anmeldung .klein a { color: var(--tinte); font-weight: 500; }
.ansprech { display: grid; gap: 2px; padding-top: 18px; }
.ansprech p:not(.klein) { font-weight: 500; }
.ansprech a { color: var(--tinte); }
@media (max-width: 900px) {
  .schluss-film, .schluss-text { grid-column: 1 / -1; }
  .schluss-film { order: 2; margin: 0 calc(var(--rand) * -1); border-radius: 0; }
  .feld-paar { grid-template-columns: 1fr; }
  .anmeldung .knopf { width: 100%; }
}