/* ────────────────────────────────────────────────────────────────────────── Immo Studio: Firmenwebseite (mg-portal.de/immo-studio) Wirkung: hochwertig und edel, mit einem Hauch technisch-präzise. Signatur: die Linie. Eine feine blaue Linie hängt die Wohnungen ans Haus, zeichnet den Plan, läuft durch drei Räume, zieht die Ringe der Lage, trägt die Tafel und führt durch den Ablauf. Farben aus dem Logo: #101820 (Tinte), #1058c0 (Blau), #88b8f0 (Hellblau). Schrift: Geist (variabel, OFL), eine Familie wie in den Exposés. Hell, immer. Keine dunklen Flächen, kein Blau als große Fläche. ────────────────────────────────────────────────────────────────────────── */ @font-face { font-family: Geist; src: url(/immo-studio/schrift/geist-latin.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Geist; src: url(/immo-studio/schrift/geist-latin-ext.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { --weiss: #ffffff; --band: #e4ebf4; /* Hellblau der Exposés */ --band-hell: #f2f6fb; --tinte: #101820; /* Logo dunkel */ --text: #36404d; --leise: #586474; /* 5,6:1 auf Weiß, 4,7:1 auf dem Band */ --akzent: #1058c0; /* Logo blau: nur Linien, Knöpfe, Links */ --akzent-dunkel: #0b4496; --hell: #88b8f0; /* Logo hellblau: nur Zierlinien */ --linie: #d3dce8; --linie-fein: #e6ecf3; --rand: clamp(20px, 4vw, 76px); /* Deckel bei 1760 px (Phil, 09.10.2026: „auf 3400 px Inhalt auf max. 1760 px deckeln und zentrieren"). Vorher wuchs das Raster mit dem Fenster (80vw): Auf seinem 3400-px-Monitor lief die Zeile dann über 2700 px breit, und Bedienung wie Text klebten an den Bildschirmrändern. Dasselbe Maß hat das Bildmenü der Exposés. */ --raster: min(1760px, calc(100vw - 2 * var(--rand))); /* Lesbare Satzbreite: 60 bis 70 Zeichen je Zeile. In Geist entspricht ein „em" etwa zwei Zeichen, darum 33em. Eine Stelle, damit es überall gleich ist. */ --mass: 33em; --links: calc((100vw - var(--raster)) / 2); --kopf: 76px; --weich: cubic-bezier(.2, .7, .2, 1); --abschnitt: clamp(72px, 9vw, 168px); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf) + 12px); font-size: clamp(100%, .3vw + 62%, 128%); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--weiss); color: var(--text); font: 400 1.0625rem/1.6 Geist, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } img, svg, model-viewer { display: block; max-width: 100%; } img { height: auto; } a { color: var(--akzent); text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--akzent-dunkel); } :focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 2px; } h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } button { font: inherit; color: inherit; } .raster { width: var(--raster); margin-inline: auto; } .nur-leser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .sprung { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--tinte); color: #fff; padding: 12px 18px; border-radius: 4px; text-decoration: none; } .sprung:focus { top: 12px; color: #fff; } /* ── Schriftstufen: wenige, mit großem Abstand zueinander ───────────────── */ .ueberzeile { display: flex; align-items: center; gap: 14px; font-size: .75rem; line-height: 1.3; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--leise); } .ueberzeile::before { content: ""; flex: none; width: 34px; height: 1px; background: var(--akzent); } .t-riesig { color: var(--tinte); font-weight: 340; letter-spacing: -.042em; line-height: .98; text-wrap: balance; font-size: clamp(2.3rem, min(5.5vw, 9.4svh), 8.25rem); } .t-gross { color: var(--tinte); font-weight: 360; letter-spacing: -.036em; line-height: 1.02; text-wrap: balance; font-size: clamp(2rem, min(4.1vw, 7.4svh), 5.25rem); } .t-aussage { color: var(--tinte); font-size: clamp(1.1875rem, 1.32vw, 1.625rem); line-height: 1.42; letter-spacing: -.012em; text-wrap: pretty; max-width: 26em; } .t-text { text-wrap: pretty; max-width: var(--mass); } /* Mehrere Absätze hintereinander: fester Abstand, damit die Blöcke nicht kleben. Phils Regel: kein Block über drei Sätze. */ .t-text + .t-text { margin-top: 1.1em; } .t-klein { font-size: .8125rem; line-height: 1.5; color: var(--leise); } strong, b { font-weight: 600; color: var(--tinte); } /* ── Knöpfe ──────────────────────────────────────────────────────────────── */ .knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 24px; background: var(--akzent); color: #fff; border: 1px solid var(--akzent); border-radius: 3px; cursor: pointer; font-size: .9375rem; font-weight: 550; letter-spacing: -.005em; text-decoration: none; white-space: nowrap; transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s var(--weich); } .knopf:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); color: #fff; } .knopf--leer { background: rgba(255, 255, 255, .7); color: var(--tinte); border-color: #b9c6d6; } .knopf--leer:hover { background: #fff; color: var(--akzent-dunkel); border-color: var(--akzent); } .knopf svg { width: 16px; height: 16px; flex: none; transition: transform .3s var(--weich); } .knopf:hover svg { transform: translateX(3px); } /* ── Kopfzeile: durchsichtig über dem Auftakt, fest beim Scrollen ────────── */ .kopf { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--kopf); display: flex; align-items: center; transition: background .35s ease, box-shadow .35s ease, height .35s var(--weich); } .kopf::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--linie); opacity: 0; transition: opacity .35s ease; } .kopf[data-fest] { background: rgba(255, 255, 255, .93); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); height: 64px; } .kopf[data-fest]::after { opacity: 1; } .kopf__innen { width: var(--raster); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .kopf__logo { display: block; flex: none; } .kopf__logo img { height: clamp(36px, 2.7vw, 54px); width: auto; transition: height .35s var(--weich); } .kopf[data-fest] .kopf__logo img { height: 34px; } .kopf__nav { display: flex; align-items: center; gap: clamp(18px, 2vw, 40px); } .kopf__nav a:not(.knopf) { position: relative; padding: 12px 0; color: var(--tinte); font-size: .9375rem; text-decoration: none; } .kopf__nav a:not(.knopf)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 7px; height: 1px; background: var(--akzent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--weich); } .kopf__nav a:not(.knopf):hover::after, .kopf__nav a[aria-current="true"]::after { transform: scaleX(1); } .kopf__nav .knopf { min-height: 44px; padding: 9px 20px; } .kopf__menue { display: none; } .fortschritt { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--akzent); transform: scaleX(var(--seite, 0)); transform-origin: 0 50%; z-index: 1; } @media (max-width: 1040px) { :root { --kopf: 64px; } .kopf__menue { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; margin-right: -14px; background: none; border: 0; cursor: pointer; font-size: .9375rem; font-weight: 550; color: var(--tinte); } .kopf__menue i { position: relative; display: block; width: 22px; height: 12px; } .kopf__menue i::before, .kopf__menue i::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .3s var(--weich), top .3s var(--weich); } .kopf__menue i::before { top: 0; } .kopf__menue i::after { top: 10px; } .kopf__menue[aria-expanded="true"] i::before { top: 5px; transform: rotate(45deg); } .kopf__menue[aria-expanded="true"] i::after { top: 5px; transform: rotate(-45deg); } .kopf__nav { position: fixed; inset: var(--kopf) 0 0 0; z-index: 49; background: #fff; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--rand) 32px; overflow-y: auto; visibility: hidden; opacity: 0; transition: opacity .3s ease, visibility 0s linear .3s; } .kopf[data-offen] { background: #fff; } .kopf[data-offen] .kopf__nav { visibility: visible; opacity: 1; transition: opacity .3s ease; } .kopf__nav a:not(.knopf) { padding: 18px 0; font-size: 1.5rem; letter-spacing: -.02em; border-bottom: 1px solid var(--linie-fein); } .kopf__nav a:not(.knopf)::after { display: none; } .kopf__nav .knopf { margin-top: 28px; min-height: 54px; font-size: 1rem; } /* Ohne Skript gibt es keinen Schalter: Die Kopfzeile steht im Fluss der Seite, das Menü bricht in Zeilen um. So ist jeder Punkt zu sehen und zu erreichen, nichts verdeckt etwas. */ html:not(.js) .kopf { position: static; height: auto; display: block; padding: 12px 0 6px; background: #fff; border-bottom: 1px solid var(--linie); } html:not(.js) .kopf__menue, html:not(.js) .fortschritt { display: none; } html:not(.js) .kopf__innen { flex-wrap: wrap; } html:not(.js) .kopf__nav { position: static; visibility: visible; opacity: 1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 20px; padding: 4px 0 0; overflow: visible; width: 100%; background: none; } html:not(.js) .kopf__nav a:not(.knopf) { font-size: .9375rem; padding: 12px 0; border: 0; white-space: nowrap; } html:not(.js) .kopf__nav .knopf { margin: 6px 0; min-height: 44px; font-size: .9375rem; } html:not(.js) .auftakt__titel, html:not(.js) .unterkopf { padding-top: clamp(20px, 4svh, 40px); } } /* ── Handy-Kopf, 11.10.2026 (Phil, 03:50: „das Menü, die Menüleiste, das geht gar nicht") Eine ruhige weiße Leiste mit Haarlinie, auf jeder Seite gleich: Logo links (28 px), nur das Symbol rechts, keine Durchsicht auf das Auftaktbild. Aufgeklappt eine Vollbild-Liste mit großen Zeilen und Haarlinien, der Knopf als volle Breite am Ende, die Seite dahinter steht still. Gilt nur unterhalb von 1041 px, die PC-Leiste bleibt unberührt. */ @media (max-width: 1040px) { :root { --kopf: 56px; } html.js .kopf, html.js .kopf[data-fest] { height: var(--kopf); background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; } html.js .kopf::after { opacity: 1; } .kopf__logo { display: flex; align-items: center; min-height: 44px; } .kopf__logo img, .kopf[data-fest] .kopf__logo img { height: 28px; } .kopf__menue { width: 44px; height: 44px; min-height: 44px; padding: 0; margin-right: -11px; justify-content: center; } .kopf__menue span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .kopf__menue i { width: 22px; height: 12px; } .kopf__nav { padding: 4px var(--rand) calc(28px + env(safe-area-inset-bottom)); overscroll-behavior: contain; border-top: 1px solid var(--linie); margin-top: -1px; } .kopf__nav a:not(.knopf) { display: flex; align-items: center; min-height: 60px; padding: 0; font-size: 1.375rem; line-height: 1.2; font-weight: 400; letter-spacing: -.018em; color: var(--tinte); border-bottom: 1px solid var(--linie-fein); } .kopf__nav .knopf { width: 100%; margin-top: 28px; min-height: 52px; font-size: 1rem; } .kopf[data-offen] .fortschritt { opacity: 0; } /* Die Seite hinter dem offenen Menü scrollt nicht mit (iOS braucht das am Wurzelelement). */ html:has(.kopf[data-offen]) { overflow: hidden; } html:has(.kopf[data-offen]) body { overflow: hidden; touch-action: none; } .kopf[data-offen] .kopf__nav { touch-action: pan-y; } } @media (max-width: 1040px) and (prefers-reduced-motion: no-preference) { .kopf[data-offen] .kopf__nav > * { animation: menue-zeile .38s var(--weich) both; } .kopf[data-offen] .kopf__nav > :nth-child(2) { animation-delay: .03s; } .kopf[data-offen] .kopf__nav > :nth-child(3) { animation-delay: .06s; } .kopf[data-offen] .kopf__nav > :nth-child(4) { animation-delay: .09s; } .kopf[data-offen] .kopf__nav > :nth-child(5) { animation-delay: .12s; } .kopf[data-offen] .kopf__nav > :nth-child(6) { animation-delay: .15s; } .kopf[data-offen] .kopf__nav > :nth-child(7) { animation-delay: .18s; } .kopf[data-offen] .kopf__nav > :nth-child(8) { animation-delay: .21s; } @keyframes menue-zeile { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } } /* ── Auftakt: erst das Haus, die Schrift ordnet sich darum ──────────────── Oben läuft der Titel als eine lange Zeile über das Blatt, darunter steht das Haus frei. Die Wohnungen hängen als Marken mit Linie am Haus (Höhe des Geschosses), Text und Knöpfe stehen wie eine Bildunterschrift unten links. */ .auftakt-huelle { position: relative; } .auftakt { --tf: clamp(2.3rem, min(4.5vw, 8.2svh, calc(var(--raster) / 18.8)), 8rem); /* Titelgröße: erste Zeile passt in eine Zeile */ --tp: clamp(10px, 3svh, 44px); --weff: 68vw; /* sichtbare Breite um die Drehachse des Hauses */ --planw: clamp(190px, min(21vw, 44svh), 640px); /* Breite der Grundrisskarte */ position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #ffffff 0%, #f6f9fc 38%, #e9eff7 72%, #dfe7f1 100%); } /* Die Bühne reicht links bis an den Rand und rechts über das Fenster hinaus: So liegt die Drehachse bei 66 % der Breite, ohne dass Bäume oder Insel an einer Bühnenkante abgeschnitten werden. */ .auftakt__buehne { position: absolute; inset: 6% -32% 0 0; z-index: 0; } .auftakt__buehne model-viewer, .auftakt__buehne .standbild { position: absolute; inset: 0; width: 100%; height: 100%; } /* Standbild: deckt sich mit dem lebenden Modell (0,72 = Mindestabstand 67 m / Breitenmaß 93, siehe seite.js). */ .auftakt__buehne .standbild { inset: 50% auto auto 50%; width: auto; max-width: none; height: min(100%, calc(var(--weff) * .72)); transform: translate(-50%, -50%); transition: opacity .8s ease; } /* --min-hotspot-opacity 1: Der Anker der Marken liegt auf der Drehachse und damit IM Haus. model-viewer hält sie deshalb für verdeckt und blendet sie auf 25 % ab; auf breiten Fenstern war „Wohnung 1" kaum noch zu lesen. */ .auftakt__buehne model-viewer { --poster-color: transparent; --min-hotspot-opacity: 1; background: transparent; opacity: 0; transition: opacity .8s ease; } .auftakt__buehne[data-steht] model-viewer { opacity: 1; } .auftakt__buehne[data-steht] .standbild { opacity: 0; pointer-events: none; } model-viewer::part(default-progress-bar) { display: none; } model-viewer:focus-visible { outline: 2px solid var(--akzent); outline-offset: -6px; } .auftakt__titel { position: absolute; z-index: 2; left: var(--links); right: var(--links); top: calc(var(--kopf) + var(--tp)); font-size: var(--tf); line-height: 1; text-wrap: wrap; pointer-events: none; } .auftakt__titel span { display: block; } .auftakt__text { position: absolute; z-index: 2; left: var(--links); bottom: clamp(22px, 4.4svh, 60px); width: min(29em, 30vw); pointer-events: none; } .auftakt__text > * { pointer-events: auto; } .auftakt__text .t-aussage { color: var(--text); font-size: clamp(1.0625rem, 1.16vw, 1.4375rem); } .auftakt__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(16px, 2.8svh, 34px); } /* Marken am Haus: 0 × 0 großer Anker auf der Drehachse, die Marke steht rechts neben dem Haus. --frei (seite.js) ist der Abstand bis hinter die Hauskante. */ .kote { position: relative; width: 0; height: 0; } .kote button { --arm: clamp(30px, 3vw, 96px); position: absolute; left: calc(var(--frei, 190px) + var(--arm)); top: 0; transform: translateY(-50%); display: grid; gap: 0; text-align: left; white-space: nowrap; padding: 5px 13px 6px 12px; margin: 0; background: rgba(255, 255, 255, .94); border: 0; border-left: 2px solid var(--akzent); border-radius: 0 3px 3px 0; cursor: pointer; color: var(--tinte); font-size: .9375rem; line-height: 1.25; box-shadow: 0 14px 34px -22px rgba(16, 24, 32, .5); transition: left .9s var(--weich), opacity .5s ease, background .25s ease; } .kote button::before { content: ""; position: absolute; right: 100%; top: 50%; width: var(--arm); height: 1px; margin-right: 2px; background: var(--akzent); transform-origin: 100% 50%; transition: transform .8s var(--weich); } .kote button::after { content: ""; position: absolute; left: calc(var(--arm) * -1 - 8px); top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #fff; border: 1px solid var(--akzent); transition: opacity .4s ease; } .kote button b { font-weight: 550; } .kote button span { font-size: .8125rem; color: var(--leise); } .kote button:hover { background: #fff; } .kote button[aria-pressed="true"] { background: var(--akzent); color: #fff; } .kote button[aria-pressed="true"] b, .kote button[aria-pressed="true"] span { color: #fff; } .kote button[aria-pressed="true"]::before { height: 2px; margin-top: -.5px; } html.js .kote button { opacity: 0; } html.js .kote button::before { transform: scaleX(0); } html.js .kote button::after { opacity: 0; } html.js.offen .kote button { opacity: 1; transition-delay: 0s, calc(1.5s + var(--n, 0) * .16s), 0s; } html.js.offen .kote button::before { transform: none; transition-delay: calc(1.2s + var(--n, 0) * .16s); } html.js.offen .kote button::after { opacity: 1; transition-delay: calc(1.2s + var(--n, 0) * .16s); } html.js.offen.ruhe-vorbei .kote button, html.js.offen.ruhe-vorbei .kote button::before, html.js.offen.ruhe-vorbei .kote button::after { transition-delay: 0s; } /* Unterer Rand der Bühne: Hinweis, Scroll-Zeichen, Drehung anhalten */ .auftakt__leiste { position: absolute; z-index: 3; right: var(--links); bottom: clamp(18px, 3.4svh, 44px); display: flex; align-items: flex-end; justify-content: flex-end; gap: 20px 32px; pointer-events: none; } .auftakt__leiste > * { pointer-events: auto; } .wahl { display: none; } .buehne-knoepfe { display: flex; align-items: center; gap: 4px 16px; padding: 0 6px 0 16px; background: rgba(255, 255, 255, .92); border-radius: 3px; font-size: .8125rem; color: var(--text); } .buehne-knoepfe button { min-height: 44px; padding: 6px 10px; background: none; border: 0; cursor: pointer; color: var(--akzent-dunkel); font-size: .8125rem; font-weight: 550; text-decoration: underline; text-underline-offset: 3px; } .buehne-knoepfe button:hover { color: var(--tinte); } .buehne-knoepfe span { white-space: nowrap; } .buehne-knoepfe .weiter { display: none; align-items: center; gap: 12px; font-size: .75rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--leise); } .buehne-knoepfe .weiter i { width: 1px; height: 30px; background: linear-gradient(var(--akzent), var(--akzent)) 0 0 / 100% 50% no-repeat, #b9c6d6; animation: weiter 2.2s var(--weich) infinite; } html.rundgang .buehne-knoepfe .weiter { display: flex; } html.rundgang .buehne-knoepfe .hinweis { display: none; } @keyframes weiter { 0% { background-position: 0 -16px; } 100% { background-position: 0 30px; } } /* Ohne Skript dreht sich nichts und nichts lässt sich wählen. */ html:not(.js) .buehne-knoepfe, html:not(.js) .kote { display: none; } @media (max-width: 1500px) { .buehne-knoepfe .hinweis { display: none; } .buehne-knoepfe { padding: 0 4px 0 14px; } } /* Schmale PC-Fenster: Die Geschosse liegen enger beisammen, die Marken werden einzeilig. */ @media (max-width: 1300px) { .kote button span { display: none; } } @media (min-width: 1041px) and (max-width: 1300px) { .auftakt__knoepfe { flex-wrap: nowrap; gap: 10px; } .auftakt__knoepfe .knopf { padding-inline: 15px; } .auftakt__knoepfe .knopf svg { display: none; } } /* Grundrisskarte: steht am PC immer links zwischen Titel und Bildunterschrift. Sie füllt das freie Feld (auf sehr breiten Monitoren wächst sie mit) und zeigt den Plan zum gewählten Geschoss; von dort führt eine Linie herüber. Reicht der Platz nicht (data-eng, seite.js), bleibt sie weg. */ .wohnplan { position: absolute; z-index: 3; left: var(--links); bottom: calc(clamp(22px, 4.4svh, 60px) + var(--texth, 230px) + clamp(16px, 3svh, 36px)); width: var(--planw); padding: 14px 14px 12px; background: rgba(255, 255, 255, .96); border: 1px solid var(--linie); border-radius: 4px; box-shadow: 0 24px 60px -34px rgba(16, 24, 32, .32); } .wohnplan[data-eng] { display: none; } .wohnplan img { width: 100%; aspect-ratio: 4 / 3; max-height: calc(var(--platz, 400px) - 96px); object-fit: contain; transition: opacity .25s ease; } .wohnplan p { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linie-fein); font-size: .875rem; line-height: 1.4; color: var(--text); } .wohnplan p b { display: block; } .wohnplan__tipp { color: var(--leise); } html:not(.js) .wohnplan__tipp { display: none; } .kote__plan { position: absolute; right: var(--frei, 190px); top: 0; height: 1px; width: calc(66vw - var(--frei, 190px) - var(--links) - var(--planw) - 1px); background: var(--akzent); transform-origin: 100% 50%; transform: scaleX(0); transition: transform .9s var(--weich), right .9s var(--weich), width .9s var(--weich); pointer-events: none; } .kote__plan::after { content: ""; position: absolute; left: -4px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--akzent); opacity: 0; transition: opacity .3s ease .7s; } .kote:has(button[aria-pressed="true"]) .kote__plan { transform: none; } .kote:has(button[aria-pressed="true"]) .kote__plan::after { opacity: 1; } .auftakt:has(.wohnplan[data-eng]) .kote__plan { display: none; } /* Wohnungstafel: Grundriss und eingerichtete 3D-Wohnung zur gewählten Wohnung (05.10.2026). Am PC rückt das Haus nach links und wird kleiner, die Tafel nimmt die rechte Hälfte; Titel, Text und Grundrisskarte treten solange zurück. Eine Linie führt von der Marke am Haus zur Tafel (Lage setzt seite.js). Am Handy ist die Tafel ein Blatt über der Seite. */ .wohntafel { position: absolute; z-index: 5; right: var(--links); top: calc(var(--kopf) + var(--tp)); bottom: clamp(18px, 3.4svh, 44px); width: min(57vw, 1900px); display: flex; flex-direction: column; gap: clamp(10px, 1.2vw, 18px); padding: clamp(16px, 1.5vw, 28px); background: rgba(255, 255, 255, .97); border: 1px solid var(--linie); border-radius: 4px; box-shadow: 0 30px 80px -40px rgba(16, 24, 32, .35); animation: auf .6s var(--weich) both; } .wohntafel[hidden] { display: none; } .wohntafel__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 24px; flex-wrap: wrap; } .wohntafel__titel { margin-top: 6px; color: var(--tinte); font-weight: 360; font-size: clamp(1.4rem, 1.9vw, 2.75rem); letter-spacing: -.03em; line-height: 1.04; } .wohntafel__angaben { margin-top: 6px; font-size: .9375rem; color: var(--text); } .wohntafel__zurueck { gap: 10px; } .wohntafel__zurueck svg { width: 16px; height: 16px; } .wohntafel__inhalt { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(12px, 1.4vw, 24px); } .wohntafel__plan { position: relative; display: grid; place-items: center; min-height: 0; padding: clamp(10px, 1.2vw, 22px); background: #fff; border: 1px solid var(--linie); border-radius: 4px; } .wohntafel__plan img { width: 100%; height: 100%; max-height: 100%; object-fit: contain; } .wohntafel__modell { position: relative; min-height: 0; border-radius: 4px; overflow: hidden; background: var(--band); } .wohntafel__modell model-viewer { width: 100%; height: 100%; --poster-color: transparent; background: transparent; opacity: 0; transition: opacity .6s ease; } .wohntafel__modell[data-status="bereit"] model-viewer { opacity: 1; } .wohntafel__lade { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; align-items: center; gap: 10px; padding: 10px 16px; background: rgba(255, 255, 255, .94); border-radius: 3px; font-size: .875rem; color: var(--text); white-space: nowrap; } .wohntafel__modell[data-status="laedt"] .wohntafel__lade, .wohntafel__modell[data-status="fehler"] .wohntafel__lade { display: flex; } .wohntafel__lade i { width: 16px; height: 16px; border: 2px solid var(--linie); border-top-color: var(--akzent); border-radius: 50%; animation: dreh .9s linear infinite; } .wohntafel__modell[data-status="fehler"] .wohntafel__lade i { display: none; } @keyframes dreh { to { transform: rotate(360deg); } } .wohntafel__fuss { max-width: 60em; } .wohntafel__linie { position: absolute; right: 100%; top: var(--linie-top, 50%); width: var(--linie-w, 0px); height: 1px; margin-top: -.5px; background: var(--akzent); transform-origin: 100% 50%; transform: scaleX(0); transition: transform .9s var(--weich) .3s; pointer-events: none; } .wohntafel__linie::after { content: ""; position: absolute; right: -4px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--akzent); } .wohntafel[data-linie] .wohntafel__linie { transform: none; } /* Offene Tafel am PC: Haus kleiner nach links, Titel/Text/Karte zurück. */ .auftakt__buehne { transition: inset .9s var(--weich); } .auftakt[data-wahl] .auftakt__buehne { inset: 10% 60% 10% -10%; } .auftakt[data-wahl] .auftakt__titel, .auftakt[data-wahl] .auftakt__text, .auftakt[data-wahl] .wohnplan, .auftakt[data-wahl] .kote__plan { opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; } .auftakt__titel, .auftakt__text, .wohnplan { transition: opacity .5s ease .3s; } .auftakt[data-wahl] .auftakt__leiste { right: auto; left: var(--links); justify-content: flex-start; } /* Bei offener Tafel rückt das Haus zusammen: Die Geschosse liegen dann rund 38 px auseinander, zweizeilige Marken sind 46 px hoch und überlappen sich (gesehen am 09.10.2026 auf der Startseite). Einzeilig passen sie. */ .auftakt[data-wahl] .kote button span { display: none; } @media (prefers-reduced-motion: reduce) { .auftakt__buehne, .wohntafel__linie, .wohntafel { transition: none; animation: none; } .wohntafel__lade i { animation: none; } } /* Ohne Skript: die drei Wohnungen als Bilder. */ .wohnungen-statisch { padding: clamp(28px, 4vw, 64px) 0; border-top: 1px solid var(--linie); } html.js .wohnungen-statisch { display: none; } .wohnungen-statisch__reihe { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); } .wohnungen-statisch article img { width: 100%; height: auto; border: 1px solid var(--linie); border-radius: 4px; } .wohnungen-statisch article img + img { margin-top: 10px; } .wohnungen-statisch article p { margin-top: 10px; font-size: .9375rem; line-height: 1.45; color: var(--text); } .wohnungen-statisch article b { display: block; color: var(--tinte); font-weight: 550; } @media (max-width: 1040px) { /* Blatt über der ganzen Seite, auch über dem Kopf (der liegt bei z-index 100). */ .wohntafel { position: fixed; inset: 0; z-index: 200; width: auto; border: 0; border-radius: 0; box-shadow: none; padding: max(16px, env(safe-area-inset-top)) max(var(--rand), env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(var(--rand), env(safe-area-inset-left)); background: #fff; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; gap: 14px; animation: none; } .wohntafel__inhalt { display: block; flex: none; } .wohntafel__plan { padding: 10px; } .wohntafel__modell { margin-top: 14px; height: min(60svh, 520px); } .wohntafel__linie { display: none; } .wohntafel__kopf { flex-direction: column-reverse; align-items: flex-start; } .wohntafel__zurueck { width: 100%; justify-content: center; } /* Die Tafel liegt im Stapel des Auftakts (isolation), der Kopf im Stapel der Seite: solange das Blatt offen ist, tritt der Kopf zurück, sonst läge er darüber. */ html.tafel-offen { overflow: hidden; } html.tafel-offen .kopf { visibility: hidden; } .auftakt[data-wahl] .auftakt__buehne { inset: auto; } .auftakt[data-wahl] .auftakt__titel, .auftakt[data-wahl] .auftakt__text, .auftakt[data-wahl] .wohnplan { opacity: 1; visibility: visible; } .wohnungen-statisch__reihe { grid-template-columns: minmax(0, 1fr); } } /* Gestaffelter Auftritt des Auftakts. Ohne Skript läuft er nach der festen Eröffnung (1,2 s); mit Skript startet er, wenn sich das Logo-Feld öffnet. */ [data-auf] { animation: auf 1s var(--weich) both; animation-delay: calc(var(--i, 0) * 90ms + 1.25s); } html.js [data-auf] { animation-play-state: paused; animation-delay: calc(var(--i, 0) * 90ms + .1s); } html.js.offen [data-auf] { animation-play-state: running; } @keyframes auf { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } /* Rundgang: Auftakt bleibt stehen, die Wohnungen leuchten nacheinander auf. Nur am PC, nur mit Skript, nur ohne „weniger Bewegung" (setzt seite.js). */ html.rundgang .auftakt-huelle { height: 250svh; } html.rundgang .auftakt { position: sticky; top: 0; height: 100svh; } @media (max-width: 1040px) { .auftakt { --weff: 100vw; display: flex; flex-direction: column; align-items: stretch; background: linear-gradient(180deg, #ffffff 0%, #f6f9fc 42%, #e4ebf4 100%); } .auftakt__titel { order: 1; position: relative; left: auto; right: auto; top: auto; padding: calc(var(--kopf) + clamp(10px, 2.4svh, 28px)) var(--rand) 0; font-size: clamp(2.3rem, min(5.5vw, 9.4svh), 8.25rem); line-height: .98; text-wrap: balance; pointer-events: auto; } .auftakt__titel span { display: inline; } .auftakt__text { order: 2; position: relative; left: auto; bottom: auto; width: auto; padding: clamp(14px, 2.6svh, 30px) var(--rand) 0; } .auftakt__text .t-aussage { max-width: 34em; } .auftakt__buehne { order: 3; position: relative; inset: auto; flex: 1 1 auto; min-height: clamp(210px, 30svh, 520px); margin-top: clamp(4px, 1.5svh, 20px); } .kote { display: none; } .auftakt__leiste { order: 4; position: relative; right: auto; bottom: auto; padding: 0 var(--rand) clamp(14px, 2.4svh, 28px); } /* Drei gleich breite Tasten: Alle Wohnungen sind ohne Wischen zu sehen. */ .wahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; width: 100%; border-top: 1px solid #b9c6d6; } .wahl button { position: relative; display: grid; gap: 1px; align-content: center; text-align: left; min-height: 58px; min-width: 0; padding: 10px 0; background: none; border: 0; cursor: pointer; color: var(--tinte); font-size: .9375rem; line-height: 1.25; } .wahl button::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--akzent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--weich); } .wahl button[aria-pressed="true"]::before { transform: scaleX(1); } .wahl button b { font-weight: 550; } .wahl button span { font-size: .8125rem; color: var(--leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html:not(.js) .wahl button { cursor: default; } .buehne-knoepfe { position: absolute; right: var(--rand); top: -56px; padding: 0 4px; } .buehne-knoepfe .hinweis, .buehne-knoepfe .weiter { display: none !important; } .wohnplan { position: relative; order: 5; left: auto; bottom: auto; width: auto; margin: 0 var(--rand) 24px; display: none; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: center; box-shadow: none; animation: none; } .wohnplan img { max-height: none; } .wohnplan[data-da] { display: grid; } .wohnplan p { margin: 0; padding: 0; border: 0; } } @media (max-width: 560px) { .auftakt__knoepfe .knopf { flex: 1 1 0; padding-inline: 14px; } .t-riesig { letter-spacing: -.038em; line-height: 1.01; } } /* ── Abschnitte ─────────────────────────────────────────────────────────── */ .abschnitt { position: relative; padding-block: var(--abschnitt); background: var(--weiss); } .abschnitt--band { background: var(--band); } .kopfzeile2 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 48px); row-gap: 22px; align-items: end; } .kopfzeile2 > :first-child { grid-column: 1 / span 7; } .kopfzeile2 > :last-child { grid-column: 9 / span 4; } .kopfzeile2 .t-gross { margin-top: clamp(14px, 1.6vw, 26px); } /* Steht rechts viel Inhalt, soll die Ueberschrift links oben beginnen und nicht unten am Rand des langen Blocks kleben. */ .kopfzeile2--oben { align-items: start; } @media (max-width: 1040px) { .kopfzeile2 > :first-child, .kopfzeile2 > :last-child { grid-column: 1 / -1; } } /* ── Große Zeile: eine Überschrift, die das Raster in einer Zeile füllt ─── --zeichen ist die Breite des Satzes in Schriftgrößen (ausgemessen), so passt er in jeder Fensterbreite genau in eine Zeile. */ .grosszeile__titel { color: var(--tinte); font-weight: 340; letter-spacing: -.042em; line-height: 1; white-space: nowrap; font-size: calc(var(--raster) / var(--zeichen, 18)); } .grosszeile > p { margin-top: clamp(18px, 2vw, 34px); max-width: 36em; } .grosszeile + .kontakt { margin-top: clamp(32px, 4vw, 76px); } @media (max-width: 1040px) { .grosszeile__titel { white-space: normal; font-weight: 360; letter-spacing: -.036em; line-height: 1.02; text-wrap: balance; font-size: clamp(2rem, min(4.1vw, 7.4svh), 5.25rem); } } /* ── Plan und Raum ──────────────────────────────────────────────────────── */ .planraum { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--band); border-radius: 4px; overflow: hidden; position: relative; } /* Die Überschrift steht auf der Trennlinie: links „Erst die Linie", rechts „dann der Raum". Die blaue Linie läuft von der Überschrift durch die ganze Tafel. */ .planbuehne { position: relative; } .planbuehne::before { content: ""; position: absolute; z-index: 2; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--akzent); transform: scaleY(var(--zug, 1)); transform-origin: 50% 0; } .plankopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: clamp(16px, 1.8vw, 32px); padding-bottom: clamp(30px, 3.6vw, 68px); } .plankopf__titel { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); color: var(--tinte); font-weight: 340; letter-spacing: -.042em; line-height: .98; font-size: clamp(2rem, min(5.6vw, calc(var(--raster) / 17)), 10rem); } .plankopf > p { max-width: 31em; padding-right: clamp(16px, 2vw, 40px); } .plankopf__titel span + span, .plankopf > p + p { padding-left: clamp(18px, 2.2vw, 48px); } .planraum__plan { position: relative; display: grid; place-items: center; padding: clamp(20px, 3vw, 56px); background: #fff; border: 1px solid var(--linie); border-right: 0; border-radius: 4px 0 0 4px; } .planraum__plan svg { width: 100%; height: auto; max-height: min(74svh, 900px); } .planraum__plan svg text { font-family: Geist, system-ui, sans-serif; } .planraum__raum { position: relative; min-height: clamp(380px, 40vw, 900px); } .planraum__raum model-viewer, .planraum__raum .standbild { position: absolute; inset: 0; width: 100%; height: 100%; } .planraum__raum .standbild { object-fit: contain; transition: opacity .6s ease; } .planraum__raum model-viewer { --poster-color: transparent; background: transparent; opacity: 0; transition: opacity .6s ease; } .planraum__raum[data-steht] model-viewer { opacity: 1; } .planraum__raum[data-steht] .standbild { opacity: 0; } .marke { position: absolute; z-index: 3; left: 16px; top: 16px; padding: 6px 11px; background: rgba(255, 255, 255, .92); border-radius: 3px; font-size: .75rem; line-height: 1.2; color: var(--tinte); pointer-events: none; } .marke--rechts { left: auto; right: 16px; } /* Der Plan zeichnet sich, wenn er ins Bild kommt (nur mit Skript). */ html.js.bewegt .planraum__plan:not([data-da]) svg :is(polyline, line) { stroke-dasharray: 1; stroke-dashoffset: 1; } html.js.bewegt .planraum__plan[data-da] svg :is(polyline, line) { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--weich); transition-delay: calc(var(--n, 0) * 14ms); } html.js.bewegt .planraum__plan:not([data-da]) svg text { opacity: 0; } html.js.bewegt .planraum__plan[data-da] svg text { opacity: 1; transition: opacity .8s ease 1.1s; } .raumzeile { margin-top: clamp(22px, 2.4vw, 40px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 48px); row-gap: 28px; align-items: start; } .raumliste { grid-column: 1 / span 5; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linie); } .raumliste div { padding: 14px 0 12px; border-bottom: 1px solid var(--linie-fein); } .raumliste dt { font-size: .8125rem; color: var(--leise); } .raumliste dd { font-size: 1.25rem; letter-spacing: -.02em; color: var(--tinte); font-variant-numeric: tabular-nums; } .koennen { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 48px); border-top: 1px solid var(--linie); } .koennen li { padding: 14px 0 14px 26px; border-bottom: 1px solid var(--linie-fein); position: relative; font-size: 1rem; line-height: 1.45; color: var(--text); } .koennen li::before { content: ""; position: absolute; left: 0; top: 1.55em; width: 14px; height: 1px; background: var(--akzent); } @media (max-width: 1040px) { .planraum { grid-template-columns: minmax(0, 1fr); } .planbuehne::before { display: none; } .plankopf, .plankopf__titel { display: block; } .plankopf__titel { font-size: clamp(2rem, min(4.1vw, 7.4svh), 5.25rem); letter-spacing: -.036em; line-height: 1.02; text-wrap: balance; } .plankopf__titel span + span, .plankopf > p + p { padding-left: 0; } .plankopf > p { margin-top: 14px; padding-right: 0; max-width: 40em; } .planraum__plan { border-right: 1px solid var(--linie); border-radius: 4px 4px 0 0; } .planraum__plan svg { max-height: 62svh; } .planraum__raum { min-height: min(92vw, 60svh); } .raumliste, .koennen { grid-column: 1 / -1; } } @media (max-width: 560px) { .koennen { grid-template-columns: minmax(0, 1fr); } .raumliste dd { font-size: 1.125rem; } } /* ── Heute und danach: drei Räume, eine Linie ───────────────────────────── */ /* Die drei Räume laufen von Rand zu Rand: der eine Abschnitt, der das Raster verlässt. Höhe höchstens 78 % des Fensters, die Bilder werden dafür oben und unten beschnitten. */ .dreiklang-huelle { margin-top: clamp(36px, 4.6vw, 84px); --luecke: clamp(3px, .4vw, 10px); } .dreiklang { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--luecke); user-select: none; -webkit-user-select: none; touch-action: pan-y; } .raumbild { position: relative; height: min(78svh, calc((100vw - 2 * var(--luecke)) / 3 * 1.3333)); overflow: hidden; background: var(--band); --p: .5; } .raumbild:nth-child(1) { --p: 1; } .raumbild:nth-child(3) { --p: 0; } .raumbild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .raumbild__danach { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--p) * 100%) 0 0); } .raumbild .marke { top: auto; bottom: 14px; z-index: auto; } .raumbild__name { position: absolute; z-index: 3; left: 16px; top: 14px; padding: 6px 11px; background: rgba(255, 255, 255, .92); border-radius: 3px; font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tinte); pointer-events: none; } .zuglinie { position: absolute; z-index: 4; top: -18px; bottom: -18px; left: calc(var(--x, .5) * 100%); width: 0; pointer-events: none; } .zuglinie::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--akzent); box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); } .zuglinie i { position: absolute; left: 0; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: #fff; border: 2px solid var(--akzent); display: grid; place-items: center; color: var(--akzent); box-shadow: 0 10px 30px -10px rgba(16, 24, 32, .45); } .zuglinie svg { width: 24px; height: 24px; } .dreiklang input[type="range"] { position: absolute; z-index: 5; inset: -18px 0; width: 100%; height: calc(100% + 36px); margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; } .dreiklang input[type="range"]:focus-visible + .zuglinie i { outline: 3px solid var(--tinte); outline-offset: 3px; } html:not(.js) .zuglinie, html:not(.js) .dreiklang input { display: none; } .dreiklang-fuss { width: var(--raster); margin: 30px auto 0; display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--linie); } .raumwahl { display: none; } /* Drei schmale Bilder nebeneinander (Tablett): Die beiden Marken stehen übereinander statt ineinander. */ @media (min-width: 701px) and (max-width: 1180px) { .raumbild .marke--rechts { bottom: 48px; } } @media (max-width: 700px) { .dreiklang-huelle { width: min(var(--raster), calc(0.75 * 70svh)); margin-inline: auto; --luecke: 10px; } .raumbild { height: auto; aspect-ratio: 3 / 4; border-radius: 3px; } .dreiklang-fuss { width: auto; } .dreiklang { grid-template-columns: minmax(0, 1fr); } .raumbild { display: none; } .raumbild[data-aktiv] { display: block; } html:not(.js) .raumbild { display: block; } .raumwahl { display: flex; gap: 0; margin-bottom: 14px; border-bottom: 1px solid var(--linie); } html:not(.js) .raumwahl { display: none; } /* min-width/padding: Bei 320 px ragte „Schlafzimmer" 10 px aus dem Bild (Prüfung 13.10.2026). */ .raumwahl button { flex: 1 1 0; min-width: 0; padding-inline: 2px; overflow-wrap: anywhere; min-height: 46px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; font-size: .9375rem; color: var(--leise); } .raumwahl button[aria-pressed="true"] { color: var(--tinte); border-bottom-color: var(--akzent); font-weight: 550; } } /* ── Lage: die Karte ist rund wie ihre Ringe ───────────────────────────── */ .lage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 48px); row-gap: 36px; align-items: center; } .lage__text { grid-column: 1 / span 4; } .lage__text .t-gross { font-size: clamp(2rem, min(3.5vw, 7.4svh), 4.75rem); } .lage__text .t-text { margin-top: clamp(18px, 2vw, 30px); } .lage__hinweis { margin-top: clamp(18px, 2vw, 30px); padding-top: 14px; border-top: 1px solid #c3cfde; max-width: 30em; } .lage__karte { grid-column: 5 / span 5; position: relative; justify-self: center; width: min(100%, 82svh); } .lage__rund { position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--band); box-shadow: 0 0 0 1px var(--linie), 0 50px 100px -60px rgba(16, 24, 32, .55); } .lage__rund img { width: 100%; height: 100%; object-fit: cover; } .lage__rund svg { position: absolute; inset: 0; width: 100%; height: 100%; } .lage__karte .quelle { position: absolute; right: 4%; bottom: 2%; padding: 2px 7px; background: rgba(255, 255, 255, .92); border-radius: 2px; font-size: .6875rem; color: var(--text); } .lage__liste { grid-column: 10 / span 3; } .ring { fill: none; stroke: var(--akzent); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 0; } html.js.bewegt .lage__karte:not([data-da]) .ring { stroke-dashoffset: 1; } html.js.bewegt .lage__karte[data-da] .ring { transition: stroke-dashoffset 1.5s var(--weich); transition-delay: calc(var(--n) * 220ms); } html.js.bewegt .lage__karte:not([data-da]) .ort { opacity: 0; transform: scale(.4); } html.js.bewegt .lage__karte[data-da] .ort { opacity: 1; transform: scale(var(--k, 1)); transition: opacity .4s ease, transform .5s var(--weich); transition-delay: calc(700ms + var(--n) * 45ms); } .ort { transform-box: fill-box; transform-origin: 50% 50%; transform: scale(var(--k, 1)); } /* Liste und Karte hängen zusammen: Ein Ort in der Liste hebt seine Nummer auf der Karte hervor und umgekehrt. */ /* „[data-lagekarte]" statt „.lage": Dasselbe Verhalten greift seit 09.10.2026 auch im kleinen Lage-Stück der Startseite, das die Rasterklasse nicht trägt. */ [data-lagekarte][data-nr] .ort[data-nr] { opacity: .28; transition: opacity .25s ease, transform .35s var(--weich) !important; transition-delay: 0s !important; } [data-lagekarte][data-nr] .ort[data-an] { opacity: 1; transform: scale(calc(var(--k, 1) * 1.55)); } .legende { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid #c3cfde; } .legende li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: clamp(7px, 1svh, 11px) 0; border-bottom: 1px solid #c3cfde; font-size: .9375rem; line-height: 1.3; color: var(--tinte); cursor: default; transition: background .2s ease, padding .3s var(--weich); } .legende li[data-an] { background: var(--band-hell); padding-left: 8px; } .legende .nr { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .6875rem; font-weight: 600; color: #fff; } .legende .strecke { font-size: .8125rem; color: var(--leise); font-variant-numeric: tabular-nums; } @media (max-width: 1040px) { .lage__text, .lage__karte, .lage__liste { grid-column: 1 / -1; } .lage__karte { width: min(100%, 70svh); } .legende { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; } .ort { --k: 1.5; } } @media (max-width: 560px) { .legende { grid-template-columns: minmax(0, 1fr); } .ort { --k: 1.55; } } /* ── Die drei Muster ────────────────────────────────────────────────────── */ .muster { margin-top: clamp(36px, 4.6vw, 84px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 3vw, 64px) clamp(20px, 2.4vw, 48px); } .musterkarte { position: relative; display: block; color: inherit; text-decoration: none; } .musterkarte:nth-child(1) { grid-column: 1 / span 7; grid-row: 1 / span 2; } .musterkarte:nth-child(2), .musterkarte:nth-child(3) { grid-column: 8 / span 5; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(16px, 1.8vw, 32px); align-items: start; } .musterkarte__bild { position: relative; overflow: hidden; border-radius: 4px; border: 1px solid var(--linie); background: var(--band); aspect-ratio: 16 / 10; } .musterkarte:nth-child(1) .musterkarte__bild { aspect-ratio: 16 / 10.4; } .musterkarte__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform 1.1s var(--weich); } .musterkarte:hover .musterkarte__bild img { transform: scale(1.035); } .musterkarte__text { padding-top: 18px; } .musterkarte:nth-child(n+2) .musterkarte__text { padding-top: 0; } .musterkarte__art { font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--leise); } .musterkarte h3 { margin-top: 8px; color: var(--tinte); font-weight: 480; letter-spacing: -.025em; line-height: 1.12; font-size: clamp(1.25rem, 1.5vw, 1.75rem); text-wrap: balance; } .musterkarte:nth-child(1) h3 { font-size: clamp(1.6rem, 2.5vw, 3rem); font-weight: 380; letter-spacing: -.034em; line-height: 1.04; } .musterkarte p { margin-top: 10px; font-size: .9375rem; line-height: 1.5; } .musterkarte:nth-child(1) p { font-size: 1.0625rem; max-width: 34em; } .musterkarte__link { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; min-height: 44px; color: var(--akzent); font-size: .9375rem; font-weight: 550; } .musterkarte__link::after { content: ""; width: 26px; height: 1px; background: currentColor; transition: width .4s var(--weich); } .musterkarte:hover .musterkarte__link::after { width: 54px; } .musterkarte:hover .musterkarte__link { color: var(--akzent-dunkel); } .muster-hinweis { margin-top: clamp(28px, 3vw, 56px); padding-top: 18px; border-top: 1px solid var(--linie); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 48px); } .muster-hinweis p { grid-column: 1 / span 7; } @media (max-width: 1040px) { .musterkarte:nth-child(n) { grid-column: 1 / -1; grid-row: auto; } .muster-hinweis p { grid-column: 1 / -1; } } @media (max-width: 640px) { .musterkarte:nth-child(2), .musterkarte:nth-child(3) { grid-template-columns: minmax(0, 1fr); } .musterkarte:nth-child(n+2) .musterkarte__text { padding-top: 16px; } } /* ── Zwei Wege zum Exposé ───────────────────────────────────────────────── */ .aussage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 48px); row-gap: 28px; align-items: end; } .aussage .t-riesig { grid-column: 1 / span 8; font-size: clamp(2.3rem, min(6.4vw, 11svh), 9rem); } .aussage .t-riesig em { font-style: normal; color: var(--akzent); } .aussage > div { grid-column: 9 / span 4; padding-bottom: .6em; } .wege { position: relative; margin-top: clamp(40px, 5vw, 96px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #bccadb; } .wege::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--akzent); transform: scaleY(var(--zug, 1)); transform-origin: 50% 0; } .weg { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(20px, 2.6vw, 56px); align-items: center; padding: clamp(28px, 3.6vw, 72px) clamp(20px, 3.4vw, 72px) 0 0; } .weg + .weg { padding-left: clamp(20px, 3.4vw, 72px); padding-right: 0; } .weg:not(:has(.weg__bild)) { grid-template-columns: minmax(0, 1fr); align-items: start; } .weg__bild { display: grid; place-items: center; } .weg__bild--plan img { width: auto; max-height: clamp(220px, 24vw, 420px); } .handy { display: block; width: min(100%, clamp(150px, 13vw, 230px)); padding: 7px; border-radius: 32px; background: var(--tinte); box-shadow: 0 34px 60px -34px rgba(16, 24, 32, .55); } .handy img { display: block; width: 100%; border-radius: 26px; } .weg__nr { font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--akzent-dunkel); } .weg h3 { margin-top: 8px; color: var(--tinte); font-weight: 400; letter-spacing: -.03em; line-height: 1.08; font-size: clamp(1.5rem, 2.2vw, 2.625rem); } .weg p:not(.weg__nr) { margin-top: 12px; max-width: 32em; } @media (max-width: 1040px) { .aussage .t-riesig, .aussage > div { grid-column: 1 / -1; } .wege { grid-template-columns: minmax(0, 1fr); } .wege::before { display: none; } .weg, .weg + .weg { padding: 28px 0; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); } .weg + .weg { border-top: 1px solid #bccadb; } } @media (max-width: 560px) { .weg, .weg + .weg { grid-template-columns: 96px minmax(0, 1fr); align-items: start; } .handy { padding: 4px; border-radius: 16px; } .handy img { border-radius: 12px; } } /* ── Fotos aufbereiten: ein großes Bild, das man auf das Original zurückschalten kann ── Läuft ganz ohne Skript: Drei Radiofelder wählen das Beispiel, ein Ankreuzfeld schaltet zwischen aufbereitet und Original. Die blaue Linie fährt dabei über das Bild. Das Skript ergänzt nur „gedrückt halten" und die Vorführung beim Hereinscrollen. Bewusst kein Schieber wie bei „Vor der Sanierung". */ .fotos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 48px); row-gap: 36px; align-items: center; } .fotos__text { grid-column: 1 / span 4; } .fotos__text .t-gross { margin-top: clamp(14px, 1.6vw, 26px); font-size: clamp(2rem, min(3.5vw, 7.4svh), 4.75rem); } .fotos__text .t-text { margin-top: clamp(16px, 1.8vw, 28px); } .fotos__wie { margin-top: clamp(18px, 2vw, 30px); padding-top: 14px; border-top: 1px solid var(--linie); max-width: 36em; } .fotos__buehne { grid-column: 6 / span 7; position: relative; justify-self: end; width: min(100%, calc(74svh * 4 / 3)); } .fotos__bild { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--band); box-shadow: 0 50px 100px -60px rgba(16, 24, 32, .55); user-select: none; -webkit-user-select: none; touch-action: pan-y; } .fotopaar { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; } .fotopaar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; } /* Das aufbereitete Bild liegt oben und wird von rechts nach links weggezogen. */ .fotopaar__neu { clip-path: inset(0 0 0 0); transition: clip-path .9s var(--weich); } #foto-1:checked ~ .fotos__bild .fotopaar[data-nr="1"], #foto-2:checked ~ .fotos__bild .fotopaar[data-nr="2"], #foto-3:checked ~ .fotos__bild .fotopaar[data-nr="3"] { opacity: 1; visibility: visible; transition: opacity .45s ease; } #foto-original:checked ~ .fotos__bild .fotopaar__neu { clip-path: inset(0 100% 0 0); } .fotos__linie { position: absolute; z-index: 2; top: 0; bottom: 0; left: 100%; width: 2px; margin-left: -1px; background: var(--akzent); box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); transition: left .9s var(--weich); pointer-events: none; } #foto-original:checked ~ .fotos__bild .fotos__linie { left: 0; } .fotos__marke { top: auto; bottom: 14px; left: 14px; right: auto; max-width: calc(100% - 28px); line-height: 1.35; transition: opacity .35s ease; } .fotos__marke--alt { opacity: 0; } #foto-original:checked ~ .fotos__bild .fotos__marke--alt { opacity: 1; transition-delay: .35s; } #foto-original:checked ~ .fotos__bild .fotos__marke--neu { opacity: 0; } #foto-original:not(:checked) ~ .fotos__bild .fotos__marke--neu { transition-delay: .35s; } .fotos__leiste { margin-top: 14px; display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; } .fotos__leiste .t-klein { flex: 1 1 18em; } .fotos__halten { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 20px 10px 16px; border: 1px solid var(--akzent); border-radius: 3px; background: #fff; color: var(--akzent-dunkel); font-size: .9375rem; font-weight: 550; cursor: pointer; user-select: none; -webkit-user-select: none; transition: background .25s ease, color .25s ease; } .fotos__halten:hover { background: #edf3fc; } .fotos__halten i { position: relative; width: 22px; height: 16px; border: 1.5px solid currentColor; border-radius: 2px; } .fotos__halten i::after { content: ""; position: absolute; top: -4px; bottom: -4px; left: 100%; width: 1.5px; margin-left: -1px; background: currentColor; transition: left .5s var(--weich); } .fotos__halten .an { display: none; } #foto-original:checked ~ .fotos__leiste .fotos__halten { background: var(--akzent); color: #fff; } #foto-original:checked ~ .fotos__leiste .fotos__halten i::after { left: 0; } #foto-original:checked ~ .fotos__leiste .fotos__halten .aus { display: none; } #foto-original:checked ~ .fotos__leiste .fotos__halten .an { display: inline; } #foto-original:focus-visible ~ .fotos__leiste .fotos__halten { outline: 2px solid var(--akzent); outline-offset: 3px; } html:not(.js) .fotos__geste { display: none; } .fotos__wahl { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1vw, 16px); } .fotos__wahl label { position: relative; display: grid; grid-template-columns: clamp(56px, 6vw, 104px) minmax(0, 1fr); align-items: center; gap: 12px; padding: 6px 10px 6px 6px; border: 1px solid var(--linie); border-radius: 3px; cursor: pointer; font-size: .875rem; line-height: 1.25; color: var(--text); transition: border-color .2s ease, color .2s ease; } .fotos__wahl label::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--akzent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--weich); } .fotos__wahl img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; } .fotos__wahl label:hover { border-color: #93a5ba; } #foto-1:checked ~ .fotos__wahl label[for="foto-1"], #foto-2:checked ~ .fotos__wahl label[for="foto-2"], #foto-3:checked ~ .fotos__wahl label[for="foto-3"] { color: var(--tinte); font-weight: 550; border-color: #b4c3d6; } #foto-1:checked ~ .fotos__wahl label[for="foto-1"]::before, #foto-2:checked ~ .fotos__wahl label[for="foto-2"]::before, #foto-3:checked ~ .fotos__wahl label[for="foto-3"]::before { transform: none; } #foto-1:focus-visible ~ .fotos__wahl label[for="foto-1"], #foto-2:focus-visible ~ .fotos__wahl label[for="foto-2"], #foto-3:focus-visible ~ .fotos__wahl label[for="foto-3"] { outline: 2px solid var(--akzent); outline-offset: 3px; } .fotos__satz { display: none; margin-top: 16px; color: var(--tinte); font-size: clamp(1.0625rem, 1.2vw, 1.4375rem); line-height: 1.42; letter-spacing: -.012em; max-width: 34em; text-wrap: pretty; } #foto-1:checked ~ .fotos__satz[data-nr="1"], #foto-2:checked ~ .fotos__satz[data-nr="2"], #foto-3:checked ~ .fotos__satz[data-nr="3"] { display: block; } /* Regeln der Bildbearbeitung: Kopf links, rechts zwei Spalten, die die Signatur-Linie trennt (dieselbe Linie, die über das Foto fährt). Keine Symbole vor den Zeilen, nur feine Trennstriche; die Zusätze Datenschutz und Kennzeichnung darunter. */ .regeln { margin-top: clamp(44px, 5vw, 96px); padding-top: clamp(28px, 3vw, 52px); border-top: 1px solid var(--linie); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 48px); row-gap: clamp(28px, 3vw, 48px); align-items: start; } .regeln__kopf { grid-column: 1 / span 4; } .regeln__kopf .t-mittel { margin-top: clamp(12px, 1.4vw, 22px); color: var(--tinte); font-weight: 360; font-size: clamp(1.5rem, min(2.1vw, 4.6svh), 2.75rem); letter-spacing: -.028em; line-height: 1.08; text-wrap: balance; } .regeln__kopf .t-text { margin-top: clamp(14px, 1.6vw, 24px); max-width: 30em; } .regeln__grund { margin-top: clamp(16px, 1.8vw, 28px); padding-top: 12px; border-top: 1px solid var(--linie-fein); max-width: 34em; } .regeln__spalten { grid-column: 6 / span 7; display: grid; grid-template-columns: minmax(0, 1fr) 2px minmax(0, 1fr); column-gap: clamp(24px, 3vw, 56px); } .regeln__linie { align-self: stretch; width: 2px; background: var(--akzent); box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); } .regeln__titel { font-size: .8125rem; font-weight: 550; letter-spacing: .02em; text-transform: uppercase; color: var(--akzent-dunkel); padding-bottom: 12px; border-bottom: 1px solid var(--linie); } .regeln__liste li { padding: 13px 0 12px; border-bottom: 1px solid var(--linie-fein); font-size: clamp(1rem, 1.05vw, 1.25rem); line-height: 1.42; letter-spacing: -.01em; color: var(--tinte); text-wrap: pretty; } .regeln__zusatz { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 56px); row-gap: 20px; } .regeln__zusatz dt { font-size: .8125rem; font-weight: 550; letter-spacing: .02em; text-transform: uppercase; color: var(--leise); } .regeln__zusatz dd { margin-top: 8px; font-size: .9375rem; line-height: 1.5; color: var(--text); text-wrap: pretty; max-width: 30em; } @media (max-width: 1040px) { .regeln__kopf, .regeln__spalten, .regeln__zusatz { grid-column: 1 / -1; } } @media (max-width: 700px) { .regeln__spalten { grid-template-columns: minmax(0, 1fr); row-gap: 8px; } .regeln__linie { width: 48px; height: 2px; margin: 18px 0 4px; align-self: start; } .regeln__zusatz { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 1040px) { .fotos__text, .fotos__buehne { grid-column: 1 / -1; } .fotos__buehne { justify-self: stretch; width: min(100%, calc(70svh * 4 / 3)); } } @media (max-width: 560px) { .fotos__halten { width: 100%; justify-content: center; } .fotos__wahl label { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 5px 5px 8px; text-align: center; font-size: .8125rem; } .fotos__marke { font-size: .6875rem; bottom: 10px; left: 10px; max-width: calc(100% - 20px); } } /* ── Werbung am Objekt: eine Tafel, die sich in drei Stufen aufbaut ─────── */ .werbung { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 48px); row-gap: 40px; align-items: center; } .szene { grid-column: 1 / span 7; } .szene__bild { position: relative; container-type: inline-size; aspect-ratio: 760 / 470; background: linear-gradient(180deg, #fff 0%, var(--band-hell) 100%); border-radius: 4px; overflow: hidden; } /* Boden: die blaue Linie, auf der alles steht */ .szene__bild::after { content: ""; position: absolute; left: 0; right: 0; bottom: 17%; height: 1px; background: var(--akzent); } .tafel { position: absolute; left: 6%; top: 11%; width: 60%; bottom: 17%; } .tafel__brett { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 38%; align-items: center; gap: 5%; height: 78%; padding: 5% 6% 5% 7%; background: #fff; border-radius: 3px; box-shadow: 0 0 0 1px var(--tinte), 0 30px 50px -34px rgba(16, 24, 32, .6); transition: box-shadow .6s ease, background .6s ease; } .tafel__text { min-width: 0; transition: opacity .5s ease, transform .7s var(--weich); } .tafel__logo { display: inline-block; padding: .35em .9em; border: 1px dashed #93a5ba; border-radius: 2px; font-size: 11px; font-size: 1.7cqw; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); } .tafel__titel { margin-top: .55em; color: var(--tinte); font-weight: 420; letter-spacing: -.03em; line-height: 1.06; font-size: 19px; font-size: 3.9cqw; hyphens: manual; } .tafel__zeile { margin-top: .7em; font-size: 11px; font-size: 1.75cqw; line-height: 1.35; color: var(--text); } .tafel__link { margin-top: .35em; font-size: 11px; font-size: 1.75cqw; font-weight: 600; color: var(--akzent-dunkel); overflow-wrap: anywhere; } .tafel__qr { width: 100%; height: auto; aspect-ratio: 1; transition: transform .8s var(--weich); } .tafel__pfosten { position: absolute; top: 60%; bottom: 0; width: 1.6%; min-width: 4px; background: var(--tinte); transform-origin: 50% 100%; transition: transform .6s var(--weich), opacity .4s ease; } .tafel__pfosten:nth-of-type(1) { left: 20%; } .tafel__pfosten:nth-of-type(2) { right: 20%; } /* Zweite Fläche in der Nähe (Stufe 3) */ .flaeche { position: absolute; right: 7%; bottom: 17%; width: 19%; height: 34%; transition: opacity .6s ease, transform .8s var(--weich); } .flaeche::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 58%; background: #fff; border-radius: 2px; box-shadow: 0 0 0 1px var(--tinte); } .flaeche::after { content: ""; position: absolute; left: 50%; top: 58%; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--tinte); } .flaeche::before { background: linear-gradient(var(--tinte), var(--tinte)) 14% 28% / 38% 9% no-repeat, linear-gradient(#93a5ba, #93a5ba) 12% 52% / 30% 6% no-repeat, linear-gradient(#93a5ba, #93a5ba) 11% 70% / 24% 6% no-repeat, #fff; } .flaeche i { position: absolute; z-index: 1; right: 9%; top: 9%; height: 40%; aspect-ratio: 1; background: var(--akzent); border-radius: 1px; } .szene__mass { position: absolute; left: 36%; right: 16.5%; bottom: 7%; height: 1px; background: var(--akzent); transform-origin: 0 50%; transition: transform .8s var(--weich), opacity .4s ease; } .szene__mass::before, .szene__mass::after { content: ""; position: absolute; top: -5px; width: 1px; height: 11px; background: var(--akzent); } .szene__mass::before { left: 0; } .szene__mass::after { right: 0; } .szene__mass span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 0 .8em; background: #f4f7fb; white-space: nowrap; font-size: 11px; font-size: max(11px, 1.5cqw); color: var(--akzent-dunkel); } .szene figcaption { margin-top: 14px; font-size: .875rem; line-height: 1.5; color: var(--leise); max-width: 44em; } /* Stufe 1: nur der Code. Stufe 2: die Tafel darum. Stufe 3: dazu die Fläche in der Nähe. */ .szene[data-stufe="1"] .tafel__brett { background: transparent; box-shadow: 0 0 0 1px transparent; } .szene[data-stufe="1"] .tafel__text { opacity: 0; transform: translateX(-12px); } .szene[data-stufe="1"] .tafel__pfosten { transform: scaleY(0); opacity: 0; } .szene[data-stufe="1"] .tafel__qr { transform: scale(1.12); } .szene:not([data-stufe="3"]) .flaeche { opacity: 0; transform: translateY(14px); } .szene:not([data-stufe="3"]) .szene__mass { opacity: 0; transform: scaleX(0); } .werbung__kopf { grid-column: 9 / span 4; } .werbung__kopf .t-gross { margin-top: clamp(14px, 1.6vw, 26px); font-size: clamp(2rem, min(3.5vw, 7.4svh), 4.75rem); } .werbung__kopf .t-text { margin-top: clamp(18px, 2vw, 30px); } .stufenwahl { margin-top: clamp(22px, 2.6vw, 40px); display: grid; border-top: 1px solid #bccadb; } .stufenwahl button { position: relative; display: grid; gap: 4px; text-align: left; padding: clamp(14px, 1.5vw, 22px) 0 clamp(14px, 1.5vw, 22px) 22px; background: none; border: 0; border-bottom: 1px solid #c3cfde; cursor: pointer; color: var(--leise); transition: color .25s ease; } .stufenwahl button::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px; background: var(--akzent); transform: scaleY(0); transform-origin: 50% 0; transition: transform .45s var(--weich); } .stufenwahl button[aria-pressed="true"]::before { transform: none; } .stufenwahl button b { font-weight: 450; letter-spacing: -.02em; line-height: 1.15; font-size: clamp(1.1875rem, 1.45vw, 1.75rem); color: inherit; } .stufenwahl button span { font-size: .9375rem; line-height: 1.5; color: var(--text); max-width: 34em; } .stufenwahl button[aria-pressed="true"] b, .stufenwahl button:hover b { color: var(--tinte); } html:not(.js) .stufenwahl button { cursor: default; color: var(--tinte); } html:not(.js) .stufenwahl button::before { display: none; } html:not(.js) .stufenwahl button { padding-left: 0; } @media (max-width: 1040px) { .szene, .werbung__kopf { grid-column: 1 / -1; } .werbung__kopf { order: -1; } } @media (max-width: 560px) { .szene__bild { aspect-ratio: 760 / 560; } .tafel { left: 5%; width: 68%; top: 9%; } .tafel__brett { grid-template-columns: minmax(0, 1fr) 42%; padding: 6%; gap: 4%; } .tafel__logo { font-size: max(10px, 2.6cqw); } .tafel__titel { font-size: 4.9cqw; } .tafel__zeile, .tafel__link { font-size: 2.7cqw; } .tafel__zeile, .tafel__link { display: none; } .flaeche { right: 5%; width: 17%; } .szene__mass { left: 40%; right: 13.5%; } } /* ── Ablauf: vier Schritte als Treppe ────────────────────────────────────── Die Linie wird zur Treppe: Jeder Schritt steht eine Stufe höher. Die Überschrift sitzt im freien Feld oben links, der Schlusssatz unter der letzten Stufe. Am Handy und Tablett bleibt es eine einfache Folge. */ .treppe { --stufe: clamp(64px, 7.4vw, 150px); --spalt: clamp(16px, 2.2vw, 44px); display: grid; } .treppe > * { grid-area: 1 / 1; } .treppe__kopf { position: relative; z-index: 1; align-self: start; width: calc(50% - var(--spalt)); } .treppe__schluss { align-self: end; justify-self: end; width: calc((100% - 3 * var(--spalt)) / 4); padding-top: 14px; } .schritte { --bildhoehe: clamp(150px, 15vw, 340px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--spalt); align-items: end; counter-reset: schritt; } .schritte li { position: relative; counter-increment: schritt; margin-bottom: calc(var(--n, 0) * var(--stufe)); padding-bottom: clamp(18px, 1.8vw, 30px); } .schritte li:nth-child(2) { --n: 1; } .schritte li:nth-child(3) { --n: 2; } .schritte li:nth-child(4) { --n: 3; } /* Trittstufe: läuft bis an die nächste Stufe heran. Sie wächst mit dem Scrollen (--zug, seite.js). */ .schritte li::before { content: ""; position: absolute; left: 0; right: calc(var(--spalt) * -1); bottom: 0; height: 1px; background: var(--akzent); transform-origin: 0 50%; transform: scaleX(clamp(0, calc(var(--zug, 1) * 4.6 - var(--n, 0)), 1)); } .schritte li:last-child::before { right: 0; } /* Setzstufe: senkrecht hinauf zur nächsten Trittstufe */ .schritte li::after { content: ""; position: absolute; left: calc(100% + var(--spalt)); bottom: 0; width: 1px; height: var(--stufe); background: var(--akzent); transform-origin: 50% 100%; transform: scaleY(clamp(0, calc((var(--zug, 1) * 4.6 - var(--n, 0) - .9) * 5), 1)); } .schritte li:last-child::after { display: none; } .schritte figure { height: var(--bildhoehe); overflow: hidden; border-radius: 3px; background: var(--band-hell); } .schritte figure img { width: 100%; height: 100%; object-fit: cover; } .schritte figure.hell img { object-fit: contain; padding: 7%; } .schritte figure.oben img { object-position: 0 0; } .schritte .nr { margin-top: clamp(16px, 1.6vw, 26px); font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--akzent-dunkel); } .schritte .nr::after { content: counter(schritt, decimal-leading-zero); margin-left: .5em; } .schritte h3 { margin-top: 6px; color: var(--tinte); font-weight: 400; letter-spacing: -.03em; line-height: 1.08; font-size: clamp(1.375rem, 2vw, 2.375rem); } .schritte li > p:last-child { margin-top: 10px; max-width: 26em; font-size: 1rem; } @media (max-width: 1040px) { .treppe { display: block; } .treppe__kopf { width: auto; } .treppe__schluss { width: auto; max-width: 40em; margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--linie); } .schritte { --bildhoehe: clamp(170px, 34vw, 340px); margin-top: clamp(32px, 5vw, 56px); grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; align-items: start; } .schritte li { margin-bottom: 0; padding-bottom: 0; } .schritte li::before, .schritte li::after { display: none; } .schritte .nr { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--akzent); } } @media (max-width: 560px) { .schritte { grid-template-columns: minmax(0, 1fr); row-gap: 30px; } .schritte li { display: grid; grid-template-columns: 34% minmax(0, 1fr); column-gap: 16px; align-items: start; } .schritte figure { grid-row: 1 / span 3; height: auto; aspect-ratio: 4 / 5; align-self: start; } .schritte .nr { margin-top: 0; } .schritte li > :not(figure) { grid-column: 2; } } /* ── Wer wir sind ───────────────────────────────────────────────────────── */ .wir { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 48px); row-gap: 40px; align-items: start; } .wir__kopf { grid-column: 1 / span 5; } .wir__kopf .t-gross { margin-top: clamp(14px, 1.6vw, 26px); } .wir__kopf .t-text { margin-top: clamp(18px, 2vw, 30px); } .wir__leute { grid-column: 7 / span 6; border-top: 1px solid #bccadb; } .mensch { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 44px); padding: clamp(24px, 3vw, 52px) 0; border-bottom: 1px solid #c3cfde; } .mensch img { flex: none; width: clamp(96px, 10vw, 190px); aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; } .mensch h3 { color: var(--tinte); font-weight: 340; letter-spacing: -.04em; line-height: 1; font-size: clamp(2rem, 3.4vw, 4.25rem); } .mensch__rolle { margin-top: 10px; font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--akzent-dunkel); } .mensch p:last-child { margin-top: 10px; max-width: 30em; } @media (max-width: 1040px) { .wir__kopf, .wir__leute { grid-column: 1 / -1; } } /* ── Anfrage ────────────────────────────────────────────────────────────── */ .kontakt { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 48px); row-gap: 44px; align-items: start; } .kontakt__kopf { grid-column: 1 / span 5; } .kontakt__kopf .t-text { font-size: clamp(1.0625rem, 1.2vw, 1.5rem); color: var(--tinte); } .kontakt__zeilen { margin-top: clamp(24px, 3vw, 44px); border-top: 1px solid #b4c3d6; max-width: 30em; } .kontakt__zeilen div { display: grid; grid-template-columns: 11em minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 1px solid #c6d2e1; } .kontakt__zeilen dt { font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--leise); } .kontakt__zeilen dd { font-size: 1.1875rem; letter-spacing: -.015em; color: var(--tinte); overflow-wrap: anywhere; } .kontakt__zeilen dd a { color: inherit; text-decoration-color: var(--akzent); } .kontakt__zeilen dd a:hover { color: var(--akzent-dunkel); } .makler { margin-top: clamp(24px, 3vw, 40px); display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; max-width: 34em; } .makler::before { content: ""; height: 1px; margin-top: .85em; background: var(--akzent); } .sozial { margin-top: 20px; display: flex; gap: 22px; flex-wrap: wrap; } .sozial:empty { display: none; } .formular { position: relative; grid-column: 7 / span 6; padding: clamp(22px, 3vw, 56px); background: var(--band-hell); border: 1px solid var(--linie); border-radius: 4px; } .formular__reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(18px, 2vw, 36px); } .feld { margin-top: 22px; } .formular__reihe .feld { margin-top: 0; } .feld label, .wahlfeld legend { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--leise); } .feld label span, .wahlfeld legend span { font-weight: 400; letter-spacing: .04em; text-transform: none; } .feld input, .feld textarea { display: block; width: 100%; margin: 0; padding: 9px 0 11px; background: transparent; color: var(--tinte); border: 0; border-bottom: 1px solid #7f90a3; border-radius: 0; font: inherit; font-size: 1.125rem; line-height: 1.4; resize: vertical; transition: border-color .2s ease, box-shadow .2s ease; } .feld input:hover, .feld textarea:hover { border-bottom-color: var(--tinte); } .feld input:focus, .feld textarea:focus { outline: none; border-bottom-color: var(--akzent); box-shadow: 0 1px 0 var(--akzent); } .feld input[aria-invalid="true"], .feld textarea[aria-invalid="true"] { border-bottom-color: #a3261b; box-shadow: 0 1px 0 #a3261b; } .wahlfeld { margin: 28px 0 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; } .wahlfeld legend { float: left; width: 100%; margin-bottom: 12px; padding: 0; } .wahlfeld label { position: relative; cursor: pointer; } .wahlfeld input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .wahlfeld label span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 15px; border: 1px solid #828f9f; border-radius: 3px; font-size: .9375rem; line-height: 1.25; color: var(--tinte); transition: border-color .2s ease, background .2s ease, color .2s ease; } .wahlfeld label:hover span { border-color: var(--tinte); } .wahlfeld input:checked + span { border-color: var(--akzent); background: #edf3fc; color: var(--akzent-dunkel); box-shadow: inset 0 0 0 1px var(--akzent); } .wahlfeld input:focus-visible + span { outline: 2px solid var(--akzent); outline-offset: 2px; } .nicht-ausfuellen { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .formular__fuss { margin-top: 30px; display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; } .formular__fuss .t-klein { flex: 1 1 16em; } .formular__meldung { margin-top: 16px; font-weight: 550; color: var(--tinte); } .formular__meldung:empty { display: none; } .formular__meldung[data-art="fehler"] { color: #a3261b; } .formular[data-laeuft] .knopf { opacity: .6; pointer-events: none; } .formular__dank { display: none; } .formular[data-gesendet] > :not(.formular__dank) { display: none; } .formular[data-gesendet] .formular__dank { display: block; } /* Ersatz für das Formular, solange ein Bauziel keine Annahmestelle hat (teile/anfrage-per-mail.html) */ .formular--mail h3 { color: var(--tinte); font-weight: 400; letter-spacing: -.03em; line-height: 1.1; font-size: clamp(1.5rem, 2.2vw, 2.5rem); } .formular--mail p { margin-top: 14px; max-width: 34em; } .formular--mail .formular__wege { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .formular__dank h3 { color: var(--tinte); font-weight: 360; letter-spacing: -.035em; line-height: 1.05; font-size: clamp(1.75rem, 2.8vw, 3.25rem); } .formular__dank p { margin-top: 14px; } @media (max-width: 1040px) { .kontakt__kopf, .formular { grid-column: 1 / -1; } } @media (max-width: 560px) { .formular__reihe { grid-template-columns: minmax(0, 1fr); row-gap: 22px; } .kontakt__zeilen div { grid-template-columns: minmax(0, 1fr); gap: 2px; } .formular { margin-inline: calc(var(--rand) * -0.5); } } /* ── Fuß ────────────────────────────────────────────────────────────────── */ .fuss { padding: clamp(36px, 4vw, 64px) 0 clamp(28px, 3vw, 44px); background: #fff; border-top: 1px solid var(--linie); } .fuss__innen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 48px); row-gap: 24px; align-items: start; } .fuss__marke { grid-column: 1 / span 5; } .fuss__marke img { height: 34px; width: auto; } .fuss__marke p { margin-top: 14px; max-width: 34em; } .fuss__nav { grid-column: 7 / span 3; display: grid; gap: 2px; align-content: start; } .fuss__recht { grid-column: 10 / span 3; display: grid; gap: 2px; align-content: start; } .fuss a { color: var(--tinte); text-decoration: none; font-size: .9375rem; min-height: 32px; display: inline-flex; align-items: center; } .fuss a:hover { color: var(--akzent-dunkel); text-decoration: underline; } /* „Vertrag widerrufen" muss nach § 356a BGB gut lesbar, hervorgehoben und leicht zugänglich sein: eigener Textlink, fett und unterstrichen, mit Abstand zu Impressum und Datenschutz (kein Knopf, Phil 19.10.2026: ruhig wie die übrigen Rechtsseiten). */ .fuss a.fuss__widerruf { margin-top: 14px; color: var(--akzent-dunkel); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; justify-self: start; } .fuss a.fuss__widerruf:hover { color: var(--tinte); } .fuss__unten { grid-column: 1 / -1; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--linie-fein); display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; } @media (max-width: 800px) { .fuss__marke, .fuss__nav, .fuss__recht { grid-column: 1 / -1; } .fuss a { min-height: 44px; } } /* ── Unterseiten (Impressum, Datenschutz) ───────────────────────────────── */ .unterkopf { position: relative; min-height: clamp(300px, 44svh, 520px); display: grid; align-items: end; padding: calc(var(--kopf) + clamp(40px, 7vw, 120px)) 0 clamp(36px, 5vw, 80px); background: linear-gradient(180deg, #fff 0%, var(--band-hell) 60%, var(--band) 100%); overflow: hidden; } .unterkopf__plan { position: absolute; right: var(--links); top: calc(var(--kopf) + 18px); width: clamp(170px, 19vw, 330px); pointer-events: none; } .unterkopf__plan img { width: 100%; height: auto; } .unterkopf .t-gross { margin-top: 18px; position: relative; } .unterkopf--hoch { min-height: 72svh; align-items: center; } .rechtstext { padding-block: clamp(40px, 5vw, 96px); } .rechtstext .raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 48px); } .rechtstext__inhalt { grid-column: 1 / span 7; } .rechtstext__rand { grid-column: 9 / span 4; align-self: start; position: sticky; top: calc(var(--kopf) + 24px); padding: 20px 0 0; border-top: 1px solid var(--akzent); } .rechtstext h2 { margin: 2.2em 0 .5em; color: var(--tinte); font-weight: 450; letter-spacing: -.025em; line-height: 1.15; font-size: clamp(1.375rem, 1.7vw, 1.875rem); } .rechtstext h2:first-child { margin-top: 0; } .rechtstext h3 { margin: 1.6em 0 .4em; color: var(--tinte); font-weight: 600; font-size: 1.0625rem; } .rechtstext p, .rechtstext ul { margin-top: .8em; max-width: 44em; } .rechtstext ul { list-style: none; } /* Widerrufsseite: Link zur Widerrufsfunktion (§ 356a BGB) und das Muster-Formular zum Aufklappen. */ .rechtstext .wr-link { font-weight: 700; color: var(--akzent-dunkel); text-decoration: underline; text-underline-offset: 3px; } .rechtstext .wr-anschrift { margin: .6em 0 .8em; font-style: normal; line-height: 1.6; } .rechtstext .wr-formular { margin-top: 2.2em; border-top: 1px solid var(--linie-fein); padding-top: 1.2em; max-width: 44em; } .rechtstext .wr-formular > summary { cursor: pointer; font-weight: 600; color: var(--tinte); } .rechtstext .wr-formular p { overflow-wrap: anywhere; } .rechtstext ul li { position: relative; padding-left: 26px; margin-top: .35em; } .rechtstext ul li::before { content: ""; position: absolute; left: 0; top: .8em; width: 14px; height: 1px; background: var(--akzent); } .rechtstext address { font-style: normal; margin-top: .8em; line-height: 1.7; color: var(--tinte); } .vorlage { margin-bottom: 2em; padding: 14px 18px; border-left: 2px solid var(--akzent); background: var(--band-hell); font-size: .9375rem; } @media (max-width: 1040px) { .rechtstext__inhalt, .rechtstext__rand { grid-column: 1 / -1; } .rechtstext__rand { position: relative; top: auto; margin-top: 40px; } .unterkopf__plan { display: none; } } /* ────────────────────────────────────────────────────────────────────────── Neuer Aufbau (08.10.2026): Startseite als Wegweiser, je Leistung eine Seite. Die Signatur bleibt die blaue Linie: sie steht über jeder Überzeile, trennt die beiden Wege und trägt als Maßzeile jede Gruppe von Fakten. ────────────────────────────────────────────────────────────────────────── */ /* ── Gemeinsame Teile beider Auftakte ──────────────────────────── Satz und Knopfreihe gelten für Startseite und Individuelles Exposé. Der Block „.auftakt--start“ vom 09.10.2026 mittags (Haus als Rasterspalte rechts, Bildunterschrift und Pille „Drehung anhalten“ darunter) ist am Abend desselben Tages entfallen: Phil fand den Auftakt zu klein und zu eingerahmt. An seiner Stelle steht „.auftakt--gross“ weiter unten. */ .auftakt__satz { max-width: var(--mass); color: var(--text); font-size: clamp(1.0625rem, 1.15vw, 1.4375rem); line-height: 1.45; text-wrap: pretty; } .auftakt__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; } /* ── Maßzeile: Fakten als Zeilen mit Haarlinie, nie als nackte Absätze ───── Das zweite Gestaltungsmittel neben der blauen Linie, aus derselben Idee: die Maßlinie einer Zeichnung. Haarlinie oben, Etikett in Kapitälchen, ein Satz darunter. Keine Karten mit Symbol und Schatten (Skill handschrift: „Reihe aus drei gleichen Karten mit Symbol" ist ein KI-Verräter). Phil, 09.10.2026: „Fakten immer als Kacheln oder Zeilen mit Linie." */ .masszeile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 48px); } .masszeile--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); } .masszeile--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); } .masszeile > li { display: grid; align-content: start; gap: 6px; padding-top: 14px; border-top: 1px solid var(--linie); } .masszeile b { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent); } .masszeile span { font-size: .9375rem; line-height: 1.5; color: var(--text); text-wrap: pretty; } @media (max-width: 860px) { .masszeile, .masszeile--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .masszeile, .masszeile--zwei, .masszeile--vier { grid-template-columns: minmax(0, 1fr); gap: 16px; } } /* ── Kennzeichnung KI-erzeugter und KI-bearbeiteter Bilder (EU-KI-Verordnung, Art. 50) ── Vorbild ist die Seite von Marius (mariusmay.de, Phil 14.10.2026): ein kleines Feld IN der unteren Bildecke, nicht darunter. Kurz „AI", beim Überfahren wächst die ausgeschriebene Angabe nach links („-erzeugt", „-bearbeitet", „-Visualisierung"). Der Bau setzt es automatisch hinter jedes Bild aus der Liste KI_BILDER in scripts/immo-studio-bauen.mts; von Hand kommt nichts dazu. Bildschirmfotos unserer eigenen Exposés, Standbilder der 3D-Modelle und Karten tragen es nicht. Drei Dinge daran sind Absicht: - Der Vorleser bekommt immer den ganzen Satz (.nur-leser); die zwei sichtbaren Teile tragen aria-hidden, weil ein aufklappendes Wortstück vorgelesen keinen Sinn ergibt. - Die Hälfte „-erzeugt" bleibt bei max-width: 0 statt display: none, sonst springt der Übergang. - Der Sockel ist deckend genug, um allein zu tragen: Der Grund unter der Ecke schwankt zwischen Weiß und Schwarz. Weiß auf rgba(11,22,41,.72) bleibt auch auf reinem Weiß über 7:1. Das Elternelement bekommt position: relative nur dort, wo es noch keine Position hat (:where hat keine Gewichtung, jede eigene Regel gewinnt). */ :where(:has(> .ki-hinweis)) { position: relative; } /* Zwei Teile: .ki-hinweis ist ein unsichtbarer Rahmen und passt sich der Bildform an, .ki-hinweis__feld ist das sichtbare Feld darin. Normalfall: Der Rahmen deckt das Elternelement (das Bild) ab. Die Sonderfälle unten (Bild mit Bildunterschrift, Spaltenaufbau, Auftakt, am Handy ausgeblendete Bilder) ändern nur den Rahmen. */ .ki-hinweis { position: absolute; inset: 0; z-index: 3; margin: 0; pointer-events: none; } .ki-hinweis__feld { position: absolute; right: .6rem; bottom: .6rem; display: flex; align-items: baseline; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: .6875rem; line-height: 1; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; color: #fff; background: rgba(11, 22, 41, .72); padding: .25rem .4rem; border-radius: 2px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } /* Im Vorher-nachher-Schieber sitzt es links, im Teil, der mit dem bearbeiteten Bild verschwindet. */ .ki-hinweis--links .ki-hinweis__feld { right: auto; left: .6rem; } .ki-hinweis__lang { display: inline-block; overflow: hidden; white-space: nowrap; max-width: 0; opacity: 0; transition: max-width .32s ease, opacity .2s ease .06s; } :has(> .ki-hinweis):hover > .ki-hinweis .ki-hinweis__lang { max-width: 22ch; opacity: 1; } /* Ohne Zeigegerät (Touch) gibt es kein Überfahren: Dort steht die Langfassung dauerhaft. */ @media (hover: none) { .ki-hinweis__lang { max-width: 22ch; opacity: 1; transition: none; } } @media (prefers-reduced-motion: reduce) { .ki-hinweis__lang { transition: none; } } @media print { .ki-hinweis__feld { background: #0b1629; color: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ki-hinweis__lang { max-width: 22ch; opacity: 1; transition: none; } } /* Bild mit Bildunterschrift darunter: Der Rahmen ist eine Null-Höhen-Linie an der Unterkante des Bildes (das Bild ist ein Block in voller Breite), das Feld sitzt davon aus nach oben. */ figure:has(> figcaption) > .ki-hinweis { position: relative; inset: auto; display: block; height: 0; } /* Auftakt der Startseite: Das Bild füllt die Fläche und wandert am Handy; das Feld sitzt immer oben rechts unter der Kopfleiste, wo das Bild sicher ist. */ .start-auftakt > .ki-hinweis .ki-hinweis__feld { bottom: auto; top: calc(var(--kopf, 76px) + .6rem); } /* Bilder als Spalte neben Text (Kurzabschnitte der Startseite): Der Rahmen liegt als durchsichtiges Feld mit demselben Seitenverhältnis in derselben Zelle wie das Bild. Die Zellen stehen in stil-start.css fest (Bild, Rahmen und Text je Zelle), damit der Rahmen nichts verschiebt. */ .sx-kurz > .ki-hinweis { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 3; align-self: center; } /* Bilder, die am Handy ausgeblendet sind, nehmen ihr Feld mit. */ @media (max-width: 1040px) { .st-firmen__bild + .ki-hinweis, .st-kontakt__bild + .ki-hinweis { display: none; } } /* ── Leistung: ein großes Bild, daneben wenig Text. Seiten tauschen ──────── */ .wechsel { padding-block: var(--abschnitt); background: var(--weiss); } .wechsel--band { background: var(--band); } .wechsel__innen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 72px); row-gap: clamp(24px, 3vw, 40px); align-items: center; } .wechsel__bild { position: relative; grid-column: 1 / span 7; } .wechsel__bild img { width: 100%; border: 1px solid var(--linie); border-radius: 4px; } .wechsel__text { grid-column: 9 / span 4; display: grid; justify-items: start; gap: clamp(14px, 1.3vw, 22px); } .wechsel__text .t-gross { margin-top: 2px; } .wechsel--gedreht .wechsel__bild { grid-column: 6 / span 7; order: 2; } .wechsel--gedreht .wechsel__text { grid-column: 1 / span 4; order: 1; } /* Die Maßzeile unter einem Wechsel-Block läuft über das ganze Raster: Sie ist das Mittel, das diesen einen Block von seinen Nachbarn unterscheidet. */ .wechsel__mass { grid-column: 1 / -1; margin-top: clamp(26px, 3vw, 48px); } /* „Für Maklerbüros und Hausverwaltungen" ist zu lang für vier Spalten: Das Wort Hausverwaltungen stand allein in der dritten Zeile. */ .wechsel--firmen .wechsel__text { grid-column: 1 / span 5; } .wechsel--firmen .wechsel__bild { grid-column: 7 / span 6; } @media (max-width: 1040px) { .wechsel__bild, .wechsel__text, .wechsel--gedreht .wechsel__bild, .wechsel--gedreht .wechsel__text, .wechsel--firmen .wechsel__bild, .wechsel--firmen .wechsel__text { grid-column: 1 / -1; order: initial; } } /* ── Bildreihe „So sieht ein Exposé aus": echte Bildschirmfotos ─────────── */ .schau { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 36px); margin-top: clamp(32px, 4vw, 64px); } .schau__karte a { display: grid; align-content: start; gap: 8px; height: 100%; padding-bottom: 18px; color: var(--text); text-decoration: none; } .schau__karte img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; margin-bottom: 8px; border: 1px solid var(--linie); border-radius: 4px; background: var(--weiss); transition: transform .4s var(--weich), box-shadow .4s var(--weich); } .schau__karte a:hover img { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(16, 24, 32, .13); } .schau__rubrik { font-size: .6875rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--akzent); } .schau__karte strong { font-size: 1.125rem; font-weight: 500; letter-spacing: -.018em; } @media (max-width: 1040px) { .schau { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .schau { grid-template-columns: 1fr; } } /* Pille: das Lieferversprechen. Eine, nicht zwei (kein Express). */ .pille { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border: 1px solid var(--linie); border-radius: 100px; background: rgba(255, 255, 255, .8); font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tinte); } .pille::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--akzent); } /* ── Bildwunsch: sichtbare Lücke statt Stockfoto ─────────────────────────── Phils Regel (Skill handschrift): Eine fehlende Angabe wird gemeldet, nicht mit einer Floskel gefüllt. Hier steht darum die Bildbeschreibung im Bild. Die Beschreibungen sammelt webseite-immo-studio/BILDWUENSCHE.md. */ .bildwunsch { position: relative; display: grid; align-content: end; gap: 10px; min-height: clamp(220px, 34vw, 560px); padding: clamp(18px, 2vw, 34px); border: 1px solid var(--linie); border-radius: 4px; color: var(--leise); background-color: var(--band-hell); background-image: repeating-linear-gradient(135deg, rgba(16, 88, 192, .07) 0 2px, transparent 2px 11px); } .bildwunsch--schmal { min-height: clamp(180px, 22vw, 360px); } .bildwunsch b { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--akzent); } .bildwunsch span { display: block; max-width: 56em; font-size: .9375rem; line-height: 1.5; } /* ── Eine Leistung, zwei Spalten: Bild und Text ──────────────────────────── */ .leistung { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 48px); row-gap: 28px; align-items: center; } .leistung__bild { grid-column: 1 / span 6; } .leistung__text { grid-column: 8 / span 5; display: grid; gap: 18px; justify-items: start; } /* Hochformat (Grundrisszeichnung): gerahmt und in der Höhe begrenzt, sonst reißt die eine Zeichnung den ganzen Abschnitt auf und daneben steht nur Weiß. */ .leistung__bild--plan { display: grid; justify-items: center; padding: clamp(18px, 2vw, 40px); background: var(--band-hell); border: 1px solid var(--linie); border-radius: 4px; } /* Höhe fest, Breite aus dem Seitenverhältnis: So steht die Zeichnung auch dann schon richtig im Raster, wenn sie als loading="lazy" noch nicht geladen ist. Mit „width: auto" ohne Höhe fiele der Platz vor dem Laden auf null zusammen. */ .leistung__bild--plan img { height: clamp(280px, 46vh, 560px); width: auto; max-width: 100%; } .leistung__bild--plan figcaption { justify-self: start; } .leistung--rechts .leistung__bild { grid-column: 7 / span 6; order: 2; } .leistung--rechts .leistung__text { grid-column: 1 / span 5; order: 1; } @media (max-width: 1040px) { .leistung__bild, .leistung__text, .leistung--rechts .leistung__bild, .leistung--rechts .leistung__text { grid-column: 1 / -1; order: initial; } } /* ── Software-Band ───────────────────────────────────────────────────────── Bis 09.10.2026 die einzige dunkle Fläche der Seite (Tinte mit weißer Schrift). Phils Regel „hell, immer. Keine dunklen Flächen" gilt auch hier, darum steht das Band jetzt auf dem hellen Blau der Exposés. Links das Wort mit zwei Maßzeilen, rechts das Bild: So trägt der Abschnitt mehr als Überzeile, Überschrift und Absatz. */ .softband { padding-block: var(--abschnitt); background: var(--band); color: var(--text); } .softband__innen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 56px); row-gap: clamp(26px, 3vw, 40px); align-items: center; } .softband__wort { grid-column: 1 / span 6; display: grid; gap: clamp(16px, 1.8vw, 28px); } .softband h2 { color: var(--tinte); font-weight: 340; letter-spacing: -.034em; line-height: 1.04; font-size: clamp(1.875rem, 3.1vw, 3.5rem); text-wrap: balance; } .softband__bild { grid-column: 8 / span 5; position: relative; } .softband__bild img { width: 100%; height: clamp(220px, 30vw, 460px); object-fit: cover; object-position: 50% 42%; border: 1px solid #cfdbea; border-radius: 4px; } .softband .masszeile > li { border-top-color: #c3d2e5; } @media (max-width: 1040px) { .softband__wort, .softband__bild { grid-column: 1 / -1; } } /* ── Pakete: drei Preise nebeneinander ──────────────────────────────────── */ .pakete { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 32px); margin-top: clamp(28px, 3.4vw, 56px); } .paket { display: grid; grid-template-rows: auto auto auto 1fr; gap: 14px; padding: clamp(18px, 1.8vw, 30px); background: var(--weiss); border: 1px solid var(--linie); border-radius: 4px; } .paket--hervor { border-color: var(--akzent); box-shadow: 0 1px 0 var(--akzent) inset; } .paket h3 { color: var(--tinte); font-weight: 450; letter-spacing: -.026em; font-size: clamp(1.25rem, 1.6vw, 1.75rem); } .paket__preis { color: var(--tinte); font-weight: 420; letter-spacing: -.03em; line-height: 1; font-size: clamp(2rem, 2.8vw, 3rem); } .paket__preis small { display: block; margin-top: 8px; font-size: .8125rem; font-weight: 400; letter-spacing: 0; color: var(--leise); } .paket__liste { display: grid; gap: 8px; align-content: start; font-size: .9375rem; } .paket__liste li { position: relative; padding-left: 24px; } .paket__liste li::before { content: ""; position: absolute; left: 0; top: .76em; width: 13px; height: 1px; background: var(--akzent); } .preishinweis { margin-top: 22px; font-size: .875rem; color: var(--leise); max-width: 46em; } @media (max-width: 900px) { .pakete { grid-template-columns: 1fr; } } /* ── Über uns: Lücke je Person sichtbar ─────────────────────────────────── */ .leute { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 48px); margin-top: clamp(28px, 3.4vw, 56px); } .leute > article { display: grid; gap: 18px; align-content: start; } .leute h3 { color: var(--tinte); font-weight: 450; letter-spacing: -.026em; font-size: clamp(1.25rem, 1.7vw, 1.875rem); } .leute__rolle { font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent); } @media (max-width: 760px) { .leute { grid-template-columns: 1fr; } } /* ── Schritte einer Leistung: schlichte Liste mit Nummer ────────────────── */ .ablaufliste { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(20px, 2.4vw, 44px); margin-top: clamp(28px, 3.4vw, 56px); counter-reset: s; } .ablaufliste > li { display: grid; gap: 10px; align-content: start; padding-top: 20px; border-top: 1px solid var(--linie); counter-increment: s; } .ablaufliste > li::before { content: counter(s, decimal-leading-zero); font-size: .8125rem; font-weight: 600; letter-spacing: .14em; color: var(--akzent); } .ablaufliste h3 { color: var(--tinte); font-weight: 500; letter-spacing: -.02em; font-size: 1.125rem; } /* ── Firmenkunden (Seite /firmenkunden, 09.10.2026) ─────────────────────── Phil: „Wo gehst du drauf ein, dass größere Maklerfirmen Login-Daten bekommen … Stammkunden mit separaten Preisen?" Die Seite ist bewusst anders gebaut als die übrigen Unterseiten: schmaler Auftakt ohne Bild, dann die vier Punkte als Liste mit Haarlinie (keine Kartenreihe, Skill handschrift), dann ein eingerückter Hinweis, dann das Formular. */ .unterkopf--schmal { min-height: 0; align-items: center; padding-bottom: clamp(44px, 5vw, 96px); } .firmenkopf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 72px); row-gap: clamp(32px, 4vw, 56px); align-items: center; } .firmenkopf__wort { grid-column: 1 / span 6; display: grid; justify-items: start; gap: clamp(14px, 1.5vw, 24px); } .firmenkopf__wort .t-gross { max-width: 11em; } .firmenkopf__wort .auftakt__knoepfe { margin-top: 10px; } /* Der Bestand eines Büros: drei echte Exposés untereinander, mit Haarlinie getrennt. Keine Kartenreihe mit Schatten. */ .firmenkopf__bestand { grid-column: 8 / span 5; border-top: 1px solid #bccadb; } .firmenkopf__bestand a { display: grid; grid-template-columns: clamp(96px, 11vw, 168px) minmax(0, 1fr); gap: clamp(14px, 1.6vw, 26px); align-items: center; padding: clamp(14px, 1.5vw, 22px) 0; border-bottom: 1px solid #c6d2e1; color: var(--text); text-decoration: none; } .firmenkopf__bestand img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; border: 1px solid #c6d2e1; border-radius: 3px; background: var(--weiss); transition: transform .35s var(--weich); } .firmenkopf__bestand a:hover img { transform: translateY(-3px); } .firmenkopf__bestand span { display: grid; gap: 4px; font-size: .875rem; line-height: 1.45; } .firmenkopf__bestand b { font-size: 1.0625rem; font-weight: 500; letter-spacing: -.018em; } .firmenkopf__bestand a:hover b { color: var(--akzent-dunkel); } @media (max-width: 1040px) { .firmenkopf__wort, .firmenkopf__bestand { grid-column: 1 / -1; } } /* Stil-Satz und „Ohne Abo" unter dem Auftakt (12.10.2026), über die volle Rasterbreite. */ .firmenkopf__stil { grid-column: 1 / -1; } .firmenkopf__stil span { max-width: 24em; } .nutzen { margin-top: clamp(32px, 4vw, 64px); border-top: 1px solid #bccadb; counter-reset: n; } .nutzen > li { display: grid; grid-template-columns: minmax(0, 1fr) clamp(200px, 24vw, 400px); column-gap: clamp(24px, 3vw, 64px); row-gap: 20px; align-items: center; padding: clamp(24px, 2.8vw, 48px) 0; border-bottom: 1px solid #c3cfde; counter-increment: n; } .nutzen__wort { display: grid; gap: 10px; align-content: start; } .nutzen b { display: flex; align-items: center; gap: 12px; font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--akzent); } .nutzen b::before { content: counter(n, decimal-leading-zero); color: var(--leise); } .nutzen h3 { color: var(--tinte); font-weight: 400; letter-spacing: -.028em; line-height: 1.1; font-size: clamp(1.375rem, 2.1vw, 2.25rem); text-wrap: balance; } .nutzen p { max-width: var(--mass); } .nutzen img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; border: 1px solid #c3cfde; border-radius: 4px; background: var(--weiss); } @media (max-width: 760px) { .nutzen > li { grid-template-columns: minmax(0, 1fr); } .nutzen img { order: -1; } } /* Anrede und Name in einer Zeile: die Anrede braucht nur so viel Platz, wie zwei Knöpfe nebeneinander belegen. */ .formular__reihe--anrede { grid-template-columns: auto minmax(0, 1fr); align-items: start; margin-top: 28px; } /* flex-wrap: wrap, damit die Legende (float, volle Breite) über den Knöpfen steht statt daneben; die Zeile darunter braucht eigenen Abstand, sonst klebt „E-Mail der Firma" an den Knöpfen (Review 21.10.2026). */ .wahlfeld--eng { margin: 0; flex-wrap: wrap; } .wahlfeld--eng legend { white-space: nowrap; } .formular__reihe--anrede + .formular__reihe { margin-top: 28px; } .feld--haken { margin-top: 28px; } .feld--haken label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; font-size: .9375rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text); cursor: pointer; } /* Das Ankreuzfeld erbt sonst die Regeln der Texteingaben (volle Breite, Linie unten). */ .feld--haken input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; accent-color: var(--akzent); } /* „.feld input:focus" nimmt allen Eingaben den Fokusring und ersetzt ihn durch die blaue Linie unten. Beim Ankreuzfeld gibt es keine Linie, es bliebe also ohne jede sichtbare Markierung: Wer mit der Tastatur bedient, sähe nicht, wo er steht. Darum hier der Ring zurück. */ .feld--haken input[type="checkbox"]:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; } .feld--haken span { line-height: 1.5; } @media (max-width: 560px) { .formular__reihe--anrede { grid-template-columns: minmax(0, 1fr); row-gap: 22px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } @media print { .kopf, .zuglinie, .buehne-knoepfe, .kote { display: none !important; } .auftakt { min-height: 0; } } /* ── Auftakt der Startseite (Stand 09.10.2026 abends) ────────────────────── Phil am Nachmittag: „Ändere bitte nochmal den Hero, der gefällt mir noch nicht." Was er sah: ein kleines Haus in einer eigenen Rasterspalte, dazu eine Bildunterschrift und eine Pille „Drehung anhalten". Aus drei Entwürfen gewählt wurde die Fassung, die dem Auftakt vom Vormittag am nächsten kommt: das Haus groß und rahmenlos, die drei Wohnungen als Marken mit Linie daran, links Pille, Titel in zwei Zeilen (einfarbig Tinte, nicht halb blau), ein Satz und zwei Knöpfe, darunter die Fakten als Maßzeile. Keine Bildunterschrift, kein Pause-Knopf: Die Drehung hält an, sobald jemand das Haus anfasst, der Hinweis „Ziehen zum Drehen" steht klein darunter. Verworfen: ein Auftakt mit Bildschirmfotos statt 3D (zeigte dasselbe Bild wie der Block darunter) und einer mit mittigem Titel über die volle Breite (das Haus stand dort unter der Bildschirmkante). */ .auftakt--gross { /* Breite des Standbildes, so dass die Insel darauf genauso groß ist wie im lebenden Modell (gemessen, nicht geschätzt). Ändert sich data-luft oder die Lage der Bühne, muss dieser Wert mit. */ --bildbreite: calc(var(--raster) * .733); display: grid; grid-template-rows: minmax(0, 1fr) auto; row-gap: clamp(22px, 2.6vw, 48px); min-height: min(100svh, 1060px); padding: calc(var(--kopf) + clamp(16px, 2.2vw, 40px)) 0 clamp(28px, 3.2vw, 60px); background: linear-gradient(180deg, #fff 0%, #fff 46%, var(--band-hell) 100%); } .auftakt__feld { position: relative; width: var(--raster); margin-inline: auto; } /* Die Bühne liegt rechts im Raster und läuft nach unten aus dem Bild: Die Insel ist breiter als hoch, darum begrenzt die Höhe, wie groß das Haus stehen kann. Die Mitte liegt bei 62 % der Rasterbreite, damit rechts neben dem Haus noch die drei Marken Platz haben, ohne abgeschnitten zu werden. */ .auftakt--gross .auftakt__buehne { position: absolute; inset: 0 2% 0 26%; z-index: 0; } .auftakt--gross .auftakt__buehne model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; } .auftakt--gross .auftakt__buehne .standbild { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: var(--bildbreite); max-width: none; height: auto; } .auftakt--gross .auftakt__wort { position: relative; z-index: 2; display: grid; justify-items: start; align-content: center; height: 100%; gap: clamp(14px, 1.5vw, 24px); width: min(100%, calc(var(--raster) * .49)); pointer-events: none; } .auftakt--gross .auftakt__wort > * { pointer-events: auto; } /* Breite am Raster, nicht in em: Die Schriftgröße wächst mit dem Fenster, ein em-Maß wüchse mit und schöbe den Satz unter das Haus. */ .auftakt--gross .auftakt__satz { max-width: calc(var(--raster) * .27); } .auftakt--gross .t-riesig { font-size: clamp(2.2rem, min(5vw, 8.6svh, calc(var(--raster) / 29)), 4.5rem); } .auftakt--gross .t-riesig span { display: block; } /* Unter der Bühne, nicht im Bild: Die Hinweise stehen sonst auf Rasen und Asphalt und sind kaum zu lesen. Eine Pille wollte Phil dort nicht. Links die Aufforderung (die Marken sind anklickbar), rechts die Geste. */ .buehne__zieh { position: absolute; z-index: 2; left: 0; right: 2%; bottom: -24px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px 24px; flex-wrap: wrap; font-size: .75rem; letter-spacing: .04em; color: var(--leise); } .buehne__zieh > span { white-space: nowrap; } .buehne__tipp { color: var(--akzent-dunkel); font-weight: 550; } html:not(.js) .buehne__zieh { display: none; } /* Die Marken am Haus sind Tasten (gleiche Form wie auf „Individuelles Exposé"); ihre Gestaltung steht weiter oben bei „.kote button". Hier nur, was der Auftakt der Startseite anders braucht. Auftakt mit offener Tafel: Haus kleiner nach links, der Text tritt zurück. Die Maße sind andere als im übergreifenden Auftakt, weil die Bühne hier im Raster liegt und nicht über den Fensterrand hinausläuft. */ .auftakt--gross .wohntafel { right: 0; top: 0; bottom: 0; width: min(58%, 1180px); } .auftakt--gross[data-wahl] .auftakt__buehne { inset: 2% 60% 2% -16%; } .auftakt--gross .auftakt__wort { transition: opacity .5s ease .3s; } .auftakt--gross[data-wahl] .auftakt__wort, .auftakt--gross[data-wahl] .buehne__zieh { opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; } /* Die Wahltasten sind am PC unsichtbar (sie tragen nur die Angaben je Wohnung); der Platz, den ihr Behälter einnimmt, muss dann null sein. */ .auftakt--gross .auftakt__leiste { position: absolute; inset: auto auto 0 0; padding: 0; } html:not(.js) .auftakt--gross .auftakt__leiste { display: none; } @media (max-width: 1040px) { .auftakt--gross { grid-template-rows: repeat(4, auto); min-height: 0; } .auftakt--gross .auftakt__feld { display: contents; } /* grid-column ausdrücklich, auch wenn gerade keine fremde Regel dagegen hält: Eine Regel mit „grid-column: 1 / span 6" an einem der Kinder legt sonst sechs Spalten an, und das Haus landet in der ersten, 7 px breit. Genau das ist am 09.10.2026 passiert. */ .auftakt--gross .auftakt__wort { order: 1; grid-column: 1 / -1; width: auto; height: auto; padding-inline: var(--rand); margin-inline: auto; max-width: var(--raster); } .auftakt--gross .auftakt__buehne { order: 2; grid-column: 1 / -1; position: relative; inset: auto; height: clamp(260px, 44svh, 460px); margin-top: clamp(16px, 3vw, 32px); } .auftakt--gross .masszeile { grid-column: 1 / -1; } /* Am Handy steht der Satz unter dem Titel und braucht die volle Breite. */ .auftakt--gross .auftakt__satz { max-width: var(--mass); } .auftakt--gross .auftakt__buehne .standbild { width: auto; height: 100%; } /* Die drei Wohnungstasten stehen am Handy zwischen Haus und Maßzeile: Die Marken am Haus sind dort ausgeblendet, weil sie zu klein zum Antippen wären. Die Tasten sind damit die einzige Bedienung der Tafel. */ .auftakt--gross .auftakt__leiste { order: 3; grid-column: 1 / -1; position: relative; inset: auto; width: auto; margin-inline: auto; max-width: var(--raster); padding: clamp(14px, 3vw, 24px) var(--rand) 0; } .auftakt--gross .masszeile { order: 4; } .kote { display: none; } /* Am Handy führt keine Linie zur Tafel (sie ist ein Blatt über der Seite), und die Bühne behält ihre Maße, auch wenn eine Wohnung gewählt ist. Die Maße der Tafel müssen hier ausdrücklich zurückgenommen werden: Die Regel „.auftakt--gross .wohntafel" oben ist spezifischer als die Blatt- Regel „.wohntafel" und ließ das Blatt sonst nur 58 % breit stehen, mit der Seite daneben sichtbar (gesehen am 09.10.2026 bei 390 px). */ .auftakt--gross .wohntafel { inset: 0; width: auto; } .auftakt--gross[data-wahl] .auftakt__buehne { inset: auto; } .auftakt--gross[data-wahl] .auftakt__wort, .auftakt--gross[data-wahl] .buehne__zieh { opacity: 1; visibility: visible; } } /* ── „Was in jedem Exposé steckt": fünf Stücke, die man bedienen kann ────── Phil, 09.10.2026 abends: „Die Startseite sollte erstmal zeigen, was wir für eine geile Firma sind." Vorher stand hier eine Reihe aus sechs gleich großen Bildschirmfoto-Karten („So sieht ein Exposé aus"). Die ist weg: Ein Foto von einer Bedienung beweist weniger als die Bedienung selbst, und sechs gleiche Karten sind genau das gleichförmige Raster, das Phil ablehnt. Der Unterschied liegt im Feld, nicht in den Stücken: Jedes Stück hat seinen eigenen Platz im Raster, eines ist hoch, zwei breit, eines schmal. Kein Stück hat die Maße eines anderen. Der Grund läuft flach von Hellblau (Ende des Auftakts) zu Weiß, damit kein harter Rand zwischen zwei gleichen Flächen entsteht und der weiße Block darunter sauber anschließt. */ .steckt { position: relative; padding-block: var(--abschnitt); background: linear-gradient(180deg, var(--band-hell) 0%, #fafcfe 46%, var(--weiss) 100%); } .steckt__muster { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linie); } .stuecke { margin-top: clamp(34px, 4.2vw, 76px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(26px, 3vw, 58px) clamp(20px, 2.4vw, 48px); grid-template-areas: "raum raum raum raum raum raum raum schi schi schi schi schi" "bild bild bild bild bild bild bild bild bild bild bild bild" "lage lage lage lage lage lage lage pdf pdf pdf pdf pdf "; } .stueck--raum { grid-area: raum; } .stueck--schieber { grid-area: schi; } .stueck--bilder { grid-area: bild; } .stueck--lage { grid-area: lage; } .stueck--pdf { grid-area: pdf; } /* Jedes Stück: oben das Stück selbst, unten eine Maßzeile mit Haarlinie. Fakten stehen nie als nackte Absätze (DESIGN.md, Abschnitt 3). */ .stueck { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: clamp(14px, 1.4vw, 22px); min-width: 0; } .stueck__wort { display: grid; align-content: start; gap: 7px; padding-top: 14px; border-top: 1px solid var(--linie); } .stueck__wort b { color: var(--tinte); font-size: 1.0625rem; font-weight: 550; letter-spacing: -.016em; } .stueck__wort > span { font-size: .9375rem; line-height: 1.5; color: var(--text); text-wrap: pretty; max-width: 34em; } /* 1 Die Wohnung: das Modell füllt seine Fläche, das Standbild liegt darunter. Quer im Verhältnis 3:2, weil die Wohnung breiter als tief ist. In einem hohen, schmalen Feld rahmt der Betrachter das Modell nach der kleineren Seite und zeigt es viel zu nah: Beim ersten Entwurf stand hier ein weißer Ausschnitt mit einem halben Bad darin (gesehen am 09.10.2026). Die 3:2 gibt zugleich die Höhe der ersten Zeile vor, an der sich der Schieber ausrichtet. */ .stueck--raum .stueck__buehne { position: relative; aspect-ratio: 3 / 2; border: 1px solid var(--linie); border-radius: 4px; overflow: hidden; background: var(--band); } .stueck--raum .standbild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s ease; } .stueck--raum model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; --poster-color: transparent; background: transparent; opacity: 0; transition: opacity .7s ease; } .stueck--raum[data-status="bereit"] model-viewer { opacity: 1; } .stueck--raum[data-status="bereit"] .standbild { opacity: 0; pointer-events: none; } .stueck__lade { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; align-items: center; gap: 10px; padding: 10px 16px; background: rgba(255, 255, 255, .94); border-radius: 3px; font-size: .875rem; color: var(--text); } .stueck[data-status="laedt"] .stueck__lade, .stueck[data-status="fehler"] .stueck__lade { display: flex; } .stueck__lade i { flex: none; width: 16px; height: 16px; border: 2px solid var(--linie); border-top-color: var(--akzent); border-radius: 50%; animation: dreh .9s linear infinite; } .stueck[data-status="fehler"] .stueck__lade i { display: none; } /* 2 Die Räume: ein Bild, zwei Zustände, die Linie dazwischen lässt sich ziehen. Dieselbe Technik wie der Dreiklang auf „Individuelles Exposé" (clip-path über --p, unsichtbarer Schieberegler über dem Bild), nur mit einem Raum. */ /* Höhe aus der Zeile, nicht aus einem Seitenverhältnis: Der Schieber steht neben der Wohnung und soll mit ihr auf einer Linie enden, damit die beiden Maßzeilen darunter nebeneinander beginnen. */ .schieber { --p: .62; position: relative; height: 100%; min-height: 300px; overflow: hidden; border-radius: 4px; border: 1px solid var(--linie); background: var(--band); user-select: none; -webkit-user-select: none; touch-action: pan-y; } .schieber > img, .schieber__neu img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .schieber__neu { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--p) * 100%) 0 0); } .schieber .marke { top: auto; bottom: 14px; } .schieber input[type="range"] { position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; } .schieber .zuglinie { top: 0; bottom: 0; } .schieber .zuglinie i { width: 48px; height: 48px; margin: -24px 0 0 -24px; } .schieber .zuglinie svg { width: 20px; height: 20px; } .schieber input[type="range"]:focus-visible + .zuglinie i { outline: 3px solid var(--tinte); outline-offset: 3px; } html:not(.js) .schieber input[type="range"], html:not(.js) .schieber .zuglinie { display: none; } /* 3 Die Bilder: eine Reihe über die ganze Rasterbreite, die Felder verschieden breit. Das ist die dritte Bauart in diesem Abschnitt (nach „quer mit Text darunter" und „Paar nebeneinander") und bricht die zwei Spalten darüber auf. Antippen öffnet das Vollbild. */ .galerie { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.25fr; gap: clamp(8px, .8vw, 14px); height: clamp(210px, 21vw, 380px); } .galerie a { position: relative; display: block; overflow: hidden; border-radius: 4px; border: 1px solid var(--linie); background: var(--band); } .galerie a img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--weich); } .galerie a:hover img { transform: scale(1.04); } /* Die Lupe sagt, dass sich das Bild öffnet; ohne sie sieht die Reihe aus wie eine Bildergalerie, die nichts tut. Auf Geräten ohne Zeiger steht sie dauerhaft, weil es dort kein „darüberfahren" gibt. */ .galerie a::after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .94) center / 15px 15px no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231058c0' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cpath d='M12.6 12.6 17 17M6 8.5h5M8.5 6v5'/%3E%3C/svg%3E"); box-shadow: 0 8px 20px -10px rgba(16, 24, 32, .5); opacity: 0; transform: scale(.8); transition: opacity .3s ease, transform .3s var(--weich); } .galerie a:hover::after, .galerie a:focus-visible::after { opacity: 1; transform: none; } @media (hover: none) { .galerie a::after { opacity: 1; transform: none; } } /* Vollbild des Bildmenüs. Hell, wie alles hier: weißer Grund, keine schwarze Fläche (Phils Regel „hell, immer"). Ohne Skript bleibt der Dialog zu, und die Bilder öffnen sich als gewöhnliche Links. */ .voll { width: min(96vw, 1500px); max-width: none; max-height: 94svh; padding: 0; border: 0; border-radius: 4px; background: var(--weiss); box-shadow: 0 50px 120px -50px rgba(16, 24, 32, .6); } .voll::backdrop { background: rgba(236, 241, 247, .9); } .voll[open] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px; padding: clamp(10px, 1.2vw, 20px); } .voll__feld { min-width: 0; display: grid; gap: 12px; justify-items: center; } .voll__feld img { max-width: 100%; max-height: min(78svh, 1000px); width: auto; border-radius: 3px; background: var(--band); } .voll__feld figcaption { max-width: 60em; font-size: .875rem; line-height: 1.5; color: var(--text); text-align: center; } .voll__pfeil, .voll__zu { display: grid; place-items: center; width: 48px; height: 48px; background: var(--weiss); border: 1px solid var(--linie); border-radius: 50%; cursor: pointer; color: var(--tinte); } .voll__pfeil:hover, .voll__zu:hover { border-color: var(--akzent); color: var(--akzent); } .voll__pfeil svg, .voll__zu svg { width: 20px; height: 20px; } .voll__zu { position: absolute; z-index: 2; right: 14px; top: 14px; } @media (max-width: 760px) { .voll[open] { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto; row-gap: 10px; } .voll__feld { grid-column: 1 / -1; grid-row: 1; } .voll__pfeil--zurueck { grid-column: 1; grid-row: 2; justify-self: start; } .voll__pfeil--vor { grid-column: 3; grid-row: 2; justify-self: end; } } /* 4 Die Lage: runde Karte mit Ringen, darunter die Liste. Dieselben Nummern auf Karte und in der Liste; den Zusammenhang stellt seite.js her. */ /* Karte links, die vierzehn Orte rechts in zwei Spalten: dieselbe Anordnung wie im Exposé, nur kleiner. Die Liste wird NICHT gekürzt, weil die Nummern auf der Karte sonst ins Leere zeigen (Skill designgeschmack, „Lage"). */ .stueck--lage .stueck__lagefeld { display: grid; grid-template-columns: clamp(250px, 40%, 440px) minmax(0, 1fr); align-items: center; gap: clamp(18px, 2vw, 36px); } .stueck--lage .lage__karte { position: relative; grid-column: auto; justify-self: center; width: 100%; } .stueck--lage .legende { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(16px, 1.6vw, 28px); } .stueck--lage .legende li { font-size: .875rem; padding-block: 6px; } @media (max-width: 1240px) { .stueck--lage .stueck__lagefeld { grid-template-columns: minmax(0, 1fr); justify-items: center; } .stueck--lage .lage__karte { width: min(100%, 420px); } .stueck--lage .legende { width: 100%; } } /* 5 Das PDF: ein Blatt mit Schatten, leicht gekippt. Beim Berühren richtet es sich auf. Kein zweites Blatt dahinter: Wir haben nur dieses eine Deckblatt, und ein gespiegeltes Abbild wäre eine Behauptung (Skill handschrift). */ .stueck--pdf { align-content: end; } .blatt { display: block; align-self: end; perspective: 1400px; } .blatt img { width: 100%; height: auto; border-radius: 3px; background: var(--weiss); box-shadow: 0 2px 4px rgba(16, 24, 32, .08), 0 40px 80px -40px rgba(16, 24, 32, .5); transform: rotate(-1.4deg) rotateY(4deg) scale(.985); transform-origin: 50% 100%; transition: transform .8s var(--weich), box-shadow .8s var(--weich); } .blatt:hover img, .blatt:focus-visible img { transform: none; box-shadow: 0 2px 4px rgba(16, 24, 32, .08), 0 60px 110px -45px rgba(16, 24, 32, .55); } /* Auftritt: einmal, wenn das Feld ins Bild kommt, die Stücke gestaffelt. Ein Ereignis je Abschnitt, danach steht alles still (Leitfaden, Bewegung). */ html.js.bewegt .stuecke:not([data-da]) .stueck { opacity: 0; transform: translateY(28px); } html.js.bewegt .stuecke[data-da] .stueck { transition: opacity .7s ease, transform .9s var(--weich); } html.js.bewegt .stuecke[data-da] .stueck:nth-child(2) { transition-delay: .09s; } html.js.bewegt .stuecke[data-da] .stueck:nth-child(3) { transition-delay: .18s; } html.js.bewegt .stuecke[data-da] .stueck:nth-child(4) { transition-delay: .27s; } html.js.bewegt .stuecke[data-da] .stueck:nth-child(5) { transition-delay: .36s; } @media (prefers-reduced-motion: reduce) { .blatt img, .galerie a img, .galerie a::after { transition: none; } .stueck__lade i { animation: none; } } @media (max-width: 1040px) { .stuecke { grid-template-columns: minmax(0, 1fr); grid-template-areas: "raum" "schi" "bild" "lage" "pdf"; } .stueck { grid-template-rows: auto auto; } /* min-height zurücknehmen: Zusammen mit dem Seitenverhältnis rechnet der Browser daraus eine Breite von 400 px und sprengt bei 390 px die Seite. */ .schieber { height: auto; aspect-ratio: 4 / 3; min-height: 0; } .galerie { height: clamp(150px, 30vw, 240px); } .blatt img { transform: none; } } @media (max-width: 560px) { .stueck--lage .legende { grid-template-columns: minmax(0, 1fr); } /* Vier Bilder nebeneinander wären am Handy briefmarkengroß: zwei Reihen. */ .galerie { grid-template-columns: 1.4fr 1fr; grid-auto-rows: clamp(120px, 30vw, 170px); height: auto; } } /* ══════════════════════════════════════════════════════════════════════════════ Startseite seit 11.10.2026 (Phils Liste vom 10.10. abends): Auftakt nur Logo und zwei Knöpfe, alles andere kompakt; kein Bild füllt am PC einen Bildschirm. Präfix st-. ══════════════════════════════════════════════════════════════════════════════ */ .start-auftakt { position: relative; min-height: 82svh; display: grid; align-items: center; overflow: hidden; background: #f4f7fb; } .start-auftakt__bild { position: absolute; inset: 0; display: block; } .start-auftakt__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; display: block; transform: scale(1.06); animation: st-setzen 12s var(--weich) forwards; } @keyframes st-setzen { to { transform: scale(1); } } .start-auftakt__innen { position: relative; z-index: 2; padding: calc(var(--kopf) + 40px) 0 80px; } .start-auftakt__h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .start-logo { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 28px); width: min(46%, 40em); } .start-logo__rauten { width: clamp(72px, 7.2vw, 128px); height: auto; flex: none; overflow: visible; } .start-logo__raute { opacity: 0; transform: translateY(18px); animation: st-auf .8s var(--weich) forwards; animation-delay: calc(.2s + var(--i) * .22s); } .start-logo__wort { font-weight: 700; letter-spacing: -.035em; line-height: 1; color: var(--tinte); font-size: clamp(2.6rem, 6.2vw, 7rem); display: flex; } .start-logo__wort span { opacity: 0; transform: translateY(14px); animation: st-auf .9s var(--weich) forwards; animation-delay: calc(.2s + var(--i) * .22s); } .start-auftakt__knoepfe { display: flex; gap: 14px; flex-wrap: wrap; margin-top: clamp(28px, 3vw, 48px); opacity: 0; transform: translateY(14px); animation: st-auf .9s var(--weich) forwards; animation-delay: calc(.2s + var(--i) * .22s); } .start-auftakt__knoepfe .knopf { padding: 15px 26px; font-size: 1.0625rem; } @keyframes st-auf { to { opacity: 1; transform: none; } } .start-auftakt__fuss { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; padding: 0 var(--rand); color: var(--leise); text-align: right; } @media (max-width: 900px) { .start-auftakt { min-height: auto; display: block; background: #fff; } .start-auftakt__bild { position: relative; inset: auto; aspect-ratio: 4/3; } .start-auftakt__bild img { object-position: 60% 50%; animation: none; transform: none; } .start-auftakt__innen { padding: 28px 0 8px; } .start-logo { width: 100%; } .start-auftakt__fuss { position: static; text-align: left; padding: 10px var(--rand) 24px; } } @media (prefers-reduced-motion: reduce) { .start-auftakt__bild img { animation: none; transform: none; } .start-logo__raute, .start-logo__wort span, .start-auftakt__knoepfe { animation: none; opacity: 1; transform: none; } } /* Zwei Wege: zwei Spalten mit Haarlinie, kleines Bild links */ .st-wege .t-gross { margin: 12px 0 32px; } .st-wege__paar { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); border-top: 1px solid var(--linie); } .st-weg { display: grid; grid-template-columns: 200px 1fr; gap: 22px; padding-top: 24px; align-items: start; } .st-weg img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top; border: 1px solid var(--linie-fein); display: block; } .st-weg h3 { font-size: clamp(1.125rem, 1.3vw, 1.375rem); letter-spacing: -.015em; margin-bottom: 8px; } .st-weg p { font-size: .9375rem; color: var(--text); text-wrap: pretty; } .st-weg__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--akzent); text-decoration: none; font-weight: 500; } .st-weg__link svg { width: 16px; height: 16px; } /* Preis: Bild im Hintergrund, weiße Tafeln darauf */ .st-preis { position: relative; overflow: hidden; background: #e7ebf1; } .st-preis__hintergrund { position: absolute; top: 0; right: 0; bottom: 0; left: auto; width: auto; height: 100%; object-fit: cover; opacity: .9; mask-image: linear-gradient(90deg, transparent, #000 35%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); } .st-preis::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.82) 55%, rgba(255,255,255,.6) 100%); } .st-preis__innen { position: relative; } .st-preis__kopf { max-width: 52em; } .st-preis__kopf .t-gross { margin: 12px 0 14px; } .st-bausteine { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; margin-top: clamp(24px, 3vw, 44px); } .st-baustein { background: rgba(255,255,255,.94); border: 1px solid var(--linie); padding: clamp(18px, 2vw, 30px); display: grid; align-content: start; gap: 8px; } .st-baustein--grund { border-color: var(--akzent); } .st-baustein__etikett { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent); font-weight: 600; } .st-baustein h3 { color: var(--tinte); font-weight: 600; letter-spacing: -.02em; font-size: clamp(1.125rem, 1.4vw, 1.5rem); } .st-baustein__preis { color: var(--tinte); font-weight: 600; letter-spacing: -.03em; line-height: 1; font-size: clamp(1.75rem, 2.4vw, 2.5rem); } .st-baustein__preis small { display: block; margin-top: 6px; font-size: .8125rem; font-weight: 400; letter-spacing: 0; color: var(--leise); } .st-baustein__preis .st-baustein__oder { display: inline; font-size: .8125rem; margin: 0 10px 0 4px; } .st-baustein > p:last-child { font-size: .9rem; color: var(--text); text-wrap: pretty; } .st-preis__fuss { margin-top: 18px; color: var(--leise); } /* Fotos: Text links, Schieber rechts */ .st-fotos__innen { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(24px, 4vw, 64px); align-items: center; } .st-fotos .t-gross { margin: 12px 0 14px; } .st-fotos .t-klein { margin-top: 12px; color: var(--leise); } .st-paar { margin: 0; height: auto; min-height: 0; aspect-ratio: 3/2; } .st-paar__marke { position: absolute; top: 12px; z-index: 4; font-size: .8125rem; background: rgba(255,255,255,.92); border: 1px solid var(--linie); padding: 4px 10px; color: var(--tinte); pointer-events: none; } .st-paar__marke--links { left: 12px; } .st-paar__marke--rechts { right: 12px; } /* Muster: drei flache Karten */ .st-muster__kopf { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(20px, 2.6vw, 36px); } .st-muster__kopf .t-gross { margin-top: 12px; } .st-muster__reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .st-musterkarte { background: #fff; border: 1px solid var(--linie); display: grid; grid-template-rows: auto 1fr; } .st-musterkarte img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top; display: block; border-bottom: 1px solid var(--linie-fein); } .st-musterkarte__text { display: grid; gap: 4px; padding: 14px 16px 16px; align-content: start; } .st-musterkarte__text small { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--akzent); } .st-musterkarte__text b { font-weight: 600; letter-spacing: -.01em; color: var(--tinte); } .st-musterkarte__text em { font-style: normal; font-size: .8125rem; color: var(--leise); } .st-musterkarte__text .knopf { justify-self: start; margin-top: 8px; padding: 9px 16px; font-size: .9375rem; } /* Am Objekt: Text links, lockere Collage rechts */ .st-objekt__innen { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(28px, 5vw, 80px); align-items: center; } .st-objekt__wort .t-gross { margin: 12px 0 14px; } .st-objekt__wort .t-klein { margin-top: 14px; color: var(--leise); } .st-objekt__collage { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 36px; gap: 12px; } .st-objekt__collage img { width: 100%; height: 100%; object-fit: cover; display: block; border: 1px solid var(--linie-fein); box-shadow: 0 18px 40px -28px rgba(16,24,32,.35); } .st-objekt__b1 { grid-column: 1 / 9; grid-row: 1 / 8; } .st-objekt__b2 { grid-column: 9 / 13; grid-row: 2 / 9; } .st-objekt__b3 { grid-column: 2 / 7; grid-row: 8 / 14; } .st-objekt__b4 { grid-column: 7 / 11; grid-row: 9 / 15; } /* Ablauf: drei kleine Bilder in einer Zeile */ .st-ablauf .t-gross { margin-top: 12px; } .st-ablauf__reihe { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 40px); margin-top: clamp(24px, 3vw, 44px); } .st-ablauf__reihe li { display: grid; grid-template-columns: 120px 1fr; grid-template-rows: auto auto 1fr; column-gap: 16px; align-items: start; } .st-ablauf__reihe img { grid-row: 1 / 4; width: 120px; aspect-ratio: 4/5; object-fit: cover; display: block; border: 1px solid var(--linie-fein); } .st-ablauf__reihe b { font-size: .75rem; letter-spacing: .14em; color: var(--akzent); font-weight: 600; } .st-ablauf__reihe h3 { font-size: 1.125rem; letter-spacing: -.015em; margin: 2px 0 6px; } .st-ablauf__reihe p { font-size: .9rem; color: var(--text); text-wrap: pretty; } /* Kontakt: kurzes Formular */ .st-kontakt__innen { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: start; } .st-kontakt .t-gross { margin: 12px 0 14px; } .st-kontakt .t-klein { margin-top: 14px; } .st-form { display: grid; gap: 16px; background: #fff; border: 1px solid var(--linie); padding: clamp(18px, 2vw, 30px); } .st-form__wahl { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; } .st-form__wahl legend { font-size: .8125rem; color: var(--leise); margin-bottom: 6px; } .st-form__wahl label { display: flex; gap: 10px; align-items: center; font-size: .9375rem; } .st-form__feld { display: grid; gap: 6px; } .st-form__feld span { font-size: .8125rem; color: var(--leise); } .st-form__feld input, .st-form__feld textarea { font: inherit; padding: 10px 12px; border: 1px solid var(--linie); background: #fff; } .st-form__falle { position: absolute; left: -9999px; } .st-form .knopf { justify-self: start; } @media (max-width: 900px) { .st-wege__paar, .st-bausteine, .st-fotos__innen, .st-muster__kopf, .st-muster__reihe, .st-objekt__innen, .st-ablauf__reihe, .st-kontakt__innen { grid-template-columns: 1fr; } .st-weg { grid-template-columns: 1fr; } .st-objekt__collage { grid-auto-rows: 20px; } } .st-kontakt__kurz { display: grid; grid-template-columns: 1fr auto; gap: clamp(24px, 4vw, 64px); align-items: center; } @media (max-width: 900px) { .st-kontakt__kurz { grid-template-columns: 1fr; } } /* Exposé Direkt (11.10.2026): Auftakt mit Handy rechts, Ablauf in vier Stücken */ .unterkopf--direkt { align-items: center; min-height: 0; } .ed-auftakt { display: grid; grid-template-columns: 1fr auto; gap: clamp(24px, 5vw, 80px); align-items: center; } .ed-auftakt__bild { margin: 0; width: clamp(180px, 22vw, 300px); } .ed-auftakt__bild img { width: 100%; height: auto; display: block; border-radius: 22px; } .ed-auftakt__bild figcaption { margin-top: 10px; color: var(--leise); } .ed-ablauf { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.4vw, 36px); margin-top: clamp(24px, 3vw, 44px); } .ed-ablauf li { display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto auto 1fr; column-gap: 14px; align-items: start; } .ed-ablauf img { grid-row: 1 / 4; width: 96px; aspect-ratio: 4/5; object-fit: cover; display: block; border: 1px solid var(--linie-fein); } .ed-ablauf b { font-size: .75rem; letter-spacing: .14em; color: var(--akzent); font-weight: 600; } .ed-ablauf h3 { font-size: 1.0625rem; letter-spacing: -.015em; margin: 2px 0 6px; } .ed-ablauf p { font-size: .9rem; color: var(--text); text-wrap: pretty; } @media (max-width: 900px) { .ed-auftakt, .ed-ablauf { grid-template-columns: 1fr; } .ed-auftakt__bild { width: 60%; } .ed-ablauf li { grid-template-columns: 80px 1fr; } } .ueber-bild { margin: 0 0 clamp(24px, 3vw, 44px); width: min(100%, 1100px); } .ueber-bild img { width: 100%; height: auto; display: block; border: 1px solid var(--linie-fein); } .ueber-bild figcaption { margin-top: 10px; color: var(--leise); } /* Kurzblöcke auf der Startseite (Fotos, Am Objekt): kleines Bild, Text, Knopf */ .st-kurz__innen { display: grid; grid-template-columns: 360px 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; } .st-kurz--rechts .st-kurz__innen { grid-template-columns: 1fr 360px; } .st-kurz__innen img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; border: 1px solid var(--linie-fein); } .st-kurz .t-gross { margin: 12px 0 12px; } .st-kurz .knopf { margin-top: 18px; } .st-bausteine--vier { grid-template-columns: 1.15fr 1fr 1fr 1fr; } .st-muster__reihe--klein .st-musterkarte img { aspect-ratio: 16/9; } .st-muster__reihe--klein .st-musterkarte__text { padding: 10px 14px 12px; } .st-muster__reihe--klein .st-musterkarte__text .knopf { padding: 7px 14px; font-size: .875rem; } .st-modelle { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 28px; } .st-modelle figure { margin: 0; } .st-modelle img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; border: 1px solid var(--linie-fein); background: var(--band); } .st-modelle figcaption { margin-top: 10px; display: grid; gap: 2px; } .st-modelle figcaption b { font-weight: 600; } .st-modelle figcaption span { font-size: .875rem; color: var(--leise); } @media (max-width: 900px) { .st-kurz__innen, .st-kurz--rechts .st-kurz__innen, .st-bausteine--vier, .st-modelle { grid-template-columns: 1fr; } } /* Gemeinsame Teile seit 11.10.2026: das eine Anfrageformular, flacher Unterkopf, Fußmenü in zwei Spalten */ .unterkopf--flach { min-height: 0; padding-bottom: clamp(28px, 4vw, 56px); } .formular--eins .wahlfeld:first-child { margin-top: 0; } .formular--eins .feld + .formular__reihe { margin-top: 22px; } .fuss__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; align-content: start; } @media (max-width: 900px) { .fuss__nav { grid-template-columns: 1fr; } } /* Startseite 11.10.2026: Modellband und Firmenkunden-Zeile */ .st-modelle--drei { grid-template-columns: repeat(3, 1fr); } .st-firmen { position: relative; overflow: hidden; } .st-firmen__bild { position: absolute; top: 0; right: 0; bottom: 0; width: auto; height: 100%; max-width: 62%; object-fit: cover; object-position: right center; opacity: .95; mask-image: linear-gradient(90deg, transparent, #000 38%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%); } .st-firmen__innen { position: relative; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 48px; } .st-firmen__innen > div { max-width: 34em; } .st-firmen__fuss { position: absolute; right: var(--rand); bottom: 10px; } @media (max-width: 1040px) { .st-firmen__bild { display: none; } } .st-firmen__innen .t-gross { margin: 12px 0 12px; } @media (max-width: 900px) { .st-modelle--drei { grid-template-columns: 1fr; } } /* Das eine Anfrageformular, Fassung 11.10.2026 (Codex-UX-Regeln): links Einführung, rechts weißes Formular bis 640 px */ .af__innen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px); column-gap: clamp(32px, 5vw, 96px); row-gap: 32px; align-items: start; } .af__wort .t-gross { margin: 12px 0 16px; } .af__mail { margin-top: 24px; font-size: 1.0625rem; color: var(--tinte); } .af__mail a { color: var(--akzent); text-decoration-color: var(--akzent); } .af-formular.formular { grid-column: auto; max-width: 640px; width: 100%; padding: clamp(24px, 3vw, 40px); background: #fff; border: 1px solid var(--linie); border-radius: 8px; } .af__pflicht { margin: 0 0 24px; font-size: .9375rem; color: var(--leise); } .af__gruppe { margin: 0 0 24px; padding: 0; border: 0; min-width: 0; } .af__gruppe legend, .af__feld label { display: block; margin-bottom: 8px; font-size: 1rem; font-weight: 550; color: var(--tinte); letter-spacing: 0; text-transform: none; } .af__gruppe legend span, .af__feld label span { font-weight: 400; color: var(--leise); } .af__liste { display: grid; gap: 2px; } .af__liste--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; } .af__wahl { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 12px; min-height: 44px; padding: 10px 8px; border-radius: 6px; cursor: pointer; font-size: 1rem; line-height: 1.4; color: var(--tinte); } .af__wahl:hover { background: var(--band-hell); } .af__wahl input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--akzent); cursor: pointer; } .af__wahl input:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; } .af__feld { margin: 0 0 24px; } .af__hilfe { margin: -4px 0 8px; font-size: .9375rem; color: var(--leise); } .af__feld input, .af__feld textarea { display: block; width: 100%; min-height: 48px; padding: 12px 14px; font: inherit; font-size: 1rem; color: var(--tinte); background: #fff; border: 1px solid #767676; border-radius: 6px; box-shadow: none; transition: border-color .2s ease; } .af__feld textarea { min-height: 144px; resize: vertical; } .af__feld input:hover, .af__feld textarea:hover { border-color: var(--tinte); } .af__feld input:focus, .af__feld textarea:focus { outline: 2px solid var(--akzent); outline-offset: 2px; border-color: var(--akzent); box-shadow: none; } .af__feld input[aria-invalid="true"], .af__feld textarea[aria-invalid="true"] { border-color: #a3261b; box-shadow: inset 0 0 0 1px #a3261b; } .af__fuss { margin-top: 8px; } .af__knopf { width: 100%; justify-content: center; min-height: 52px; font-size: 1.0625rem; } .af__hinweis { margin-top: 12px; text-align: center; font-size: .9375rem; color: var(--tinte); } .af__datenschutz { margin-top: 16px; font-size: .8125rem; line-height: 1.5; color: var(--leise); } .af-formular .formular__meldung { margin-top: 16px; } .af-formular .formular__dank { padding: 8px 0; } @media (max-width: 1040px) { .af__innen { grid-template-columns: 1fr; } .af__liste--zwei { grid-template-columns: 1fr; } } .af__direkt { margin: 0 0 14px; font-size: .9375rem; color: var(--tinte); } .af__direkt a { color: var(--akzent); } .af__wahl--vorn { background: var(--band-hell); } .af__wahl small { display: block; font-size: .875rem; color: var(--leise); } /* Schrittnummern und Schrittzeilen gibt es nur auf der Kontaktseite (stil-kontakt.css, 14.10.2026). */ .af__nr, .af__schritt { display: none; } /* Leistungsblöcke im Anfrageformular */ .af__block { padding: 18px 18px 6px; border: 1px solid var(--linie); border-radius: 6px; background: var(--band-hell); } .af__block legend { padding: 0 6px; margin-left: -6px; } .af__frage { margin: 10px 0 6px; font-size: 1rem; font-weight: 550; color: var(--tinte); } .af__zeile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; } .af__block .af__feld { margin-bottom: 18px; } .af__feld select { display: block; width: 100%; min-height: 48px; padding: 12px 14px; font: inherit; font-size: 1rem; color: var(--tinte); background: #fff; border: 1px solid #767676; border-radius: 6px; } .af__feld select:focus { outline: 2px solid var(--akzent); outline-offset: 2px; border-color: var(--akzent); } @media (max-width: 640px) { .af__zeile { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════════════════════════════ Handy als eigene Gestaltung, 11.10.2026 (Phil, 03:49: „Das Handy-Design ist noch schlecht. Ändere nichts mehr an der PC-Variante"). Alles hier steht in Media-Queries für schmale Fenster; oberhalb von 900 px wirkt keine Zeile. Maße wie eine Produktseite am iPhone: Außenrand 16 px, Abschnitte 56 px, Text 1 rem mit 1,5, Titel höchstens 2 rem. Die Überschriften-Regeln tragen „:root body" davor, weil die Seitendateien (stil-*.css) die Größe mit zwei Klassen setzen und erst danach geladen werden. ══════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { :root { --rand: 16px; --abschnitt: 56px; } body { font-size: 1rem; line-height: 1.5; } .t-text { font-size: 1rem; line-height: 1.5; max-width: none; } .t-aussage { font-size: 1.125rem; line-height: 1.45; max-width: none; } .t-klein { font-size: .8125rem; line-height: 1.5; } :root body .t-riesig, :root body h1.t-gross { font-size: 2rem; line-height: 1.08; letter-spacing: -.032em; text-wrap: balance; } :root body .t-gross { font-size: 1.75rem; line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; } .ueberzeile { font-size: .6875rem; letter-spacing: .15em; gap: 12px; } .ueberzeile::before { width: 24px; } /* Knöpfe am Handy: volle Breite, untereinander, Daumenhöhe. */ .knopf { min-height: 50px; white-space: normal; text-align: center; } /* Schieber: der Griff groß genug für den Daumen. */ .schieber .zuglinie i, .sx-band .schieber .zuglinie i { width: 48px; height: 48px; margin: -24px 0 0 -24px; } .schieber .zuglinie svg, .sx-band .schieber .zuglinie svg { width: 20px; height: 20px; } /* Das Anfrageformular: weißes Blatt über die volle Breite, kein schief sitzender Kasten. */ .af__innen { row-gap: 28px; } /* Das weiße Blatt läuft bis an den Fuß, darunter kein hellblauer Streifen. */ .af.abschnitt { padding-bottom: 0; } .af__wort .sozial:empty { display: none; } .af-formular.formular { margin-inline: calc(-1 * var(--rand)); width: calc(100% + 2 * var(--rand)); max-width: none; padding: 24px var(--rand) 28px; border-radius: 0; border-inline: 0; } .af__block { padding: 14px 14px 2px; } .af__wahl { min-height: 48px; padding: 12px 6px; align-items: center; } .af__wahl input { margin: 0; } .af__feld input, .af__feld textarea, .af__feld select { min-height: 48px; font-size: 1rem; } .af__hinweis { text-align: left; } .af__mail { font-size: 1rem; } /* Fuß: eine Spalte, Zeilen mit Haarlinie, der Satz zur Marke als Fließtext. */ .fuss { padding: 40px 0 28px; } .fuss__innen { row-gap: 0; } .fuss__marke { margin-bottom: 24px; } .fuss__recht { border-top: 0; } .fuss__marke img { height: 28px; } .fuss__marke p a { display: inline; min-height: 0; font-size: inherit; color: var(--akzent); text-decoration: underline; } .fuss__nav, .fuss__recht { gap: 0; border-top: 1px solid var(--linie-fein); } .fuss__nav a, .fuss__recht a { min-height: 48px; border-bottom: 1px solid var(--linie-fein); font-size: 1rem; } /* Am Handy steht der Widerrufslink ohne Trennlinie und mit Abstand, damit er nicht in der Liste untergeht. */ .fuss__recht a.fuss__widerruf { margin-top: 14px; border-bottom: 0; } .fuss__unten { flex-direction: column; gap: 4px; margin-top: 20px; border-top: 0; padding-top: 0; } } @media (max-width: 900px) { h2, h3 { text-wrap: balance; } /* Wohntafel als Blatt von unten: oben bleibt ein Streifen der Seite sichtbar und abgedunkelt, der Griff zeigt, dass es ein Blatt ist. „:root" davor, weil die Regel „.auftakt--gross .wohntafel" weiter oben gleich spezifisch ist. */ :root .wohntafel { inset: max(52px, 7svh) 0 0 0; border-radius: 16px 16px 0 0; padding: 30px var(--rand) max(28px, env(safe-area-inset-bottom)); box-shadow: 0 0 0 100vmax rgba(16, 24, 32, .38), 0 -8px 30px rgba(16, 24, 32, .18); } :root .wohntafel::before { content: ""; position: absolute; left: 50%; top: 10px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--linie); } .wohntafel__titel { font-size: 1.5rem; } .wohntafel__modell { height: min(46svh, 420px); } /* Raumschieber quer statt hochkant; die Marken brechen um, statt abgeschnitten zu werden. */ .dreiklang-huelle { width: var(--raster); } .raumbild { aspect-ratio: 4 / 3; } .raumbild .marke { max-width: calc(50% - 28px); white-space: normal; font-size: .6875rem; padding: 4px 8px; bottom: 10px; } .raumbild .marke:not(.marke--rechts) { left: 10px; } .raumbild .marke--rechts { right: 10px; } .raumbild__name { left: 10px; top: 10px; } } @media (max-width: 900px) and (prefers-reduced-motion: no-preference) { :root .wohntafel:not([hidden]) { animation: blatt-hoch .38s var(--weich); } @keyframes blatt-hoch { from { transform: translateY(100%); } to { transform: none; } } } @media (max-width: 560px) { /* Knopfgruppen der Seiten: untereinander, jeder Knopf über die volle Breite. */ :is(.ed-knoepfe, .am-auftakt__knopf, .fo-knoepfe, .wb-knoepfe, .gr-knoepfe, .mu-knoepfe, .ei-auftakt__knoepfe) { display: flex; flex-direction: column; align-items: stretch; justify-self: stretch; align-self: stretch; gap: 12px; } :is(.ed-knoepfe, .am-auftakt__knopf, .fo-knoepfe, .wb-knoepfe, .gr-knoepfe, .mu-knoepfe, .ei-auftakt__knoepfe) .knopf, .ue-kontakt__knopf, .st-firmen .knopf { width: 100%; } } @media (max-width: 374px) { :root body .t-riesig, :root body h1.t-gross { font-size: 1.8125rem; } :root body .t-gross { font-size: 1.625rem; } } /* Kontaktblock der Startseite mit Werkstattszene rechts (Phil 04:23: Bild im Hintergrund schafft Vertrauen) */ .st-kontakt { position: relative; overflow: hidden; } .st-kontakt__bild { position: absolute; top: 0; right: 0; bottom: 0; left: auto; width: auto; height: 100%; max-width: 58%; object-fit: cover; object-position: center; opacity: .95; mask-image: linear-gradient(90deg, transparent, #000 40%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); } .st-kontakt__kurz { position: relative; } .st-kontakt .knopf { position: relative; } .st-kontakt__fuss { position: absolute; right: var(--rand); bottom: 10px; color: #fff; text-shadow: 0 1px 6px rgba(16,24,32,.5); } @media (max-width: 1040px) { .st-kontakt__bild, .st-kontakt__fuss { display: none; } } /* Firmenkunden: geplante Funktionen gekennzeichnet (Prüfbericht 11.10.2026) */ .nutzen__bald { display: inline-block; margin-left: 8px; padding: 2px 8px; border: 1px solid var(--linie); border-radius: 999px; font-size: .6875rem; font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--leise); vertical-align: middle; } /* Preistafel: Leiste „Obendrauf" unter den Bausteinen (Upload zu ImmoScout24, 11.10.2026). Eine Zeile mit Haarlinie statt einer fünften Karte: Etikett, Titel, Preis, Satz, Link. */ .st-obendrauf { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr) auto; align-items: baseline; column-gap: clamp(16px, 2.2vw, 40px); row-gap: 6px; margin-top: 16px; padding: clamp(16px, 1.6vw, 22px) clamp(18px, 2vw, 30px); background: rgba(255,255,255,.94); border: 1px solid var(--linie); border-left: 3px solid var(--akzent); } .st-obendrauf h3 { color: var(--tinte); font-weight: 600; letter-spacing: -.02em; font-size: clamp(1.0625rem, 1.2vw, 1.25rem); } .st-obendrauf__preis { color: var(--tinte); font-weight: 600; letter-spacing: -.03em; font-size: clamp(1.375rem, 1.8vw, 1.875rem); white-space: nowrap; } .st-obendrauf__preis small { margin-left: 6px; font-size: .8125rem; font-weight: 400; letter-spacing: 0; color: var(--leise); } .st-obendrauf__text { font-size: .9375rem; color: var(--text); text-wrap: pretty; } .st-obendrauf__link { font-size: .9375rem; font-weight: 500; color: var(--akzent); white-space: nowrap; text-underline-offset: 4px; } @media (max-width: 1100px) { .st-obendrauf { grid-template-columns: auto auto 1fr; } .st-obendrauf__text { grid-column: 1 / -1; } .st-obendrauf__link { grid-column: 1 / -1; } } @media (max-width: 560px) { .st-obendrauf { grid-template-columns: 1fr auto; } .st-obendrauf .st-baustein__etikett { grid-column: 1 / -1; } /* Seit 12.10.2026 steht der Nettopreis klein neben dem Bruttopreis; am Handy darunter. */ .st-obendrauf__preis { grid-column: 1 / -1; white-space: normal; } .st-obendrauf__preis small { display: block; margin: 4px 0 0; } } /* „bis 150 m²" nicht mitten im Wort umbrechen (Bruttopreise sind breiter, 12.10.2026). */ .st-baustein__preis .st-baustein__oder { white-space: nowrap; } /* ── Preistafel seit 12.10.2026 (Prüfbericht Verbesserung 15): Grundpreis groß links, Ergänzungen als Liste mit Haarlinien rechts. Ersetzt die Reihe aus vier gleich großen Karten (.st-bausteine). ── */ .st-tafel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: clamp(24px, 3.5vw, 64px); margin-top: clamp(28px, 3.5vw, 52px); align-items: start; } .st-tafel__grund { background: #fff; border: 1px solid var(--akzent); padding: clamp(22px, 2.6vw, 40px); display: grid; gap: 14px; } .st-tafel__grund h3 { margin: 0; font-size: clamp(1.25rem, 1.6vw, 1.75rem); font-weight: 600; color: var(--tinte); letter-spacing: -.02em; } .st-tafel__grund p { margin: 0; } .st-tafel__preis { color: var(--tinte); font-weight: 600; letter-spacing: -.035em; line-height: 1; font-size: clamp(2.75rem, 4.4vw, 4.5rem); } .st-tafel__preis small { display: block; margin-top: 10px; font-size: .875rem; font-weight: 400; letter-spacing: 0; color: var(--leise); } .st-tafel__liste { background: #fff; padding: clamp(18px, 2vw, 30px) clamp(20px, 2.4vw, 36px); } .st-tafel__liste ul { list-style: none; margin: 12px 0 0; padding: 0; } .st-tafel__zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 28px; padding: 16px 0; border-top: 1px solid var(--linie); } .st-tafel__zeile h3 { margin: 0 0 4px; font-size: 1.0625rem; font-weight: 600; color: var(--tinte); letter-spacing: -.01em; } .st-tafel__zeile p { margin: 0; font-size: .9rem; color: var(--text); text-wrap: pretty; max-width: 46em; } .st-tafel__betrag { text-align: right; white-space: nowrap; color: var(--tinte); font-weight: 600; font-size: 1.25rem; line-height: 1.3; } .st-tafel__betrag small { display: block; margin: 4px 0 0 auto; max-width: 15em; font-size: .75rem; font-weight: 400; color: var(--leise); white-space: normal; } .st-tafel__betrag .st-tafel__oder { display: inline; margin: 0 0 0 4px; font-size: .75rem; font-weight: 400; color: var(--leise); white-space: nowrap; } .st-tafel__fuss { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--linie); font-size: .875rem; color: var(--leise); } @media (max-width: 960px) { .st-tafel { grid-template-columns: 1fr; } } @media (max-width: 560px) { .st-tafel__zeile { grid-template-columns: 1fr; gap: 6px; } .st-tafel__betrag { text-align: left; } .st-tafel__betrag small { margin-left: 0; } } /* Leistungsmenü am PC: Escape schließt die Tafel auch, wenn :hover oder :focus-within sie offen hielten (seite.js setzt data-zu, bis Maus oder Fokus das Menü verlassen). Höhere Spezifität als die Regeln in stil-menue.css, das danach geladen wird (Barrierefreiheitsprüfung 13.10.2026). */ @media (min-width: 1041px) { .kopf .lm[data-zu] .lm__tafel { opacity: 0; visibility: hidden; transform: translateX(0) translateY(6px); } }