/* ============================================================================= VISENZA — "Naturewalk" Gemeinsames Stylesheet für alle vier Seiten: index-de.html, index-en.html, index-de-price.html, index-en-price.html Vanilla CSS, keine Frameworks, keine Build-Schritte. ABHÄNGIGKEIT: design-tokens.css wird davor geladen und liefert die Marken-Palette, die drei Schriftfamilien und --section-gap / --radius. Diese Datei erfindet keine Farbe neu — jeder Wert unten ist ein Palettenton oder eine daraus abgeleitete Helligkeit/Deckung. design-tokens.css bringt zusätzlich ein helles Grundthema mit (body, h1-h3, section, .btn). Was davon hier stört, wird in Abschnitt 2 ausdrücklich zurückgesetzt — nicht in der Token-Datei geändert. Aufbau 1. Tokens — dunkle, warme Anwendung der Palette 2. Basis — Reset, Grundtypografie, Rücknahmen aus design-tokens 3. Bausteine — Container, Buttons, Icons 4. Abschnitte — Kopf, Hero, Merkmale, Stimmung, Zitat, Vertrauen, Vorteile, FAQ, Abschluss, Preis 5. Responsive — Desktop → Tablet → Mobil (375px) 6. Bewegung — Auftakt, Einblenden, zwei Dauerbewegungen ========================================================================== */ /* ============================================================================= 1. TOKENS ========================================================================== */ :root { /* --- Herkunft der Farben ---------------------------------------------- Die Palette selbst (--kalk --sand --stein --lehm --erde --moos --fels --nacht) steht in design-tokens.css und wird davor geladen. Hier steht nur die Anwendung. Jeder Wert unten ist entweder ein Palettenton oder eine daraus abgeleitete Helligkeit bzw. Deckung — nie eine neue Farbe. v2: Der Grund war bis hierher ein warmes Fast-Schwarz (#050403). Die Kundin wollte ausdrücklich weg davon — wärmer, farbiger, lebendiger, echte fotografische Wärme statt steriler dunkler Flächen. Verfahren: Sättigung der Palette bleibt, bewegt werden Helligkeit und Farbton. Zum Farbton: nachgemessen im freigegebenen Referenzbild (mockup-naturewalk-v2-referenz.jpg) liegen dessen ruhige Flächen bei H69–77°, nicht bei H102°. Der Grund kommt deshalb von --moos (#8A8F7A, H74°), dem olivgrünen Palettenton, und nicht von --fels (H102°, dem klaren Grün). Beides sind Palettentöne. Die Helligkeit des Referenzbildes stimmt mit der hier gewählten überein (L11–19% dort, L12/L17 hier) — "wärmer" hieß Farbton, nicht Helligkeit. */ --tiefe: #222518; /* Seitengrund — tiefer Waldboden. --moos (H74°) bei S21% L12% */ --tiefe-0: rgb(34 37 24 / 0%); /* --tiefe transparent — für Verläufe. MUSS --tiefe folgen, sonst blenden alle Verläufe nach durchsichtig- Schwarz und legen einen grauen Schleier über das Grün. */ --flaeche: #2F3324; /* Karten und die Merkmal-Bande. --moos bei S17% L17%, also +5 L über dem Grund (vorher +3) — auf dem helleren Grund braucht die Fläche mehr Abstand. */ --flaeche-glas: rgb(47 51 36 / 72%); /* --flaeche mit Deckung: dieselbe Bande, wenn ein Foto durchscheint */ --scrim: 34 37 24; /* --tiefe als blanke Kanäle, für rgb(var(--scrim) / X%) in den Foto-Abschnitten */ /* Trennlinien: --stein mit Deckung. Keine Vollton-Linien, sie laufen an beiden Enden aus — siehe .reihe__zelle. Angegeben ist jeweils die Deckung im Maximum. Alle Werte sind gegenüber v1 angehoben: der Grund ist von L2% auf L12% gestiegen, bei gleicher Deckung verlieren die Linien sonst ihre Präsenz. */ --linie: rgb(214 206 194 / 30%); /* Spaltentrenner, Mitte */ --rand: rgb(214 206 194 / 20%); /* Karten-Rand */ --text: var(--kalk); /* Überschriften — 13.6:1 auf --tiefe */ --text-ruhig: rgb(242 237 232 / 86%); /* Fließtext — ≈10.4:1. Angehoben, weil Fließtext jetzt auch über Fotos und Schleiern steht. */ --text-leise: rgb(242 237 232 / 68%); /* Beschreibungen, Kleinzeilen. ≈6.3:1 auf --tiefe, ≈5.2:1 auf --flaeche; bei den alten 60% wäre der zweite Wert unter 4.5 gerutscht. */ --akzent: var(--erde); /* Kicker — 5.5:1 auf --tiefe. Nicht auf --flaeche für Kleintext verwenden, dort bleibt kaum Reserve. */ --gold: var(--lehm); /* Merkmal-Labels — 8.3:1 */ /* --fels ist der einzige Grünton der Palette und steckt jetzt im Grund. Als *Textfarbe* misst er nur 4.2:1 auf --tiefe und ist damit unter der Schwelle — er darf ausschließlich dekorativ und für Zeichnungen stehen. */ /* Die Strichzeichnungen stehen im Mockup durchweg leiser als die Labels daneben: Spitzenwert der Linien 148 (Merkmale) bzw. 167 (Listenmarke) gegen 201 beim Titel derselben Zelle — also rund 0.8 × --lehm. Die beiden Icon-Reihen des Mockups sind untereinander uneinheitlich (0.74 / 0.86); 80 % liegt zwischen beiden statt eine Reihe zu treffen und die andere zu verfehlen. */ --gold-icon: rgb(200 186 166 / 85%); /* --lehm, gedämpft: alle Icons. 85 statt 80 %, weil die Zeichen jetzt auf der olivfarbenen --flaeche stehen (6.9:1). */ /* CTA-Fläche: unverändert aus v1. Der Knopf ist das einzige am Mockup abgenommene, von der Kundin freigegebene Element — er bleibt über beide Fassungen wiedererkennbar, und alle drei Platzierungen sind identisch. Kalk auf diesem Gold ergibt 7.4:1, unabhängig vom Seitengrund. */ --gold-tief: #5C4929; /* CTA-Fläche */ --gold-tief-hell: #6E5934; /* CTA :hover */ --cta-text: var(--kalk); /* Beschriftung, aus der Palette */ /* --- Schrift ----------------------------------------------------------- Die drei Familien und ihre Schnitte kommen 1:1 aus design-tokens.css; geladen werden nur 300 und 400, deshalb kommt auf der ganzen Seite kein anderes font-weight vor (kein gerechneter Fettschnitt). */ --font-head: 'Cormorant Garamond', 'Times New Roman', serif; --font-body: 'Jost', 'Helvetica Neue', Arial, sans-serif; /* Pinyon Script steht nur noch als Marken-Referenz hier: beide Schreibschrift-Momente liegen als Bild vor, keine Regel wendet die Familie an, und keine Sprachfassung lädt sie noch. */ --font-script: 'Pinyon Script', 'Segoe Script', cursive; /* Typoskala — die vw-Anteile sind aus dem Mockup zurückgerechnet: bei 1290 px trifft jeder Wert die dort gemessene Schriftgröße. Gemessen wurde an der Ink-Breite ganzer Zeilen, nicht an einzelnen Buchstaben — der Serif des Mockups baut etwas höhere Versalien als Cormorant Garamond, die Breite ist das verlässlichere Maß. */ --fs-h1: clamp(2.75rem, 6.95vw, 5.625rem); /* 44 → 90 px */ --fs-subline: clamp(1.5rem, 2.65vw, 2.25rem); /* 24 → 34 px */ --fs-h2: clamp(2rem, 3.4vw, 2.75rem); /* 32 → 44 px */ --fs-abschluss: clamp(1.5rem, 2.85vw, 2.375rem); /* 24 → 37 px */ --fs-body: 1.125rem; /* 18 px */ --fs-hero-text: clamp(1.0625rem, 1.82vw, 1.5rem); /* 17 → 24 px — der Hero- absatz steht im Mockup deutlich größer als der übrige Fließtext */ --fs-klein: 1.1875rem; /* 19 px — Preiszeile */ --fs-mini: 1rem; /* 16 px — Kicker */ --fs-zitat: 1.03125rem; /* 16.5 px — Zitat-Karte */ /* --- Icon-Größen ------------------------------------------------------- Kantenlänge der SVG-Box. Die Strichzeichnung füllt sie zu 80–88 %; die Werte sind aus der im Mockup gemessenen Strichhöhe zurückgerechnet. Das Sprite selbst bleibt unangetastet, skaliert wird nur per CSS. */ --icon-marke: clamp(52px, 6vw, 80px); /* 77 px @1290, Ink 68 */ --icon-merkmal: clamp(46px, 5.2vw, 68px); /* 67 px @1290, Ink 54 */ --icon-vorteil: clamp(30px, 3.47vw, 46px); /* 45 px @1290, Ink 36 */ --icon-liste: 27px; /* Ink 23 */ --icon-play: clamp(64px, 8vw, 104px); /* 103 px @1290 */ --zitat-bild: 96px; /* Porträt in der Zitat-Karte */ /* --- Rhythmus ---------------------------------------------------------- */ --section-gap: 100px; /* Token aus design-tokens.css */ --raum-xl: clamp(64px, 7.4vw, var(--section-gap)); --raum-l: clamp(44px, 4.8vw, 64px); --raum-m: clamp(28px, 3vw, 40px); --rand-seite: clamp(20px, 5.75vw, 88px); /* 74 px @1290 */ --breite: 100%; /* Inhalt über die volle Breite */ --kopf-hoehe: clamp(88px, 8.4vw, 116px); /* --- Radien ------------------------------------------------------------ */ --radius: 2px; /* Token aus design-tokens.css */ --radius-karte: 18px; --radius-video: 14px; --radius-pill: 999px; } /* ============================================================================= 2. BASIS ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Auch am , nicht nur am : waehrend eines Seitenwechsels und im Ueberrollbereich malt der Browser diese Flaeche, bevor der Body steht. Ohne sie blitzt dort Weiss auf. */ background: var(--tiefe); } body { margin: 0; background: var(--tiefe); color: var(--text-ruhig); font-family: var(--font-body); font-size: var(--fs-body); font-weight: 300; line-height: 1.75; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; /* Hero-Bild darf über den rechten Rand hinauslaufen */ } img { display: block; max-width: 100%; } /* ist nur eine Klammer um WebP und JPEG und soll im Layout gar nicht vorkommen — sonst stuende im Raster der Foto-Abschnitte eine leere Inline-Box zwischen Abschnitt und Bild. */ picture { display: contents; } /* Rücknahme aus design-tokens.css: dort bekommt jedes
pauschal --section-gap oben und unten. Der Seitenrhythmus wird hier aber pro Abschnitt gesetzt (--raum-xl / --raum-l / --raum-m), und die randlosen Foto-Abschnitte dürfen überhaupt kein Polster tragen. Also einmal auf null und danach gezielt vergeben. */ section { padding: 0; } /* h3 steht mit in der Regel, weil design-tokens.css sonst jede Frage im FAQ in Versalien mit 0.2em Sperrung setzt. Größe und Schriftfamilie der Fragen kommen aus .faq__knopf, nicht von hier. */ h1, h2, h3 { margin: 0; font-family: var(--font-head); font-weight: 300; line-height: 1.14; letter-spacing: 0.005em; color: var(--text); /* Bewusst nicht in Versalien wie im hellen Token-Theme: das Mockup setzt die Headlines gemischt. */ text-transform: none; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } a { color: inherit; } /* Sichtbarer Fokus für Tastaturbedienung */ :where(a, button):focus-visible { outline: 2px solid var(--lehm); outline-offset: 4px; border-radius: var(--radius); } /* ============================================================================= 3. BAUSTEINE ========================================================================== */ .container { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand-seite); } /* Sprunglink — erst bei Tastaturfokus sichtbar */ .sprung { position: absolute; top: 0; left: 50%; z-index: 10; transform: translate(-50%, -120%); padding: 10px 20px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 0 0 var(--radius-karte) var(--radius-karte); color: var(--kalk); font-size: var(--fs-klein); text-decoration: none; transition: transform 0.2s ease; } .sprung:focus-visible { transform: translate(-50%, 0); } /* Das Icon-Set liegt als SVG-Sprite im HTML */ .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .icon { display: block; fill: none; stroke: currentcolor; stroke-linecap: round; stroke-linejoin: round; } /* --- Kicker / Eyebrow ---------------------------------------------------- */ .kicker { font-size: var(--fs-mini); font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--akzent); } /* --- CTA — genau ein Button-Stil auf der ganzen Seite --------------------- */ .cta { display: inline-flex; align-items: center; gap: 1.4em; padding: 1.15em 2.2em; border: 0; border-radius: var(--radius-pill); background: var(--gold-tief); color: var(--cta-text); font-family: var(--font-body); font-size: clamp(1rem, 1.55vw, 1.25rem); /* 20 px @1290 → Pille 335 × 66 */ font-weight: 400; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } .cta:hover { background: var(--gold-tief-hell); /* 32 statt 45 %: das braune Leuchten war auf Fast-Schwarz abgestimmt, auf dem gruenen Grund truebt es die Flaeche darunter ein. */ box-shadow: 0 10px 34px rgb(92 73 41 / 32%); transform: translateY(-1px); } .cta:active { transform: translateY(0); box-shadow: none; } .cta__pfeil { width: 1.85em; /* wächst mit der Beschriftung — Verhältnis 26 : 10 */ height: 0.72em; stroke-width: 1.2; flex: none; } /* ============================================================================= 4. ABSCHNITTE ========================================================================== */ /* --- 4.1 Kopf / Logo ----------------------------------------------------- */ .kopf { position: relative; z-index: 2; display: flex; align-items: center; height: var(--kopf-hoehe); } /* Logo links, Sprachumschalter rechts */ .kopf > .container { display: flex; align-items: center; justify-content: space-between; gap: clamp(16px, 3vw, 40px); } .marke { display: flex; align-items: center; gap: 18px; } /* Auf den Preisseiten ist das Zeichen ein Link zurueck auf die Landingpage ("cool would be to click here on the logo and come back to the main page", Feedback-Video 2:00). Auf den Landingpages bleibt es ein
. Der Link braucht keinen eigenen Namen: der sichtbare Schriftzug VISENZA steht in ihm und gibt ihn her — deshalb bleibt alt="" am Bild richtig, sonst stuende der Name doppelt. Farbe und Groesse aendern sich nicht, nur der Unterstrich muss weg; das Fokusfeld kommt aus der globalen :focus-visible-Regel. */ a.marke { color: inherit; text-decoration: none; } a.marke:hover .marke__name, a.marke:focus-visible .marke__name { color: var(--gold); } a.marke .marke__name, a.marke .marke__claim { transition: color 200ms ease; } /* Echtes Markenzeichen als Bild (weisse Logo-Variante), nicht mehr als nachgezeichnetes Icon. Breite folgt dem Seitenverhaeltnis des Bildes. */ .marke__zeichen { width: auto; height: calc(var(--icon-marke) * 1.35); flex: none; } .marke__name { font-family: var(--font-head); font-size: clamp(1.25rem, 1.7vw, 1.5rem); font-weight: 400; line-height: 1.2; letter-spacing: 0.28em; text-transform: uppercase; color: var(--kalk); } .marke__claim { margin-top: 0.35em; font-size: 0.6875rem; font-weight: 300; line-height: 1.2; letter-spacing: 0.19em; text-transform: uppercase; color: var(--text-leise); } /* Sprachumschalter — leise Pille in der Kopfzeile, rechts oben. Kein zweiter Button-Stil: nur Fläche, Rand und die Kicker-Typografie. Die aktive Sprache steht in Gold, die andere ist der Link. */ .sprachen { display: inline-flex; align-items: center; flex: none; gap: 0.8em; padding: 0.62em 1.05em; border: 1px solid var(--rand); border-radius: var(--radius-pill); background: var(--flaeche); font-family: var(--font-body); font-size: 0.8125rem; line-height: 1; pointer-events: auto; /* sitzt in der Ton-Schiene, die selbst none traegt */ } .sprachen__opt { /* Die Sperrung schiebt hinter dem letzten Buchstaben Luft nach — der negative Rand holt sie wieder herein, damit die Pille sitzt. */ margin-right: -0.16em; font-weight: 300; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-leise); text-decoration: none; transition: color 0.25s ease; } .sprachen__opt--aktiv { font-weight: 400; color: var(--gold); } a.sprachen__opt:hover { color: var(--kalk); } .sprachen__trenner { width: 1px; height: 0.95em; background: var(--linie); } /* --- 4.1a Ton-Schalter ----------------------------------------------------- Der Naturklang startet automatisch (siehe sound.js); dieser Schalter ist die einzige Bedienung dafuer. Der Sprachumschalter zog aus dem Kopf hierher um, in dieselbe fixierte Schiene: beide sassen zuvor in zwei getrennten, unabhaengig rechtsbuendigen Ebenen (Kopf im Fluss, Schiene fixiert) und landeten dadurch beide exakt an derselben rechten Kante, also aufeinander statt nebeneinander. Jetzt echte Flex-Nachbarn in EINER Ebene, per gap getrennt — das kann nicht mehr auseinanderlaufen. Der Kopf selbst traegt jetzt nur noch die Marke und bleibt im Fluss (verschwindet beim Scrollen hinter dem Hero, wie bisher); die Schiene mit Ton und Sprache bleibt laut Vorgabe immer sichtbar. pointer-events: none auf der Schiene, damit sie den Rest der Seite nicht blockiert — Knopf und Sprachpille tragen es einzeln wieder. */ .ton-schiene { position: fixed; inset: 0 0 auto 0; height: var(--kopf-hoehe); z-index: 40; pointer-events: none; } .ton-schiene > .container { height: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 0.65em; } .ton { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.5em; height: 2.5em; border: 1px solid var(--rand); border-radius: var(--radius-pill); background: var(--flaeche); color: var(--text-leise); font-size: 0.8125rem; /* dieselbe Bezugsgroesse wie .sprachen */ cursor: pointer; transition: color 0.25s ease, border-color 0.25s ease; } .ton:hover, .ton:focus-visible { color: var(--gold); border-color: var(--gold); } /* Dezenter Hinweis, solange der Naturklang noch auf die erste echte Interaktion wartet (siehe sound.js) — kein Lauttonspiel, nur ein ruhiges Pulsieren am Rand, das den Schalter ins Auge fallen laesst. */ @media (prefers-reduced-motion: no-preference) { .ton--hinweis { animation: ton-hinweis-puls 2.2s ease-in-out infinite; } } @keyframes ton-hinweis-puls { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 35%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 0%, transparent); } } .ton__zeichen { width: 1.05em; height: 1.05em; stroke-width: 1.4; } .ton__zeichen--aus { display: none; } .ton[data-stumm] .ton__zeichen--an { display: none; } .ton[data-stumm] .ton__zeichen--aus { display: block; } /* --- 4.2 Hero ------------------------------------------------------------ */ .hero { position: relative; padding-block: clamp(28px, 3.4vw, 44px) var(--raum-m); } /* Auf dem Desktop fuellt der Hero zusammen mit dem Kopf genau einen Bildschirm. Vorher endete er frueher, und vom naechsten Abschnitt lugten schon ein paar Zeilen herein — der erste Eindruck war dadurch kein Bild, sondern ein angeschnittenes Bild plus Textanfang. Abgezogen wird --kopf-hoehe, weil der Kopf im Fluss steht und seine Hoehe beansprucht; 100vh am Hero allein ergaebe Kopf + Bildschirm. min-height, nicht height: auf einem flachen Fenster darf der Block weiterwachsen, statt den Text abzuschneiden. Der Inhalt steht dann mittig in der Flaeche, die Innenabstaende bleiben als Mindestluft. Nur ab 900 px. Gestapelt (Bild ueber Text) waere ein Bildschirm zu wenig fuer beides, und auf dem Handy verschieben die Browserleisten 100vh ohnehin staendig. */ @media (min-width: 900px) { .hero { display: grid; align-content: center; min-height: calc(100vh - var(--kopf-hoehe)); } } /* Bild läuft nach oben hinter den Kopf und füllt seit v3 die volle Breite. Bis v2 stand es als 58 % breiter Block rechts, links davon der Text auf blankem Grund. Genau das hat der Kunde im Video bemängelt: erst soll nirgends mehr blanke Farbe stehen, und zweitens soll das Video "through the whole screen" laufen mit dem Text nur darauf. Beides ist dieselbe Änderung — der Block wird so breit wie der Abschnitt. pointer-events bleibt aus, damit Klicks den Text darüber erreichen; .hero__bild[data-playing] schaltet es an, sobald ein echtes Video läuft (siehe 4.9). */ .hero__bild { position: absolute; inset: calc(-1 * var(--kopf-hoehe)) 0 0 0; width: auto; z-index: 0; pointer-events: none; } /* Der Ausschnitt sitzt bewusst tief. Der Block fuellt seit v3 die volle Breite und ist immer breiter als hoch (bei 1920 x 964 px im Verhaeltnis 0,50), der Master dagegen ist mit 0,98 fast quadratisch. object-fit: cover skaliert also auf die Breite und schneidet oben und unten weg — der zweite Wert entscheidet allein, der erste hat hier gar keine Wirkung mehr (nachgemessen: 20 % bis 80 % ergeben denselben Ausschnitt). 68 % holt Weg und Person ins Band; mittig stuende dort nur die dunkle Kronenpartie. */ .hero__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 68%; } /* Der grüne Schleier links — deutlich schwächer als bis v2. Wörtlich aus dem Video: "make the green fade from the left side for the text way less". Vorher lief er von vollem --tiefe bei 0 % über 92 % auf 45 % und war erst bei 72 % ganz offen; jetzt beginnt er bei 72 % und bleibt rechts bei 8 % stehen. Die frühere erste Stufe MUSSTE Vollton sein, und der Grund dafür ist mit v3 entfallen: der Bildblock endete bei 58 % Breite, seine linke Kante war zugleich die Naht zum blanken Seitengrund, und jeder Rest Deckung darunter zeigte dort helles Laub als senkrechte Linie. Der Block füllt jetzt die ganze Breite — es gibt links keine Naht mehr, also auch keinen Grund für Vollton. Nachgemessen trägt die Überschrift damit weiterhin: das linke Drittel des Motivs liegt bei Helligkeit 1,9 bis 8, unter 72 % Schleier ergibt das rund 2,7 und für --text 8,7:1. Der untere Auslauf endet bei 84 % statt Vollton — darunter folgt seit v3 ein weiterer Foto-Abschnitt, und ein Vollton-Streifen an dieser Naht wäre wieder die blanke Farbe, die weg soll. Er setzt zugleich früher an (48 % statt 66 %) und läuft in zwei Stufen: das ist die Naht, auf die der Kunde im Video bei 0:26 zeigt und "a little bit more smooth" sagt. */ .hero__bild::after { content: ""; position: absolute; inset: 0; background: /* 2026-08-25, Lukas' Rueckmeldung: sie soll sichtbarer sein. Deckung ueberall reduziert, nicht die Farbe geaendert. Vorlaeufig, mit Jose live gegen das neue Hero-Standbild geprueft, kann noch weiter runter oder muss wieder hoch, je nachdem wie es dort aussieht. 2026-08-26, Jose: Christina wirkt auf dem neuen Standbild blass, nochmal deutlich runter. Bei 72 % Deckung trug die Ueberschrift gemessen 8,7:1 gegen die 4,5:1-Schwelle, also reichlich Reserve — selbst nach dieser zweiten Kuerzung sollte das noch tragen, aber ungeprueft, live gegenchecken. */ linear-gradient(to right, rgb(var(--scrim) / 38%) 0%, rgb(var(--scrim) / 26%) 24%, rgb(var(--scrim) / 12%) 56%, rgb(var(--scrim) / 3%) 82%, rgb(var(--scrim) / 2%) 100%), linear-gradient(to bottom, var(--tiefe-0) 26%, rgb(var(--scrim) / 11%) 54%, rgb(var(--scrim) / 37%) 74%, rgb(var(--scrim) / 65%) 90%, rgb(var(--scrim) / 69%) 100%); } .hero__inhalt { position: relative; z-index: 1; /* wächst mit der Seite mit, bleibt aber schmaler als das Foto daneben */ max-width: clamp(520px, 40vw, 720px); /* Der Textblock erzeugt einen eigenen Stapelkontext (z-index:1) und lag damit VOR dem gesamten .hero__bild, das den Play-Knopf enthält (dessen eigenes z-index:2 gilt nur innerhalb seines eigenen Kontexts, nicht gegen aussenliegende Geschwister). Am Desktop fiel das nicht auf, weil der Knopf per padding-left neben die schmale Textspalte rueckt — am Handy ist .hero__inhalt aber volle Breite (siehe 899px-Regel) und lag exakt ueber dem Knopf, klickbar war dann nur noch der Text. pointer-events: none hier + auto auf dem CTA-Link darunter loest das, ohne den Textblock optisch zu veraendern. */ pointer-events: none; } .hero__inhalt a { pointer-events: auto; } /* Die Markenzeile über der Überschrift steht auf dem Foto, nicht auf dem Seitengrund — und das verträgt --akzent nicht. --akzent ist --erde (#A89680), mit Leuchtdichte 31,7 der dunkelste Textton der ganzen Seite. Auf --tiefe trägt er seine 5,45:1. Auf dem Hero-Foto sind es nachgemessen 4,42:1, und das ist kein Fehler des Verlaufs, sondern der Preis dafür, dass das Foto seit v3 die volle Breite füllt und der grüne Schleier links auf Wunsch des Kunden von 92 % auf 72 % zurückgenommen wurde. Zwei Wege standen offen. Den Schleier wieder dichter machen hiesse, die Bitte zurueckzunehmen — ein Versuch damit landete links bei 94 % Deckung, also dichter als vorher. Also stattdessen den Nachbarton der Palette: --gold ist --lehm (#C8BAA6), auf demselben Grund 6,58:1. Er steht auf dieser Seite ohnehin schon, naemlich auf den Merkmal-Labels. Bei einer 16 px grossen Versalzeile mit weitem Buchstabenabstand ist der Unterschied ein Hauch waermeres Hell — der Verlauf bleibt dafuer so offen, wie der Kunde ihn wollte. */ .hero .kicker { color: var(--gold); } .hero h1 { margin-top: 0.34em; font-size: var(--fs-h1); /* Das Mockup setzt die Headline auf 84 px Zeilenabstand bei 90 px Schrift — deutlich enger als die 1.14 der übrigen Überschriften. */ line-height: 0.96; } .hero__subline { margin-top: 0.6em; font-family: var(--font-head); font-size: var(--fs-subline); font-weight: 300; line-height: 1.32; color: var(--akzent); } .hero__text { margin-top: 1.1em; max-width: 21em; /* Sicherheitsnetz — der Umbruch steht im Markup; weit genug für die längere englische Zeile */ font-size: var(--fs-hero-text); line-height: 1.36; color: var(--text-ruhig); } /* Kleinzeile ueber dem Knopf ("Zum Start oeffne ich Naturewalk nur fuer einen kleinen ersten Kreis."). Bewusst nicht in Kicker-Versalien: neben dem echten Kicker weiter oben waere das eine Wiederholung. */ .hero__hinweis { margin-top: 1.4em; font-size: var(--fs-mini); line-height: 1.5; color: var(--text-leise); } /* v2 setzt eine Zeile ueber den Knopf. Der alte Abstand stammt aus einem Hero, in dem direkt ueber dem Knopf der Fliesstext endete — unveraendert ruckte der Knopf jetzt zu weit nach unten. */ .hero__aktion { margin-top: clamp(18px, 2vw, 26px); } /* Buendig mit dem uebrigen Hero-Text, nicht unter der Knopfbeschriftung. In v1 stand hier ein Einzug von 2.2em, damit die Zeile mittig unter dem Knopf sass. Neben Kicker, Ueberschrift, Absatz und Hinweiszeile — die alle an derselben Kante beginnen — liest sich dieser eine Einzug als Fehler und nicht als Absicht. */ .hero__preis { margin-top: 1.1em; font-size: var(--fs-klein); color: var(--text-leise); } /* --- 4.3 Icon-Reihen (Merkmale + Vorteile) ------------------------------- */ /* v1 hatte fuenf Zellen je Reihe, v2 hat vier — in beiden Reihen. */ .reihe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .reihe__zelle { position: relative; display: flex; flex-direction: column; align-items: center; padding-inline: clamp(12px, 1.6vw, 24px); text-align: center; } /* Trenner zwischen den Zellen. Im Mockup sind das keine Vollton-Linien: senkrecht wie waagerecht laufen sie an beiden Enden weich aus (gemessen am Trenner x=290: unsichtbar bei y≈1335, Maximum #3C3835 in der Mitte, wieder unsichtbar bei y≈1508). Deshalb Verläufe in Pseudo-Elementen statt border — die lassen sich in den umgebrochenen Layouts unten einzeln an- und abschalten, ohne dass eine Kante stehen bleibt. ::before = senkrechter Trenner links ::after = waagerechter Trenner oben (nur in umgebrochenen Reihen) */ .reihe__zelle::before, .reihe__zelle::after { content: ""; position: absolute; display: none; pointer-events: none; } .reihe__zelle::before { inset-block: 0; inset-inline-start: 0; width: 1px; background: linear-gradient( to bottom, transparent 0%, var(--linie) 18%, var(--linie) 82%, transparent 100% ); } .reihe__zelle::after { inset-inline: 0; top: 0; height: 1px; background: linear-gradient( to right, transparent 0%, var(--linie) 18%, var(--linie) 82%, transparent 100% ); } /* Desktop: fünf Spalten, Trenner vor jeder Zelle außer der ersten */ .reihe__zelle + .reihe__zelle::before { display: block; } .reihe__icon { color: var(--gold-icon); } .reihe__titel { font-size: 1.25rem; font-weight: 400; line-height: 1.4; color: var(--gold); } .reihe__text { margin-top: 0.35em; max-width: 20em; font-size: 1.0625rem; line-height: 1.55; color: var(--text-leise); } /* Merkmale: großes Icon, Titel + Beschreibung. Bis v2 lag der Abschnitt als randlose Bande auf --flaeche, oben und unten über 72 px in den Seitengrund auslaufend. Diese Bande ist ersatzlos weg: sie war eine Farbfläche, und Farbflächen soll es nicht mehr geben. An ihre Stelle tritt ein Foto (.fond) mit der Tafel darauf — dieselbe Absicht, "eine ruhige Fläche, die sich vom Grund abhebt", nur mit einem Bild darunter statt einer Volltonfarbe. */ .merkmale { padding-block: var(--raum-l); } .merkmale .reihe__icon { width: var(--icon-merkmal); height: var(--icon-merkmal); stroke-width: 1.1; margin-bottom: 20px; } /* Vorteile: kleineres Icon, nur Label */ .vorteile { padding-block: var(--raum-l); } /* Kein eigener Schleier mehr, sondern der Grundverlauf aus .fond. Bis hierher lag ueber diesem Abschnitt ein flacher Schleier mit 88 % Deckung. Grund war, dass die Beschriftungen frei auf dem Foto standen und der Ausschnitt hier ein helles Stueck des Mooses trifft — bei nur rund 150 px Bandhoehe blieb kein Platz fuer einen Verlauf, der zur Mitte hin aufmacht, also musste die Deckung durchgehend hoch sein. Der Abschnitt stand dadurch dunkler als seine Nachbarn. Seit die Reihe auf einer Glastafel sitzt (siehe .glas), traegt die Tafel die Schrift und der Grund darf offen bleiben. Damit sieht der Abschnitt aus wie die Merkmale darueber und wie die Preiskarte, auf die der Kunde gezeigt hat — dieselbe Deckung, derselbe Rand, derselbe Radius. */ .vorteile .reihe__icon { width: var(--icon-vorteil); height: var(--icon-vorteil); stroke-width: 1.2; margin-bottom: 14px; } /* „Auf allen Geräten" ist im Mockup als einziges Zeichen deutlich breiter als hoch (54 x 35 px gegen 28–43 px Breite bei den Nachbarn). Sein Symbol hat deshalb eine 30 statt 24 Einheiten breite viewBox; damit es nicht gestaucht wird, bekommt es hier dieselbe Höhe und die passende Breite. */ .vorteile .reihe__icon--breit { width: calc(var(--icon-vorteil) * 30 / 24); } .vorteile .reihe__titel { font-size: 1.125rem; color: var(--text-ruhig); } /* --- 4.4 Foto-Untergrund für beliebige Abschnitte ------------------------ */ /* .fond legt ein Foto unter einen Abschnitt, der seine Höhe weiterhin selbst bestimmt. Der Unterschied zu .foto weiter unten: .foto ist ein Schaustück mit eigener Mindesthöhe und mittigem Satz, .fond ist nur Untergrund und mischt sich in die Gestaltung des Abschnitts nicht ein. Warum es das überhaupt gibt: die Kundin will nirgends mehr eine blanke Farbfläche sehen, jeder Abschnitt soll auf einem Bild stehen. Sechs der zehn Blöcke waren bisher flach. Der Schleier erreicht bewusst NIE volle Deckung. Liefe er wie frueher bei .foto in ein deckendes --tiefe aus, stuende an jeder Naht ein Streifen blanker Farbe; genau das soll weg. Die Farbe unter dem Bild bleibt trotzdem --tiefe: sie fuellt die Halbpixelzeile, die beim Skalieren an einer Abschnittskante entstehen kann, und liegt so nah am Schleier, dass sie dort nicht auffaellt. Er laeuft ausserdem fast flach durch (78/72/78). Bis zur zweiten Rueckmeldung schloss er an beiden Raendern auf 92 %, damit die Naht im Dunkeln verschwindet. Das hat die Naht zwar versteckt, aber jeden Abschnitt in einen dunklen Rahmen gesetzt — die Seite las sich als Stapel von Tafeln, und genau das hat die Kundin gemeldet. Seit es die Blende gibt (Abschnitt 4.4a), braucht die Naht keine Verdunklung mehr. 72 % in der Mitte sind der Arbeitswert fuer Text: ueber einem Foto der Helligkeit 3,5 ergibt das gemessen 9,3:1, ueber dem hellsten der neuen Motive (13,5) noch 6,7:1. Bei 78 % an den Raendern wird es nicht schlechter, sondern minimal besser — mehr Deckung heisst dunkler. */ .fond { position: relative; isolation: isolate; background: var(--tiefe); } .fond__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .fond > picture::after { background: linear-gradient( to bottom, rgb(var(--scrim) / 78%) 0%, rgb(var(--scrim) / 74%) 14%, rgb(var(--scrim) / 72%) 50%, rgb(var(--scrim) / 74%) 86%, rgb(var(--scrim) / 78%) 100% ); } .fond > .container { position: relative; z-index: 2; } /* --- 4.4a Blende: ein Foto geht in das naechste ueber -------------------- */ /* Die Kundin hat in der zweiten Runde zweimal dasselbe verlangt: "there should always be a fade from one image to the next". Runde eins hat den ersten Teil geliefert — nirgends mehr blanke Farbe — den zweiten nicht. Die Fotos stiessen weiterhin stumpf aneinander. Warum das trotz gleicher Helligkeit sichtbar war: an jeder Naht lagen die Werte gemessen bei 1,5 bis 2,2, es gab also keine Helligkeitskante. Die Kante war eine Texturkante — oberhalb Moos, unterhalb Nadelwald, dazwischen eine gerade Linie quer ueber den Schirm. Das Auge findet so etwas auch ohne Helligkeitsunterschied. Dazu kam die Rhythmik: jeder Abschnitt schloss oben und unten mit 92 % Deckung. Zwischen zwei Abschnitten standen damit zwei zulaufende Raender uebereinander, und die Seite las sich als Stapel einzeln gerahmter Tafeln statt als eine Landschaft. Deshalb laeuft der Schleier in .fond jetzt fast flach durch (78/72/78 statt 92/72/92); die Kantenverdunklung war nur dazu da, die Naht zu verstecken, und die Naht gibt es nicht mehr. Die Blende selbst: die Bildschicht eines Abschnitts reicht um --blende nach oben in den Vorgaenger hinein und wird dort weggeblendet. Weil der Abschnitt spaeter im Dokument steht, liegt er obenauf — im Blendenband loest sich also das obere Foto in das untere auf. Entscheidend ist, dass Foto UND Schleier gemeinsam maskiert werden, nicht jedes fuer sich. Deshalb sitzt die Maske am und der Schleier als dessen ::after darin. Maskierte man beide einzeln, faellt im Band auch die Deckung des Schleiers ab, und das durchscheinende Foto stuende dort heller als in beiden Nachbarn — statt einer Naht ein heller Streifen. Gerechnet: in der Bandmitte kaeme das eintretende Foto mit 27 % statt 4 % durch. Die Maske laeuft nicht geradlinig, sondern in sechs Stufen. Ein gerader Alpha-Verlauf endet an einem Knick, und diesen Knick sieht das Auge als Linie — dasselbe Argument wie beim Verlauf in .stimmung, dort nachgemessen mit 11,5 gegen 5,3 Helligkeitssprung je Pixel. --blende steht per Vorgabe auf 0. Nur Abschnitte, die einen Vorgaenger haben, bekommen einen Wert: der erste Abschnitt einer Seite hat nichts, in das er ueberblenden koennte, und wuerde oben durchsichtig werden. */ :root { --blende: 0px; } main > section:not(:first-child), .fuss { --blende: clamp(96px, 10vw, 200px); } /* Bildschicht eines Abschnitts: Foto und Schleier in EINER maskierten Ebene. traegt sonst display: contents (siehe Abschnitt 2) und faellt aus der Darstellung heraus; hier wird es gebraucht, weil nur ein echtes Element Maske und Schleier zusammenhalten kann. Der Verlauf steht ausgeschrieben und nicht in einer eigenen Variablen — der naheliegende Weg funktioniert naemlich nicht: eine Eigenschaft, die var(--blende) enthaelt, bekommt diesen Wert schon dort eingesetzt, wo sie deklariert ist. Am :root waeren das die vorgegebenen 0 px, und die Maske waere ueberall vollflaechig deckend. Genau so gemessen: statt einer Blende stand eine harte Kante 128 px ueber der Abschnittsgrenze. Der letzte Stopp haelt seine Farbe bis zum Ende, der Rest der Ebene bleibt also unmaskiert. Bei --blende: 0px fallen alle Stopps auf 0 zusammen und die Maske ist durchgehend deckend — der erste Abschnitt einer Seite bleibt damit unveraendert. */ .fond > picture, .foto > picture { display: block; position: absolute; inset: calc(-1 * var(--blende)) 0 0 0; z-index: 0; pointer-events: none; -webkit-mask-image: linear-gradient( to bottom, rgb(0 0 0 / 0) 0px, rgb(0 0 0 / 0.03) calc(var(--blende) * 0.14), rgb(0 0 0 / 0.16) calc(var(--blende) * 0.32), rgb(0 0 0 / 0.44) calc(var(--blende) * 0.52), rgb(0 0 0 / 0.76) calc(var(--blende) * 0.72), rgb(0 0 0 / 0.95) calc(var(--blende) * 0.88), rgb(0 0 0 / 1) var(--blende)); mask-image: linear-gradient( to bottom, rgb(0 0 0 / 0) 0px, rgb(0 0 0 / 0.03) calc(var(--blende) * 0.14), rgb(0 0 0 / 0.16) calc(var(--blende) * 0.32), rgb(0 0 0 / 0.44) calc(var(--blende) * 0.52), rgb(0 0 0 / 0.76) calc(var(--blende) * 0.72), rgb(0 0 0 / 0.95) calc(var(--blende) * 0.88), rgb(0 0 0 / 1) var(--blende)); } /* Der Schleier deckt den Abschnitt selbst, nicht das Blendenband: inset oben um --blende versetzt. Damit beziehen sich alle Prozentstopps der einzelnen Abschnitte weiterhin auf deren eigene Hoehe und muessen nicht umgerechnet werden. */ .fond > picture::after, .foto > picture::after { content: ""; position: absolute; inset: var(--blende) 0 0 0; z-index: 1; } /* Im Blendenband gilt der Randwert des eintretenden Abschnitts, konstant. Er entspricht dem 0-%-Stopp des jeweiligen Schleiers, sonst saesse an der Abschnittsoberkante eine Stufe. */ .fond > picture::before, .foto > picture::before { content: ""; position: absolute; inset: 0 0 auto 0; height: var(--blende); z-index: 1; background: rgb(var(--scrim) / var(--kante, 78%)); } /* Halbdurchsichtige Tafel über einem Foto. Das ist kein neuer Einfall, sondern die Preiskarte (.preis__karte), auf die der Kunde im Video acht Sekunden lang gezeigt und "chic" gesagt hat — dieselbe Deckung, derselbe Rand, derselbe Radius. Sie gehört nur auf dunkle Motive: über --flaeche-glas mit 72 % ergibt ein Foto der Helligkeit 3 gemessen 8,4:1, ein helles (29) dagegen nur 4,3:1. */ .glas { background: var(--flaeche-glas); border: 1px solid var(--rand); border-radius: var(--radius-karte); padding: clamp(22px, 3vw, 40px); } /* --- 4.5 Fließtext-Abschnitte (Übergang, Vertrauen) ---------------------- */ /* Zwei ruhige Textabschnitte. Bis v2 standen sie als Atempausen auf flachem Grund; seit v3 liegt auch unter ihnen ein Foto (.fond), weil blanke Farbe nirgends mehr vorkommen soll. Ruhig bleiben sie trotzdem: das Motiv ist dunkle Waldtextur ohne Blickfang, und der Schleier steht bei 72 %. Eine mittige Spalte, der Satz darin bleibt linksbündig — drei ganze Absätze zentriert zu setzen liest sich schlecht. Polster jetzt auf beiden Seiten. Vorher trug der Folgeabschnitt mit seinem oberen Polster den Abstand bei; als eigenes Bildband braucht der Abschnitt seinen Abstand selbst, sonst klebt der Text an der Naht. */ .textblock { padding-block: var(--raum-l); } .textblock__spalte { max-width: 34em; margin-inline: auto; } .textblock h2 { font-size: var(--fs-h2); margin-bottom: 0.6em; } .textblock p + p { margin-top: 1em; } .textblock p { color: var(--text-ruhig); } /* Der Uebergangstext ("Vieles von mir siehst du oeffentlich ...") ist die erste eigene Stimme nach dem Hero und trug bisher nur Fliesstextgroesse. Er steht jetzt eine Stufe groesser und skaliert mit der Fensterbreite. Bewusst nur hier und nicht auf .textblock p: der Vertrauensblock nutzt dieselbe Klasse und soll ruhig bleiben. Der Takt-Satz am Ende behaelt seine eigene, groessere Groesse, deshalb die Ausnahme. */ .persoenlichkeit p:not(.textblock__takt) { font-size: clamp(1.1875rem, 1.55vw, 1.4375rem); line-height: 1.62; } /* Die letzte Zeile des Übergangs ("Ich gehe. Ich spüre. …") steht im Briefing als eigener Takt, nicht als weiterer Absatz — sie bekommt die Serife und etwas mehr Luft davor. */ .textblock__takt { margin-top: 1.6em; font-family: var(--font-head); font-size: var(--fs-subline); line-height: 1.32; color: var(--akzent); } /* --- 4.6 Zitat-Karte ----------------------------------------------------- */ /* In v1 saß die Karte in der schmalen linken Spalte des "Für dich"-Rasters, das es nicht mehr gibt. Freistehend braucht sie eine eigene Breite — ohne die Deckelung liefe sie sonst über die ganze Seite. */ .zitatblock { padding-block: var(--raum-l); text-align: center; } .zitat { display: flex; align-items: center; gap: 14px; /* 600 px hält die zweite Zitatzeile auf zwei Zeilen — genau der Umbruch, den die Karte in v1 in ihrer 397 px breiten Spalte hatte. Ohne die Deckelung zerfiele das Zitat freistehend in eine einzige lange Zeile. */ max-width: 600px; margin: 0 auto; padding: 18px; /* Deckung statt Vollton, seit unter der Karte ein Foto liegt: --flaeche als undurchsichtiger Block waere hier wieder die blanke Farbflaeche, die weg soll. Derselbe Ton, nur mit 72 % — wie bei .glas und der Preiskarte. */ background: var(--flaeche-glas); border: 1px solid var(--rand); border-radius: var(--radius-karte); text-align: left; } /* Kleinzeile unter einem CTA — dieselbe Stimme wie .hero__preis, aber mittig, weil die Blöcke unterhalb des Heros zentriert stehen. */ .cta-klein { margin-top: 1.1em; font-size: var(--fs-klein); color: var(--text-leise); } .aktion { margin-top: clamp(26px, 2.8vw, 36px); } /* Das Porträt bestimmt die Höhe der Karte: im Mockup misst es 96 px bei 137 px Kartenhöhe (70 %) und sitzt exakt mittig — gemessene Polster oben 20, unten 21. Mit 64 px stand es deutlich zu klein in einer Karte, die dadurch oben und unten zu viel Luft hatte. */ .zitat__bild { width: var(--zitat-bild); height: var(--zitat-bild); flex: none; border-radius: 50%; object-fit: cover; } /* Ink-Breite der zweiten Zeile im Mockup 250 px, gerendert waren es 206 — die Schrift stand rund 19 % zu klein. Der Zeilenabstand von 29 px ergibt sich bei 17 px Schrift wieder aus dem unveränderten line-height 1.7. */ .zitat__text { margin: 0; font-size: var(--fs-zitat); line-height: 1.7; color: rgb(242 237 232 / 84%); } /* Die Signatur ist kein Schriftsatz mehr, sondern images/Sign.png — Schriftzug und Herz stecken zusammen in der Datei. Sie liegt rein weiß auf transparentem Grund; die Deckkraft bringt sie auf denselben Ton, den Pinyon Script vorher hatte (rgb(242 237 232 / 74%) über --tiefe ergibt 180, Weiß bei 0.7 ergibt 180). line-height: 0 verhindert, dass die Zeilenbox unter dem Bild die Karte höher macht als das Porträt. */ .zitat__signatur { margin-top: 13px; /* Mockup: 32 px von der Zitat- zur Signaturzeile */ line-height: 0; } .zitat__signatur img { height: 28px; /* Mockup: Ink der Signaturzeile 28 px */ width: auto; opacity: 0.7; } /* --- 4.7 Vertrauensblock — Text links, Foto rechts ----------------------- */ /* Das Raster stammt aus dem "Für dich"-Abschnitt von v1, nur andersherum gewichtet: hier trägt der Text, das Foto steht als ruhige Fläche daneben. Über dem Bild steht kein Wort — deshalb braucht es hier keinen Schleier, und es ist die einzige Fotostelle der Seite ganz ohne Kontrastrisiko. */ /* Das Paar ist gedeckelt und steht mittig, statt die volle Containerbreite auszufuellen. Ohne Deckel wuchs die Bildkarte ungebremst mit dem Fenster: bei 2000 px stand sie 734 x 978 px neben drei Zeilen Text von zusammen 271 px Hoehe — 708 px Leerraum in einem Abschnitt, der ruhig wirken soll. Der Text hatte seinen Deckel (30em) laengst, das Bild nicht. Der Deckel sitzt am Raster, nicht an den Spalten: so bleibt das Verhaeltnis 1.4 : 1 auch dann erhalten, wenn der Platz knapp wird, und der Text behaelt die groessere Haelfte. Spalten mit eigenem em-Deckel schrumpfen stattdessen zu gleich breiten Haelften. */ .vertrauen__raster { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: center; max-width: 52em; margin-inline: auto; } .vertrauen__spalte { max-width: 30em; } /* Bildkarte — der Rahmen des früheren Video-Platzhalters. Ein Unterschied: die Kanten laufen NICHT mehr weich in den Grund aus. Das Auslaufen war für einen randlosen Block gedacht; eine gerahmte Karte will eine klare Kante, sonst franst der Rand über dem Verlauf aus. */ .bildkarte { position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius-video); border: 1px solid var(--rand); overflow: hidden; /* Grund unter dem Foto, sichtbar solange es lädt. --nacht wäre der naheliegende Palettenton, ist aber der einzige blaustichige (H240°) und stünde als kalter Fleck in einer durchgehend warmen Seite. */ background: var(--flaeche); } .bildkarte img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; /* schneidet den ausgebrannten Himmel oben ab */ } /* --- 4.8 Randlose Foto-Abschnitte (Stimmung, Abschluss) ------------------ */ /* Zwei Abschnitte laufen über die volle Breite und tragen den Text direkt auf dem Foto. Kein 100vw und kein background-attachment: fixed — das erste erzeugt unter Windows einen Überlauf in Breite der Scrollleiste, das zweite ist auf iOS kaputt. Stattdessen ein absolut gesetztes , damit srcset, loading und object-position überhaupt greifen können. Die Höhe hängt an der Breite, nicht an vh: auf dem Handy schiebt die ein- und ausfahrende Adressleiste sonst das Layout. 375 px → Untergrenze 384 px 768 px → 430 px 1280 px → Obergrenze 672 px, und darüber bleibt es dabei. */ /* Kein overflow: hidden mehr. Es klammerte frueher nichts ein — das Foto liegt mit inset: 0 innerhalb — und wuerde jetzt die Blende abschneiden, die absichtlich nach oben in den Vorgaenger reicht (Abschnitt 4.4a). */ .foto { position: relative; display: grid; align-items: end; min-height: clamp(24rem, 56vw, 42rem); } .foto__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* Schleier. Oben und unten blendet er in den Seitengrund, damit nirgends eine harte Fotokante steht — dieselbe Sprache wie am Hero. Der kräftige Anteil sitzt unten, wo der Text steht. Oben wie unten 84 %, kein Vollton mehr an keiner der beiden Kanten. Bis zur zweiten Rueckmeldung stand oben --tiefe; das war die Reserve gegen eine helle Haarlinie an der Abschnittsgrenze — Abschnittsraender fallen nicht zwangslaeufig auf ganze Geraetepixel (nachgemessen endete ein Abschnitt bei 4075,922 px in einem 4076 px hohen Dokument), und Chrome mischt die angeschnittene Zeile aus Verlauf und Foto. Bei 84 % Deckung ist diese Mischung selbst schon fast --tiefe, das helle Foto kann dort also nicht mehr als Linie durchschlagen — und die Grenze selbst liegt seit der Blende (Abschnitt 4.4a) ohnehin mitten in einer Ueberblendung und nicht mehr auf einer Kante. */ .foto > picture::after { background: linear-gradient(to bottom, rgb(var(--scrim) / 84%) 0%, rgb(var(--scrim) / 0%) 18%, rgb(var(--scrim) / 0%) 38%, rgb(var(--scrim) / 78%) 78%, rgb(var(--scrim) / 84%) 100%); } /* Eigener Schleier fuer den Stimmungsabschnitt. Der gemeinsame Verlauf oben war zu breit angelegt: 18 % Auslauf am oberen Rand und ein Anstieg schon ab 38 % liessen bei 1920 x 672 px nur 134 px voellig freies Foto stehen — ein Fünftel der Abschnittshoehe. Der Rest lag unter Schleier, und der Abschnitt las sich als schmaler Bildstreifen zwischen zwei dunklen Baendern. Das Foto ist ueber die ganze Hoehe fast gleich hell (L 34–37 %), oben braucht es also gar keine Deckung — der kurze Auslauf dort ist reine Kantenpflege zum vorigen Abschnitt. Gebraucht wird sie nur unter dem Satz, und dort sind es nachgerechnet 65 %. Also: Auslauf kuerzer, Anstieg spaeter, dafuer unter dem Satz etwas kraeftiger als zuvor. Der obere Auslauf laeuft NICHT geradlinig, sondern in fuenf Stufen: erst schnell, dann mit langem flachem Ausklang. Ein gerader Verlauf endet an einem Knick — die Helligkeit steigt gleichmaessig und hoert dann schlagartig auf zu steigen, und genau diesen Knick sieht das Auge als Kante, gerade weil das Foto direkt darunter hell ist. Gemessen als groesster Helligkeitssprung je Pixel: gerade Rampe 11,5, gestufte 5,3 (Tausendstel, 1905 x 672 px). Das Foto steht dabei fast gleich frueh offen, y = 73 px statt 46 px. Anfang und Ende liegen bei 90 % beziehungsweise 84 % Deckung, nicht bei voller Farbe. Bis v2 stand oben --flaeche, weil darueber die Merkmal-Bande lag; die gibt es nicht mehr, oben und unten steht jetzt ebenfalls ein Foto unter Schleier. Wertgleich ist die Naht damit weiterhin, nur ohne Volltonfarbe: die Nachbarn schliessen mit 78 % ueber einem Motiv der Helligkeit 3, dieser Abschnitt mit 90 % ueber einem Motiv der Helligkeit 20. Etwas dichter als die Nachbarn muss er sein, weil sein Foto das mit Abstand hellste der Seite ist. Ausserdem liegt die Grenze seit der Blende (Abschnitt 4.4a) in einer Ueberblendung: der Wertsprung verteilt sich ueber gut hundert Pixel statt auf eine Zeile. Bewusst an .stimmung und nicht an .foto: .preis auf der Preisseite traegt einen ganzen Block statt eines Satzes und behaelt den Grundwert. */ .stimmung { --kante: 90%; } /* Christinas neues Foto (2026-08-24): der Rahmen in tools/bilder.py laesst die volle Bildhoehe stehen, aber .foto selbst rendert deutlich flacher als das Zuschnittsverhaeltnis dort (min-height: 56vw statt 72%) - object- fit: cover schneidet dadurch am Bildschirm nochmal nach, mittig per Vorgabe. Jose fand das zu nah an ihrem Kopf: Schleife nach unten verschoben, damit mehr von ihr (Hals abwaerts) und mehr Wald sichtbar bleibt statt oben abgeschnitten zu werden. Reine Positionsverschiebung im bereits vorhandenen Bildausschnitt, kein zusaetzlicher Zuschnitt. */ .stimmung .foto__bild { object-position: 50% 75%; } /* Der Abschnitt traegt seit dem Zusammenlegen mit dem Zitatblock deutlich mehr Text ueber mehr Hoehe als zuvor (siehe 4.8a). Die alte Kurve ging zwischen 17% und 42% bis auf 0% Deckung runter — das war fuer den kurzen Einzeiler vorher unproblematisch, liegt jetzt aber genau dort, wo "Vielleicht bist du..." steht, und macht den Text auf dem hellen, kontrastreichen Foto (Gegenlicht, Laub) kaum lesbar. Durchgehend mindestens 45% Deckung statt eines offenen Fensters. */ /* 2026-08-25, Lukas' Rueckmeldung: sie soll sichtbarer sein, Deckung reduziert statt der Farbe geaendert. Nicht unter das dokumentierte Minimum von 45 % (siehe oben), sonst wird "Vielleicht bist du..." unleserlich. Vorlaeufig, mit Jose live geprueft. */ .stimmung > picture::after { background: linear-gradient( to bottom, rgb(var(--scrim) / 75%) 0%, rgb(var(--scrim) / 63%) 6%, rgb(var(--scrim) / 45%) 14%, rgb(var(--scrim) / 45%) 25%, rgb(var(--scrim) / 45%) 42%, rgb(var(--scrim) / 45%) 55%, rgb(var(--scrim) / 55%) 70%, rgb(var(--scrim) / 63%) 90%, rgb(var(--scrim) / 69%) 100% ); } .foto__inhalt { position: relative; z-index: 2; padding-block: clamp(36px, 5vw, 72px); text-align: center; } /* Auf dem Foto steht ausschließlich großer Satz. Der hellste Fleck in hintergrund-stimmung.jpg liegt bei L≈79 % — bei 78 % Schleier trägt das die 3:1-Schwelle für Schrift ab 24 px, aber keine Kleinschrift mehr. Deshalb hier kein --text-leise und keine Kicker-Zeile. */ .foto__satz { max-width: 24em; margin-inline: auto; font-family: var(--font-head); font-size: var(--fs-abschluss); font-weight: 300; line-height: 1.3; color: var(--text); text-wrap: balance; } /* --- 4.9 Startvideo im Hero ---------------------------------------------- */ /* Stand v2: es gibt noch kein echtes Video. Im Hero liegt ein Standbild, darauf das Play-Zeichen — aber als reine Zeichnung (), nicht als Knopf. Ein Knopf, der auf den Klick schweigt, ist schlechter als gar keiner. Sobald Christinas Film vorliegt, wird aus dem ein