/*
Theme Name: Blockstudio54
Theme URI: https://bureau54.ch
Author: Bureau54 AG
Author URI: https://bureau54.ch
Description: Schlankes Block Theme als Basis fuer Blockstudio Projekte. Kein Ballast, alle Design Tokens in der theme.json.
Version: 1.1.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: blockstudio54
Tags: block-theme, full-site-editing, one-column, custom-colors
*/
/*
* Styling laeuft primaer ueber theme.json und ueber die style.scss der
* einzelnen Blockstudio Blocks. Hier nur globales, was theme.json nicht kann,
* plus das Sektionssystem, das von mehreren Blocks gemeinsam genutzt wird.
*
* Diese Datei ist auch als Editor-Stylesheet eingebunden (add_editor_style in
* functions.php), das Sektionssystem wirkt also im Editor wie im Frontend.
*/
html {
scroll-behavior: smooth;
}
/*
* Bewegungsreduktion, global. Ohne diesen Block bleibt scroll-behavior: smooth
* auch dann aktiv, wenn das Betriebssystem Bewegung reduziert. Vier der
* sechzehn Sektionsblocks brachten die Abfrage selbst mit, zwoelf nicht.
* Darum gehoert sie hierher und nicht in die einzelnen style.scss.
*/
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
.screen-reader-text {
border: 0;
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
/*
* Fokus-Grundregel. Einzelne Komponenten setzen eigene Ringe, zwoelf der
* sechzehn Sektionsblocks tun das nicht und hatten damit gar keinen. Diese
* Regel greift fuer alles Uebrige. Auf Bordeaux-Sektionen wird die
* Ringfarbe weiter unten invertiert, sonst verschwindet der Ring im Grund.
*
* EINZIGE Stelle fuer Fokus. Die theme.json hatte fuer link und button je ein
* eigenes :focus, also OHNE -visible. Daraus erzeugte WordPress eine zweite
* Regel, die auch beim Mausklick griff, und der Ring erschien bei jedem Klick
* auf einen Link. Am 07.08.2026 entfernt.
*
* Nicht wieder in die theme.json eintragen. WordPress 7 kennt dort zwar
* :focus-visible, aber zwei Quellen fuer denselben Zustand driften
* auseinander, und die theme.json deckt ohnehin nur link und button ab,
* nicht Formularfelder, summary oder eigene Bedienelemente.
*/
:focus-visible {
outline: 2px solid var(--wp--preset--color--brand-deep);
outline-offset: 2px;
}
/*
* Der Ring folgt dem border-radius des Elements. Wo ein rundes Element
* fokussierbar ist, gehoert der Radius darum auch auf das fokussierbare
* Element und nicht nur auf seine Huelle.
*
* Das Logo sass als hartes Rechteck in der runden Kopfleiste. Der Ring laeuft
* jetzt um die Pille herum statt eng um die SVG-Datei.
*/
.b54-header__logo .custom-logo-link:focus-visible,
.b54-footer__logo:focus-visible,
.b54-footer__logo a:focus-visible {
border-radius: var(--wp--custom--radius--pill);
outline-offset: 6px;
}
/* ==========================================================================
Sektionssystem
Wird von allen Sektionsblocks genutzt. Grund und Textfarbe werden als
benanntes Paar gesetzt, nie einzeln, damit der Kontrast nicht unterschritten
werden kann. Die Blocks bieten deshalb bewusst keine Farb- und
Abstands-Supports an.
========================================================================== */
.b54-section {
/* Neutralisiert den blockGap zwischen aufeinanderfolgenden Sektionen.
Der Abstand kommt aus dem Padding, nicht aus Margins, sonst addieren
sich beide. Die theme.json-Regeln nutzen :where() und haben damit
Spezifitaet 0, ein normaler Selektor genuegt. */
margin-block: 0;
}
/* Erscheinungsbilder. Kontrastwerte im Kommentar, gerechnet gegen den Grund. */
.b54-section--weiss {
background-color: var(--wp--preset--color--base);
color: var(--wp--preset--color--contrast); /* 12.6:1 */
}
.b54-section--grau {
background-color: var(--wp--preset--color--surface);
color: var(--wp--preset--color--contrast); /* 11.3:1 */
}
.b54-section--dunkel {
background-color: var(--wp--preset--color--contrast);
color: var(--wp--preset--color--base); /* 12.6:1 */
}
/*
* Bordeaux #5f1c1d traegt hier beides: es ist die Textfarbe auf hellem Grund
* UND der dunkle Sektionsgrund. Das ist die Kernidee der Marke und der Grund,
* warum contrast in beiden Rollen auftaucht.
*
* Die Orangetoene sind dagegen bewusst KEIN Sektionsgrund. Weisser Text auf
* #d36613 ergibt 3.7:1, auf #efaa7b 1.9:1, auf #e5af53 1.9:1. Sie bleiben
* Akzentlinie, Displaygrad und Flaeche mit festgelegter Textfarbe, siehe den
* Abschnitt Bereichsfarben weiter unten.
*
* Auf hellem Grund traegt brand-deep alles Bedienbare. Auf dunklem Grund
* muessen Links und Buttons invertiert werden, sonst verschwinden sie.
*/
.b54-section--dunkel a:not(.wp-element-button) {
color: var(--wp--preset--color--base);
}
.b54-section--dunkel a:not(.wp-element-button):hover {
color: var(--wp--preset--color--brand-light); /* 6.4:1 auf #5f1c1d */
}
.b54-section--dunkel .wp-element-button {
background-color: var(--wp--preset--color--base);
color: var(--wp--preset--color--contrast);
}
.b54-section--dunkel .wp-element-button:hover {
background-color: var(--wp--preset--color--brand-light);
color: var(--wp--preset--color--contrast); /* 6.4:1 */
}
.b54-section--dunkel :focus-visible {
outline-color: var(--wp--preset--color--brand-light);
}
/*
* Gedaempfter Text: die Blocks lesen --b54-muted mit Fallback auf das
* Preset. Auf dunklem Grund waere die feste Preset-Farbe unlesbar.
*/
.b54-section--weiss,
.b54-section--grau {
--b54-muted: var(--wp--preset--color--muted);
}
.b54-section--dunkel {
--b54-muted: color-mix(in srgb, var(--wp--preset--color--base) 80%, transparent);
}
/* Breite. Die Blocks waehlen die Variante, nicht die Redaktion. */
/*
* Aussenbreite deckungsgleich mit alignwide von WordPress.
*
* alignwide setzt max-width auf wide-size ohne Innenabstand. Unsere
* Sektionen laufen randlos, brauchen den Innenabstand also selbst. Damit
* der Inhaltskasten trotzdem exakt wide-size misst, kommt der Abstand oben
* drauf statt abgezogen zu werden. Sonst sitzt jede Sektion um den
* Innenabstand weiter rechts als Header und Footer.
*
* Eine Breite fuer alle Sektionen. Leseweiten regeln die Blocks intern,
* linksbuendig, nicht ueber einen schmaleren zentrierten Container.
*/
.b54-section__inner {
/* border-box ist hier Pflicht: Block-Themes haben keinen globalen Reset.
Mit content-box wuerde das Padding auf die max-width draufgerechnet und
jede Sektion laege 24px breiter als alignwide in Header und Footer. */
box-sizing: border-box;
max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--wp--preset--spacing--40));
margin-inline: auto;
padding-inline: var(--wp--preset--spacing--40);
}
/* Abstaende. Vier Stufen, keine freien Werte.
Die Stufen setzen eine Variable statt direkt das Polster. Nur so kann die
Regel fuer das erste Element weiter unten den Platz der Kopfleiste
aufaddieren, statt die gewaehlte Stufe zu ueberschreiben. */
.b54-section { padding-block-start: var(--b54-section-top, 0px); }
/*
* Die Stufen wachsen mit der Breite, mit festem Boden und festem Deckel.
*
* Vorher standen hier feste rem-Werte, auf jedem Bildschirm dieselben. Auf
* dem Desktop sind 112px rund 9 Prozent der Breite und stimmig, auf einem
* Telefon mit 390px sind es 29 Prozent. Weil sich Unterkante und Oberkante
* zweier Sektionen addieren, klafften dort 224px.
*
* Die Deckel entsprechen genau den alten Werten, der Desktop bleibt also
* unveraendert. Die Boeden halten das Verhaeltnis der drei Stufen:
* mobil 32 zu 48 zu 72, auf dem Desktop 44 zu 72 zu 112.
*/
:root {
--b54-abstand-klein: clamp(2rem, 5vw, 2.75rem);
--b54-abstand-normal: clamp(3rem, 8vw, 4.5rem);
--b54-abstand-gross: clamp(4.5rem, 12vw, 7rem);
}
.b54-section--top-keiner { --b54-section-top: 0px; }
.b54-section--top-klein { --b54-section-top: var(--b54-abstand-klein); }
.b54-section--top-normal { --b54-section-top: var(--b54-abstand-normal); }
.b54-section--top-gross { --b54-section-top: var(--b54-abstand-gross); }
.b54-section--bottom-keiner { padding-block-end: 0; }
.b54-section--bottom-klein { padding-block-end: var(--b54-abstand-klein); }
.b54-section--bottom-normal { padding-block-end: var(--b54-abstand-normal); }
.b54-section--bottom-gross { padding-block-end: var(--b54-abstand-gross); }
/*
* Platz fuer die Kopfleiste, einmal zentral statt in jedem Block.
*
* Die Leiste zieht den Folgeinhalt per negativem Aussenabstand um ihre Hoehe
* nach oben, damit sie auf dem Hero liegt statt ihn nach unten zu schieben.
* Wer als erstes auf einer Seite steht, muss diesen Betrag wieder
* aufschlagen, sonst beginnt sein Text hinter der Leiste.
*
* Frueher stand dieser Ausgleich im Plakat-Hero und galt damit fuer genau
* einen Block. Jede andere Sektion an erster Stelle klebte oben, und das
* faellt erst auf, wenn jemand sie dorthin schiebt. Hier gilt er fuer jeden
* Block, auch fuer jeden kuenftigen.
*
* Zwei Selektoren, weil die erste Sektion an zwei Stellen haengen kann:
* direkt in main, so baut es die 404-Vorlage, oder in post-content, so bauen
* es page, single und single-bereich.
*
* Beide setzen .b54-header voraus. Die Vorlage page-blank kommt ohne
* Kopfleiste aus, dort waere der Ausgleich ein Loch von 112px.
*/
.b54-header ~ main > .b54-section:first-child,
.b54-header ~ main > .wp-block-post-content > .b54-section:first-child {
padding-block-start: calc(var(--b54-section-top, 0px) + var(--b54-header-raum));
}
/*
* Ausnahme fuer Sektionen, deren Flaeche bewusst bis unter die Leiste laeuft,
* etwa der Split-Hero der Bereichsseiten: dort soll die Bereichsfarbe den
* oberen Rand beruehren. Solche Bloecke bringen den Ausgleich in ihrem
* inneren Panel selbst mit, sonst stuende ihr Text ebenfalls hinter der
* Leiste. Ohne diese Klasse gilt immer der Normalfall darueber.
*/
.b54-header ~ main > .b54-section--unter-leiste:first-child,
.b54-header ~ main > .wp-block-post-content > .b54-section--unter-leiste:first-child {
padding-block-start: var(--b54-section-top, 0px);
}
/* ==========================================================================
Auffangnetz
Fliesstext-Bloecke muessen erlaubt sein, damit InnerBlocks in b54/text
funktioniert. Damit koennen sie auch direkt in den Seiteninhalt gesetzt
werden, ausserhalb jeder Sektion. Das soll nicht kaputt aussehen.
========================================================================== */
.entry-content > p,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > ul,
.entry-content > ol {
max-width: var(--wp--custom--measure);
margin-inline: auto;
padding-inline: var(--wp--preset--spacing--40);
}
/* Innerhalb einer Sektion regelt der Block die Breite, nicht diese Regel. */
:is(.b54-text__body, .b54-form-text__text) > :first-child { margin-top: 0; }
:is(.b54-text__body, .b54-form-text__text) > :last-child { margin-bottom: 0; }
:is(.b54-text__body, .b54-form-text__text) h2,
:is(.b54-text__body, .b54-form-text__text) h3,
:is(.b54-text__body, .b54-form-text__text) h4 {
margin-top: var(--wp--preset--spacing--50);
}
/* ==========================================================================
Kein Aussenabstand zwischen Header, Inhalt und Footer
blockGap aus der theme.json legt ueber :root :where(.is-layout-flow) > *
einen Abstand auf alle obersten Elemente. Zwischen main und footer wird
daraus ein sichtbarer Streifen in der Hintergrundfarbe des Body.
Unsere Sektionen bringen ihre Abstaende als Padding mit, damit die
Hintergrundfarbe mitlaeuft. Ein zusaetzlicher Aussenabstand ist deshalb
nicht nur ueberfluessig, sondern falsch.
body davor, damit die Regel die :where()-Regel sicher schlaegt, ohne
dass es !important braucht.
========================================================================== */
body .wp-site-blocks > * {
margin-block-start: 0;
margin-block-end: 0;
}
/* ==========================================================================
Inhaltsbloecke in Textspalten
Gilt fuer beide Textspalten: die der Text-Sektion und die des Blocks
Formular mit Text. Eine Begrenzung auf nur einen Container laeuft im
jeweils anderen Block still ins Leere.
Tabellen auf schmalen Bildschirmen
Eine mehrspaltige Tabelle laeuft auf 375px aus dem Bild. Statt sie zu
quetschen, bekommt sie einen horizontalen Scrollbereich. tabindex und
role setzt WordPress nicht, darum ist der Bereich per Tastatur
erreichbar gemacht.
========================================================================== */
:is(.b54-text__body, .b54-form-text__text) .wp-block-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
:is(.b54-text__body, .b54-form-text__text) .wp-block-table:focus-visible {
outline: 2px solid var(--wp--preset--color--brand-deep);
outline-offset: 3px;
}
:is(.b54-text__body, .b54-form-text__text) .wp-block-table table {
min-width: 32rem;
border-collapse: collapse;
}
:is(.b54-text__body, .b54-form-text__text) .wp-block-table :is(th, td) {
padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--30) 0;
text-align: left;
border-bottom: 1px solid var(--wp--preset--color--line);
}
:is(.b54-text__body, .b54-form-text__text) .wp-block-table th {
font-weight: 600;
}
/* Bild und Zitat bleiben in der Sektionsbreite. */
:is(.b54-text__body, .b54-form-text__text) .wp-block-image img {
height: auto;
max-width: 100%;
border-radius: var(--wp--custom--radius--medium);
}
:is(.b54-text__body, .b54-form-text__text) .wp-block-quote {
margin: var(--wp--preset--spacing--50) 0;
padding-left: var(--wp--preset--spacing--40);
border-left: 3px solid var(--wp--preset--color--brand);
font-size: var(--wp--preset--font-size--large);
line-height: 1.45;
}
:is(.b54-text__body, .b54-form-text__text) .wp-block-quote cite {
display: block;
margin-top: var(--wp--preset--spacing--20);
font-size: var(--wp--preset--font-size--small);
font-style: normal;
color: var(--b54-muted, var(--wp--preset--color--muted));
}
/* ==========================================================================
Buttons innerhalb der Text-Sektion
Aussehen kommt aus theme.json elements.button. Hier nur Abstand und die
Outline-Variante, damit ein sekundaeres Ziel sich vom primaeren
unterscheidet, ohne eine zweite Farbe einzufuehren.
========================================================================== */
:is(.b54-text__body, .b54-form-text__text) .wp-block-buttons {
margin-block: var(--wp--preset--spacing--50);
gap: var(--wp--preset--spacing--30);
}
:is(.b54-text__body, .b54-form-text__text) .wp-block-button__link {
text-decoration: none;
}
/*
* Sekundaer: Kontur statt Flaeche, in der Textfarbe. Die Kontur ist 3px
* stark, nicht 2px. Der Entwurf setzt durchgehend 3px, und bei Pillenform
* verschwindet eine 2px-Linie optisch gegen die Rundung.
*
* Die Kontur laeuft in contrast, nicht in brand-deep: der primaere Knopf
* ist Bordeaux, der sekundaere muss dieselbe Familie zeigen.
*
* Bewusst ohne Einschraenkung auf die Textspalten: die Variante wird auch
* in der Kopfleiste gebraucht. Die vorherige Fassung war auf b54-text und
* b54-form-text begrenzt und lief im Header still ins Leere, der Knopf
* blieb dort gefuellt statt konturiert.
*/
.is-style-outline > .wp-block-button__link {
background-color: transparent;
color: var(--wp--preset--color--contrast);
box-shadow: none;
border: var(--wp--custom--kontur) solid currentcolor;
}
.is-style-outline > .wp-block-button__link:hover {
background-color: var(--wp--preset--color--contrast);
color: var(--wp--preset--color--base);
}
/* Auf Bordeaux wird auch die Kontur invertiert. */
.b54-section--dunkel .is-style-outline > .wp-block-button__link {
color: var(--wp--preset--color--base);
}
.b54-section--dunkel .is-style-outline > .wp-block-button__link:hover {
background-color: var(--wp--preset--color--base);
color: var(--wp--preset--color--contrast);
}
/* ==========================================================================
Zustimmungsbanner Statistik
Markup aus inc/statistik.php, ausgegeben an wp_body_open. Es steht damit am
Anfang der Tab-Reihenfolge, optisch aber unten, darum position: fixed.
Keine Schatten und kein Einblenden: Flaechenwechsel plus Haarlinie
genuegen, und der Bewegungs-Dial steht auf 0.15.
Beide Knoepfe sind absichtlich identisch gestaltet. Ein Ablehnen, das
unscheinbarer ist als das Annehmen, waere ein Dark Pattern.
========================================================================== */
.b54-statistik-banner {
position: fixed;
inset-block-end: 0;
inset-inline: 0;
z-index: 100;
background-color: var(--wp--preset--color--surface);
border-block-start: 1px solid var(--wp--preset--color--line);
color: var(--wp--preset--color--contrast);
}
.b54-statistik-banner[hidden] {
display: none;
}
.b54-statistik-banner__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--wp--preset--spacing--40);
max-width: 1200px;
margin-inline: auto;
padding: var(--wp--preset--spacing--40);
}
.b54-statistik-banner__text {
flex: 1 1 26rem;
}
.b54-statistik-banner__text p {
margin: 0;
max-width: 70ch;
font-size: var(--wp--preset--font-size--small);
}
.b54-statistik-banner__knoepfe {
display: flex;
flex-wrap: wrap;
gap: var(--wp--preset--spacing--30);
}
/*
* Konturvariante wie is-style-outline im Fliesstext. Gleiche Farbe, gleiche
* Groesse, gleiche Gewichtung fuer beide Entscheide. 44px Mindesthoehe liegt
* deutlich ueber den 24px, die WCAG 2.2 verlangt.
*/
.b54-statistik-knopf {
min-height: 44px;
padding: 0.6em 1.4em;
border: var(--wp--custom--kontur) solid var(--wp--preset--color--contrast);
border-radius: var(--wp--custom--radius--pill);
background-color: transparent;
color: var(--wp--preset--color--contrast);
font-family: var(--wp--preset--font-family--sans);
font-size: var(--wp--preset--font-size--small);
font-weight: 700;
line-height: 1.2;
cursor: pointer;
}
.b54-statistik-knopf:hover {
background-color: var(--wp--preset--color--contrast);
color: var(--wp--preset--color--base);
}
/* Schmale Anzeigen und starker Zoom: stapeln statt quetschen. */
@media (max-width: 600px) {
.b54-statistik-banner__inner {
padding: var(--wp--preset--spacing--30);
}
.b54-statistik-banner__knoepfe {
width: 100%;
}
.b54-statistik-knopf {
flex: 1 1 auto;
}
}
/*
* Bei sehr flachen Fenstern, etwa bei 400 Prozent Zoom, wuerde ein fixierter
* Banner zu viel Inhalt verdecken. Dann scrollt er mit.
*/
@media (max-height: 26rem) {
.b54-statistik-banner {
position: static;
}
}
/* ==========================================================================
Untertitel ueber den Sektionstiteln
Im Figma-Entwurf steht dieser Untertitel in #d36613 auf 20px. Das ergibt
3.7:1 gegen Weiss und ist bei dieser Groesse zu wenig. Er laeuft darum in
brand-deep, 5.1:1, optisch fast identisch.
Keine Versalien und keine Sperrung: der Entwurf kennt beides nicht.
Die Blocks nennen das Element je nach Alter kicker oder item-kicker,
darum beide Endungen.
========================================================================== */
.b54-section [class$="__kicker"],
.b54-section [class$="__item-kicker"],
.b54-site-info__label {
/*
* Der Untertitel gehoert zum Titel, nicht zum Absatz darueber. Ohne
* eigene Angabe erbte er den Absatzabstand des Browsers und stand je
* nach Block unterschiedlich weit weg. Die Blocks, die den Wert selbst
* setzen, nennen dieselben 0.5rem.
*/
margin-block: 0 var(--wp--preset--spacing--20);
font-family: var(--wp--preset--font-family--sans);
/* Seit 17.09.2026 medium statt lead: 16 statt 20px, der Titel fuehrt. */
font-size: var(--wp--preset--font-size--medium);
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--wp--preset--color--brand-deep);
}
/* Auf dunklem Grund traegt brand-deep nicht, dort uebernimmt Apricot. */
.b54-section--dunkel [class$="__kicker"],
.b54-section--dunkel [class$="__item-kicker"] {
color: var(--wp--preset--color--brand-light); /* 6.4:1 auf #5f1c1d */
}
/* ==========================================================================
Bereichsfarben
Vier Farben, ein Zweck: sie kennzeichnen den Taetigkeitsbereich und sonst
nichts. Kein Status, keine Hinweise, keine Dekoration.
Die Textfarbe wird pro Flaeche festgelegt, nicht pauschal weiss gesetzt.
Weiss auf Longevity ergibt 1.9:1 und auf Weiterbildung 1.9:1, beides
unlesbar. Der Figma-Entwurf setzt hier durchgehend weiss, das ist die
Stelle, an der die Umsetzung bewusst abweicht.
Funktionelle Neurologie liegt als Flaeche mit Text auf brand-deep statt
auf #d36613: weiss auf #d36613 ergibt 3.7:1 und reicht fuer ein 12px-Label
nicht. #d36613 selbst bleibt fuer Linien und Grossgrade ab 24px.
========================================================================== */
.b54-bereich {
--b54-bereich-flaeche: var(--wp--preset--color--contrast);
--b54-bereich-text: var(--wp--preset--color--base);
}
.b54-bereich--physiotherapie {
--b54-bereich-flaeche: var(--wp--preset--color--bereich-physiotherapie);
--b54-bereich-text: var(--wp--preset--color--base); /* 6.0:1 */
}
.b54-bereich--neurologie {
--b54-bereich-flaeche: var(--wp--preset--color--brand-deep);
--b54-bereich-text: var(--wp--preset--color--base); /* 5.1:1 */
}
.b54-bereich--longevity {
--b54-bereich-flaeche: var(--wp--preset--color--bereich-longevity);
--b54-bereich-text: var(--wp--preset--color--contrast); /* 6.4:1 */
}
.b54-bereich--weiterbildung {
--b54-bereich-flaeche: var(--wp--preset--color--bereich-weiterbildung);
--b54-bereich-text: var(--wp--preset--color--contrast); /* 6.3:1 */
}
/*
* Label. Rechteckig, nie als Pille: die Pillenform ist den Bedienelementen
* vorbehalten, ein Label ist keines. 12px ist die kleinste Groesse im System.
*/
.b54-label {
display: inline-block;
padding: 0.5rem 0.75rem;
background-color: var(--b54-bereich-flaeche);
color: var(--b54-bereich-text);
font-family: var(--wp--preset--font-family--sans);
font-size: var(--wp--preset--font-size--x-small);
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.2;
border-radius: 0;
}
/* Als Link bleibt es ein Label, keine Unterstreichung, aber mit Hover. */
a.b54-label {
text-decoration: none;
}
a.b54-label:hover {
background-color: var(--wp--preset--color--contrast);
color: var(--wp--preset--color--base);
}
/*
* Die grossen Ziffern im Uebersichtsband. Sie bezeichnen keine Reihenfolge,
* die eine Bedeutung haette, darum aria-hidden im Markup und hier nur die
* Optik. 100px ist Displaygrad, dort genuegen 3:1.
*/
.b54-ziffer {
font-family: var(--wp--preset--font-family--sans);
font-size: clamp(3.5rem, 8vw, 6.25rem);
font-weight: 500;
line-height: 1;
color: var(--b54-bereich-flaeche);
}
/* ==========================================================================
Kopfleiste
Der Entwurf zeigt eine schwebende weisse Leiste, die auf dem dunklen Hero
liegt. Sie traegt dieselbe Pillenform wie die Knoepfe. Das ist die einzige
Ausnahme von der Regel «alles scharf ausser Knoepfen», und sie fuehrt
keinen dritten Radius ein: es bleibt bei 0 und Pille.
Der Entwurf legt einen Schlagschatten darunter. Auf dem Hero liegt die
Leiste auf Bordeaux und braucht ihn nicht, beim Scrollen ueber helle
Sektionen dagegen schon. Er ist darum sehr flach und aus der Markenfarbe
gemischt, nicht aus Schwarz.
========================================================================== */
/*
* Der Platz, den die klebende Kopfleiste beansprucht. Global, weil nicht nur
* der Header selbst ihn braucht: das Plakat im Hero muss ihn auf sein oberes
* Polster aufschlagen, sonst liegt der Titel hinter der Leiste.
*/
:root {
--b54-header-hoehe: 80px;
--b54-header-abstand: var(--wp--preset--spacing--40);
/* Platz, den die Leiste im Fluss einnimmt: oberes Polster plus Leistenhoehe. */
--b54-header-raum: calc(var(--b54-header-hoehe) + var(--b54-header-abstand));
/*
* Wo die Leiste beim Scrollen endet, gemessen vom oberen Fensterrand:
* ihr Abstand nach oben plus der Platz, den sie einnimmt.
*
* Alles, was unter ihr kleben soll, rechnet ab hier und legt noch Luft
* drauf. Ohne diese Trennung landet ein klebender Sektionstitel exakt
* auf der Unterkante der Leiste.
*/
--b54-header-unterkante: calc(var(--b54-header-abstand) + var(--b54-header-raum));
}
/*
* body davor, weil die Kopfleiste seit dem Umbau ein direktes Kind von
* .wp-site-blocks ist und damit unter die Reset-Regel weiter oben faellt.
* Die setzt margin-block-end auf 0 und ist mit (0,1,2) spezifischer als
* eine einzelne Klasse. Ohne diesen Selektor bliebe der negative
* Aussenabstand wirkungslos und ueber dem Hero staende ein weisser Streifen.
*/
body .wp-site-blocks > .b54-header {
position: sticky;
top: var(--b54-header-abstand);
z-index: 20;
/*
* Zieht den nachfolgenden Inhalt unter die Leiste, damit sie wie im
* Entwurf auf dem Hero liegt statt ihn nach unten zu schieben.
*/
margin-block-end: calc(-1 * var(--b54-header-raum));
padding-block-start: var(--b54-header-abstand);
padding-inline: var(--wp--preset--spacing--40);
}
.b54-header__leiste {
box-sizing: border-box;
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--40);
min-height: var(--b54-header-hoehe);
max-width: var(--wp--style--global--wide-size);
margin-inline: auto;
padding-inline: var(--wp--preset--spacing--40);
background-color: var(--wp--preset--color--base);
border-radius: var(--wp--custom--radius--panel);
box-shadow: 0 4px 10px color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
}
/* Das Logo schiebt alles Uebrige nach rechts. */
.b54-header__logo {
margin: 0 auto 0 0;
line-height: 0;
}
.b54-header__logo img {
display: block;
height: auto;
border-radius: 0;
/*
* Sicherung, kein Gestaltungsmittel: die Breite kommt aus dem site-logo
* Block, die Hoehe folgt dem Seitenverhaeltnis. Wird das Logo einmal durch
* eine hoehere Datei ersetzt, wuerde die Leiste sonst mitwachsen.
*/
max-height: calc(var(--b54-header-hoehe) - var(--wp--preset--spacing--40));
}
/*
* Menue in der Groesse der Knoepfe daneben (medium), im Gewicht 500. Vorher
* 15px und 500, also nur der Grad hat sich geaendert.
*
* Das Gewicht steht trotzdem hier und an drei Selektoren, nicht nur in der
* theme.json: die setzt unter blocks.core/navigation.elements.link ein
* fontWeight 500, das trifft aber nur echte Links. Der Umschalter des
* Bereichspanels ist ein button und faellt dort durch, er wuerde sonst auf
* den globalen 400 stehen und leichter aussehen als seine Nachbarn.
*
* Die staerkeren Gewichte im Bereichspanel weiter unten (600 fuer die
* Kartenlabel und fuer den offenen Umschalter) sind spezifischer und bleiben
* absichtlich stehen: der offene Zustand darf nicht allein an der Farbe
* haengen.
*/
.b54-header__nav {
font-size: var(--wp--preset--font-size--medium);
}
.b54-header__nav,
.b54-header__nav .wp-block-navigation-item__content,
.b54-header__nav .wp-block-navigation-submenu__toggle {
font-weight: 500;
}
.b54-header__nav .wp-block-navigation-item__content {
text-decoration: none;
}
.b54-header__nav .wp-block-navigation-item__content:hover {
text-decoration: underline;
text-underline-offset: 0.25em;
}
.b54-header__aktionen {
gap: var(--wp--preset--spacing--20);
flex-shrink: 0;
}
/*
* Der Terminknopf traegt einen Pfeil nach rechts oben. Er kommt als Maske,
* nicht als eigenes Bild: so folgt er der Textfarbe und braucht keine zweite
* Datei. Dekorativ, darum kein Textersatz noetig, das Label steht daneben.
*/
.b54-header__termin .wp-block-button__link {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding-inline-start: 1.125rem;
}
.b54-header__termin .wp-block-button__link::before {
content: "";
flex-shrink: 0;
width: 1em;
height: 1em;
background-color: currentcolor;
-webkit-mask-image: url("./assets/bilder/arrow.svg");
mask-image: url("./assets/bilder/arrow.svg");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/*
* Der Fokus darf nicht hinter der klebenden Leiste verschwinden, das
* verlangt WCAG 2.2 unter 2.4.11. scroll-padding haelt das Ziel frei.
*/
html {
scroll-padding-top: calc(var(--b54-header-unterkante) + var(--wp--preset--spacing--40));
}
/*
* Zwischenzone. Ab wide-size (1200px) plus Aussenabstand hat die Leiste ihre
* volle Breite, darunter wird sie schmaler, die Inhalte bleiben aber gleich
* lang. Logo, Menue und zwei Knoepfe passen dort nicht mehr in einer Zeile,
* darum eine Stufe kleiner. Gerechnet, nicht geschaetzt: bei 1000px Fenster
* bleiben rund 900px fuer 973px Inhalt.
*/
@media (max-width: 1250px) {
.b54-header__leiste {
gap: var(--wp--preset--spacing--30);
}
.b54-header__logo img {
width: 158px;
}
/* Der Grad geht zurueck, das Gewicht bleibt normal. */
.b54-header__nav {
font-size: 0.9375rem;
}
}
@media (max-width: 900px) {
.b54-header__leiste {
gap: var(--wp--preset--spacing--30);
}
/* Kontakt wandert ins Menue, der Terminknopf bleibt als einziges Ziel. */
.b54-header__kontakt {
display: none;
}
.b54-header__termin .wp-block-button__link {
font-size: var(--wp--preset--font-size--small);
}
}
@media (max-width: 600px) {
.b54-header__logo img {
width: 135px;
}
/* Auf sehr schmalen Anzeigen traegt der Knopf nur noch das Symbol. */
.b54-header__termin .wp-block-button__link {
font-size: 0;
gap: 0;
padding-inline: 0.875rem;
}
.b54-header__termin .wp-block-button__link::before {
width: 1.25rem;
height: 1.25rem;
}
}
/* ==========================================================================
Fusszeile
Bordeaux als Grund, das Logo liegt darauf auf einer weissen Pille. Der
Entwurf nennt diese Fassung «negativ», faerbt das Logo aber nicht um,
sondern legt es unveraendert auf eine helle Flaeche. Damit genuegt eine
einzige Logodatei fuer Kopf und Fuss.
========================================================================== */
.b54-footer {
background-color: var(--wp--preset--color--contrast);
color: var(--wp--preset--color--base);
}
.b54-footer__inner {
box-sizing: border-box;
max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--wp--preset--spacing--40));
margin-inline: auto;
padding-inline: var(--wp--preset--spacing--40);
padding-block: var(--wp--preset--spacing--60);
}
.b54-footer__logo {
display: inline-block;
margin: 0 0 var(--wp--preset--spacing--60);
padding: 0.75rem 1.25rem;
background-color: var(--wp--preset--color--base);
border-radius: var(--wp--custom--radius--pill);
line-height: 0;
}
.b54-footer__logo img {
display: block;
height: auto;
border-radius: 0;
}
/*
* Gleiche Stufe wie in der Kopfleiste: bei 320px Fensterbreite wuerde die
* Pille mit 224px Logo plus Polster den Rand beruehren.
*/
@media (max-width: 600px) {
.b54-footer__logo img {
width: 168px;
}
}
.b54-footer__angaben {
font-size: var(--wp--preset--font-size--small);
line-height: 1.45;
}
/*
* Die Titel in der Fusszeile: weiss und 500.
*
* Sie hingen an der zentralen Kicker-Regel und liefen darum in brand-deep.
* Auf Bordeaux sind das rund 2.5:1, also ein Kontrastfehler und nicht nur
* eine Geschmacksfrage. Die bestehende Ausnahme fuer dunkle Gruende greift
* hier nicht: sie haengt an .b54-section--dunkel, und die Fusszeile ist keine
* Sektion, sondern ein Template-Part mit eigener Flaeche.
*
* Zwei Klassen im Selektor, weil das Blockstylesheet des site-info Blocks aus
* dem _dist Ordner nach der style.css laedt und dort 700 steht. Mit nur einer
* Klasse haette die Ladereihenfolge entschieden.
*/
.b54-footer .b54-site-info__label {
color: var(--wp--preset--color--base); /* 12.6:1 auf #5f1c1d */
font-weight: 500;
/*
* 1.45 kommt von .b54-footer__angaben und ist fuer 1.25rem zu locker: der
* Titel bekam dadurch eine Zeilenhoehe von 1.8rem und schwebte ueber
* seinem Inhalt.
*/
line-height: 1.3;
}
/*
* Gleicher Abstand nach jedem Titel, in beiden Spalten 1.5rem.
*
* Das war vorher aus zwei Gruenden ungleich. Im Adressblock folgt dem Titel
* ein
, und weil der Titel ein Blockelement ist, erzeugt dieses
eine
* leere Zeile von rund 18px. In der Spalte Oeffnungszeiten ist der Titel
* dagegen ein Flexkind und bekommt nur die 0.5rem aus dem gap. Beides wird
* hier auf denselben Wert gebracht: das
fliegt raus, und wo der gap
* mitwirkt, wird er abgezogen.
*/
.b54-footer .b54-site-info__label {
margin-block-end: var(--wp--preset--spacing--40);
}
.b54-footer .b54-site-info__address .b54-site-info__label + br {
display: none;
}
.b54-footer .b54-site-info__col > .b54-site-info__label {
margin-block-end: calc(var(--wp--preset--spacing--40) - var(--wp--preset--spacing--20));
}
/*
* Abstand zwischen den Zeilen der Oeffnungszeiten.
*
* Der Abstand muss auf beide Zellen der Zeile: dt und dd sitzen im gleichen
* Raster, ein Abstand nur am dt wuerde die Zeit gegenueber dem Tag
* verschieben.
*
* Drei Stufen, weil die Zeiten jetzt in Gruppen stehen: ein kleiner Abstand
* zwischen den Tageszeilen, keiner zwischen einer Gruppenueberschrift und
* ihrer ersten Zeile, und ein groesserer vor der zweiten Gruppe.
*/
.b54-footer .b54-site-info__zeiten dt:not(:first-of-type),
.b54-footer .b54-site-info__zeiten dt:not(:first-of-type) + dd {
margin-block-start: 0.25rem;
}
.b54-footer .b54-site-info__zeiten .b54-site-info__zeit-gruppe + dt,
.b54-footer .b54-site-info__zeiten .b54-site-info__zeit-gruppe + dt + dd {
margin-block-start: 0;
}
.b54-footer .b54-site-info__zeiten .b54-site-info__zeit-gruppe:not(:first-child) {
margin-block-start: var(--wp--preset--spacing--30);
}
/* Auf Bordeaux traegt nur Weiss. Die gedaempfte Farbe waere unlesbar. */
.b54-footer__angaben a {
color: var(--wp--preset--color--base);
text-decoration: none;
}
.b54-footer__angaben a:hover {
color: var(--wp--preset--color--brand-light); /* 6.4:1 auf #5f1c1d */
text-decoration: underline;
}
.b54-footer__recht {
margin-block-start: var(--wp--preset--spacing--50);
font-size: var(--wp--preset--font-size--small);
}
/*
* Impressum und Datenschutz im gleichen Zeilenabstand wie die Angaben
* darueber: 0.25rem, derselbe Wert wie .b54-site-info__list. Vorher kam der
* Abstand aus dem blockGap des Navigationsblocks und war mit 1.5rem sechsmal
* so gross, die zwei Zeilen wirkten dadurch wie zwei getrennte Bloecke.
*
* Die Klasse sitzt im Markup sowohl auf der nav als auch auf der ul. Ein
* Selektor deckt darum beide Flexcontainer ab. Zwei Klassen, weil die
* Kernregel fuer die Navigation den Abstand ebenfalls auf Klassenebene setzt.
*/
.b54-footer .b54-footer__recht {
gap: 0.25rem;
}
.b54-footer__recht .wp-block-navigation-item__content {
color: var(--wp--preset--color--base);
text-decoration: none;
/*
* Gleicher Schriftschnitt wie Telefon und E-Mail darueber. Die 500 kamen
* aus der theme.json unter blocks.core/navigation und passen fuer ein
* Hauptmenue, nicht fuer zwei Rechtszeilen im Fuss.
*/
font-weight: 400;
}
.b54-footer__recht .wp-block-navigation-item__content:hover {
color: var(--wp--preset--color--brand-light);
text-decoration: underline;
}
.b54-footer :focus-visible {
outline-color: var(--wp--preset--color--brand-light);
}
/* ==========================================================================
Kreisbogen-Illustration
Eine einzige SVG-Datei, ein Pfad, schwarz gefuellt, transparenter Grund.
Sie wird nicht als Bild eingebunden, sondern als Maske. Damit bestimmt
background-color die Farbe und dieselbe Datei dient jedem Untergrund:
Kupfer auf dem Hero, Apricot im Footer, kein zweiter Export noetig.
Die Datei liegt im Theme und nicht in der Mediathek, damit die style.css
sie relativ referenzieren kann. Eine Mediathek-URL waere auf die Domain
festgenagelt und muesste beim Umzug auf die Livedomain nachgezogen werden.
Die Illustration ist reine Dekoration. Sie steckt in einem Pseudoelement
und ist damit fuer Screenreader gar nicht vorhanden, kein aria-hidden
noetig.
Steuerung ueber Variablen, je Einsatzort gesetzt:
--b54-kreise-farbe Flaechenfarbe, immer aus der Palette
--b54-kreise-deckung 0 bis 1
--b54-kreise-breite Breite, sinnvollerweise in Prozent des Elements
--b54-kreise-oben Versatz nach oben, negativ laesst sie herausragen
--b54-kreise-rechts Versatz von rechts
========================================================================== */
.b54-kreise {
--b54-kreise-farbe: var(--wp--preset--color--brand-light);
--b54-kreise-deckung: 0.15;
--b54-kreise-breite: 76%;
--b54-kreise-oben: -75%;
--b54-kreise-rechts: -12%;
position: relative;
/*
* clip statt hidden: hidden macht den Container zum Scroll-Container und
* kann bei einem Sprungziel im Inhalt zu ungewolltem Scrollen fuehren.
* hidden steht als Rueckfall davor, Safari kennt clip erst ab 16.
*/
overflow: hidden;
overflow: clip;
}
.b54-kreise::before {
content: "";
position: absolute;
z-index: 0;
top: var(--b54-kreise-oben);
right: var(--b54-kreise-rechts);
width: var(--b54-kreise-breite);
/* Seitenverhaeltnis der Datei, damit die Bogen nie verzerren. */
aspect-ratio: 346 / 331;
background-color: var(--b54-kreise-farbe);
opacity: var(--b54-kreise-deckung);
pointer-events: none;
-webkit-mask-image: url("./assets/bilder/kreise.svg");
mask-image: url("./assets/bilder/kreise.svg");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
}
/*
* Der Inhalt muss ueber der Illustration liegen. Ein z-index auf dem
* Pseudoelement allein genuegt nicht, weil die Kinder ohne eigenen
* Stapelkontext dahinter landen koennen.
*/
.b54-kreise > * {
position: relative;
z-index: 1;
}
/*
* Sehr schmale Anzeigen: die Illustration wuerde den Text ueberlagern,
* ohne etwas beizutragen. Sie wird kleiner und blasser, nicht entfernt,
* damit der Grund nicht kahl wirkt.
*/
@media (max-width: 600px) {
.b54-kreise {
--b54-kreise-breite: 120%;
--b54-kreise-oben: -40%;
--b54-kreise-rechts: -45%;
--b54-kreise-deckung: 0.1;
}
}
/* Fusszeile: Apricot, sehr zurueckhaltend, ragt oben rechts hinaus. */
.b54-footer {
--b54-kreise-farbe: var(--wp--preset--color--brand-light);
--b54-kreise-deckung: 0.15;
--b54-kreise-breite: 76%;
--b54-kreise-oben: -75%;
--b54-kreise-rechts: -12%;
}
/* ==========================================================================
Sektion mit seitlichem Kopf
Gemeinsames Muster fuer alle Bloecke, die den Sektionskopf neben den
Inhalt stellen statt darueber. Bewusst hier und nicht je Block, sonst
driften die Spaltenverhaeltnisse auseinander.
Ungleiche Spalten sind der Normalfall der Direktion: der Kopf schmal,
der Inhalt breit. Erlaubt ist das nur, wenn daneben echter Inhalt steht.
Ein kurzer Text neben einem grossen Titel waere der Split-Header, den
die Direktion als Standardfehler fuehrt.
Das Markup steht immer in Lesereihenfolge, Kopf zuerst. Die Variante
rechts dreht nur die optische Anordnung. Damit stimmt die Reihenfolge
fuer Tastatur und Screenreader in beiden Faellen.
========================================================================== */
@media (min-width: 900px) {
.b54-split {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: var(--wp--preset--spacing--60);
align-items: start;
}
/* Der Kopf bleibt beim Scrollen stehen, solange der Inhalt laeuft. */
.b54-split > :first-child {
position: sticky;
top: calc(var(--b54-header-unterkante) + var(--wp--preset--spacing--50));
margin-bottom: 0;
}
/*
* Kopf rechts: die Spalten tauschen die Breite, und die beiden Kinder
* tauschen die Position. order aendert nur die Darstellung, nicht die
* Reihenfolge im Markup.
*/
.b54-split--rechts {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.b54-split--rechts > :first-child {
order: 2;
}
.b54-split--rechts > :last-child {
order: 1;
}
}
/* ==========================================================================
Bereichsmenue
Der Menuepunkt «Bereiche» klappt ein Panel ueber die Breite der Leiste auf,
mit einer Bildkarte je Bereich. Das Markup kommt vom Kern, angereichert
durch inc/navigation.php.
Zur Spezifitaet: der Kern gestaltet Untermenues mit bis zu vier Klassen,
etwa
.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container
und setzt dort display, Breite, Position und Sichtbarkeit. Die Selektoren
hier sind deshalb absichtlich lang: sie muessen den Kern schlagen, nicht
nur ergaenzen. Kuerzer geschrieben laeuft alles still ins Leere und das
Panel bleibt eine schmale Spalte.
Desktop und Telefon sind bewusst verschieden geloest. Auf dem Telefon
gaebe es fuer vier Bildkarten keinen Platz, dort bleiben schlichte Zeilen.
========================================================================== */
/* Der Pfeil des Kerns entfaellt, der Entwurf kennt keinen. */
.b54-header .b54-bereichsmenue .wp-block-navigation__submenu-icon {
display: none;
}
/* --------------------------------------------------------------------------
Ab Tablet: das Panel
-------------------------------------------------------------------------- */
@media (min-width: 782px) {
/*
* Das Panel spannt ueber die ganze Leiste. Bezugsrahmen ist darum die
* Leiste und nicht das Listenelement, dem der Kern position: relative gibt.
*/
.b54-header__leiste {
position: relative;
}
/*
* Zwischen der Leiste und dem Panel liegen fuenf Ebenen, die der Kern
* positioniert. Jede einzelne wuerde zum Bezugsrahmen des absoluten
* Panels und es damit auf ihre Breite zwingen:
*
* .wp-block-navigation relative
* .wp-block-navigation__responsive-container relative (ab 600px)
* .wp-block-navigation__responsive-dialog relative
* .wp-block-navigation-item relative
* .wp-block-navigation-submenu relative
*
* Alle fuenf muessen zurueckgesetzt werden, damit die Leiste den Rahmen
* bildet. Es genuegt nicht, nur die naechstliegende zu treffen: faellt
* eine weg, uebernimmt die naechste.
*
* Nur ab Tablet. Auf dem Telefon braucht der Kern seine Positionierung
* fuer das Vollbild-Overlay.
*/
.b54-header .b54-header__nav.wp-block-navigation,
.b54-header .b54-header__nav.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open),
.b54-header .b54-header__nav.wp-block-navigation .wp-block-navigation__responsive-dialog,
.b54-header .wp-block-navigation .b54-bereichsmenue {
position: static;
}
/* Grundzustand: unsichtbar, aber schon im richtigen Raster. */
.b54-header .wp-block-navigation .b54-bereichsmenue > .wp-block-navigation__submenu-container {
top: calc(100% + var(--wp--preset--spacing--30));
left: 0;
right: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--wp--preset--spacing--40);
padding: var(--wp--preset--spacing--50);
background-color: var(--wp--preset--color--base);
border: 0;
border-radius: var(--wp--custom--radius--panel);
box-shadow: 0 4px 20px color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
/*
* Einblenden mit einer knappen Bewegung nach unten. Der Kern schaltet
* opacity ohnehin von 0 auf 1, hier kommen Dauer und Weg dazu.
*
* Nur das Oeffnen ist animiert. Beim Schliessen setzt der Kern
* visibility und height hart zurueck, ein Ausblenden waere abgeschnitten
* und wirkt zaeh. Ein Menue darf sofort verschwinden.
*/
transform: translateY(-0.5rem);
transition: opacity 220ms cubic-bezier(0.2, 0, 0, 1), transform 220ms cubic-bezier(0.2, 0, 0, 1);
}
/*
* Geoeffnet. Der Kern setzt hier width: auto und min-width: 200px, beides
* muss weg, sonst schrumpft das Panel auf Inhaltsbreite.
*/
.b54-header .wp-block-navigation .b54-bereichsmenue .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
width: auto;
min-width: 0;
height: auto;
opacity: 1;
overflow: visible;
visibility: visible;
transform: translateY(0);
}
/* Die Karte. Die ganze Flaeche ist der Link, kein zweites Ziel. */
.b54-header .wp-block-navigation .b54-bereichsmenue__karte {
display: block;
position: static;
}
/*
* Der Kern setzt hier display: flex mit ebenfalls vier Klassen. Bei
* Gleichstand entscheidet die Ladereihenfolge, und die ist nicht
* garantiert. Darum eine Klasse mehr.
*/
.b54-header .wp-block-navigation .b54-bereichsmenue > .wp-block-navigation__submenu-container > .b54-bereichsmenue__karte > .wp-block-navigation-item__content {
display: block;
padding: 0;
color: var(--wp--preset--color--contrast);
text-decoration: none;
}
.b54-bereichsmenue__medien {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 263 / 291;
margin-bottom: var(--wp--preset--spacing--30);
}
.b54-bereichsmenue__bild {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
}
/*
* Volle Bereichsfarbe beim Ueberfahren, waechst von unten. Dieselbe
* Bewegung wie im Bereichsband, weil es dieselbe Sache ist.
*/
.b54-bereichsmenue__medien::after {
content: "";
position: absolute;
inset: 0;
background-color: var(--b54-bereich-flaeche);
transform: scaleY(0);
transform-origin: bottom;
transition: transform 380ms cubic-bezier(0.2, 0, 0, 1);
}
@media (hover: hover) {
.b54-bereichsmenue__karte:hover .b54-bereichsmenue__medien::after {
transform: scaleY(1);
}
}
.b54-bereichsmenue__karte:focus-within .b54-bereichsmenue__medien::after {
transform: scaleY(1);
}
/* Pfeil oben rechts, in der Bereichsfarbe. Liegt ueber der Hoverflaeche. */
.b54-bereichsmenue__pfeil {
position: absolute;
top: var(--wp--preset--spacing--30);
right: var(--wp--preset--spacing--30);
z-index: 1;
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
background-color: var(--b54-bereich-flaeche);
color: var(--b54-bereich-text);
border-radius: var(--wp--custom--radius--pill);
}
.b54-bereichsmenue__pfeil::before {
content: "";
display: block;
width: 1rem;
height: 1rem;
background-color: currentcolor;
-webkit-mask-image: url("./assets/bilder/arrow.svg");
mask-image: url("./assets/bilder/arrow.svg");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.b54-header .wp-block-navigation .b54-bereichsmenue__karte .wp-block-navigation-item__label {
display: block;
margin-bottom: 0.375rem;
font-size: 1.125rem;
font-weight: 600;
line-height: 1.3;
}
.b54-bereichsmenue__karte:hover .wp-block-navigation-item__label {
text-decoration: underline;
text-underline-offset: 0.2em;
}
.b54-bereichsmenue__text {
/* Zwei Zeilen, damit alle Karten auf derselben Linie enden. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 0.75rem;
font-weight: 400;
line-height: 1.45;
color: var(--wp--preset--color--muted);
}
/*
* Abschnittszeile ueber alle vier Spalten. Sie traegt die Trennlinie, die
* vorher an jedem einzelnen Eintrag hing: eine durchgehende Linie trennt
* die beiden Zeilen sauberer als vier unterbrochene.
*
* Sichtbar ist nur die Linie. Der Titel steht als screen-reader-text im
* Markup und braucht darum hier keine Farbe: eine sichtbare Ueberschrift
* liess sich nicht so hell setzen, wie sie sein sollte, ohne unter 4.5:1
* zu fallen.
*/
.b54-header .wp-block-navigation .b54-bereichsmenue__abschnitt {
grid-column: 1 / -1;
margin-top: var(--wp--preset--spacing--20);
padding-top: var(--wp--preset--spacing--30);
border-top: 1px solid var(--wp--preset--color--line);
}
/* --------------------------------------------------------------------
Sekundaere Eintraege im Panel
Sie liegen im selben vierspaltigen Raster wie die Karten und landen
darum von allein in der zweiten Zeile. Kein Bild, kein Anriss, keine
Bereichsfarbe: abgesetzt wird ueber eine Haarlinie und den kleineren
Grad, gleich wie in der Sekundaerreihe auf der Startseite.
-------------------------------------------------------------------- */
/*
* Auch hier gilt die Regel des Kerns mit vier Klassen, die display und
* padding setzt. Der Selektor muss sie ueberbieten.
*/
.b54-header .wp-block-navigation .b54-bereichsmenue > .wp-block-navigation__submenu-container > .b54-bereichsmenue__karte--sekundaer > .wp-block-navigation-item__content {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--20);
padding: var(--wp--preset--spacing--20) 0;
}
/*
* Grad und Gewicht kommen aus der Regel fuer die Kartentitel weiter oben,
* 18px in 600. Hier steht nur noch, was abweicht: kein Abstand nach unten,
* weil unter dem Namen kein Anriss folgt.
*/
.b54-header .wp-block-navigation .b54-bereichsmenue__karte--sekundaer .wp-block-navigation-item__label {
margin-bottom: 0;
}
/*
* Derselbe Kreis wie in der Sekundaerreihe, nur kleiner. Sand mit
* Bordeaux darauf ergibt 11.3:1, beim Ueberfahren dreht das Paar auf
* 12.6:1. Kreis und Pfeil liegen auf zwei Elementen, sonst schnitte die
* Maske die Flaeche mit weg.
*/
.b54-bereichsmenue__pfeil-klein {
flex-shrink: 0;
display: grid;
place-items: center;
width: 1.75rem;
height: 1.75rem;
background-color: var(--wp--preset--color--surface);
color: var(--wp--preset--color--contrast);
border-radius: var(--wp--custom--radius--pill);
transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition);
}
.b54-bereichsmenue__pfeil-klein::before {
content: "";
display: block;
width: 0.75rem;
height: 0.75rem;
background-color: currentcolor;
-webkit-mask-image: url("./assets/bilder/arrow.svg");
mask-image: url("./assets/bilder/arrow.svg");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.b54-bereichsmenue__karte--sekundaer:hover .b54-bereichsmenue__pfeil-klein,
.b54-bereichsmenue__karte--sekundaer:focus-within .b54-bereichsmenue__pfeil-klein {
background-color: var(--wp--preset--color--contrast);
color: var(--wp--preset--color--base);
}
/*
* Der geoeffnete Punkt wird ausgezeichnet. Farbe traegt die Information
* nicht allein, das Gewicht kommt dazu.
*/
.b54-header .wp-block-navigation .b54-bereichsmenue .wp-block-navigation-submenu__toggle[aria-expanded="true"] {
color: var(--wp--preset--color--brand-deep);
font-weight: 600;
}
}
/* --------------------------------------------------------------------------
Telefon: schlichte Zeilen im Overlay des Kerns
Kein Bild, kein Anriss. Ein farbiger Balken links haelt die Zuordnung zum
Bereich, ohne dass Farbe der einzige Traeger waere: der Name steht daneben.
-------------------------------------------------------------------------- */
@media (max-width: 781px) {
.b54-bereichsmenue__medien,
.b54-bereichsmenue__text {
display: none;
}
/*
* Auch hier gilt die Regel des Kerns mit vier Klassen, die padding setzt.
* Der Selektor muss sie darum ebenfalls ueberbieten.
*/
.b54-header .wp-block-navigation .b54-bereichsmenue > .wp-block-navigation__submenu-container > .b54-bereichsmenue__karte > .wp-block-navigation-item__content {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--30);
padding-left: 0;
border-left: 0;
}
}
/*
* Bewegungsreduktion fuer das Bereichsmenue. Der Weg entfaellt, das reine
* Einblenden bleibt: ein Panel, das ohne jeden Uebergang erscheint, wirkt
* wie ein Fehler. Die globale Regel weiter oben kuerzt die Dauer ohnehin
* auf einen Wimpernschlag.
*/
@media (prefers-reduced-motion: reduce) {
.b54-header .wp-block-navigation .b54-bereichsmenue > .wp-block-navigation__submenu-container,
.b54-header .wp-block-navigation .b54-bereichsmenue .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
transform: none;
}
.b54-bereichsmenue__medien::after {
transition: none;
}
}
/* --------------------------------------------------------------------------
Schleier hinter dem geoeffneten Panel
Der Entwurf legt den Seiteninhalt hinter dem Menue dunkler und weich.
Der Kern setzt am Umschalter aria-expanded, daran haengt sich der
Schleier ohne eigenes JavaScript.
Getoentes Bordeaux statt Schwarz: ein neutraler Schleier wirkt auf einer
warmen Palette wie ein Fremdkoerper.
-------------------------------------------------------------------------- */
@media (min-width: 782px) {
.b54-menue-schleier {
position: fixed;
inset: 0;
z-index: 10;
background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 30%, transparent);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
opacity: 0;
pointer-events: none;
transition: opacity 240ms ease;
}
/*
* :has liest den Zustand des Umschalters. Ohne Unterstuetzung bleibt der
* Schleier unsichtbar, das Menue funktioniert trotzdem vollstaendig.
*/
body:has(.b54-bereichsmenue .wp-block-navigation-submenu__toggle[aria-expanded="true"]) .b54-menue-schleier {
opacity: 1;
}
/* Die Leiste liegt ueber dem Schleier, das Panel gehoert dazu. */
body .wp-site-blocks > .b54-header {
z-index: 20;
}
}
@media (prefers-reduced-motion: reduce) {
.b54-menue-schleier {
transition: none;
}
}
/* --------------------------------------------------------------------------
Mobilmenue: das Overlay des Kerns in Bordeaux
Vorher war das Overlay ungestaltet, also weiss und linksbuendig direkt aus
dem Navigations-Block. Bordeaux macht es zur eigenen Ebene ueber der Seite,
dieselbe Flaeche wie der Footer.
Jede Regel traegt den langen Praefix. Der Kern setzt seine Overlay-Regeln
mit drei Klassen, bei Gleichstand entscheidet die Ladereihenfolge, und die
ist nicht garantiert. Mit der kurzen Form standen die Eintraege auf
Inhaltsbreite statt auf voller Breite.
Die Liste ist ein Raster mit drei Spalten, nicht eine Flex-Spalte: nur so
stehen die drei Dienstlinks unten in einer Zeile, ohne Wrapper im Markup,
den der Navigations-Block nicht hergibt. Die vierte Rasterzeile ist 1fr und
nimmt den freien Raum, der Terminknopf sitzt mit align-self an ihrem Fuss.
-------------------------------------------------------------------------- */
@media (max-width: 781px) {
.b54-header .b54-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
background-color: var(--wp--preset--color--contrast);
color: var(--wp--preset--color--base);
padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) calc(var(--wp--preset--spacing--40) + env(safe-area-inset-bottom, 0px));
}
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-close,
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-dialog,
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content {
display: flex;
flex-direction: column;
flex-grow: 1;
width: 100%;
max-width: none;
padding: 0;
}
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content {
padding-block-start: var(--wp--preset--spacing--50);
}
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-close {
color: var(--wp--preset--color--base);
}
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__container {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: min-content min-content min-content 1fr;
grid-auto-rows: min-content;
flex-grow: 1;
width: 100%;
gap: 0;
}
/* Alles ausser den Dienstlinks nimmt die ganze Breite. */
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.b54-nav-dienst) {
grid-column: 1 / -1;
}
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.b54-nav-aktion):not(.b54-nav-dienst) {
border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 18%, transparent);
}
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-submenu__toggle {
display: flex;
align-items: center;
width: 100%;
min-height: 56px;
padding: 0;
font-size: var(--wp--preset--font-size--large);
font-weight: 500;
color: var(--wp--preset--color--base);
}
/* Bereiche: dichte Zeilen, kein Einzug, Quadrat in der Bereichsfarbe. */
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .b54-bereichsmenue > .wp-block-navigation__submenu-container {
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
background-color: transparent;
border: 0;
box-shadow: none;
}
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .b54-bereichsmenue__karte {
border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 12%, transparent);
}
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .b54-bereichsmenue__karte > .wp-block-navigation-item__content {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--30);
width: 100%;
min-height: 52px;
padding: 0;
font-size: var(--wp--preset--font-size--lead);
font-weight: 400;
color: var(--wp--preset--color--base);
}
/*
* Weisse Haarlinie um das Quadrat: Physiotherapie und Funktionelle
* Neurologie haben gegen Bordeaux kaum Kontrast, ohne Linie verschwindet
* die Form. Die Farbe ist hier nur Hinweis, der Name steht daneben.
*/
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .b54-bereichsmenue__karte > .wp-block-navigation-item__content::before {
content: "";
flex-shrink: 0;
width: 14px;
height: 14px;
border-radius: 3px;
background-color: var(--b54-bereich-flaeche, var(--wp--preset--color--brand-light));
box-shadow: 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent);
}
/*
* Abschnittszeile im Overlay. Sie ist kein Ziel und bekommt darum keine
* Mindesthoehe von 52px, nur Abstand und eine helle Haarlinie. Apricot
* gegen Bordeaux ergibt 6.4:1.
*/
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .b54-bereichsmenue__abschnitt {
margin-top: var(--wp--preset--spacing--30);
padding-top: var(--wp--preset--spacing--30);
border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 30%, transparent);
}
/*
* Sekundaere Eintraege tragen kein Farbquadrat: sie gehoeren zu keinem
* der vier Bereiche, und der Vorgabewert Apricot wuerde eine Zuordnung
* behaupten, die es nicht gibt. Der kleine Pfeilkreis entfaellt hier
* ebenfalls, im Overlay tragen auch die Karten keinen.
*/
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .b54-bereichsmenue__karte--sekundaer > .wp-block-navigation-item__content::before,
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .b54-bereichsmenue__pfeil-klein {
display: none;
}
/* Aktionen: unten, mit dem Daumen erreichbar. */
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__container > .b54-nav-aktion--termin {
align-self: end;
padding-block-start: var(--wp--preset--spacing--50);
}
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__container > .b54-nav-aktion--kontakt {
padding-block-start: var(--wp--preset--spacing--30);
}
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__container > .b54-nav-aktion > .wp-block-navigation-item__content {
justify-content: center;
min-height: 52px;
padding: 0 var(--wp--preset--spacing--40);
border-radius: var(--wp--custom--radius--pill);
font-size: var(--wp--preset--font-size--medium);
font-weight: 600;
}
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__container > .b54-nav-aktion--termin > .wp-block-navigation-item__content {
background-color: var(--wp--preset--color--brand-light);
color: var(--wp--preset--color--contrast);
}
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__container > .b54-nav-aktion--kontakt > .wp-block-navigation-item__content {
box-shadow: inset 0 0 0 1px var(--wp--preset--color--base);
color: var(--wp--preset--color--base);
}
/* Anrufen, E-Mail, Anfahrt: eine Zeile, zentriert, ganz unten. */
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__container > .b54-nav-dienst {
padding-block-start: var(--wp--preset--spacing--20);
}
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__container > .b54-nav-dienst > .wp-block-navigation-item__content {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 44px;
padding: 0;
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
color: var(--wp--preset--color--brand-light);
}
/* Fokus auf dunklem Grund, gleiche Regel wie in dunklen Sektionen. */
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open :focus-visible {
outline: 2px solid var(--wp--preset--color--brand-light);
outline-offset: 2px;
}
}
/* Auf dem Desktop stehen die echten Knoepfe in der Leiste. */
@media (min-width: 782px) {
.b54-header .b54-header__nav .b54-nav-aktion,
.b54-header .b54-header__nav .b54-nav-dienst {
display: none;
}
}
/* --------------------------------------------------------------------------
Mobilkopf und Nachbesserungen am Overlay, 17.09.2026
Auf dem Telefon traegt die Leiste nur noch Logo und Burger. Kontakt und
Termin stehen im Menue, zwei Ziele in der schmalen Leiste waren ein Ziel
zu viel, und der Terminknopf war dort auf ein Symbol ohne Text geschrumpft.
Dazu weniger Luft nach oben: Polster und Leistenhoehe sind kleiner, die
abgeleiteten Groessen rechnen automatisch mit.
-------------------------------------------------------------------------- */
@media (max-width: 781px) {
:root {
--b54-header-hoehe: 64px;
--b54-header-abstand: var(--wp--preset--spacing--20);
}
.b54-header .b54-header__leiste .b54-header__aktionen {
display: none;
}
/*
* Ohne border-box zaehlt der Innenabstand zur Breite dazu: die Knoepfe
* standen um 48px ueber den rechten Rand hinaus.
*/
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation-item__content,
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation-submenu__toggle {
box-sizing: border-box;
}
/* Die Bereichszeilen liefen auf Inhaltsbreite, ihre Linien endeten mitten drin. */
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .b54-bereichsmenue > .wp-block-navigation__submenu-container,
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .b54-bereichsmenue__karte {
width: 100%;
min-width: 0;
box-sizing: border-box;
}
/* Ueber dem ersten Eintrag braucht es keine Linie, darueber steht nichts. */
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:first-child {
border-top: 0;
}
}
/* --------------------------------------------------------------------------
Logo im geoeffneten Mobilmenue, 17.09.2026
Der Navigations-Block nimmt nur die Navigation in sein Overlay, das Logo
der Leiste liegt darunter und ist zugedeckt. Darum als Hintergrundbild auf
einem Pseudoelement des Overlay-Inhalts: das ist dort das erste Flex-Kind
und sitzt oben links, auf derselben Hoehe wie der Schliesser.
Die Datei liegt im Theme und nicht in der Mediathek, damit der Pfad beim
Umzug auf die Live-Domain nicht bricht. Rein dekorativ, der Name der Praxis
steht in der Leiste und im Fuss.
-------------------------------------------------------------------------- */
@media (max-width: 781px) {
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content {
padding-block-start: 0;
}
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content::before {
content: "";
flex-shrink: 0;
align-self: flex-start;
/*
* Kasten so hoch wie der Schliesser, damit beide auf derselben Achse
* liegen: sie beginnen beide am oberen Polster des Overlays, das Bild
* steht darin mittig. Die Zeichnung bleibt 137 mal 40.
*/
width: 137px;
height: 48px;
margin-block-end: var(--wp--preset--spacing--50);
background-image: url("./assets/bilder/logo-negativ.svg");
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
}
}
/* --------------------------------------------------------------------------
Mobilmenue: Schliesser als Kreis, engerer Kopf, 17.09.2026
-------------------------------------------------------------------------- */
@media (max-width: 781px) {
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content::before {
margin-block-end: var(--wp--preset--spacing--30);
}
/*
* Der Kern gibt dem Schliesser nur das Symbol. Der Kreis macht die
* Trefferflaeche sichtbar und bindet ihn an die Knopfsprache der Site.
* 48px, damit das Ziel ueber den geforderten 24px liegt.
*/
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-close {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding: 0;
border: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 45%, transparent);
border-radius: var(--wp--custom--radius--pill);
color: var(--wp--preset--color--base);
}
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-close svg {
width: 20px;
height: 20px;
}
}
/* --------------------------------------------------------------------------
Burger, Deckungsgleichheit und Einblenden des Mobilmenues, 17.09.2026
Das Zeichen sind zwei Linien, die untere kuerzer: dieselbe Asymmetrie wie
die versetzten Kreise im Logo. Gezeichnet mit ::before und ::after, das
SVG des Kerns wird ausgeblendet. So braucht es keinen Eingriff ins Markup
des Navigations-Blocks.
Burger und Schliesser liegen exakt uebereinander. Gerechnet, nicht
geschaetzt: die Leiste beginnt bei --b54-header-abstand und ist
--b54-header-hoehe hoch, beide Knoepfe sind 48px, also sitzt der
Schliesser bei top = Abstand + (Hoehe - 48) / 2. Seitlich: Wurzelpolster
plus Innenabstand der Leiste, beides spacing--40.
-------------------------------------------------------------------------- */
@media (max-width: 781px) {
.b54-header .b54-header__nav.wp-block-navigation .wp-block-navigation__responsive-container-open {
box-sizing: border-box;
position: relative;
display: flex;
width: 48px;
height: 48px;
padding: 0;
color: var(--wp--preset--color--contrast);
}
.b54-header .b54-header__nav.wp-block-navigation .wp-block-navigation__responsive-container-open svg {
display: none;
}
.b54-header .b54-header__nav.wp-block-navigation .wp-block-navigation__responsive-container-open::before,
.b54-header .b54-header__nav.wp-block-navigation .wp-block-navigation__responsive-container-open::after {
content: "";
position: absolute;
left: 14px;
height: 2px;
border-radius: 1px;
background-color: currentcolor;
}
.b54-header .b54-header__nav.wp-block-navigation .wp-block-navigation__responsive-container-open::before {
top: 20px;
width: 20px;
}
.b54-header .b54-header__nav.wp-block-navigation .wp-block-navigation__responsive-container-open::after {
top: 26px;
width: 12px;
}
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-close {
position: fixed;
top: calc(var(--b54-header-abstand) + (var(--b54-header-hoehe) - 48px) / 2);
right: calc(var(--wp--preset--spacing--40) + var(--wp--preset--spacing--40));
margin: 0;
}
/*
* Einblenden. Nur das Oeffnen ist bewegt, beim Schliessen setzt der Kern
* alles hart zurueck, ein abgeschnittenes Ausblenden wirkt zaeh. Dieselbe
* Entscheidung wie beim Bereichspanel auf dem Desktop.
*/
@keyframes b54-menue-flaeche {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes b54-menue-zeile {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content {
animation: b54-menue-flaeche 360ms ease-out both;
}
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content::before,
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
animation: b54-menue-zeile 440ms ease-out both;
}
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(1) { animation-delay: 110ms; }
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) { animation-delay: 180ms; }
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) { animation-delay: 250ms; }
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) { animation-delay: 320ms; }
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) { animation-delay: 380ms; }
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(n+6) { animation-delay: 430ms; }
}
@media (prefers-reduced-motion: reduce) {
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content,
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content::before,
.b54-header .b54-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
animation: none;
}
}
/* --------------------------------------------------------------------------
Ausblenden des Mobilmenues, 17.09.2026
Der Kern nimmt die Klasse is-menu-open beim Schliessen sofort weg, eine
reine CSS-Loesung kann darum nur das Oeffnen bewegen. Ein kleines Skript
(inc/mobilmenue.php) faengt den Klick auf den Schliesser ab, setzt hier
b54-menue-schliesst, und laesst den Kern erst danach schliessen.
Die Zeilen gehen in umgekehrter Reihenfolge, von unten nach oben: das
Menue raeumt sich in die Richtung ab, aus der es gekommen ist.
-------------------------------------------------------------------------- */
@media (max-width: 781px) {
@keyframes b54-menue-flaeche-aus {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes b54-menue-zeile-aus {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(8px); }
}
.b54-header .b54-header__nav.wp-block-navigation .b54-menue-schliesst .wp-block-navigation__responsive-container-content {
animation: b54-menue-flaeche-aus 300ms ease-in both;
animation-delay: 220ms;
}
.b54-header .b54-header__nav.wp-block-navigation .b54-menue-schliesst .wp-block-navigation__responsive-container-content::before,
.b54-header .b54-header__nav.wp-block-navigation .b54-menue-schliesst .wp-block-navigation__container > .wp-block-navigation-item {
animation: b54-menue-zeile-aus 280ms ease-in both;
}
.b54-header .b54-header__nav.wp-block-navigation .b54-menue-schliesst .wp-block-navigation__container > .wp-block-navigation-item:nth-last-child(1) { animation-delay: 0ms; }
.b54-header .b54-header__nav.wp-block-navigation .b54-menue-schliesst .wp-block-navigation__container > .wp-block-navigation-item:nth-last-child(2) { animation-delay: 40ms; }
.b54-header .b54-header__nav.wp-block-navigation .b54-menue-schliesst .wp-block-navigation__container > .wp-block-navigation-item:nth-last-child(3) { animation-delay: 80ms; }
.b54-header .b54-header__nav.wp-block-navigation .b54-menue-schliesst .wp-block-navigation__container > .wp-block-navigation-item:nth-last-child(4) { animation-delay: 120ms; }
.b54-header .b54-header__nav.wp-block-navigation .b54-menue-schliesst .wp-block-navigation__container > .wp-block-navigation-item:nth-last-child(5) { animation-delay: 160ms; }
.b54-header .b54-header__nav.wp-block-navigation .b54-menue-schliesst .wp-block-navigation__container > .wp-block-navigation-item:nth-last-child(n+6) { animation-delay: 200ms; }
.b54-header .b54-header__nav.wp-block-navigation .b54-menue-schliesst .wp-block-navigation__responsive-container-content::before {
animation-delay: 220ms;
}
}
@media (prefers-reduced-motion: reduce) {
.b54-header .b54-header__nav.wp-block-navigation .b54-menue-schliesst .wp-block-navigation__responsive-container-content,
.b54-header .b54-header__nav.wp-block-navigation .b54-menue-schliesst .wp-block-navigation__responsive-container-content::before,
.b54-header .b54-header__nav.wp-block-navigation .b54-menue-schliesst .wp-block-navigation__container > .wp-block-navigation-item {
animation: none;
}
}
/* --------------------------------------------------------------------------
Rueckstellung des geschlossenen Overlays, 17.09.2026
Nach dem Schliessen blieb die Browserleiste auf Bordeaux stehen. Safari 26
tastet feste Elemente am Rand ab und liest die Farbe offenbar auch dann
noch, wenn der Kern den Behaelter bereits weggeschaltet hat. Darum wird der
geschlossene Zustand ausdruecklich auf durchsichtig gesetzt, statt sich auf
das Fehlen der Regel zu verlassen.
-------------------------------------------------------------------------- */
@media (max-width: 781px) {
.b54-header .b54-header__nav.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
background-color: transparent;
}
}
/* =========================================
* Hover der Knoepfe im Bereich Weiterbildung, seit 12.10.2026.
* Wunsch Matty: Gold statt Orange. Gold traegt Bordeaux-Text (6.3:1),
* Weiss waere darauf 1.9:1. Gilt nur auf hellem Grund; auf Bordeaux
* bleibt der Hover Apricot aus der Regel fuer dunkle Sektionen. Der Knopf
* im Split-Hero ist ausgenommen, er steht dort bereits auf Gold.
* ========================================= */
.b54-bereich--weiterbildung :where(.b54-section--weiss, .b54-section--grau, .b54-cta-sektion--sand) .wp-element-button:not(.b54-hero__button):hover,
.b54-bereich--weiterbildung :where(.b54-section--weiss, .b54-section--grau) .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
background-color: var(--wp--preset--color--bereich-weiterbildung);
color: var(--wp--preset--color--contrast);
}
/* =========================================
* Behandlungsseiten in der Bereichsfarbe, seit 15.10.2026.
*
* Wunsch Matty: eine Behandlung traegt die Farbe ihres Bereichs statt
* durchgehend Bordeaux. Die Klasse b54-bereich--* setzt inc/bereiche.php am
* body, aus der ersten Bereichsrelation der Behandlung.
*
* Der Hero der Behandlungen steht im Zweispalter auf dunkel. Die Regeln fuer
* .b54-section--dunkel invertieren Links, Knopf und Kicker auf Weiss und
* Apricot. Das stimmt auf Physiotherapie und Neurologie, auf Longevity waere
* Weiss aber 1.9:1. Darum hier alles ausdruecklich auf das Paar, nach dem
* Muster des Split-Heros und der CTA mit Bereichsfarbe. Kein gedaempfter
* Lead: 80 Prozent Weiss auf brand-deep faellt unter 4.5:1.
*
* Bewusst auf .single-behandlung begrenzt. Dunkle Sektionen auf Bereichs-
* und anderen Seiten bleiben Bordeaux. Im Editor zeigt der Hero weiter
* «Bordeaux», das Frontend faerbt um. Ohne Bereichsrelation fehlt
* b54-bereich am body und die Seite bleibt Bordeaux.
* ========================================= */
.single-behandlung.b54-bereich .b54-hero-sektion.b54-section--dunkel {
background-color: var(--b54-bereich-flaeche, var(--wp--preset--color--contrast));
color: var(--b54-bereich-text, var(--wp--preset--color--base));
--b54-muted: var(--b54-bereich-text, var(--wp--preset--color--base));
}
.single-behandlung.b54-bereich .b54-hero-sektion.b54-section--dunkel [class$="__kicker"] {
color: inherit;
}
.single-behandlung.b54-bereich .b54-hero-sektion.b54-section--dunkel a:not(.wp-element-button) {
color: var(--b54-bereich-text, var(--wp--preset--color--base));
}
.single-behandlung.b54-bereich .b54-hero-sektion.b54-section--dunkel .wp-element-button {
background-color: var(--b54-bereich-text, var(--wp--preset--color--base));
color: var(--b54-bereich-flaeche, var(--wp--preset--color--contrast));
}
.single-behandlung.b54-bereich .b54-hero-sektion.b54-section--dunkel .wp-element-button:hover {
background-color: transparent;
color: var(--b54-bereich-text, var(--wp--preset--color--base));
box-shadow: inset 0 0 0 2px var(--b54-bereich-text, var(--wp--preset--color--base));
}
.single-behandlung.b54-bereich .b54-hero-sektion.b54-section--dunkel :focus-visible {
outline-color: var(--b54-bereich-text, var(--wp--preset--color--base));
}