/* Theme Name: Dani Theme URI: https://dani.silvanmundorf.de Template: generatepress Author: Silvan Mundorf Description: Child-Theme zu GeneratePress fuer Dani, freie Rednerin im Raum Duesseldorf. Inhalte werden ueber ACF-Felder gepflegt. Version: 1.1.0 Requires at least: 6.0 Requires PHP: 8.0 License: GPL-2.0-or-later Text Domain: dani */ /* --------------------------------------------------------------- 1a. Schriften Literata, selbst gehostet. Lizenz: SIL Open Font License, siehe assets/fonts/OFL.txt Variable Schrift: eine Datei deckt die Staerken 400 bis 900 ab, leichter kann Literata nicht. Die Achse opsz stellt die Formen auf den Schriftgrad ein, grosse Ueberschriften bekommen dadurch feinere Serifen und engere Abstaende als der Fliesstext. Das macht der Browser von allein, solange font-optical-sizing nicht abgeschaltet wird. Die Dateien mit -ext laedt er nur nach, wenn ein Zeichen ausserhalb von Latin-1 vorkommt. --------------------------------------------------------------- */ @font-face { font-family: "Literata"; src: url("assets/fonts/Literata-Variable.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Literata"; src: url("assets/fonts/Literata-Variable-ext.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Literata"; src: url("assets/fonts/Literata-Italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Literata"; src: url("assets/fonts/Literata-Italic-ext.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* --------------------------------------------------------------- 1. Tokens --------------------------------------------------------------- */ :root { /* Farben Grundflaeche und Akzent hat Daniela vorgegeben: #f9f6f0 als warmes Papier, #3f7a5a als Eukalyptusgruen. Die uebrigen Werte folgen daraus. Das Papier ist zweimal heller geworden: am 22.09.2026 von Danielas #f9f6f0 auf #fcfaf7 und am 23.09.2026 auf #fdfcfa, je gut zur Haelfte Richtung Weiss. Der warme Stich bleibt (R 253, G 252, B 250), die Helligkeit steigt von Y 95,8 auf 97,4 und der Abstand zu Stein und Honig damit auf das 1,18-fache - die getoenten Kaesten treten etwas deutlicher hervor. Damit war --papier als SCHRIFTFARBE nicht mehr brauchbar. Sie stand auf Fotos, auf Gruen und in der Fusszeile, und je weisser das Papier wurde, desto kaelter stand sie neben der Wortmarke - die ist ein PNG und traegt fest Danielas #f9f6f0. Genau dieser Wert heisst jetzt --creme und traegt alle Schrift auf dunklem Grund. Papier ist die Flaeche, Creme die Schrift; sie waren dasselbe und sind es nicht mehr. Creme auf Eukalyptus steht bei 4,7:1, auf der tiefen Variante bei 6,5:1. Stein und Linie haben einen warmen Stich bekommen: kuehle Grauwerte auf warmem Papier lesen sich schmutzig, nicht ruhig. Tief und hell sind kein zweiter Akzent, sondern derselbe Ton dunkler und heller. Tief traegt weisse Schrift (7,0:1), hell traegt die tiefe Variante als Schrift (5,6:1) — beides ueber der Anforderung von 4,5:1. Das Gruen selbst steht auf Papier bei 4,9:1 und darf deshalb auch Linktext sein, nicht nur Flaeche. Das Gelb (23.09.2026) ist keine sechste Richtung, sondern die helle, gesaettigte Seite der Farben, die schon da sind: Papier, Stein, Linie, Grau und Messing liegen alle im Buntton 36 bis 40 Grad, das Honiggelb bei 43. Es ist das, was vom Messing uebrig bleibt, wenn man es aufhellt - verwandt, nicht neu. Es traegt seit dem 23.09.2026 aber KEINE Flaeche mehr. Als Grund des Videokastens war es zu praesent: eine ganze Bandbreite in der saettigsten Farbe der Palette zieht mehr Aufmerksamkeit auf sich als das Video darin. Der Kasten steht wieder auf --stein, das Gelb ist der Markierstift geworden - ein paar Quadratzentimeter hinter einzelnen Worten, dort wo Dani im Text ein setzt. Eine gesaettigte Farbe traegt eine Markierung besser als eine Flaeche: sie soll ja auffallen. Der zweite Stift markiert die Zitate und die Telefonnummer. Sein Ton ist zweimal gewandert: vom gelbgruenen --sellerie (#a9c96a, 23.09.2026) zum duenn aufgetragenen Logo-Gruen (24.09.2026) und noch am selben Tag zum hellen, gesaettigten #76e3a2 - auf Silvans Wunsch soll das Zitat Signalwirkung haben. Es ist derselbe Buntton wie das Logo (144 gegen 147 Grad), aber doppelt so gesaettigt und doppelt so hell: aus S 32 / L 36 wird S 66 / L 68. Genau das unterscheidet einen Textmarker von einem Anstrich - dieselbe Farbe, nur leuchtend. Das duenne Logo-Gruen davor war zwar heller (#d3dfd7), aber eben blass; es fiel nicht auf, sondern verschwand. Deckend ist er trotzdem nicht: 0,60 und 0,28 fuer die beiden Zuege (--stift-deck). Bei voller Deckung waere es eine Flaeche mit Schrift darauf, also ein Kasten - und Kaesten gibt es hier nur als ganzbreite Baender. Unter Tinte: Gelb bei 12,3:1, das Gruen bei 10,5:1 auf Papier an seiner kraeftigsten Stelle, dort wo beide Zuege uebereinander liegen (ein Zug allein 11,0:1). Auf Stein, wo die Telefonnummer steht, 10,0:1 und 10,3:1. Ein Stift, der zum Papier hin ausduennt, wird nur heller und damit kontrastreicher. Wer einen der Toene dunkler stellt oder die Deckung hochsetzt, rechnet gegen --tinte nach. */ --tinte: #1f2a2d; /* Fliesstext und Ueberschriften */ --tinte-weich: #55504a; /* zweitrangiger Text, warm wie der Rest */ --grau: #6e6a62; /* Beschriftungen, Hinweise */ --papier: #fdfcfa; /* Grundflaeche */ --creme: #f9f6f0; /* Schrift auf Foto, Gruen, dunklem Grund */ --stein: #efeae0; /* ruhige Flaechen, Abschnitte */ --linie: #dfd8ca; /* Trennlinien */ --eukalyptus: #3f7a5a; /* Akzent, Unterstriche, Links */ --eukalyptus-tief: #33624a; /* Akzent dunkel, Buttons, Zitatband */ --eukalyptus-hell: #e3e7de; /* Flaechen im Akzentton */ --messing: #b99c6b; /* sparsamer Zweitakzent */ --honig: #faeac0; /* Markierstift: im Fliesstext */ --stift-ton: 118, 227, 162; /* Markierstift: Zitate und Telefonnummer. Logo-Gruen, aufgehellt und gesaettigt */ /* Farbvariablen von GeneratePress. Der Parent faerbt damit alles, was wir nicht ausdruecklich gestalten. Seine Vorgaben sind ein Blau (#1e73be) und kuehle Grauwerte - die tauchen sonst an Stellen auf, an die man nicht denkt. Hier liegen sie einmal auf unserer Palette; das Kind laedt nach dem Parent und gewinnt bei gleicher Spezifitaet. */ --contrast: var(--tinte); --contrast-2: var(--tinte-weich); --contrast-3: var(--grau); --base: var(--stein); --base-2: var(--papier); --base-3: var(--papier); --accent: var(--eukalyptus-tief); /* Schrift Serife traegt Ueberschriften, Slogan und Zitate. Der Fliesstext laeuft in der Sans: laengere Absaetze in der Serife lesen sich wie ein Schriftstueck, und genau das soll die Seite nicht sein. */ --serif: "Literata", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Auszeichnung: nur Wortmarke und die Schaltflaeche im Markenkopf. Niemals fuer Fliesstext - Anton ist eine Plakatschrift. */ --display: "Anton", "Arial Narrow", Impact, sans-serif; /* Handschrift: ausschliesslich die Zitatkarten im Text. */ --schreib: "Caveat", "Segoe Script", "Bradley Hand", cursive; /* Masse */ --breite: 1180px; --breite-text: 34rem; --rand: 1.5rem; /* Rundungen */ --rundung: 14px; /* Kacheln, Bilder, Flaechen */ --rundung-klein: 8px; /* Buttons, Eingabefelder */ --raum-xs: 0.5rem; --raum-s: 1rem; --raum-m: 2rem; --raum-l: 4rem; --raum-xl: 6.5rem; } /* Anton, dieselbe Schrift wie die Wortmarke. Lizenz: SIL Open Font License, siehe assets/fonts/OFL-Anton.txt Nur fuer die Schaltflaeche im Kopfbereich der Startseite gedacht, deshalb ein Subset auf Latein und Umlaute: 14 kB statt 167. Der Browser laedt die Datei ohnehin nur dort, wo eine Regel sie tatsaechlich verlangt. */ /* Caveat, echte Handschrift. Lizenz: SIL Open Font License, siehe assets/fonts/OFL-Caveat.txt Subset auf Latein, Umlaute und Guillemets: 200 Zeichen statt der ganzen Schrift. Seit dem 23.09.2026 die VARIABLE Fassung (67 kB statt 46), weil die Seite jetzt zwei Schnitte braucht: 600 fuer Zitate und Namenszug, 400 fuer den geschriebenen Gruss. Zwei feste Schnitte waeren zusammen 92 kB gewesen, ein zweiter Schnitt kostet so also 21 kB statt 46. */ @font-face { font-family: "Caveat"; src: url("assets/fonts/Caveat-Subset-Variabel.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; } @font-face { font-family: "Anton"; src: url("assets/fonts/Anton-Subset.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* --------------------------------------------------------------- 2. Grundlagen --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; background: var(--papier); color: var(--tinte); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.75; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--eukalyptus-tief); text-decoration-thickness: 1px; text-underline-offset: 0.18em; } a:hover { color: var(--tinte); } :focus-visible { outline: 2px solid var(--eukalyptus); outline-offset: 3px; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.2; letter-spacing: 0; margin: 0 0 var(--raum-s); text-wrap: balance; } /* Kein leichterer Schnitt fuer grosse Ueberschriften: Haarstriche in der Serife lesen als Kanzlei. Literata traegt den Regular auch gross. */ strong, b { font-weight: 600; } /* Auszeichnung der Abschnittsueberschriften Ein kurzer Strich unter der Zeile. Er greift auf, was die Seite schon an zwei Stellen macht: den Unterstrich in der Navigation und den Ring an den Ablauf-Blasen, beide im selben Ton. Messing waere waermer, ist im Projekt aber als sparsamer Zweitakzent gesetzt - unter jeder Ueberschrift waere es nicht mehr sparsam. Die h1 bekommt den Strich nur im abschnitt__kopf, also auf Kontakt- und Rechtstextseiten, wo sie die Seitenueberschrift traegt. Die Slogans im Kopfbild sind auch h1, stehen aber auf dem Foto und brauchen keine Auszeichnung. Bewusst eine ausgeschriebene Liste statt h2 pauschal: die Ueberschriften in der Fusszeile haben ihre eigene Gestaltung, und Ausgaben von Plugins sollen nichts davon abbekommen. Neue eigene Abschnitte hier eintragen. */ .abschnitt__kopf h1::after, .abschnitt__kopf h2::after, .seitenkopf-schmal__titel::after, .duo__inhalt h1::after, .duo__inhalt h2::after, .ablauf__kopf::after, .faq__kopf::after, .aufruf h2::after, .wege__kopf::after { content: ""; display: block; width: 2.75rem; height: 2px; margin-top: var(--raum-s); background: var(--eukalyptus); } /* text-align zentriert nur den Inhalt eines Blocks, nicht den Block selbst - der Strich braucht dafuer eigene Aussenabstaende. */ .abschnitt__kopf--mitte h1::after, .abschnitt__kopf--mitte h2::after, .seitenkopf-schmal__titel::after, .ablauf__kopf::after, .faq__kopf::after, .aufruf h2::after { margin-inline: auto; } h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); } /* Die H1 im Duo-Abschnitt ("Hallo, ich bin Daniela." auf Ueber mich) war am 25.09.2026 einen Stand lang kleiner, damit sie in eine Zeile passt. Daniela hat das noch am selben Tag zurueckgenommen: zwei Zeilen sind ihr lieber. Sie traegt also wieder den gewoehnlichen Grad. Gemessen, falls die Frage wiederkommt: der Satz ist in Literata Regular 10,68 em breit. Eine Zeile braucht in der 34-rem-Spalte hoechstens 3,18 rem, auf einem 360-px-Telefon 1,89 rem. */ h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); } h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); } p { margin: 0 0 1.25em; } p:last-child { margin-bottom: 0; } blockquote { margin: 0; } .container { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); } /* Die Lesespalte ist breiter als --breite-text. Die Variable traegt auch die Textspalte im Duo-Abschnitt und den Abschnittskopf - dort steht wenig Text neben einem Bild, 34rem sind richtig. Ein durchlaufender Brief ueber zehn Absaetze wirkt darin wie ein schmales Band, weil ringsum die ganze Seitenbreite offen liegt. 38rem sind rund 72 Zeichen je Zeile. Viel mehr geht nicht: ab etwa 75 Zeichen findet das Auge beim Zeilenwechsel den Anfang nicht mehr zuverlaessig, und der Text liest sich muehsamer statt grosszuegiger. */ .fliesstext { max-width: 38rem; } /* Volle Containerbreite statt Lesespalte. Auf Silvans Wunsch vom 22.09.2026 fuer den Brief der Trauerfeier: die Seite soll so breit laufen wie die Startseite. Dort tragen Kacheln, Video und die Duo-Abschnitte die Breite; hier steht nur Text, und der sass in der 38-rem-Spalte als schmales Band mitten auf einer offenen Seite. 46 rem, nicht die vollen 1180 px: das ist dasselbe Mass, das die Fragenliste (.faq__liste) auf dieser und auf der Startseite hat. Die Textbloecke der Seite stehen damit auf einer Kante, und das ist es, was "gleich breit" im Blick bedeutet - nicht die Containerbreite, die auf der Startseite von Kacheln und Bildern getragen wird, nicht von Text. Voll ausgereizt waren es rund 110 Zeichen je Zeile, hier sind es 88. Immer noch mehr als die 72 der Lesespalte, deshalb etwas mehr Durchschuss: je weiter die Zeile, desto mehr Luft braucht das Auge, um den Anfang der naechsten zu finden. */ .fliesstext--voll { max-width: 46rem; margin-inline: auto; } .fliesstext--voll p { line-height: 1.8; } /* Ein Bild mitten im Brief - genau so breit wie der Text darueber und darunter. Bis zum 23.09.2026 trat es mit negativen Seitenmargen aus der 46-rem-Spalte an die Containerkante (1180 px) heraus. Auf Danielas Wunsch steht es jetzt in der Spalte: der Brief hat damit von der ersten bis zur letzten Zeile eine einzige Kante, und das Foto ist ein Absatz darin, kein Einschub. margin-inline: 0 ist dabei kein Beiwerk. Ein
bringt aus dem Browser 40 px Seitenrand mit; ohne die Zeile staende das Bild schmaler als der Text, nicht gleich breit. Wer den Ausbruch zurueckholen will, setzt hier wieder die halbe Differenz beider Masse als negative Marge an - beide Werte mit min(..., 100vw), sonst schiebt sich das Bild auf dem Telefon nach innen statt nach aussen: margin-inline: calc((min(46rem, 100vw) - min(var(--breite), 100vw)) / 2); Die Rundung ist die der Objekte (14 px). Ein Bild auf dem Grundton ist ein Objekt, kein Band - Baender laufen von Fensterkante zu Fensterkante und bleiben eckig. */ .fliesstext figure.voll { margin-block: var(--raum-l); margin-inline: 0; } .fliesstext figure.voll img { display: block; width: 100%; height: auto; border-radius: var(--rundung); } .fliesstext figure.voll figcaption { font-family: var(--sans); font-size: 0.9rem; color: var(--grau); text-align: center; margin-top: var(--raum-s); } /* Ein Bild NEBEN dem Text, 24.09.2026 fuer den Brief der Trauerfeier. Es steht an genau einer Stelle im Text, und diese Stelle bestimmt beides: auf dem Schirm laeuft der Text ab dort um das Bild herum, auf dem Telefon steht es als Absatz genau dort. Danielas Vorgabe nennt beide Faelle; mit einem umflossenen Bild sind es nicht zwei Fassungen, sondern eine Stelle und eine Regel. 18 rem Bild und 2 rem Luft bei 46 rem Spalte: daneben bleiben 26 rem Text, also rund 50 Zeichen je Zeile. Schmaler traegt kein Fliesstext mehr, schon gar kein getrennter - mit 4 rem Luft waeren es 46. Der Abstand oben (0,4 rem) haelt Bildkante und Textkante ausser Flucht - buendig sieht nach Tabelle aus. */ .fliesstext figure.neben { margin-block: var(--raum-m); margin-inline: 0; } .fliesstext figure.neben img { display: block; width: 100%; height: auto; border-radius: var(--rundung); } @media (min-width: 900px) { .fliesstext figure.neben { float: right; width: 18rem; margin: 0.4rem 0 var(--raum-m) var(--raum-m); } /* Ein Zitat laeuft nie neben dem Bild: in der Handschrift bei 2,4 rem waeren es in der schmalen Spalte drei Zeilen statt einer, und der Markierstift zoege sich als Treppe darueber. clear kostet hier fast nichts - der Text daneben ist ohnehin ungefaehr so hoch wie das Bild. */ .fliesstext blockquote { clear: right; } } /* Der Umfluss braucht einen eigenen Block, sonst ragt ein Bild, das laenger ist als der Text daneben, unten aus dem Abschnitt heraus. flow-root statt overflow: der Abschnitt soll nichts abschneiden und nichts scrollen. Die Randverschmelzung aendert sich damit - hier ohne Folgen: jeder Brief faengt mit einem

an, und p hat oben keinen Rand. */ .fliesstext { display: flow-root; } /* Hier stand bis zum 23.09.2026 ein Ausbruch der Zitatkarte aus der Lesespalte (breiter als der Text, mit negativen Seitenmargen). Er gehoerte zur Karte: eine Flaeche darf breiter sein als der Text auf ihr. Der Markierstift ist keine Flaeche, sondern Farbe hinter den Buchstaben - er kann gar nicht breiter sein als sein Satz, und eine zweite Textkante mitten im Brief waere ohne Karte nur ein Versatz. */ .fliesstext h2, .fliesstext h3 { margin-top: 2em; } .fliesstext ul, .fliesstext ol { padding-left: 1.2em; margin: 0 0 1.25em; } /* Liste mit angekreuzten Kaestchen, wie auf einem Stimmzettel. Gezeichnet, nicht getippt: ein Zeichen wie U+2612 haengt davon ab, ob die Schrift es kennt - der Systemstack tut das nicht verlaesslich, und ein Ersatzzeichen aus einer Fallback-Schrift faellt sofort auf. Im Rueckfall ist das Kaestchen ein Rahmen (::before) und der Haken sind zwei gedrehte Kanten (::after); wo Masken gehen - also ueberall ausser in sehr alten Browsern - uebernimmt die Stiftzeichnung weiter unten. Beides skaliert mit der Schriftgroesse, weil alle Masse in em stehen. Dani schreibt im Editor

    . Ohne die Klasse bleibt es eine gewoehnliche Liste - eine pauschale Regel auf jedes ul waere zu viel. */ .kreuzliste { list-style: none; padding-left: 0; margin: 0 0 1.25em; } .kreuzliste li { position: relative; padding-left: 2.1em; margin-bottom: 0.55em; } .kreuzliste li::before { content: ""; position: absolute; left: 0; top: 0.18em; width: 1.05em; height: 1.05em; border: 2px solid var(--eukalyptus); border-radius: 2px; } /* Der Haken: zwei Kanten eines Rechtecks, um 45 Grad gedreht. Die Masse sind am Kaestchen ausgerichtet, er ragt bewusst leicht darueber hinaus - handgesetzt wirkt echter als exakt eingepasst. */ .kreuzliste li::after { content: ""; position: absolute; left: 0.26em; top: 0.26em; width: 0.72em; height: 0.4em; border-left: 2px solid var(--eukalyptus); border-bottom: 2px solid var(--eukalyptus); transform: rotate(-45deg); } /* Seit dem 23.09.2026 sieht beides aus, als haette es jemand mit einem Stift gemacht - Danielas Wunsch. Die geraden Regeln darueber bleiben als Rueckfall stehen (siehe @supports): ohne Maske gaebe der Block sonst ein volles gruenes Quadrat statt eines Kaestchens. Kaestchen und Haken stecken in EINER Zeichnung, und die liegt als Maske vor der Flaeche - die Farbe kommt aus var(--eukalyptus). Damit bleibt sie da, wo alle Farben liegen, im :root-Block, statt als Farbwert in einer Datenadresse zu stehen. Die Zeichnung traegt selbst keine Farbe, nur Deckung. Handgemacht wirkt sie nicht durch Zufall, sondern durch dreierlei: die Kanten sind leicht gebogen und nicht parallel, der letzte Strich laeuft oben links am Anfang vorbei, und der Haken ist kraeftiger als das Kaestchen (2 zu 1,35) und schiesst oben rechts darueber hinaus - so, wie ein Stift beim Abhaken ausholt. Die Enden sind rund, weil eine Mine keine Ecken hinterlaesst. Alle Masse stehen weiter in em, die Zeichnung skaliert also mit der Schrift. Das Element ist groesser als das sichtbare Kaestchen (1,55 statt 1,05 em), weil der Haken oben rechts Platz braucht - deshalb sitzt es 0,1 em weiter links und hoeher als der Rahmen vorher. */ @supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) { .kreuzliste li::before { top: -0.1em; left: -0.1em; width: 1.55em; height: 1.55em; border: 0; border-radius: 0; background-color: var(--eukalyptus); --stift: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M 4.4 5.8 C 8.6 4.6 13.4 5.4 19 4.2 C 20.2 9 19 14.6 19.9 19.6 C 15 20.4 9 19 4.5 20 C 3.6 15.2 5 9.2 4.1 4.2' stroke-width='1.35'/%3E%3Cpath d='M 7 12 C 8.2 13.4 9.4 15.2 10.4 17.2 C 12.8 12.4 16.4 7.2 22 2.2' stroke-width='2'/%3E%3C/svg%3E"); -webkit-mask: var(--stift) no-repeat center / 100% 100%; mask: var(--stift) no-repeat center / 100% 100%; } /* Der Haken steckt in derselben Zeichnung. */ .kreuzliste li::after { content: none; } /* Drei gleiche Haken nebeneinander verraten den Stempel. Die Drehung wiederholt sich erst beim vierten Punkt und bleibt unter zwei Grad - sichtbar wird sie nur im Nebeneinander. */ .kreuzliste li:nth-child(3n+2)::before { transform: rotate(1.6deg); } .kreuzliste li:nth-child(3n)::before { transform: rotate(-1.3deg); } } .fliesstext li { margin-bottom: 0.4em; } /* Silbentrennung im Fliesstext Deutsch bricht ohne Trennung zackig: "Bestattungsunternehmen" oder "Kindeswillkommensfest" reissen Loecher in die rechte Kante, in der 34-rem-Spalte und auf dem Telefon erst recht. Der Browser trennt nur, weil gesetzt ist. Die Grenzen halten es zurueckhaltend: erst ab sieben Buchstaben trennen, mindestens vier davor, mindestens drei danach. Sonst haengt an jeder zweiten Zeile ein Strich. */ .fliesstext, .duo__inhalt, .faq__antwort, .aufruf__text, .wege__text, .wege__nachsatz, .kachel__text { hyphens: auto; hyphenate-limit-chars: 7 4 3; } /* Ueberschriften und Zitate nie trennen - dort ist der Trennstrich ein Stolperstein, kein Dienst. */ .fliesstext h2, .fliesstext h3, .fliesstext blockquote, .duo__inhalt h2 { hyphens: manual; } /* Verhindert, dass ein einzelnes Wort allein in der letzten Zeile steht. Browser ohne Unterstuetzung brechen wie bisher. */ p { text-wrap: pretty; } /* Und ein Wort, das auch allein nicht in die Zeile passt, bricht - ohne Trennstrich, weil es keine Trennstelle gibt. break-word greift NUR im Notfall: solange das Wort irgendwo hinpasst, bleibt es ganz. Damit steht es nicht im Widerspruch zur Regel darueber ("Ueberschriften und Zitate nie trennen") - es verhindert nur den schlechteren Fall, dass ein Wort aus dem Schirm laeuft. Gefunden am 25.09.2026 auf Impressum und Datenschutz: die Ueberschriften "Verbraucherstreitbeilegung" (357 px) und "Datenschutzerklaerung" (356 px) passten auf einem 360-px-Telefon nicht in die Textspalte (323 px). Weil #page auf diesen beiden Seiten ein schrumpfendes Flex-Element ist, wuchs nicht das Wort ueber die Spalte, sondern die GANZE SEITE auf 430 px - dieselbe Mechanik wie in dem #page-Block weiter oben, nur andersherum. */ h1, h2, h3, h4, p, li, dd, dt, figcaption, blockquote { overflow-wrap: break-word; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--tinte); color: #fff; padding: 0.75rem 1.25rem; z-index: 999; font-family: var(--sans); } .skip-link:focus { left: 0; color: #fff; } /* --------------------------------------------------------------- 3. Buttons und Aktionen --------------------------------------------------------------- */ .btn { display: inline-block; font-family: var(--sans); font-size: 0.95rem; line-height: 1; padding: 1rem 1.75rem; border: 1px solid var(--eukalyptus-tief); border-radius: var(--rundung-klein); background: var(--eukalyptus-tief); color: #fff; text-decoration: none; transition: background-color 0.18s ease, border-color 0.18s ease; } .btn:hover { background: var(--tinte); border-color: var(--tinte); color: #fff; } /* Buttons behalten ihre Schriftfarbe, egal in welchem Abschnitt sie stehen */ a.btn, a.btn:hover, a.btn:focus { color: #fff; } a.btn--linie { color: var(--eukalyptus-tief); } a.btn--linie:hover { color: #fff; } .btn--linie { background: transparent; color: var(--eukalyptus-tief); } .btn--linie:hover { background: var(--eukalyptus-tief); color: #fff; } .textlink { font-family: var(--sans); font-size: 0.95rem; color: var(--eukalyptus-tief); text-decoration: none; border-bottom: 1px solid var(--linie); padding-bottom: 2px; transition: border-color 0.18s ease; } .textlink:hover { border-color: var(--eukalyptus-tief); } /* --------------------------------------------------------------- 4. GeneratePress-Anbindung --------------------------------------------------------------- */ /* Container des Parents auf eigenen Templates aufheben, damit Abschnitte ueber die volle Breite laufen koennen. */ /* #page traegt neben "grid-container" auch "container" - dieselbe Klasse, die wir fuer unsere eigenen Abschnittscontainer benutzen. Von dort erbt es margin-inline: auto. Und weil GeneratePress den als Flex-Spalte setzt, macht eine automatische Seitenmarge aus dem Flex-Element ein schrumpfendes: seine Breite richtet sich dann nach dem breitesten Kind, nicht nach dem Fenster. Auf der Startseite faellt das nicht auf - dort ist das breiteste Kind (Kachelraster, Duo-Abschnitt) ohnehin 1180 px breit, also genau die Containerbreite. Auf der Trauerfeier steht nur Text: breitestes Kind 46 rem, und die ganze Seite schrumpfte auf 736 px, das Kopfbild eingeschlossen. Am 22.09.2026 gefunden, nachdem drei Anlaeufe an der Textbreite das Symptom nur verschoben haben. width: 100% nimmt dem Flex-Element das Schrumpfen. Die Breite steht damit fest und haengt nicht mehr am Inhalt. WACHSEN kann es trotzdem, und das ist die andere Haelfte derselben Falle: ein Flex-Element hat min-width: auto, seine Breite faellt also nie unter die Mindestbreite seines Inhalts. Ein einziges ueberlanges Wort - "Verbraucherstreitbeilegung" im Impressum - schob damit die ganze Seite auf 430 px bei 360 px Schirm. min-width steht deshalb auf 0, und zwar an #page selbst: die Regel unten greift nur auf eigenen Templates, die Rechtstexte laufen ueber das Standardtemplate. Zusammen mit dem Wortumbruch weiter oben kann die Seite jetzt in keine Richtung mehr am Inhalt haengen. */ #page { /* width gehoert hier hin und nicht in .container: GeneratePress setzt selbst `.container.grid-container { width: auto }`, und zwei Klassen schlagen eine. Genau dieses `auto` macht aus #page das schrumpfende - und wachsende - Flex-Element. Ueber die ID ist die Frage endgueltig entschieden, in beide Richtungen. */ width: 100%; min-width: 0; } .dani-seite .site.grid-container { width: 100%; max-width: var(--breite); padding: 0; margin-inline: auto; } .dani-seite .site-content.grid-container { max-width: none; padding: 0; } .dani-seite .site-content { padding: 0; display: block; } .dani-seite .content-area { width: 100%; float: none; } .dani-seite .site-main { margin: 0; padding: 0; } .dani-seite .inside-article { padding: 0; } .dani-seite .entry-content { margin: 0; } .dani-seite .entry-content > *:first-child { margin-top: 0; } .dani-seite article { border: 0; box-shadow: none; background: none; } /* Typografie des Parents ueberschreiben */ body, .entry-content { font-family: var(--sans); } .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 { font-family: var(--serif); } .main-navigation a, .main-navigation .menu-toggle, .site-info, button, input, select, textarea { font-family: var(--sans); } /* Kopfbereich */ /* Der Kopfbereich bleibt beim Scrollen oben stehen. Diese GeneratePress-Konfiguration ist nav-float-right, die Navigation liegt also im
    . Eine Regel traegt deshalb beides: Wortmarke und Menue samt Kontakt-Schaltflaeche bleiben erreichbar, ohne dass etwas nachgebaut oder per JavaScript umgehaengt werden muss. sticky, nicht fixed: so bleibt der Kopfbereich Teil des Textflusses, und der Inhalt darunter braucht keinen Ausgleich fuer die Hoehe. Keine Bewegung beim Scrollen, kein Einblenden, kein Schrumpfen - die Trennlinie unten reicht als Abgrenzung. */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--papier); border-bottom: 1px solid var(--linie); } /* Die Werkzeugleiste von WordPress liegt fuer angemeldete Nutzer fest oben. Ohne Ausgleich schoebe sich der Kopfbereich darunter. Unter 600 px scrollt die Leiste mit, dort entfaellt der Ausgleich. */ body.admin-bar .site-header { top: 32px; } @media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } } @media (max-width: 600px) { body.admin-bar .site-header { top: 0; } } /* Sprungziel des Ueberspringen-Links: ohne Ausgleich landet der Anfang des Inhalts unter dem stehenden Kopfbereich. */ #content { scroll-margin-top: 7rem; } /* Logo: Anzeigehoehe begrenzen, die Datei ist bewusst hoeher aufgeloest */ .site-header .site-logo img, .site-header .header-image { max-height: 62px; width: auto; } .site-branding .main-title { font-family: var(--serif); font-weight: 400; letter-spacing: 0.01em; } .site-branding .main-title a { color: var(--tinte); text-decoration: none; } .site-description { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--grau); } /* Navigation */ .main-navigation { background: var(--papier); } .main-navigation .main-nav ul li a { position: relative; font-family: var(--sans); font-size: 0.95rem; letter-spacing: 0.02em; color: var(--tinte-weich); padding-left: 1rem; padding-right: 1rem; } /* Der Parent faerbt den Hover mit .main-nav ul li:not([class*="current-menu-"]):hover > a und seiner Variablen --accent. Durch das :not([class*=...]) hat diese Regel eine Klasse mehr als eine schlichte :hover-Regel und gewinnt unabhaengig von der Ladereihenfolge. Wer den Hover hier aendert, muss dieselbe Selektorform benutzen - sonst bleibt der Ton des Parents stehen. */ .main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a, .main-navigation .main-nav ul li:not([class*="current-menu-"]):focus-within > a, .main-navigation .main-nav ul li[class*="current-menu-"] > a { background: transparent; color: var(--tinte); } /* Unterstrich Frueher trug ihn ein inset-Schatten an der Unterkante des Kastens - und den macht GeneratePress mit line-height 60px hoch. Der Strich sass dadurch weit unter der Schrift und las als Kastenrand, nicht als Unterstreichung. Jetzt sitzt er knapp unter der Grundlinie und waechst aus der Mitte: eine Reaktion auf den Zeiger, keine Bewegung von selbst. Die Rechnung 50% - 0,66em geht von der Zeilenhoehe des Parents aus; aendert die sich, ist der Wert nachzuziehen. */ .main-navigation .main-nav ul li > a::after { content: ""; position: absolute; left: 1rem; right: 1rem; bottom: calc(50% - 0.66em); height: 1px; background: var(--eukalyptus); transform: scaleX(0); transition: transform 0.22s ease; } .main-navigation .main-nav ul li:hover > a::after, .main-navigation .main-nav ul li:focus-within > a::after, .main-navigation .main-nav ul li[class*="current-menu-"] > a::after { transform: scaleX(1); } /* Die Kontakt-Schaltflaeche traegt ihre Hervorhebung als Flaeche. */ .main-navigation .main-nav ul li.nav-cta > a::after { content: none; } @media (prefers-reduced-motion: reduce) { .main-navigation .main-nav ul li > a::after { transition: none; } } .main-navigation .menu-toggle { color: var(--tinte); } /* Kontakt-Schaltflaeche am rechten Ende der Navigationsleiste Die Leiste ist ein Flex-Container (GeneratePress: .main-nav > ul mit display: flex), deshalb genuegt margin-left: auto, um den Punkt ans rechte Ende zu schieben. Kein Float, keine feste Position: kommt ein Menuepunkt dazu, rueckt die Schaltflaeche von allein mit. Die Flaeche ist der helle Akzentton, nicht der dunkle. Eine kraeftige Schaltflaeche neben vier stillen Textlinks liest auf einer Seite ueber Trauerfeiern als Verkauf. Erst beim Ueberfahren kippt sie auf den dunklen Ton — dann ist sie eindeutig als Schaltflaeche zu erkennen, ohne dauernd zu rufen. GeneratePress setzt den Menuepunkten line-height: 60px, daraus ergibt sich die Hoehe der Leiste. Die Schaltflaeche setzt das zurueck und baut ihre Hoehe aus Polsterung auf; das align-items: center der Leiste stellt sie dann von allein mittig. */ .main-navigation .main-nav ul li.nav-cta { margin-left: auto; } .main-navigation .main-nav ul li.nav-cta > a { line-height: 1; padding: 0.7rem 1.15rem; border-radius: var(--rundung-klein); background: var(--eukalyptus-hell); color: var(--eukalyptus-tief); font-weight: 600; transition: background-color 0.18s ease, color 0.18s ease; } .main-navigation .main-nav ul li.nav-cta:hover > a, .main-navigation .main-nav ul li.nav-cta:focus-within > a, .main-navigation .main-nav ul li.nav-cta.current-menu-item > a { background: var(--eukalyptus-tief); color: #fff; } @media (prefers-reduced-motion: reduce) { .main-navigation .main-nav ul li.nav-cta > a { transition: none; } } /* --------------------------------------------------------------- 5. Kopfbild mit Slogan --------------------------------------------------------------- */ /* Die Hoehe haengt an der Fensterhoehe, nicht an der Breite: der Slogan sitzt unten im Kopfbild und muss ohne Scrollen sichtbar sein. Die obere Grenze greift nur auf hohen Bildschirmen und verhindert dort, dass das Kopfbild zum extremen Breitband wird — je flacher der Streifen, desto mehr vom Motiv faellt weg. */ .hero-voll { position: relative; display: grid; min-height: clamp(20rem, 46vh, 34rem); isolation: isolate; } .hero-voll--gross { min-height: clamp(22rem, 68vh, 44rem); } .hero-voll__inhalt { grid-area: 1 / 1; } /* Das Bild liegt bewusst ausserhalb des Grid-Flusses. Als Grid-Element wuerde es die Zeilenhoehe bestimmen: height: 100% hat ohne feste Zeilenhoehe keinen Bezug, faellt auf auto zurueck und der Abschnitt wuerde so hoch wie das Bild. Seit das Kopfbild ungeschnitten im Verhaeltnis 3:2 kommt, waeren das ueber 900 px — der Slogan landet unter der Falz. Absolut gesetzt bestimmt allein min-height die Hoehe, und das Bild fuellt sie. */ .hero-voll__bild { position: absolute; inset: 0; } /* Beschnitten wird erst hier, nicht auf dem Server. --hero-fokus setzt der Baustein aus dem Feld "Bildausschnitt". */ .hero-voll__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--hero-fokus, 50%); } .hero-voll__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(24, 33, 36, 0.15) 0%, rgba(24, 33, 36, 0.35) 55%, rgba(24, 33, 36, 0.6) 100% ); } /* Gruen getoentes Kopfbild (Trauerfeier) Zwei Lagen, nicht eine: der Schleier im Akzentton faerbt, der Verlauf darunter traegt weiterhin die Schrift. Ein Filter auf dem Bild (sepia/hue-rotate) waere billiger zu schreiben, faerbt aber nur, ohne die Lesbarkeit unten zu sichern - und ein Filter auf dem Abschnitt wuerde die Schrift mitfaerben. 0,42 ist die Mitte zwischen "das Foto ist noch ein Foto" und "die Seite hat eine Stimmung". Darueber kippt es ins Monochrome, dann sind die Gesichter gruen. Der Wert ist die Stellschraube. */ /* KEIN z-index hier, und das ist der Punkt. Die beiden Lagen liegen in __bild, der Textblock in __inhalt. Beide Eltern sind positioniert und stehen auf z-index: auto, gemalt wird also in Dokumentreihenfolge: Bild, Schleier, Verlauf, dann der Text darueber. Genau richtig. Wer den Lagen ein z-index gibt, hebt sie aus __bild heraus in den Stapel von .marke-hero - und damit ueber den Text. Das sah am 22.09.2026 kurz so aus, als sei die Schrift nicht mehr creme; und die Schaltflaeche war nicht mehr anklickbar, weil der Verlauf die Klicks abfing. Beides derselbe Fehler. */ .hero-voll--gruen .hero-voll__bild::before, .marke-hero--gruen .marke-hero__bild::before { content: ""; position: absolute; inset: 0; background: var(--eukalyptus-tief); opacity: 0.42; mix-blend-mode: multiply; } .hero-voll__inhalt { position: relative; display: flex; align-items: flex-end; padding-block: var(--raum-l); text-align: center; } .hero-voll__inhalt > .container { width: 100%; } .hero-voll__slogan { font-weight: 400; color: #fff; font-size: clamp(2rem, 5.2vw, 3.6rem); line-height: 1.15; max-width: 22ch; margin-inline: auto; margin-bottom: 0; text-shadow: 0 1px 24px rgba(20, 28, 30, 0.45); } .hero-voll__subline { color: rgba(255, 255, 255, 0.92); font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.55; max-width: 44ch; margin: 1rem auto 0; text-shadow: 0 1px 16px rgba(20, 28, 30, 0.5); } /* Seite ohne Kopfbild: Slogan auf Papier statt auf Bild */ .hero-voll:not(:has(.hero-voll__bild)) { background: var(--stein); min-height: 0; } .hero-voll:not(:has(.hero-voll__bild)) .hero-voll__inhalt { padding-block: var(--raum-l); } .hero-voll:not(:has(.hero-voll__bild)) .hero-voll__slogan { color: var(--tinte); text-shadow: none; } .hero-voll:not(:has(.hero-voll__bild)) .hero-voll__subline { color: var(--tinte-weich); text-shadow: none; } /* Markenkopf der Startseite Nach Danielas Flyer: Wortmarke, Spruch, Qualifikationen, Schaltflaeche auf dem Foto. Der Block steht rechts, weil Daniela auf der Aufnahme links steht und das Laub die rechte Haelfte fuellt. Der Verlauf verdunkelt genau die Seite, auf der der Text liegt, und laeuft zur Bildmitte hin aus. Ohne ihn stuenden cremefarbene Buchstaben auf scharf gezeichnetem Laub - unlesbar. */ .marke-hero { position: relative; display: grid; min-height: clamp(26rem, 80vh, 46rem); isolation: isolate; /* Und der Abschnitt klemmt, was ueber seine Kante hinausragt. Das ist die weichgezeichnete Flaeche hinter dem Textblock: sie liegt bewusst 2 rem ausserhalb des Blocks (siehe .marke-hero__block::before), damit der Weichzeichner die erste Textzeile nicht anfrisst. Auf dem Telefon steht der Block aber bis an das Containerpolster heran, und --rand ist dort nur 1,15 rem - die Flaeche ragte also 14 px ueber den Schirm hinaus und machte das ganze Dokument 14 px breit. Genau das war Danielas "die Seite laesst sich nach links und rechts bewegen" vom 25.09.2026: nachgemessen bei 360 px scrollWidth 374 auf jeder Seite mit Markenkopf oder Markenband, 360 auf der Kontaktseite, die keinen hat. clip statt hidden: hidden macht aus dem Abschnitt einen Scrollcontainer, und ein Scrollcontainer im Vorfahrenpfad setzt position: sticky ausser Kraft. Hier haengt zwar nichts Klebendes drin, aber die Zeile daneben ist die Sicherung fuer Browser ohne clip - und die Reihenfolge entscheidet, welche gilt. */ overflow: hidden; overflow: clip; } .marke-hero__bild { position: absolute; inset: 0; } .marke-hero__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 35% var(--hero-fokus, 50%); /* Seit dem 23.09.2026 steht auch der Kopf heller, nicht mehr nur das Band darunter (dort 1,14, siehe weiter unten - die Regel ist spezifischer und behaelt ihren Wert). Der Filter sitzt auf dem BILD, nie auf dem Abschnitt: auf dem Abschnitt faerbte er die Schrift mit. Am 23.09.2026 von 1,10 auf 1,16 gegangen, zusammen mit dem zurueckgenommenen Verlauf unten. Nachgerechnet am gerenderten Kopf (1400x640, Bildlage 35%/10%): das Band mit der Schrift steht von Y' 57,1 auf 61,1, also 7 Prozent heller, Danielas Gesicht um denselben Betrag. Auf dem Telefon dasselbe Bild: 59,0 auf 63,3. Die Grenze setzen die Lichter, nicht der Kontrast: reinweisse Punkte im Foto gehen von 0,01 auf 0,22 Prozent (bei 1,18 waeren es 0,38), das ist der Himmel zwischen den Blaettern. Die Schrift auf der weichgezeichneten Flaeche liegt danach immer noch bei 5,3:1 im schlechtesten und 14,7:1 im mittleren Fall - gefordert sind 4,5:1. Das Band darunter behaelt seine 1,14. */ filter: brightness(1.16); } /* Der Verlauf ist dreimal zurueckgenommen worden, damit das Foto heller steht: Textseite von 0,86/0,74 ueber 0,72/0,60 und 0,58/0,46 auf 0,34/0,24, die freie Haelfte von 0,32/0,12 ueber 0,20/0,05 und 0,10/0,00 auf 0,06/0,00. Der dritte Schritt am 22.09.2026 geht nur, weil der Textblock jetzt eine eigene Flaeche mitbringt (.marke-hero__block::before). Vorher war 0,58 die Untergrenze: cremefarbene Schrift auf einem hellen Laubfleck (sRGB um 245) kam damit auf 4,6:1, knapp ueber den geforderten 4,5:1. Wer die Flaeche wieder herausnimmt, muss den Verlauf mit zurueckdrehen - sonst steht die Schrift bei 2:1. */ .marke-hero__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to left, rgba(20, 30, 25, 0.26) 0%, rgba(20, 30, 25, 0.18) 34%, rgba(20, 30, 25, 0.04) 62%, rgba(20, 30, 25, 0) 100% ); } .marke-hero__inhalt { position: relative; grid-area: 1 / 1; display: flex; align-items: center; padding-block: var(--raum-l); } .marke-hero__inhalt > .container { width: 100%; } /* Weicher Schattensaum statt harter Schlagschatten: er dunkelt nur die naechste Umgebung der Buchstaben ab und faellt nicht als Versatz auf. text-shadow vererbt, traegt also Spruch, Qualifikationen und die Schaltflaeche mit. Die Wortmarke ist ein Bild - dort dasselbe ueber drop-shadow. */ .marke-hero__block { position: relative; width: min(28rem, 100%); margin-left: auto; text-shadow: 0 1px 14px rgba(20, 30, 25, 0.55); /* isolation ist hier kein Beiwerk, sondern der Grund, warum die Flaeche unten ueberhaupt sichtbar ist. Ohne sie waere der naechste Stapel .marke-hero, und ein Kind mit z-index: -1 wird dort vor allen Elementen mit z-index: auto gemalt - also VOR dem Bild und damit unter ihm. Mit eigenem Stapel bleibt die Flaeche im Block: hinter der Schrift, vor dem Foto. */ isolation: isolate; } /* Die Flaeche hinter dem Textblock. Eine weichgezeichnete Rechteckflaeche, kein Verlauf mit harten Stops: der Weichzeichner laesst sie ohne Kante auslaufen, sie liest sich also als Schatten im Foto und nicht als Kasten. Das ist wichtig, weil die Seite nur zwei Formen kennt - ganzbreite eckige Baender und gerundete Objekte auf dem Grundton. Eine getoente Platte mitten im Bild waere weder das eine noch das andere. Der Rand liegt bewusst ausserhalb des Blocks (inset negativ): der Weichzeichner frisst rund eine Blurbreite nach innen, und die erste Textzeile soll auf voller Deckung stehen. */ .marke-hero__block::before { content: ""; position: absolute; inset: -2.5rem -2rem; z-index: -1; background: rgba(18, 28, 24, 0.5); filter: blur(30px); } .marke-hero__block .marke-hero__marke img { filter: drop-shadow(0 1px 14px rgba(20, 30, 25, 0.55)); } /* Die Wortmarke ist die H1 der Startseite. Sie steht als Bild da, der Alternativtext traegt den Namen. */ .marke-hero__marke { margin: 0 0 var(--raum-s); line-height: 1; color: var(--creme); } .marke-hero__marke img { display: block; width: 100%; max-width: 26rem; height: auto; } /* Der Spruch stand bis zum 22.09.2026 bei 0,82-0,95 rem und war neben der Wortmarke kaum zu sehen. 1,25 rem ist die Obergrenze: gesperrt und in Versalien braucht der Satz rund 18,5 em, der Block ist 28 rem breit - darueber bricht er um. */ .marke-hero__spruch { font-family: var(--sans); font-size: clamp(1rem, 2.4vw, 1.25rem); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--creme); margin: 0 0 var(--raum-m); } /* Die schlichte Fassung, 24.09.2026 auf der Trauerfeier: unter der einzeiligen Wortmarke TRAUERFEIERN steht der Name als gewoehnliche Zeile, darunter der Spruch. Die Zeile ist kleiner und leichter als der Spruch - sie sagt, wer spricht, nicht was gesagt wird. Dieselbe Sperrung wie der Spruch (0,14 em), damit die beiden als Paar stehen und nicht als zwei Einfaelle. */ .marke-hero__name { font-family: var(--sans); font-size: clamp(0.9rem, 2vw, 1.05rem); font-weight: 500; letter-spacing: 0.14em; line-height: 1.5; text-transform: uppercase; color: var(--creme); margin: 0 0 var(--raum-s); } .marke-hero__quali { list-style: none; margin: 0 0 var(--raum-m); padding: 0; font-family: var(--sans); font-size: clamp(0.95rem, 2vw, 1.05rem); line-height: 1.7; color: var(--creme); } /* Schaltflaeche im Zuschnitt der Wortmarke: dieselbe Schrift, hohl wie "ELA" und "FREIE", beim Ueberfahren gefuellt. Der Rahmen ist 2 px stark - duenner wuerde er neben der schweren Schrift verschwinden. */ a.btn--marke { font-family: var(--display); font-size: clamp(1.05rem, 2.4vw, 1.3rem); letter-spacing: 0.07em; text-transform: uppercase; padding: 0.75rem 1.5rem 0.65rem; background: transparent; border: 2px solid var(--creme); color: var(--creme); } /* Gefuellt braucht die Schaltflaeche den Schattensaum des Blocks nicht mehr - er liegt dann als dunkler Hauch um dunkle Schrift auf hellem Grund und sieht nur schmutzig aus. */ a.btn--marke:hover, a.btn--marke:focus { background: var(--creme); border-color: var(--creme); color: var(--eukalyptus-tief); text-shadow: none; } /* Flache Fassung als Abschluss unter einem Text. Niedriger, kleinere Wortmarke, keine Qualifikationen - sonst wiederholt die Unterseite den Auftakt der Startseite, statt ihn aufzunehmen. Den Spruch traegt sie seit dem 25.09.2026 doch: er steht dort, wo bis dahin die Schaltflaeche stand. Siehe dani_markenband(). */ .marke-hero--band { min-height: clamp(17rem, 44vh, 24rem); } /* Das Band steht seit dem 22.09.2026 heller als der Kopf. Bis dahin teilte es sich dessen Verlauf (0,34/0,24/0,06/0). Es traegt aber nur zwei Zeilen, keine Qualifikationen - und die Wortmarke bringt ihre eigene Absicherung mit (drop-shadow). Dazu die weichgezeichnete Flaeche hinter dem Block, auf der seit dem 25.09.2026 der Slogan steht, wo vorher die Schaltflaeche stand - dieselbe Stelle, derselbe Grund. Der Verlauf muss hier also weniger tragen als ueber dem fuenfzeiligen Textblock des Kopfes. Damit weicht es bewusst von der Regel ab, dass Kopf und Band gleich hell stehen. Auf der Startseite sind beide sichtbar; der Unterschied ist gemessen und gewollt, nicht uebersehen. */ .marke-hero--band .marke-hero__bild::after { background: linear-gradient( to left, rgba(20, 30, 25, 0.20) 0%, rgba(20, 30, 25, 0.13) 34%, rgba(20, 30, 25, 0.03) 62%, rgba(20, 30, 25, 0) 100% ); } /* Und die Aufnahme selbst eine Spur heller. Der Verlauf allein reicht hier nicht: er laeuft nach links aus, und auf dem Schirm steht Daniela links. Ueber ihrem Gesicht lag zuletzt eine Deckung von 0,03 - nachgemessen wurde es beim Zuruecknehmen des Verlaufs um 1,6 Prozent heller. Was dort dunkel wirkt, ist die Aufnahme, kein Schleier. Der Filter sitzt auf dem BILD, nicht auf dem Abschnitt. Auf dem Abschnitt faerbte er die Schrift mit - derselbe Grund, aus dem der gruene Ton der Trauerfeier eine eigene Lage ist und kein Filter. 1,14 ist die Grenze nach oben: der Himmel zwischen den Blaettern liegt schon bei sRGB 235, darueber laeuft er auf 255 und die Zeichnung im hellen Laub geht verloren. */ .marke-hero--band .marke-hero__bild img { filter: brightness(1.14); } /* Unter der Wortmarke stand bis zum 25.09.2026 die Schaltflaeche "Kontakt aufnehmen", jetzt steht dort der Slogan - siehe dani_markenband(). Damit rueckt die Zeile naeher an die Marke: eine Schaltflaeche ist ein eigenes Ding und braucht Luft, der Slogan gehoert zur Wortmarke wie auf dem Flyer. Und er ist das letzte Element im Block, also ohne Abstand nach unten - sonst stuende der Block nicht mehr mittig auf dem Band. */ .marke-hero--band .marke-hero__marke { margin-bottom: var(--raum-s); } .marke-hero--band .marke-hero__spruch { margin-bottom: 0; } .marke-hero--band .marke-hero__marke img { max-width: 22rem; } .marke-hero--band .marke-hero__inhalt { padding-block: var(--raum-m); } /* Unter 900 px wird aus dem Nebeneinander ein Uebereinander: der Block rueckt in die Mitte, und der Verlauf deckt das ganze Bild ab - sonst stuende die Schrift teils auf dem hellen Laub. */ @media (max-width: 900px) { /* Die Hoehe ist am 22.09.2026 noch einmal gestiegen, zusammen mit einem schlankeren Textblock (siehe unten). Grund: auf schmalem Schirm zeigt der Beschnitt das Foto immer in voller Hoehe - der Rahmen ist stets steiler als die 3:2 der Datei, beschnitten wird also nur seitlich. Damit sitzt Danielas Gesicht bei festem Anteil, es endet bei rund 35 Prozent der Kopfhoehe. Der Block muss darunter anfangen. Gemessen bei 360x640: vorher 525 px hoch, Block 302 px, Oberkante bei 34 Prozent - die Wortmarke lag auf ihrem Kinn. Jetzt 550 px, Block 247 px, Oberkante bei 49 Prozent. */ .marke-hero { min-height: clamp(28rem, 86vh, 38rem); } /* Quadratischer Kopf auf den Zeremonieseiten (Danielas Vorgabe vom 22.09.2026: Banner auf dem Schirm, Quadrat auf dem Telefon). aspect-ratio statt min-height, und min-height muss dafuer zurueck auf 0 - sonst gewinnt die Mindesthoehe darueber und das Quadrat kommt nie zustande. Nur die Zeremonieseiten, nicht die Startseite: dort steht Daniela im Bild. Ein Quadrat von 390 px laesst dem 247-px-Block keine 150 px Luft, und ihr Gesicht endet bei 35 Prozent der Hoehe - die Wortmarke laege wieder darauf. Die Trauerfeier zeigt eine Landschaft, die Freie Trauung soll ein Motiv ohne Menschen bekommen; dort traegt das Quadrat. */ .marke-hero--quadrat:not(.marke-hero--band) { aspect-ratio: 1 / 1; min-height: 0; } /* Das flache Band behaelt seine eigene Hoehe - ohne diese Zeile zoege die Regel darueber es auf Kopfbildhoehe auf. Am 22.09.2026 von clamp(15rem, 40vh, 20rem) heraufgesetzt. Das Band hatte dasselbe Problem wie der Kopf, nur schaerfer: sein Block steht mittig, und bei 320 px Hoehe sass die Wortmarke genau auf Danielas Gesicht - ueber ihr war der Kopf sogar angeschnitten. Gemessen bei 390 px Breite: vorher Band 320 px, Block 159 px, Oberkante bei 25 Prozent; jetzt 416 px, Oberkante bei 54 Prozent. */ .marke-hero--band { min-height: clamp(21rem, 54vh, 26rem); } /* Und der Block rutscht mit nach unten. Mittig ist auf dem breiten Band richtig - dort steht sie links, der Block rechts, die beiden kommen sich nicht ins Gehege. Untereinander tun sie es. */ .marke-hero--band .marke-hero__inhalt { align-items: flex-end; } /* Der Block rutscht nach unten statt in die Mitte. Mittig lag er auf ihrem Gesicht: das sitzt im oberen Drittel der Aufnahme, und auf schmalem Schirm fuellt der Block fast die ganze Hoehe. */ .marke-hero:not(.marke-hero--band) .marke-hero__inhalt { align-items: flex-end; /* --raum-m statt --raum-l: die 12 px gehen als freies Foto ueber den Block, nicht als Luft unter ihn. */ padding-block: var(--raum-m); } /* Schlanker Block: jede eingesparte Zeile ist Foto ueber ihm. 99+16+28+32+52+32+43 = 302 px wurden zu 84+ 8+28+16+52+16+43 = 247 px. */ .marke-hero:not(.marke-hero--band) .marke-hero__marke { margin-bottom: var(--raum-xs); } .marke-hero:not(.marke-hero--band) .marke-hero__spruch, .marke-hero:not(.marke-hero--band) .marke-hero__quali { margin-bottom: var(--raum-s); } /* 38 statt 50 Prozent: beim Beschnitt auf Handybreite faellt links so viel weg, dass sie sonst an den Rand geraet. Nur fuer Danielas Portrait, also die Startseite. Auf den Zeremonieseiten steht eine Landschaft beziehungsweise ein Motiv ohne Menschen - dort schob die Verschiebung das Motiv aus dem Bild: die Eiche der Trauerfeier sitzt rechts der Mitte und war auf dem Telefon fast ganz weg. Mittig ist dort richtig. */ .marke-hero:not(.marke-hero--quadrat) .marke-hero__bild img { object-position: 38% var(--hero-fokus, 50%); } /* Der quadratische Kopf schneidet aus einem 3:2-Foto ein Drittel der Breite weg - da entscheidet die Waagerechte, ob das Motiv drin bleibt. Mittig, nicht die 35 Prozent der Grundregel: die sind fuer Danielas Portrait gemacht, das links im Bild steht. */ .marke-hero--quadrat .marke-hero__bild img { object-position: 50% var(--hero-fokus, 50%); } /* Oben hell, damit das Gesicht nicht im Schleier verschwindet, unten kraeftig, damit die Schrift traegt. Am 22.09.2026 um rund 0,3 zurueckgenommen - die Flaeche hinter dem Textblock traegt die Schrift jetzt, der Verlauf muss es nicht mehr allein tun. */ .marke-hero__bild::after { background: linear-gradient( to bottom, rgba(20, 30, 25, 0) 0%, rgba(20, 30, 25, 0.05) 38%, rgba(20, 30, 25, 0.22) 72%, rgba(20, 30, 25, 0.30) 100% ); } /* Das Band traegt nur Wortmarke und Schaltflaeche, dort deckt der gleichmaessige Verlauf weiterhin am besten. Am 22.09.2026 um dasselbe Mass zurueckgenommen wie der Kopf darueber (0,55/0,72 minus rund 0,12), damit das Foto auf beiden gleich hell steht - auf der Startseite stehen Kopf und Band jetzt auf derselben Seite, ein Unterschied fiele dort sofort auf. */ .marke-hero--band .marke-hero__bild::after { background: linear-gradient( to bottom, rgba(20, 30, 25, 0.10) 0%, rgba(20, 30, 25, 0.20) 100% ); } .marke-hero__block { width: 100%; margin-inline: auto; text-align: center; } .marke-hero__marke img { margin-inline: auto; max-width: 17rem; } .marke-hero--band .marke-hero__marke img { max-width: 17rem; } /* Der Spruch steht auf dem Telefon unter der Wortmarke und soll deren Breite haben - Danielas Wunsch vom 23.09.2026. Vorher war er breiter: bei 1 rem und 0,14 em Sperrung misst der Satz rund 300 px, die Wortmarke steht auf 17 rem = 272 px. Er stand damit links und rechts rund 15 px ueber sie hinaus. Auf genau 272 px bringt ihn kein CSS: der Systemstack stellt je nach Geraet eine andere Schrift, und deren Versalien unterscheiden sich. Nachgemessen an den Schriftdateien braucht "DA, WENN'S DRAUF ANKOMMT." ohne Sperrung 14,94 em in Segoe UI Semibold und 15,52 em in Arial Bold, dazu 25 mal die Sperrung. Gerechnet ist deshalb auf die breiteste: 0,9 rem bei 0,12 em ergeben 267 px in Arial Bold, 258 px in Segoe UI Semibold, rund 263 px in Roboto Medium. Die Zeile bleibt auf jedem Geraet innerhalb der Wortmarke und fuellt sie zu 95 bis 98 Prozent - das sind zwei bis sieben Pixel, auf dem Schirm nicht zu sehen. Kein white-space: nowrap. Die Freie Trauung traegt hier einen langen Spruch ("Trauungen in Duesseldorf, Koeln, NRW und da, wo ihr seid."), der auf dem Telefon umbrechen MUSS - er tut es jetzt innerhalb der Wortmarkenbreite statt ueber die ganze Seite. Der kurze Spruch der Startseite braeuchte dafuer eine um mehr als 2 Prozent breitere Schrift als Arial Bold. */ .marke-hero__spruch { max-width: min(17rem, 100%); margin-inline: auto; font-size: 0.9rem; letter-spacing: 0.12em; } /* Und jetzt exakt: gleicher Anfang, gleiches Ende wie die Wortmarke (Danielas Wunsch vom 23.09.2026, nachdem die 95 bis 98 Prozent oben noch als "etwas schmaler" zu sehen waren). Die Restbreite holt text-align-last: justify, das die drei Wortabstaende der Zeile dehnt - je nach Schrift um 2 bis 5 px verteilt auf drei Luecken. Das ist font-unabhaengig exakt, waehrend jede Rechnung ueber die Schriftgroesse es nie sein kann. Kein text-align: justify dazu: braeche die Zeile doch einmal um, traefe justify auch die erste. Die Klasse setzt PHP, und nur wenn der Spruch in eine Zeile passt (hoechstens 25 Zeichen, siehe dani_hero_marke()). Die 0,105 em Zugabe sind zwei gemessene Kleinigkeiten: - Die Wortmarke ist ein PNG mit 0,39 Prozent leerem Rand je Seite, bei 272 px also 1,06 px. Ihre Schrift faengt dort an, nicht an der Bildkante. - Am Zeilenende sitzt die Sperrung des letzten Zeichens (0,12 em) plus die Seitenlage des Punktes (0,059 em im Mittel aus Segoe UI Semibold und Arial Bold), am Anfang nur die des D (0,079 em). Links heben sich beide fast auf, rechts bleiben 0,105 em uebrig. Der halbe Betrag als Verschiebung haelt die linke Kante dabei an ihrem Platz. max-width muss zurueck, sonst kappt es die Zugabe. */ .marke-hero--spruch-kurz .marke-hero__spruch { max-width: none; width: calc(min(17rem, 100%) + 0.105em); transform: translateX(0.0525em); text-align-last: justify; } } /* --------------------------------------------------------------- 6. Abschnitte --------------------------------------------------------------- */ .abschnitt { padding-block: var(--raum-xl); } /* Oben bewusst enger: die Einleitung soll am Kopfbild haengen. Unten das volle Mass - auf den Zeremonieseiten folgt direkt das Markenband, und zwischen Unterschrift und Foto braucht es denselben Abstand wie zwischen zwei Abschnitten. */ .abschnitt--schmal { padding-block: var(--raum-l) var(--raum-xl); } /* Enger als ein gewoehnlicher Abschnitt, und das mit Absicht. Anders als das Zitatband traegt diese Flaeche ein grosses Bild - das Video fuellt die volle Containerbreite im Verhaeltnis 16:9. Der Bildblock gibt der Flaeche schon genug Masse; mit --raum-xl oben und unten wuchs der Steinkasten auf ueber 900 px und stand weit ueber den Inhalt hinaus. Am 22.09.2026 von --raum-l auf --raum-m heruntergesetzt: auch 4 rem standen noch als breiter Rand um den Bildblock. Die Flaeche soll das Video fassen, nicht rahmen. Weniger geht nicht - unter 2 rem beruehrt die Ueberschrift die Bandkante. */ /* Am 23.09.2026 zurueck auf --stein. Das Honiggelb stand hier einen Tag lang und war als ganze Bandbreite zu praesent: der Kasten zog mehr Aufmerksamkeit auf sich als das Video, das er fasst. Das Gelb ist jetzt Markierstift (siehe mark weiter unten), nicht Grund. */ .abschnitt--stein { background: var(--stein); padding-block: var(--raum-m); } /* Zwei Farbflaechen stossen nie direkt aufeinander. Dass Stein und Papier sich kaum unterscheiden, ist hier kein Einwand: der Zwischenraum soll nicht zu sehen sein, der Kasten soll nur nicht auf eine zweite Kante prallen - auf Ueber mich folgt ihm das Markenband, also ein Foto. Auf der Startseite folgt ein gewoehnlicher Abschnitt, der sein Polster selbst mitbringt; dort aendert die Regel nichts. */ .abschnitt--stein + .marke-hero--band, .abschnitt--stein + .zitatband, .abschnitt--stein + .ablauf, .abschnitt--stein + .aufruf { margin-top: var(--raum-l); } .ablauf + .abschnitt--stein { padding-top: 0; } .abschnitt__kopf { max-width: var(--breite-text); margin-bottom: var(--raum-m); } .abschnitt__kopf--mitte { margin-inline: auto; text-align: center; margin-bottom: var(--raum-l); } .fliesstext--mitte { margin-inline: auto; text-align: center; } .fliesstext--mitte p { margin-inline: auto; } .mehr-link { margin-top: calc(var(--raum-m) * -1); } .abschnitt--stein .abschnitt__kopf { margin-bottom: var(--raum-m); } /* Kacheln */ /* Die Spaltenzahl setzt front-page.php aus der Anzahl der Zeremonieseiten. Fest verdrahtete drei Spalten wuerden bei zwei Kacheln eine leere Spalte stehen lassen. */ .kacheln { display: grid; grid-template-columns: repeat(var(--spalten, 3), 1fr); gap: clamp(1.5rem, 3vw, 3rem); } /* Titel, Satz und Link stehen mittig unter dem Bild. Ein zentrierter Titel ueber linksbuendigem Text darunter saehe wie ein Versehen aus, deshalb die ganze Kachel. */ .kachel { display: flex; flex-direction: column; text-align: center; } /* Der Titel steht ueber dem Bild, die Abstaende haengen deshalb an den Nachbarn statt am Bild: auf Zeigergeraeten ist das Bild das letzte sichtbare Element der Kachel, ein Aussenabstand darunter waere dort nur Leerraum. */ .kachel__bild { position: relative; display: block; overflow: hidden; border-radius: var(--rundung); } .kachel__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.45s ease; } /* Gruener Schleier beim Ueberfahren Der Schleier liegt im Bildlink und wird von dessen Rundung beschnitten - deshalb position: relative hier und overflow: hidden oben. Ausgeloest wird er von der ganzen Kachel, nicht nur vom Bild: wer irgendwo auf der Kachel steht, soll die Reaktion sehen. :focus-within nimmt die Tastatur mit. Drei Bewegungen, leicht versetzt: das Bild zieht langsam an, die Flaeche blendet auf, die Schrift kommt von unten nach. Der Versatz ist es, der den Uebergang weich macht - alle drei gleichzeitig wirkten wie ein Schalter. */ .kachel__schleier { position: absolute; inset: 0; display: grid; place-items: center; /* place-items zentriert den Textblock in der Kachel, nicht die Zeilen darin - dafuer braucht es text-align. Ohne das steht ein zweizeiliger Satz mittig als Block, aber linksbuendig gesetzt. */ text-align: center; padding: var(--raum-m); background: var(--eukalyptus); opacity: 0; transition: opacity 0.32s ease; } /* Auf dem Schleier steht der Satz zum Angebot, kein Versalienlabel mehr - gesperrte Grossbuchstaben ueber drei Zeilen liest niemand. Sans, nicht Serife: es ist Text, keine Ueberschrift. */ .kachel__schleier > span { font-family: var(--sans); font-size: clamp(1rem, 1.9vw, 1.25rem); line-height: 1.55; color: var(--creme); text-wrap: balance; transform: translateY(0.7rem); transition: transform 0.36s ease 0.06s; } /* Ohne Zeiger gibt es kein Ueberfahren. Dort bleibt der Textlink unter der Kachel stehen, sonst fehlte der Hinweis ganz. Mit Zeiger traegt ihn der Schleier, und zweimal dieselbe Aufforderung untereinander waere Unfug. Die Breite steht seit dem 22.09.2026 mit in der Bedingung. Zwei Gruende, ein technischer und ein gestalterischer: Technisch: ein schmal gezogenes Desktop-Fenster meldet weiterhin (hover: hover). Wer die Seite so prueft, sieht den Schleier - auf dem Telefon war er laengst weg. Das las sich als Fehler und war keiner, kostete aber einen Durchgang. Gestalterisch: unter 560 px steht die Kachel einspaltig ueber die volle Breite. Ein Schleier, der dann das ganze Foto zudeckt, ist eine schwere Geste fuer eine Maus, die dort ohnehin selten ist. */ @media (hover: hover) and (min-width: 561px) { .kachel__mehr { display: none; } /* Schleier und Zoom gehoeren in diesen Block, nicht in den allgemeinen Fluss: auf einem Tastgeraet loest eine Beruehrung :focus-within aus. Die Kachel bliebe nach dem Tippen gruen und das Bild vergroessert stehen - ausgeloest von einer Geste, die gar kein Ueberfahren war. */ .kachel:hover .kachel__bild img, .kachel:focus-within .kachel__bild img { transform: scale(1.05); } .kachel:hover .kachel__schleier, .kachel:focus-within .kachel__schleier { opacity: 1; } .kachel:hover .kachel__schleier > span, .kachel:focus-within .kachel__schleier > span { transform: translateY(0); } /* Der Satz steht auf dem Schleier. Unter dem Bild waere er waehrend des Ueberfahrens ein zweites Mal zu sehen. Nicht display: none: das naehme ihn auch aus dem Zugaenglichkeits- baum, und der Schleier liegt in einem aria-hidden-Link. Wer die Seite vorlesen laesst, bekaeme dann gar keine Beschreibung. */ .kachel__text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* Auf Tastgeraeten zeigt die Kachel dauerhaft das Foto, der Satz steht darunter (.kachel__text, oben nur mit Zeiger weggeblendet). Der Schleier faellt ganz weg statt nur durchsichtig zu bleiben - er liegt ohnehin in einem aria-hidden-Link und traegt dort nichts bei. */ @media (hover: none), (max-width: 560px) { .kachel__schleier { display: none; } } @media (prefers-reduced-motion: reduce) { .kachel__bild img, .kachel__schleier, .kachel__schleier > span { transition: none; } .kachel:hover .kachel__bild img, .kachel:focus-within .kachel__bild img { transform: none; } .kachel__schleier > span { transform: none; } } .kachel h3 { margin-bottom: var(--raum-s); } .kachel h3 a { color: var(--tinte); text-decoration: none; } .kachel h3 a:hover { color: var(--eukalyptus-tief); } .kachel__text { color: var(--tinte-weich); margin: var(--raum-s) 0 0; flex: 1; } .kachel__mehr { margin: var(--raum-s) 0 0; } /* Zwei Spalten Text und Bild */ .duo { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } /* Oben buendig statt mittig, seit dem 25.09.2026 auf Ueber mich: der Text ist dort laenger als das Portrait daneben, und mittig stand die Ueberschrift hoeher als die Oberkante des Bildes. Nur dieser eine Abschnitt - ueberall sonst ist der Text kuerzer als das Bild, und mittig ist dann richtig. Die Klasse setzt dani_duo() zusammen mit der H1: es ist derselbe Fall. Unter 900 px steht das Duo einspaltig, dort aendert die Ausrichtung nichts. */ .duo--oben { align-items: start; } .duo--gedreht .duo__bild { order: 2; } /* Und die Spalten drehen sich mit. .duo steht auf 0.9fr/1.1fr: die erste Spalte traegt das Bild, die zweite den Text, und der Text bekommt die breitere. Ordnet man die beiden um, behaelt die zweite Spalte ihre Breite - der Text stuende dann in der schmalen und das Bild in der breiten. Bis zum 25.09.2026 fiel das nicht auf, weil kein Abschnitt gedreht stand. */ .duo--gedreht { grid-template-columns: 1.1fr 0.9fr; } .duo__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rundung); } .duo__inhalt { max-width: var(--breite-text); } /* Stehendes Bild: der Rahmen dreht sich mit, sonst bliebe von einer Person nur der Rumpf stehen. Die Bildspalte wird dabei schmaler, damit das Hochformat den Abschnitt nicht erschlaegt. Die Klasse setzt dani_duo() anhand der Bildmasse, nichts zu pflegen. */ .duo--hochkant { grid-template-columns: 0.75fr 1.25fr; } .duo--hochkant.duo--gedreht { grid-template-columns: 1.25fr 0.75fr; } .duo--hochkant .duo__bild img { aspect-ratio: 3 / 4; } /* Briefform: das Bild steht IM Text, nicht daneben. Seit dem 28.09.2026 auf der Trauerfeier, auf Danielas Wunsch. Die Seite zeigt zwei Fotos, und sie standen in zwei Bildsprachen da: oben im Brief eines mit 288 px, ungeschnitten und vom Text umflossen, unten im Duo-Abschnitt eines mit 415 px, auf 3:4 beschnitten und als eigene Spalte. Hier ist die zweite Fassung die erste geworden - dieselbe Breite, dasselbe Verhaeltnis, dieselbe Stelle im Lesefluss. Drei Dinge stecken darin, und jedes ist noetig: 1. flow-root statt Raster. Der Abschnitt wird ein gewoehnlicher Block, damit ein float in ihm ueberhaupt moeglich ist - und flow-root, nicht block, weil er den float sonst unten herauslaufen liesse. Dieselbe Zeile traegt .fliesstext. 2. 46 rem. Das ist das Mass des Briefes und der Fragenliste; die Textbloecke der Seite stehen damit auf einer Kante. Ueber die vollen 1180 px stuenden neben dem 18-rem-Bild 55 rem Text, also rund 105 Zeichen je Zeile. 3. Die Masse des Brieffotos, Zahl fuer Zahl: 18 rem breit, 0,4 rem Vorlauf oben, --raum-m nach links und unten. Neben dem Text bleiben damit 26 rem, rund 50 Zeichen - dieselbe Rechnung wie dort, und die Untergrenze fuer Fliesstext. Das FORMAT bleibt dabei unberuehrt - siehe unten. */ .duo--brief { display: flow-root; max-width: 46rem; margin-inline: auto; } .duo--brief .duo__inhalt { max-width: none; } /* Der Auftakt-Absatz steht ueber der vollen Breite, das Bild faengt erst darunter an. Sein Abstand nach unten muss von Hand kommen: "p:last-child { margin-bottom: 0 }" gilt auch hier, und der Absatz IST das letzte Kind seines Kastens - ohne diese Zeile klebte das Foto an der letzten Textzeile. 1,25 em ist derselbe Abstand, den zwei Absaetze sonst untereinander haben. */ .duo--brief .duo__text--auftakt { margin-bottom: 1.25em; } @media (min-width: 901px) { .duo--brief .duo__bild { float: right; width: 18rem; margin: 0.4rem 0 var(--raum-m) var(--raum-m); } /* Wie im Brief: ein Zitat laeuft nie neben dem Bild. In der Handschrift bei 2,4 rem waeren es in der schmalen Spalte drei Zeilen statt einer, und der Markierstift zoege sich als Treppe darueber. */ .duo--brief .duo__text blockquote { clear: right; } } /* Das Bild behaelt hier KEINE eigene Regel. Die Briefform aendert Groesse und Stelle, nicht das Format: .duo--hochkant schneidet weiter auf 3:4, bei einem liegenden Bild bleiben es 4:3. Einen halben Tag lang stand hier aspect-ratio: auto und dani_duo() gab 'large' aus - das ungeschnittene 2:3 der Datei. Das Bild stand damit schmaler und hoeher da als gewohnt, und Daniela wollte am 28.09.2026 das alte Format zurueck. */ /* Fotostreifen: drei Bilder als ein Objekt. Kein Zwischenraum und nur ein Radius um das Ganze: so ist es ein Streifen und nicht drei Karten. overflow: hidden schneidet die Ecken der Bilder mit, die selbst keinen Radius tragen. DER STREIFEN RICHTET SICH NACH DEM TEXT, nicht umgekehrt. Er hat kein eigenes Seitenverhaeltnis: die drei Rahmen teilen sich als 1fr die Hoehe der Zeile, und die setzt der Text daneben. Damit steht neben dem Text nie wieder Leerraum - egal, wie viel Dani schreibt. Vorher hatten die Rahmen 4:3 und der Streifen kam auf 739 px, der Text auf 404 px: 168 px Luft ueber und unter dem Text (gemessen am 22.09.2026). Feste Verhaeltnisse passen nur fuer genau eine Textlaenge, und die aendert sich beim ersten Nachschaerfen. min-height ist die Sicherung: faellt die Hoehenkette je auseinander, bleibt der Streifen sichtbar statt auf null zu fallen. 12 % Bildausschnitt von oben: die Koepfe sitzen in dieser Serie im oberen Fuenftel, mittig zugeschnitten bliebe der Rumpf. */ .duo--streifen { grid-template-columns: 0.55fr 1.45fr; align-items: stretch; } /* Der Text steht mittig in seiner Spalte, die Spalte selbst traegt die volle Zeilenhoehe - sonst haette der Streifen nichts, woran er sich ausrichten koennte. */ .duo--streifen .duo__inhalt { align-self: center; max-width: 32rem; } .streifen { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); height: 100%; min-height: 22rem; border-radius: var(--rundung); overflow: hidden; } /* Der Rahmen ist die Stelle, an der die Hoehenkette bricht: das Bild liegt absolut darin und traegt deshalb keine eigene Hoehe mehr bei. Ohne das rechnet der Browser die Zeilenhoehe aus den Bildmassen und der Streifen wird wieder hoeher als der Text. */ .streifen__rahmen { position: relative; display: block; overflow: hidden; min-height: 0; } .streifen__rahmen img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 12%; border-radius: 0; } /* Der Streifen als Kopfbereich: drei Bilder nebeneinander ueber die volle Seitenbreite, ohne Text daneben. Anders als der Streifen im Duo hat er kein Gegenueber, an dem er sich in der Hoehe ausrichten koennte - deshalb traegt er hier selbst ein Verhaeltnis. 4:3 je Bild, drei nebeneinander: das ergibt ein flaches Band von rund 4:1 ueber die ganze Breite. Eckig, weil es von Kante zu Kante laeuft - gerundet waere es ein Objekt, und ein Objekt haengt nicht unter dem Kopfbereich. */ .streifen-kopf { margin: 0; } .streifen--kopf { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; height: auto; min-height: 0; border-radius: 0; } .streifen--kopf .streifen__rahmen { aspect-ratio: 4 / 3; } /* Die drei Aufnahmen sollen wie EINE Wand aussehen, seit dem 28.09.2026 auf Danielas Wunsch. Der Trick ist nicht Bildbearbeitung, sondern eine gemeinsame Flaeche und zwei weiche Kanten. Nachgemessen an den Dateien: die Wand steht in allen drei Bildern fast im selben Ton. Am linken und rechten Rand der Ausschnitte liegen die Werte zwischen RGB 200/210/220 und 212/219/227 - an den beiden Nahtstellen sogar auf 1 bis 3 Einheiten genau beieinander. Was man sieht, ist also keine Farbstufe, sondern die harte Kante selbst. --wand ist der Mittelwert aus den sechs Randmessungen. Deshalb: der Streifen bekommt die Wandfarbe als Grund, und die INNEREN Kanten der Bilder werden ueber 10 % ihrer Breite ausgeblendet. In dem Band, das dabei entsteht, steht auf beiden Seiten nur Wand - nachgemessen sitzt Daniela in allen drei Ausschnitten zwischen 21 % und 76 % der Breite, die aeusseren 20 % sind leer. Wer ein Foto austauscht, misst das nach: steht jemand weiter aussen, wird er an der Naht durchsichtig. Die AEUSSEREN Kanten bleiben hart. Ausgeblendet gaebe der Streifen an beiden Seiten des Fensters einen blassen Rand her, und das sieht nach Fehler aus, nicht nach Wand. */ .streifen--kopf { --wand: #cfd7e0; background-color: var(--wand); } .streifen--kopf .streifen__rahmen:first-child img { -webkit-mask-image: linear-gradient(to right, #000 90%, transparent 100%); mask-image: linear-gradient(to right, #000 90%, transparent 100%); } .streifen--kopf .streifen__rahmen:nth-child(2) img { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%); } .streifen--kopf .streifen__rahmen:last-child img { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%); mask-image: linear-gradient(to right, transparent 0, #000 10%); } /* Die Zeile ueber dem Foto auf Ueber mich ist ein ABSATZ im Kleid einer Ueberschrift, keine Ueberschrift: die H1 der Seite ist seit dem 24.09.2026 "Hallo, ich bin Daniela." im Abschnitt darunter - die Seite soll auf Danielas Namen gefunden werden. Zwei H1 waeren eine zu viel, eine H2 davor die falsche Reihenfolge. Die Masse sind die der h1, der Strich kommt aus derselben Liste. */ .seitenkopf-schmal__titel { font-family: var(--serif); font-weight: 400; font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.2; text-wrap: balance; color: var(--tinte); margin: 0; } /* Zeile ueber dem Foto, nur auf dem Telefon: hier ausgeblendet, im Block darunter eingeschaltet. Die Reihenfolge ist der ganze Punkt. Beide Regeln haben dieselbe Spezifitaet, es entscheidet also, welche spaeter steht - und am 24.09.2026 stand die Grundregel hinter dem Medienblock und hat die Ueberschrift auf jedem Geraet ausgeblendet. */ .seitenkopf-schmal { display: none; } /* Unter 900 px bleiben die drei nebeneinander stehen - "nebeneinander" ist der Punkt des Kopfstreifens - aber im Hochformat: die Dateien sind hochkant (683x1024), und in einem liegenden Rahmen von 130 px Breite bliebe von Daniela ein Streifen ohne Kopf. Die Regeln stehen hier und nicht weiter unten, weil der Block fuer den Duo-Streifen den Kopfstreifen sonst mitnimmt: er deckelte ihn auf 30 rem: 480 px mittig auf einem 700-px-Schirm, und auf dem Telefon 130x73 px je Bild. Deshalb schliesst der Block darunter den Kopfstreifen ausdruecklich aus. */ @media (max-width: 900px) { /* Seit dem 24.09.2026 steht der Kopfstreifen auf dem Telefon gar nicht mehr, auf Danielas Wunsch: drei Aufnahmen nebeneinander sind dort je 130 px breit - von Daniela bleibt in jedem Rahmen eine Figur, die man nicht mehr erkennt. Die Seite faengt jetzt direkt mit dem hochkanten Portrait an, und das ist auf dem Telefon die ganze Breite wert. display: none, nicht "kleiner": drei unkenntliche Bilder sind kein Auftakt. Auf dem Schirm bleibt der Streifen, dort ist jede Aufnahme 380 px breit. Ausgeblendet wird der ganze Abschnitt (.streifen-kopf), nicht nur das Raster darin - sonst bliebe eine leere Section stehen. Die Bilder holt der Browser trotzdem; damit es die kleinste Fassung ist, meldet ihre Groessenangabe unter 900 px 1 px Anzeigebreite (siehe dani_fotostreifen()). Der Rahmen darunter (2:3, das Verhaeltnis der Dateien selbst) bleibt stehen - er kostet nichts und traegt sofort wieder, wenn der Streifen zurueckkommt. */ .streifen-kopf { display: none; } /* Dafuer bekommt die Seite auf dem Telefon eine Ueberschrift ueber dem Foto - sonst faengt sie mit einem Bild ohne ein Wort dazu an (Danielas Wunsch vom 24.09.2026). Auf dem Schirm bleibt sie weg, dort tragen die drei Aufnahmen den Auftakt. Der Abstand nach unten ist --raum-m statt --raum-l: das Polster des Duo-Abschnitts darunter faellt dafuer weg, sonst stuenden 8,5 rem zwischen Ueberschrift und Foto. */ .seitenkopf-schmal { display: block; padding-top: var(--raum-l); } .seitenkopf-schmal .abschnitt__kopf { margin-bottom: var(--raum-m); } .seitenkopf-schmal + .abschnitt { padding-top: 0; } .streifen--kopf .streifen__rahmen { aspect-ratio: 2 / 3; } } /* Unter 900 px stellt sich das Duo einspaltig - der Streifen stuende dann ueber dem Text und waere ueber die volle Breite dreimal so hoch wie noetig. Nebeneinander statt untereinander: aus dem Streifen wird eine Reihe, und die Rahmen drehen sich ins Hochformat, weil drei liegende Rahmen auf Telefonbreite nur noch 90 px hoch waeren. */ @media (max-width: 900px) { .streifen:not(.streifen--kopf) { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; height: auto; min-height: 0; max-width: 30rem; margin-inline: auto; } /* Nebeneinander tragen die Rahmen wieder ein Verhaeltnis - es gibt keine Textspalte mehr daneben, an der sie sich ausrichten koennten. */ .streifen:not(.streifen--kopf) .streifen__rahmen { aspect-ratio: 3 / 4; } } /* Siegel: drei Qualifikationen nebeneinander ------------------------------------------ Seit dem 24.09.2026 auf Startseite und Ueber mich, jeweils vor dem Markenband. Drei Spalten auf dem Schirm, untereinander unter 700 px - drei Siegel nebeneinander waeren auf dem Telefon 100 px breit, und der Satz darunter braeche in vier Zeilen. Die Marke steht ueber dem Text, nicht daneben: nebeneinander muesste sich der Satz an der Bildkante ausrichten, und bei drei verschiedenen Siegeln steht die Kante nie gleich. */ .siegel__liste { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--raum-m); /* 68 rem, nicht 56: die Siegel sind am 24.09.2026 zweimal gewachsen, und die Spalte muss die Breite des breitesten Siegels tragen - sonst begrenzt sie es und die drei stehen ungleich hoch. (68 rem - 2 Luecken) / 3 = 21,3 rem je Spalte. */ max-width: 68rem; } /* min-width: 0 ist hier kein Beiwerk, sondern der Grund, warum die Reihe ueberhaupt in den Container passt. Ein Rasterelement hat von sich aus min-width: auto, und das heisst: es darf nicht schmaler werden als sein Inhalt von Natur aus ist. Der Inhalt ist ein Bild, und dessen natuerliche Breite sind 300 px - obwohl im CSS width: 100% steht. Damit wurde jede der drei Spalten 300 px breit, die Reihe 964 statt 896 px, und was links nicht mehr hineinpasste, war abgeschnitten (24.09.2026). Solange die Karte eine feste Breite hatte (9 rem), fiel das nicht auf. Wer ihr wieder eine feste Breite gibt, kann die Zeile entfernen - wer mit 100 % arbeitet, braucht sie. */ .siegel__eintrag { display: flex; flex-direction: column; align-items: center; gap: var(--raum-s); text-align: center; min-width: 0; } /* Die drei Zertifikate sind drei fremde Zeichnungen: ein gruenes Quadrat randlos, ein breites Logo auf Weiss, ein hochkantes Abzeichen. Nebeneinander haben sie weder gleiche Form noch gleiche Masse. Deshalb bekommt jedes dieselbe Karte: dieselbe Hoehe, dieselbe Breite, Weiss mit dem Radius der Objekte und einer duennen Linie. Weiss statt Papier, weil zwei der drei ohnehin einen weissen Grund mitbringen. Die Karte ist BREITER ALS HOCH, und das ist der Punkt: in einem Quadrat fuellt das hochkante Abzeichen die ganze Hoehe, waehrend das breite Logo nur ein Drittel davon belegt - dann steht eines der drei doppelt so gross da wie das andere. In einem liegenden Kasten begrenzt die Hoehe alle drei gleich, und jedes nimmt sich die Breite, die es braucht. Das ist die uebliche Loesung fuer eine Reihe fremder Logos. Weil alle Karten gleich hoch sind, stehen auch die drei Saetze darunter auf einer Linie. object-fit: contain, nicht cover: ein Siegel darf nicht angeschnitten werden. */ .siegel__marke { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-width: 0; /* Das breiteste Siegel (1080 x 659, also 1,64:1) misst bei 12 rem Hoehe rund 19,7 rem in der Breite. Waere die Karte schmaler, begrenzte sie dieses eine ueber die Breite - und die drei stuenden wieder unterschiedlich hoch da. 21 rem lassen etwas Luft. */ max-width: 21rem; /* Die feste Hoehe ist alles, was von der Karte geblieben ist - und sie ist der Grund, warum die drei Siegel gleich gross wirken und die Saetze darunter auf einer Linie stehen. Ohne sie richtete sich jedes nach seiner Datei. Kein Grund, kein Rahmen, kein Radius (24.09.2026, Danielas Wunsch): die Siegel stehen frei auf dem Papier. Deshalb auch kein overflow - das wuerde beim Ueberfahren die vergroesserte Zeichnung anschneiden. */ /* Am 24.09.2026 in zwei Schritten von 7,5 ueber 10 auf 12 rem: die Schrift auf den Zertifikaten war zu klein zum Lesen. Viel mehr traegt die Reihe nicht - bei drei Spalten im 1180-px-Container ist bei rund 21 rem Spaltenbreite Schluss, und die begrenzt ueber das breiteste Siegel die Hoehe. */ height: 12rem; padding: 0; /* Dieselbe Bewegung fuer alle drei, ob verlinkt oder nicht. */ transition: transform 0.2s ease; } a.siegel__marke { text-decoration: none; } /* Beim Ueberfahren hebt sich das Siegel leicht und wird eine Spur groesser - dieselbe Geste wie bei den Kacheln, nur kleiner. Ausgeloest vom ganzen Eintrag, nicht nur vom Bild: so bewegen sich alle drei gleich, auch die ohne Link, und der Satz darunter zaehlt mit. focus-within nimmt die Tastatur mit, wenn ein Siegel verlinkt ist. */ .siegel__eintrag:hover .siegel__marke, .siegel__eintrag:focus-within .siegel__marke { transform: translateY(-3px) scale(1.03); } @media (prefers-reduced-motion: reduce) { .siegel__marke { transition: none; } .siegel__eintrag:hover .siegel__marke, .siegel__eintrag:focus-within .siegel__marke { transform: none; } } /* Das Bild wird NICHT auf 100 Prozent gestellt, sondern nur begrenzt: max-width und max-height halten es in der Karte, width und height bleiben auto, und das Seitenverhaeltnis kommt aus der Datei. Mit width/height: 100% und object-fit: contain sah es genauso aus - solange die Karte ein Raster war. Dort ist die Zeilenhoehe aber nicht gesetzt, sondern wird aus dem Inhalt berechnet: das Bild meldete seine natuerliche Hoehe (183 px), die Zeile wuchs darauf an, und was ueber die 88 px der Karte hinausragte, schnitt overflow: hidden unten ab (24.09.2026). Prozenthoehen in einem Raster haengen immer an einer Zeile, deren Hoehe erst der Inhalt bestimmt - dieses Muster hier haengt nur an der Karte, und die hat eine feste Hoehe. */ .siegel__marke img { display: block; width: auto; height: auto; min-width: 0; max-width: 100%; max-height: 100%; } .siegel__text { font-family: var(--sans); font-size: 1.05rem; line-height: 1.5; color: var(--tinte); max-width: 18rem; } /* Das gezeichnete Siegel, solange kein eigenes Bild da ist: ein Kreis im hellen Akzentton mit demselben Haken wie in der Kreuzliste - die Seite kennt schon eine Handschrift fuers Abhaken, eine zweite braucht sie nicht. Der Haken liegt als Maske vor einer Flaeche in --eukalyptus, damit die Farbe im :root-Block bleibt und nicht in einer Datenadresse steht. Ohne Maskenunterstuetzung bleibt der Kreis allein stehen - leer, aber nicht falsch. */ .siegel__marke--gezeichnet { position: relative; width: 6.5rem; height: 6.5rem; max-width: 6.5rem; padding: 0; border: 0; border-radius: 50%; background: var(--eukalyptus-hell); box-shadow: inset 0 0 0 2px var(--eukalyptus); } @supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) { .siegel__marke--gezeichnet::before { content: ""; position: absolute; inset: 28%; background-color: var(--eukalyptus); --haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M 2 12.5 C 4 14.4 6 17 7.6 20 C 11.4 13.4 16.4 7 23 1.6' stroke-width='2.6'/%3E%3C/svg%3E"); -webkit-mask: var(--haken) no-repeat center / 100% 100%; mask: var(--haken) no-repeat center / 100% 100%; } /* Drei gleiche Haken nebeneinander verraten den Stempel - dieselbe Regel wie bei der Kreuzliste, nur mit anderen Winkeln. */ .siegel__eintrag:nth-child(2) .siegel__marke--gezeichnet::before { transform: rotate(2deg); } .siegel__eintrag:nth-child(3) .siegel__marke--gezeichnet::before { transform: rotate(-1.5deg); } } @media (max-width: 700px) { .siegel__liste { grid-template-columns: 1fr; gap: var(--raum-l); } } /* Zitat */ .zitat { max-width: 42rem; margin-block: var(--raum-l); padding-left: clamp(1rem, 4vw, 2.5rem); border-left: 2px solid var(--messing); } .zitat p { font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 2.6vw, 1.8rem); line-height: 1.5; color: var(--tinte); margin-bottom: 0.75rem; } .zitat cite { font-family: var(--sans); font-style: normal; font-size: 0.9rem; color: var(--grau); } /* Themenkarten */ .themen { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); } .thema { background: var(--stein); border-radius: var(--rundung); padding: clamp(1.5rem, 3vw, 2.1rem); } .thema h3 { margin-bottom: 0.6rem; font-size: 1.25rem; } .thema__text { color: var(--tinte-weich); font-size: 0.98rem; line-height: 1.65; } .thema__text p:last-child { margin-bottom: 0; } /* Zitat im Fliesstext: der Markierstift Bis zum 23.09.2026 war das Zitat eine gruene Karte nach Danielas Entwurf "Zitat Layout SEP2026". Sie war als Flaeche zu blockig - im Brief der Trauerfeier standen dadurch drei gefuellte Rechtecke untereinander, und jedes unterbrach den Lesefluss so stark wie ein Abschnittswechsel. Auf Silvans Wunsch steht der Satz jetzt im Text und ist markiert, als haette jemand mit dem Textmarker darueber gefahren. Der Strich haengt am INLINE-Kasten, nicht am Absatz: display: inline macht aus dem

    eine Folge von Zeilenstuecken, und box-decoration-break: clone gibt jedem Stueck seinen eigenen Hintergrund. Nur so hoert die Farbe dort auf, wo der Satz aufhoert, statt als Rechteck bis an die Spaltenkante zu laufen. Ohne clone bekaeme die erste Zeile den Anfang und die letzte das Ende des Striches, die Zeilen dazwischen gar keinen. Handgemacht wirkt er durch dreierlei: die Enden laufen schraeg aus (der Gradient steht auf 101 statt 90 Grad, bei einem flachen Kasten reicht das), ein zweiter, blasserer Strich liegt leicht versetzt darunter - der zweite Zug desselben Stiftes -, und der Strich deckt nur die x-Hoehe ab, sodass Ober- und Unterlaengen herausschauen. Ein Rechteck von Zeilenkante zu Zeilenkante waere wieder eine Flaeche. Die Lage ist gegen die Schriftmetrik gerechnet, nicht geschaetzt. Der Hintergrund sitzt am oberen Rand des Inline-Kastens, und der liegt eine Oberlaenge ueber der Grundlinie: bei Caveat 0,96 em. Der Strich soll von 0,52 em ueber der Grundlinie bis 0,08 em darunter reichen (x-Hoehe 0,40 em), also 0,60 em hoch sein und 0,44 em unter der Kastenkante beginnen. Wer die Schrift wechselt, rechnet --stift-lage neu: Kastenkante minus gewuenschte Oberkante. Tinte auf Sellerie steht bei 7,9:1. Der Stift duennt zu den Enden hin aus; heller heisst hier kontrastreicher, die 7,9:1 sind also der schlechteste Fall. */ /* Auch im Duo-Abschnitt, seit dem 25.09.2026: die Trauerfeier hat dort ein Zitat im Text ("Denn Trauerfeiern duerfen voller Leben sein."). Es soll aussehen wie jedes andere Zitat der Website - die Regel "eine Zitatform je Seite" gilt auch ueber die Bausteine hinweg. */ .fliesstext blockquote, .duo__inhalt blockquote { /* Zwei gleich lange Zeilen statt einer vollen und einem Rest: der Stift zieht seinen Strich je Zeilenstueck (clone), und ein Zeilenstueck aus einem einzigen Wort steht als Tupfer unter dem Satz. In der schmaleren Spalte des Duo-Abschnitts passiert das zuerst ("... voller Leben / sein."). Die Regel steht am blockquote, NICHT am Absatz darin: der ist durch den Stift display: inline, und text-wrap gilt nur fuer Blockcontainer. Browser ohne balance brechen wie bisher. */ text-wrap: balance; margin: var(--raum-l) 0; padding: 0; border: 0; background: none; color: var(--tinte); font-style: normal; } /* Der erste Absatz ist das Zitat. Der Grad ist gegen die x-Hoehe gerechnet, nicht gegen den Kegel: Caveat hat mit 0,40 em eine deutlich kleinere x-Hoehe als Literata mit 0,51 em. Bei gleicher Punktgroesse waere die Handschrift rund ein Viertel kleiner zu lesen. 2,4rem hier entsprechen 1,9rem in Literata - etwas kleiner als auf der Karte (2,7rem), weil der Satz jetzt im Text steht und nicht mehr gegen eine Flaeche antreten muss. */ .fliesstext blockquote > p:first-child, .duo__inhalt blockquote > p:first-child { font-family: var(--schreib); font-weight: 600; font-size: clamp(1.7rem, 4.8vw, 2.4rem); line-height: 1.6; color: var(--tinte); margin: 0; /* Caveat: 0,96 em Oberlaenge, 0,40 em x-Hoehe. Siehe die Rechnung im Kommentar oben. */ --stift-hoch: 0.60em; --stift-lage: 0.44em; } /* Der Stift selbst. Drei Stellen benutzen ihn: das Zitat, ein im Fliesstext und die Telefonnummer im Kontaktkasten. Die Farbe und die beiden Masse kommen von aussen, die Zeichnung steht hier ein einziges Mal. */ .fliesstext blockquote > p:first-child, .duo__inhalt blockquote > p:first-child, .fliesstext mark, .stift { /* Die Vorgabe ist auf die Sans gerechnet (rund 1,0 em Oberlaenge, 0,52 em x-Hoehe): Strich von 0,62 em ueber der Grundlinie bis 0,06 em darunter. Die Handschrift setzt beide Werte um. */ --stift-hoch: 0.68em; --stift-lage: 0.38em; /* Deckung der beiden Zuege. Sie steht in Variablen, weil der Ton allein nicht reicht: das Honiggelb ist von Haus aus hell und traegt erst dicht aufgetragen, das Gruen ist kraeftig und wuerde dicht zur Flaeche. */ --stift-deck: 0.6; --stift-deck2: 0.28; display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding-inline: 0.24em; margin-inline: -0.16em; background-color: transparent; background-repeat: no-repeat; background-image: linear-gradient( 101deg, rgba(var(--stift-ton), 0) 0.6%, rgba(var(--stift-ton), var(--stift-deck)) 2.6%, rgba(var(--stift-ton), var(--stift-deck)) 96.8%, rgba(var(--stift-ton), 0) 99.2% ), linear-gradient( 97deg, rgba(var(--stift-ton), 0) 2.4%, rgba(var(--stift-ton), var(--stift-deck2)) 5.4%, rgba(var(--stift-ton), var(--stift-deck2)) 91%, rgba(var(--stift-ton), 0) 95.5% ); background-size: 100% var(--stift-hoch), 100% calc(var(--stift-hoch) - 0.16em); background-position: 0 var(--stift-lage), 0 calc(var(--stift-lage) + 0.12em); } /* Alles nach dem Zitat ist die Quellenangabe: eine leise Zeile in der Sans, ohne Stift. Sie stand auf der gruenen Karte in Creme und steht jetzt auf Papier - also in Grau, nicht weiter veraendert. */ .fliesstext blockquote > p + p, .fliesstext blockquote cite, .duo__inhalt blockquote > p + p, .duo__inhalt blockquote cite { display: block; font-family: var(--sans); font-weight: 400; font-style: normal; font-size: clamp(0.88rem, 2vw, 0.95rem); line-height: 1.5; color: var(--grau); margin: 0.6rem 0 0; } /* Markierung im Fliesstext: dasselbe Werkzeug in Gelb. Das ist die Aufgabe, die das Honiggelb seit dem 23.09.2026 hat. Dani schreibt dafuer in den Text - mehr braucht es nicht. Die Masse braucht es hier nicht: die Vorgabe des Stiftes ist auf die Sans gerechnet, und im Fliesstext steht die Sans. Nur das Zitat weicht ab, weil die Handschrift eine andere Metrik hat. Der Browser gibt einem von sich aus einen gelben Grund und eine eigene Schriftfarbe; beides muss weg, sonst stehen zwei Gelbs uebereinander. */ .fliesstext mark { --stift-ton: 250, 234, 192; /* --honig */ /* Fast deckend, anders als das Gruen - siehe oben. */ --stift-deck: 0.92; --stift-deck2: 0.5; color: inherit; } /* Derselbe Stift ausserhalb des Fliesstextes, in der Signalfarbe der Zitate: . Danielas eigene Frage traegt ihn seit dem 25.09.2026 auf ihrem Wunsch - drei Stellen in Frage und Antwort, "einfach nur Textmarker auf der normalen Schriftgroesse und Art". Also der Stift OHNE das Zitatkleid: keine Handschrift, kein groesserer Grad, nur Farbe hinter den Buchstaben. Die Masse der Vorgabe stimmen dafuer schon, sie sind auf die Sans gerechnet. Gruen und nicht das Honiggelb: das Gelb ist Danis Markierung IM Fliesstext, das Gruen die Signalfarbe, mit der die Zitate und die Telefonnummer stehen. Diese drei Saetze sind Danielas eigene Aussage, keine Hervorhebung in einem fremden Text. Der Browser gibt einem von sich aus eine eigene Schriftfarbe - die muss weg, der Grund kommt vom Stift. */ mark.stift { color: inherit; } /* Die alte Zitatkarte in der fetten Serife (22.09.2026) haengt an dieser Klasse. Sie wird von keinem Inhalt mehr benutzt und traegt seit dem 23.09.2026 auch keine Flaeche mehr - die Regeln, die sie ueberschrieb, gibt es nicht mehr. Wer sie zurueckholt, baut die Karte mit zurueck. */ .fliesstext blockquote.zitat--serife > p:first-child { font-family: var(--serif); font-weight: 700; font-size: clamp(1.15rem, 3.2vw, 1.5rem); line-height: 1.5; letter-spacing: 0.04em; text-transform: uppercase; } /* Unterschrift am Ende eines Textes Der Brief endet mit einem Namen, nicht mit einem weiteren Absatz. Seit dem 22.09.2026 in der Handschrift statt in der Serife - ein Namenszug ist geschrieben, nicht gesetzt. Es ist dieselbe Caveat wie in den Zitaten, keine dritte Schrift; alle Zeichen von "Daniela Loeff" liegen im vorhandenen Subset, es kommt kein Byte dazu. Grad gegen die x-Hoehe: Caveat hat 0,40 em, Literata 0,51 em. Die 1,15 rem der Serife entsprechen 1,47 rem Handschrift - 1,7 rem ist bewusst etwas darueber, eine Unterschrift darf groesser sein als der Text, den sie abschliesst. Seit dem 23.09.2026 traegt dieselbe Gestaltung auch die Klasse .handschrift, und zwar im Duo-Abschnitt genauso wie im Brief: auf der Startseite steht unter "Ich bin Daniela. Und ich bin da, wenn's drauf ankommt." der geschriebene Gruss "Schoen, dass Du da bist!". Zwei Namen fuer eine Gestaltung, weil das eine ein Namenszug ist und das andere keiner - Dani schreibt die Klasse im Editor selbst, und ein "unterschrift" unter einem Gruss waere eine falsche Fibel. Auch dieser Satz braucht kein neues Byte: alle seine Zeichen liegen im Caveat-Subset (nachgesehen, es fuehrt 200 Zeichen). */ .fliesstext .unterschrift, .fliesstext .handschrift, .duo__inhalt .unterschrift, .duo__inhalt .handschrift { margin-top: var(--raum-m); margin-bottom: 0; font-family: var(--schreib); font-weight: 600; font-size: 1.7rem; line-height: 1.2; color: var(--tinte); } /* Der Gruss ist kein Namenszug, und am 23.09.2026 stand er noch "zu mechanisch" da. Drei Dinge trennen ihn jetzt vom Namenszug, und jedes davon ist eines, das eine geschriebene Zeile von einer gesetzten unterscheidet: - Schnitt 400 statt 600. Der schwere Schnitt ist ein Filzstift, der leichte eine Mine. Das ist der groesste Teil der Wirkung und der Grund, warum die Schrift jetzt variabel geladen wird. - 2,2 rem statt 1,7. Handschrift wird groesser geschrieben als Satzschrift; der duennere Strich vertraegt es auch. - Zwei Grad Drehung und ein kleiner Einzug. Keine geschriebene Zeile liegt genau auf der Satzkante und genau in der Waagerechten. Der Drehpunkt liegt links: die Zeile haengt am Textanfang und steigt nach rechts an, wie von selbst. Bei 2 Grad und rund 280 px Zeilenlaenge hebt sich das rechte Ende um 10 px - der Abstand darueber (--raum-m) traegt das, ohne dass etwas kollidiert. */ .fliesstext .handschrift, .duo__inhalt .handschrift { font-weight: 400; font-size: 2.2rem; letter-spacing: 0.01em; margin-left: 0.15em; transform: rotate(-2deg); transform-origin: left center; } /* Der Strich unter dem Gruss - Silvans Wunsch vom 23.09.2026. Er war am 28.09.2026 einen halben Tag lang weg: Daniela wollte nichts Markiertes im Text "Hallo, ich bin Daniela." Am selben Tag ist er auf ihren Wunsch zurueckgekommen, und dafuer sind die beiden Markierstifte aus dem Text gefallen - beides zusammen war zu viel. DAS IST DER TAUSCH: entweder der Strich unter dem Gruss oder Textmarker im Absatz darueber, nicht beides. Er ist gezeichnet wie die Kreuzliste, nicht gesetzt: eine leicht schwankende Linie mit runden Enden, als Maske vor einer Flaeche in der Markenfarbe. Ein gerader Balken unter einer Handschrift waere genau das, was an dem Gruss vorher stoerte. Die Zeile bekommt dafuer width: fit-content - ein Absatz ist so breit wie seine Spalte, der Strich soll aber so breit sein wie die Schrift. Rechts laeuft er 0,15 em ueber das letzte Zeichen hinaus, wie ein Stift, der nicht genau am Punkt anhaelt. Zwei Dinge sorgen dafuer, dass er wirklich ueber den ganzen Satz laeuft, und das zweite ist das wichtigere: 1. Der Pfad nutzt die Zeichenflaeche aus (x 2 bis 198 von 200). Die runden Enden ragen je 1,6 Einheiten darueber hinaus und bleiben gerade noch drin, werden also nicht abgeschnitten. 2. preserveAspectRatio='none'. OHNE das war der Strich nur halb so lang wie der Satz, und zwar mittig: eine SVG-Datei ohne diese Angabe wird in ihre Flaeche EINGEPASST, nicht gedehnt. Die Zeichnung ist 200 zu 14 flach, die Flaeche unter dem Gruss mit rund 300 zu 10 px noch flacher - eingepasst wurde also auf die Hoehe, und in der Breite blieb die Haelfte leer. Die Linie ist fast waagerecht, ihre Staerke haengt damit an der senkrechten Skalierung; gedehnt wird sie nicht dicker, nur laenger. Gezogen wird er ueber clip-path, nicht ueber die Breite: die Maske bliebe sonst am Element haengen und die Linie wuerde sich beim Wachsen dehnen. So steht die Zeichnung fest und wird von links nach rechts freigelegt - ein Strich, der gezogen wird, keine Linie, die waechst. Die Kurve ist vorne schnell und laeuft hinten aus, wie eine Hand. Die Klasse setzt main.js, sobald der Gruss im Bild ist. Ohne JavaScript bleibt der Strich aus; der Gruss steht dann einfach da, das kostet nichts. Und @supports haelt die Flaeche zurueck, wo es keine Masken gibt - sonst laege dort ein gruener Balken. */ @supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) { .fliesstext .handschrift, .duo__inhalt .handschrift { position: relative; width: fit-content; } .fliesstext .handschrift::after, .duo__inhalt .handschrift::after { content: ""; position: absolute; left: -0.05em; /* Nachgerechnet, nicht geschaetzt: Caveat sitzt mit 0,96 em ueber und 0,30 em unter der Grundlinie in einer Zeile von 1,2 em, die Grundlinie liegt also 0,27 em ueber der Unterkante. Das tiefste Zeichen des Grusses ist das Komma mit 0,079 em darunter. Bei -0,1 em laeuft der Strich 0,14 bis 0,32 em unter der Grundlinie - unter dem Komma durch, nicht hindurch. */ right: -0.15em; bottom: -0.1em; height: 0.3em; background-color: var(--eukalyptus); --strich: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M 2 9.4 C 34 5.3 66 11 98 6.9 C 130 3.1 163 9.3 198 4.6'/%3E%3C/svg%3E"); -webkit-mask: var(--strich) no-repeat center / 100% 100%; mask: var(--strich) no-repeat center / 100% 100%; -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); transition: clip-path 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s; } .fliesstext .handschrift--gemalt::after, .duo__inhalt .handschrift--gemalt::after { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } /* Wer weniger Bewegung eingestellt hat, bekommt den Strich sofort - nicht gar keinen. Die Zeile soll ueberall gleich aussehen, nur eben ohne dass etwas laeuft. */ @media (prefers-reduced-motion: reduce) { .fliesstext .handschrift::after, .duo__inhalt .handschrift::after { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); transition: none; } } } /* Zitat auf einfarbigem Hintergrund */ /* Das Polster ist bewusst dasselbe wie bei jedem anderen Abschnitt (--raum-xl, nicht --raum-l). Mit dem engeren Mass sass das Zitat dicht an der Unterkante, und der Wechsel auf die Steinflaeche des Ablaufs las sich als abgerissener Streifen statt als Abschnittswechsel. Ein Zwischenraum aus dem Grundton hilft hier nicht: Papier und Stein unterscheiden sich nur um den Faktor 1,11 in der Helligkeit, ein Streifen dazwischen fluestert bloss. Was den Uebergang traegt, ist die gleiche Groesszuegigkeit auf beiden Seiten der Kante. */ .zitatband { background: var(--eukalyptus-tief); color: #fff; padding-block: var(--raum-xl); text-align: center; } /* Zwei Farbflaechen stossen nie direkt aufeinander. Das Zitatband auf die Steinflaeche des Ablaufs war die einzige solche Kante der Seite - und genau die, die als ruppig auffiel. Dazwischen liegt jetzt der Grundton. Dass Papier und Stein sich kaum unterscheiden, ist hier kein Einwand: der Zwischenraum soll nicht zu sehen sein, das Band soll nur nicht auf eine zweite Kante prallen. */ .zitatband + .ablauf, .zitatband + .abschnitt--stein, .zitatband + .aufruf { margin-top: var(--raum-l); } /* Dieselbe Regel fuer das Markenband. Es ist ebenfalls eine ganzbreite Flaeche von Kante zu Kante - auf der Startseite stoesst es seit dem 22.09.2026 direkt auf das Zitatband, und Foto auf Gruen ohne Pause las sich als eine einzige gestreifte Flaeche statt als zwei Abschnitte. Auf den Zeremonieseiten folgt dem Band ein gewoehnlicher Abschnitt; der bringt sein Polster selbst mit, dort aendert die Regel nichts. */ .marke-hero--band + .zitatband, .marke-hero--band + .ablauf, .marke-hero--band + .abschnitt--stein { margin-top: var(--raum-l); } /* Die eine Ausnahme, seit dem 23.09.2026 auf Silvans Wunsch: das Markenband stoesst direkt auf den beigen Kontaktkasten. Hier sollen die beiden gerade NICHT als zwei Abschnitte gelesen werden. Das Band zeigt Daniela und die Wortmarke, der Kasten darunter nennt Nummer und Adresse - zusammen ist das ein Kontaktbereich mit Bild, so wie ihn eine Visitenkarte hat. Ein Zwischenraum aus Grundton machte daraus zwei Dinge, die zufaellig untereinander stehen. Zwischen den beiden stand am 23.09.2026 einen Tag lang das kurze Anfrageformular. Es ist wieder heraus - ein zweites Formular so dicht vor dem, auf das die Schaltflaeche im Band fuehrt, stellt dieselbe Frage zweimal. */ .marke-hero--band + .aufruf { margin-top: 0; } /* Der Abschnitt der Seite "Fuer Unternehmen" stand hier bis zum 07.10.2026 mit einer anderen Ausnahme (.marke-hero--band + .wege: margin-top 0): er war eine beige Flaeche und sollte mit dem Band zusammen als ein Block gelesen werden. Seit er auf Papier steht, ist er ein gewoehnlicher Abschnitt und bringt sein Polster selbst mit - wie auf den Zeremonieseiten, wo dem Band ebenfalls einer folgt. OBEN ABER KNAPPER ALS SONST, auf Danielas Wunsch vom 07.10.2026: --raum-l statt --raum-xl, also 4 rem statt 6,5. Das ist dieselbe Zahl und dieselbe Begruendung wie bei .abschnitt--schmal unter dem Kopfbild - der Auftakt soll am Band haengen. Hier traegt sie zusaetzlich, weil auf das Band keine Einleitung folgt, sondern sofort die Ueberschrift: zwischen Bandkante und Versaloberkante standen vorher 104 px plus die Zeile des Kickers, und das las sich wie eine Luecke statt wie ein Abstand. Unten bleibt das volle Mass - darunter kommt die Fusszeile, und das ist ein Wechsel, kein Anschluss. Deshalb padding-top und nicht padding-block. */ .marke-hero--band + .wege { padding-top: var(--raum-l); } .zitatband blockquote { max-width: 46rem; margin: 0 auto; /* GeneratePress setzt blockquote standardmaessig einen Rahmen und Innenabstand. Beides wird hier zurueckgenommen. */ border: 0; padding: 0; font-style: normal; } /* Dieselbe Handschrift wie in den Zitatkarten im Brief. Zwei Zitatarten auf einer Seite in zwei verschiedenen Schriften lesen sich als Versehen. Der Grad ist wieder gegen die x-Hoehe gerechnet: Caveat hat 0,40 em, Literata 0,51 em. Die 2,55rem hier entsprechen den 2rem, die vorher in der Serife standen. */ .zitatband p { font-family: var(--schreib); font-weight: 600; font-size: clamp(1.72rem, 3.6vw, 2.55rem); line-height: 1.32; margin-bottom: 1rem; } .zitatband cite { font-family: var(--sans); font-style: normal; font-size: 0.9rem; color: rgba(255, 255, 255, 0.75); } /* Ablauf der Zusammenarbeit */ /* Ablauf in Schritten Kein Kreis mit Symbol und Verbindungspfeil mehr - das ist das Muster jeder Agenturseite. Stattdessen grosse hohle Ziffern in Anton, also genau das Prinzip der Wortmarke: massiv und hohl nebeneinander, wie "DANI" gegen "ELA". Die Spalten stehen linksbuendig und werden durch feine Linien getrennt statt durch Pfeile verbunden - die Ziffern sagen die Reihenfolge deutlich genug. Die Symbolfelder in ACF sind damit entfallen. dani_icon() bleibt, es traegt weiterhin das Telefonzeichen im Kontaktaufruf. */ /* Engeres Polster als ein gewoehnlicher Abschnitt - die dritte Ausnahme von der Regel, und wie die anderen beiden mit Grund. Gemessen am 22.09.2026: 552 px Kasten bei 272 px Inhalt. Die Reihe ist niedrig und breit, sie fuellt die Flaeche nicht wie ein Textblock oder ein Bild. Mit --raum-xl standen oben und unten zusammen 208 px Polster um 272 px Inhalt, dazu 72 px unter der Ueberschrift: mehr als die Haelfte des Bandes war leer. --raum-l aussen, --raum-m unter der Ueberschrift. Das Band fasst die Reihe damit, statt sie in einem Kasten schwimmen zu lassen. */ .ablauf { background: var(--stein); padding-block: var(--raum-l); } .ablauf__kopf { text-align: center; margin-bottom: var(--raum-m); } .ablauf__liste { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(var(--spalten, 4), 1fr); gap: var(--raum-m); max-width: 62rem; } /* Ab fuenf Schritten nimmt die Reihe den ganzen Container: 62 rem durch fuenf waeren 172 px je Spalte, darin steht die 90-px-Blase mit kaum Luft daneben. Ueber die volle Breite sind es 210 px. Die Zwischenstufe bei 1100 px muss VOR den Regeln fuer 768 und 560 px stehen - gleiche Spezifitaet, es gewinnt die spaetere. */ .ablauf__liste--breit { max-width: none; } @media (max-width: 1100px) { .ablauf__liste--breit { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Die Spalten stehen mittig, seit dem 22.09.2026. Linksbuendig sass der Inhalt jeder Spalte an deren linker Kante. Die erste Blase stand damit am linken Rand der Reihe, die letzte aber nicht am rechten - dort blieb der Rest der letzten Spalte leer. Die Reihe war nach rechts offen und nicht auf die Bandmitte bezogen. Mittig ist die Reihe symmetrisch zur Mitte, und sie nimmt die Ueberschrift darueber auf, die ebenfalls mittig steht. Der Text ist kurz genug dafuer - ein Satz, keine Erzaehlung. Keine senkrechten Trennlinien: die Blasen tragen den Rhythmus selbst, Linien daneben kaempfen mit den runden Formen. */ .ablauf__schritt { padding-left: 0; text-align: center; } /* Blase um die Ziffer Kreis im hellen Akzentton, darin die hohle Ziffer in Anton - massiv und hohl nebeneinander wie in der Wortmarke. Der Rueckfall ohne text-stroke ist eine massive dunkle Ziffer, nicht die Farbe der Blase. Wer hier den hellen Ton als Rueckfall setzt, loescht die Ziffer in jedem Browser ohne text-stroke. */ .ablauf__blase { position: relative; display: grid; place-items: center; width: 5.6rem; height: 5.6rem; margin-inline: auto; margin-bottom: var(--raum-s); border-radius: 50%; background: var(--eukalyptus-hell); font-family: var(--display); font-size: 2.9rem; line-height: 1; /* Anton sitzt in der Zeile etwas tief, das hebt die Ziffer optisch in die Kreismitte. */ padding-bottom: 0.08em; color: var(--eukalyptus-tief); transition: transform 0.35s ease; } @supports (-webkit-text-stroke: 1px red) { .ablauf__blase { color: transparent; -webkit-text-stroke: 2px var(--eukalyptus-tief); } } /* Blase mit Symbol statt Ziffer. Der Strich der Zeichnung faerbt sich ueber currentColor - die Farbe muss hier also wieder sichtbar sein. Die Regel steht bewusst NACH dem @supports-Block darueber: der setzt fuer die Ziffer color auf transparent, und das wuerde sonst auch die Zeichnung ausloeschen. 26 px ist die Groesse, die dani_icon() ins SVG schreibt; 2 rem hebt sie auf das Mass, das neben einer 2,9-rem-Ziffer standhaelt. Die Ziffernkorrektur (padding-bottom, Anton sitzt tief) faellt weg, eine Zeichnung steht von selbst mittig. */ .ablauf__blase--symbol { color: var(--eukalyptus-tief); -webkit-text-stroke: 0; padding-bottom: 0; } .ablauf__blase--symbol svg { width: 2rem; height: 2rem; stroke-width: 1.5; } /* Der Ring liegt hinter der Blase und blueht beim Ueberfahren nach aussen auf. Kein Keyframe, sondern ein Uebergang: er laeuft nur, solange der Zeiger da ist, und nicht von selbst. */ .ablauf__blase::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--eukalyptus); opacity: 0; transition: transform 0.45s ease, opacity 0.45s ease; } .ablauf__schritt:hover .ablauf__blase { transform: translateY(-0.28rem); } .ablauf__schritt:hover .ablauf__blase::before { opacity: 0.6; transform: scale(1.22); } @media (prefers-reduced-motion: reduce) { .ablauf__blase, .ablauf__blase::before { transition: none; } .ablauf__schritt:hover .ablauf__blase { transform: none; } .ablauf__schritt:hover .ablauf__blase::before { transform: none; opacity: 0.6; } } .ablauf__titel { font-size: 1.15rem; line-height: 1.3; margin-bottom: 0.5rem; } /* 21ch trug, solange jeder Schritt ein Halbsatz war ("Du meldest dich, ich rufe zurueck"). Seit dem 22.09.2026 steht im ersten Schritt der Startseite ein Text aus zwei Saetzen - bei 21ch waeren das acht Zeilen von je drei Woertern, ein Band statt eines Absatzes. 30ch ist dasselbe Mass, das die einspaltige Ansicht unter 560 px schon benutzt; die kurzen Schritte der Zeremonieseiten aendern sich davon nicht, sie sind kuerzer als 21 Zeichen je Zeile ohnehin nicht. */ .ablauf__text { font-size: 0.95rem; color: var(--tinte-weich); line-height: 1.55; max-width: 30ch; margin-inline: auto; } /* Wege aus dem letzten Schritt heraus (Startseite). Die Liste traegt keine Aufzaehlungszeichen: sie steht unter einem mittigen Text, und Punkte davor wuerden die Mitte brechen. Die Links sind .textlink wie im uebrigen Fliesstext - eine zweite Schaltflaeche neben der grossen im Kontaktbereich waere eine Konkurrenz, die der Abschnitt nicht braucht. */ .ablauf__wege { list-style: none; margin: var(--raum-s) 0 0; padding: 0; font-size: 0.95rem; line-height: 1.6; } .ablauf__wege li + li { margin-top: 0.25rem; } /* Ausbildung und Zertifikate */ .quali__liste { list-style: none; margin: 0 auto; padding: 0; max-width: 48rem; border-top: 1px solid var(--linie); } .quali__eintrag { display: grid; grid-template-columns: 6.5rem 1fr auto; align-items: center; gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--linie); } .quali__jahr { font-family: var(--sans); font-size: 0.85rem; letter-spacing: 0.06em; color: var(--messing); padding-top: 0.2rem; } .quali__titel { font-size: 1.2rem; line-height: 1.35; margin-bottom: 0.25rem; } .quali__detail { color: var(--tinte-weich); font-size: 0.98rem; line-height: 1.55; margin: 0; } .quali__bild img { width: 72px; height: 72px; object-fit: contain; } /* Stimmen zur Arbeit Karten auf dem Grundton, also runde Ecken - keine ganzbreite Flaeche. Das Zitat steht in derselben Handschrift wie die Zitatkarten im Brief; hier aber dunkel auf hell, nicht creme auf gruen. Drei gruene Kaesten hintereinander waeren nach dem Markenband und dem Kontaktbereich die dritte Farbflaeche im unteren Drittel. Der Strich unter dem Namen ist derselbe wie an den Abschnittsueberschriften, nur kuerzer und in Messing: er markiert das Ende des Zitats, ohne eine zweite Ueberschrift zu behaupten. */ .stimmen__kopf { margin-bottom: var(--raum-l); } /* Die Bahn: waagerecht scrollbar, rastet an den Karten ein. Bis zum 24.09.2026 war das ein Raster mit drei Spalten. Mit vier Stimmen je Seite ging das nicht mehr auf - vier Karten nebeneinander sind auf keinem Schirm zu lesen, und eine halbleere zweite Reihe sieht aus wie ein Fehler. overflow-x mit scroll-snap statt einer Bibliothek: das Blaettern kann der Browser selbst, samt Wischen, Tastatur und Traegheit auf dem Telefon. JavaScript setzt nur die beiden Pfeile daneben. */ /* Eine Stimme zur Zeit, auf Silvans Wunsch vom 24.09.2026 - vorher drei nebeneinander. Damit braucht die Bahn eine Lesebreite: ein einzelner Satz ueber die vollen 1180 px waere eine Zeile quer ueber den Schirm. 46 rem ist das Mass des Hauses - so breit laufen auch der Brief der Trauerfeier und die Fragenliste. */ .stimmen__bahn { position: relative; max-width: 46rem; margin-inline: auto; } .stimmen__liste { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--raum-m); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; /* Die Leiste waere unter den Karten ein zweiter, grauer Strich - gefuehrt wird mit den Pfeilen. Gewischt werden kann trotzdem. */ scrollbar-width: none; -ms-overflow-style: none; } .stimmen__liste::-webkit-scrollbar { display: none; } /* Eine Karte fuellt den Ausschnitt ganz, die naechste liegt vollstaendig dahinter. Kein angeschnittener Rest am Rand: die Pfeile sagen, dass es weitergeht. */ .stimme { flex: 0 0 100%; scroll-snap-align: start; background: var(--stein); border-radius: var(--rundung); padding: var(--raum-m); /* Mittig, seit dem 24.09.2026 - waagerecht und senkrecht. Solange drei Karten nebeneinander standen, war linksbuendig richtig: drei Spalten mit unterschiedlich langen Zitaten lesen sich nur an einer gemeinsamen linken Kante als Reihe. Allein in der Karte hat ein Satz keine Nachbarn, an denen er sich ausrichten muesste. Senkrecht mittig, weil alle Karten so hoch sind wie die laengste Stimme: eine kurze saesse sonst oben und liesse ein Loch. */ display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } /* Die beiden Pfeile stehen links und rechts neben der Bahn und ueberlappen ihre Kante leicht - dadurch braucht die Bahn keine eigene Spalte dafuer, und auf schmalem Schirm bleibt die Karte so breit wie der Text sie braucht. Sichtbar erst mit JavaScript (Klasse stimmen--blaettern) und nur, solange es ueberhaupt etwas zu blaettern gibt: bei drei Stimmen auf einem breiten Schirm passt alles nebeneinander, dann verschwinden sie wieder. */ .stimmen__pfeil { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: none; place-items: center; width: 2.9rem; height: 2.9rem; padding: 0; border: 2px solid var(--eukalyptus); border-radius: 50%; background: var(--papier); color: var(--eukalyptus); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .stimmen--blaettern .stimmen__pfeil { display: grid; } .stimmen__pfeil:hover, .stimmen__pfeil:focus-visible { background: var(--eukalyptus); color: var(--papier); } /* Spezifischer als die Zeile darueber, sonst zeigt sie den Pfeil auch dann, wenn JavaScript ihn als ueberfluessig ausgeblendet hat: .stimmen--blaettern .stimmen__pfeil hat zwei Klassen, ein blosses .stimmen__pfeil[hidden] nur eine plus Attribut - und verliert. */ .stimmen--blaettern .stimmen__pfeil[hidden] { display: none; } .stimmen__pfeil--zurueck { left: -1.1rem; } .stimmen__pfeil--vor { right: -1.1rem; } /* Der Haken im Kreis ist gezeichnet, nicht getippt - wie ueberall sonst auf dieser Seite. Zwei Kanten, um 45 Grad gedreht. */ .stimmen__pfeil span { width: 0.62rem; height: 0.62rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; } .stimmen__pfeil--vor span { transform: rotate(-45deg) translate(-0.1rem, -0.1rem); } .stimmen__pfeil--zurueck span { transform: rotate(135deg) translate(-0.1rem, -0.1rem); } @media (prefers-reduced-motion: reduce) { .stimmen__pfeil { transition: none; } } .stimme__zitat { margin: 0; border: 0; padding: 0; /* Kein flex: 1 mehr - das schob den Namen an den unteren Rand, was nur bei mehreren Karten nebeneinander noetig war. Jetzt steht er direkt unter dem Zitat. */ flex: 0 1 auto; /* Auch in einer 46-rem-Karte bleibt der Satz in Lesebreite. */ max-width: 34rem; } /* Kleiner als im Brief: dort steht ein Satz allein ueber die Lesespalte, hier stehen drei nebeneinander. */ .stimme__zitat p { font-family: var(--schreib); font-weight: 600; font-size: clamp(1.4rem, 3.4vw, 1.75rem); line-height: 1.32; color: var(--tinte); margin: 0; } .stimme__name { font-family: var(--sans); font-size: 0.95rem; color: var(--tinte-weich); margin: var(--raum-s) 0 0; padding-top: var(--raum-s); position: relative; } /* Gruen, nicht Messing - auf Silvans Wunsch vom 22.09.2026. Damit ist es derselbe Strich wie unter den Abschnittsueberschriften und in der Navigation: 2 px in --eukalyptus, nur kuerzer. Das Messing bleibt der Website als sparsamer Zweitakzent erhalten, hier trug es eine dritte Farbe in eine Karte, die schon Gruen und Tinte zeigt. */ /* Der Strich sitzt mittig ueber dem Namen, wie der Name selbst. */ .stimme__name::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1.75rem; height: 2px; background: var(--eukalyptus); } /* Auf schmalem Schirm stehen die Pfeile UNTER der Karte, nicht daneben: daneben lagen sie zur Haelfte ausserhalb des Fensters - und schob man sie nach innen, deckten sie bei kurzen Stimmen den Text zu (Danielas Beobachtung vom 25.09.2026). Dafuer wird die Bahn ein Raster: die Karte nimmt beide Spalten der ersten Zeile, die beiden Pfeile teilen sich die zweite. DIE SPALTEN SIND 1fr, NICHT max-content. Das war der Fehler vom 25.09.2026, an dem Daniela die Karten auf ihrem Telefon an beiden Seiten angeschnitten sah: max-content misst den Inhalt, und der Inhalt der Bahn sind vier Karten nebeneinander, jede so breit wie ihr laengster Satz ohne Umbruch. Die beiden Spalten wuchsen also auf ein Vielfaches des Schirms, justify-content: center stellte das Ganze mittig - und damit ragte es links UND rechts hinaus. Dass die Liste selbst scrollt, half nicht: ein Scrollcontainer hat zwar eine Mindestgroesse von null, seine max-content-Groesse richtet sich aber weiter nach dem Inhalt. 1fr rechnet dagegen vom Container aus und kann gar nicht ueberlaufen. min-width: 0 steht als zweite Sicherung daneben. */ @media (max-width: 700px) { .stimmen__bahn { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-s); } .stimmen__liste { grid-column: 1 / -1; min-width: 0; } /* Die beiden Pfeile ruecken an die Mitte der Zeile zusammen, statt ihre halbe Spalte zu fuellen. */ .stimmen__pfeil { position: static; transform: none; grid-row: 2; } .stimmen__pfeil--zurueck { grid-column: 1; justify-self: end; } .stimmen__pfeil--vor { grid-column: 2; justify-self: start; } } /* Der Abschnitt "Ueber mich als Trauerrednerin" steht auf der Trauerfeier zwischen dem Ablaufband und den Stimmen - und ist damit die einzige Stelle der Seite, an der zwei Abschnitte auf Papier direkt aufeinander folgen. Zweimal --raum-xl macht dort 13 rem, doppelt so viel wie jeder andere Abstand der Seite: ueberall sonst steht dazwischen ein Band, und ein Band traegt sein Polster nach innen. Nachgerechnet am 26.09.2026 - Brief zur Bandkante des Ablaufs 6,5 rem, Bandkante zur Ueberschrift des Duo-Abschnitts 6,5 rem, Fragenliste zum Markenband 6,5 rem, Stimmen zur eigenen Frage und weiter zu den Fragen je 4 rem, und unter dem Portrait 13 rem. Danielas Beobachtung, dass es dort weiter auseinander steht, war also keine Ansichtssache. Ein Polster genuegt, dann liegt die Naht auf demselben Mass wie die uebrigen Themenwechsel der Seite. Nicht --raum-l wie bei den Stimmen weiter unten: dort gehoeren zwei Abschnitte zusammen, hier folgt auf Daniela selbst, was andere ueber sie sagen - ein Themenwechsel, nur ohne Band dazwischen. :has() waehlt dafuer den Duo-Abschnitt aus und nicht jeden Vorgaenger: auf der Freien Trauung geht den Stimmen das Ablaufband voran (.abschnitt .ablauf), und dessen Bandkante braucht den ganzen Abstand - sonst stiesse die Ueberschrift auf die Farbflaeche. Ohne :has-Unterstuetzung bleiben es 13 rem, also der Stand von vorher. */ .abschnitt:has(> .duo) + .stimmen { padding-top: 0; } /* Dieselbe Naht auf der Startseite: unter dem Abschnitt "Hallo, ich bin Daniela." folgen die drei Siegel, und dazwischen standen ebenfalls zweimal --raum-xl - 13 rem, und darin sitzt oben noch der handgeschriebene Gruss, der von sich aus Luft mitbringt (--raum-m ueber der Zeile, dazu die zwei Grad Drehung). Daniela hat es am 28.09.2026 als zu weit gesehen. Ein Polster genuegt, wie bei den Stimmen: was folgt, ist ein Themenwechsel ohne Band - erst Daniela, dann ihre Qualifikationen. Auf Ueber mich greift die Regel nicht, dort geht den Siegeln der Videokasten voran und dessen Bandkante braucht ihren Abstand. Ohne :has-Unterstuetzung bleiben es 13 rem. */ .abschnitt:has(> .duo) + .abschnitt.siegel { padding-top: 0; } /* Danielas eigene Frage steht naeher an den Stimmen als ein gewoehnlicher Abschnitt: zwischen zwei Abschnitten liegen sonst zweimal --raum-xl, also 13 rem. Das ist richtig, wenn zwei Themen aufeinander folgen - hier folgt auf das, was andere sagen, Danielas eigene Frage, und die beiden gehoeren zusammen. Zusammen macht das --raum-l statt 13 rem. Ohne :has-Unterstuetzung greift nur die zweite Regel; dann sind es 6,5 rem, also immer noch die Haelfte. Die Regel steht seit dem 30.09.2026 auf .faq statt auf .faq--einzeln und trifft damit BEIDE Zeremonieseiten: auf der Trauerfeier folgt den Stimmen Danielas eigene Frage (die traegt beide Klassen), auf der Freien Trauung seitdem unmittelbar die Fragenliste. Derselbe Grund, dieselbe Naht - was andere sagen und was der Leser fragen wuerde, ist ein Block. */ .stimmen:has(+ .faq) { padding-bottom: var(--raum-l); } .stimmen + .faq { padding-top: 0; } /* Dasselbe zwischen der eigenen Frage und der Fragenliste: eine Frage und die Fragen danach sind ein Block, kein Themenwechsel. */ .faq--einzeln:has(+ .faq) { padding-bottom: var(--raum-l); } .faq--einzeln + .faq { padding-top: 0; } /* Fragen und Antworten */ .faq__kopf { text-align: center; margin-bottom: var(--raum-l); } .faq__liste { max-width: 46rem; margin-inline: auto; border-top: 1px solid var(--linie); } .faq__eintrag { border-bottom: 1px solid var(--linie); } .faq__eintrag summary { list-style: none; cursor: pointer; padding: 1.15rem 2.5rem 1.15rem 0; position: relative; font-size: 1.1rem; line-height: 1.45; } .faq__eintrag summary::-webkit-details-marker { display: none; } .faq__eintrag summary::after { content: ""; position: absolute; right: 0.4rem; top: 1.65rem; width: 0.65rem; height: 0.65rem; border-right: 1px solid var(--eukalyptus-tief); border-bottom: 1px solid var(--eukalyptus-tief); transform: rotate(45deg); transition: transform 0.2s ease; } .faq__eintrag[open] summary::after { transform: rotate(-135deg); top: 1.9rem; } .faq__eintrag summary:hover { color: var(--eukalyptus-tief); } .faq__antwort { padding: 0 2.5rem 1.35rem 0; color: var(--tinte-weich); } .faq__antwort p:last-child { margin-bottom: 0; } /* Aufruf */ .aufruf { background: var(--stein); padding-block: var(--raum-xl); } /* Seit dem 24.09.2026 traegt der Kasten nur noch Ueberschrift, Satz und die Schaltflaeche - Nummer und Adresse sind heraus (siehe dani_aufruf()). Mit einem einzigen Weg steht er mittig: linksbuendig sass der Block mit der Schaltflaeche an der linken Kante eines 1180 px breiten Bandes, rechts daneben blieb die halbe Flaeche leer. Derselbe Griff wie beim Abschnittskopf - mittiger Satz, mittiger Strich unter der Ueberschrift. Der Satz darin bleibt kurz und bringt seine Umbrueche selbst mit (nl2br). Waechst er zu einer Erzaehlung ueber mehrere Absaetze, gehoert er wieder linksbuendig - siehe dani_einleitung(). */ .aufruf__innen { max-width: 40rem; margin-inline: auto; text-align: center; } .aufruf h2 { margin-bottom: var(--raum-s); } .aufruf__text { font-size: 1.15rem; color: var(--tinte-weich); margin-bottom: var(--raum-m); } .aufruf__kontakt { display: flex; flex-wrap: wrap; gap: var(--raum-s) var(--raum-m); align-items: center; justify-content: center; font-family: var(--sans); font-size: 1.05rem; } /* Ohne Satz darueber haengt die Schaltflaeche sonst an der Ueberschrift - .aufruf h2 bringt nur --raum-s mit. */ .aufruf h2 + .aufruf__kontakt { margin-top: var(--raum-m); } /* Die folgenden Regeln stehen seit dem 24.09.2026 auf keinem Inhalt mehr: im Kasten ist nur noch die Schaltflaeche. Sie bleiben stehen, weil eine Zeile in dani_aufruf() Nummer und Adresse zurueckholt - und dann sollen sie aussehen wie vorher. */ .aufruf__kontakt a:not(.btn) { color: var(--eukalyptus-tief); text-decoration: none; } .aufruf__kontakt a:not(.btn):hover { color: var(--tinte); text-decoration: underline; } /* Die Telefonnummer ist der wichtigste Handlungspfad der Seite und steht seit dem 23.09.2026 unter dem Stift - dieselbe Zeichnung wie hinter den Zitaten, in derselben Farbe. Darueber die Zeile "Telefon / WhatsApp". Sie beantwortet eine Frage, die sich sonst jeder selbst stellt: ob man auch schreiben darf. Wer gerade einen Menschen verloren hat, ruft nicht immer gern an. Zwei Dinge haengen daran: - Die Nummer traegt jetzt Tinte statt Eukalyptus. Gruene Schrift auf gruenem Stift waere beides zugleich; unter dem Stift steht sie bei 7,9:1, als Link erkennbar bleibt sie durch den Stift selbst. - Der Hinweis steht in --tinte-weich, nicht in --grau. Auf Stein kaeme das Grau auf 4,49:1 und damit knapp unter die Anforderung; --tinte-weich steht bei 6,6:1. */ /* inline-block, NICHT inline-flex: der Stift zeichnet sich in einen Inline-Kasten, und der sitzt eine Oberlaenge unter der Kastenkante (siehe die Rechnung beim Zitat). Als Flex-Element wuerde die Nummer zum Block, ihr Kasten waere so hoch wie die Zeilenhoehe, und der Strich saesse eine halbe Durchschusshaelfte zu hoch - ueber der Grundlinie statt auf ihr. */ .aufruf__telefon { display: inline-block; line-height: 1.3; } .aufruf__telefon .kontakt__hinweis { display: block; margin-bottom: 0.3rem; } .aufruf__kontakt a.aufruf__telefon, .aufruf__kontakt a.aufruf__telefon:hover { color: var(--tinte); text-decoration: none; } .kontakt__hinweis { font-size: 0.78rem; letter-spacing: 0.05em; line-height: 1.2; color: var(--tinte-weich); } /* Auf der Kontaktseite traegt die Nummer denselben Stift. Dort steht der Hinweis schon als .kontakt__label darueber, er heisst nur anders ("Telefon / WhatsApp" statt "Telefon"). */ .kontakt__daten a.stift, .kontakt__daten a.stift:hover { color: var(--tinte); text-decoration: none; } /* Zwei Wege Der Abschnitt der Seite "Fuer Unternehmen", seit dem 06.10.2026. ER STAND EINEN TAG LANG AUF STEIN, ueber die volle Breite von Kante zu Kante, und war damit die groesste Farbflaeche der ganzen Website: vier Absaetze, ein Termin, ein Nachsatz und zwei Wege in einem einzigen beigen Band. Seit dem 07.10.2026 steht er auf Papier wie jeder gewoehnliche Abschnitt - Danielas Beobachtung, es solle "vom Layout den anderen Seiten entsprechen". Beige ist genau eine Stelle geblieben, der Kontaktblock ganz unten, und der ist ein Objekt auf dem Grundton mit Radius: derselbe Kasten wie auf der Kontaktseite, und damit eine der beiden Formen, die die Seite kennt. Damit traegt die Flaeche keine Farbe mehr - .wege steht in keiner der beiden Nachbarschaftslisten ("Zwei Farbflaechen stossen nie direkt aufeinander") und braucht auch die Ausnahme unter dem Markenband nicht mehr. Das Polster kommt von .abschnitt. ZWEISPALTIG, seit demselben Tag: Text links, Foto rechts, in den Spaltenbreiten von .duo--hochkant.duo--gedreht. Das Band glich vorher aus, was dem Text an Masse fehlt; auf Papier stuende er sonst als schmale Saeule auf offener Flaeche. Mittig und nicht oben buendig, wie .duo auch: der Text ist hier deutlich hoeher als das Bild, und oben buendig liesse unter dem Foto ein langes Stueck leer stehen. LINKSBUENDIG, anders als .aufruf__innen. Im Kontaktkasten steht ein Satz, hier stehen vier Absaetze, und fuer die gilt die Regel aus dani_einleitung(): mittiger Fliesstext faengt jede Zeile an einer anderen Kante an. 38 rem ist die Lesespalte des Hauses (.fliesstext), nicht die 40 rem des Kontaktkastens: dort steht ein mittiger Satz, hier laufender Text, und ab etwa 75 Zeichen je Zeile findet das Auge beim Zeilenwechsel den Anfang nicht mehr zuverlaessig. Der Deckel gilt auch neben dem Bild - die Spalte ist dort breiter als die Lesespalte, und die rechte Luft steht dann zwischen Text und Foto. */ /* DER DECKEL SITZT AUF DEM LESETEXT, NICHT AUF DEM BLOCK, und das ist seit dem 07.10.2026 so. Lag er auf .wege__innen, galt er auch fuer die Ueberschrift - und die ist kein Fliesstext: die 75-Zeichen-Regel hat mit ihr nichts zu tun. Gemessen hat das eine Zeile gekostet: "Trauerrednerin benoetigt?" braucht bei 54,4 px Grad 658 px, die Lesespalte hat 608, die Rasterspalte 702. Also brach die H1 dreizeilig und mitten im Satz ("... benoetigt? Termin / reservieren"). Ohne Deckel steht die Frage in einer Zeile und die Aufforderung in der naechsten. Der Kicker steht aus demselben Grund mit frei: er gehoert zur Ueberschrift und muesste sonst als einziger an einer anderen Kante enden. */ .wege__text, .wege__weg, .wege__nachsatz, .wege__kontakt { max-width: 38rem; } /* Ohne Bild bleibt der Block in der Mitte der Flaeche stehen, wie vorher im Band. Mit Bild wird daraus die linke Spalte - dann kein margin-inline: auto, sonst saesse er mittig in seiner eigenen Spalte und die Luft stuende auf beiden Seiten. */ .wege__raster:not(.wege__raster--bild) .wege__innen { max-width: 38rem; margin-inline: auto; } .wege__raster--bild { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } /* 3:4 wie jedes stehende Bild der Website (.duo--hochkant), derselbe Radius wie dort. Ein Foto in einem eigenen Rahmen ist ein Objekt auf dem Grundton, und die tragen hier 14 px. */ .wege__bild img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--rundung); } /* Die Zeile ueber der Ueberschrift nennt die Gruppe, an die sich die Seite wendet ("Fuer Bestatter"). Dieselben Maße wie die Namenszeile im schlichten Markenkopf (.marke-hero__name): Sans, Versalien, 0,14 em Sperrung - nur in Eukalyptus statt in Creme, weil sie hier auf Papier steht und nicht auf einem Foto. Und in der TIEFEN Variante: nachgerechnet steht --eukalyptus auf Papier bei 4,94:1, --eukalyptus-tief bei 7,49:1 - fuer eine kleine, gesperrte Versalzeile ist der Abstand zur Anforderung von 4,5:1 sonst duenner, als er sein muss. Es ist ein ABSATZ im Kleid einer Zeile, keine zweite Ueberschrift: die H1 steht direkt darunter, und eine Ueberschrift davor waere entweder eine zweite H1 oder eine H2 vor der H1. Dieselbe Loesung wie .seitenkopf-schmal__titel auf Ueber mich, nur andersherum. */ .wege__kicker { font-family: var(--sans); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.14em; line-height: 1.4; text-transform: uppercase; color: var(--eukalyptus-tief); margin: 0 0 var(--raum-s); } /* Der Strich unter der Ueberschrift BLEIBT, auch mit der Zeile darueber: er ist die Hausmarkierung jeder Abschnittsueberschrift, und der Kicker tut etwas anderes - er nennt die Gruppe, nicht den Abschnitt. Die Selektorliste fuehrt .wege__kopf::after weiterhin. */ .wege__kopf { margin-bottom: var(--raum-m); } .wege__text { color: var(--tinte-weich); } .wege__text p:last-child { margin-bottom: 0; } /* Jeder Weg bekommt den Satz, der ihn erklaert, unmittelbar darueber - deshalb steht die Schaltflaeche naeher an ihrem Satz als am naechsten Absatz. --raum-m nach oben, --raum-l nach unten: das ist der Abstand, der die beiden Wege voneinander trennt. */ .wege__weg { margin-top: var(--raum-m); margin-bottom: 0; } .wege__nachsatz { margin-top: var(--raum-l); margin-bottom: 0; color: var(--tinte-weich); } /* Der Kontaktblock erbt von .kontakt__daten, was ihn zum Kasten macht: Stein, Radius, Polster und die Linkfarben. Er soll hier und auf der Kontaktseite derselbe Kasten sein. GEFUELLT IST ER ANDERS, seit dem 07.10.2026 und nach zwei Anlaeufen. Auf der Kontaktseite stehen vier Angaben flach untereinander in einer schmalen Spalte, jede mit ihrer kleinen grauen Beschriftung darueber. Hier sind es drei Wege in einem 608 px breiten Kasten, und dort trug das nicht: kleine graue Beschriftung, markierte Nummer und umrandete Schaltflaeche sind drei verschiedene Register, und auf so wenig Flaeche lasen sie sich als Durcheinander - erst untereinander mit der Schaltflaeche neben der Nummer, dann in zwei Spalten. Danielas Urteil blieb beide Male dasselbe. JETZT EINE LISTE: Beschriftung links, Weg rechts, eine Zeile je Weg, dazwischen eine feine Linie ("Telefon: Nummer / WhatsApp: Button / E-Mail: Adresse" - ihre Vorgabe). Jede Zeile sagt dasselbe in derselben Form, und die Schaltflaeche steht IN der Reihe statt daneben. Das ist der Punkt: nicht die Schaltflaeche war falsch, sondern dass sie keine Zeile hatte. 9 rem fuer die Beschriftungsspalte: "WhatsApp:" ist mit 9 Zeichen die laengste und braucht bei 1,05 rem rund 7,3 rem. Fest und nicht max-content, damit die Wege auf einer Kante stehen - das ist die halbe Ruhe der Reihe. */ .wege__kontakt { margin-top: var(--raum-m); margin-bottom: 0; } .wege__zeile { display: grid; grid-template-columns: 9rem 1fr; gap: 0.75rem; align-items: baseline; padding-block: 0.85rem; } .wege__zeile:first-child { padding-top: 0; } .wege__zeile:last-child { padding-bottom: 0; } /* Die Trennlinie gehoert zwischen die Zeilen, nicht an den Rand - deshalb border-top am Geschwister und nicht border-bottom an jeder. --linie auf Stein ist ein Hauch, und mehr soll es nicht sein: die Reihe wird gegliedert, nicht in Felder zerlegt. */ .wege__zeile + .wege__zeile { border-top: 1px solid var(--linie); } /* Beschriftung und Weg stehen im GLEICHEN Grad. Unterschiedliche Groessen waren Teil dessen, was unruhig aussah; getrennt sind die beiden schon durch die Spalte und durch die Farbe. --tinte-weich und nicht --grau: auf Stein kaeme das Grau auf 4,49:1 und damit knapp unter die Anforderung, --tinte-weich auf 6,65:1. Dieselbe Rechnung wie beim Hinweis unter der Nummer auf der Kontaktseite. */ .wege__was { font-weight: 400; color: var(--tinte-weich); } .wege__wie { margin: 0; } /* Die Schaltflaeche sitzt in ihrer Zeile und nimmt sich nur die Breite ihrer Beschriftung. inline-flex und nicht flex: in der Rasterzelle braucht sie keinen eigenen Umbruch mehr - genau den hat ihr die Zeile abgenommen. Das margin-top von .btn--whatsapp gilt der Kontaktseite, wo sie unter der Nummer haengt; hier faellt es weg, sonst stuende sie tiefer als ihre eigene Beschriftung. */ .wege__wie .btn--whatsapp { margin-top: 0; max-width: 100%; } /* Die Zeile der Schaltflaeche ist hoeher als die beiden anderen - eine Schaltflaeche bringt ihr Polster mit. Deshalb steht sie mittig statt auf der Grundlinie: auf der Grundlinie haengte ihre Beschriftung in der Mitte des Knopfes. */ .wege__zeile:has(.btn) { align-items: center; } /* UNTER 560 PX UNTEREINANDER, Beschriftung ueber dem Weg - also wieder die Form, die der Kasten auf der Kontaktseite ueberall hat. Nachgerechnet, nicht gegriffen: die Beschriftungsspalte misst 9 rem (144 px), die WhatsApp-Schaltflaeche braucht mit Symbol, Beschriftung und Polster 242 px, dazu 12 px Abstand - zusammen 398 px INNEN. Auf einem 390-px-Schirm bleiben nach Seitenrand und Kastenpolster 294 px: die Schaltflaeche brach auf zwei Zeilen und "hallo@danielaloeff.de" stiess an die Kante. Die Rechnung geht bis rund 520 px Fensterbreite auf; 560 ist der naechste Haltepunkt der Website darueber. Die Doppelpunkte bleiben stehen. Sie gehoeren zur Beschriftung und nicht zur Anordnung - eine Zeile "Telefon:" mit der Nummer darunter liest sich so richtig wie nebeneinander. */ @media (max-width: 560px) { .wege__zeile { display: block; } .wege__was { margin-bottom: 0.25rem; } .wege__wie .btn--whatsapp { margin-top: 0.35rem; } } /* Das Terminzeichen neben der Zeile, nicht auf der Schriftlinie - dieselbe Bauform wie .btn--whatsapp, und aus demselben Grund mit justify-content: unter 380 px setzt .btn die Breite auf 100% und zentriert mit text-align, was bei einem Flex-Kasten nicht greift. Zeichen und Zeile stuenden sonst links an der Kante einer Schaltflaeche ueber die ganze Breite. */ /* Und eine Zeile, die .btn NICHT mitbringt: dort steht line-height: 1, weil eine Schaltflaechenbeschriftung normalerweise einzeilig ist. "Verfuegbarkeit pruefen & Zeitraum reservieren" ist mit 42 Zeichen die laengste der Website und bricht auf dem Telefon um - nachgerechnet bei 360 px Schirm: die Schaltflaeche nimmt sich dort die volle Breite (323 px), nach Polster, Zeichen und Abstand bleiben rund 248 px fuer eine Zeile, die bei 0,95 rem etwa 307 px braucht. Bei line-height 1 beruehren sich die beiden Zeilen. text-align gehoert dazu, sonst steht die zweite Zeile linksbuendig unter einer mittig gestellten ersten. */ .btn--termin { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; line-height: 1.3; text-align: center; } /* Unter 900 px untereinander, und das Bild faellt dabei von selbst unter den Text: im HTML steht es hinter dem Textblock, weil es auf dem Schirm rechts steht. Genau so soll es sein - ueber dem Text steht auf dieser Seite schon das Markenband mit Danielas Foto, und ein zweites hochkantes Bild vor der Ueberschrift schoebe die Sache noch einen Schirm nach unten. Der Deckel von 420 px ist derselbe wie beim hochkanten Duo: ueber die volle Breite eines 700-px-Schirms waere ein 3:4-Bild 930 px hoch und fuellte mehr als eine Bildschirmhoehe. */ @media (max-width: 900px) { .wege__raster--bild { display: block; } /* Der Deckel von 38 rem steht mittig auf der Flaeche, sobald der Text keine Spalte mehr ist: links buendig liesse er auf einem 700-px-Schirm 92 px Luft an der rechten Kante stehen. Er liegt auf den Inhalten, nicht auf dem Block - deshalb stehen sie hier einzeln. */ .wege__raster--bild .wege__innen { max-width: 38rem; margin-inline: auto; } .wege__bild { max-width: 420px; margin: var(--raum-l) auto 0; } } .btn--termin svg { width: 20px; height: 20px; flex: none; } /* --------------------------------------------------------------- 7. Video --------------------------------------------------------------- */ .video-block { margin: 0; } .video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--tinte); overflow: hidden; } .video img { width: 100%; height: 100%; object-fit: cover; } .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Der Play-Button steckt bereits im Vorschaubild. Die Flaeche bleibt klickbar, ist aber unsichtbar. */ .video__start { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; transition: background-color 0.2s ease; } .video__start:hover { background: rgba(31, 42, 45, 0.12); } .video__start:focus-visible { outline: 3px solid var(--eukalyptus); outline-offset: -3px; } .video__hinweis { font-family: var(--sans); font-size: 0.85rem; color: var(--grau); margin-top: 0.75rem; } /* --------------------------------------------------------------- 8. Kontakt --------------------------------------------------------------- */ .kontakt__raster { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; } .kontakt__daten { font-family: var(--sans); font-size: 1.05rem; line-height: 1.7; background: var(--stein); border-radius: var(--rundung); padding: clamp(1.5rem, 3vw, 2.25rem); } .kontakt__daten a { color: var(--eukalyptus-tief); text-decoration: none; } .kontakt__daten a:hover { text-decoration: underline; } .kontakt__label { display: block; font-size: 0.78rem; letter-spacing: 0.05em; color: var(--grau); line-height: 1.4; margin-top: 1.5rem; } .kontakt__label:first-child { margin-top: 0; } /* Der WhatsApp-Weg unter der Telefonnummer. Hohl (.btn--linie), nicht gefuellt: die Hauptsache dieser Seite ist das Formular daneben, und zwei gefuellte Schaltflaechen nebeneinander streiten sich. Kein Markengruen von WhatsApp - auf dieser Seite gibt es einen Akzent, und der ist Eukalyptus. display:flex statt inline-block, damit das Symbol neben der Zeile steht und nicht auf der Schriftlinie haengt; margin-top traegt den Abstand zur Nummer darueber, die als Inline-Element keinen hat. justify-content gehoert dazu: unter 380 px setzt .btn die Breite auf 100% und zentriert mit text-align, und das greift bei einem Flex-Kasten nicht - Symbol und Zeile stuenden links an der Kante einer Schaltflaeche ueber die ganze Breite. */ .btn--whatsapp { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; margin-top: 0.9rem; padding: 0.8rem 1.4rem; } .btn--whatsapp svg { width: 20px; height: 20px; flex: none; } /* .kontakt__daten a:hover unterstreicht jeden Link in diesem Kasten - auf einer Schaltflaeche sieht das nach Versehen aus. */ .kontakt__daten a.btn--whatsapp:hover { text-decoration: none; color: #fff; } /* Formular-Grundstil, greift bei Contact Form 7 und Fluent Forms */ .formular input[type="text"], .formular input[type="email"], .formular input[type="tel"], .formular textarea, .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea, .fluentform input[type="text"], .fluentform input[type="email"], .fluentform input[type="tel"], .fluentform textarea { width: 100%; font-family: var(--sans); font-size: 1rem; padding: 0.85rem 1rem; border: 1px solid var(--linie); border-radius: var(--rundung-klein); background: #fff; color: var(--tinte); margin-bottom: 1rem; } .formular textarea, .wpcf7 textarea, .fluentform textarea { min-height: 10rem; resize: vertical; } .fluentform .ff-el-input--label label { font-family: var(--sans); font-size: 0.9rem; color: var(--tinte-weich); font-weight: 400; } /* Absende-Button. Die Ausrufezeichen sind noetig, weil Fluent Forms Farben teilweise als Inline-Stil ausgibt. */ .fluentform .ff-btn-submit, .formular .ff-btn-submit { font-family: var(--sans) !important; font-size: 0.95rem !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: 0.01em; padding: 1.05rem 2rem !important; border: 1px solid var(--eukalyptus-tief) !important; border-radius: var(--rundung-klein) !important; background: var(--eukalyptus-tief) !important; color: #fff !important; box-shadow: none !important; text-transform: none !important; cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease; } .fluentform .ff-btn-submit:hover, .formular .ff-btn-submit:hover { background: var(--tinte) !important; border-color: var(--tinte) !important; color: #fff !important; } .fluentform .ff-btn-submit:focus-visible, .formular .ff-btn-submit:focus-visible { outline: 2px solid var(--messing); outline-offset: 3px; } /* Abstaende und Beschriftungen */ .fluentform .ff-el-group { margin-bottom: 1.35rem; } .fluentform .ff-el-input--label label { margin-bottom: 0.4rem; display: inline-block; } .fluentform .ff-el-is-required.asterisk-right label:after, .fluentform .ff-el-is-required.asterisk-left label:before { color: var(--messing); } .fluentform .ff-el-form-check-label, .fluentform .ff-el-input--content .ff-el-form-check { font-family: var(--sans); font-size: 0.95rem; color: var(--tinte-weich); } .fluentform select { width: 100%; font-family: var(--sans); font-size: 1rem; padding: 0.85rem 1rem; border: 1px solid var(--linie); border-radius: var(--rundung-klein); background: #fff; color: var(--tinte); } /* Auswahlkreise Seit dem 23.09.2026 traegt "Art der Zeremonie" im grossen Formular keine Auswahlliste mehr, sondern zwei Kreise. Bei zwei Moeglichkeiten ist das Ausklappmenue der Umweg: erst oeffnen, dann lesen, dann waehlen - drei Schritte fuer eine Frage, die man mit einem Blick beantwortet. Nebeneinander stehen beide Antworten von selbst da. Der Kreis ist gezeichnet, nicht der des Systems: appearance: none nimmt ihn weg, Rahmen und Punkt kommen aus der Palette. Der Punkt ist ein radial-gradient mit closest-side, damit sein Radius an der halben Kastenbreite haengt und nicht an der Diagonale - sonst waechst er beim Zoomen aus dem Ring heraus. Der Ring steht in --grau (5,4:1 auf Weiss), nicht in --linie: eine Linie, die eine Flaeche begrenzt, darf leise sein, ein Bedienelement muss man finden. Gefordert sind 3:1. */ .fluentform input[type="radio"], .fluentform input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin: 0; border: 1.5px solid var(--grau); border-radius: 50%; background: #fff; cursor: pointer; transition: border-color 0.18s ease, background-color 0.18s ease; } .fluentform input[type="checkbox"] { border-radius: var(--rundung-klein); } .fluentform input[type="radio"]:hover, .fluentform input[type="checkbox"]:hover { border-color: var(--eukalyptus); } .fluentform input[type="radio"]:checked, .fluentform input[type="checkbox"]:checked { border-color: var(--eukalyptus); background-image: radial-gradient(circle closest-side, var(--eukalyptus) 0 52%, transparent 55%); } .fluentform input[type="radio"]:focus-visible, .fluentform input[type="checkbox"]:focus-visible { outline: 2px solid var(--eukalyptus); outline-offset: 2px; } /* Kreis und Beschriftung liegen im selben