/* ESTATIQS – Handy-Seite (mobil.html)
Eigene Gestaltung fürs Hochformat: Film im 6:5-Fenster (ganzes Haus), Text darunter statt darauf,
wischbare Karten, Reiter und Akkordeons statt langer Stapel. CI wie die Desktop-Seite:
Inter / Inter Tight, #1D1D1F auf #FBFBFD, Pill-Buttons, Gold nur als Akzent. */
:root {
--bg: #fbfbfd;
--surface: #ffffff;
--soft: #f2f2f5;
--ink: #1d1d1f;
--muted: #6e6e73;
--faint: #737378; /* ≥ 4,5:1 auf Weiß (vorher #8e8e93 = 3,3:1) */
--line: rgba(29, 29, 31, 0.1);
--platin: #8f98a1; /* Akzent statt Gold (CI) */
--dark: #0e1015;
--dark-2: #191c23;
--on-dark: #f5f5f7;
--on-dark-muted: rgba(245, 245, 247, 0.62);
--display: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "SF Pro Display", sans-serif;
--body: "Inter", ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "Segoe UI", sans-serif;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--hdr-h: calc(56px + env(safe-area-inset-top, 0px));
--g: max(20px, env(safe-area-inset-left, 0px));
--gr: max(20px, env(safe-area-inset-right, 0px));
color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
/* Sprünge landen genau an der Unterkante der Kopfzeile (vorher + 8 px: dort blieb ein Streifen der vorigen Sektion stehen) */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--hdr-h); }
body {
margin: 0;
padding-top: var(--hdr-h);
background: var(--bg);
color: var(--ink);
font: 16px/1.5 var(--body);
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
.sec--dark :focus-visible, .mbuild :focus-visible, .lightbox :focus-visible { outline-color: #fff; }
.skip { position: fixed; left: 12px; top: 12px; z-index: 200; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; transform: translateY(-200%); transition: transform 0.2s; }
.skip:focus { transform: none; }
.skip-link { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
[hidden] { display: none !important; }
/* ---------- Typo ---------- */
.eyebrow { margin: 0 0 10px; font-size: 11.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.mh1, .mh2, .mh3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
.mh1 { font-size: clamp(27px, 7.6vw, 34px); line-height: 1.07; }
.mh2 { font-size: clamp(27px, 7.4vw, 34px); line-height: 1.08; }
.mh3 { font-size: 21px; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 14px; }
.lead { margin: 12px 0 0; font-size: 16px; color: var(--muted); }
.sub { margin: 10px 0 0; font-size: 15.5px; line-height: 1.45; color: var(--muted); }
.muted { color: var(--muted); font-size: 15px; margin: 0 0 14px; }
.note { margin: 12px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.note__link { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 600; font-size: 16px; transition: transform 0.2s var(--ease), background 0.2s; }
.btn:active { transform: scale(0.97); }
.btn svg { width: 16px; height: 16px; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--light { background: #fff; color: var(--ink); }
.btn--block { display: flex; width: 100%; }
/* ---------- Kopfzeile & Menü ---------- */
.hdr {
position: fixed; inset: 0 0 auto; z-index: 50;
height: var(--hdr-h);
padding: env(safe-area-inset-top, 0px) var(--gr) 0 var(--g);
display: flex; align-items: center; justify-content: space-between;
background: rgba(251, 251, 253, 0.86);
-webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
border-bottom: 1px solid var(--line);
}
.logo { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 600; letter-spacing: 0.24em; font-size: 14px; }
.logo svg { width: 24px; height: 24px; }
.menu-btn { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; }
.menu-btn i { position: relative; width: 14px; height: 2px; background: currentColor; border-radius: 2px; transition: background 0.2s; }
.menu-btn i::before, .menu-btn i::after { content: ""; position: absolute; left: 0; width: 14px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.3s var(--ease); }
.menu-btn i::before { transform: translateY(-5px); }
.menu-btn i::after { transform: translateY(5px); }
.menu-btn[aria-expanded="true"] i { background: transparent; }
.menu-btn[aria-expanded="true"] i::before { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] i::after { transform: rotate(-45deg); }
.menu {
position: fixed; inset: var(--hdr-h) 0 0; z-index: 49;
display: flex; flex-direction: column; gap: 2px;
padding: 16px var(--gr) calc(24px + env(safe-area-inset-bottom, 0px)) var(--g);
background: var(--bg); overflow-y: auto;
animation: menuIn 0.35s var(--ease);
}
.menu a:not(.btn) { display: flex; align-items: baseline; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; }
.menu small { font-family: var(--body); font-size: 12px; color: var(--faint); letter-spacing: 0.08em; }
.menu .btn { margin-top: 22px; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-8px); } }
body.menu-open { overflow: hidden; }
/* ---------- Scrollfilm ---------- */
.mfilm { position: relative; height: 480vh; height: 480svh; }
.mfilm__sticky { position: sticky; top: var(--hdr-h); height: calc(100vh - var(--hdr-h)); height: calc(100svh - var(--hdr-h)); display: flex; flex-direction: column; overflow: hidden; }
/* Die Texte liegen im Bild, also darf das Bild groß sein: --media höchstens quadratisch, auf kleinen Handys auch flacher
als 6:5 (dann oben/unten beschnitten, die Breite bleibt ganz). Unter dem
Bild liegt ein Streifen Grund (--band), in den das Bild weich ausläuft und über den der Text hinüberreicht – so deckt
er weniger Bild ab. Darunter nur Liste, Knopf oder Kennzahlen (--below je Abschnitt).
--fx: waagerechter Bildausschnitt (0 links … 1 rechts) */
.mfilm__stage {
--media: min(100vw, max(58vw, calc(100svh - var(--hdr-h) - var(--bar-h) - var(--below, 96px) - var(--band, 0px))),
calc(100svh - var(--hdr-h) - var(--bar-h) - 40px - var(--band, 0px)));
position: relative; flex: none; overflow: hidden; width: 100%; height: calc(var(--media) + var(--band, 0px));
}
.mfilm__stage > img, .mfilm__stage > video { position: absolute; inset: 0 0 auto; width: 100%; height: var(--media); object-fit: cover; object-position: calc(var(--fx, 0.5) * 100%) 50%; }
.mfilm__poster, [data-scene-poster] { background: #ececef; }
/* Bildfolge (seq.js) statt Video: liegt wie das Video über dem Standbild, sichtbar ab dem ersten gezeichneten Bild */
.mfilm__stage > canvas.seq, .mbuild__stage > canvas.seq { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.25s; pointer-events: none; }
.mfilm__stage > canvas.seq { bottom: auto; height: var(--media); }
canvas.seq.is-on { opacity: 1; }
.mfilm__night { opacity: 0; transition: opacity 0.7s var(--ease); pointer-events: none; }
.mfilm__night.is-on { opacity: 1; }
.mfilm__line { position: absolute; inset: 0 0 auto; width: 100%; height: var(--media); fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.mfilm__toggle {
position: absolute; left: 50%; top: 12px; z-index: 3; transform: translate(-50%, -8px);
display: flex; padding: 4px; gap: 2px; border-radius: 999px;
background: rgba(20, 22, 28, 0.42); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.22);
opacity: 0; pointer-events: none; transition: opacity 0.35s, transform 0.35s var(--ease);
}
.mfilm__toggle.is-active { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.mfilm__toggle button { height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, 0.86); white-space: nowrap; }
.mfilm__toggle button[aria-pressed="true"] { background: #fff; color: var(--ink); }
.mfilm__loader { position: absolute; top: 10px; right: 12px; z-index: 3; display: flex; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); transition: opacity 0.5s; }
.mfilm__loader b { width: 44px; height: 2px; background: rgba(29, 29, 31, 0.12); overflow: hidden; }
.mfilm__loader i { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.mfilm__loader.is-done { opacity: 0; }
.mfilm__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, 0.25); z-index: 2; }
.mfilm__progress i { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
.mfilm__panel { position: relative; flex: 1 1 auto; min-height: 0; }
/* Unter dem Bild: was nicht ins Bild gehört (Liste, Knopf, Kennzahlen), direkt an der Bildkante */
.beat {
position: absolute; inset: 0 var(--gr) 0 var(--g);
display: flex; flex-direction: column; justify-content: flex-start; padding: 14px 0 6px;
opacity: 0; transform: translateY(10px); pointer-events: none;
transition: opacity 0.45s var(--ease), transform 0.6s var(--ease);
}
.mfilm__panel .mh1 { font-size: clamp(29px, 8.8vw, 40px); }
.mfilm__panel .sub { font-size: clamp(15.5px, 4.3vw, 17.5px); }
@media (max-height: 720px) {
.beat--spec .eyebrow { display: none; }
.beat--spec .mh2 { font-size: 24px; }
.beat--spec .spec { gap: 6px; margin: 10px 0; }
.beat--spec .spec div { padding: 6px 9px; }
.beat--spec .btn { min-height: 44px; }
}
.beat.is-active { opacity: 1; transform: none; pointer-events: auto; }
.spec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.spec div { padding: 9px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.spec dt { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.spec dd { margin: 2px 0 0; font-weight: 600; font-size: 14.5px; }
/* Film abspielen: freiwillig, oben links im Bild, solange der Film läuft */
.mfilm__ctrl { position: absolute; top: 10px; left: 10px; z-index: 4; transition: opacity 0.35s, visibility 0s linear 0.35s; }
.mfilm__ctrl.is-gone { opacity: 0; visibility: hidden; }
.mfilm__play { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 6px 20px rgba(29, 29, 31, 0.16); color: var(--ink); font-size: 13.5px; font-weight: 600;
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.mfilm__play svg { width: 14px; height: 14px; }
.mfilm__play .i-pause, .mfilm__play.is-playing .i-play { display: none; }
.mfilm__play.is-playing .i-pause { display: block; }
.hint {
position: absolute; left: 50%; bottom: 14px; z-index: 4; transform: translateX(-50%); pointer-events: none;
display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 10px 22px 8px; border-radius: 22px;
background: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
border: 1px solid rgba(255, 255, 255, 0.75);
box-shadow: 0 8px 28px rgba(29, 29, 31, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink);
transition: opacity 0.4s, transform 0.4s var(--ease);
}
.hint.is-gone { opacity: 0; transform: translate(-50%, 10px); pointer-events: none; }
.hint__chev { display: flex; flex-direction: column; align-items: center; }
.hint__chev svg { width: 16px; height: 8px; margin-top: -2px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.15; animation: chev 1.5s 6; }
.hint__chev svg:nth-child(2) { animation-delay: 0.2s; }
.hint__chev svg:nth-child(3) { animation-delay: 0.4s; }
@keyframes chev { 0%, 100% { opacity: 0.15; } 30% { opacity: 1; } 60% { opacity: 0.15; } }
/* ---------- Abschnitte ---------- */
.sec { padding: 56px var(--gr) 56px var(--g); }
.sec--white { background: var(--surface); }
.sec--dark { background: var(--dark); color: var(--on-dark); }
.sec--dark .eyebrow, .sec--dark .lead { color: var(--on-dark-muted); }
.head { margin-bottom: 24px; }
.block { margin-top: 44px; }
/* Zahlen */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.stat b { display: block; font-family: var(--display); font-weight: 600; font-size: 28px; letter-spacing: -0.03em; line-height: 1.1; }
.stat span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; color: var(--muted); }
/* Wischleisten */
.rail {
display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
margin: 0 calc(-1 * var(--gr)) 0 calc(-1 * var(--g)); padding: 2px var(--gr) 6px var(--g);
scroll-padding: 0 var(--g); overscroll-behavior-x: contain;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 84%; scroll-snap-align: start; min-width: 0; }
.dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(29, 29, 31, 0.18); transition: width 0.3s var(--ease), background 0.3s; }
.dots i.is-on { width: 20px; background: var(--ink); }
.sec--dark .dots i { background: rgba(255, 255, 255, 0.25); }
.sec--dark .dots i.is-on { background: #fff; }
.card { display: flex; flex-direction: column; padding: 22px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.sec--white .card { background: var(--bg); }
.card h3 { margin: 0 0 8px; font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.card p { margin: 0; font-size: 15px; color: var(--muted); }
.card--media { padding: 10px 10px 20px; }
.card--media h3, .card--media p { padding: 0 12px; }
.card__video { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; margin-bottom: 14px; background: var(--soft); }
.card__video video { width: 100%; height: 100%; object-fit: cover; }
.card__stat { margin-top: 14px !important; color: var(--ink) !important; font-size: 14px !important; }
.card__stat b { font-family: var(--display); font-size: 22px; margin-right: 4px; }
/* Performance */
.own { list-style: none; margin: 0; padding: 0; }
.own li { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.own li:last-child { border-bottom: 1px solid var(--line); }
.own h3 { margin: 0 0 3px; font-size: 16.5px; font-weight: 600; }
.own p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--soft); }
.ico svg { width: 20px; height: 20px; }
.own--gold .ico { background: var(--ink); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.chip { flex: none; height: 36px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; font-weight: 500; transition: background 0.2s, color 0.2s; }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
#tabAds .chips { margin: 0 0 16px; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: transparent; margin: 0; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: #dcdce1; }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: #dcdce1; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(29, 29, 31, 0.22); }
input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(29, 29, 31, 0.22); }
.adsx .h3 { font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.adsx .eyebrow { display: none; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { padding: 6px 11px; border-radius: 999px; background: var(--soft); font-size: 12.5px; }
.tags--dark span { background: rgba(255, 255, 255, 0.08); color: var(--on-dark); }
/* Bauträger */
/* Bauträger: das Video füllt die ganze Fläche zwischen Kopf und Leiste. Überschrift oben im Video (sie weicht, sobald die
Türme in ihren Bereich wachsen), Kennzahlen und Bauphase unten im Video auf einem weichen dunklen Verlauf. */
.mbuild { position: relative; height: 440vh; height: 440svh; background: var(--dark); color: var(--on-dark); --band: 96px; }
@media (max-height: 640px) { .mbuild { --band: 40px; } }
.mbuild__sticky { position: sticky; top: var(--hdr-h); height: calc(100vh - var(--hdr-h)); height: calc(100svh - var(--hdr-h)); display: flex; flex-direction: column; overflow: hidden; }
.mbuild__stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--dark); }
.mbuild__stage > img, .mbuild__stage > video, .mbuild__stage > canvas.seq { position: absolute; inset: 0 0 auto; width: 100%; height: calc(100% - var(--band)); object-fit: cover; object-position: calc(var(--fx, 0.5) * 100%) 50%; }
.mbuild__poster { background: #2b2b30; }
.mbuild__stage::before, .mbuild__stage::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.mbuild__stage::before { top: 0; height: 200px; background: linear-gradient(180deg, rgba(10, 11, 14, 0.62), rgba(10, 11, 14, 0.3) 50%, rgba(10, 11, 14, 0)); transition: opacity 0.6s; }
.mbuild.is-tall .mbuild__stage::before { opacity: 0.3; }
.mbuild__stage::after { bottom: 0; height: calc(var(--info, 170px) + 100px);
background: linear-gradient(0deg, #0e1015 0, #0e1015 var(--band), rgba(14, 16, 21, 0.74) calc(var(--band) + 48px), rgba(14, 16, 21, 0)); }
.mbuild__night { opacity: 0; transition: opacity 0.7s var(--ease); }
.mbuild__night.is-on { opacity: 1; }
.mbuild__head { position: absolute; z-index: 2; left: 0; right: 0; top: 0; padding: 16px var(--gr) 0 var(--g); pointer-events: none;
text-shadow: 0 1px 20px rgba(0, 0, 0, 0.35); transition: opacity 0.5s, transform 0.6s var(--ease); }
.mbuild.is-tall .mbuild__head { opacity: 0; transform: translateY(-10px); }
.mbuild__head .eyebrow { color: rgba(245, 245, 247, 0.86); }
.mbuild__head .mh2 { font-size: clamp(26px, 7.4vw, 32px); }
.mbuild__info { position: absolute; z-index: 2; left: 0; right: 0; bottom: var(--bar-h); padding: 0 var(--gr) 14px var(--g); }
.mbuild .mfilm__progress { top: 0; bottom: auto; }
.meters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.meter { padding: 9px 10px; border-radius: 12px; background: var(--dark-2); }
.mbuild .meters { gap: 6px; }
.mbuild .meter { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.meter span { display: block; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-muted); }
.meter b { display: block; font-family: var(--display); font-size: 18px; font-variant-numeric: tabular-nums; }
.meter i { display: block; height: 3px; margin-top: 6px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.meter em { display: block; height: 100%; background: rgba(255, 255, 255, 0.5); transform-origin: left; transform: scaleX(0); }
.meter--gold em { background: #fff; }
.phase { list-style: none; margin: 12px 0 0; padding: 0; position: relative; min-height: 66px; }
.phase li { position: absolute; inset: 0 0 auto; opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.45s var(--ease); }
.phase li.is-active { opacity: 1; transform: none; }
.phase b { display: block; font-size: 16.5px; }
.phase b small { font-weight: 500; color: rgba(245, 245, 247, 0.7); margin-right: 8px; letter-spacing: 0.08em; }
.phase span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.4; color: rgba(245, 245, 247, 0.84); }
.mbuild .note { margin-top: 4px; font-size: 11px; color: rgba(245, 245, 247, 0.6); }
@media (max-height: 640px) { .mbuild .note { display: none; } .mbuild__head .mh2 { font-size: 24px; } }
/* Vorher/Nachher */
.compare { position: relative; aspect-ratio: 3 / 2; border-radius: 20px; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; background: var(--soft); }
.compare--169 { aspect-ratio: 16 / 9; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.compare__top { clip-path: inset(0 0 0 var(--pos)); }
.compare__label { position: absolute; top: 12px; z-index: 2; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.86); font-size: 12px; font-weight: 600; }
.compare__label--l { left: 12px; }
.compare__label--r { right: 12px; }
.compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 2; width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.compare__handle span { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22); }
.compare__handle svg { width: 20px; height: 20px; }
.compare input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hint-line { margin: 10px 0 18px; font-size: 13px; color: var(--muted); text-align: center; }
/* 3D-Visualisierung */
.block .chips { margin-top: 12px; }
.rail--gallery > * { flex-basis: 78%; }
.shot { margin: 0; position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--soft); }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot figcaption { position: absolute; inset: auto 0 0; padding: 40px 14px 12px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); color: #fff; font-weight: 600; font-size: 15px; }
.shot__open { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
.shot__open:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
.shot small { display: block; font-weight: 400; font-size: 12.5px; opacity: 0.85; }
.viewer { position: relative; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: #111; }
.viewer img, .viewer iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.viewer__cover { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.22); }
.viewer__meta { position: absolute; left: 14px; bottom: 12px; color: #fff; font-size: 12.5px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
.viewer__meta b { display: block; font-family: var(--display); font-size: 19px; }
.rail--reels > * { flex-basis: 58%; }
.reel { margin: 0; }
.reel__frame { position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #111; }
.reel video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 18px; background: #111; }
.reel__frame video { height: 100%; border-radius: 0; }
.reel figcaption { margin-top: 8px; font-weight: 600; font-size: 14px; }
.reel small { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); }
/* Projekte */
.pex__chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gr)) 14px calc(-1 * var(--g)); padding: 0 var(--gr) 0 var(--g); }
.pex__chips::-webkit-scrollbar { display: none; }
.pex__chips button { flex: none; height: 38px; padding: 0 15px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); font-size: 14px; font-weight: 500; color: var(--on-dark-muted); white-space: nowrap; }
.pex__chips button[aria-pressed="true"] { background: #fff; color: var(--ink); border-color: #fff; }
.pex__auto { display: inline-flex; align-items: center; gap: 8px; height: 38px; margin-top: 12px; padding: 0 15px 0 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); color: var(--on-dark); font-size: 13.5px; font-weight: 600; }
.pex__auto svg { width: 14px; height: 14px; }
.pex__auto .i-play, .pex__auto:not(.is-on) .i-pause { display: none; }
.pex__auto:not(.is-on) .i-play { display: block; }
.pex__stage { position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: #1b1e25; }
.pex__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.8s var(--ease); }
.pex__stage.is-portrait img { object-fit: contain; }
.pex__night { opacity: 0; }
.pex__stage.is-night .pex__night { opacity: 1; }
.pex__stage.is-swapping img { opacity: 0 !important; transition-duration: 0.18s; }
.pex__stage .mfilm__toggle { top: auto; left: 12px; bottom: 12px; transform: none; }
.pex__stage.no-night .mfilm__toggle { display: none; }
.pex__cap { position: absolute; top: 12px; left: 12px; margin: 0; padding: 5px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); font-size: 12px; font-weight: 600; color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pex__views { position: absolute; right: 12px; bottom: 16px; display: flex; gap: 6px; }
.pex__views button { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); box-shadow: 0 0 0 8px transparent; }
.pex__views button[aria-pressed="true"] { background: #fff; }
.pex__info { margin-top: 18px; }
.pex__meta { margin: 0; font-size: 13px; color: var(--on-dark-muted); }
.pex__name { margin: 2px 0 6px; font-family: var(--display); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.pex__case { margin: 0 0 10px; font-size: 14.5px; color: var(--on-dark-muted); }
.pex__case:empty { display: none; }
.pex__case b { color: #fff; font-weight: 600; }
.pex__facts { margin: 0 0 16px; display: grid; }
.pex__facts div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 14px; }
.pex__facts dt { color: var(--on-dark-muted); }
.pex__facts dd { margin: 0; text-align: right; font-weight: 500; }
/* 90-Tage-Plan */
.plan__now { display: flex; gap: 16px; align-items: flex-start; min-height: 132px; }
.plan__day { flex: none; width: 86px; padding: 12px 0; border-radius: 18px; background: var(--ink); color: #fff; text-align: center; }
.plan__day span { display: block; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.65; }
.plan__day b { display: block; font-family: var(--display); font-size: 36px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.plan__now p:not(.eyebrow) { margin: 0; font-size: 15px; }
.plan__now small { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
.plan__track { position: relative; height: 44px; margin-top: 10px; }
.plan__track::before { content: ""; position: absolute; left: 0; right: 0; top: 20px; height: 4px; border-radius: 2px; background: #dcdce1; }
.plan__track i { position: absolute; left: 0; top: 20px; height: 4px; border-radius: 2px; background: var(--ink); }
.plan__track span { position: absolute; top: 16px; left: calc(var(--p) * 1%); width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); }
.plan__track span.gold { border-color: var(--ink); background: var(--ink); }
.plan__track input { position: absolute; inset: 0; height: 44px; }
.plan__track input::-webkit-slider-runnable-track { background: transparent; }
.plan__track input::-moz-range-track { background: transparent; }
.plan__labels { display: grid; grid-template-columns: 7.8fr 25.5fr 33.4fr 33.3fr; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.plan__labels span { padding-right: 4px; white-space: nowrap; overflow: hidden; }
.plan__labels span:first-child { visibility: hidden; }
.timeline { list-style: none; margin: 24px 0 0; padding: 0 0 0 22px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.timeline li { position: relative; padding: 0 0 16px; }
.timeline li::before { content: ""; position: absolute; left: -22px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid #c7c7cc; transition: background 0.3s, border-color 0.3s; }
.timeline li.is-reached::before { background: var(--ink); border-color: var(--ink); }
.timeline li.gold.is-reached::before { background: var(--ink); border-color: var(--ink); box-shadow: 0 0 0 3px rgba(29, 29, 31, 0.15); }
.timeline b { display: block; font-size: 15px; }
.timeline span { display: block; font-size: 14.5px; color: var(--muted); }
.timeline time { display: block; font-size: 12.5px; color: var(--faint); }
.plan__more { margin-top: 8px; border-radius: 18px; background: var(--bg); border: 1px solid var(--line); }
.plan__more summary { padding: 14px 16px; font-weight: 600; list-style: none; cursor: pointer; }
.plan__more summary::-webkit-details-marker { display: none; }
.plan__more summary::after { content: " +"; color: var(--faint); }
.plan__more[open] summary::after { content: " –"; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px 16px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.field:first-child { grid-column: 1 / -1; }
.field input { height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(29, 29, 31, 0.22); background: #fff; font: 500 16px var(--body); color: var(--ink); width: 100%; min-width: 0; }
.field input[aria-invalid="true"] { border-color: #b3261e; box-shadow: 0 0 0 1px #b3261e; }
.field__err { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: #8c1d18; }
.field--out { grid-column: 1 / -1; padding: 12px; border-radius: 12px; background: var(--ink); color: rgba(255, 255, 255, 0.7); }
.field--out b { font-family: var(--display); font-size: 22px; color: #fff; }
/* Cases & Stimmen */
.case { border-radius: 20px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.case img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.case div { padding: 16px 18px 20px; }
.case span { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.case h3 { margin: 6px 0 6px; font-family: var(--display); font-size: 19px; line-height: 1.2; letter-spacing: -0.02em; }
.case p { margin: 0; font-size: 14.5px; color: var(--muted); }
.quote { margin: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; border-radius: 22px; background: var(--bg); border: 1px solid var(--line); }
.quote blockquote { margin: 0 0 18px; font-family: var(--display); font-size: 18.5px; line-height: 1.35; letter-spacing: -0.01em; }
.quote figcaption { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 14.5px; }
.quote i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; font-style: normal; font-size: 13px; }
.quote small { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); }
/* Kontakt & Fuß */
.foot { padding: 36px var(--gr) calc(110px + env(safe-area-inset-bottom, 0px)) var(--g); border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.foot .logo { color: var(--ink); }
.foot p { margin: 12px 0; }
.foot details { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; margin: 16px 0; }
.foot summary { font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; }
.foot summary::-webkit-details-marker { display: none; }
.foot summary::after { content: " +"; color: var(--faint); }
.foot details[open] summary::after { content: " –"; }
.foot__switch { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); font-weight: 600; }
.foot__legal { font-size: 13px; }
.foot__row { display: flex; flex-wrap: wrap; gap: 8px; }
.foot__switch[aria-pressed="true"]::after { content: " ✓"; }
.foot__legal a { text-decoration: underline; text-underline-offset: 2px; }
/* Bildansicht: natives modales