/* =========================================================================== MUSTERWOHNUNG — Abschnitt #referenzobjekte STAND 25.08.2026. Vollstaendig neu gesetzt nach der Bildvorlage Bilder/referenz-neu-A.png (1536 x 1024). Alle Masse und Farben unten sind aus dem Bildpunkt gelesen, nicht geschaetzt; in Klammern steht jeweils der Wert aus der Vorlage in ihren eigenen 1536 Pixeln. Umgerechnet ist auf eine Bezugsbreite von 1440 px, Faktor 0,9375. AUFBAU DER VORLAGE, von oben nach unten: · Kicker MUSTERWOHNUNG, gesperrt, goldbraun, mittig (Grund y 55-73) · goldene Haarlinie darunter, 64 breit (y 93) · Ueberschrift „Ein Eindruck, der bleibt." in Navy (Cap-Hoehe 47) · Unterzeile in Blaugrau · Buehne: Video im Goldrahmen (x 208-1328, y 295-835), dahinter rechts oben ein versetzter Deko-Rahmen (x ab 865, y 279 bis 655, rechts 1351), links unten die ueberlappende Karte „01 Raumgefuehl" (x 134-550, y 676-836), links und rechts je ein Pfeil (Mitte y 565) · Objektzeile MUENCHEN | ALTBAU | 3 ZIMMER, Serif, Navy (y 878-898) · Verweis „Rundgang ansehen" mit langem Pfeil, gold (y 932-955) · drei Punkte, der erste als goldene Pille (y 978-988) FARBEN — am Bildpunkt gemessen, Kontrast gegen den Grund #F9F6F1: Grund #F9F6F1 Kicker/Verweis #7F5923 5,81:1 (genau der Wert der Vorlage) Ueberschrift #102949 13,57:1 Unterzeile #3B4F6B 7,74:1 Haarlinien #A8874F Linie, nie Schrift Karte, Flaeche #FAF7F3 Der Sandton #D9B485 kommt hier nicht vor: er haelt als Schrift 1,8:1 und als Flaeche auf hellem Papier keinen Rand — so steht es im Farbblock von base.css. Gold als Schrift laeuft deshalb ueber #85632A. SCHRIFT — die Vorlage setzt Unterzeile und Kartentext in einer Grotesk. Die Seite hat die Schriftfrage anders geregelt: base.css fuehrt Cormorant Garamond auch als Bedienschrift, Jost nur fuer den Zusatz in der Wortmarke. Dieser Abschnitt folgt der Seite, nicht dem Entwurfsbild — sonst stuende hier als einziger Stelle eine fremde Schrift. Weil Cormorant die kleinere x-Hoehe hat, sind die Grade um rund ein Fuenftel angehoben, damit die optische Groesse der Vorlage erhalten bleibt. ZEICHENHAFTES IST SVG. Haarlinie, Pfeile, Abspielknopf, Deko-Rahmen, Trenner und Punkte stehen als Inline-SVG im HTML. Nichts davon ist ein Rasterbild, nichts kann unscharf werden. Der Rahmen um das Video und die Kante der Karte sind CSS-Raender — auch die sind aufloesungsunabhaengig. =========================================================================== */ .robj { /* 30.08.2026 von #F9F6F1 auf --fl-creme #F7F3F0 gezogen (zwei Einheiten im Rot-, eine im Gruen-, null im Blaukanal). Der Abschnitt traegt jetzt `fl-weiss-nach-creme` und ENDET auf genau diesem Wert; #ablauf darunter beginnt auf demselben. Zwei verschiedene Cremetoene haetten an der Naht eine Stufe stehen lassen. */ --r-grund: #F7F3F0; --r-navy: #102949; --r-blau: #3B4F6B; --r-gold-t: #7F5923; --r-gold-l: #A8874F; --r-karte: #FAF7F3; --r-linie-w: rgba(168, 135, 79, 0.62); /* Halt ohne Strich: ein enger Kontaktschatten fuer die Kante, ein weiter, sehr schwacher fuer die Hoehe. Dieselbe Sprache wie in schluss.css. */ --r-schatten: 0 1px 2px rgba(16, 41, 73, 0.10), 0 3px 8px -2px rgba(16, 41, 73, 0.11), 0 34px 66px -28px rgba(16, 41, 73, 0.30); --r-schatten-karte: 0 1px 2px rgba(16, 41, 73, 0.09), 0 20px 44px -20px rgba(16, 41, 73, 0.26); /* Breite des Videorahmens. Die Vorlage gibt 1120 von 1536 = 72,9 % der Fensterbreite — als vw gesetzt, damit das Verhaeltnis bei jeder Breite dasselbe bleibt (bei 1440 sind das genau die 1050 px der Vorlage). Nach oben gedeckelt bei 1240: darueber bliebe links und rechts kein Platz mehr fuer die beiden Pfeile — sie lagen bei 1920 auf dem Video und hielten dort gemessene 1,07:1. Mit dem Deckel bleiben 100 px Rand. */ --r-buehne-max: min(72.9vw, 1240px); position: relative; /* ===== DIE FLAECHE — 30.08.2026, dritter Anlauf ====================== Der Abschnitt traegt `fl-weiss-nach-creme` aus base.css: er beginnt auf dem WEISS seiner Nachbarin darueber (die Bankenleiste) und endet auf dem CREME seiner Nachbarin darunter (#ablauf). Ueber rund 1030 Punkte Hoehe sind das 0,0145 Einheiten je Bildpunkt — im Bereich des FAQ-Kastens (0,020) und unter der Regel von 0,03. NUR background-color, keine Kurzschreibweise: die Klasse setzt `background-image`, und referenzobjekte.css wird nach base.css geladen. Der Farbwert ist der Rueckfall und das Ende des Verlaufs. */ background-color: var(--r-grund); /* Cormorant setzt Ziffern von Haus aus als Mediaevalziffern — „01" und „3 ZIMMER" haengen dann unter die Grundlinie. Die Vorlage zeigt beide auf Versalhoehe. */ font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; padding-block: clamp(4rem, 7.5vw, 7.5rem); overflow: hidden; /* haelt Deko-Rahmen und Karte im Rahmen */ } /* DER MARMORGRUND — zwei Lagen. Wie in referenzen.css und hero-a.css liegt der Stein als EIGENE Lage unter dem Inhalt, nie als `opacity` am Abschnitt selbst; das naehme die Schrift mit. Darueber ein deckender Verlauf, der die Aederung zuruecknimmt. LAGE 1 — der Stein, gleichmaessig ueber die ganze Flaeche. Die Abdeckung steht auf 0,72. Sie lag am 25.08. zuerst bei 0,885; der Kunde hat den Marmor zweimal deutlicher gefordert, gesenkt wurde daraufhin EINMAL und absolut, um rund ein Fuenftel — nicht in zwei Schritten hintereinander. LAGE 2 — eine zweite, weiche Abdeckung NUR oben und unten, also genau dort, wo Schrift steht. In der Mitte, links und rechts neben dem Video, bleibt der Stein unangetastet und traegt den Abschnitt. So steht die Aederung kraeftig, ohne je unter einer Zeile zu liegen: unter der Schrift kommt sie effektiv nur zu einem knappen Zehntel durch. Gemessen wurde danach an der duenkelsten Ader unter jeder Zeile, nicht am Mittelton — der schwaechste Wert liegt bei 4,96:1 (Kicker, kleinster Grad). */ /* Nur noch EINE Lage. Die zweite (.robj::after) ist am 30.08.2026 in die Maske der ersten gewandert — siehe den Vermerk direkt darunter. */ .robj::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* 30.08.2026 UMGEBAUT — dieselbe Wirkung, aber ohne Farbschleier. Bis heute lag der Stein unter einem DECKENDEN Schleier in der Grundfarbe: 0,72 flaechig (::before) und oben wie unten weitere 0,70 (::after). Das ging, solange die Flaeche EINE Farbe hatte. Jetzt laeuft sie von Weiss nach Creme — ein Schleier in einer festen Farbe haette den Verlauf darunter zu 92 Prozent zugedeckt und die Flaeche wieder flach gemacht. Stattdessen liegt der Stein jetzt als reines Bild mit `opacity` darueber. Rechnerisch ist das dasselbe Ergebnis, nur dass der Verlauf durchkommt: vorher 0,72 * Creme + 0,28 * Stein jetzt 0,72 * Verlauf + 0,28 * Stein Die zweite Lage (oben und unten schwaecher, in der Mitte voll) ist aus einem Farbverlauf eine MASKE geworden. 0,28 * 0,30 = 0,084 an den Raendern — exakt die 8,4 Prozent, die vorher aus 0,70 ueber 0,72 herauskamen. Unter der Schrift steht der Stein damit unveraendert schwach. */ .robj::before { opacity: 0.28; background: url('../img/marble2.jpg') center / cover no-repeat; -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 21%, #000 31%, #000 58%, rgba(0, 0, 0, 0.30) 67%, rgba(0, 0, 0, 0.30) 100%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 21%, #000 31%, #000 58%, rgba(0, 0, 0, 0.30) 67%, rgba(0, 0, 0, 0.30) 100%); } .robj__inner { position: relative; z-index: 1; max-width: calc(var(--measure) + 2 * 5rem); margin-inline: auto; padding-inline: var(--gutter); } /* --- Kopf ----------------------------------------------------------------- */ .robj__head { text-align: center; } /* Vorlage: Versalhoehe 11 px, weit gesperrt. Cormorant, nicht Grotesk. */ /* WIRD SEIT DEM 30.08.2026 NICHT MEHR VERWENDET. Die goldene Kleinzeile ueber der Ueberschrift ist auf Kundenwunsch entfallen. Die Regel bleibt stehen, weil dieser Kopf heute dreimal umgestellt wurde — der Wortlaut ist zuletzt in die Ueberschrift gewandert. Wer sie endgueltig streichen will, muss nur diesen Block loeschen; im Markup steht sie nicht mehr. */ .robj__kicker { font-family: var(--font-ui); font-weight: 500; font-size: clamp(0.78rem, 0.92vw, 0.9rem); letter-spacing: 0.3em; text-indent: 0.3em; /* Sperrung hinter dem letzten Zeichen */ text-transform: uppercase; color: var(--r-gold-t); line-height: 1.2; } /* Haarlinie unter dem Kicker — Vorlage: 64 breit, 1 hoch, y 93. */ .robj__regel { width: clamp(44px, 4.2vw, 60px); height: 1px; /* 30.08.2026: Der Strich stand ZWISCHEN Kleinzeile und Ueberschrift und hatte nur oben einen Abstand. Die Kleinzeile ist weg; er steht jetzt UNTER der Ueberschrift und braucht beide Abstaende. Sie sind bewusst ungleich: oben etwas mehr als unten, damit Strich und Unterzeile als ein Fuss unter der Ueberschrift zusammenstehen und nicht als zwei gleich weit entfernte Einzelteile. */ margin: clamp(1.1rem, 1.9vw, 1.75rem) auto clamp(0.85rem, 1.4vw, 1.3rem); fill: none; stroke: var(--r-gold-l); stroke-width: 1; } /* Vorlage: Versalhoehe 47 px, das sind rund 68 px Schriftgrad; auf 1440 umgerechnet 64 px. */ .robj__h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 4.05vw, 3.7rem); line-height: 1.08; letter-spacing: -0.005em; color: var(--r-navy); /* Steht seit dem 30.08.2026 als ERSTES im Kopf — die goldene Kleinzeile darueber ist entfallen. Der Abstand nach oben traegt jetzt der Polster des Abschnitts, nicht mehr diese Zeile. */ margin-top: 0; text-wrap: balance; } .robj__sub { font-family: var(--font-ui); font-weight: 400; font-size: clamp(1.08rem, 1.66vw, 1.5rem); line-height: 1.45; color: var(--r-blau); /* Kein eigener Abstand mehr: den setzt der Strich darueber. Zwei Abstaende an derselben Stelle waeren genau die gleichmaessige Staffel, die der Kunde beanstandet hat. */ margin-top: 0; text-wrap: balance; } /* --- Buehne --------------------------------------------------------------- */ .robj__buehne { position: relative; display: flex; justify-content: center; /* GESTUFT, NICHT GLEICHMAESSIG — 30.08.2026. Der Kunde: „vom Sinne her schon gut, gefaellt mir noch nicht hundert Prozent." Der Befund am gerenderten Kopf: die drei Abstaende Ueberschrift -> Strich -> Unterzeile -> Buehne standen bei 1,75 / 1,3 / 3,9rem und wirkten dadurch wie eine gleichmaessige Reihe von vier Einzelteilen. Der Kopf ist aber EINE Gruppe, und die Buehne ist das naechste Element — dieser Abstand muss deutlich der groesste sein. Von 3,9 auf 5,4rem angehoben: das Verhaeltnis zum letzten Abstand innerhalb des Kopfes steigt damit von 3,0 auf 4,2. Vorlage: 63 px; die Vorlage kennt die Kleinzeile aber noch. */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 31.08.2026 — DAS VIDEO RUECKT AN DIE UEBERSCHRIFT HERAN. Kundenwunsch: naeher an die Ueberschrift („Sorgfaeltig waehlen wir fuer dich aus"). Gemeint ist der Kopf als Ganzes; die zitierte Zeile ist dessen Unterzeile (.robj__sub) und damit sein unteres Ende. Gemessen bei 1440 px, am gerenderten Abschnitt: vorher jetzt margin-top an der Buehne 86,4 41,6 px sichtbarer Abstand Unterzeile bis Videokasten 78,0 33,2 px DIE STAFFELUNG DES KOPFES BLEIBT DABEI ERHALTEN, und das war die Bedingung. Die beiden Abstaende INNERHALB des Kopfes messen bei 1440 px 12,5 px (Ueberschrift -> Strich) und 22,9 px (Strich -> Unterzeile). Der Abstand zur Buehne ist mit 33,2 px weiterhin der groesste von allen und liegt bei 1,45-mal dem letzten Abstand im Kopf. Der Kopf bleibt damit als Gruppe lesbar; er faellt nicht in eine gleichmaessige Reihe von vier Einzelteilen zurueck, was der Kunde am 30.08.2026 beanstandet hatte. Weiter herunter darf der Wert deshalb nicht: bei rund 25 px waeren die vier Abstaende gleich. WARUM DAS JETZT GEHT: bis zum 31.08.2026 hingen zwei Karten halb ueber der unteren Videokante. Die Buehne war dadurch optisch schwerer und brauchte oben mehr Luft, um nicht an den Kopf zu stossen. Ohne die Karten steht dort nur noch der ruhige Videokasten. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ margin-top: clamp(1.6rem, 2.9vw, 2.6rem); } .robj__mitte { position: relative; width: min(var(--r-buehne-max), 100%); } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ DAS VERSETZTE BLATT (.robj__deko) IST AM 31.08.2026 ERSATZLOS ENTFALLEN. Die Regel stand hier mit `right: -2%`, `top: -15px`, `width: 43.4%`, `aspect-ratio: 486/376` und `fill: rgba(168,135,79,0.12)`. Kundenwortlaut: „In der rechten oberen Ecke des Bildfensters klebt etwas, das dort nicht hingehoert." Die vollstaendige Begruendung steht im Markup an der Stelle, wo das stand. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* PASSEPARTOUT STATT STRICH — geaendert am 25.08.2026. Vorher stand hier eine goldene Haarlinie, wie sie die Vorlage zeigt. Der Kunde hat sie beanstandet: „weil es nicht gleichmaessig ist." Das war kein Gefuehl, sondern nachmessbar — ein 1-px-Rand mit Radius wird an den vier Rundungen auf zwei Geraetepixel verteilt und liest sich dort duenner und blasser als auf den Geraden. Bei jeder anderen Fensterbreite sitzt die Linie zudem auf einem anderen Bruchteil eines Bildpunkts. Die Kante entsteht jetzt aus der FLAECHE: das Video sitzt mit 8 px Luft in einem weissen Feld, das sich vom Cremegrund abhebt, dazu die beiden Schattenlagen. Eine Flaeche kann nicht ungleichmaessig dick sein — die Kante ist an jeder Stelle und bei jeder Breite dieselbe. Vorlage zum Vergleich: Rahmen 208-1328, Video 215-1321, also 7 px Luft. */ .robj__rahmen { position: relative; z-index: 1; margin: 0; padding: 8px; border: 0; border-radius: 18px; background: #FFFFFF; box-shadow: var(--r-schatten); } .robj__medium { position: relative; overflow: hidden; border-radius: 10px; background: #E8E6E2; /* Seitenverhaeltnis der Vorlage: 1106 : 524 */ aspect-ratio: 1106 / 524; } /* Das Video ist 1920 x 1080 (16:9) und fuellt die flachere Flaeche der Vorlage ueber cover. Die Datei bleibt unangetastet. */ .robj__film { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; border-radius: inherit; } /* --- Abspielknopf --------------------------------------------------------- */ /* Vorlage: Navy-Scheibe d 78 mit weissem Dreieck, dahinter ein goldener Ring d 114, nach links oben versetzt. Beides in einem SVG, damit der Versatz bleibt, wie er ist. */ /* MITTIG, AUF DEN BILDPUNKT — 01.09.2026, Optimierungsbriefing, Abschnitt 09 (P0). Der Knopf war um 53 Prozent nach links gezogen, um den versetzten Ring der Vorlage optisch auszugleichen; Ring und Scheibe haben seit heute dieselbe Mitte (siehe Markup), also 50 Prozent. Der SVG-Kasten ist jetzt quadratisch; Breite und Hoehe des Knopfes sind damit gleich, und sein Mittelpunkt ist der des Rings. */ .robj__play { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; } .robj__play[hidden] { display: none; } .robj__playsvg { width: clamp(72px, 7.4vw, 106px); height: auto; } .robj__ring { fill: none; stroke: #A8874F; stroke-width: 1; transition: stroke 0.3s var(--ease), transform 0.4s var(--ease); transform-origin: 60px 60px; } .robj__scheibe { fill: var(--r-navy); transition: fill 0.3s var(--ease); } .robj__dreieck { fill: #FFFFFF; } /* 14,63:1 auf der Navy-Scheibe */ .robj__play:hover .robj__scheibe, .robj__play:focus-visible .robj__scheibe { fill: #0A192E; } .robj__play:hover .robj__ring { stroke: var(--r-gold-l); transform: scale(1.04); } /* =========================================================================== DIE BEIDEN KARTEN SIND AM 31.08.2026 ERSATZLOS ENTFALLEN. Kundenwunsch, woertlich: „Nur noch das Video ist zu sehen." Die Karten hingen halb ueber der unteren Videokante und waren erst am selben Tag eingebaut worden. ENTFERNT sind die Regeln .robj__karten, .robj__karten > .robj__karte, .robj__karte, .robj__karte--rechts, .robj__karte[hidden], .robj__nr, .robj__kt und .robj__kb samt der ausgeschriebenen Rechnungen zur Spiegelung (Ueberstand 6,6 %, flex-basis 36,2 %) und zum Schriftgrad der Ueberschrift. Alles steht in der Versionsgeschichte, Stand vor dem 31.08.2026. MIT IHNEN IST DIE LETZTE GOLDZEICHNUNG UM DAS VIDEO WEG. Der Kunde verlangt „ohne die Goldanimation" — keinen goldenen Rahmen, keine aufziehende Goldlinie um das Video. Nachgemessen an den BERECHNETEN Stilen des gerenderten Abschnitts (nicht nur an den Quelltexten) war das einzige goldene Zeichen an dieser Stelle die Kartenkante `1px solid rgba(168, 135, 79, 0.34)`. Sie faellt mit den Karten. Nach dem Umbau traegt kein Element dieses Abschnitts mehr eine Kante, eine Animation oder einen Verlauf in Gold um das Video: das Video sitzt in einem WEISSEN Passepartout (.robj__rahmen, 8 px, kein Rand) mit zwei Schattenlagen, und sonst steht dort nichts. Der goldene Ring am Abspielknopf (.robj__ring) bleibt — er liegt IM Video und ist die Bedienung, nicht sein Rahmen. =========================================================================== */ /* --- Pfeile links und rechts ---------------------------------------------- */ .robj__nav { position: absolute; z-index: 4; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 56px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--r-navy); } .robj__nav[hidden] { display: none; } .robj__nav--zurueck { left: 0; } .robj__nav--vor { right: 0; } .robj__chev { width: 17px; height: 31px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ease); } .robj__nav:hover .robj__chev { color: var(--r-gold-t); } .robj__nav--zurueck:hover .robj__chev { transform: translateX(-3px); } .robj__nav--vor:hover .robj__chev { transform: translateX(3px); } /* --- Objektzeile ---------------------------------------------------------- */ /* Vorlage: Serif in Versalien, 16 px bei 1536, weit gesperrt, Navy; dazwischen zwei goldene Haarlinien von 26 px Hoehe. */ .robj__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.1rem, 2.3vw, 2.1rem); margin-top: clamp(1.8rem, 3vw, 2.6rem); text-align: center; } .robj__mw { font-family: var(--font-ui); font-weight: 500; font-size: clamp(0.88rem, 1.05vw, 1rem); letter-spacing: 0.15em; text-indent: 0.15em; text-transform: uppercase; color: var(--r-navy); /* 13,57:1 */ line-height: 1.2; } .robj__trenner { flex: none; width: 1px; height: 26px; fill: none; stroke: var(--r-linie-w); stroke-width: 1; } /* DIE ZWEITE OBJEKTZEILE (.robj__meta--zwei) IST AM 31.08.2026 WIEDER ENTFALLEN — noch am selben Tag, an dem sie eingebaut wurde. Der Kunde hat die Angabe danach ganz umgestellt: „München / Altbau / 3 Zimmer — das soll auch raus. Es soll nur stehen: 3er WG Konzept." Es gibt jetzt nur noch EINE Zeile, und die traegt .robj__meta ohne Zusatz. */ /* --- Verweis -------------------------------------------------------------- */ .robj__linkzeile { text-align: center; margin-top: clamp(1.3rem, 2.2vw, 2rem); } .robj__link { display: inline-flex; align-items: center; gap: clamp(0.7rem, 1vw, 0.95rem); font-family: var(--font-display); font-weight: 400; font-size: clamp(1.05rem, 1.5vw, 1.35rem); color: var(--r-gold-t); /* 5,81:1 */ cursor: pointer; padding: 0.25rem 0.4rem; border-radius: 6px; } .robj__pfeil { width: clamp(34px, 3.2vw, 46px); height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ease); } .robj__link:hover { color: #6E501F; } .robj__link:hover .robj__pfeil { transform: translateX(5px); } /* --- Punkte --------------------------------------------------------------- */ /* Vorlage: erster Punkt eine goldene Pille 20 x 9, die beiden anderen graue Kreise d 10, Abstand 11. Das Grau ist gegenueber der Vorlage etwas vertieft, damit die beiden nicht gewaehlten Punkte auf dem hellen Grund ueberhaupt als Bedienelement zu erkennen sind (3,02:1 statt 1,71:1). */ .robj__punkte { display: flex; align-items: center; justify-content: center; gap: 11px; margin-top: clamp(1.1rem, 1.8vw, 1.6rem); } .robj__punkte[hidden] { display: none; } .robj__punkt { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 13px; } .robj__punkt svg { width: 20px; height: 10px; overflow: visible; } .robj__p-aus { fill: #9BA1A8; transition: fill 0.3s var(--ease); } .robj__p-an { fill: var(--r-gold-l); display: none; } .robj__punkt.is-an .robj__p-aus { display: none; } .robj__punkt.is-an .robj__p-an { display: block; } .robj__punkt:hover .robj__p-aus { fill: var(--r-gold-t); } .robj__punkt-txt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* =========================================================================== SCHMALERE FENSTER =========================================================================== */ /* Ab hier bleibt links und rechts vom Rahmen kein Platz mehr fuer die Pfeile. Sie ruecken in das Bild und bekommen eine cremefarbene Scheibe mit Goldkante, damit das Navy darauf 12,9:1 haelt statt auf dem Video zu verschwinden. */ @media (max-width: 900px) { .robj__nav { width: 46px; height: 46px; border-radius: 50%; background: rgba(247, 243, 240, 0.94); box-shadow: 0 1px 2px rgba(16, 41, 73, 0.12), 0 10px 24px -14px rgba(16, 41, 73, 0.5); } .robj__nav--zurueck { left: 14px; } .robj__nav--vor { right: 14px; } .robj__chev { width: 14px; height: 26px; } } /* Die Regeln zum Umbruch der beiden Karten sind am 31.08.2026 mit den Karten entfallen (.robj__karten, .robj__karte--rechts). Uebrig bleibt, was zur Buehne selbst gehoert. */ @media (max-width: 900px) { .robj__buehne { display: block; } .robj__mitte { width: 100%; } .robj__nav { top: auto; transform: none; } .robj__nav--zurueck, .robj__nav--vor { top: calc(50% - 4rem); transform: translateY(-50%); } } @media (max-width: 620px) { .robj__medium { aspect-ratio: 16 / 10; } .robj__rahmen { padding: 5px; border-radius: 13px; } .robj__medium { border-radius: 9px; } .robj__meta { gap: 0.9rem; } .robj__trenner { height: 18px; } .robj__nav { width: 40px; height: 40px; } .robj__nav--zurueck { left: 8px; } .robj__nav--vor { right: 8px; } .robj__chev { width: 12px; height: 22px; } } @media (max-width: 420px) { .robj__medium { aspect-ratio: 4 / 3; } .robj__mw { font-size: 0.82rem; letter-spacing: 0.12em; } } /* =========================================================================== WENIGER BEWEGUNG Wer „prefers-reduced-motion" gesetzt hat, bekommt keine Uebergaenge. Das Video laeuft ohnehin erst auf Klick — es startet nirgends von selbst. =========================================================================== */ @media (prefers-reduced-motion: reduce) { .robj__chev, .robj__pfeil, .robj__ring, .robj__scheibe, .robj__p-aus { transition: none; } .robj__nav:hover .robj__chev, .robj__link:hover .robj__pfeil, .robj__play:hover .robj__ring { transform: none; } } /* =========================================================================== DER KOPF SCHIEBT HINTER EINER KANTE HERVOR — 30.08.2026 Eine Geste fuer diesen Abschnitt. Ueberschrift, Haarlinie und Unterzeile stehen jeweils hinter einer waagrechten Kante und schieben sich darunter hervor — nicht einblenden, sondern hervorkommen. Drei Stufen, 110 ms auseinander, in der Reihenfolge, in der man liest. TECHNIK: ein `clip-path`, das von `inset(100% 0 0 0)` (alles oberhalb der Unterkante beschnitten) auf `inset(0)` laeuft, dazu ein kurzer Weg in `transform: translateY`. Beides ist billig; es wird nichts umgebrochen und nichts neu gemessen. `overflow: hidden` am Abschnitt haelt nichts davon ab — der Beschnitt sitzt am Element selbst. AUSLOESER ist der IntersectionObserver aus site.js (data-reveal -> data-seen, einmalig). Der siteweite Einlauf ist fuer diesen Kopf abgeschaltet, er wuerde sich mit dem Beschnitt ueberlagern. OHNE JAVASCRIPT und bei `reduce` steht der Kopf sofort vollstaendig. =========================================================================== */ .robj__head[data-reveal] { opacity: 1; transform: none; transition: none; } .is-ready .robj__head[data-reveal] > * { clip-path: inset(105% 0 0 0); transform: translateY(0.35em); } /* 900 ms und 110/220 ms Staffel -> 500 ms und 60/120 ms — Optimierungs- briefing 01.09.2026, P0. Die Geste bleibt, der Kopf steht nach 620 ms. */ .is-ready .robj__head[data-seen='true'] > * { animation: robj-kante 500ms var(--ease-soft) both; } .is-ready .robj__head[data-seen='true'] .robj__regel { animation-delay: 60ms; } .is-ready .robj__head[data-seen='true'] .robj__sub { animation-delay: 120ms; } @keyframes robj-kante { from { clip-path: inset(105% 0 0 0); transform: translateY(0.35em); } to { clip-path: inset(0 0 -35% 0); transform: none; } } @media (prefers-reduced-motion: reduce) { .is-ready .robj__head[data-reveal] > *, .is-ready .robj__head[data-seen='true'] > * { clip-path: none; transform: none; animation: none; } }