/*
Theme Name: Bestattung Pöttinger
Theme URI: https://bestattung-poettinger.at/
Author: Eigenentwicklung
Description: Schlankes Block-Theme für Bestattung Pöttinger, Pram. Ruhig, kontraststark, ohne externe Schriften, ohne JavaScript im Frontend. Barrierefreiheit nach WCAG 2.2 AA als Vorgabe.
Version: 0.3.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bp-theme
Tags: block-theme, accessibility-ready, one-column
*/
/* ---------------------------------------------------------------------------
Grundlagen
Farben, Abstände, Schriftgrößen, Rundungen und die Schattenstufe stehen in
theme.json und werden von WordPress als CSS-Variablen bereitgestellt. Hier
steht nur, was sich dort nicht ausdrücken lässt.
Leitlinien:
- Grundschrift 19px, Zeilenhöhe 1.6, Zeilenlänge maximal 70 Zeichen
- Kontrast im Fließtext mindestens 7:1
- Klickflächen mindestens 48x48px
- keine Animation, keine Übergänge
--------------------------------------------------------------------------
STAND 7. AUGUST 2026: NACHBAU DER BESTEHENDEN SEITE
Zwei eigene Entwürfe haben nicht getroffen. Auf Wunsch ist die Gestaltung
jetzt der bestehenden Seite bestattung-poettinger.at nachgebaut. Alle Werte
sind dort gemessen, nicht geschätzt:
obere Leiste var(--wp--preset--color--anthrazit), 52 px hoch, E-Mail links, Telefon rechts
Kopf weiß, 210 px, rundes Logo links, Menü rechts
Aufmacher Foto über die ganze Breite, 307 px
Aufmachertitel Playfair Display SC, 60 px, 17 px Sperrung, Kapitälchen
Überschriften Mulish 700, 40 px, mittig, grün
Fließtext Roboto 16 px / 32 px Zeilenabstand
Zitat Roboto 24 px, Schnitt 100, Großbuchstaben, auf Foto
Schaltflächen warmes Braun, 10 px Radius, 14 px, fett, Großbuchstaben
Bestattungsformen Geisterzahlen 01/02/03 hinter den Überschriften
Kontaktband Anthrazit, „Kontaktieren Sie uns“ in Schreibschrift
Bilder versetzt angeordnet, mit weichem Schatten
ZWEI FARBEN SIND NACHGEDUNKELT, weil die Originale die Barrierefreiheit
deutlich unterschreiten. Gemessen:
Grün #8CA23E auf Weiß 2,86 : 1 nötig 4,5 : 1
Weiß auf Braun var(--wp--preset--color--akzent) 2,81 : 1 nötig 4,5 : 1
Das betrifft den Fließtext und die Überschriften der bestehenden Seite,
also praktisch jeden Text darauf. Ersetzt durch #6B7B2D (4,67 : 1) und
var(--wp--preset--color--akzent) (5,12 : 1) – dieselben Farbtöne, nur dunkler. Die Anmutung bleibt,
die Vorgabe WCAG AA hält. Näheres in docs/gestaltung.md.
NOCH NICHT ÜBERNOMMEN: die vier Schriften (Roboto, Mulish, Playfair Display
SC, Dancing Script), das Logo und die zwei Hintergrundfotos. Alle liegen auf
dem Server des Kunden. Bis dahin greifen Systemschriften und das
Beitragsbild.
--------------------------------------------------------------------------
ZUR VORGESCHICHTE – was an den eigenen Entwürfen falsch war
Der erste Entwurf („Papier“) setzte auf beigen Grund, durchgehend
Serifenschrift, harte Kanten ohne jede Rundung und keine Tiefe. Das war in
sich schlüssig und aus der gedruckten Parte abgeleitet – in der Wirkung aber
altmodisch. Die Vorgabe lautete „schlicht aber modern“, und „modern“ war
verfehlt:
- Serifenschrift im Fließtext liest sich auf dem Bildschirm wie ein PDF.
- Beige auf ganzer Fläche wirkt wie ein Gemeindeblatt. Warme Töne wirken
warm, wenn sie EINZELNE Flächen tragen, nicht den Grund.
- Harte Kanten mit 1-px-Rahmen lesen sich wie ein Tabellenlayout.
- Ohne Rundung und ohne eine Schattenstufe liegt alles flach übereinander;
es entsteht kein Rhythmus zwischen den Abschnitten.
Dahinter steckte ein Denkfehler: Die Vorgabe „soll nicht nach AI aussehen“
hatte ich so gelesen, dass zeitgemäße Konventionen zu meiden seien. Falsch –
genau die machen eine Seite modern. Unverwechselbar wird sie durch INHALT und
Einzelheiten: den gesperrten Namen auf der Trauerfall-Seite, das Register mit
der festen Datumsspalte, echte Fotos aus dem Betrieb. Nicht dadurch, dass man
Weiß, klare Schrift und sanfte Rundungen verweigert.
Der vorige Entwurf liegt als Stilvariante `z-papier` bei, zum Vergleichen.
--------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
Satz
--------------------------------------------------------------------------- */
/*
Überschriften umbrechen ausgeglichen statt mit einem einzelnen Wort in der
letzten Zeile. Fließtext vermeidet Schusterjungen. Beides wird von
Browsern, die es nicht kennen, stillschweigend übergangen.
*/
h1, h2, h3, h4,
.bp-name,
.bp-zitat {
text-wrap: balance;
}
.wp-block-post-content p,
.bp-lesetext p {
text-wrap: pretty;
}
/*
Ziffern auf gleicher Laufweite, überall dort, wo Zahlen untereinander
stehen: im Register, in den Terminen, in der Blätterleiste. Ohne das
„tanzen“ die Datumsangaben, weil die 1 in vielen Schriften schmaler ist
als die 8.
*/
.bp-liste-datum,
.bp-liste-termin,
.bp-lebensdaten,
.bp-termin-wann,
.bp-blaettern-stand,
.bp-notruf-nummer {
font-variant-numeric: tabular-nums;
}
/* Sichtbarer Fokus – nie ausblenden. Ältere Nutzer und Tastaturbedienung. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 3px solid var(--wp--preset--color--akzent);
outline-offset: 2px;
border-radius: var(--wp--custom--radius--knopf);
}
/* ---------------------------------------------------------------------------
Sprunglink zum Inhalt
Den Link liefert WordPress selbst (`#wp-skip-link`). Er trägt die Klasse
`screen-reader-text` und ist damit zunächst unsichtbar – das ist richtig.
Er MUSS aber sichtbar werden, sobald er den Fokus hat.
Genau daran hat es zuerst gefehlt: Die Regel für `.screen-reader-text`
weiter unten (für Hinweise wie „(Pflichtfeld)“) hatte keine
Fokus-Ausnahme. Der Link war dadurch auch im Fokus 1x1 Pixel groß – ein
Tastaturnutzer landete auf etwas Unsichtbarem. Das ist schlechter als
überhaupt kein Sprunglink.
--------------------------------------------------------------------------- */
/*
Zur Schreibweise: Spezifität und !important sind hier notwendig, nicht
Nachlässigkeit. WordPress' eigene Regel `.skip-link.screen-reader-text`
enthält !important-Deklarationen und hat drei Klassen Spezifität. Ein
einfaches `.skip-link:focus` verliert dagegen – nachgemessen: der Link blieb
im Fokus 1x1 Pixel groß.
*/
.skip-link.screen-reader-text:focus,
.skip-link.screen-reader-text:focus-visible,
a.skip-link:focus,
.screen-reader-text:focus {
position: fixed !important;
top: 0.5rem !important;
left: 0.5rem !important;
z-index: 100000;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0.75rem 1.25rem !important;
overflow: visible !important;
clip: auto !important;
clip-path: none !important;
white-space: normal !important;
/* Farbe und Hintergrund ebenfalls durchsetzen: Ohne !important blieb die
Schrift in der Akzentfarbe auf durchsichtigem Grund – gemessen und
schlecht lesbar.
background-color statt der Kurzschreibweise background: Enthält eine
Kurzschreibweise ein var(), löst der Browser sie nicht in Einzelwerte
auf. Die Regel griff dadurch nicht, und WordPress' eigenes #eee gewann
– obwohl es gar kein !important trägt. */
background-color: var(--wp--preset--color--text) !important;
color: var(--wp--preset--color--basis) !important;
font-size: var(--wp--preset--font-size--normal) !important;
border-radius: var(--wp--custom--radius--knopf) !important;
text-decoration: underline !important;
outline: 3px solid var(--wp--preset--color--akzent) !important;
outline-offset: 2px;
}
/*
Zur Zeilenlänge: Sie steckt in theme.json als contentSize (36rem), nicht hier.
Ein früherer Versuch setzte `max-width: 62ch` auf die Textblöcke. Das war
falsch, und zwar auf eine Weise, die man erst im Browser sieht: `ch` bezieht
sich auf die Schriftgröße des jeweiligen Elements. Bei einer Überschrift mit
36 px ergeben 62 Zeichen 1370 px – die Regel hat die Überschrift also
verbreitert statt begrenzt, und Überschrift, Fließtext und Spalten hatten
drei verschiedene linke Kanten.
Ebenso KEINE eigene max-width an einzelnen Absätzen: WordPress' Layout
„constrained“ setzt allen Kindern `margin-left: auto; margin-right: auto`.
Ein Element, das schmaler ist als die Inhaltsbreite, wird dadurch
ZENTRIERT – nicht links ausgerichtet. Gemessen ergab das drei verschiedene
linke Kanten: 473, 457 und 441 Pixel. Dieser Fehler ist mir zweimal
unterlaufen; deshalb steht die Begründung hier.
*/
/* Verweise: unterstrichen, damit sie auch ohne Farbwahrnehmung erkennbar sind. */
.wp-block-post-content a,
.bp-lesetext a {
text-decoration: underline;
text-underline-offset: 0.15em;
text-decoration-thickness: 1px;
}
/* Klickflächen. 48px ist die Untergrenze, nicht das Ziel. */
.wp-block-button__link,
.bp-flaeche {
min-height: 48px;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
/*
Ein Absatz, der NUR aus einem Verweis besteht, ist kein Verweis im Satz,
sondern ein eigener Weg – „Ältere Trauerfälle im Archiv“, „Urnen“,
„Sargmodelle“, die Telefonnummer auf der Seite „Im Todesfall“.
WCAG 2.5.8 nimmt Verweise im Fließtext von der 24-px-Regel aus, weil sie
die Zeile sprengen würden. Für diese hier gilt die Ausnahme nicht:
nachgemessen waren sie 19 px hoch. `:only-child` trifft genau sie und
lässt jeden Verweis innerhalb eines Satzes unberührt.
*/
.wp-block-post-content p > a:only-child,
.wp-block-post-content li > a:only-child,
.bp-archiv-hinweis > a,
.bp-zurueck > a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
/*
Der Verweis ins Archiv steht seit dem 10. August 2026 UNTER der Liste.
Er nimmt deren Breite an und beginnt auf derselben linken Kante wie die
Einträge darüber – sonst hinge er allein in der Seitenmitte.
*/
.bp-archiv-hinweis {
max-width: var(--bp-verzeichnis);
width: 100%;
margin-top: var(--wp--preset--spacing--30);
}
/* Bilder: gerundet, nie über den Rand hinaus, Seitenverhältnis halten. */
img {
max-width: 100%;
height: auto;
}
.wp-block-image img,
.wp-block-post-featured-image img {
border-radius: var(--wp--custom--radius--bild);
}
/* ===========================================================================
DAS KONZEPT: „DAS BLATT“
Drei Regeln tragen die ganze Gestaltung. Wer hier etwas ändert, ändert die
Seite überall – das ist beabsichtigt.
1. EIN GRUND. Die Seite steht auf einer durchgehenden Fläche, nicht auf
gestapelten Farbbändern. Vorher waren es fünf: anthrazite Oberleiste,
weißer Kopf, Fotostreifen, weißer Inhalt, anthrazites Kontaktband. Jede
dieser Kanten sagte „hier fängt etwas Neues an“, und keine sagte, was.
2. EIN ATOM. Alles, was Inhalt trägt, ist ein Blatt: weiße Fläche, ein
Radius, eine Schattenstufe, großzügiger Innenabstand. Der Einstieg, jeder
Trauerfall, jede Bestattungsform und auch das dunkle Kontaktfeld sind
dasselbe Element in anderer Größe. Nichts kommt genau einmal vor.
Die Form stammt aus dem Erzeugnis des Betriebs, der gedruckten Parte.
Auf der Detailseite ist das Blatt die Parte selbst, in voller Größe.
3. EIN AKZENT. Oliv trägt Verweise, die aktuelle Seite und die
Hauptschaltfläche. Braun, Schreibschrift und Geisterzahlen sind entfallen.
=========================================================================== */
/*
HIER STAND DER VERLAUF DES GRUNDES — entfernt am 24. August 2026.
`body::before` legte eine fest verankerte Fläche über den ganzen
Bildschirm: zwei schwache Farbwolken auf einem senkrechten Verlauf von
Weiß über Grund nach Fläche. Der Gedanke war, der Fläche „das Tote zu
nehmen".
Nachgemessen war die Wirkung eine andere. Unter dem Kopfband lief ein
heller Streifen von 225 px Höhe quer über die Seite, der bei y=899 hart
endete — der untere Rand des Fensters, denn die Fläche ist fixiert und
scrollt nicht mit. Auf jeder Bildschirmhöhe eine andere Kante an einer
anderen Stelle.
Dazu kam der grundsätzliche Einwand: Der Verlauf führt drei Flächenfarben
dort ein, wo die Leitreferenz eine einzige führt. Er war einer der Gründe,
warum die Seite trotz sauberer Einzelwerte unruhig wirkte.
Der Grund ist jetzt eine Farbe: --bp-ruhe auf `body`, gesetzt in
gestaltung.css, Abschnitt 2.
*/
/*
Das Atom.
Kein Rahmen: Fläche UND Rahmen UND Schatten wäre dreifach dasselbe gesagt.
Der Ruhezustand trägt die sanfte Stufe, ein anklickbares Blatt hebt sich bei
Berührung auf die hohe – ohne Verschiebung, weil der Auftrag Bewegung
ausschließt.
*/
.bp-blatt {
background-color: var(--wp--preset--color--basis);
border-radius: var(--wp--custom--radius--blatt);
box-shadow: var(--wp--custom--schatten--sanft);
}
a.bp-blatt:hover,
a.bp-blatt:focus-visible,
.bp-blatt > a:hover,
.bp-blatt > a:focus-visible {
box-shadow: var(--wp--custom--schatten--hoch);
}
/* ---------------------------------------------------------------------------
Die Kontaktleiste – bleibt unten stehen
Nur Telefonnummer und E-Mail, rund 56 px. Sie ersetzt den Anrufen-Knopf, der
bis zum 10. August 2026 im Kopf stand.
Warum nicht der ganze Fußbereich: Der misst rund 150 px. Zusammen mit dem
stehenden Kopf (73 px) wären auf einem Handy mit 844 px dauerhaft 26 % des
Bildschirms belegt, bevor eine Zeile Inhalt zu sehen ist.
--------------------------------------------------------------------------- */
.bp-kontaktleiste {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 20;
background-color: color-mix(in srgb, var(--wp--preset--color--grund) 92%, transparent);
backdrop-filter: blur(10px);
border-top: 1px solid var(--wp--preset--color--linie);
}
.bp-kontaktleiste-zeile {
min-height: 56px;
padding-block: 0.35rem;
gap: 0.25rem 1.5rem;
}
.bp-kontaktleiste p {
margin: 0;
}
.bp-kontaktleiste-wort {
color: var(--wp--preset--color--text-leise);
}
.bp-kontaktleiste-wege {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem 1.5rem;
}
/* Schriftschnitt und Größe zweimal zurückgenommen (10. August 2026): erst von
700 auf 600, dann auf 0,9375 rem. Nummer und E-Mail standen in der Leiste
lauter da als die Überschrift mancher Seite. Sie sollen auffindbar sein,
nicht rufen.
Die Klickfläche bleibt bei 44 px – kleiner gesetzt heißt nicht schwerer zu
treffen. */
.bp-kontaktleiste-wege a {
display: inline-flex;
align-items: center;
min-height: 44px;
font-size: 0.9375rem;
text-decoration: none;
font-weight: 600;
}
.bp-kontaktleiste-wege a:hover,
.bp-kontaktleiste-wege a:focus-visible {
text-decoration: underline;
text-underline-offset: 0.2em;
}
.bp-leiste-nummer {
font-variant-numeric: tabular-nums;
}
/* Lange Beschriftung auf breiten, kurze auf schmalen Bildschirmen. Beide
Fassungen stehen in der Auszeichnung; getauscht wird nur, welche sichtbar
ist. Der Verweis selbst ist in beiden Fällen derselbe. */
.bp-leiste-mail .bp-kurz {
display: none;
}
/*
Impressum und Datenschutz.
Etwas leiser und mit einem eigenen Abstand davor abgesetzt: Sie stehen in
derselben Zeile wie Nummer und E-Mail, gehören aber zu einer anderen Sorte
Weg. Wer in einer akuten Lage hier landet, sucht die Nummer – die zwei
Rechtsverweise dürfen daneben nicht gleich laut sein.
*/
.bp-leiste-recht {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem 1.25rem;
padding-left: 0.75rem;
border-left: 1px solid var(--wp--preset--color--linie);
}
.bp-leiste-recht a {
font-weight: 400;
font-size: 0.875rem;
color: var(--wp--preset--color--text-leise);
}
.bp-leiste-recht a:hover,
.bp-leiste-recht a:focus-visible {
color: var(--wp--preset--color--akzent);
}
/*
Der Seitenkörper bekommt unten so viel Innenabstand, wie die Leiste hoch
ist. Ohne das verdeckt sie die letzte Zeile des Fußbereichs – auf der
Trauerfall-Seite wäre das ausgerechnet der Weg zurück ins Verzeichnis.
Am .wp-site-blocks und nicht am body: WordPress setzt den Hintergrund am
body, ein Innenabstand dort schöbe die Farbe mit nach oben.
*/
.wp-site-blocks {
padding-bottom: 72px;
}
/*
Auf sehr flachen Fenstern (Handy quer, rund 400 px hoch) nimmt eine feste
Leiste zu viel weg. Dort läuft sie mit dem Fußbereich mit, statt zu stehen.
*/
@media (max-height: 30rem) {
.bp-kontaktleiste {
position: static;
backdrop-filter: none;
}
.wp-site-blocks {
padding-bottom: 0;
}
}
/*
Auf schmalen Bildschirmen entfällt die Anschrift. Sie ist dort nicht
wichtiger als die zwei Wege, und beides zusammen bräuchte drei Zeilen –
aus 56 px würden rund 120 px, also ein Siebtel eines Handybildschirms.
Die Anschrift steht weiterhin im Impressum und auf der Kontaktseite.
*/
@media (max-width: 60rem) {
.bp-kontaktleiste-wort {
display: none;
}
.bp-kontaktleiste-zeile {
justify-content: center;
}
.bp-kontaktleiste-wege {
justify-content: center;
width: 100%;
/*
Enger und eine Spur kleiner, damit Nummer und E-Mail in EINE Zeile
passen. Nachgemessen bei 390 px: Mit 1,5 rem Abstand und 17 px
Schrift brauchten sie zusammen 364 px, verfügbar sind 358 – die
Leiste wurde dadurch 104 px hoch statt 56, also ein Achtel des
Bildschirms. Mit 1 rem und 15 px sind es 316 px.
Die 44 px Klickfläche bleiben unangetastet; nur die Schrift wird
kleiner, nicht das Ziel.
*/
gap: 0.25rem 1rem;
font-size: 0.9375rem;
}
.bp-leiste-mail .bp-lang {
display: none;
}
.bp-leiste-mail .bp-kurz {
display: inline;
}
}
/*
Ganz schmale Bildschirme: vier Ziele in einer Zeile.
Nachgemessen bei 390 px: Mit den Werten oben brauchten Nummer, E-Mail,
Impressum und Datenschutz zusammen rund 393 px bei 358 verfügbaren – die
Leiste wurde dadurch wieder 104 px hoch.
Gespart wird an den Abständen und am Trennstrich, NICHT an den Klickflächen:
Die vier Ziele behalten ihre 44 px Höhe. Die zwei Rechtsverweise werden eine
Spur kleiner gesetzt; sie sind hier ohnehin die leiseren.
*/
@media (max-width: 30rem) {
.bp-kontaktleiste-wege {
gap: 0.25rem 0.75rem;
}
.bp-leiste-recht {
gap: 0.25rem 0.75rem;
padding-left: 0;
border-left: 0;
}
.bp-leiste-recht a {
font-size: 0.8125rem;
}
}
/*
Sehr schmale Geräte (iPhone SE und Ähnliche, 360 px).
Dort reicht auch das nicht: Nachgemessen stehen 331 px zur Verfügung, die
vier Ziele brauchen mit Abständen rund 366. Statt weiter zu schrumpfen –
irgendwann wird die Nummer unlesbar – bekommt die Leiste hier bewusst zwei
Zeilen, aber eine kompakte zweite: Impressum und Datenschutz stehen darunter
mit 32 px Höhe.
32 px sind weiterhin deutlich über den 24 px, die WCAG 2.5.8 verlangt. Die
beiden dringlichen Ziele – Nummer und E-Mail – behalten ihre 44 px.
*/
@media (max-width: 24rem) {
.bp-leiste-recht {
width: 100%;
justify-content: center;
}
.bp-leiste-recht a {
min-height: 32px;
}
/* Der Seitenkörper muss den höheren Fuß freihalten, sonst verdeckt die
Leiste die letzte Zeile des Inhalts. */
.wp-site-blocks {
padding-bottom: 104px;
}
}
/* ---------------------------------------------------------------------------
Obere Leiste – E-Mail und Telefonnummer
War ein anthraziter Riegel über die volle Breite (52 px, var(--wp--preset--color--anthrazit)). Der war
die erste von fünf waagrechten Kanten und hat die Seite mit einem schwarzen
Balken begonnen. Jetzt steht dieselbe Auskunft leise auf dem Grund, getrennt
nur durch eine Haarlinie.
--------------------------------------------------------------------------- */
/*
Grüner Grund mit weißer Schrift, auf Wunsch am 10. August 2026.
Das Grün des Logos ist #88a038 – aus der Datei ausgelesen, nicht geschätzt.
Weiße Schrift darauf erreicht nachgemessen nur 2,94 : 1; nötig sind 4,5 : 1.
Es ist derselbe Fehler, den die bestehende Seite durchgehend macht (siehe
Abschnitt 0a in docs/gestaltung.md).
Verwendet wird deshalb der Akzent des Themes, #637129: 5,35 : 1 mit weißer
Schrift. Er ist die abgedunkelte Fassung desselben Farbtons und weicht vom
exakt auf 75 % gedunkelten Logo-Grün (#66782a, 4,90 : 1) in keinem Kanal um
mehr als 3 ab – sichtbar ist der Unterschied nicht, eine siebte Farbe im
Theme wäre er nicht wert.
*/
.bp-oberleiste {
font-family: var(--wp--preset--font-family--text);
background-color: var(--wp--preset--color--akzent);
border-bottom: 0;
}
.bp-oberleiste p,
.bp-oberleiste a {
color: var(--wp--preset--color--basis);
}
.bp-oberleiste a:hover,
.bp-oberleiste a:focus-visible {
color: var(--wp--preset--color--basis);
text-decoration: underline;
text-underline-offset: 0.2em;
}
.bp-oberleiste-zeile {
min-height: 40px;
align-items: center;
}
.bp-oberleiste p {
margin: 0;
}
.bp-oberleiste a {
display: inline-flex;
align-items: center;
/*
44 px Klickfläche, obwohl die bestehende Seite dort nur 20 px hat. Das
ist eine bewusste Abweichung: Es sind die zwei wichtigsten Verweise der
ganzen Website, und die Zielgruppe hat viele ältere Besucher.
*/
min-height: 44px;
text-decoration: none;
}
/* ---------------------------------------------------------------------------
Kopfbereich – Marke links, Menü, Telefonknopf rechts
Bleibt beim Scrollen stehen. Für eine Website, deren wichtigste Handlung ein
Anruf ist, ist das kein Effekt, sondern der Zweck: die Nummer ist auf jeder
Bildschirmhöhe erreichbar.
--------------------------------------------------------------------------- */
/*
Damit der Kopf tatsächlich kleben BLEIBT.
`position: sticky` wirkt nur innerhalb des Kastens des Elternelements.
WordPress steckt jeden Vorlagenteil in ein eigenes `div.wp-block-template-part`,
und das ist hier genau 139 px hoch (obere Leiste 45 + Kopf 94). Der Kopf
konnte also 45 px weit kleben und war danach weg.
Nachgemessen: Bei einer Scrollhöhe von 1808 px stand er bei top: -1731.
In den berechneten Werten steht trotzdem „sticky“ – der Fehler ist deshalb
nur durch Scrollen zu finden, nicht durch Auslesen der Eigenschaft.
`display: contents` nimmt dem Wrapper seinen Kasten, ohne etwas an der
Auszeichnung zu ändern. Der Kopf klebt dann innerhalb von .wp-site-blocks,
also über die ganze Seite. Nur der Wrapper des KOPFES ist gemeint, nicht der
des Fußbereichs – daher :has().
*/
.wp-block-template-part:has(> .bp-kopf) {
display: contents;
}
.bp-kopf {
position: sticky;
/*
Im Backend angemeldet steht WordPress' Werkzeugleiste fest am oberen
Rand und schöbe sich über den klebenden Kopf – nachgesehen: das Logo war
zur Hälfte verdeckt. WordPress stellt ihre Höhe als eigene Variable
bereit; abgemeldet ist sie nicht gesetzt und der Rückfallwert 0 gilt.
*/
top: var(--wp-admin--admin-bar--height, 0px);
z-index: 10;
/*
Leicht durchscheinend mit Weichzeichner, damit der Grund darunter
erkennbar bleibt und der Kopf nicht als eigener Balken liest. Wo
backdrop-filter fehlt, deckt die Farbe zu 88 % – auch das genügt.
*/
background-color: color-mix(in srgb, var(--wp--preset--color--grund) 88%, transparent);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--wp--preset--color--linie);
}
/*
Das Logo.
KEIN border-radius mehr: Die Datei ist ein freigestellter Kreis auf
durchsichtigem Grund. Ein zusätzlicher Radius am img-Element beschnitte die
Ecken eines Bildes, das dort ohnehin nichts zeigt – und schnitte bei der
Pinselstruktur am Rand des Kreises sichtbar hinein.
*/
.bp-logo img {
display: block;
height: auto;
}
/*
Das Menü steht rechts.
Die Flex-Zeile verteilt mit „space-between“; damit das Menü auch dann rechts
bleibt, wenn es umbricht oder schmal wird, richtet es seine eigenen Punkte
ebenfalls nach rechts aus. Ohne das stünden die Punkte in der zweiten Zeile
linksbündig unter der Marke.
Der Telefonknopf, der hier bis zum 10. August 2026 saß, ist entfernt; die
Regeln dafür sind mit ihm entfallen.
*/
.bp-kopf-zeile .bp-navigation {
flex: 1 1 auto;
min-width: 0;
}
.bp-kopf-zeile .bp-marke-gruppe {
flex: 0 0 auto;
}
.bp-kopf-zeile .wp-block-navigation__container {
justify-content: flex-end;
}
/*
Sobald das Menü umbricht, klebt der Kopf NICHT mehr.
Das Menü hat acht Punkte und kein Overlay – das ist eine bewusste
Entscheidung (siehe header.html: ein Hamburger-Symbol kostet 108 KB
JavaScript). Unterhalb von rund 900 px bricht es deshalb auf zwei, bei
390 px auf drei Zeilen um.
Gemessen mit klebendem Kopf: 297 px bei 660 px Breite, 361 px bei 390 px –
also 23 bis 28 % des Bildschirms, dauerhaft belegt. Ein Kopf, der ein
Viertel der Seite verdeckt, ist schlechter als einer, der wegscrollt.
Über den Menü-Umbruch lässt sich nicht in CSS abfragen. Nachgemessen in
Schritten – und die Grenze wandert, sobald sich am Menü etwas ändert:
vor dem 10. August (48 px hohe Punkte, kein Innenabstand): ab 960 px
danach (56 px hohe Punkte mit Innenabstand): ab 1080 px
Unterhalb der Grenze rutscht das Menü unter das Logo und der Kopf wird
225 px hoch statt 121 – das wären 28 % eines 800 px hohen Bildschirms,
dauerhaft. Ein Kopf, der ein Viertel der Seite verdeckt, ist schlechter als
einer, der wegscrollt.
WER AM MENÜ ETWAS ÄNDERT – Schriftgröße, Abstände, ein neunter Punkt –
MUSS DIESEN WERT NACHMESSEN.
*/
@media (max-width: 67.4rem) {
.bp-kopf {
position: static;
backdrop-filter: none;
}
}
/* Der Schriftzug steht nur, solange kein Logo hinterlegt ist. */
.bp-marke a {
color: var(--wp--preset--color--text);
text-decoration: none;
font-family: var(--wp--preset--font-family--titel);
font-weight: 700;
}
.bp-marke a:hover,
.bp-marke a:focus-visible {
color: var(--wp--preset--color--akzent);
}
/* ---------------------------------------------------------------------------
Aufmacher – Foto über die ganze Breite, Name darüber
Playfair Display SC, 60 px, 17 px Sperrung, Kapitälchen, mittig, weiß.
17 px auf 60 px sind 0,283 em – als em angegeben, damit die Sperrung bei
kleineren Bildschirmen mitschrumpft.
--------------------------------------------------------------------------- */
.bp-aufmacher {
padding-block: var(--wp--preset--spacing--50);
}
.bp-aufmacher-titel {
/*
Umbruch auf zwei Zeilen erzwingen – „BESTATTUNG“ über „PÖTTINGER“, wie
im Original. Gemessen: Bei 60 px und 17 px Sperrung braucht der ganze
Name rund 1300 px; in der Breite von 1184 px lief er über den Rand.
44 rem sind knapp mehr als die längere der beiden Zeilen.
Zentriert wird hier bewusst mit `margin-inline: auto` – das Element ist
schmaler als sein Container, und ohne diese Angabe stünde es links.
*/
max-width: 44rem;
margin-inline: auto;
margin-block: 0;
font-family: var(--wp--preset--font-family--display);
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.283em;
/* Die Sperrung sitzt hinter dem letzten Buchstaben mit im Zeilenkasten.
Ohne Ausgleich steht der mittige Satz um einen halben Zwischenraum zu
weit links. Ausgeglichen wird mit padding-left, nicht mit negativem
Außenmaß – das vergrößert bei einem Block den Kasten. */
padding-left: 0.283em;
text-align: center;
text-transform: uppercase;
color: var(--wp--preset--color--basis);
}
/* Kein `text-wrap: balance` hier – es würde den erzwungenen Umbruch wieder
ausgleichen und beide Zeilen gleich lang machen. Gewollt sind die zwei
natürlichen Wörter. */
.bp-aufmacher-titel {
text-wrap: wrap;
}
.bp-aufmacher-titel a {
color: inherit;
text-decoration: none;
}
/*
Erreichbarkeit im Kopf: die wichtigste Angabe der ganzen Website. Wer hier
landet, braucht oft nichts anderes. Deshalb als deutlich abgesetzte Fläche
und nicht als beliebiger Textlink.
*/
.bp-notruf {
margin: 0;
text-align: right;
line-height: 1.2;
}
.bp-notruf-text {
display: block;
font-size: var(--wp--preset--font-size--klein);
color: var(--wp--preset--color--text-leise);
}
.bp-notruf-nummer {
display: inline-flex;
align-items: center;
min-height: 44px;
font-size: var(--wp--preset--font-size--gross);
font-weight: 600;
white-space: nowrap;
text-decoration: none;
}
.bp-notruf-nummer:hover,
.bp-notruf-nummer:focus-visible {
text-decoration: underline;
text-underline-offset: 0.2em;
}
@media (max-width: 40rem) {
.bp-notruf {
text-align: left;
}
}
/* ---------------------------------------------------------------------------
Navigation
--------------------------------------------------------------------------- */
/*
Navigationslinks brauchen dasselbe Maß wie Knöpfe.
Ohne Zutun sind sie 30 Pixel hoch – ein reiner Textlink ohne Innenabstand.
Das erfüllt zwar die Mindestanforderung von WCAG 2.2 (24 px), ist für eine
Zielgruppe mit vielen älteren Besuchern am Touchgerät aber zu klein.
*/
/*
Menüschrift in Anthrazit, wie auf der bestehenden Seite.
Die Farbe wird am CONTAINER gesetzt, nicht am Verweis. Das ist kein Umweg,
sondern der einzige Weg, der ohne !important auskommt:
WordPress setzt am Menülink die Regel
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content { color: inherit }
– mit ABSICHTLICH verdoppelter Klasse, Spezifität 0,3,0. Eine eigene Regel
am Verweis verliert dagegen (nachgemessen: sie stand in der Liste, griff
aber nicht). Da der Kern aber `inherit` setzt, genügt es, die Farbe am
Elternelement vorzugeben – dann erbt der Link genau das.
*/
.bp-navigation {
color: var(--wp--preset--color--anthrazit);
}
/* 56 px statt 48: am 10. August 2026 auf Wunsch erhöht. Die Klickfläche wächst
damit über die 48 px hinaus, die als Untergrenze galten – für eine
Zielgruppe mit vielen älteren Besuchern am Touchgerät ist das kein
Luxus. Ein waagrechter Innenabstand kommt dazu, damit die Punkte nicht nur
höher, sondern auch als Fläche greifbar werden. */
.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-submenu__toggle {
display: inline-flex;
align-items: center;
min-height: 56px;
padding-block: 0.5rem;
padding-inline: 0.35rem;
font-family: var(--wp--preset--font-family--titel);
color: var(--wp--preset--color--anthrazit);
text-decoration: none;
}
.wp-block-navigation a.wp-block-navigation-item__content:hover,
.wp-block-navigation a.wp-block-navigation-item__content:focus-visible {
color: var(--wp--preset--color--text);
}
/*
Die aktuelle Seite kenntlich machen – über zwei Merkmale, nicht nur über
Farbe.
Der Strich wird mit text-decoration gesetzt, nicht mit einem inneren
Schatten am Element. Der erste Versuch war `box-shadow: inset 0 -2px`, und
der sah im Browser falsch aus: Der Menülink ist wegen der Klickfläche 48 px
hoch, der Schatten saß deshalb am unteren Rand dieser Fläche und schwebte
rund einen Zentimeter unter dem Wort. text-decoration folgt dem Text.
*/
/*
ENTFERNT AM 26. AUGUST 2026.
Diese Regel hat die aktuelle Seite im Menü unterstrichen. Sie stammt aus
der alten Gestaltung und wurde von `gestaltung.css` bereits abgelöst –
nur eben nicht geschlagen: Ihre Spezifität ist (0,3,1), die neue Regel
dort hat (0,2,0). Im Quelltext stand seit dem Umbau „keine
Unterstreichung", im Browser stand eine.
Damit fällt sie unter die Hausregel dieses Projekts: Steht ein Wert an
zwei Stellen, ist eine davon ein Fehler. Überschreiben wäre die dritte
Stelle gewesen.
Was die aktuelle Seite jetzt kennzeichnet, steht in gestaltung.css
Abschnitt 19 – Farbe UND ein 2 px hoher Balken darunter. Die Begründung
von hier gilt dort unverändert weiter: nie Farbe allein.
Die Anmerkung zu `box-shadow: inset 0 -2px` darüber ist trotzdem stehen
geblieben. Sie beschreibt einen Fehlversuch, der beim nächsten Anlauf
wieder naheliegt.
*/
/*
Auf dem Handy bricht das flache Menü mit acht Punkten auf drei Zeilen um.
Der Blockabstand (1,75 rem) gilt aber für Spalten UND Zeilen – zusammen mit
der 48 px hohen Klickfläche stand der Kopfbereich dadurch rund 240 px hoch,
bevor der erste Inhalt kam.
*/
@media (max-width: 48rem) {
.wp-block-navigation .wp-block-navigation__container {
row-gap: 0;
}
}
/* Im Untermenü darf es kompakter sein, aber nicht unter 44px. */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
min-height: 44px;
width: 100%;
}
/* ---------------------------------------------------------------------------
Das Untermenü unter „Bestattungsformen“ (10. August 2026)
Ohne eine Zeile JavaScript. WordPress lädt das Navigations-Modul (view.js,
Interactivity API) nur, wenn das Menü auf Klick öffnet ODER ein Pfeilsymbol
trägt – beides ist in parts/header.html abgeschaltet, die Begründung steht
dort. Übrig bleibt die Kern-CSS des Blocks, und die klappt das Untermenü
allein über :hover und :focus-within auf. Mit der Tastatur ist es damit
ebenso erreichbar wie mit der Maus.
Am Touchgerät gibt es kein :hover. Der erste Tipp auf „Bestattungsformen“
folgt deshalb dem Verweis – auf die Seite Bestattungsformen, die genau die
beiden Unterpunkte noch einmal als Text enthält. Der Weg ist dort einen
Schritt länger, aber er ist nie versperrt. Das ist der Grund, warum der
Menüpunkt eine ECHTE Seite ist und kein bloßer Aufklapper.
--------------------------------------------------------------------------- */
/* Der Pfeil, den showSubmenuIcon:false weggenommen hat – hier als reines
CSS-Dreieck zurück. Ohne ein Zeichen dieser Art wäre nicht zu erkennen,
dass hinter dem Punkt mehr steckt. currentColor, damit er die Farbe des
Wortes mitmacht, auch im hervorgehobenen Zustand der aktuellen Seite. */
.bp-navigation .wp-block-navigation-submenu > .wp-block-navigation-item__content::after {
content: "";
display: inline-block;
margin-inline-start: 0.4em;
border: 0.3em solid transparent;
border-top-color: currentColor;
/* Das Dreieck sitzt sonst auf der Schriftlinie und wirkt zu tief. */
transform: translateY(0.15em);
}
/* Die Klappe ist ein Blatt wie jedes andere: dieselbe Rundung, derselbe
Schatten, dieselbe Grundfarbe. Der Kern gibt ihr sonst einen weißen Kasten
mit 1 px Rahmen, der auf dieser Website nirgends sonst vorkommt. */
.bp-navigation .wp-block-navigation__submenu-container {
min-width: 12rem;
padding-block: 0.5rem;
padding-inline: 0.5rem;
background-color: var(--wp--preset--color--basis);
border: 0;
border-radius: var(--wp--custom--radius--flaeche);
box-shadow: var(--wp--custom--schatten--hoch);
/*
Die Farbe gehört an den BEHÄLTER, nicht an den Verweis.
Der Kern setzt auf die Klappe `color: #000` und auf die Verweise darin
`color: inherit` – mit drei Klassen und damit gewichtiger als die Regel
weiter oben, die dem Menü Anthrazit gibt. Nachgemessen kamen die zwei
Unterpunkte deshalb in reinem Schwarz heraus, als einzige Wörter der
ganzen Website. Hier gesetzt erbt `inherit` den richtigen Wert.
*/
color: var(--wp--preset--color--anthrazit);
}
/*
Die Klappe hängt an der RECHTEN Kante ihres Menüpunktes, nicht an der linken.
Der Kern setzt `left: 0`. Das Menü steht auf dieser Website aber rechts im
Kopf, und die Klappe ist mit 210 px breiter als das Wort darüber – bei 390 px
Fensterbreite stand sie dadurch 32 px über den rechten Rand hinaus und
erzeugte einen waagrechten Scrollbalken auf der ganzen Startseite. Gemessen,
nicht vermutet: scrollWidth 407 bei clientWidth 375.
Nach rechts verankert kann das nicht mehr passieren: Die rechte Kante des
Menüpunktes liegt immer im Fenster, die Klappe wächst von dort nach links.
*/
.bp-navigation .wp-block-navigation__submenu-container {
left: auto;
right: 0;
}
.bp-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
border-radius: var(--wp--custom--radius--knopf);
padding-inline: 0.75rem;
}
/* Der einzige Zustandswechsel: Fläche statt Bewegung. Vorgabe aus dem
Auftrag – siehe den Abschnitt zu prefers-reduced-motion weiter unten. */
.bp-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.bp-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
background-color: var(--wp--preset--color--grund);
color: var(--wp--preset--color--text);
}
/*
Ohne Maus gibt es kein Aufklappen – dort steht das Menü wieder flach.
`hover: none` trifft Telefone und Tablets: Geräte, an denen :hover entweder
gar nicht oder nur als hängender Zustand nach einem Tipp existiert. Ein
Aufklappmenü wäre dort im besten Fall umständlich und im schlechtesten eine
Sackgasse. Die Breitenangabe kommt dazu, weil auch ein schmales Mausfenster
keinen Platz für eine 210 px breite Klappe neben einem umbrechenden Menü hat.
`display: contents` löst die zwei Behälter auf: Der Menüpunkt und die Klappe
verschwinden als Kästen, ihre Kinder werden unmittelbar zu Punkten der
Menüzeile. Herauskommt genau das flache Menü mit neun Punkten, das die Seite
bis zum 10. August 2026 hatte – nichts versteckt, nichts zum Treffen.
`visibility` muss ausdrücklich zurückgesetzt werden: Sie vererbt sich, und
der Kern setzt sie an der zugeklappten Klappe auf `hidden`. Ein Element mit
`display: contents` hat zwar keinen eigenen Kasten mehr, gibt den Wert aber
weiterhin an seine Kinder weiter – ohne diese Zeile bliebe das flache Menü
unsichtbar.
*/
@media (max-width: 48rem), (hover: none) {
.bp-navigation .wp-block-navigation-submenu,
.bp-navigation .wp-block-navigation__submenu-container {
display: contents;
}
.bp-navigation .wp-block-navigation__submenu-container,
.bp-navigation .wp-block-navigation__submenu-container > li {
visibility: visible;
}
/* Kein Pfeil ohne Klappe. */
.bp-navigation .wp-block-navigation-submenu > .wp-block-navigation-item__content::after {
content: none;
}
}
/* ---------------------------------------------------------------------------
Kopfband der Unterseiten
Gibt jeder Seite einen definierten Anfang. Vorher begann der Text
unmittelbar unter der Navigation, und neben der Startseite mit ihrem
Einstiegsband sah jede Unterseite unfertig aus.
--------------------------------------------------------------------------- */
/*
Kein graues Band mehr über die volle Breite. Der Titel steht auf dem Grund,
linksbündig auf derselben Kante wie der Text darunter.
*/
/* ---------------------------------------------------------------------------
Das Kopfband der Unterseiten
Auf Wunsch am 10. August 2026 wieder mit Bild und mittigem Titel, nach dem
Vorbild der bestehenden Seite. Es ist damit die EINE Stelle, an der das
Konzept „ein durchgehender Grund" bewusst unterbrochen wird – ein Bildband
ist eine Kante. Der Titel steht mittig, alles darunter linksbündig.
--------------------------------------------------------------------------- */
/*
Das Band schließt oben BÜNDIG an den Kopfbereich an.
Ohne diese Angabe setzt WordPress' Layout den Blockabstand (2 rem) auch vor
das erste Kind von main – zwischen Menü und Bild stand dadurch ein
32-px-Streifen Grund. Ein Kopfband, das nicht am Kopf klebt, sieht aus wie
ein verrutschtes Bild.
`margin-block-start` zusätzlich zu `margin-top`: WordPress setzt den Abstand
über die logische Eigenschaft; die physische allein wird überschrieben.
*/
.bp-seitenkopf {
margin-top: 0;
margin-block-start: 0;
margin-bottom: var(--wp--preset--spacing--30);
}
/*
Der Abstand saß nicht am Band, sondern an `main`.
Seit der Kopfbereich über `display: contents` aus seinem Vorlagenteil
gelöst ist (damit er kleben kann, siehe oben), ist `main` nicht mehr das
erste Kind von .wp-site-blocks und bekommt den Blockabstand von 2 rem.
Zwischen Menü und Bild stand dadurch ein 32-px-Streifen Grund.
Nur dort abgeschaltet, wo das Band tatsächlich oben steht: Die
Trauerfall-Seite hat keins und braucht ihren Abstand weiterhin.
*/
main:has(> .bp-seitenkopf) {
margin-top: 0;
margin-block-start: 0;
}
.bp-seitenkopf .wp-block-post-title,
.bp-seitenkopf .wp-block-query-title {
margin: 0;
max-width: none;
text-align: center;
color: var(--wp--preset--color--basis);
/* Ein weicher Schatten hinter der Schrift. Er trägt nicht den Kontrast –
das tut die Abdunklung –, nimmt aber unruhigen Bildstellen die Kante. */
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
/*
Der Betriebsname auf dem Band der Startseite, darunter der Seitentitel als
leisere Zeile. Am 10. August 2026 auf Wunsch ergänzt.
*/
/*
Der Name auf zwei Zeilen: „Bestattung" über „Pöttinger", wie auf der
bestehenden Seite.
Der Umbruch wird über die BREITE erzwungen, nicht über ein
: Der Block
gibt den Website-Titel aus, in den lässt sich keine Auszeichnung schreiben.
9 em fassen „Bestattung" (nachgemessen rund 5,6 em), aber nicht „Bestattung
Pöttinger" (rund 11 em) – der Umbruch fällt damit zuverlässig zwischen die
beiden Wörter, unabhängig von der Schriftgröße.
`text-wrap: balance` aus der allgemeinen Überschriftenregel wird hier
abgeschaltet: Es würde versuchen, beide Zeilen gleich lang zu machen, und
könnte den Namen dadurch anders trennen.
*/
.bp-bandname {
margin: 0;
/* Dieselbe Familie wie die bestehende Seite im Aufmacher verwendet
(Playfair Display SC). Solange die Schriftdatei fehlt, greift Georgia. */
font-family: var(--wp--preset--font-family--display);
font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.4rem);
/* Serifenschriften mit hohem Strichkontrast tragen große Grade auch ohne
Fettung; 600 statt 700 nimmt dem Namen die Schwere. */
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.2;
max-width: 9em;
margin-inline: auto;
text-wrap: wrap;
}
/*
Doppelte Bandhöhe auf Wunsch (520 statt 260 px). Auf schmalen Bildschirmen
ist das zu viel: 520 px sind auf einem 844-px-Handy fast zwei Drittel des
ersten Bildes, bevor eine Zeile Inhalt kommt. Dort 320 px.
*/
@media (max-width: 48rem) {
/* Nur das hohe Band der Startseite wird gekürzt. Die Unterseiten stehen
ohnehin auf 260 px und brauchen keine Ausnahme. */
.bp-seitenkopf-start {
min-height: 320px !important;
}
}
/*
Das Bild für Seiten ohne eigenes Beitragsbild und für die Archivseiten.
Das Chrysanthemenfoto der bestehenden Seite, übernommen am 10. August 2026.
Dort liegt es als JPEG mit 2560 x 1709 px und 351 KB. Für ein Band von
260 px Höhe ist das um ein Vielfaches zu viel: Hier steht es als
1800 x 700 px WebP mit 61 KB – auf Bandformat beschnitten, nicht nur
verkleinert, damit kein Bildinhalt bezahlt wird, den niemand sieht.
Kontrast weißer Schrift darüber, am Bild nachgemessen: bei 60 % Abdunklung
3,93 : 1 am hellsten Pixel (nötig sind 3,0 für große Schrift).
*/
.bp-seitenkopf-standard,
.bp-seitenkopf:not(:has(.wp-block-cover__image-background)) {
/* Von themes/bp-theme/ sind es zwei Ebenen bis wp-content/uploads/. */
background-image: url("../../uploads/2026/08/kopfband-chrysanthemen.webp");
background-size: cover;
background-position: center;
}
/* ---------------------------------------------------------------------------
Abschnittsüberschriften linksbündig
Vorher mittig – ein Erbe der bestehenden Seite. In einer linksbündigen
Textspalte erzeugt eine mittige Überschrift eine zweite Achse: Überschrift
und Text beginnen an verschiedenen Stellen, und der Blick findet keine Kante.
Das war einer der Befunde, die als „Bausteine ohne Idee“ auffielen.
--------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
Der Rhythmus im Seiteninhalt
Eine Überschrift gehört zu dem, was UNTER ihr steht, nicht zu dem darüber.
Genau das war der Fehler: Über und unter jeder Überschrift stand derselbe
Abstand (gemessen 24 px), sie trennte deshalb nichts – sie stand nur da.
Die Werte sind nach Größe gestaffelt, nicht geraten:
zwischen Absätzen 1,35 rem ≈ 23 px – knapp mehr als eine Zeilenhöhe
über einer H2 3,5 rem = 56 px – rund das Doppelte ihrer Größe
unter einer H2 0,6 rem = 10 px – sie bindet an ihren Absatz
über einer H3 2,25 rem = 36 px – weniger als H2, sie gliedert feiner
unter einer H3 0,5 rem = 8 px
Nicht über die Abstandsstufen aus theme.json: Die sind für Abschnitte und
Innenabstände gedacht (2 / 3,5 / 5,5 rem). Ein Fließtext braucht feinere
Schritte, und 5,5 rem über jeder Überschrift ergab auf dem Impressum mit
acht Überschriften allein 700 px Leerraum.
--------------------------------------------------------------------------- */
.wp-block-post-content > * + * {
margin-top: 1.35rem;
}
.wp-block-post-content > h2,
.wp-block-post-content > .wp-block-heading {
text-align: left;
margin-top: 3.5rem;
margin-bottom: 0;
}
.wp-block-post-content > h3 {
margin-top: 2.25rem;
margin-bottom: 0;
}
/* Der erste Block nach einer Überschrift rückt eng heran. */
.wp-block-post-content > h2 + *,
.wp-block-post-content > h3 + * {
margin-top: 0.6rem;
}
.wp-block-post-content > h3 + * {
margin-top: 0.5rem;
}
/* Die erste Überschrift einer Seite braucht keinen Abstand nach oben – über
ihr steht der Seitenkopf, der seinen eigenen mitbringt. */
.wp-block-post-content > :first-child {
margin-top: 0;
}
/*
Eine Überschrift, die eine breite Gruppe ankündigt, muss auf DEREN linker
Kante stehen.
Nachgemessen: „Bestattungsformen“ stand auf der Leseweite bei x=405, die drei
Karten darunter auf der Inhaltsreihe bei x=101. Zwei linke Kanten unter einer
Überschrift – also genau der Fehler, gegen den dieser ganze Umbau gerichtet
ist.
Die Breite wird auf die Inhaltsreihe gesetzt, nicht die Ausrichtung geändert:
WordPress' Layout „constrained“ zentriert jedes Kind mit margin auto, ein
1184 px breites Element landet dadurch von selbst auf x=101. Das ist die
Ausnahme von der Regel weiter oben („keine eigene max-width an Absätzen“) –
dort ging es um SCHMALERE Elemente, die durch dieselbe Zentrierung nach innen
rutschen.
*/
.wp-block-post-content > h2:has(+ .wp-block-columns),
.wp-block-post-content > h2:has(+ .bp-formen) {
max-width: var(--wp--style--global--wide-size);
width: 100%;
}
/* Fließtext auf der Startseite mittig gesetzte Spalte, wie im Original. */
.wp-block-post-content > p {
hyphens: auto;
}
/* Im Kopfband steht die Überschrift allein – der große Abstand der Regel
für Seitenüberschriften wäre hier ein Loch unter dem letzten Buchstaben. */
.bp-seitenkopf .wp-block-post-title,
.bp-seitenkopf .wp-block-query-title {
margin: 0;
}
/* ---------------------------------------------------------------------------
Einstieg der Startseite: Text links, Foto rechts
--------------------------------------------------------------------------- */
.bp-einstieg {
margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}
/*
Zwei Hälften auf einem Blatt: links das Wort, rechts das Bild.
`overflow: hidden` ist hier nicht Kosmetik – ohne die Angabe steht das Bild
über die gerundeten Ecken hinaus und das Blatt hat rechts zwei rechte Winkel.
*/
.bp-einstieg-blatt {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
overflow: hidden;
}
/*
Seit dem Kopfband ist der Einstieg einspaltig: Titel und Bild stehen jetzt
im Band darüber. Übrig bleibt der Zweck des Blattes – die Telefonnummer
ohne Scrollen sichtbar zu machen.
Er rückt zugleich nach oben an das Band heran (negatives Außenmaß), damit er
als Fortsetzung des Anfangs liest und nicht als eigener Abschnitt.
*/
/*
Zwei Klassen im Selektor, nicht eine: WordPress deckelt jedes `alignwide`
mit `.is-layout-constrained > .alignwide` (Spezifität 0,2,0) auf die
Inhaltsreihe. Eine einklassige Regel verliert dagegen – nachgemessen blieb
das Blatt 1184 px breit statt 896.
Und `margin-block-start` zusätzlich zu `margin-top`: Den Abstand zwischen
Blöcken setzt WordPress über die logische Eigenschaft. Wer nur die
physische angibt, wird still überschrieben – der negative Abstand kam
dadurch gar nicht an.
*/
.bp-einstieg-blatt.bp-einstieg-schmal {
grid-template-columns: minmax(0, 1fr);
/*
43 rem = Leseweite (36 rem) plus den beiden Innenabständen des Blattes.
Bei den vorherigen 56 rem stand der Text links und rechts blieben rund
300 px leer – solange nur ein Einleitungssatz darin stand, fiel das
nicht auf; mit dem „Über uns"-Text ist es eine offene Flanke.
*/
max-width: 43rem;
margin-inline: auto;
/*
-9,5 rem gegen die 3,5 rem Abschnittsabstand ergibt 96 px Überlappung.
Vorher waren es 32 px (bei -5,5 rem). Mit dem Band auf doppelter Höhe
(520 px) trug das nicht mehr: Die Karte saß darunter statt darin. Am
10. August 2026 auf Wunsch weiter nach oben gezogen.
Ein Viertel der Kartenhöhe liegt damit über dem Bild – genug, dass es
als Absicht liest, und wenig genug, dass der Name im Band frei bleibt.
*/
margin-top: -9.5rem;
margin-block-start: -9.5rem;
position: relative;
z-index: 1;
}
@media (max-width: 48rem) {
/* Auf schmalen Bildschirmen kein Überlappen: Dort ist das Band nur 260 px
hoch, und ein überlappendes Blatt schöbe den Titel an dessen Rand. */
.bp-einstieg-blatt.bp-einstieg-schmal {
margin-top: 0;
margin-block-start: 0;
}
}
.bp-einstieg-wort {
align-self: center;
padding: clamp(1.75rem, 1rem + 3vw, 3.25rem);
}
.bp-einstieg-wort > * + * {
margin-top: 1.1rem;
}
/* Die kleine Zeile über der Überschrift. Sie trägt den Akzent, weil sie das
einzige ist, was hier eingeordnet statt gelesen wird. */
.bp-vorlauf {
margin: 0;
font-family: var(--wp--preset--font-family--titel);
font-size: var(--wp--preset--font-size--klein);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--wp--preset--color--akzent);
}
.bp-einstieg-wort .wp-block-post-title {
margin: 1.1rem 0 0;
}
.bp-lead {
max-width: 30rem;
font-size: var(--wp--preset--font-size--gross);
line-height: 1.6;
color: var(--wp--preset--color--text-leise);
}
.bp-wege {
margin-top: 1.6rem !important;
gap: 0.75rem;
}
.bp-wege p {
margin: 0;
}
/* Die Telefonnummer als Schaltfläche: Ziffern auf gleicher Laufweite, damit
die Nummer nicht flackert, wenn sie mehrfach auf der Seite steht. */
.bp-nummer {
font-variant-numeric: tabular-nums;
}
.bp-notiz {
color: var(--wp--preset--color--text-leise);
}
/*
Das Bild füllt seine Hälfte des Blattes vollständig – es liegt bündig an
drei Kanten. Deshalb hier ausdrücklich KEIN eigener Radius: Die Rundung
kommt vom Blatt, das das Bild beschneidet.
*/
.bp-einstieg-bild {
margin: 0;
min-height: 340px;
}
.bp-einstieg-bild img {
display: block;
width: 100%;
height: 100%;
min-height: 340px;
object-fit: cover;
border-radius: 0;
}
/*
Auf schmalen Bildschirmen stapelt sich das Blatt. Das Bild steht dann OBEN –
dafür sorgt `order`, ohne die Quelltextreihenfolge zu ändern: In der
Leserichtung bleibt die Telefonnummer vor dem Bild, und genau darauf kommt
es an, wenn jemand die Seite in einer akuten Lage aufruft.
*/
@media (max-width: 60rem) {
.bp-einstieg-blatt {
grid-template-columns: 1fr;
}
.bp-einstieg-bild {
order: -1;
min-height: 0;
}
.bp-einstieg-bild img {
min-height: 0;
aspect-ratio: 16 / 9;
}
}
/* ---------------------------------------------------------------------------
Schaltflächen
--------------------------------------------------------------------------- */
/*
Nachgemessen an der bestehenden Seite: warmes Braun, 10 px Radius,
Innenabstand 13/29 px, Schrift 14 px, fett, Großbuchstaben.
Der Braunton ist nachgedunkelt (var(--wp--preset--color--akzent) statt var(--wp--preset--color--akzent)): Weiße Schrift auf
dem Original erreicht nur 2,81 : 1.
*/
.bp-knopf {
display: inline-flex;
align-items: center;
justify-content: center;
/* 52 px statt der 46 px des Originals – Mindestklickfläche für die
Zielgruppe. */
min-height: 52px;
padding: 0.8rem 1.35rem;
background-color: var(--wp--preset--color--akzent);
color: var(--wp--preset--color--basis);
font-family: var(--wp--preset--font-family--titel);
font-size: 0.9375rem;
font-weight: 700;
/* Keine Großbuchstaben mehr. Die wichtigste Schaltfläche der Website ist
eine Telefonnummer – dort zählen Ziffern und Zwischenräume, nicht
Lautstärke. Gesperrte Versalien lesen sich zudem langsamer. */
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
text-decoration: none;
border: 1px solid var(--wp--preset--color--akzent);
border-radius: var(--wp--custom--radius--knopf);
}
.bp-knopf:hover,
.bp-knopf:focus-visible {
/* Dunkleres Oliv statt Anthrazit: Ein Farbwechsel innerhalb derselben Farbe
liest sich als Antwort auf die Berührung, ein Sprung nach Schwarz als
anderer Knopf. */
background-color: var(--wp--preset--color--akzent);
border-color: var(--wp--preset--color--akzent);
color: var(--wp--preset--color--basis);
}
/* Der zweite Weg: gleiche Größe, nur umrissen statt gefüllt. Umrissen in der
Linienfarbe und mit Textfarbe beschriftet – zwei olivfarbene Knöpfe
nebeneinander wären zwei Hauptwege, und es gibt nur einen. */
.bp-knopf-leise {
background-color: transparent;
color: var(--wp--preset--color--text);
border-color: var(--wp--preset--color--linie);
}
.bp-knopf-leise:hover,
.bp-knopf-leise:focus-visible {
background-color: var(--wp--preset--color--basis);
border-color: #cfcfc6;
color: var(--wp--preset--color--text);
}
/*
Im dunklen Kontaktfeld.
Die Reihenfolge zählt: `.bp-kontaktband a` weiter unten hat zwei Klassen
Spezifität und würde die Knopfregeln (eine Klasse) schlagen. Beim Entwurf
stand die Telefonschaltfläche dadurch hellgrün auf hellgrün und war
unlesbar. Deshalb hier ebenfalls mit zwei Klassen, nicht mit !important.
*/
/* ---------------------------------------------------------------------------
HIER STANDEN DIE REGELN FÜR DAS DUNKLE KONTAKTBAND — entfernt am 24. August.
Das Band war eine anthrazitfarbene, gerundete Fläche; alles darin brauchte
deshalb eine eigene Umkehrung: helle Schrift, markengrüne Knöpfe, dunkle
Formularfelder, ein hellgrauer Platzhalterton.
Seit das Band auf dem normalen Grund steht (Leitreferenz: Kontaktbereich
linksbündig, Felder nur mit Unterstrich), sind diese Regeln nicht mehr nur
überflüssig, sondern falsch: Die weißen Beschriftungen standen auf hellem
Grund und waren unlesbar, die Felder blieben dunkle Blöcke mitten im Satz.
Der Ersatz steht in gestaltung.css, Abschnitt 10. Bewusst dort und nicht
hier: Diese Datei trägt die alte Gestaltung, jene die neue. Ein Wert an
zwei Stellen ist ein Fehler an einer davon.
--------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
Zitatband und Kontaktband – die zwei dunklen Streifen
--------------------------------------------------------------------------- */
/*
Das Zitat ist der eine typografische Moment der Startseite.
Vorher stand es in Großbuchstaben, sehr leichtem Schnitt und weißer Schrift
über einem Foto, mit einer Schaltfläche rechts daneben – drei Dinge, die um
dieselbe Aufmerksamkeit stritten. Jetzt steht es allein auf dem Grund:
Serifenschrift, kursiv, mittig, darüber ein kurzer Strich in der
Akzentfarbe. Kein Foto, keine Schaltfläche.
Serife ist hier kein Rückfall in den früheren Entwurf. Sie kommt auf der
ganzen Website an genau zwei Stellen vor: beim Kreuz † und hier. Beide Male,
weil sie etwas bedeutet – und weil eine Ausnahme nur wirkt, solange sie eine
bleibt.
*/
.bp-zitat {
margin: 0 auto;
max-width: 44rem;
font-family: var(--wp--preset--font-family--display);
font-style: italic;
font-weight: 400;
font-size: clamp(1.35rem, 1rem + 1.5vw, 1.9rem);
line-height: 1.6;
letter-spacing: 0;
text-transform: none;
text-align: center;
color: var(--wp--preset--color--text);
}
/* Der kurze Strich über dem Zitat. Ersetzt das Foto als Ankündigung. */
.bp-zitatband::before {
content: "";
display: block;
width: 44px;
height: 2px;
margin: 0 auto var(--wp--preset--spacing--30);
border-radius: 2px;
background-color: var(--wp--preset--color--akzent);
}
.bp-zitatband p,
.bp-kontaktband p {
margin: 0;
}
.bp-kontaktband-anschrift + .bp-kontaktband-anschrift {
margin-top: var(--wp--preset--spacing--20) !important;
}
/*
ENTFERNT am 10. August 2026.
Hier stand `.bp-kontaktband .bp-knopf, .bp-zitatband .bp-knopf { color: basis }`
– aus der Zeit, als der Knopf im dunklen Band braun gefüllt war und weiße
Schrift brauchte. Der Knopf ist dort jetzt hellgrün (#95ac45); weiße Schrift
darauf ergibt nachgemessen 2,54:1 statt der nötigen 4,5:1.
Die Regel hatte dieselbe Spezifität wie die richtige weiter oben (Zeile 824)
und stand später – sie hat also gewonnen. Aufgefallen ist das nicht im Bild,
sondern erst beim Nachmessen aller 1833 Textknoten.
Die gültige Festlegung steht im Abschnitt „Schaltflächen“.
*/
/*
Die Überschrift im Kontaktfeld.
Stand vorher in Schreibschrift (Dancing Script). Eine vierte Schriftfamilie,
die genau einmal auf der ganzen Website vorkommt und nichts bedeutet – sie
ist mit den Geisterzahlen und dem zweiten Akzentton zusammen entfallen.
*/
.bp-schreibtitel {
margin: 0 0 var(--wp--preset--spacing--20);
font-family: var(--wp--preset--font-family--titel);
font-weight: 700;
text-align: left;
color: var(--wp--preset--color--basis);
}
/* ---------------------------------------------------------------------------
Das Kontaktfeld – auch das Dunkel ist ein Blatt
Genau hier liegt der sichtbarste Unterschied zum Nachbau. Dort schnitt ein
anthrazites Band über die volle Breite die Seite entzwei. Jetzt liegt
dasselbe Dunkel als Blatt IM Grund: gerundet, mit Abstand zu den Rändern,
mit derselben Schattenstufe wie jedes andere Blatt. Es bleibt damit Teil
derselben Ordnung, statt sie zu unterbrechen.
--------------------------------------------------------------------------- */
.bp-kontakt-satz {
margin-top: 0.75rem;
max-width: 34rem;
color: var(--wp--preset--color--text-leise);
}
/*
Die Telefonnummer als große Zeile, nicht als Knopf.
Sie ist die eine Handlung, um die es in diesem Abschnitt geht. Als Knopf
neben einem zweiten Knopf stand sie gleichrangig neben dem Formular – dabei
ruft in einer akuten Lage niemand ein Formular auf.
Ziffern auf gleicher Laufweite, damit die Nummer nicht flackert, und ein
dicker Unterstrich mit Abstand statt einer Umrandung: Sie soll als Zeile
lesbar bleiben und trotzdem als Ziel erkennbar sein.
*/
.bp-kontakt-nummer {
margin-top: 1.75rem;
}
.bp-kontakt-nummer a {
display: inline-block;
min-height: 44px;
font-family: var(--wp--preset--font-family--titel);
font-size: clamp(1.6rem, 1.1rem + 2vw, 2.25rem);
font-weight: 700;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
color: var(--wp--preset--color--marke);
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 0.22em;
}
.bp-kontakt-nummer a:hover,
.bp-kontakt-nummer a:focus-visible {
color: var(--wp--preset--color--basis);
}
.bp-kontakt-zweitweg {
margin-top: 1.1rem;
}
/*
Die Anschrift schließt leise ab. Sie wiederholt, was die Kontaktleiste am
unteren Rand ohnehin dauernd zeigt – hier steht sie der Vollständigkeit
halber, nicht um gelesen zu werden.
*/
.bp-kontakt-anschrift {
margin-top: 2.25rem;
padding-top: 1.5rem;
max-width: 44rem;
border-top: 1px solid #4a4a45;
color: var(--wp--preset--color--text-leise);
}
.bp-kontakt-anschrift strong {
color: var(--wp--preset--color--basis);
}
/* ---------------------------------------------------------------------------
Die drei Bestattungsformen – als Blätter
Vorher war das das auffälligste Merkmal der bestehenden Seite: hinter jeder
Überschrift eine sehr große hellgraue Ziffer (01, 02, 03), darunter eine
kurze braune Linie, dann Text, dann ein hochformatiges Foto mit Schatten –
die drei Fotos gegeneinander versetzt.
Im Browser nachgesehen war genau das die schwächste Stelle der Seite:
- Die Geisterzahlen kollidierten mit den Überschriften. „03“ lag hinter
„Sonstige Bestattungsformen“, das über zwei Zeilen läuft.
- Weil die dritte Überschrift zweizeilig ist, begann der Text der dritten
Spalte tiefer als in den ersten beiden.
- Der Versatz der Fotos verstärkte das, statt es aufzufangen: unten fransten
die drei Spalten auf drei verschiedenen Höhen aus.
Jetzt ist jede Form dasselbe Blatt: Bild oben bündig mit den Kanten, darunter
eine ruhige Ziffer, Überschrift, Text. Die Zahl zählt, statt zu dekorieren.
Sie kommt weiterhin aus einem CSS-Zähler und nicht aus dem Inhalt – ein
Vorleseprogramm liest sie also nicht mit, und eine vierte Bestattungsform
zählt von selbst mit.
Die Auszeichnung dafür steht im SEITENINHALT, nicht in der Vorlage. Deshalb
löst das hier alles über Reihenfolge und Innenabstand, ohne dass am Inhalt
etwas geändert werden muss.
--------------------------------------------------------------------------- */
.bp-formen {
counter-reset: bp-form;
align-items: stretch;
}
.bp-formen .wp-block-column {
display: flex;
flex-direction: column;
padding: 0 0 var(--wp--preset--spacing--30);
overflow: hidden;
background-color: var(--wp--preset--color--basis);
border-radius: var(--wp--custom--radius--blatt);
box-shadow: var(--wp--custom--schatten--sanft);
}
/*
Das Bild steht im Inhalt UNTER dem Text. `order` holt es an den Kopf der
Karte, ohne den Inhalt umzuschreiben. Für Vorleseprogramme und Tastatur
bleibt die Reihenfolge des Quelltextes maßgeblich – hier unbedenklich, weil
Bild und Text nicht aufeinander verweisen.
*/
.bp-formen .wp-block-image {
order: -1;
margin: 0 0 var(--wp--preset--spacing--30);
}
.bp-formen .wp-block-image img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
/* Bündig mit den Kartenkanten: eigener Radius und Schatten wären hier
ein Rahmen im Rahmen. */
border-radius: 0;
box-shadow: none;
}
.bp-formen :is(h2, h3),
.bp-formen p,
.bp-formen ul,
.bp-formen ol {
padding-inline: var(--wp--preset--spacing--30);
}
/*
h2 UND h3 – seit dem 11. August 2026.
Die drei Formen standen früher als h3 unter der h2 „Bestattungsformen" auf der
Startseite. Seit sie eine eigene Seite haben, ist die Seitenüberschrift die h1
und die h2 darüber entfallen: Die Gliederung sprang dadurch von h1 auf h3.
Auf einer Seite, die „Bestattungsformen" heißt, SIND die drei Formen die
oberste Ebene – sie sind jetzt h2.
Beide Stufen bleiben gültig, damit derselbe Baustein auch wieder unter einer
Überschrift stehen könnte, ohne dass die Gestaltung nachgezogen werden muss.
*/
.bp-formen :is(h2, h3) {
margin-top: 0;
margin-bottom: var(--wp--preset--spacing--20);
color: var(--wp--preset--color--text);
counter-increment: bp-form;
}
/* Die Ziffer über der Überschrift – klein, in der Akzentfarbe, auf gleicher
Laufweite. Sie zählt die Formen, sie schmückt sie nicht. */
.bp-formen :is(h2, h3)::before {
content: counter(bp-form, decimal-leading-zero);
display: block;
margin-bottom: 0.35rem;
font-size: var(--wp--preset--font-size--klein);
font-weight: 700;
letter-spacing: 0.12em;
font-variant-numeric: tabular-nums;
color: var(--wp--preset--color--akzent);
}
/*
16px statt 14 – geändert am 11. August 2026.
Solange die drei Karten ein Nebenabschnitt der Startseite waren, war eine
Stufe unter dem Fließtext richtig: Sie standen unter einer Überschrift, und
darüber wie darunter stand größerer Text, an dem sie sich ausrichten konnten.
Seit sie eine eigene Seite tragen, sind sie der gesamte Inhalt dieser Seite.
Damit ist ihr Text der Fließtext – und 14px sind für Fließtext zu wenig,
erst recht bei einer Zielgruppe mit vielen älteren Besuchern. Die leisere
Farbe bleibt: Der Abstand zur Überschrift entsteht jetzt über den Ton, nicht
über die Größe.
*/
.bp-formen p,
.bp-formen li {
font-size: var(--wp--preset--font-size--normal);
color: var(--wp--preset--color--text-leise);
}
/*
Die Aufzählungen in den Karten.
Vorher hingen sie abgelöst am Fuß der Karte: Zwischen dem Absatz darüber und
dem ersten Punkt standen 32 px Blockabstand – innerhalb der Karten greift der
Textrhythmus aus dem Seiteninhalt nicht. Zwei Punkte, die zu ihrem eigenen
Absatz gehören, standen dadurch weiter von ihm entfernt als von der
Kartenkante.
Dazu die Punkte selbst: Der Browser rückt eine Liste um rund 1,1 rem ein,
die Aufzählungszeichen standen dadurch links AUSSERHALB der Textkante der
Karte. Jetzt trägt jeder Punkt seinen eigenen Punkt als Pseudoelement, in
der Akzentfarbe, und der Text beginnt auf derselben senkrechten Kante wie
der Absatz darüber.
*/
.bp-formen ul {
margin-top: 0.5rem;
list-style: none;
padding-left: var(--wp--preset--spacing--30);
}
.bp-formen li {
position: relative;
padding-left: 0.95rem;
}
.bp-formen li + li {
margin-top: 0.3rem;
}
/*
Das Aufzählungszeichen ist eine kleine Raute, kein Punkt.
Ein runder Punkt ist die Grundeinstellung des Browsers und sagt nichts. Die
auf die Ecke gestellte Raute ist ein altes Satzzeichen aus dem Buchdruck,
ruhig und ein wenig feiner – sie passt zu einer Seite, die sonst mit
Haarlinien und Weißraum gliedert.
Als gedrehtes Quadrat gebaut und nicht als Zeichen ◆: So hängt die Größe
nicht davon ab, welche Schrift der Besucher hat, und ein Vorleseprogramm
liest nichts mit.
*/
.bp-formen li::before {
content: "";
position: absolute;
left: 1px;
/* 0,58 em trifft die Mittellinie der ersten Zeile, nachdem die Drehung
die sichtbare Höhe um den Faktor √2 vergrößert. */
top: 0.58em;
width: 6px;
height: 6px;
transform: rotate(45deg);
background-color: var(--wp--preset--color--akzent);
}
/* ---------------------------------------------------------------------------
Die Trauerfall-Seite – das Blatt IST die Parte
Die einzige Seite, auf der das Atom als es selbst auftritt, in voller Größe.
Deshalb darf sie anders aussehen als alle anderen: kein Seitenkopf darüber,
ein Blatt, das breiter ist als die Leseweite, und ein symmetrisch gesetzter
Kopf.
--------------------------------------------------------------------------- */
.bp-trauerfall-blatt {
max-width: 46rem;
width: 100%;
margin-inline: auto;
margin-top: var(--wp--preset--spacing--40);
padding: clamp(1.75rem, 1rem + 3vw, 3.25rem);
}
/*
Der Parte-Kopf trug bisher eine eigene helle Fläche mit Rundung. Innerhalb
des Blattes wäre das eine Fläche auf einer Fläche – zweimal dasselbe gesagt.
Die Absetzung übernimmt jetzt das Blatt selbst.
*/
.bp-trauerfall-blatt .bp-parte-kopf {
background-color: transparent;
border-radius: 0;
padding: 0;
}
/* Die Parte groß und mittig – sie ist der Gegenstand dieser Seite, nicht eine
Beigabe am linken Rand.
DER DECKEL VON 420 PX IST AM 27. AUGUST 2026 ENTFALLEN. Er stammt aus der
Zeit, als das Blatt die volle Leseweite von 826 px hatte und die Parte
darin nicht verloren wirken sollte. Seit das Blatt selbst auf 624 px steht,
soll die Parte es füllen – „so breit wie der Container".
Die Breite steht jetzt an EINER Stelle: am Blatt (gestaltung.css
Abschnitt 20). Die Parte nimmt 100 %.
`margin-inline: auto` bleibt: Sollte je ein schmaleres Bild hier stehen,
sitzt es mittig statt links. */
.bp-trauerfall-blatt .bp-parte-bild,
.bp-trauerfall-blatt .bp-parte-link {
display: block;
margin-inline: auto;
}
.bp-trauerfall-blatt .bp-parte-bild {
width: 100%;
height: auto;
box-shadow: var(--wp--custom--schatten--sanft);
}
/*
Die Überschrift „Parte“ steht als kleine Marke über dem Bild. Sie bleibt im
Quelltext eine H2 – ein Vorleseprogramm braucht sie, um den Abschnitt zu
finden –, tritt aber nicht als Überschrift auf: Das Bild darunter sagt
bereits, was es ist.
*/
.bp-trauerfall-blatt .bp-parte > h2 {
margin: 0 0 var(--wp--preset--spacing--20);
text-align: center;
font-size: var(--wp--preset--font-size--klein);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--wp--preset--color--text-leise);
}
.bp-trauerfall-blatt .bp-parte-hinweis,
.bp-trauerfall-blatt .bp-parte-download {
display: block;
text-align: center;
}
/* Der Weg zur PDF ist die zweitwichtigste Handlung dieser Seite – viele
Angehörige laden die Parte herunter, um sie weiterzugeben. Als Schaltfläche
statt als Textzeile. */
.bp-trauerfall-blatt .bp-parte-download {
margin-top: var(--wp--preset--spacing--30);
}
.bp-trauerfall-blatt .bp-parte-download a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 0.8rem 1.35rem;
border: 1px solid var(--wp--preset--color--akzent);
border-radius: var(--wp--custom--radius--knopf);
background-color: var(--wp--preset--color--akzent);
color: var(--wp--preset--color--basis);
font-family: var(--wp--preset--font-family--titel);
font-size: 0.9375rem;
font-weight: 700;
text-decoration: none;
}
.bp-trauerfall-blatt .bp-parte-download a:hover,
.bp-trauerfall-blatt .bp-parte-download a:focus-visible {
background-color: var(--wp--preset--color--akzent);
border-color: var(--wp--preset--color--akzent);
color: var(--wp--preset--color--basis);
}
.bp-zurueck {
max-width: 46rem;
margin-inline: auto;
text-align: center;
}
/* ---------------------------------------------------------------------------
Register der Trauerfälle
Eine Liste, keine Kachelwand. Aufbau wie ein gedrucktes Verzeichnis: das
Vorschaubild links, rechts Sterbedatum, Name und Angaben untereinander.
Weil die Bildspalte eine feste Breite hat, stehen alle Datumsangaben auf
derselben senkrechten Kante.
--------------------------------------------------------------------------- */
/*
Jeder Eintrag ist ein Blatt, nicht eine Zeile zwischen zwei Haarlinien. Die
Liste stand vorher außerdem in der Leseweite, also in einer schmalen Spalte
mit sehr viel Leere links und rechts; sie nutzt jetzt die Inhaltsreihe.
*/
.bp-liste {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.85rem;
max-width: var(--bp-verzeichnis);
width: 100%;
}
/* ---------------------------------------------------------------------------
Die drei aktuellen Parten auf der Startseite
Dieselben Einträge wie im Verzeichnis, nur nebeneinander statt untereinander:
Parte oben, Angaben darunter, mittig. Es ist dasselbe Atom in anderer
Anordnung – deshalb genügen hier wenige Regeln, die die Zeilenform des
Registers in eine Karte drehen.
--------------------------------------------------------------------------- */
.bp-aktuelle {
margin-block: var(--wp--preset--spacing--50);
}
.bp-abschnittskopf {
margin-bottom: var(--wp--preset--spacing--30);
}
.bp-abschnittskopf p,
.bp-abschnittskopf h2 {
margin: 0;
}
.bp-mehr a {
/* Kein Verweis im Satz, sondern ein eigener Weg – deshalb dieselbe
Mindestklickfläche wie bei den Menüpunkten und nicht die 19 px, die eine
Textzeile von sich aus hoch ist. */
display: inline-flex;
align-items: center;
min-height: 44px;
font-family: var(--wp--preset--font-family--titel);
font-weight: 700;
font-size: var(--wp--preset--font-size--klein);
white-space: nowrap;
text-decoration: none;
}
.bp-mehr a:hover,
.bp-mehr a:focus-visible {
text-decoration: underline;
}
.bp-liste.bp-liste-karten {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.25rem;
max-width: var(--wp--style--global--wide-size);
}
.bp-liste-karten .bp-liste-eintrag > a {
grid-template-columns: minmax(0, 1fr);
justify-items: center;
text-align: center;
padding: 1.15rem;
row-gap: 0.9rem;
}
/* Die Parte behält ihr Hochformat und ihre Breite – gedehnt auf Kartenbreite
wäre sie unscharf, das Bild liegt nur mit 144 px vor. */
.bp-liste-karten .bp-liste-bild,
.bp-liste-karten .bp-liste-bild-leer {
width: 96px;
}
.bp-liste-karten .bp-liste-text {
grid-template-columns: minmax(0, 1fr);
}
.bp-liste-karten .bp-liste-termin {
grid-column: 1;
grid-row: auto;
text-align: center;
}
@media (max-width: 60rem) {
.bp-liste.bp-liste-karten {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 40rem) {
.bp-liste.bp-liste-karten {
grid-template-columns: minmax(0, 1fr);
}
}
/* ---------------------------------------------------------------------------
Die Übersicht /trauerfaelle/ – vier Kacheln je Reihe, kleiner
Am 21. August 2026 dazugekommen. Dieselbe Karte wie auf der Startseite, nur
schmaler: zwölf Einträge in drei Reihen zu vier statt sechs in zwei Reihen
zu drei.
Kleiner heißt hier drei Werte: Parte 96 → 72 px, Polster 1,15 → 0,8 rem,
Rinne 1,25 → 0,9 rem. Bei 74 rem Inhaltsbreite bleiben je Kachel rund
250 px – genug für „† 18. Juli 2026", einen zweizeiligen Namen und den Ort.
ACHTUNG, sonst bricht das Handy: Diese Regeln haben mit drei Klassen eine
höhere Spezifität als die Kartenregeln oben. Deren Umbrüche bei 60 und
40 rem greifen hier deshalb NICHT – die vier Spalten blieben bis 390 px
stehen. Die Umbrüche darunter sind kein Beiwerk, sie sind Bedingung.
--------------------------------------------------------------------------- */
.bp-liste.bp-liste-karten.bp-liste-karten-vier {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.9rem;
}
.bp-liste-karten-vier .bp-liste-eintrag > a {
padding: 0.8rem;
row-gap: 0.65rem;
}
.bp-liste-karten-vier .bp-liste-bild,
.bp-liste-karten-vier .bp-liste-bild-leer {
width: 72px;
}
/* 66 rem: vier Kacheln fielen unter 200 px, der Name bräche dreizeilig um. */
@media (max-width: 66rem) {
.bp-liste.bp-liste-karten.bp-liste-karten-vier {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* 48 rem (768 px, das Tablet quer): drei wären hier je 230 px – noch lesbar,
aber die Parte stünde neben zu wenig Text. Zwei sind ruhiger. */
@media (max-width: 48rem) {
.bp-liste.bp-liste-karten.bp-liste-karten-vier {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* 34 rem: bei 390 px blieben zwei Kacheln je 175 px. Eine Spalte, und die
Parte darf dort wieder ihre volle Breite haben. */
@media (max-width: 34rem) {
.bp-liste.bp-liste-karten.bp-liste-karten-vier {
grid-template-columns: minmax(0, 1fr);
}
.bp-liste-karten-vier .bp-liste-bild,
.bp-liste-karten-vier .bp-liste-bild-leer {
width: 96px;
}
}
/* ---------------------------------------------------------------------------
Die Breite des Verzeichnisses
Eine eigene Ebene zwischen Leseweite (36 rem) und Inhaltsreihe (74 rem).
Warum nicht die Leseweite: Nachgemessen stand die Liste bei 576 px in einer
1385 px breiten Seite, links und rechts je rund 400 px Leere. Ein
Verzeichnis ist kein Fließtext – es wird überflogen, nicht Zeile für Zeile
gelesen.
Warum nicht die volle Inhaltsreihe: Am Bestand nachgesehen tragen die 224
migrierten Datensätze NUR Sterbedatum, Lebensjahr und die Parte. Gemeinde
und Termine sind bei keinem einzigen gefüllt (geprüft am 10. August 2026:
der Meta-Schlüssel bp_termine existiert auf keinem Datensatz). Bei 1184 px
stünden neben jedem Namen rund 700 px Leere – dieselbe Leere, die den
Nachbau unfertig wirken ließ, nur an anderer Stelle.
52 rem fasst Bild, Datum, Name und – sobald sie eingetragen werden – Termine
ohne Gedränge. Alle vier Teile des Verzeichnisses teilen sie sich, damit es
genau eine linke Kante gibt.
--------------------------------------------------------------------------- */
:root {
--bp-verzeichnis: 52rem;
}
/* Die Blätterleiste nimmt die Breite des Verzeichnisses an. Hier stand bis
zum 2. September 2026 auch .bp-filter – die Jahresleiste ist entfallen. */
.bp-blaettern {
max-width: var(--bp-verzeichnis);
width: 100%;
}
/*
Der Seitenkopf über einem Verzeichnis nimmt dieselbe Breite an. Über :has(),
damit gewöhnliche Seiten unberührt bleiben – dort steht unter dem Titel
Fließtext, und der hat seine eigene, engere Kante.
*/
main:has(.bp-liste) .bp-seitenkopf .wp-block-post-title,
main:has(.bp-liste) .bp-seitenkopf .wp-block-query-title {
max-width: var(--bp-verzeichnis);
width: 100%;
margin-inline: auto;
}
.bp-liste-eintrag {
margin: 0;
background-color: var(--wp--preset--color--basis);
border-radius: var(--wp--custom--radius--blatt);
box-shadow: var(--wp--custom--schatten--sanft);
}
/*
Genau zwei Rasterfelder: Bild und Textblock. Nicht fünf gleichrangige
Elemente – der Grund dafür steht in BP_TF_Liste::eintrag(): Das Bild lag
sonst in Rasterzeile 1 und dehnte sie auf seine Höhe von 137 px, der Name
rutschte dadurch vier Zeilenhöhen unter sein eigenes Sterbedatum.
*/
.bp-liste-eintrag > a {
display: grid;
grid-template-columns: 96px minmax(0, 1fr);
column-gap: 1.5rem;
align-items: center;
padding: 1.1rem 0.75rem;
min-height: 48px;
color: inherit;
text-decoration: none;
border-radius: var(--wp--custom--radius--bild);
}
/*
Zwei Spalten innerhalb des Textblocks: links Datum, Name und Gemeinde,
rechts der Termin.
Beim ersten Versuch stand der Termin unter der Gemeinde und zwischen Name und
rechtem Rand blieben rund 600 px leer. Der Termin ist neben dem Namen die
zweite Angabe, deretwegen jemand die Seite aufruft – er gehört dorthin.
Gelöst über die Rasterzuordnung und nicht über eine Änderung am Plugin: Die
Reihenfolge im Quelltext (Datum, Name, Gemeinde, Termin) bleibt genau so, wie
ein Vorleseprogramm sie braucht.
*/
.bp-liste-text {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 1.5rem;
align-items: center;
}
.bp-liste-datum,
.bp-liste-name,
.bp-liste-ort {
grid-column: 1;
}
.bp-liste-termin {
grid-column: 2;
grid-row: 1 / -1;
align-self: center;
text-align: right;
}
@media (max-width: 48rem) {
/* Auf schmalen Bildschirmen rutscht der Termin unter die Angaben. Zwei
Spalten hätten dort je rund 130 px – der Name bräche dann mitten im Wort. */
.bp-liste-text {
grid-template-columns: minmax(0, 1fr);
}
.bp-liste-termin {
grid-column: 1;
grid-row: auto;
text-align: left;
}
}
.bp-liste-bild {
display: block;
width: 100%;
height: auto;
border-radius: var(--wp--custom--radius--knopf);
}
/*
Platzhalter, wenn keine Vorschau vorliegt. Das Seitenverhältnis entspricht
dem der Parten (240 x 339). Ohne Platzhalter rutschte der Text dieser Zeile
an die Bildkante, und bei 224 Einträgen fällt eine einzige verrutschte Zeile
sofort auf.
*/
.bp-liste-bild-leer {
display: block;
aspect-ratio: 240 / 339;
background-color: var(--wp--preset--color--flaeche);
border-radius: var(--wp--custom--radius--knopf);
}
/* Bei Berührung hebt sich das Blatt auf die hohe Schattenstufe, statt seine
Fläche einzufärben – dieselbe Sprache wie bei allen anderen Blättern. */
.bp-liste-eintrag:hover,
.bp-liste-eintrag:focus-within {
box-shadow: var(--wp--custom--schatten--hoch);
}
.bp-liste-eintrag > a:hover .bp-liste-name,
.bp-liste-eintrag > a:focus-visible .bp-liste-name {
color: var(--wp--preset--color--akzent);
}
/* Bei Berührung wird der Name unterstrichen – die Farbe allein soll nicht
das einzige Merkmal sein, dass hier ein Verweis liegt. */
.bp-liste-eintrag > a:hover .bp-liste-name,
.bp-liste-eintrag > a:focus-visible .bp-liste-name {
text-decoration: underline;
text-underline-offset: 0.15em;
}
.bp-liste-datum {
white-space: nowrap;
}
.bp-liste-datum,
.bp-liste-ort,
.bp-liste-termin {
display: block;
font-size: var(--wp--preset--font-size--klein);
color: var(--wp--preset--color--text-leise);
}
.bp-liste-name {
display: block;
margin: 0.1rem 0 0;
font-size: var(--wp--preset--font-size--titel-klein);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--wp--preset--color--text);
}
.bp-liste-anrede {
font-size: var(--wp--preset--font-size--normal);
font-weight: 400;
letter-spacing: 0;
color: var(--wp--preset--color--text-leise);
}
.bp-liste-termin {
margin-top: 0.3rem;
}
.bp-leer {
padding: 1.5rem 0;
color: var(--wp--preset--color--text-leise);
}
@media (max-width: 34rem) {
/*
Gerechnet: Bei 390 px Bildschirm und 2 x 16 px Seitenrand bleiben 358 px.
Mit einem 96-px-Bild blieben 238 px für den Namen – lange Namen liefen
dreizeilig. Mit 72 px bleiben 262 px. Das Bild ist dann zugleich in
doppelter Auflösung vorhanden (Datei 144 px), also scharf.
*/
.bp-liste-eintrag > a {
grid-template-columns: 72px minmax(0, 1fr);
column-gap: 1rem;
padding-inline: 0.25rem;
}
}
/* --- Suchformular ---
Die Regeln galten bis zum 2. September 2026 dem Suchfeld über dem
Verzeichnis. Das ist entfallen; .bp-suche trägt jetzt nur noch das
Suchfeld der allgemeinen Suchergebnisseite, siehe templates/search.html.
Deshalb stehen sie hier weiter – wer sie entfernt, nimmt der Suchseite
ihr Formular.
Entfallen sind mit dem Filter: .bp-filter und die Jahresleiste .bp-jahre. */
.bp-suche {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: flex-end;
margin-bottom: var(--wp--preset--spacing--30);
}
.bp-suche label {
flex: 1 1 100%;
font-weight: 600;
}
.bp-suche input[type="search"] {
flex: 1 1 16rem;
min-height: 48px;
padding: 0.6rem 0.9rem;
font-family: inherit;
font-size: var(--wp--preset--font-size--normal);
color: var(--wp--preset--color--text);
background-color: var(--wp--preset--color--basis);
border: 1px solid var(--wp--preset--color--text-leise);
border-radius: var(--wp--custom--radius--knopf);
}
.bp-suche button {
min-height: 48px;
padding: 0.6rem 1.4rem;
font-family: inherit;
font-size: var(--wp--preset--font-size--normal);
font-weight: 600;
color: var(--wp--preset--color--basis);
background-color: var(--wp--preset--color--akzent);
border: 1px solid var(--wp--preset--color--akzent);
border-radius: var(--wp--custom--radius--knopf);
cursor: pointer;
}
.bp-suche button:hover,
.bp-suche button:focus-visible {
background-color: var(--wp--preset--color--text);
border-color: var(--wp--preset--color--text);
}
.bp-archiv-hinweis {
margin-bottom: var(--wp--preset--spacing--30);
}
/* ---------------------------------------------------------------------------
Blättern im Archiv
„Neuere“ links, Stand mittig, „Ältere“ rechts. Die beiden Wege behalten
ihren Platz, auch wenn es dorthin nichts zu gehen gibt – dafür sorgt
`.bp-blaettern-aus`. Sonst spränge die Standanzeige auf der ersten und
letzten Seite an eine andere Stelle.
Keine Seitenzahlen 1…9: Neun Zahlen brauchen wegen der Mindestklickfläche
je 44 px, zusammen rund 510 px – neben den beiden Wegen passt das nicht in
die Leseweite. Der weite Sprung geschieht über die Jahresleiste darüber.
--------------------------------------------------------------------------- */
/*
OHNE TRENNLINIE - 30. August 2026 auf Wunsch.
Hier stand `border-top: 1px solid var(--wp--preset--color--linie)`. Sie
sollte die Blaetterleiste von der Liste absetzen, und solange die Liste
eine Zeilenliste war, tat sie das auch.
Seit die Trauerfaelle als Kacheln stehen, setzt jede Kachel sich selbst ab.
Die Linie darunter zog dann eine zweite Grenze quer ueber eine Seite, die
schon geordnet war - und sah aus wie der Fuss einer Tabelle.
DER ABSTAND BLEIBT. `margin-top` und `padding-top` trennen weiterhin; nur
der Strich ist weg. Absetzen und Trennen sind zweierlei.
*/
.bp-blaettern {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem 1rem;
margin-top: var(--wp--preset--spacing--40);
padding-top: var(--wp--preset--spacing--20);
}
.bp-blaettern-weg {
display: inline-flex;
align-items: center;
/*
Der Abstand zwischen Pfeil und Wort MUSS als gap stehen.
Im Quelltext steht dort ein Leerzeichen, aber `display: inline-flex`
macht Pfeil und Text zu Flex-Elementen, und Leerraum zwischen
Flex-Elementen verwirft der Browser. In der Ansicht stand deshalb
„←Neuere“ ohne Lücke.
*/
gap: 0.4rem;
min-height: 48px;
padding: 0 0.9rem;
flex: 0 0 auto;
min-width: 7rem;
font-weight: 600;
text-decoration: none;
border-radius: var(--wp--custom--radius--knopf);
}
.bp-blaettern-weg:hover,
.bp-blaettern-weg:focus-visible {
background-color: var(--wp--preset--color--flaeche);
}
.bp-blaettern-weg:last-child {
justify-content: flex-end;
}
/* Der Platzhalter für den Weg, den es gerade nicht gibt. */
.bp-blaettern-aus {
pointer-events: none;
}
.bp-blaettern-stand {
margin: 0;
text-align: center;
font-size: var(--wp--preset--font-size--klein);
color: var(--wp--preset--color--text-leise);
}
/* ---------------------------------------------------------------------------
Detailseite eines Trauerfalls – der Kopf nach dem Vorbild der Parte
Dies ist die einzige Stelle der Website, an der zentriert gesetzt wird. Das
ist kein Zufall und keine Verzierung: Eine gedruckte Parte ist symmetrisch
aufgebaut – Anrede, Name, Trennlinie, Sterbedatum. Alles darunter (Termine,
Parte-Download) ist linksbündig, weil es gelesen und nicht betrachtet wird.
--------------------------------------------------------------------------- */
.bp-parte-kopf {
text-align: center;
margin-bottom: var(--wp--preset--spacing--50);
padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
background-color: var(--wp--preset--color--flaeche);
border-radius: var(--wp--custom--radius--flaeche);
}
.bp-parte-kopf .bp-anrede {
margin: 0 0 0.6rem;
font-size: var(--wp--preset--font-size--klein);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--wp--preset--color--text-leise);
}
/*
Der gesperrte Name.
Das ist der eine Griff, der diese Seite unverwechselbar macht, weil er aus
dem Druckerzeugnis des Betriebs stammt und nicht aus einem Website-Muster.
Er bleibt auch in der serifenlosen Fassung – gesperrter Satz wirkt dort
ruhig und heutig, nicht altertümlich.
Zwei Feinheiten:
- Die Schriftgröße ist eigens kleiner als „Titel groß“ (siehe theme.json),
weil gesperrter Satz rund ein Fünftel mehr Breite braucht.
- Der Ausgleich für die Sperrung des LETZTEN Buchstabens. Sie sitzt hinter
dem Buchstaben mit im Zeilenkasten, deshalb steht zentrierter Satz um
einen halben Zwischenraum zu weit links – sichtbar, sobald darunter eine
Linie liegt.
Gemacht wird das mit `padding-left`, NICHT mit `margin-right: -0.07em`.
Bei einem Block-Element vergrößert das negative Außenmaß den Kasten:
nachgemessen war die H1 547 px breit in einer 544 px breiten Spalte.
*/
.bp-name {
margin: 0;
padding-left: 0.07em;
font-size: var(--wp--preset--font-size--name);
font-weight: 500;
line-height: 1.2;
letter-spacing: 0.07em;
color: var(--wp--preset--color--text);
}
/* Die kurze Haarlinie zwischen Name und Sterbedatum. Auf dem Papier steht
sie dort ebenfalls – sie trennt die Person von den Daten. */
.bp-lebensdaten {
position: relative;
margin-top: 1.6rem;
padding-top: 1.6rem;
font-size: var(--wp--preset--font-size--gross);
}
.bp-lebensdaten::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 4.5rem;
height: 1px;
margin-left: -2.25rem;
background-color: var(--wp--preset--color--linie);
}
/*
Das Kreuz vor dem Sterbedatum.
Es wird bewusst immer in einer Serifenschrift gesetzt – unabhängig davon,
dass die Seite sonst serifenlos gesetzt ist. Grund: In Segoe UI und
ähnlichen Systemschriften sieht das Kreuz „†“ bei kleiner Größe wie ein
Plus aus. Beim Vergleich der Entwürfe las sich „† 9. Juni 2026“ in der
serifenlosen Variante als „+ 9. Juni 2026“. Bei einer Sterbedatum-Angabe
darf darüber kein Zweifel entstehen.
Dies ist deshalb die einzige Stelle, an der die Serifenschrift bleibt.
Der Vorlesetext („gestorben am“) steckt im title-Attribut.
*/
.bp-lebensdaten abbr,
.bp-liste-datum abbr {
font-family: Georgia, 'Times New Roman', 'Liberation Serif', serif;
font-size: 1.15em;
line-height: 1;
text-decoration: none;
border: 0;
}
.bp-lebensjahr {
margin-top: 0.35rem;
font-size: var(--wp--preset--font-size--normal);
color: var(--wp--preset--color--text-leise);
}
/* --- Termine --- */
.bp-termine h2,
.bp-parte h2 {
font-size: var(--wp--preset--font-size--klein);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--wp--preset--color--text-leise);
}
.bp-termine .bp-termin {
margin-bottom: var(--wp--preset--spacing--30);
padding-left: var(--wp--preset--spacing--20);
border-left: 2px solid var(--wp--preset--color--linie);
}
.bp-termine .bp-termin:last-child {
margin-bottom: 0;
}
.bp-termine h3 {
margin-bottom: 0.2rem;
font-size: var(--wp--preset--font-size--gross);
}
.bp-termin-wann {
margin: 0;
font-weight: 600;
}
.bp-termin-ort,
.bp-termin-zusatz {
margin: 0.15rem 0 0;
}
.bp-termin-zusatz {
color: var(--wp--preset--color--text-leise);
}
/* --- Die Parte --- */
.bp-parte {
margin-top: var(--wp--preset--spacing--40);
}
/* Bewusst klein gehalten – auf Wunsch des Kunden nicht so groß wie beim
Mitbewerber. Ein Klick zeigt die größere Ansicht. */
.bp-parte-bild {
max-width: 15rem;
border-radius: var(--wp--custom--radius--bild);
box-shadow: var(--wp--custom--schatten--sanft);
}
.bp-parte-link {
display: inline-block;
text-decoration: none;
}
.bp-parte-hinweis {
display: block;
margin-top: 0.5rem;
font-size: var(--wp--preset--font-size--klein);
text-decoration: underline;
text-underline-offset: 0.15em;
}
/* ---------------------------------------------------------------------------
Kontaktformular
--------------------------------------------------------------------------- */
.bp-formular-feld {
display: flex;
flex-direction: column;
gap: 0.35rem;
margin-bottom: var(--wp--preset--spacing--30);
}
.bp-formular-feld label {
font-weight: 600;
}
/*
`box-sizing: border-box` ist hier keine Formsache, sondern behebt einen
Fehler: Ohne diese Angabe gilt `width: 100%` nur für den Inhalt,
Innenabstand und Rahmen kommen obendrauf. Das Feld war dadurch rund 26 px
breiter als seine Spalte, und die Kontaktseite ließ sich auf dem Handy
waagrecht verschieben. Aufgefallen ist es nur in der Ansicht bei 390 px
Breite – in der Messung der Seitengröße nicht.
*/
.bp-formular-feld input,
.bp-formular-feld textarea {
box-sizing: border-box;
width: 100%;
min-height: 48px;
padding: 0.7rem 0.9rem;
font-family: inherit;
font-size: var(--wp--preset--font-size--normal);
line-height: 1.6;
color: var(--wp--preset--color--text);
background-color: var(--wp--preset--color--basis);
border: 1px solid var(--wp--preset--color--text-leise);
border-radius: var(--wp--custom--radius--knopf);
}
.bp-formular-feld textarea {
min-height: 10rem;
resize: vertical;
}
/* Fehlerhafte Felder: nicht nur farblich, sondern auch am Rahmen erkennbar –
Farbe allein genügt für Barrierefreiheit nicht. */
.bp-hat-fehler input,
.bp-hat-fehler textarea {
border-width: 2px;
border-color: #a4211f;
}
/* ---------------------------------------------------------------------------
Der Nummernblock auf der Kontaktseite (11. August 2026)
Drei blanke Telefonnummern untereinander. Nachgemessen: 21 px hohe Verweise
im Abstand von 6,7 px. Verlangt sind 44 px Klickfläche und 8 px Abstand.
Warum das hier zählt und im Impressum nicht: Dort steht die Nummer in einem
Satz („Telefon: +43 …") – Verweise innerhalb eines Satzes sind von der
Größenregel ausgenommen, weil man sie sonst nicht mehr setzen könnte. Hier
steht sie allein und ist damit ein eigenständiges Ziel.
Umgesetzt als Spalte statt über Zeilenhöhe: Ein größerer Zeilenabstand hätte
die Kästen zwar auseinandergezogen, aber gleichzeitig jeden Kasten größer
gemacht – der Abstand DAZWISCHEN wäre nicht gewachsen. Mit `gap` ist beides
getrennt einstellbar. Das
wird dabei ausgeblendet: In einer Spalte
trennt schon der Zeilenumbruch der Anordnung.
--------------------------------------------------------------------------- */
/*
ENTFERNT AM 26. AUGUST 2026.
Diese drei Regeln haben die Telefonnummern auf der Kontaktseite als
zentrierte Spalte gesetzt – ein Rest der alten Kartengestaltung, in der
sie als Knopfleiste standen.
Auf der neuen, zweispaltigen Kontaktseite stehen sie in einer Spalte
neben „Anschrift" und „E-Mail", und beide sind linksbündig. Die Nummern
waren dadurch als einziger Block der Spalte um rund 130 px eingerückt.
`display: flex` hat außerdem `.bp-nummernblock br { display: none }`
nötig gemacht – die Umbrüche stehen im Seiteninhalt und wären sonst
doppelt gewesen. Ohne das Flex-Layout tun die
wieder ihre Arbeit,
also fällt auch diese Regel weg.
Was von den Nummern übrig bleibt, steht in gestaltung.css Abschnitt 19.10.
*/
/* Fläche statt Bewegung – wie überall sonst auf dieser Website. */
.bp-nummernblock a:hover,
.bp-nummernblock a:focus-visible {
background-color: var(--wp--preset--color--flaeche);
}
.bp-formular-hilfe {
color: var(--wp--preset--color--text-leise);
font-size: var(--wp--preset--font-size--klein);
}
.bp-formular-feldfehler {
color: #a4211f;
font-weight: 600;
}
.bp-formular-fehler {
margin-bottom: var(--wp--preset--spacing--30);
padding: 1rem 1.25rem;
border-left: 3px solid #a4211f;
border-radius: var(--wp--custom--radius--knopf);
background-color: #fdf3f3;
}
.bp-formular-fehler ul {
margin: 0.5rem 0 0;
padding-left: 1.25rem;
}
.bp-formular-erfolg {
padding: 1rem 1.25rem;
border-left: 3px solid var(--wp--preset--color--akzent);
border-radius: var(--wp--custom--radius--knopf);
background-color: var(--wp--preset--color--flaeche);
font-weight: 600;
}
/*
Der Datenschutzhinweis unter dem Formular – nachgebessert am 11. August 2026.
Drei Werte gemessen und drei Regeln gerissen:
1. 14 px. Die Untergrenze für Fließtext liegt bei 16 px, und dieser Satz ist
kein Beiwerk: Er sagt, was mit den Daten geschieht. Für eine Zielgruppe
mit vielen älteren Besuchern war das die falsche Stelle zum Sparen.
Jetzt 15 px – leiser als der Fließtext, aber lesbar.
2. 82 bis 92 Zeichen je Zeile (Startseite 92). Lesbar sind 60 bis 75. Der
Satz lief über die volle Formularbreite, weil ihn nichts begrenzt hat.
3. Der Verweis „Datenschutzerklärung" stand 2,8 px über der Schaltfläche
„Nachricht senden". Zwei Ziele im Abstand von unter 8 px sind am
Touchgerät eine Fehltippfalle – und hier trifft man im Zweifel den
Absenden-Knopf statt der Erklärung, die man lesen wollte.
*/
.bp-formular-hinweis {
max-width: 62ch;
margin-bottom: 1.5rem;
color: var(--wp--preset--color--text-leise);
font-size: 0.9375rem;
line-height: 1.6;
}
.bp-formular-knopf {
min-height: 52px;
padding: 0.85rem 1.75rem;
font-family: inherit;
font-size: var(--wp--preset--font-size--normal);
font-weight: 600;
color: var(--wp--preset--color--basis);
background-color: var(--wp--preset--color--akzent);
border: 1px solid var(--wp--preset--color--akzent);
border-radius: var(--wp--custom--radius--knopf);
cursor: pointer;
}
.bp-formular-knopf:hover,
.bp-formular-knopf:focus-visible {
background-color: var(--wp--preset--color--text);
border-color: var(--wp--preset--color--text);
}
/* Honigtopf: weder sichtbar noch für Hilfsmittel erreichbar.
Kein display:none – manche Bots überspringen ausgeblendete Felder. */
.bp-honigtopf {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* Nur für Screenreader. */
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* ---------------------------------------------------------------------------
Keine Bewegung
Vorgabe aus dem Auftrag: Es geht um etwas Heikles, da bewegt sich nichts.
Die Regel gilt unbedingt und nicht nur für Besucher, die Bewegung
abbestellt haben – sie soll auch dann greifen, wenn ein Block künftig
eigene Animationen mitbringt.
--------------------------------------------------------------------------- */
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
/* ---------------------------------------------------------------------------
Druck
Die Detailseite eines Trauerfalls wird ausgedruckt – von Angehörigen und
im Betrieb. Deshalb: Navigation und Fuß weg, Verweise ausschreiben,
Absätze nicht über Seitengrenzen zerreißen.
--------------------------------------------------------------------------- */
@media print {
.wp-block-navigation,
.bp-notruf,
.bp-blaettern,
.bp-einstieg-wege,
footer {
display: none;
}
.bp-parte-kopf {
margin-bottom: 2rem;
padding: 0;
background: none;
}
.bp-parte-bild {
box-shadow: none;
}
h1, h2, h3 {
break-after: avoid;
}
p, .bp-termin {
break-inside: avoid;
orphans: 3;
widows: 3;
}
a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 0.85em;
}
/* Der Verweis „Parte vergrößert ansehen“ ist auf Papier sinnlos. */
.bp-parte-hinweis {
display: none;
}
}
/* ===========================================================================
ZURÜCK AUF LINKSBÜNDIG
Am 22. August 2026, im Zuge des Gestaltungs-Neuaufbaus.
---------------------------------------------------------------------------
HIER STAND „ALLES ZENTRIERT"
Der Block wurde am 10. August 2026 AUF AUSDRÜCKLICHEN WUNSCH eingefügt. Er
trug seinen eigenen Einwand bereits im Kommentar: Zentrierter Fließtext hat
auf jeder Zeile eine andere linke Kante, das Auge muss den Zeilenanfang bei
jedem Rücksprung neu suchen, und der Effekt trifft ältere Leser am stärksten.
Nachgemessen am 22. August 2026, was das in der Praxis bedeutete:
Datenschutzerklärung 25 zentrierte Absätze
Impressum 10
Kontakt 3
Startseite 5
Vier Bildschirmhöhen Rechtstext ohne einen einzigen festen linken Rand.
Der Auftrag zum Neuaufbau nennt „sehr gute Lesbarkeit für ältere Menschen"
als Maßstab, der über allem steht, und führt „Textformatierung" ausdrücklich
unter dem auf, was zu verbessern ist. Damit ist die Entscheidung vom
10. August überholt — nicht weil sie falsch begründet war, sondern weil ihr
Preis jetzt gemessen vorliegt.
DAS IST EINE UMKEHR EINER AUSDRÜCKLICHEN VORGABE und ist im Abschlussbericht
als solche vermerkt. Wer sie rückgängig machen will: Dieser Block ist die
einzige Stelle, an der es steht.
Zentriert bleibt genau dreierlei, alle drei höchstens zweizeilig:
1. der Seitentitel im Kopfband (.bp-seitenkopf .wp-block-post-title)
2. das Zitat auf der Startseite (.bp-zitat)
3. Name und Sterbedatum auf der Parte (.bp-parte-kopf)
Alle drei stehen weiter oben in dieser Datei und sind unangetastet.
=========================================================================== */
/*
Aufzählungen zurück auf hängende Zeichen.
Zentriert war `list-style-position: inside` richtig, weil eine zentrierte
Liste mit hängenden Zeichen zerrissen aussieht. Linksbündig gilt das
Umgekehrte: Das Zeichen gehört in den Rand, damit die Textkante durchläuft.
*/
.wp-block-post-content ul,
.wp-block-post-content ol,
.bp-formen ul,
.bp-formen ol {
list-style-position: outside;
padding-left: 1.35rem;
padding-right: 0;
text-align: start;
}
/* Die Raute der Bestattungsformen hängt wieder im Rand. */
.bp-formen li {
padding-left: 1.35rem;
}
.bp-formen li::before {
position: absolute;
left: 0;
display: inline-block;
margin-right: 0;
vertical-align: 0.18em;
transform: rotate(45deg);
}
/* Das Register: Text linksbündig, die Terminspalte bekommt ihre Spalte zurück. */
.bp-liste-text {
text-align: start;
}
.bp-liste-termin {
text-align: start;
}
/* Knopfreihen beginnen links, wie der Text darüber. */
.bp-wege,
.bp-einstieg-wort .bp-wege {
justify-content: flex-start;
}
/*
Mehr Luft zwischen einer Überschrift und der Gruppe, die sie ankündigt.
Die Regel für den Textrhythmus setzt 0,6 rem unter eine Überschrift – richtig
für einen Absatz, der unmittelbar zu ihr gehört. Drei Karten sind aber keine
Fortsetzung des Satzes, sondern ein eigener Block.
*/
.wp-block-post-content > h2:has(+ .wp-block-columns) + .wp-block-columns,
.wp-block-post-content > h2:has(+ .bp-formen) + .bp-formen {
margin-top: 2.5rem;
}
/*
Der Abschnittskopf über den aktuellen Parten: Überschrift links, Weiterweg
rechts. Stand schon vor dem 22. August so und bleibt.
*/
.bp-abschnittskopf {
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
gap: 0.75rem 1.5rem;
text-align: start;
}
.bp-abschnittskopf h2,
.bp-abschnittskopf .bp-vorlauf,
.bp-abschnittskopf .bp-mehr {
text-align: start;
}
/* ---------------------------------------------------------------------------
Das Kontaktfeld mit Formular (Startseite)
Zwei Spalten: links das Formular, rechts die Erreichbarkeit. Beide stehen
auf dem anthraziten Blatt, das Formular war bisher nur für hellen Grund
gestaltet – die Felder brauchen deshalb eigene Farben.
--------------------------------------------------------------------------- */
.bp-kontakt-spalten {
margin-top: 2.25rem;
text-align: left;
}
/* Die Felder auf dunklem Grund: heller Rahmen, sehr dunkle Fläche, weiße
Schrift. Nachgemessen halten alle drei Paare über 4,5:1. */
/* Der Absendeknopf trägt hier das helle Markengrün mit dunkler Schrift –
dieselbe Regel wie bei den übrigen Knöpfen im dunklen Feld. */
/* Die rechte Spalte: kleine Marken über den Angaben, die Nummer als große
Zeile – dieselbe Behandlung wie zuvor, nur jetzt neben dem Formular. */
.bp-kontakt-daten > * {
margin-inline: 0;
}
.bp-kontakt-label {
margin-top: 1.75rem;
font-family: var(--wp--preset--font-family--titel);
font-size: var(--wp--preset--font-size--klein);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--wp--preset--color--marke);
}
.bp-kontakt-daten .bp-kontakt-label:first-child {
margin-top: 0;
}
.bp-kontakt-daten .bp-kontakt-nummer {
margin-top: 0.35rem;
text-align: left;
}
/* .bp-kontakt-zeit ist am 21. August 2026 entfallen – der Satz „Tag und Nacht
erreichbar" steht nicht mehr auf der Startseite. Klasse aus dem Selektor
genommen, damit die Datei nicht auf Auszeichnung zeigt, die es nicht gibt. */
.bp-kontakt-adresse {
margin-top: 0.35rem;
color: var(--wp--preset--color--text-leise);
line-height: 1.6;
}
.bp-kontakt-adresse a {
color: var(--wp--preset--color--marke);
}
@media (max-width: 48rem) {
/* Gestapelt steht das Formular oben – wer schreiben will, ist schon dabei;
wer anrufen will, hat die Nummer in der Leiste am unteren Rand. */
.bp-kontakt-daten .bp-kontakt-nummer,
.bp-kontakt-spalten {
text-align: center;
}
.bp-kontakt-daten > * {
margin-inline: auto;
}
}
/* ---------------------------------------------------------------------------
Nachbesserungen am Kontaktfeld (10. August 2026)
--------------------------------------------------------------------------- */
/*
Die zwei Spalten nutzen die ganze Breite des Blattes.
Nachgemessen standen sie auf 576 px: Das Kontaktfeld hat das Layout
„constrained", und das deckelt jedes Kind auf die Leseweite. Das Formular
bekam dadurch 334 px – die Eingabefelder wirkten winzig neben einer
1120 px breiten Fläche.
Zwei Klassen im Selektor, weil `.is-layout-constrained > *` mit 0,1,0
dagegenhält und WordPress' Regel später steht.
*/
.bp-kontaktband .bp-kontakt-spalten {
max-width: none;
width: 100%;
}
/*
Die Telefonnummer bricht nicht um.
In der schmalen rechten Spalte stand sie zweizeilig als „+43 664 73" /
„100 369" – eine Telefonnummer, die man in zwei Teilen lesen muss, ist
keine mehr. Die Größe passt sich stattdessen der Spalte an.
*/
.bp-kontakt-daten .bp-kontakt-nummer a {
white-space: nowrap;
font-size: clamp(1.4rem, 0.9rem + 1.4vw, 1.9rem);
}
/*
Die E-Mail-Adresse darf umbrechen, aber nicht mitten im Wort: `anywhere`
bricht an jeder Stelle, `break-word` erst, wenn es nicht anders geht.
*/
/* Eigenständiger Verweis, kein Verweis im Satz – also 44 px Klickfläche.
Nachgemessen waren es 19 px. */
.bp-kontakt-adresse a {
display: inline-flex;
align-items: center;
min-height: 44px;
overflow-wrap: break-word;
}
/* Etwas mehr Luft zwischen den drei Angaben der rechten Spalte. */
.bp-kontakt-daten .bp-kontakt-label {
margin-top: 2.25rem;
}
/*
„Alle Trauerfälle ansehen →" sitzt auf der Höhe von „Aktuelle Parten".
Mit `baseline` richtete es sich an der ERSTEN Grundlinie der linken Gruppe
aus, und das ist die kleine Zeile „TRAUERFÄLLE" darüber. Der Weg stand
dadurch höher als die Überschrift, neben der er stehen soll.
*/
.bp-abschnittskopf {
align-items: flex-end;
}