/* ══════════════════════════════════════════════════════════════════════════ EDITORIAL-GRID · seit 11.08.2026 produktiv Herkunft: _vorschau/editorial.css, dort entstanden und dort um vier Fehler bereinigt, die in _prototyp/editorial.css noch stehen. DIESE Datei ist ab jetzt die gueltige Fassung, Aenderungen gehoeren hierher. Eingebunden auf: ueber-uns, die fuenf Anlass-Seiten. NICHT auf der Startseite: deren Hero-Umbau ist noch nicht entschieden (Till, 11.08.) und liegt weiter in _vorschau/index-editorial.html. Vier Bausteine, in denen Bild und Schrift in dieselben Rasterzellen greifen. Ziel ist der Magazin-Effekt: kein zentrierter Block unter dem nächsten, sondern eine Seite, die wie gesetzt aussieht statt wie zusammengeklickt. Die Mechanik ist ein 12-Spalten-Raster mit zwei zusaetzlichen Randspuren. Dadurch kann ein Bild bis zum Bildschirmrand laufen (voll-start / voll-ende), waehrend der Text im Satzspiegel bleibt. Beide liegen in derselben Zeile, deshalb ueberlappen sie sich, ohne dass negative Abstaende noetig sind. (bittr loest das mit margin-top:-100px. Funktioniert, bricht aber, sobald sich die Textlaenge aendert.) Linien im Raster: 1 voll-start 2 Beginn Satzspiegel (= Spalte 1) 2+n Ende Spalte n 14 Ende Satzspiegel 15 voll-ende ══════════════════════════════════════════════════════════════════════════ */ .ed{ --rand:clamp(1.25rem,5vw,4rem); --spalte:calc(min(var(--container,1320px),100vw - 2*var(--rand))/12); display:grid; grid-template-columns: [voll-start] minmax(var(--rand),1fr) [inhalt-start] repeat(12,minmax(0,var(--spalte))) [inhalt-ende] minmax(var(--rand),1fr) [voll-ende]; align-items:center; /* 1,6rem waren fuer die kleinen Prototyp-Headlines gedacht. Bei 90px Schrift sind 26px Abstand zum Fliesstext nichts, die Bloecke kleben aneinander und wirken wie ein starrer Kasten. Der Abstand waechst deshalb mit. */ row-gap:clamp(2rem,4.6vw,4.8rem); } /* ── Kernprinzip: die Headline ist ein eigenes Rasterkind ──────────────────── Erst dadurch funktioniert die Ueberlappung. Die Headline (.ed__head) ragt ins Bild hinein, der Fliesstext (.ed__body) steht daneben auf ruhigem Grund. Wuerde man beides als einen Block setzen, landet der Fliesstext mit auf dem Motiv und wird unlesbar. Genau das ist im ersten Entwurf passiert. Zweite Bedingung: die Schrift darf nie halb auf einer Flaeche und halb auf einem UNBEHANDELTEN Foto liegen, dafuer gibt es keinen Farbton, der beides traegt. Behandelt wird das Bild, und dafuer gibt es zwei Wege: dunkle Sektion (.ed--auf-dunkel): Schrift laeuft in Off-White. helle Sektion (.ed--auf-hell): Schrift laeuft in der satten Signalfarbe. In beiden Faellen liegt die Headline einfach ueber dem Motiv, ohne es aufzuhellen oder abzudunkeln. Zwei frueher hier notierte Sonderregeln ("nur auf dunklem Grund", "Bild laeuft in die Sektionsfarbe aus") kamen aus der Kontrasttabelle statt aus dem Ergebnis und sind wieder entfernt. */ /* ── Baustein 1: Split ───────────────────────────────────────────────────── Bild laeuft zum Rand aus, die Headline ragt drei Spalten weit darueber, der Fliesstext steht rechts daneben. */ /* Das Motiv endet auf Linie 8, der Text beginnt auf 9. Die Spalte dazwischen ist die Gasse und bleibt leer. Vorher endete das Bild auf 9 und der Text begann auf 9, also klebte der Fliesstext direkt an der Bildkante. Im Prototyp fiel das nicht auf, weil dort nur ein kurzer Absatz stand. */ .ed-split .ed__media{grid-column:voll-start / 8;grid-row:1 / span 2} /* Die Headline beginnt auf Linie 6, nicht auf 5. Sie ragt damit nur noch mit ihrem Anfang ueber die RECHTE Bildhaelfte statt quer ueber die Mitte. Grund: bei einem Portraet lag sie sonst mitten im Gesicht (Till, 11.08.). Bei Sachmotiven darf man weiter nach links gehen, dafuer gibt es unten den Modifikator .ed-split--tief. */ .ed-split .ed__head {grid-column:6 / inhalt-ende;grid-row:1;z-index:2;align-self:end} .ed-split .ed__body {grid-column:9 / inhalt-ende;grid-row:2;z-index:2;align-self:start} .ed-split--rechts .ed__media{grid-column:8 / voll-ende} .ed-split--rechts .ed__head {grid-column:inhalt-start / 10;text-align:right} .ed-split--rechts .ed__body {grid-column:inhalt-start / 7} /* Tiefe Ueberlappung: nur fuer Motive ohne Gesicht (Anhaenger, Werkzeug, Tresen). Dort darf die Headline weit ins Bild laufen, das ist der Effekt, um den es beim ganzen Raster geht. */ .ed-split--tief .ed__head{grid-column:4 / inhalt-ende} .ed-split--tief.ed-split--rechts .ed__head{grid-column:inhalt-start / 12} /* ── Baustein 2: Bleed ───────────────────────────────────────────────────── Das Motiv traegt die Sektion, der Text bleibt vollstaendig daneben. Kein Text auf Bild, deshalb hier auch keine Signalfarben-Pflicht. */ /* Gasse wie beim Split: Motiv bis 8, Text ab 9. */ .ed-bleed .ed__media{grid-column:voll-start / 8;grid-row:1 / span 2} .ed-bleed .ed__head {grid-column:9 / inhalt-ende;grid-row:1;align-self:end} .ed-bleed .ed__body {grid-column:9 / inhalt-ende;grid-row:2;align-self:start} .ed-bleed--rechts .ed__media{grid-column:8 / voll-ende} .ed-bleed--rechts .ed__head{grid-column:inhalt-start / 7} .ed-bleed--rechts .ed__body{grid-column:inhalt-start / 7} /* ── Baustein 3: Stack ───────────────────────────────────────────────────── Breites Motiv, Headline auf der Unterkante. Hier liegt der Text komplett auf dem Bild, deshalb traegt das Motiv einen Verlauf nach unten. */ .ed-stack{align-items:end;row-gap:0} /* Das Motiv muss hoch genug sein, um Headline UND Fliesstext zu tragen. Bei einem flachen Kinoformat schiebt sich der Text sonst ueber die Oberkante hinaus und steht halb in der Luft. */ .ed-stack .ed__media{min-height:min(70vh,620px)} .ed-stack .ed__media{grid-column:inhalt-start / inhalt-ende;grid-row:1 / span 2} .ed-stack .ed__head {grid-column:inhalt-start / 11;grid-row:1;z-index:2;align-self:end} .ed-stack .ed__body {grid-column:inhalt-start / 9;grid-row:2;z-index:2;align-self:end; padding-bottom:clamp(1.4rem,3vw,2.8rem)} /* ── Baustein 4: Quiet ───────────────────────────────────────────────────── Reiner Text, bewusst schmal und aus der Mitte gerueckt. */ .ed-quiet .ed__head,.ed-quiet .ed__body{grid-column:4 / 12} .ed-quiet--links .ed__head,.ed-quiet--links .ed__body{grid-column:inhalt-start / 9} /* ── Ueberlappung auf hellem Grund ────────────────────────────────────────── Funktioniert genauso wie auf dunklem Grund: die Headline liegt einfach ueber dem Motiv, einfarbig in der hellen Signalstufe, mit einem dezenten Schatten als Sicherheitsnetz. Kein Aufhellen des Bildes, kein Abdunkeln. Anmerkung zur Historie: hier standen nacheinander zwei strengere Regeln ("nur auf dunklem Grund", danach "Bild laeuft in die Sektionsfarbe aus"). Beide kamen aus der Kontrasttabelle und nicht aus dem Ergebnis. Am Bild gepruefte Entscheidung von Till: die einfache Ueberlappung sitzt. */ /* Satte Stufe, nicht die helle: auf Sand hat sie vollen Kontrast, und die Motive in hellen Sektionen sind selbst hell (Marktplatz, Tageslicht), also traegt sie auch ueber dem Bild. Die helle Stufe wirkte auf Sand blass. */ /* Der Schein liegt direkt an den Buchstaben und nimmt die Sektionsfarbe auf. Drei gestapelte Schatten: ein enger, harter fuer die Kante, zwei weite, weiche fuer den Uebergang. Das Motiv selbst bleibt unveraendert, deshalb wirkt es nicht wie ein aufgehellter Streifen ueber dem Bild. */ /* Zweiter Durchgang (Till, 11.08.): die ganze Zeile in Glut war ihm zu viel, "alles in dem Glut Ton". Es gilt jetzt dieselbe Regel wie im Rest der Seite: satte Textfarbe, EIN Akzentwort in Glut. Der helle Schein bleibt fuer beide, er ist es, der die Schrift ueber dem Foto traegt. */ .ed--auf-hell .ed__head h2{color:var(--text-strong)} .ed--auf-hell .ed__head h2 .ac{color:var(--signal)} .ed--auf-hell .ed__head h2, .ed--auf-hell .ed__head h2 .ac{ text-shadow: 0 0 11px rgba(250,245,236,.82), 0 0 27px rgba(250,245,236,.63), 0 3px 42px rgba(250,245,236,.46)} .ed--auf-hell .ed__kicker{color:var(--signal); text-shadow:0 0 10px rgba(250,245,236,.88),0 0 21px rgba(250,245,236,.68)} .ed--auf-hell .ed__body p{color:var(--text)} /* ── Bildslots ────────────────────────────────────────────────────────────── Die Formate wechseln bewusst durch. Zwei gleiche Formate hintereinander sind der Punkt, an dem eine Seite wieder nach Baukasten aussieht. */ /* max-width ist Pflicht, nicht Kosmetik: sobald eine min-height greift (siehe ed-stack) rechnet die aspect-ratio die BREITE aus der Hoehe zurueck. Auf dem Handy wurde das Motiv dadurch 1102px breit und hat die Seite gesprengt. Der Deckel laesst in dem Fall das Seitenverhaeltnis nachgeben, nicht die Seite. */ /* width:100% ist der Gegenspieler zur max-height: ohne sie rechnet die aspect-ratio aus der gedeckelten Hoehe eine SCHMALERE Breite zurueck, und das Motiv fuellt seine Rasterspalte nicht mehr aus. Die Headline ragt dann ins Leere statt ins Bild, also genau der Effekt, um den es hier geht. */ .ed__media{position:relative;overflow:hidden;isolation:isolate; width:100%;max-width:100%;max-height:78vh} .ed__media img{width:100%;height:100%;object-fit:cover;display:block} .ed__media--hoch {aspect-ratio:3/4;max-height:66vh} /* Fuer Portraets, die als 4/5 vorliegen (lu-portrait). Schneidet nicht am Kopf, weil das Verhaeltnis der Datei entspricht. */ .ed__media--portrait{aspect-ratio:4/5;max-height:74vh} .ed__media--quer {aspect-ratio:4/3} .ed__media--quadrat{aspect-ratio:1/1;max-height:62vh} .ed__media--breit {aspect-ratio:16/9} .ed__media--kino {aspect-ratio:21/9} /* Deckung nur dort, wo tatsaechlich Fliesstext auf dem Motiv liegt. Bei Split und Bleed ragt ausschliesslich die Headline ins Bild, und die traegt sich ueber ihre Farbe. Flaechige Abdunklung waere dort nur Matsch. */ /* Beim Stack liegt als einzigem Baustein auch der Fliesstext auf dem Motiv. Ein Schein an den Buchstaben waere dort falsch, mehrzeiliger Fliesstext mit Halo sieht billig aus. Stattdessen traegt der Verlauf die untere Bildhaelfte, und zwar hoch genug, dass Headline UND Textblock darauf stehen. */ /* Der Verlauf setzt hoeher an als urspruenglich (20/48/74 statt jetzt 8/38/68). Grund: bei einem hellen Motiv (weisse Anhaengerwand) lag der Kicker ueber der noch offenen Bildhaelfte und war schlicht nicht zu lesen. Kleinschrift hat dort keine Reserve, die Headline traegt sich ueber ihren Schatten noch selbst. */ .ed-stack .ed__media::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg, rgba(46,40,35,0) 8%, rgba(46,40,35,.38) 38%, rgba(46,40,35,.74) 68%, rgba(46,40,35,.93) 100%)} /* Zwei Bildwelten, sichtbar unterschieden. "Jetzt" sind Lus echte Umbau-Fotos: waermer, koerniger, ungeschoent. "Bald" sind die Visualisierungen, die weiter als solche gekennzeichnet bleiben. Der Unterschied ist Absicht, nicht Schlamperei. */ .ed__media--echt img{filter:saturate(.92) contrast(1.06) brightness(1.02)} .ed__media--echt::before{content:"";position:absolute;inset:0;z-index:1; pointer-events:none;opacity:.16;mix-blend-mode:multiply; background-image:url("data:image/svg+xml;utf8,\ \ \ ")} .ed__media--visual img{filter:saturate(.9) contrast(1.02)} /* Rueckhalt fuer die Headline auf HELLEN Motiven (11.08.2026). Die Regel weiter oben nimmt an, eine Headline trage sich auf einem Motiv ueber ihre eigene Farbe. Das stimmt auf dunklen Motiven, auf hellen nicht: auf der Hochzeitsseite lag "nur für euch." in Signalfarbe auf einem hell angeleuchteten Cocktailfoto und war nicht mehr zu lesen. Bewusst OPT-IN und nicht als Standard fuer alle Splits: auf /ueber-uns sind die beiden Sektionen von Till so abgenommen, wie sie sind, und ein Verlauf wuerde dort die Bildkante ohne Not abdunkeln. Der Verlauf laeuft von der Seite ein, an der die Headline ins Bild ragt, und ist nach 62 Prozent aus, damit vom Motiv nichts verloren geht. */ .ed__media--halt::after{content:"";position:absolute;inset:0;z-index:1; pointer-events:none} /* Standard-Split: Motiv links, Headline ragt von rechts hinein. */ .ed-split .ed__media--halt::after{ background:linear-gradient(270deg,rgba(46,40,35,.76) 0%,rgba(46,40,35,.34) 34%,rgba(46,40,35,0) 62%)} /* Gespiegelt: Motiv rechts, Headline ragt von links hinein. */ .ed-split--rechts .ed__media--halt::after{ background:linear-gradient(90deg,rgba(46,40,35,.76) 0%,rgba(46,40,35,.34) 34%,rgba(46,40,35,0) 62%)} /* Einspaltig liegt die Headline mittig ueber dem Motiv, dann traegt nur ein Verlauf von oben. Die Seitenverlaeufe wuerden dort ins Leere zielen. */ @media(max-width:860px){ .ed-split .ed__media--halt::after,.ed-split--rechts .ed__media--halt::after{ background:linear-gradient(180deg,rgba(46,40,35,.72) 0%,rgba(46,40,35,.28) 44%,rgba(46,40,35,0) 74%)} } /* Leere Bildflaeche, solange das Motiv fehlt (11.08.2026, Anlass-Seiten). Uebernimmt bewusst die Optik von .imgslot aus site.css, damit ein Platzhalter ueberall auf der Seite gleich aussieht, statt zwei Sorten Leerstelle zu haben. Sobald ein Bild da ist, faellt nur diese eine Klasse weg, das Markup bleibt. Der Rahmen ist gestrichelt: eine Leerstelle soll als Leerstelle lesbar sein und nicht als gestalteter grauer Block durchgehen. */ .ed__media--leer{display:flex;flex-direction:column;justify-content:flex-end; border:1px dashed rgba(var(--accent-rgb),.45); background:linear-gradient(180deg,var(--card-top),var(--card-bottom)); padding:1.4rem} .ed__media--leer::before{content:"";position:absolute;left:50%;top:44%; transform:translate(-50%,-50%);width:46px;height:34px; border:1.6px solid rgba(var(--accent-rgb),.35);border-radius:5px} .ed__media--leer .ed__leer-label{position:relative;z-index:2;font-size:.6rem; letter-spacing:.24em;text-transform:uppercase;color:var(--text-label)} .ed--auf-dunkel .ed__media--leer{border-color:rgba(242,233,220,.32); background:rgba(242,233,220,.05)} .ed--auf-dunkel .ed__media--leer .ed__leer-label{color:var(--on-dark-mute)} .ed__marke{position:absolute;z-index:3;left:0;bottom:0; padding:.5rem .9rem;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase; color:#FDF8F0;background:rgba(46,40,35,.62);backdrop-filter:blur(6px)} /* ── Akzentwort ───────────────────────────────────────────────────────────── GRUNDREGEL, und sie muss hier stehen: das Kit bringt .ac{color:var(--accent)} mit, und --accent ist Vamoras Taupe. Ohne diese Zeile faerbt das Kit jedes Akzentwort graubraun ein, was auf Sand wie ausgegraut aussieht. Genau das ist passiert, nachdem die Schriftvarianten zusammengelegt wurden. Auf dunklem Grund uebernimmt die helle Stufe, siehe weiter unten. */ .ed .ac,.ed h1 .ac,.ed h2 .ac{color:var(--signal)} /* Gilt fuer Headlines OHNE Bildkontakt (bleed, quiet). Die Bausteine mit Bildkontakt ueberschreiben das weiter unten mit der Einfarbigkeit. */ .ed-sektion--dunkel .ac,.ed--auf-dunkel .ac,.proto-quiet .ac{color:var(--signal-hell)} /* ── Textteil ─────────────────────────────────────────────────────────────── Kicker traegt die Kapitelnummer, das ist die Anleihe beim Magazin: Kapitel statt Abschnitt. */ .ed__kicker{display:flex;align-items:center;gap:.7rem; font-family:var(--font-body);font-size:.66rem;letter-spacing:.3em; text-transform:uppercase;color:var(--signal);margin-bottom:.9rem} .ed__kicker::before{content:"";width:32px;height:1px;background:currentColor} /* Der Kicker bleibt bei der gespiegelten Fassung LINKS stehen, obwohl die Headline rechtsbuendig laeuft. Grund: rechtsbuendig landet er genau auf dem Motiv, und Kleinschrift auf einem hellen Foto ist nicht lesbar, auch nicht mit Schatten. Die Headline traegt sich dort ueber ihre Groesse, der Kicker nicht. Die kleine Asymmetrie ist der Preis dafuer. */ .ed-split--rechts .ed__kicker{flex-direction:row;justify-content:flex-start} /* Der Fliesstext waechst mit den grossen Headlines mit. Bei 90px Headline und 16px Text steht das Verhaeltnis bei 5:1, und dann wirkt der Absatz wie eine Fussnote unter einem Plakat statt wie der Text dazu (Till, 11.08.: "der Text geht da unten unter"). Mit rund 21px liegt es bei 4:1, und der Block traegt. Der Lead bleibt eine Stufe darueber, sonst steht die Hierarchie auf dem Kopf. */ /* Mittelmass, in drei Schritten eingekreist: 16px wirkten unter einer 90px- Headline wie eine Fussnote, 21px wie eine zweite Ueberschrift, 18px noch einen Tick zu viel (Till, 11.08.). 17px sind der Stand. Nebenwirkung, die dabei sichtbar wurde: je hoeher der Textblock, desto weiter rutscht die Headline im Raster nach oben. Textgroesse ist hier also nicht nur Textgroesse, sie verschiebt die ganze Sektion. */ .ed__body p{max-width:44ch;font-family:var(--font-body);color:var(--text); font-size:clamp(1rem,1.18vw,1.08rem);line-height:1.64} /* Bei der gespiegelten Fassung haengt der Fliesstext unter einer rechts- buendigen Headline. Steht er dann auch noch tief in seiner Rasterzeile, wirkt er abgehaengt: oben rechts die Headline, unten links ein loser Block, dazwischen ein Loch (Till, 11.08.). Er rueckt deshalb ueber die Zeilengrenze nach oben und bildet mit Kicker und Headline eine Einheit auf der linken Seite. Rechtsbuendiger Fliesstext waere die andere Loesung und ist bewusst verworfen: Flattersatz von rechts zwingt das Auge bei jeder Zeile zum Suchen. */ /* Kein Versatz mehr. Der Weg dahin, damit ihn niemand rueckgaengig macht: erst hing der Block ohne Versatz zu tief und wirkte abgehaengt, dann zog ihn ein Versatz von -29px hoch (gut), dann wuchs der Fliesstext und derselbe Versatz war ploetzlich zu eng. Am Ende zaehlt nur der gemessene Abstand zwischen Headline und Textblock, und der liegt in der Sektion, die sitzt, bei 66px. Die reine Rasterposition trifft genau diesen Wert. */ .ed-split--rechts .ed__body{align-self:start} /* Der Prototyp hatte je Baustein genau EINEN Absatz, deshalb fiel nie auf, dass mehrere Absaetze ohne Abstand aneinanderkleben. Auf echten Seiten stehen dort drei bis vier. */ .ed__body p+p{margin-top:1.05rem} /* Der Lead bekommt KEINE eigene Groesse mehr. Er hob sich sonst wie eine zweite Ueberschrift ab, und eine Ueberschrift hat die Sektion schon (Till, 11.08.). Er unterscheidet sich nur noch durch die satte Textfarbe. */ .ed__body .lead{color:var(--text-strong)} .ed--auf-dunkel .ed__body .lead{color:#F6F0E6} /* Der Textblock rueckt nach rechts, die Zeilen bleiben aber linksbuendig. Rechtsbuendiger Fliesstext zwingt das Auge bei jeder Zeile zum Suchen. */ .ed-split--rechts .ed__body p{margin-left:auto} /* Alles andere im Textstreifen muss denselben Schub mitmachen. Sonst beginnt der Absatz 40px weiter rechts als Zeitstrahl und Knoepfe darunter, und die linke Kante der Spalte franst aus (Startseite, Umbau-Sektion). */ /* font-family muss hier mit gesetzt werden, auch wenn die Kinder ihre eigene Schrift mitbringen: ch misst in der Schrift des Elements selbst, und in der Kopfschrift ist 44ch 29px schmaler als im Fliesstext. Ohne diese Zeile stehen Zeitstrahl und Knoepfe genau um diesen Betrag zu weit rechts. */ .ed-split--rechts .ed__body .timeline, .ed-split--rechts .ed__body .hero-ctas{max-width:44ch;margin-left:auto; font-family:var(--font-body)} .ed__body .btn,.ed__body .btn-ghost{margin-top:1.5rem} /* Stehen mehrere Knoepfe in einer .hero-ctas-Reihe, darf der Einzelabstand von oben NICHT dazukommen: er addiert sich auf den Reihenabstand und reisst die Knoepfe im schmalen Textstreifen weit auseinander (Startseite, Umbau-Sektion: Instagram oben, TikTok 135px darunter). Die Reihe bringt ihren Abstand mit. */ .ed__body .hero-ctas{margin-top:1.6rem;gap:.8rem} .ed__body .hero-ctas .btn,.ed__body .hero-ctas .btn-ghost{margin-top:0} /* Der Zeitstrahl steht auf der Startseite im Textstreifen, nicht mehr in einer eigenen Spalte. Ohne eigenen Abstand klebt er am Lead. */ .ed__body .timeline{margin-top:1.8rem} /* ── Farblogik der Headlines ──────────────────────────────────────────────── Auf dunklem Grund: Off-White mit einem Akzentwort in der hellen Signalstufe. Auf hellem Grund: die ganze Zeile in der satten Signalfarbe. Getestet und wieder verworfen wurde die streng durchgezogene Variante (ueberall Grundfarbe plus ein Akzentwort). Sie ist auf dem Papier konsistenter, wirkt ueber einem Foto aber unruhig, weil der Farbwechsel mitten in der Zeile auf die falsche Bildhaelfte fallen kann. */ /* Derselbe Schein wie auf hellem Grund, nur spiegelbildlich in Dunkel. Er wird hier genauso gebraucht: das Akzentwort ist hellgruen und liegt auf dem Foto, an hellen Bildstellen (Himmel, Hauswand, Anhaenger) geht es sonst unter. Weisse Schrift traegt sich noch selbst, farbige nicht. */ .ed--auf-dunkel.ed-split .ed__head h2, .ed--auf-dunkel.ed-stack .ed__head h2{ color:#FDF8F0; text-shadow: 0 0 14px rgba(28,24,20,.72), 0 0 34px rgba(28,24,20,.5), 0 3px 46px rgba(28,24,20,.38)} /* Das Akzentwort bekommt den kraeftigeren Schein: Hellgruen hat gegen ein Foto weniger Reserve als Off-White. */ .ed--auf-dunkel.ed-split .ed__head h2 .ac, .ed--auf-dunkel.ed-stack .ed__head h2 .ac{ color:var(--signal-hell); text-shadow: 0 0 12px rgba(28,24,20,.9), 0 0 30px rgba(28,24,20,.68), 0 3px 46px rgba(28,24,20,.45)} /* Der Kicker laeuft auf Bildsektionen in Off-White statt in der Signalfarbe. Seit die aufgehellte Stufe gedaempft ist (Lu: die helle war zu hell), hat sie in Kleinschrift auf einem Foto zu wenig Reserve. Die Signalfarbe bleibt der Headline vorbehalten, der Strich vor dem Kicker traegt sie weiter. */ .ed--auf-dunkel .ed__kicker{color:rgba(253,248,240,.88); text-shadow:0 0 10px rgba(28,24,20,.92),0 0 22px rgba(28,24,20,.7)} .ed--auf-dunkel .ed__kicker::before{background:var(--signal-hell)} .ed--auf-dunkel .ed__body p{color:rgba(246,240,230,.9)} .ed--auf-dunkel .ed__body .btn-ghost{border-color:rgba(253,248,240,.4);color:#FDF8F0} /* Auf dunklem Grund traegt der satte Signalton nicht, er verschwindet im Braun. Dort laeuft die helle Stufe, sonst steht die halbe Headline im Dunkeln. */ .section--dark .ed h2,.ed--dunkel h2{color:#FDF8F0} .section--dark .ed h2 .ac,.ed--dunkel h2 .ac{color:var(--signal-hell)} .section--dark .ed__kicker,.ed--dunkel .ed__kicker{color:var(--signal-hell)} .section--dark .ed__body p,.ed--dunkel .ed__body p{color:rgba(246,240,230,.9)} /* ── Handy ────────────────────────────────────────────────────────────────── Das Raster klappt NICHT einfach zusammen. Das Bild bleibt randabfallend, die Headline rutscht mit einem kleinen Versatz unter die Bildkante statt voll zu ueberlappen. Volle Ueberlappung auf 390px ergibt genau die matschige Mobilansicht, die wir bei der Konkurrenz gesehen haben. */ @media(max-width:820px){ .ed{row-gap:0;align-items:start} .ed .ed__media{grid-column:voll-start / voll-ende;grid-row:1} /* Kein negativer Versatz auf dem Handy: er zieht den Kicker zurueck aufs Bild, wo er mit der Bildunterschrift kollidiert. Der Effekt bringt auf 390px ohnehin nichts, die Kante allein traegt hier. */ .ed .ed__head{grid-column:inhalt-start / inhalt-ende;grid-row:2; padding-top:1.5rem;z-index:2;text-align:left} .ed .ed__body{grid-column:inhalt-start / inhalt-ende;grid-row:3; margin-top:1rem} .ed-split--rechts .ed__head,.ed-split--rechts .ed__body p{text-align:left} .ed-split--rechts .ed__body p{margin-left:0} .ed-split--rechts .ed__kicker{flex-direction:row} .ed-quiet .ed__head,.ed-quiet .ed__body, .ed-quiet--links .ed__head,.ed-quiet--links .ed__body{ grid-column:inhalt-start / inhalt-ende} /* --breit gehoerte hier von Anfang an dazu und fehlte. Zusammen mit der min-height des Stacks war das der Grund fuer den Ueberlauf. */ .ed__media--hoch,.ed__media--quer,.ed__media--quadrat, .ed__media--kino,.ed__media--breit{aspect-ratio:4/5} .ed-stack .ed__media{min-height:0} /* Unter der Bildkante steht die Headline auf ruhigem Grund, dort gilt wieder die normale Farbe statt der Signalfarbe fuer Ueberlappung. */ .ed-split .ed__head h2,.ed-stack .ed__head h2{color:var(--text-strong);text-shadow:none} .ed-split .ed__head h2 .ac,.ed-stack .ed__head h2 .ac{color:var(--signal)} .ed-stack .ed__body{padding-bottom:0} } /* ── Headline-Groesse an den Rest der Seite angleichen ───────────────────── Die Editorial-Spalte ist breiter als ein normaler Sektionskopf (1093px statt 992px), und weil die Headline per Container-Query mitwaechst, lief sie in die 6rem-Deckelung: 96px hier gegen 91px im Rest der Seite. Auf derselben Startseite faellt das als Ausreisser auf (Till, 11.08.: "ist die groesser als die anderen?"). Der Deckel liegt deshalb genau auf dem Wert des normalen Sektionskopfs. Schmalere Editorial-Spalten bleiben kleiner, das ist die Mechanik und gewollt. */ .ed .ed__head .h-section{font-size:clamp(2.1rem,9.2cqi,5.7rem)} /* ── Sektionsabstaende ────────────────────────────────────────────────────── Grosszuegig, damit die Bausteine als eigene Kapitel lesbar bleiben. */ /* ══ ed-drei · Drei bebilderte Kurzblöcke ══════════════════════════════════ Gebaut am 11.08.2026 fuer die fuenf Anlass-Seiten, nachdem Till die erste Fassung verworfen hat: "die Ueberschrift ist viel zu lang fuer den Tiefen- effekt", "es sollte mit mehr Bildern gearbeitet werden", "zu viel Text schreckt ab, eine Seite muss mit dem Auge in Sekunden gescannt werden". Gemessen an der Referenz bittr-bar.de/service/hochzeiten: die hat mit 817 Woertern MEHR Text als unsere Hochzeitsseite mit 642, wirkt aber leichter. Der Unterschied ist die Portionierung. Dort liegt der laengste zusammen- haengende Block bei rund 45 Woertern in einer von drei schmalen Spalten, bei uns bei rund 170 in einer breiten. Dazu 7 grosse Bilder gegen 2. Deshalb dieser Baustein und nicht "Text kuerzen": ein Gedanke pro Spalte, je ein Bild, je hoechstens rund 30 Woerter. Die Regel steht hier und nicht im Markup, damit sie auf allen fuenf Seiten dieselbe bleibt. Versatz: die mittlere Spalte sitzt tiefer. Das nimmt der Reihe die Tabellen- Anmutung und ist der Grund, warum das Ganze als Komposition liest statt als drei Kaesten. Ab 900px abwaerts faellt er weg, sonst entstehen Luecken. */ .ed-drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.4rem,3vw,2.8rem);margin-top:clamp(2.6rem,5vw,4.4rem)} .ed-drei__feld{display:flex;flex-direction:column} .ed-drei__feld:nth-child(2){margin-top:clamp(1.6rem,4vw,3.6rem)} /* Bild: 3D-Tiefe wie bei den Kit-Karten, damit die Seite nicht flach wird (web-design-standard, Regel Karten-Tiefe). Der Hub beim Zeigen ist dezent, die Flaeche ist kein Button. */ .ed-drei__bild{position:relative;overflow:hidden;isolation:isolate; aspect-ratio:4/5;border-radius:var(--radius-card); box-shadow:0 2px 4px rgba(var(--shadow-rgb),.06), 0 22px 44px -22px rgba(var(--shadow-rgb),.34); transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s cubic-bezier(.2,.7,.2,1)} .ed-drei__feld:hover .ed-drei__bild{transform:translateY(-6px); box-shadow:0 2px 4px rgba(var(--shadow-rgb),.06), 0 40px 70px -26px rgba(var(--shadow-rgb),.46)} .ed-drei__bild img{width:100%;height:100%;object-fit:cover;display:block} /* Visualisierungen bleiben als solche erkennbar, gleiche Logik wie ed__media. */ .ed-drei__bild--visual img{filter:saturate(.9) contrast(1.02)} .ed-drei__titel{margin:clamp(1.1rem,2vw,1.5rem) 0 .5rem; font-family:var(--font-display);font-weight:400; font-size:clamp(1.3rem,1.9vw,1.75rem);line-height:1.15;color:var(--text-strong)} /* Bewusst schmal gehalten: laengere Zeilen laden zum Lesen ein, hier soll ueberflogen werden. 34ch entspricht rund 30 Woertern in drei Zeilen. */ .ed-drei__text{margin:0;max-width:34ch;font-size:.97rem;line-height:1.62; color:var(--text-mute)} .ed--auf-dunkel .ed-drei__titel{color:var(--on-dark)} .ed--auf-dunkel .ed-drei__text{color:var(--on-dark-mute)} @media(max-width:900px){ .ed-drei{grid-template-columns:1fr;gap:2.2rem} .ed-drei__feld:nth-child(2){margin-top:0} .ed-drei__bild{aspect-ratio:16/10} .ed-drei__text{max-width:none} } /* ══ ed-saeulen · Drei Zusagen nebeneinander, ohne Bild ════════════════════ Fuer die Absicherungs-Sektion (11.08.2026): drei Gruende, warum man sich keine Sorgen machen muss. Bewusst ohne Bild, es geht um Zusagen, nicht um Motive, und die Seite hat direkt darueber schon eine Bildreihe. Warum nicht einfach .steps aus site.css: dort tragen die Spalten Nummern. Eine Nummer behauptet eine Reihenfolge. Diese drei Punkte gelten gleich- zeitig, die Preis-Sektion darunter dagegen ist eine echte Abfolge und behaelt deshalb .steps. Der Unterschied ist inhaltlich, nicht dekorativ. Der Haarstrich oben ersetzt die Nummer als Spaltentrenner. Auf dunklem Grund liegt er heller, sonst verschwindet er. */ .ed-saeulen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.6rem,3.4vw,3.2rem);margin-top:clamp(2.4rem,4.5vw,3.8rem)} .ed-saeule{padding-top:1.5rem;border-top:2px solid var(--line)} .ed-saeule h3{margin:0;font-family:var(--font-head);font-weight:400; font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.2;color:var(--text-strong)} .ed-saeule p{margin:.7rem 0 0;font-size:.97rem;line-height:1.68;color:var(--text)} .section--dark .ed-saeule{border-top-color:rgba(242,233,220,.28)} .section--dark .ed-saeule h3{color:var(--on-dark)} .section--dark .ed-saeule p{color:var(--on-dark-mute)} @media(max-width:860px){ .ed-saeulen{grid-template-columns:1fr;gap:1.8rem} } /* ══ section--ruhe · dezente Flaeche statt harter dunkler Sektion ══════════ Till, 12.08.2026: die dunkle Absicherungs-Sektion mitten in der hellen Hochzeits-Seite war ihm zu stark. Vorbild fuer das PRINZIP (nicht fuer den Look) ist bittr-bar.de: dort liegt eine leicht getoente Flaeche hinter dem Block, aber die Sektion hat keine sichtbare Kante. Genau das macht diese Klasse: die Tonflaeche laeuft oben und unten in den Sand aus, statt an einer Kante zu enden. Deshalb ein linearer Verlauf gegen transparent und keine Vollflaeche. Wichtig: rund um eine .section--ruhe gehoert KEINE .divline, ein Haarstrich waere wieder die Kante, die hier bewusst fehlt. Der eigene Flair statt Kopie: ein weicher Sandgold-Schimmer aus der linken Blattmitte (die Marken-Zweitfarbe, kein Grau) und der Haarstrich ueber den drei Zusagen in der Signalfarbe Glut. So bleibt der Block ruhig, traegt aber sichtbar Vamora-Farbe statt nur einen helleren Beige-Kasten. Text bleibt der normale dunkle Fliesstext auf hellem Grund, es wird nichts auf on-dark umgeschaltet. Ton-Korrektur am 12.08.2026 (Till: "ein bisschen zu pink"): der Sandgold- Schimmer lag auf 30 Prozent und kippte damit ins Rosige. Jetzt 12 Prozent, und die Grundflaeche liegt auf einem neutraleren Beige (238,230,214 statt 244,233,217, also weniger Rot-Anteil bei gleicher Tiefe). Der Schimmer ist noch da, er faellt nur nicht mehr als Farbe auf. */ .section--ruhe{ position:relative; background: radial-gradient(78% 62% at 14% 46%, rgba(var(--blush-rgb),.12) 0%, rgba(var(--blush-rgb),0) 72%), linear-gradient(180deg, rgba(238,230,214,0) 0%, rgba(238,230,214,1) 16%, rgba(238,230,214,1) 84%, rgba(238,230,214,0) 100%); } /* Etwas mehr Luft als eine normale Sektion: die Flaeche braucht oben und unten Raum zum Ausblenden, sonst faellt der Verlauf in den Text. */ .section--ruhe{padding:clamp(88px,11vw,144px) 0} .section--ruhe .ed-saeule{border-top-color:var(--signal)} /* ══ ed-nachsatz · Entwarnung unter einer Reihe ════════════════════════════ 12.08.2026: die Zusage "der Abend endet nicht am Kontingent" ist kein vierter Leistungspunkt, sie beantwortet eine Sorge. Als vierte Spalte haette sie das Raster gesprengt und wie eine Fussnote gewirkt. Deshalb: eine eigene Zeile unter der Reihe, mit einem Glut-Strich links als Marker. Der Strich macht sie zum Zitat-Rang, ohne eine Box zu bauen. Schriftgroesse GLEICH wie der Spaltentext (.94rem, siehe .step p in site.css), nicht groesser. Erste Fassung lief auf Lead-Groesse und war damit der groesste Fliesstext der Sektion, obwohl sie der Nachtrag ist. Der Strich reicht als Auszeichnung, die Groesse muss es nicht auch noch machen. Grau wird sie trotzdem nicht: als Kleingedrucktes war der Absatz an dieser Stelle vorher schon einmal draussen. */ .ed-nachsatz{margin:clamp(2.6rem,5vw,4.2rem) 0 0;max-width:66ch; padding-left:clamp(1rem,1.8vw,1.6rem);border-left:2px solid var(--signal); font-size:.94rem;line-height:1.7;color:var(--text)} @media(max-width:860px){ .ed-nachsatz{margin-top:2.2rem} } /* Ein .ed-zwischenkopf (zweites Kapitel innerhalb einer Sektion) stand hier kurz am 12.08.2026, als Absicherung und Preis noch zwei Reihen unter einer Headline waren. Till wollte stattdessen EINE Reihe, damit ist die Klasse ersatzlos entfallen. Nicht wieder einfuehren, ohne dass es dafuer eine zweite Reihe gibt. */ .ed-sektion{padding:clamp(4rem,9vw,8rem) 0} .ed-sektion--eng{padding:clamp(2.4rem,5vw,4rem) 0}