/* * Gestaltungssystem — Stand 24. August 2026 * ======================================== * * LEITREFERENZ: unvergessen-agentur.de. Uebernommen sind Gestaltung und * Aufbau - Typografie, Weissraum, Farbstrategie, Kopf, Fuss, Formular. * NICHT uebernommen ist die Verkaufsdramaturgie: keine Erfolgszahlen, keine * Testimonials, keine wiederholten Handlungsaufforderungen, keine * Problem-dann-Loesung-Inszenierung. Bei einem Bestatter waere das * uebergriffig - die Not ist bereits da. * * FARBEN aus dem Logo, Pixel ausgezaehlt: #404040 (der Kreis, 54 Prozent der * deckenden Pixel) und #8CA23E (Blatt und Schriftzug). Jeder Wert unten ist * mit `node tools/kontrast.mjs` nachgerechnet. * * SCHRIFT: Instrument Sans, dieselbe wie die Referenz, selbst gehostet als * variable Datei mit 27,9 KB. * * Drei Saetze, die jede Einzelentscheidung schlichten: * 1. Sehen zwei Loesungen gleich gut aus, gewinnt die besser lesbare. * 2. Bewegt sich etwas, braucht es dafuer einen Grund ausserhalb der Optik. * 3. Der Besucher sucht einen Namen oder eine Nummer. Alles dazwischen * ist zu rechtfertigen. */ *, *::before, *::after { box-sizing: border-box; } /* ========================================================================== 1. TOKEN ========================================================================== */ :root { /* --- Flaechen ------------------------------------------------------- */ --bp-weiss: #FFFFFF; /* Inhaltsflaechen, Karten, Formularfelder */ --bp-ruhe: #EDF1E4; /* die ruhige Grundflaeche, Pendant zu #e6efed */ --bp-ruhe-2: #E3E9D6; /* zweite Stufe: Umschalter, Hover */ /* * Die abgesetzte Flaeche - dazugekommen am 26. August 2026. * * Eine Spur heller als die Grundflaeche, nicht dunkler: Sie hebt etwas * HERAUS, statt es zurueckzunehmen. Gemischt aus der zweiten Stufe und * Weiss, damit sie im selben Farbton bleibt - ein eigener Hex-Wert waere * die zwoelfte Farbe in einer Palette, die mit elf auskommt. * * Verwendet an zwei Stellen: dem Angabenfeld der Kontaktseite und dem * Wege-Streifen ganz oben im Kopf. Als Token, weil ein Wert an zwei * Stellen sonst genau einmal geaendert wird und dann auseinanderlaeuft. */ --bp-flaeche-hell: color-mix(in srgb, var(--bp-ruhe-2) 55%, var(--bp-weiss)); --bp-rinde: #2B2E24; /* dunkles Band */ /* --- Text ----------------------------------------------------------- */ --bp-tinte: #191C11; /* die EINE Tinte, 15,06:1 auf der Grundflaeche */ /* * Sekundaertext ist KEINE eigene Graustufe, sondern dieselbe Tinte mit * reduzierter Deckkraft. Das ist der Kniff der Referenz: Dort traegt * #0c1915 139 von rund 212 Textknoten, und /0.7, /0.5, /0.38 machen * daraus drei Lautstaerken bei konstantem Farbton. * * 65 statt der 50 Prozent der Referenz: Nachgerechnet haelt 50 Prozent * hier nur 3,2:1 - genug fuer Grossschrift, zu wenig fuer eine * 16-px-Zeile. 65 Prozent erreichen 5,05:1 auf der Grundflaeche und * 5,38:1 auf Weiss. Die Wirkung bleibt, der Text bleibt lesbar. */ --bp-tinte-leise: color-mix(in srgb, var(--bp-tinte) 65%, transparent); /* --- Linie ---------------------------------------------------------- */ --bp-linie: #D3D9C2; /* die EINE Linienfarbe, 1px */ /* --- Akzent --------------------------------------------------------- */ --bp-akzent: #434F1D; /* Links, Primaerknopf, 7,71:1 */ --bp-akzent-tief: #2F3A13; /* gedrueckt */ --bp-marke: #8CA23E; /* Logo-Gruen: NUR Zierrat und Flaeche */ /* --- Zustaende ------------------------------------------------------ */ --bp-fehler: #8B1F26; --bp-erfolg: #1F5C3D; --bp-fokus: #191C11; /* --- Abstaende ------------------------------------------------------ * 4er-Leiter mit 32 als Grundeinheit am Schreibtisch, 24 mobil - so wie * es die Referenz macht: 93 Prozent ihrer Vorkommen liegen auf dieser * Leiter, die exotischen Werte sind Abschnittspolster. */ --bp-1: 4px; --bp-2: 8px; --bp-3: 12px; --bp-4: 16px; --bp-5: 20px; --bp-6: 24px; --bp-7: 32px; --bp-8: 48px; --bp-9: 64px; --bp-10: 96px; --bp-11: 128px; /* --- Breiten -------------------------------------------------------- * Die Referenz haelt die linke Kante bei x=96 und die rechte bei * x=1344 - Inhalt also 1248 breit. Das ist wichtiger als eine kurze * Liste von Abstandswerten: Die senkrechten Kanten wandern nie. */ --bp-weit: 78rem; /* 1248px */ --bp-mittel: 55rem; /* 880px, Pendant zu ihren 872 */ --bp-lese: 62ch; /* Fliesstext, Ziel 55-70 Zeichen */ /* * DIESELBE BREITE, ABER FEST - fuer Elemente mit einer ANDEREN SCHRIFT * oder Groesse als der Fliesstext. Dazugekommen am 26. August 2026. * * `ch` ist die Breite der Ziffer Null IN DER SCHRIFT DES ELEMENTS. Fuer * den Fliesstext (Instrument Sans, 20 px) sind 62ch gemessene 826 px - * genau die Breite, auf der alle Absaetze und Listen stehen. * * Fuer eine Zwischenueberschrift in Marcellus mit 32 px sind dieselben * 62ch aber rund 1200 px. Setzt man dort `var(--bp-lese)`, steht die * Ueberschrift ueber die ganze Reihe und ihre Mitte liegt bei x=720, * waehrend der Inhalt darunter seine Mitte bei x=509 hat. Zentriert * sieht dann aus wie verrutscht. * * 51,6rem sind 825,6 px und damit dieselbe Kante wie 62ch am Fliesstext. * WER --bp-lese AENDERT, muss diesen Wert nachziehen; sie gehoeren * zusammen. Nachmessen: die Breite eines gewoehnlichen Absatzes im * Seiteninhalt bei 1440 px Fenster. */ --bp-lese-fest: 51.6rem; --bp-rand: var(--bp-6); /* --- Schrift -------------------------------------------------------- */ --bp-schrift: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* * Groessen aus der Referenz, gemessen am 24. August: * h1/h2 48px lh 1.28 600 ls -0.4px (mobil h1 24, h2 28) * h3 22px lh 1.31 600 * Text 16 / 18 / 20px lh 1.5 400 * * Der Fliesstext nimmt die OBERE Stufe ihrer Spanne: 18 mobil, 20 am * Schreibtisch. Ihr haeufigster Wert ist 16 - fuer eine Zielgruppe * ueber 60 waere das ein Rueckschritt, und beide Werte kommen auf ihrer * Seite ebenso vor. */ --bp-t-h1: clamp(1.5rem, 2.86vw + 0.857rem, 3rem); /* 24 -> 48 */ --bp-t-h2: clamp(1.75rem, 2.38vw + 1.214rem, 3rem); /* 28 -> 48 */ --bp-t-h3: clamp(1.25rem, 0.71vw + 1.089rem, 1.625rem); /* 20 -> 26 */ --bp-t-lead: clamp(1.125rem, 0.48vw + 1.018rem, 1.375rem); /* 18 -> 22 */ --bp-t-text: clamp(1.125rem, 0.24vw + 1.071rem, 1.25rem); /* 18 -> 20 */ --bp-t-klein: 1rem; /* 16 */ /* --- Rundungen ------------------------------------------------------ * Die Referenz fuehrt 4, 8, 16 und 100 px. 16 traegt Karten und Bilder, * 100 macht Pillen und Avatare. */ --bp-r-klein: 6px; /* Knoepfe, Felder */ --bp-r-gross: 16px; /* Karten, Bilder, Flaechen */ --bp-r-voll: 100px; /* Pillen, runde Bilder */ /* --- Bewegung ------------------------------------------------------- */ --bp-dauer: 150ms; --bp-easing: cubic-bezier(0.2, 0, 0.38, 0.9); color-scheme: light; } @media (min-width: 48em) { :root { --bp-rand: var(--bp-7); } } @media (min-width: 64em) { :root { --bp-rand: var(--bp-10); } } /* ========================================================================== 2. GRUNDLAGEN ========================================================================== */ html { font-size: 100%; -webkit-text-size-adjust: 100%; } body { background: var(--bp-ruhe); color: var(--bp-tinte); font-family: var(--bp-schrift); font-size: var(--bp-t-text); font-weight: 400; line-height: 1.5; /* der Wert der Referenz, 97x im Einsatz */ text-rendering: optimizeLegibility; } /* Linksbuendig ist die Grundstellung. Zentriert nur, was hoechstens zwei Zeilen lang ist - der Seitentitel und das Zitat. */ main :is(p, li, dd, dt, blockquote, figcaption, td, th) { text-align: start; text-wrap: pretty; letter-spacing: 0; /* Laufweite 0 im Lesetext, wie die Referenz */ } /* --- Ueberschriften ----------------------------------------------------- */ :is(h1, h2, h3, h4, h5, h6) { font-weight: 600; color: var(--bp-tinte); text-wrap: balance; overflow-wrap: break-word; /* Deutsche Komposita: "Bestattungsunternehmen" sprengt sonst die Spalte. */ hyphens: auto; } h1 { font-size: var(--bp-t-h1); line-height: 1.28; letter-spacing: -0.0083em; /* die -0.4px der Referenz bei 48px */ margin-block: 0 var(--bp-6); } h2 { font-size: var(--bp-t-h2); line-height: 1.28; letter-spacing: -0.0083em; margin-block: var(--bp-10) var(--bp-6); } h3 { font-size: var(--bp-t-h3); line-height: 1.31; letter-spacing: -0.005em; margin-block: var(--bp-8) var(--bp-4); } h4, h5, h6 { font-size: var(--bp-t-lead); line-height: 1.4; margin-block: var(--bp-7) var(--bp-3); } :is(h1, h2, h3, h4, h5, h6):first-child { margin-block-start: 0; } p + p { margin-block-start: var(--bp-6); } main :is(p, ul, ol, dl, blockquote) { max-inline-size: var(--bp-lese); } /* Sekundaertext */ .bp-leise, main small, figcaption { color: var(--bp-tinte-leise); } /* --- Links -------------------------------------------------------------- */ /* * Unterstreichen ist Bedingung, nicht Geschmack: Die Akzentfarbe hebt sich * vom Lesetext nur mit 2,17:1 ab, gefordert sind 3:1 (WCAG 1.4.1, G183). * * Die Referenz macht es ebenso - dort tragen die Menue- und Fusszeilenlinks * eine feine Unterstreichung mit Abstand. */ main a, footer a { color: var(--bp-akzent); text-decoration: underline; text-underline-offset: 0.28em; text-decoration-thickness: 1px; transition: color var(--bp-dauer) var(--bp-easing); } main a:hover, main a:focus-visible, footer a:hover, footer a:focus-visible { color: var(--bp-akzent-tief); text-decoration-thickness: 2px; } :focus-visible { outline: 3px solid var(--bp-fokus); outline-offset: 2px; border-radius: 2px; transition: none; } [id], :target { scroll-margin-block-start: var(--bp-10); } /* --- Breite Inhalte scrollen in sich, nie die Seite --------------------- */ .bp-scrollt { overflow-x: auto; max-inline-size: 100%; } .bp-scrollt table { inline-size: max-content; min-inline-size: 100%; } /* ========================================================================== 3. FLAECHEN UND RHYTHMUS ========================================================================== */ /* * Die Referenz trennt Abschnitte ueber Flaechenton und Weissraum, nicht ueber * Linien: Fuer die ganze Seite gibt es dort genau EINE Strichdefinition. */ .bp-reihe { inline-size: min(100% - 2 * var(--bp-rand), var(--bp-weit)); margin-inline: auto; } .bp-reihe--mittel { max-inline-size: var(--bp-mittel); } .bp-abschnitt { padding-block: var(--bp-10); } @media (min-width: 64em) { .bp-abschnitt { padding-block: var(--bp-11); } } .bp-flaeche-weiss { background: var(--bp-weiss); } .bp-flaeche-ruhe { background: var(--bp-ruhe); } /* Karten und Bilder: 16 px Rundung, kein Schatten. Die Referenz legt 124 Bilder ohne einen einzigen Schatten flach in die Flaeche. */ .bp-karte { background: var(--bp-weiss); border-radius: var(--bp-r-gross); padding: var(--bp-7); } img, .wp-block-image img { max-inline-size: 100%; block-size: auto; box-shadow: none; } .bp-bild-rund { border-radius: var(--bp-r-gross); overflow: hidden; } /* ========================================================================== 4. KOMPONENTEN ========================================================================== */ /* --- Knoepfe ------------------------------------------------------------ */ .bp-knopf, .wp-block-button__link, .bp-flaeche { display: inline-flex; align-items: center; justify-content: center; gap: var(--bp-2); min-block-size: 48px; padding: var(--bp-3) var(--bp-6); font-family: var(--bp-schrift); font-size: var(--bp-t-klein); font-weight: 600; line-height: 1.4; text-align: center; text-decoration: none; border: 1px solid transparent; border-radius: var(--bp-r-klein); background: var(--bp-akzent); color: var(--bp-weiss); cursor: pointer; transition: background-color var(--bp-dauer) var(--bp-easing), border-color var(--bp-dauer) var(--bp-easing); } .bp-knopf:hover, .bp-knopf:focus-visible, .wp-block-button__link:hover, .bp-flaeche:hover { background: var(--bp-akzent-tief); color: var(--bp-weiss); text-decoration: none; } /* Der umrandete Knopf aus dem Kopfbereich der Referenz. */ .bp-knopf--rand { background: transparent; color: var(--bp-tinte); border-color: var(--bp-tinte); } .bp-knopf--rand:hover, .bp-knopf--rand:focus-visible { background: var(--bp-tinte); color: var(--bp-ruhe); border-color: var(--bp-tinte); } /* --- Formular ----------------------------------------------------------- */ /* * Nach dem Vorbild der Referenz: weisse Felder auf ruhigem Grund, weiche * Rundung, kein harter Rahmen. Label darueber, linksbuendig - das ist die * Form mit den kuerzesten Ausfuellzeiten im Eyetracking. */ .bp-formular-feld { margin-block-end: var(--bp-6); } form label { display: block; margin-block-end: var(--bp-2); font-size: var(--bp-t-klein); font-weight: 600; color: var(--bp-tinte); text-align: start; } input[type="text"], input[type="email"], input[type="tel"], input[type="search"], textarea, select { inline-size: 100%; min-block-size: 52px; padding: var(--bp-3) var(--bp-4); font-family: inherit; font-size: var(--bp-t-klein); line-height: 1.5; color: var(--bp-tinte); background: var(--bp-weiss); border: 1px solid var(--bp-linie); border-radius: var(--bp-r-klein); text-align: start; transition: border-color var(--bp-dauer) var(--bp-easing); } input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--bp-akzent); } textarea { min-block-size: 9rem; resize: vertical; } ::placeholder { color: var(--bp-tinte-leise); opacity: 1; } /* Fehler: Rahmen verstaerken UND Klartext - nie Farbe allein. */ [aria-invalid="true"] { border-width: 2px; border-color: var(--bp-fehler); } .bp-feldfehler { display: block; margin-block-end: var(--bp-2); color: var(--bp-fehler); font-size: var(--bp-t-klein); font-weight: 600; } .bp-formular-hilfe, .bp-formular-hinweis { font-size: var(--bp-t-klein); color: var(--bp-tinte-leise); } /* ========================================================================== 5. BEWEGUNG ========================================================================== */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== 6. KOPFBEREICH ========================================================================== Nach dem Vorbild der Leitreferenz, am Bild abgelesen: klebend, durchsichtig, Logo links, Menuepunkte mit feiner Unterstreichung, Nummer und Ort mit Symbol, rechts ein umrandeter Knopf, darunter eine Haarlinie ueber die Inhaltsbreite. ========================================================================== */ /* * DER KLEBENDE KOPF WEICHT DER ADMINLEISTE AUS. * * BEFUND vom 26. August 2026: „Wenn ich nach unten scrolle, sehe ich die * Buchstaben vom Header oben noch ein bisschen und auch die hellere Farbe." * * Nachgestellt mit angemeldetem Benutzer: WordPress' Adminleiste liegt * `position: fixed` bei y=0 mit z-index 99999. Der Kopf klebt ebenfalls bei * 0 und schiebt sich darunter - gemessen waren 32 der 52 px des * Wege-Streifens verdeckt. Uebrig blieb die untere Haelfte der * Telefonnummer und ein Rest der helleren Flaeche. * * BESUCHER SEHEN DAS NIE. Die Adminleiste gibt es nur fuer angemeldete * Benutzer, und `body.admin-bar` steht nur dann da. Der Fehler betrifft * also genau die Ansicht, in der man die Seite baut - und damit jeden, der * hier weiterarbeitet. * * DREI WERTE, WEIL DIE LEISTE DREI ZUSTAENDE HAT: * * ab 783 px 32 px hoch, fest * 601-782 46 px hoch, fest * bis 600 46 px hoch, ABER `position: absolute` - sie scrollt weg, * der Kopf darf dort also wieder bei 0 kleben * * Nicht `var(--wp-admin--admin-bar--height)`: Das Token gibt es nur im * Backend zuverlaessig, im Frontend liefert es je nach WordPress-Fassung * nichts. Die drei Zahlen stehen in WordPress' eigenem admin-bar.css und * sind seit Jahren unveraendert. */ body.admin-bar .bp-kopf { inset-block-start: 46px; } @media screen and (min-width: 783px) { body.admin-bar .bp-kopf { inset-block-start: 32px; } } @media screen and (max-width: 600px) { body.admin-bar .bp-kopf { inset-block-start: 0; } } .bp-kopf { position: sticky; inset-block-start: 0; z-index: 20; background: var(--bp-ruhe); padding-block: var(--bp-3); /* Kein Schatten. Die Referenz hat auf der ganzen Seite keinen. */ box-shadow: none; } .bp-kopf-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bp-4) var(--bp-7); } .bp-marke { flex: 0 0 auto; margin-inline-end: auto; } .bp-logo img, .bp-logo .custom-logo { display: block; inline-size: 72px; block-size: auto; border-radius: 0; } /* * 104 STATT 64 PX am Schreibtisch, 72 statt 56 auf schmalen Bildschirmen. * Am 26. August 2026 auf Wunsch: „kaum lesbar". * * Der Einwand war zutreffend und nachmessbar. Im Logo steht der Betriebsname * als Schriftzug IM BILD. Bei 64 px Kantenlaenge war dieser Schriftzug rund * 7 px hoch - unter jeder Lesegrenze. Es war damit kein Logo, sondern ein * Fleck in ungefaehr der richtigen Farbe. * * WARUM NICHT MEHR ALS 104: Die Datei hat 216 px Kantenlaenge. Auf einem * Bildschirm mit doppelter Aufloesung braucht eine Anzeige von 104 px genau * 208 echte Bildpunkte; das geht sich gerade noch scharf aus. Bei 112 waeren * es 224 und damit mehr, als die Datei hergibt. Wer groesser will, muss * zuerst die 820er Fassung neu einspielen, die auf dem Kundenserver liegt. * * WAS DAS KOSTET: Der klebende Kopf wird am Schreibtisch rund 40 px hoeher. * Auf schmalen Bildschirmen ist der Zuwachs bewusst kleiner gehalten (56 auf * 72), weil dort jede Zeile Kopf vom Inhalt abgeht. */ /* * BEIDE SELEKTOREN, nicht nur `.bp-logo img` - und das ist kein Zierrat. * * Die Grundregel oben lautet `.bp-logo img, .bp-logo .custom-logo`. Das Bild * traegt BEIDE Merkmale: Es ist ein img UND es hat die Klasse `custom-logo`, * die WordPress dem Logo gibt. Aus einer Selektorliste zaehlt fuer ein * Element aber die HOECHSTE Spezifitaet, die darin auf es passt - also * (0,2,0) aus `.bp-logo .custom-logo`, nicht (0,1,1) aus `.bp-logo img`. * * Eine Regel mit `.bp-logo img` allein hat (0,1,1) und verliert damit gegen * die Grundregel, egal wie weit unten sie steht. Genau das ist hier zuerst * passiert: Im Quelltext stand 104, gemessen wurden 72. * * Dasselbe Muster wie bei `:is()` in Abschnitt 11 und wie bei * `figure.wp-block-image:not(#individual-image)` in Abschnitt 17. Es ist die * haeufigste stille Fehlerquelle in dieser Datei: Die Regel steht da, sie * ist richtig geschrieben, und sie wirkt nicht. */ @media (min-width: 64em) { .bp-logo img, .bp-logo .custom-logo { inline-size: 104px; } } /* * HIER STANDEN DIE REGELN FUER DIE HAARLINIE UNTER DEM KOPF. * Entfernt am 26. August 2026 auf Wunsch, zusammen mit dem
in * parts/header.html und zwei weiteren Regeln in Abschnitt 12. * * Sie kam aus der Leitreferenz und hatte dort eine Aufgabe: Deren Kopf ist * nicht klebend, die Linie markiert also die Grenze zwischen Kopf und Seite. * Hier klebt der Kopf und traegt einen eigenen Grund - die Grenze ist dadurch * ohnehin sichtbar, und die Linie war eine zweite Aussage ueber dieselbe * Sache. */ /* --- Die Wege rechts ---------------------------------------------------- */ /* * Auf JEDER Breite sichtbar - seit 26. August 2026 abends auf Wunsch: * „Nummer und Ort sollen auch beim Scrollen stehen bleiben." * * Vorher gab es die Zeile erst ab 64em; darunter stand die Nummer als * runder Rufknopf im Menue. Beides zugleich waere doppelt gewesen, deshalb * ist der Knopf mit dieser Aenderung entfallen - Begruendung an seiner * alten Stelle in Abschnitt 12. */ .bp-kopf-wege { display: flex; align-items: center; gap: var(--bp-6); } .bp-kopf-nummer, .bp-kopf-ort { display: inline-flex; align-items: center; gap: var(--bp-2); min-block-size: 44px; font-size: var(--bp-t-klein); color: var(--bp-tinte); white-space: nowrap; } .bp-kopf-nummer { font-weight: 600; text-decoration: none; } .bp-kopf-nummer:hover, .bp-kopf-nummer:focus-visible { color: var(--bp-akzent); text-decoration: underline; text-underline-offset: 0.28em; } .bp-kopf-ort { color: var(--bp-tinte-leise); } .bp-kopf-wege svg { flex: 0 0 auto; } .bp-kopf-knopf { min-block-size: 44px; padding-block: var(--bp-2); } /* --- Das Menue ---------------------------------------------------------- */ /* * `.bp-kopf` DAVOR IST DER ZAEHLER, NICHT DIE BESCHREIBUNG. * * WordPress druckt in seinen globalen Stilen `body .is-layout-flex { * display: flex }` - Spezifitaet (0,1,1). Beide Menuebloecke tragen * `is-layout-flex`. Ein blankes `.bp-navigation--breit { display: none }` * liegt bei (0,1,0) und VERLIERT dagegen. * * GEMESSEN, was das angerichtet hat: Bei 375 px stand die