(.format-detail) selbst, dadurch füllte ein --alt-Hintergrund (Greige) auf breiten Bildschirmen nur die mittleren var(--container-max)/1440px, links/rechts blieb die reine Seitenfläche (Cream) sichtbar: "heller Rand außen, beige Box in der Mitte" statt einer echten, randlosen Section-Fläche. Jetzt wie bei .bio-section/.portrait-split: die

selbst ist nur noch für Hintergrund/Padding zuständig (randlos, volle Breite), Grid + max-width wandern in einen neuen inneren Wrapper (.format-detail__inner, siehe HTML in formate.html/formate/*.html). */ .format-detail { position: relative; isolation: isolate; /* eigener Stapelkontext, damit .ambient-gold (z-index:-1) zuverlaessig hinter dem Text bleibt */ padding-block: var(--space-section-y); padding-inline: var(--space-section-x); /* --surface (28.09.2026), siehe Kommentar bei .btn--primary. */ --surface: var(--surface-a); } .format-detail__inner { position: relative; /* Bezugsrahmen für .ambient-gold-formatdetail-*, die jetzt hier drin statt direkt in der

stecken (siehe HTML) – so bleibt der vw-Versatz relativ zur zentrierten Box, nicht zur vollen Viewportbreite. */ display: grid; grid-template-columns: minmax(0, 440px) 1fr; align-items: center; gap: clamp(3rem, 6vw, 6rem); max-width: var(--container-max); margin-inline: auto; } /* QUALITY-VARIANTE (19.09.2026, auf Wunsch: "die drei Formate auf der Unterseite ordentlich an der Höhe kürzen, Desktop-Ansicht, durch schlaueres Platzieren, Leerfläche an den Rändern weglassen"): var(--space-section-y) (bis zu 11rem/176px oben UND unten) ist der sitweite Standard-Sectionabstand, hier auf Desktop spürbar kleiner – diese drei Sections stehen ohnehin schon dicht mit Trennlinien/Farb- wechsel hintereinander, brauchen also nicht denselben großen Puffer wie freistehende Sections. Nur ≥901px, Handy bleibt beim Standard- Abstand (dort ist ohnehin nur eine Spalte, weniger Leerraum-Problem). */ @media (min-width: 901px) { .format-detail { padding-block: clamp(3.5rem, 6vw, 5.5rem); } } .format-detail__media { position: relative; /* overflow: clip statt hidden – aus demselben Grund wie bei .parallax-duo: hidden würde einen eigenen Scroll-Container erzeugen und die view()-Timeline des Akzent-Bilds einfrieren. */ overflow: clip; width: 100%; /* Puffer unten, damit der Übersteher des Akzent-Bilds (statischer Versatz + beide Parallax-Animationen zusammen, siehe unten) nicht an dieser Kante abgeschnitten wird. */ padding-bottom: 7rem; } /* Eigene, dezente Bewegung für das GANZE Bild-Duo (nicht nur das kleine Bild) – läuft zusätzlich zur (stärkeren) Einzel-Animation des Akzent-Bilds weiter unten, beide addieren sich, weil das Akzent-Bild ein Kind von .format-detail__media ist. */ @media (prefers-reduced-motion: no-preference) { .format-detail__media { animation-name: parallax-drift-container; animation-timeline: view(); animation-range: cover 0% cover 100%; animation-fill-mode: both; animation-timing-function: linear; } @keyframes parallax-drift-container { from { transform: translateY(-14px); } to { transform: translateY(14px); } } } /* Innerer Rahmen schmaler als der Media-Container – reserviert damit bewusst Platz rechts, in den das Akzent-Bild hineinragen kann, ohne vom overflow:clip des Containers abgeschnitten zu werden. position:relative macht den Rahmen (nicht den ganzen Media-Container) zum Bezugsrahmen für das absolut positionierte Akzent-Bild direkt darunter – wichtig bei .format-detail--split, wo im Media-Container zusätzlich noch der Fakten-Kasten/Button (.format-detail__aside) unter dem Bild-Duo steht: bottom:-10% soll sich auf die Bildhöhe beziehen, nicht auf Bild+Kasten zusammen. */ .format-detail__frame { position: relative; width: 78%; } .format-detail__img { width: 100%; object-fit: cover; display: block; } .format-detail__main { aspect-ratio: 3 / 4; width: 100%; border-radius: 0; } /* BUGFIX (16.09.2026): stand vorher als Geschwister-Element NACH .format-detail__frame im Markup, dadurch positionierte sich bottom:-10% gegen die Höhe von .format-detail__media – bei .format-detail--split (Fakten-Kasten im selben Media-Container) war das viel zu hoch und hat das Akzent-Bild weit unter das Hauptfoto, fast auf Höhe des Kastens, verschoben. Jetzt im Markup ein Kind von .format-detail__frame (siehe formate.html) – bottom/right beziehen sich dadurch immer auf die Bildhöhe selbst, unabhängig davon, was im Media-Container sonst noch darunterstehen mag. */ .format-detail__accent { position: absolute; /* 05.10.2026, auf Wunsch: kleines Bild weiter nach unten/rechts und etwas kleiner, damit es das Hauptbild weniger verdeckt (war 55% / right -19% / bottom -10%). */ width: 48%; aspect-ratio: 3 / 4; right: -25%; bottom: -18%; border-radius: 0; /* Schatten entfernt (23.09.2026 auf Wunsch: "schwarzer komischer Rand unten, wie ein Schatten, bitte entfernen") – wirkte als dunkle Kante statt als weicher Schatten. */ } @media (prefers-reduced-motion: no-preference) { .format-detail__accent { animation-name: parallax-drift; animation-timeline: view(); animation-range: cover 0% cover 100%; animation-fill-mode: both; animation-timing-function: linear; } } .format-detail__body { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; } .format-detail__body h1, .format-detail__body h2 { font-size: var(--step-titel); } /* max-width 52ch → 62ch (19.09.2026, Höhe-kürzen-Wunsch, siehe oben): die Textspalte ist bei minmax(0,440px)+1fr auf Desktop tatsächlich deutlich breiter als 52ch erlaubte – jede Zeile brach dadurch früher um als nötig. Bei der verfügbaren Spaltenbreite ist 62ch der Punkt, ab dem ohnehin die Spalte selbst (nicht mehr ch) die Grenze setzt, mehr würde also nichts mehr bringen. */ .format-detail__text { font-size: var(--step-lead); max-width: 62ch; } /* Eigener, umrandeter Kasten statt zentriert umbrechender Fließtext (dt/dd nebeneinander lief vorher bei jeder Zeile unterschiedlich weit um und wirkte dadurch "versetzt"). Feste zweispaltige Grid-Ausrichtung sorgt dafür, dass Label und Wert bei jeder Zeile exakt untereinander stehen. Zeilen-Wrapper-Divs werden über display:contents unsichtbar fürs Grid – dt/dd rutschen dadurch direkt in die zwei Grid-Spalten, ohne eine zusätzliche Verschachtelungsebene zu erzeugen. Bewusst kein Icon-Set: die Seite hat sonst nirgendwo Piktogramme, eine dünne goldene Linie als Rahmen + die Mono-Eyebrow-Optik der Labels passen besser zur bestehenden Formsprache. Text-align:left als bewusste Ausnahme vom sonst zentrierten Seitentext – bei einer Werte-Tabelle liest sich Linksbündig klarer, gleiche Begründung wie beim Kontaktformular und der Workshop-Terminliste. */ .format-detail__facts { display: grid; grid-template-columns: auto 1fr; column-gap: 1.5rem; /* War 0.65rem – etwas mehr Luft, passend zur größeren Schrift (13.09.2026 auf Wunsch). */ row-gap: 0.85rem; /* dt (klein, Mono-Uppercase) und dd (normale, größere Fließtextgröße) standen ohne das hier sichtbar nicht auf gleicher Höhe zueinander – dt hing am oberen Rand seiner Zeile, dd war durch die größere Schrift/Zeilenhöhe optisch tiefer. align-items:center zentriert beide innerhalb ihrer gemeinsamen Grid-Zeile (13.09.2026 auf Wunsch, betrifft alle drei Formate-Info-Kästen). */ align-items: center; width: 100%; /* War 28rem – etwas breiter, damit die längeren dd-Zeilen (z.B. "5× donnerstags (1× 90 / 4× 75 Minuten)") bei größerer Schrift nicht unnötig oft umbrechen. */ max-width: 31rem; margin-top: 0.75rem; padding: 1.35rem 1.6rem; border: 1px solid var(--gold-500); text-align: left; } .format-detail__facts div { display: contents; } .format-detail__facts dt { font-family: var(--font-mono); font-weight: 700; /* War 0.75rem, auf Wunsch (13.09.2026) größer. */ font-size: 0.875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold-700); white-space: nowrap; } .format-detail__facts dd { /* War 1rem, auf Wunsch (13.09.2026) größer – jetzt auf Höhe der normalen Fließtextgröße der Seite. */ font-size: 1.1875rem; } /* KORREKTUR (22.09.2026, auf Wunsch, am Beispiel "1:1": "die Punkte für Für/Antwort sollten enger zusammen sein"): row-gap greift hier NICHT (das wäre nur für die Grid-Basisregel relevant) – ab 700px steht .format-detail__facts bereits auf display:flex/flex-direction:column um (siehe die eigene, weiter unten stehende @media(max-width:700px)- Regel, "BUGFIX 16.09.2026"), row-gap zwischen den einzelnen dt/dd- Paaren kommt dort über deren eigenes "gap" statt row-gap – siehe Anpassung dort. dt hier zusätzlich vom systemweiten Bebas-Neue- Fake-Fett befreit (font-weight:700 auf einer Schrift ohne echten Fett-Schnitt, siehe Kommentar bei .mobile-lede weiter oben für die volle Begründung) – gleiche Lösung: echtes Gewicht (400) plus mehr Zeichenabstand statt synthetischem Fett. */ @media (max-width: 700px) { .format-detail__facts dt { font-weight: 400; letter-spacing: 0.08em; } } .format-detail__cta { margin-top: 0.5rem; } /* Modifier statt nth-of-type: auf der Seite stehen noch andere

(Platzhalter-Streifen, solange keine echten Beiträge/Bilder da sind) und echtes (sobald js/blog.js einen Beitrag mit Bild-URL aus dem Sheet lädt). width/height/object-fit greifen nur beim , sind für das

(.bio-section--story) selbst, dadurch füllte die --alt-Fläche (Greige) auf breiten Bildschirmen nur die mittleren var(--container-max)/1440px, links/rechts blieb die reine Seitenfläche (Cream) sichtbar – derselbe Bug wie bei .format-detail (siehe dort), nur hier noch nicht gefixt. Jetzt wie bei .format-detail: die

), pro Zeile ist also auf Desktop normalerweise genug Platz für eine einzige Zeile. Bewusst OHNE white-space:nowrap (anders als .motto-reveal__block): bei größerer Schrift + schmalerem Desktop-Fenster (knapp über 900px) bricht der Satz dann sauber in zwei Zeilen um, statt am Sectionrand abgeschnitten zu werden. */ max-width: none; } } /* Bewusst ohne Padding: .yoga-band muss direkt an die Divider-Linien von #ueberblick oben und .ablauf unten anschließen, ganz ohne Cream-Puffer dazwischen. .yoga-band selbst hat inzwischen (siehe dort) auch eine eigene Linie oben, seit die Section ihren eigenen Sprenkel-Hintergrund bekommen hat. */ .mein-yoga-teaser { padding: 0; } /* ---------- Mein Yoga: Bild-Band, strikt an die Section gebunden ---------- War background-attachment:fixed (Bild blieb beim Scrollen optisch an derselben Bildschirmstelle stehen) – auf Wunsch (12.09.2026) entfernt, jetzt ein ganz normales, mitscrollendes Hintergrundbild wie überall sonst auf der Seite. .yoga-band ist weiterhin ein normales In-Flow-Element mit fester Höhe (unabhängig vom Bild), die Karte hat eine feste, kleine Maximalbreite und liegt mittig darüber. */ /* Echtes Raumfoto statt Gold-Sprenkel-Textur (14.09.2026, großer Umbau, auf Wunsch: "diese goldenen Punkte... sieht oft nicht gut aus"): die bisherige "Background Lauschen statt leisten.png" war selbst nur ein abstraktes Gold-Konfetti-Bild auf Weiß (derselbe Sprenkel-Trick wie bei .contact-section, background-blend-mode:multiply ließ nur die Sprenkel die Cream-Fläche antönen) – kein tatsächliches Foto des Raums, wie das aria-label auf dem

("Heller Dachgeschossraum mit freiliegenden Holzbalken und ausgelegten Yogamatten") es eigentlich verspricht. mein-yoga-raum.jpg lag bereits unverwendet im Bilder-Ordner und zeigt exakt das: passt inhaltlich perfekt und ist ein echtes Foto statt einer Deko-Textur. Kein background-blend-mode mehr nötig (das war nur für den Sprenkel-Antönungs-Trick gedacht), dafür ein dezentes Abdunkeln direkt aufs Foto (brightness), damit die Cream-Karte oben drauf sicher genug Kontrast hat. */ /* QUALITY-VARIANTE (15.09.2026, auf Wunsch): Hintergrundbild erneut getauscht – jetzt "hintergrund lauschen statt lernen.png" (ruhiges Zen-Garten-Motiv, geharkter Sand + glatte Steine in warmen Sand-/ Steintönen, passt farblich sehr gut zur vertieften Gold-/Cream- Palette) statt des echten Raumfotos (mein-yoga-raum.jpg, bleibt unverwendet im Ordner liegen, falls später wieder gebraucht). background-size:cover sorgt dafür, dass es die ganze Section groß/ randlos ausfüllt. aria-label auf dem

in index.html entsprechend mit angepasst. */ .yoga-band { position: relative; isolation: isolate; /* eigener Stapelkontext, falls hier künftig .ambient-gold dazukommt */ height: calc(100vh - 138px); background-color: var(--cream); background-image: url("../images/hintergrund lauschen statt lernen.png"); background-size: cover; background-position: center; border-top: 1px solid var(--gold-500); } /* ::before statt ::after, damit die Abdunklung HINTER .yoga-band__card liegt (::before wird als erstes Kind eingefügt und liegt bei gleichem z-index:auto dadurch unter später im DOM stehenden Elementen wie der Karte) statt sie zu überdecken. */ .yoga-band::before { content: ""; position: absolute; inset: 0; background: rgba(43, 33, 24, 0.08); pointer-events: none; } /* Modifier nur für den "Mehr als Bewegung"-Teaser auf mein-yoga.html (13.09.2026 auf Wunsch: "das Foto im Hintergrund weg, suchen wir nochmal ein neues") – .yoga-band selbst bleibt unverändert, weil die Klasse auch auf index.html ("Lauschen statt Leisten") mit Foto verwendet wird. Bis ein neues Bild feststeht, einfach eine ruhige Flächenfarbe statt des Fotos. */ .yoga-band--no-photo { background-image: none; background-color: var(--surface-b); } @media (max-width: 1024px) { /* Nav-Zeile im Header fällt weg (Hamburger-Menü), Header wird niedriger – siehe .site-header__row--nav weiter oben. */ .yoga-band { height: calc(100vh - 80px); } } /* Kürzeres Band auf Touch-Geräten – war ursprünglich auch wegen der iOS-Unzuverlässigkeit von background-attachment:fixed gedacht, das Argument ist mit "fixed" jetzt weg, die kürzere Höhe an sich passt aber weiterhin besser zu schmalen Handy-Bildschirmen. */ @media (hover: none) and (pointer: coarse) { .yoga-band { height: 60vh; } } /* QUALITY-VARIANTE (15.09.2026, auf Wunsch: "zeig das ganze Originalbild, nichts oben/unten abschneiden, Section darf gerne höher sein"): löst bei "Lauschen statt Leisten" (index.html) die feste, viewport-abhängige Höhe komplett ab, indem ein echtes statt eines CSS-Hintergrundbilds verwendet wird (siehe index.html) – die Section wird dadurch automatisch genau so hoch, wie das Bild bei voller Breite tatsächlich ist, kein object-fit/background-size, das beschneiden könnte. Bewusst NACH den beiden Media Queries oben platziert, damit dieser Modifier auf jeder Bildschirmbreite gewinnt (gleiche Spezifität, spätere Regel zählt) – betrifft nur diese eine .yoga-band-Instanz, "Mehr als Bewegung" auf mein-yoga.html (--bewegung) und der Platzhalter (--no-photo) behalten ihre feste Höhe unverändert. */ .yoga-band--full-image { height: auto; background-image: none; } .yoga-band--full-image .yoga-band__img { display: block; width: 100%; height: auto; } .yoga-band__card { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; /* War 560px, auf Wunsch (12.09.2026) größer. */ max-width: 680px; background: var(--cream); padding: clamp(2.5rem, 4vw, 3.5rem); box-shadow: 0 12px 32px -14px rgba(43, 33, 24, 0.25); } /* Eigene Textfarbe #2B2420 statt der sonst hier üblichen Graubraun- Fließtext-Farbe (--graubraun), auf Wunsch (12.09.2026) – gilt für Fließtext und den Link in der Karte. Die Überschrift (h2) ist davon seit 13.09.2026 ausgenommen: die soll wieder die normale, goldene h2-Farbe der Website haben statt der dunklen Sonderfarbe. */ .yoga-band__card .yoga-band__text, .yoga-band__card .link-arrow { color: #2B2420; } /* Überschrift und Fließtext auf die gleiche Größe wie bei den anderen Sections (--step-titel/--step-lead, siehe z.B. .split__text) statt der kleineren Browser-Standardgröße – auf Wunsch (13.09.2026): "soll nicht einfach eine kleine Section sein". */ .yoga-band__card h2 { font-size: var(--step-titel); margin-bottom: 1rem; } .yoga-band__card .eyebrow { margin-bottom: 0.75rem; } .yoga-band__text { font-size: var(--step-lead); margin-bottom: 1.25rem; } /* Linksbündig auf Desktop statt zentriert (14.09.2026, großer Umbau "wie die Hero-Section") – passt besser zur restlichen, jetzt überwiegend linksbündigen Textsprache der Seite als eine mittig zentrierte Karte mitten im Bild. */ @media (min-width: 901px) { .yoga-band__card { text-align: left; } } @media (max-width: 700px) { .yoga-band__card { max-width: 88%; padding: 1.5rem; } } /* --plain: keine Kartenbox mehr (13.09.2026 auf Wunsch) – für "Lauschen statt Leisten" auf index.html. Text steht jetzt direkt, ohne Cream- Fläche/Schatten darunter, "blank" auf dem Hintergrundfoto. Betrifft nur diese eine Instanz, nicht die Methodik-Karte (--left) auf mein-yoga.html, die weiterhin ihre Box behält. Überschrift bekommt wieder die normale, goldene h2-Farbe/-Größe statt der dunklen Sonderfarbe, die es nur wegen der Cream-Box gab. Ein dezenter, cremefarbener Schlagschatten sorgt trotz direktem Foto-Hintergrund weiterhin für Lesbarkeit, ohne wie ein Kasten auszusehen. */ .yoga-band__card--plain { background: none; box-shadow: none; padding: 0; } .yoga-band__card--plain h2 { color: var(--gold-700); font-size: var(--step-titel); text-shadow: 0 2px 16px rgba(250, 249, 247, 0.85), 0 1px 4px rgba(250, 249, 247, 0.85); } .yoga-band__card--plain .yoga-band__text, .yoga-band__card--plain .link-arrow { text-shadow: 0 2px 16px rgba(250, 249, 247, 0.85), 0 1px 4px rgba(250, 249, 247, 0.85); } @media (max-width: 700px) { .yoga-band__card--plain { padding: 0; } } /* --left (Methodik-Intro-Karte für "Mehr als Bewegung" auf mein-yoga.html) ist seit 16.09.2026 hinfällig – die Section nutzt dort jetzt .portrait-split statt .yoga-band, siehe mein-yoga.html. .yoga-band--left bleibt als Wert ungenutzt, .yoga-band(--full-image) selbst bleibt aktiv (index.html, "Lauschen statt Leisten"). */ /* ---------- Methodik-Container (Unterseite mein-yoga.html) ---------- Die sechs Punkte aus Kathrins Methodik-Text sind auf zwei kurze Zweier-Grids verteilt statt einer langen Reihe gleich aussehender Kästen (siehe .method__card weiter unten) – dazwischen liegen zwei .portrait-split-Sections (Bild+Text) für die zwei konzeptionell dichtesten Punkte. So bricht die Seite den vorher sehr gleichförmigen Rhythmus auf, ohne dass an den Aussagen selbst etwas geändert wird. */ .method { padding-block: var(--space-section-y); padding-inline: var(--space-section-x); } .method__intro { max-width: 40rem; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 0.85rem; } .method__intro h2 { font-size: var(--step-titel); } .method__grid { max-width: 56rem; margin-inline: auto; margin-top: clamp(2.5rem, 6vw, 4rem); display: grid; grid-template-columns: repeat(2, 1fr); align-items: start; gap: clamp(1.5rem, 4vw, 2.5rem); } /* --grid-only: zweites .method-Vorkommen weiter unten auf der Seite enthält nur noch das Grid, kein .method__intro mehr darüber – der große Abstand von .method__grid wäre dort nur Leerraum am Section-Anfang. */ .method--grid-only .method__grid { margin-top: 0; } /* Bewusst keine umrandeten Kästen mehr (frühere Version, sah bei sechs gleichen Boxen in Reihe zu gleichförmig aus) – stattdessen nur eine dünne Haarlinie oben, gleiche Sprache wie .credentials/.price-list. */ .method__card { border-top: 1px solid var(--gold-500); padding-top: 1.5rem; text-align: left; display: flex; flex-direction: column; gap: 0.6rem; } .method__card h3 { font-size: var(--step-card-title); } .method__card p { font-size: 1rem; line-height: 1.65; } @media (max-width: 700px) { .method__grid { grid-template-columns: 1fr; } } /* ---------- Preisliste (formate.html) ---------- Gleiche Trennlinien-Optik wie .credentials/.workshops__item, aber mit Label+Preis nebeneinander statt gestapelt. Linksbündig als bewusste Ausnahme vom sonst zentrierten Seitentext – bei einer Preistabelle liest sich das klarer. */ .price-list { width: 100%; max-width: 34rem; margin-top: 0.5rem; text-align: left; } .price-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: 0.9rem; border-top: 1px solid var(--gold-500); } .price-list li:last-child { border-bottom: 1px solid var(--gold-500); } .price-list__label { font-size: 1.1875rem; } .price-list__label small { display: block; font-family: var(--font-mono); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold-700); margin-top: 0.25rem; } .price-list__value { font-family: var(--font-mono); font-weight: 700; font-size: 1.1875rem; color: var(--gold-700); white-space: nowrap; } /* ---------- FAQ (formate.html) ---------- Natives

statt eigenem JS-Accordion – funktioniert auch ganz ohne CSS/JS (Browser-Default), hier nur nachgestylt. Gleiche Trennlinien-Optik wie .credentials/.price-list. Linksbündig als bewusste Ausnahme vom sonst zentrierten Seitentext, aus demselben Grund wie dort: eine Frage-Antwort-Liste liest sich so klarer. */ .faq-list { width: 100%; max-width: 40rem; margin-top: 0.5rem; text-align: left; } .faq-list details { border-top: 1px solid var(--gold-500); padding-block: 1rem; } .faq-list details:last-child { border-bottom: 1px solid var(--gold-500); } .faq-list summary { cursor: pointer; font-size: 1.1875rem; font-weight: 500; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary::after { content: "+"; font-family: var(--font-mono); color: var(--gold-700); flex-shrink: 0; } .faq-list details[open] summary::after { content: "-"; } .faq-list details p { margin-top: 0.75rem; font-size: 1rem; } /* Etwas kleiner auf Handy (19.09.2026, auf Wunsch: "FAQ-Schrift etwas kleiner, generell zu große Content-Schrift kleiner"). */ @media (max-width: 700px) { .faq-list summary { font-size: 1.0625rem; } .faq-list details p { font-size: 0.9375rem; } } /* ---------- Einzelner Blog-Artikel (blog/*.html) ---------- Struktur (Fortschrittsbalken, Meta/Titel/Lead, Fließtext, Vor-/ Zurück-Nav) angelehnt an das Muster aus dem separaten "Blog Website"-Demoprojekt, aber komplett im Goldenroom-Designsystem neu gebaut (eigene Tokens/Fonts/Farben statt fremdem Google-Fonts-CDN- Stil). */ .post-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: var(--gold-500); z-index: 300; /* über Header (--z-header: 100) und Mobile-Menü (--z-mobile-menu: 200) */ } .post-article { padding-block: clamp(3rem, 7vw, 5rem) var(--space-section-y); padding-inline: var(--space-section-x); /* --surface (28.09.2026), siehe Kommentar bei .btn--primary in dieser Datei – kein eigenes background hier (zeigt Cream durch). */ --surface: var(--surface-a); } .post-article__inner { max-width: 38rem; margin-inline: auto; } .post-header { text-align: center; margin-bottom: clamp(2rem, 5vw, 3rem); display: flex; flex-direction: column; align-items: center; gap: 0.6rem; } .post-meta { display: flex; justify-content: center; gap: 0.75rem; } .post-header h1 { font-size: var(--step-titel); } .post-lead { font-size: var(--step-lead); max-width: 46ch; } /* Fließtext bewusst linksbündig statt zentriert wie der Rest der Seite – bei einem längeren Lesetext liest sich eine Spalte klarer, gleiche Begründung wie schon beim Kontaktformular/der Workshop-Terminliste. */ .post-body { text-align: left; } .post-body p { font-size: 1.1875rem; line-height: 1.75; margin-bottom: 1.5rem; } .post-body h2 { font-size: 1.5rem; margin: 2.5rem 0 1rem; } .post-nav { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 2rem; border-top: 1px solid var(--gold-500); } /* Scroll-Reveal, site-weit (Text UND Bilder). Ruhezustand (ohne .is-armed) ist immer voll sichtbar – .is-armed wird erst per JS gesetzt, bevor der IntersectionObserver beobachtet, siehe js/main.js. Ohne JS oder bei reduzierter Bewegung bleibt daher alles normal sichtbar, nie ein kaputter Halbzustand. Drei Richtungen: .fade-up (von unten, Standard für Text), .fade-left (von links), .fade-right (von rechts, meist für Bilder passend zur Bildseite). .reveal-stagger auf einem gemeinsamen Elternelement verzögert die direkten Kinder nacheinander (siehe nth-child-Regeln unten). */ .fade-up.is-armed, .fade-left.is-armed, .fade-right.is-armed { opacity: 0; transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1); } .fade-up.is-armed { transform: translateY(28px); } .fade-left.is-armed { transform: translateX(-48px); } .fade-right.is-armed { transform: translateX(48px); } .fade-up.is-armed.is-visible, .fade-left.is-armed.is-visible, .fade-right.is-armed.is-visible { opacity: 1; transform: none; } /* Bild-Container: das seitliche Reinrutschen (fade-left/fade-right) ist bewusst nur ein Desktop-Effekt. Auf Handy-Breiten wirkt das Slide bei den eher kleinen, schmalen Bildspalten unruhig/beengt – dort sollen die Bilder einfach erscheinen (nur Opacity, kein Transform), genau wie .fade-in. Text-Fade-left/right (z.B. Kontakt-Formular/Kanäle) bleibt unangetastet, das betrifft hier nur die Bild-Selektoren. */ @media (max-width: 700px) { .hero__media.fade-left.is-armed, .hero__media.fade-right.is-armed, .split__media.fade-left.is-armed, .split__media.fade-right.is-armed, .portrait-split__media.fade-left.is-armed, .portrait-split__media.fade-right.is-armed, .formate__photo.fade-left.is-armed, .formate__photo.fade-right.is-armed { transform: none; } } /* Reines Ein-/Ausblenden ohne transform – für Elemente, die transform schon fürs eigene Layout brauchen (z.B. zentrierte Karten mit translate(-50%,-50%)). Die Slide-Varianten oben würden diese Positionierung überschreiben. */ .fade-in.is-armed { opacity: 0; transition: opacity 1.2s ease; } .fade-in.is-armed.is-visible { opacity: 1; } /* Gestaffeltes Erscheinen für Gruppen (Karten-Reihen, Bildergalerien): jedes direkte Kind bekommt eine minimal spätere Verzögerung, dadurch "läuft" die Reveal-Welle statt dass alles gleichzeitig aufploppt. Auf 6 Kinder gedeckelt (danach alle gleich), reicht für die Karten-/Bilderreihen dieser Seite. */ .reveal-stagger > :nth-child(1) { transition-delay: 0s; } .reveal-stagger > :nth-child(2) { transition-delay: 0.08s; } .reveal-stagger > :nth-child(3) { transition-delay: 0.16s; } .reveal-stagger > :nth-child(4) { transition-delay: 0.24s; } .reveal-stagger > :nth-child(5) { transition-delay: 0.32s; } .reveal-stagger > :nth-child(n+6) { transition-delay: 0.4s; } @media (prefers-reduced-motion: reduce) { .fade-up.is-armed, .fade-left.is-armed, .fade-right.is-armed, .fade-in.is-armed { opacity: 1; transform: none; transition: none; } } /* ---------- Footer ---------- */ /* Redesign 11.09.2026: vorher nur eine Zeile (Copyright + Impressum/ Datenschutz). Jetzt mit Logo/Tagline, den echten Kontaktdaten (Telefon/E-Mail/Instagram, siehe .contact-section) und einer vollständigen Seiten-Nav – wichtig, seit die Kopfzeile nur noch Logo+Burger zeigt (siehe .site-header__row--nav, display:none), die Fußzeile ist dadurch die einzige Stelle, an der alle Unterseiten auf einen Blick als Linkliste stehen. --taupe-dark statt --espresso, dieselbe (hellere) dunkle Fläche wie beim Menü, damit beide dunklen Flächen der Seite zusammenpassen. */ .site-footer { position: relative; /* Ankerpunkt für .ambient-gold, siehe Dateiende */ isolation: isolate; /* eigener Stapelkontext, damit .ambient-gold (z-index:-1) zuverlaessig hinter dem Text bleibt statt hinter den Section-Hintergrund zu rutschen */ /* 05.10.2026, auf Wunsch: Footer "ungefähr so wie das Drop-Down-Menü, dieses dunklere Grau" – eigener, grauerer Ton statt des braunen --taupe-dark, auf allen Breiten. */ background: var(--footer-grau); color: var(--cream); padding: clamp(3rem, 6vw, 4.5rem) var(--space-section-x) 0; } .site-footer__inner { max-width: var(--container-max); margin-inline: auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem; text-align: left; padding-bottom: clamp(2.5rem, 5vw, 3.5rem); } .site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; } /* War ein eng zugeschnittener Kreis mit cremefarbenem Hintergrund um das komplette quadratische Logo (final header 600x600.png) herum, weil die helle "YOGA"-Schrift sonst auf dem dunklen Footer- Hintergrund kaum zu sehen war. Auf Wunsch (13.09.2026) wieder entfernt: der Kreis nahm dem eigentlichen Schriftzug zu viel Raum weg (das Logo selbst füllt im 600×600-Original nur einen schmalen Streifen in der Mitte, drumherum ist alles transparent) – dadurch wirkte "goldenroom yoga" winzig und kaum lesbar. Jetzt stattdessen footer-logo-crop.png: derselbe Schriftzug, aber eng auf seine eigene Bounding-Box zugeschnitten (577×240px statt 600×600px) – dadurch füllt er bei gleicher Höhe die Fläche viel besser aus und ist direkt auf dem dunklen Grund lesbar, ganz ohne Kreis. */ .site-footer__logo { /* 05.10.2026, auf Wunsch: Header-Logo (mit Goldschweif) statt des zugeschnittenen Schriftzugs, groß. */ width: auto; height: clamp(14rem, 24vw, 21rem); max-width: none; object-fit: contain; } /* Desktop: das Logo-PNG hat oben viel transparente Fläche – nach oben ziehen, damit zwischen Footer-Rand und sichtbarem Logo weniger Leerraum bleibt (05.10.2026). Größe unverändert. */ @media (min-width: 701px) { .site-footer__logo { /* 05.10.2026: leicht nach links unten – linker Rand des sichtbaren Logos bündig mit dem Seitenrand (das PNG hat links transparenten Rand), minimal weniger hoch gezogen als zuvor. */ margin-top: calc(-1 * clamp(1.75rem, 4vw, 3.75rem)); margin-left: calc(-1 * clamp(1rem, 2.2vw, 2.25rem)); } } /* QUALITY-VARIANTE: font-style:italic ergänzt (siehe Kommentar bei .hero__intro-kicker). */ .site-footer__tagline { font-family: var(--font-script); font-style: italic; font-size: 1.375rem; color: var(--gold-500); max-width: 18ch; } /* Eigene Klasse statt .eyebrow – .eyebrow ist seit 11.09.2026 site-weit ausgeblendet (siehe base.css), hier soll das Spalten-Label aber sichtbar bleiben. */ .site-footer__heading { font-family: var(--font-mono); font-weight: 700; /* War 0.8125rem, auf Wunsch (13.09.2026) etwas größer. */ font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-500); margin-bottom: 1rem; } .site-footer__nav ul, .site-footer__contact ul { display: flex; flex-direction: column; gap: 0.65rem; /* War 1rem, auf Wunsch (13.09.2026) etwas größer. */ font-size: 1.0625rem; } .site-footer a { transition: color 0.2s ease; } .site-footer a:hover, .site-footer a:focus-visible { color: var(--gold-500); } .site-footer__bottom { max-width: var(--container-max); margin-inline: auto; border-top: 1px solid rgba(250, 249, 247, 0.18); padding-block: 1.5rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; /* War 0.8125rem, auf Wunsch (13.09.2026) etwas größer. */ font-size: 0.875rem; color: rgba(250, 249, 247, 0.75); } @media (max-width: 700px) { /* --taupe statt --taupe-dark (19.09.2026, auf Wunsch: "Footer bei der Mobile-Ansicht nicht so dunkel, wirkt zu aggressiv, passt nicht") – siehe Token-Kommentar in tokens.css. Nur mobil, Desktop bleibt beim dunkleren --taupe-dark. */ .site-footer__inner { grid-template-columns: 1fr; text-align: center; } .site-footer__brand { align-items: center; } .site-footer__tagline { max-width: none; } } /* ---------- 404 (404.html) ---------- Riesige Hintergrund-Ziffer im Umriss-Stil, gleiche text-stroke- Technik wie .motto-reveal__block – bewusst dieselbe Formsprache statt etwas komplett Neues, damit es sich trotz eigener Seite wie ein Teil der Website anfühlt. Inhalt liegt zentriert darüber. */ .error-page { position: relative; min-height: calc(100vh - 138px); display: flex; align-items: center; justify-content: center; padding-block: clamp(4rem, 10vw, 6rem); padding-inline: var(--space-section-x); overflow: clip; /* --surface (28.09.2026), siehe Kommentar bei .btn--primary in dieser Datei – kein eigenes background hier (zeigt Cream durch). */ --surface: var(--surface-a); } @media (max-width: 1024px) { .error-page { min-height: calc(100vh - 80px); } } .error-page__digits { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; font-family: var(--font-display); /* QUALITY-VARIANTE: 400 statt 700 – Instrument Serif hat keinen Fett-Schnitt, bei dieser Größe würde synthetisiertes Fett auf der Textumriss-Technik (siehe @supports unten) ungleichmäßig wirken. */ font-weight: 400; font-size: clamp(6rem, 22vw, 17rem); line-height: 1; letter-spacing: -0.01em; color: var(--greige); z-index: 0; user-select: none; } @supports (-webkit-text-stroke: 1px black) or (text-stroke: 1px black) { .error-page__digits { color: transparent; -webkit-text-stroke: 1px var(--gold-500); text-stroke: 1px var(--gold-500); } } /* Bewusst KEIN eigener Hintergrund/Kasten mehr: die Ziffer dahinter ist ja nur ein dünner Umriss (transparent gefüllt), kein flächiges Bild – eine blickdichte Karte hätte sie in der Mitte einfach abgedeckt statt sie als Ganzes im Hintergrund zu zeigen. */ .error-page__content { position: relative; z-index: 1; max-width: 34rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .error-page__title { font-size: var(--step-titel); } .error-page__lead { font-size: var(--step-lead); max-width: 46ch; } .error-page__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 0.75rem; } /* ============================================================ Ambiente: Gold-Deko in leeren Flächen (nur Desktop) ============================================================ Rein dekorative Dateien aus images/gold*.png (Nebel, Punkte, Schlieren, Wellen). Bewusst groß und HINTER dem Text platziert statt als kleiner Eckakzent davor: jede tragende Section bekommt weiter unten `isolation: isolate` (eigener, abgeschotteter Stapelkontext), darin liegt .ambient-gold auf z-index:-1 – das lässt es zuverlässig hinter der normalen Section-Schrift/-Karten verschwinden (die ja nicht positioniert sind und daher immer über z-index:-1-Kindern liegen), aber sichtbar VOR dem Section-Hintergrund selbst. Dadurch dürfen die Bilder großzügig in Richtung Sectionmitte bzw. unter den Content hineinreichen, ohne je etwas zu verdecken – reine Hintergrund-Atmosphäre statt Vordergrund-Sticker. Nie im Header (der bleibt komplett bildfrei, eigene Ebene mit z-index:var(--z-header) sowieso immer zuoberst) und nie im Footer (auf Wunsch 13.09.2026 wieder entfernt – dort sollte bewusst kein Goldpartikel-Muster laufen). 13.09.2026 (2. Runde) auf Wunsch "mehr, unterschiedlich groß, schöner, nicht alle gerade": deutlich mehr Platzierungen als vorher, spürbar größerer Größenkorridor (das vorher kleinste Format ist jetzt spürbar größer), unregelmäßigere Rotationswinkel statt der vorher engen ±4–8°-Spanne, und ein Teil der Bilder zusätzlich horizontal gespiegelt (scaleX(-1)) – dieselben sechs Dateien wirken dadurch an verschiedenen Stellen nie wie exakte Wiederholungen. */ .ambient-gold { display: none; position: absolute; z-index: -1; pointer-events: none; user-select: none; } /* QUALITY-VARIANTE (15.09.2026): Die Freischalt-Regel, die .ambient-gold--tier1/--tier2 ab 1024px sichtbar machte, ist entfernt (auf Wunsch, sinngemäß wie schon auf der Original-Site: "diese goldenen Punkte... sieht oft nicht gut aus"). .ambient-gold bleibt dadurch überall bei seiner Basis-Regel (display:none, siehe oben) – site-weit, ohne dass jede einzelne -Stelle in den HTML-Dateien angefasst werden musste. Ursprüngliche Regel: @media (min-width: 1024px) { .ambient-gold--tier1, .ambient-gold--tier2 { display: block; } } */ /* ---- Motto-Reveal (index.html): die beiden Textzeilen hängen in entgegengesetzten Ecken (oben links / unten rechts) – die Bilder sitzen in der jeweils anderen Ecke und reichen als Glow weit in die Section hinein. */ /* ---- "Was ist der goldenroom?" (index.html, #ueberblick/.split): .ambient-gold--ueberblick (goldschlieren.png, unten rechts) wurde 13.09.2026 wieder entfernt – der harte, rechteckige Bildrand des Assets war bei der nötigen Größe deutlich sichtbar und wirkte kantig statt wie eine weiche Deko. Regel bewusst nicht gelöscht, sondern nur auskommentiert, falls später ein Asset mit weicherem Rand genutzt werden soll. */ /* .ambient-gold--ueberblick { bottom: 1rem; right: -3vw; width: clamp(300px, 22vw, 540px); opacity: 0.3; transform: rotate(-8deg); } */ /* ---- Formate-Teaser (index.html): früher eine große links neben dem Text zusätzlich zur kleineren rechts hinter der Foto-Galerie – die linke (goldpunkte.png, Punktstreuung) wurde 13.09.2026 auf Wunsch entfernt ("störender Gold-Nebel"), Regel nur auskommentiert. */ /* .ambient-gold--formate-l { top: 45%; left: -5vw; width: clamp(380px, 27vw, 680px); opacity: 0.35; transform: translateY(-50%) rotate(-11deg); } */ .ambient-gold--formate-r { bottom: -2rem; right: -4vw; width: clamp(320px, 22vw, 560px); opacity: 0.3; transform: rotate(19deg) scaleX(-1); } /* ---- Workshops-Teaser (index.html) ---- */ .ambient-gold--workshops-l { bottom: 1.5rem; left: -4vw; width: clamp(360px, 25vw, 620px); opacity: 0.32; transform: rotate(-16deg); } /* ---- Workshops-Anmeldeformular (workshops.html, .workshops--alt) ---- */ .ambient-gold--workshops-alt { top: 2rem; left: -4vw; width: clamp(340px, 24vw, 580px); opacity: 0.3; transform: rotate(9deg) scaleX(-1); } /* ---- Kundenstimmen (index.html) ---- */ .ambient-gold--testimonials-r { top: 1.5rem; right: -4vw; width: clamp(380px, 27vw, 680px); opacity: 0.35; transform: rotate(13deg); } /* ---- Ablauf: "Wie eine Stunde abläuft" (index.html) ---- */ .ambient-gold--ablauf-l { top: 2rem; left: -4vw; width: clamp(340px, 24vw, 580px); opacity: 0.3; transform: rotate(-15deg); } /* ---- Leitsatz: "Lauschen statt Leisten." (mein-yoga.html) ---- */ .ambient-gold--leitsatz { top: 50%; right: -3vw; width: clamp(320px, 22vw, 540px); opacity: 0.32; transform: translateY(-50%) rotate(10deg) scaleX(-1); } /* ---- Kontakt-Section (index.html + kontakt.html): links groß, rechts klein, damit auch dieser große Bereich auf beiden Seiten lebt. */ .ambient-gold--contact-l { top: 2rem; left: -4vw; width: clamp(400px, 28vw, 700px); opacity: 0.32; transform: rotate(-9deg); } .ambient-gold--contact-r { bottom: -1.5rem; right: -3vw; width: clamp(320px, 22vw, 560px); opacity: 0.28; transform: rotate(15deg) scaleX(-1); } /* ---- Instagram-Section (index.html) ---- */ .ambient-gold--instagram-r { top: 1.5rem; right: -4vw; width: clamp(380px, 27vw, 680px); opacity: 0.35; transform: rotate(12deg); } /* ---- Page-Intro (Unterseiten): die Section selbst ist bereits auf 46rem gedeckelt und zentriert – negative Offsets holen das Bild aus der schmalen Box heraus in die Leerfläche links/rechts daneben und darüber hinaus (z-index:-1 macht das unproblematisch, auch wenn es dabei den Content optisch unterläuft). Anker bewusst mit positivem top, damit auch bei sehr großen Bildern nichts nach oben in Richtung Header ausbricht. */ .ambient-gold--page-intro-l { top: 1rem; left: -15vw; width: clamp(360px, 25vw, 600px); opacity: 0.3; transform: rotate(-13deg); } /* Variante für ueber-mich.html (13.09.2026 auf Wunsch: "weiter nach links, ganz am Rand, sodass sie da erst beginnen") – gleiche Karte, nur deutlich weiter nach links Richtung Bildschirmkante geschoben, statt in der Mitte der Leerfläche zu schweben. Eigene Klasse statt den Wert direkt in .ambient-gold--page-intro-l zu ändern, weil die auch auf mein-yoga.html verwendet wird und dort unverändert bleiben soll. */ .ambient-gold--page-intro-l-edge { top: 1rem; left: -22vw; width: clamp(360px, 25vw, 600px); opacity: 0.3; transform: rotate(-13deg); } .ambient-gold--page-intro-r { top: 1rem; right: -15vw; width: clamp(360px, 25vw, 600px); opacity: 0.3; transform: rotate(16deg) scaleX(-1); } /* ---- Bio-Section (Unterseiten: ueber-mich, mein-yoga, formate, kontakt) ---- */ .ambient-gold--bio-r { top: 1.5rem; right: -4vw; width: clamp(360px, 25vw, 620px); opacity: 0.3; transform: rotate(-10deg); } .ambient-gold--bio-l { bottom: 1.5rem; left: -4vw; width: clamp(360px, 25vw, 620px); opacity: 0.3; transform: rotate(14deg) scaleX(-1); } /* Zweite Kopie von .ambient-gold--bio-r, direkt darunter gestapelt (nur "Selbstbestimmt praktizieren" auf mein-yoga.html, auf Wunsch 13.09.2026: "zweimal direkt untereinander"). Der top-Versatz ist bewusst in vw statt rem, damit er mit der ebenfalls vw-basierten Bildbreite mitskaliert und auf jeder Bildschirmgröße direkt an die erste Kopie anschließt statt bei kleinen/großen Breiten zu weit weg oder zu stark überlappend zu wirken. */ .ambient-gold--bio-r-stack { top: calc(1.5rem + 22vw); right: -4vw; width: clamp(360px, 25vw, 620px); opacity: 0.3; transform: rotate(-10deg); } /* ---- Portrait-Split (ueber-mich.html, mein-yoga.html): -r für die erste, normale Ausrichtung, -l für die gespiegelte (--reverse) Variante, damit das Bild jeweils auf der freien Seite neben dem Foto liegt statt darunter. */ .ambient-gold--portrait-r { top: 2rem; right: -4vw; width: clamp(360px, 25vw, 600px); opacity: 0.3; transform: rotate(11deg); } .ambient-gold--portrait-l { bottom: 2rem; left: -4vw; width: clamp(340px, 24vw, 580px); opacity: 0.3; transform: rotate(-17deg) scaleX(-1); } /* ---- Workshops-Übersicht (workshops.html) ---- */ .ambient-gold--workshops-r { top: 2rem; right: -4vw; width: clamp(360px, 25vw, 600px); opacity: 0.3; transform: rotate(-12deg); } /* ---- Format-Detail (formate.html): .format-detail ist selbst auf --container-max gedeckelt und zentriert (wie .page-intro), braucht also denselben vw-Escape-Trick, um wirklich in die Leerfläche neben der Box zu kommen. Nur bei der ersten (Kleingruppen, rechts neben dem Text war "sehr viel Freifläche") und der dritten Section (1:1, links unter dem Bild) – nicht bei allen drei, sonst wird's zu viel auf einer Seite. */ /* War oben rechts (right:-6vw, gespiegelt) – auf Wunsch (13.09.2026) auf die linke Seite gewechselt, seit der Info-Kasten/CTA-Button jetzt links stehen (siehe .format-detail--split) und dort oben etwas Freifläche über den Bildern frei wurde. */ .ambient-gold--formatdetail-1 { top: -1rem; left: -6vw; width: clamp(320px, 23vw, 560px); opacity: 0.3; transform: rotate(9deg); } .ambient-gold--formatdetail-3 { bottom: -1rem; left: -5vw; width: clamp(280px, 20vw, 480px); opacity: 0.3; transform: rotate(-11deg); } /* ---------- Sanftes Bild-Einblenden (site-weit) ---------- Gegenstück zu window.armFadeReveal in js/main.js (25.09.2026, auf Wunsch: "manche Bilder erscheinen sehr abgehakt") – .img-fade-in wird nur per JS gesetzt (nie im HTML/CSS als Ruhezustand), startet bei opacity:0 und wechselt beim load-Event des Bildes auf .is-loaded. Unabhängig vom scroll-getriggerten Fade-Up-System (das ist unter 700px Breite komplett aus, siehe js/main.js) – läuft auf jeder Bildschirmbreite. */ .img-fade-in { opacity: 0; transition: opacity 0.35s ease; } .img-fade-in.is-loaded { opacity: 1; } /* 05.10.2026, auf Wunsch: bei den kleinen Bildern (Kleingruppen = Pose A, 1:1 = Pose C) war oben zu viel abgeschnitten (Hand bzw. kaum Luft über dem Kopf). Oben bündig ausrichten und die Formate an die Motive anpassen, damit nichts Wichtiges angeschnitten wird. */ .format-detail__accent[src*="yoga_pose_a"] { aspect-ratio: 2 / 3; object-position: top; } .format-detail__accent[src*="yoga_pose_c"] { aspect-ratio: 4 / 5; object-position: top; } /* ---------- Rechtstexte (impressum.html, datenschutz.html) ---------- 05.10.2026: Impressum/Datenschutz als echte Seiten im Seitendesign statt PDF. Schmale Lesespalte, h2 gold (wie überall), h3 = kleinere Zwischenüberschrift. Bewusst ruhig und ohne Animation. */ .legal { padding: 0 var(--space-section-x) clamp(3rem, 7vw, 5rem); } .legal__inner { max-width: 46rem; margin-inline: auto; } /* Überschriften bewusst klein gehalten (05.10.2026, auf Wunsch: nicht so groß-klein), eigene Stufen statt --step-titel. */ .page-intro__title--legal { font-size: clamp(1.9rem, 3.6vw, 2.4rem); } .legal h2 { font-size: clamp(1.35rem, 2.2vw, 1.6rem); margin-top: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: 0.6rem; } .legal h2:first-child { margin-top: 0; } .legal h3 { font-size: 1.1rem; margin-top: 1.4rem; margin-bottom: 0.5rem; } .legal p, .legal li { font-size: 1rem; line-height: 1.7; overflow-wrap: anywhere; } .legal p { margin-block: 0 0.9rem; } .legal__address { font-style: normal; } .legal__list { margin: 0 0 1rem; padding-left: 1.25rem; } .legal__list li { margin-bottom: 0.4rem; } .legal__note { border-left: 2px solid var(--gold-500); padding-left: 1rem; } .legal a { color: var(--gold-700); text-decoration: underline; text-underline-offset: 0.15em; } /* ---------- Zwischenbanner, einheitlich (05.10.2026) ---------- Auf Wunsch überall gleich: .motto-static (Formate, Über mich) und .leitsatz (Mein Yoga) teilen sich Schriftart, -größe, -farbe, Zeichenabstand und Bannerhöhe. Steht bewusst am Dateiende, damit es die älteren Einzelregeln (inkl. Media Queries) überschreibt. */ .motto-static, .leitsatz { padding-block: clamp(2.5rem, 6vw, 4.5rem); } .motto-static__text, .leitsatz__text { font-family: var(--font-script); font-style: italic; font-size: clamp(1.5rem, 5.6vw, 4.6rem); letter-spacing: 0.04em; line-height: 1.2; color: var(--gold-600); text-align: center; white-space: normal; max-width: 24ch; margin-inline: auto; } .leitsatz__text { max-width: none; } /* Kurze Banner-Sätze immer einzeilig (05.10.2026) */ .motto-static__text { white-space: nowrap; max-width: none; } /* ---------- Rezension + QR-Codes (05.10.2026) ---------- */ .review-box { display: flex; align-items: center; justify-content: center; gap: 1.5rem; max-width: 34rem; margin: clamp(2.5rem, 6vw, 3.5rem) auto 0; text-align: left; } .review-box__qr { flex: none; width: 7.5rem; height: 7.5rem; } .review-box__title { font-family: var(--font-display); font-size: 1.35rem; color: var(--gold-700); margin-bottom: 0.35rem; } .review-box__text p { margin-block: 0 0.9rem; } @media (max-width: 520px) { .review-box { flex-direction: column; text-align: center; } } /* Footer: kleine QR-Kacheln auf Creme, damit sie auf dem dunklen Grund zuverlässig scanbar sind. */ .site-footer__qr { display: flex; gap: 1rem; margin-top: 1.25rem; } .site-footer__qr a { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; font-size: 0.8125rem; } .site-footer__qr img { background: var(--cream); padding: 0.35rem; width: 5.25rem; height: 5.25rem; } @media (max-width: 700px) { .site-footer__qr { justify-content: center; } } /* Handy: Zwischenbanner so groß wie möglich, aber kurze Sätze in EINER Zeile bis zum Rand (06.10.2026). Die Schriftgröße (--banner-fs) misst js/main.js so, dass "Erfahrung statt Erwartung" genau die verfügbare Breite füllt; alle Banner nutzen dieselbe Größe. Zu lange Sätze (Mein Yoga) brechen wie gewünscht in zwei Zeilen um. */ @media (max-width: 700px) { .motto-static__text, .leitsatz__text { font-size: var(--banner-fs, clamp(1.6rem, 7.5vw, 2.2rem)); line-height: 1.15; max-width: none; } .motto-static__text { white-space: nowrap; } .leitsatz__text { white-space: normal; } .motto-static, .leitsatz { padding-block: clamp(2rem, 8vw, 3rem); } } /* ---------- Kontaktformular: Honeypot, Einwilligung, Status (09.10.2026) ---------- */ .contact-section__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .contact-section__consent { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9375rem; line-height: 1.45; } .contact-section__consent input { flex: none; margin-top: 0.2rem; accent-color: var(--gold-700); } .contact-section__consent a { color: var(--gold-700); text-decoration: underline; text-underline-offset: 0.15em; } .contact-section__status { margin: 0; font-size: 0.9375rem; line-height: 1.45; text-align: center; } .contact-section__status.is-ok { color: var(--gold-700); } .contact-section__status.is-error { color: var(--rose); } .contact-section__submit:disabled { opacity: 0.6; cursor: wait; }