/**
* Global base styles (intentionally minimal).
* Layout, colors, and typography come from theme.json; this file only
* contains what cannot be expressed there (accessibility helpers etc.).
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
img,
svg,
video {
max-width: 100%;
height: auto;
}
:where(a, button, input, select, textarea, summary):focus-visible {
outline: 2px solid var(--wp--preset--color--primary, #2563eb);
outline-offset: 2px;
}
/* On a dark band the `primary` ring can fall below the 3:1 the focus indicator
needs against its own background. Inside a light-text context the ring is
painted in `base` and separated from the band by a dark halo, which reads on
both light and dark buttons. `has-light-text` is emitted only by webux/hero
and webux/section, so nothing outside those blocks is affected. */
.has-light-text :where(a, button, input, select, textarea, summary):focus-visible,
.webux-card--cta :where(a, button):focus-visible {
outline-color: var(--wp--preset--color--base, #ffffff);
box-shadow: 0 0 0 4px var(--wp--preset--color--contrast, #15181d);
}
/* Screen-reader-only text (used by the skip link and image captions). */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
position: absolute !important;
word-wrap: normal !important;
}
.skip-link.screen-reader-text:focus {
clip: auto;
clip-path: none;
height: auto;
width: auto;
margin: 0;
padding: 0.75rem 1.5rem;
top: 0.5rem;
left: 0.5rem;
z-index: 100000;
background: var(--wp--preset--color--base, #fff);
color: var(--wp--preset--color--contrast, #15181d);
border-radius: 0.375rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
text-decoration: none;
}
/* ---------------------------------------------------------------------------
Header bar (opt-in)
---------------------------------------------------------------------------
Add the class `webux-headerbar` to the flex group of a header template part
that holds the navigation and (optionally) the header call-to-action. Without
the class nothing below applies, so existing headers keep rendering exactly as
before - the block is purely additive.
--------------------------------------------------------------------------- */
/* wp:navigation hard-codes the "mobile" overlay breakpoint at 600px. A menu with
several long labels next to a logo and a CTA needs more room than that and
wraps onto a second line on portrait tablets. Inside a header bar the
navigation therefore collapses into its own overlay up to 1120px - above the
width where the row actually breaks, because a fluid root padding eats into
the available row as the viewport shrinks.
Der Wert ist gemessen, nicht geschaetzt: die Zeile bricht bei 1036px (sechs
Punkte plus CTA-Pille, stoeckli) bzw. 1092px (sieben Punkte, liventra) - jeweils
mit der Kopfzeilen-Typo weiter unten. 1120px liegt ueber der breiteren der
beiden und laesst Luft fuer eine spaet geladene Webschrift. Der fruehere Wert
lag UNTER beiden: zwischen ihm und dem Umbruchpunkt wurde die Desktop-Zeile
gezeigt und brach prompt auf zwei Zeilen - genau der Fehler, den das hier
ersetzt.
Both selectors outrank the core rules they replace (0,4,0 vs. 0,3,0 / 0,2,0),
so the stylesheet order does not matter. */
@media (max-width: 1119.98px) {
.webux-headerbar .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container:not(.is-menu-open) {
display: none;
}
.webux-headerbar .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container-open:not(.always-shown) {
display: flex;
align-items: center;
justify-content: center;
/* WCAG 2.5.8: the bare icon is only 24px. */
min-width: 44px;
min-height: 44px;
}
}
/* ---------------------------------------------------------------------------
Header type
---------------------------------------------------------------------------
Die Kopfzeile hatte bisher gar keine eigene Typo: Groesse, Gewicht und Abstand
der Menuepunkte kamen aus der geteilten site.css, die auf JEDER Site laedt und
dort mit 15px/32px ein Liventra-Wert ist, der nur zufaellig ueberall galt.
Eine Leiste, die 100px hoch ist, traegt darin Beschriftungen, die kleiner sind
als der Fliesstext der Seite - die Navigation wirkt dadurch tiefer gehaengt,
als sie im Seitenaufbau steht.
Die Werte stehen deshalb jetzt an der Komponente selbst und eine Stufe
groesser. Die drei Klassen ergeben 0,3,0 und gewinnen damit gegen die 0,2,0
aus der site.css, die spaeter enqueued wird (dasselbe Muster wie ueberall in
dieser Datei). Nur die Inline-Leiste: im offenen Overlay sind die Zeilen
ohnehin volle Breite und haben ihre eigene Groesse. */
@media (min-width: 1120px) {
.webux-headerbar .webux-headernav .wp-block-navigation-item__content {
font-size: 16px;
}
.webux-headerbar .webux-headernav .wp-block-navigation__container {
gap: 34px;
}
}
/* The close button of the overlay is the same bare 24px icon as the open
button and needs the same target guard (WCAG 2.5.5/2.5.8). Core positions it
absolutely, so growing it does not move anything else. */
.webux-headerbar .wp-block-navigation__responsive-container-close {
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
}
/* As soon as the navigation collapses into the overlay (same 1120px breakpoint as
above), the header row is down to the logo and the menu button: the call to
action moves into the overlay and lives there as its last, button-styled entry
(see `webux-nav-cta` below). Hidden is the whole buttons wrapper, not just the
button - the wrapper carries the row's block gap, which would otherwise stay
behind and push the burger away from the right edge. */
@media (max-width: 1119.98px) {
.webux-headerbar > .wp-block-buttons {
display: none;
}
}
@media (max-width: 600px) {
/* The logo width is a desktop figure typed into the block. On a phone the
same wordmark crowds the row, so it is capped here. `max-width` wins over
the inline `width` without !important, and `height: auto` keeps the aspect
ratio. Header only - the footer logo has the whole column to itself.
124px statt der frueheren 108px: auf dem Telefon steht neben dem Logo nur
noch der Menue-Knopf, die Zeile ist also gar nicht eng - eng war sie in der
alten, flacheren Leiste. In einer Zeile, die ihre Hoehe aus den
Innenabstaenden der Kopfzeile bezieht, sass die kleinere Marke sichtbar
verloren. */
header .webux-logo--image .webux-logo__img {
max-width: 124px;
}
}
/* ---------------------------------------------------------------------------
Navigation: hover state and current page
---------------------------------------------------------------------------
Both are painted in `primary`, so a menu carries the brand colour instead of a
hard-coded project tone, and both add the same 2px bar under the label - the
current page simply shows permanently what a hover shows temporarily.
Only for the inline (desktop) menu: below 1120px the navigation IS the overlay,
whose rows are full width and already separated by lines; a bar under such a
row would read as a second separator. The overlay gets its own treatment
further down.
The extra `.webux-headernav` step exists for the same reason as everywhere in
this file: the shared site.css styles these links at 0,2,0 / 0,3,0 and is
enqueued afterwards.
--------------------------------------------------------------------------- */
@media (min-width: 1120px) {
.webux-headerbar .webux-headernav .wp-block-navigation-item__content {
position: relative;
}
/* Always present, only scaled to nothing: drawing the bar up front means it
costs no layout, so the row never shifts when it appears. */
.webux-headerbar .webux-headernav .wp-block-navigation-item__content::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -0.45em;
height: 2px;
border-radius: 2px;
background: currentColor;
transform: scaleX(0);
transform-origin: left center;
transition: transform 150ms ease;
}
.webux-headerbar .webux-headernav .wp-block-navigation-item__content:hover,
.webux-headerbar .webux-headernav .wp-block-navigation-item__content:focus-visible,
.webux-headerbar .webux-headernav .current-menu-item > .wp-block-navigation-item__content,
.webux-headerbar .webux-headernav .wp-block-navigation-item__content[aria-current="page"] {
color: var(--wp--preset--color--primary, #8b8178);
}
.webux-headerbar .webux-headernav .wp-block-navigation-item__content:hover::after,
.webux-headerbar .webux-headernav .wp-block-navigation-item__content:focus-visible::after,
.webux-headerbar .webux-headernav .current-menu-item > .wp-block-navigation-item__content::after,
.webux-headerbar .webux-headernav .wp-block-navigation-item__content[aria-current="page"]::after {
transform: scaleX(1);
}
/* Colour and bar alone would make the current page look exactly like whatever
the mouse happens to be over. The heavier weight is what stays put. */
.webux-headerbar .webux-headernav .current-menu-item > .wp-block-navigation-item__content,
.webux-headerbar .webux-headernav .wp-block-navigation-item__content[aria-current="page"] {
font-weight: 600;
}
}
@media (prefers-reduced-motion: reduce) {
.webux-headerbar .webux-headernav .wp-block-navigation-item__content::after {
transition: none;
}
}
/* Overlay menu: no bar here, the rows carry separators of their own. The current
page is marked by colour and weight - and the weight sits on the row, which is
full width, so nothing jumps.
The call to action is excluded explicitly: it is a filled pill in `primary`,
and when it points at the page you are on (a CTA to /kontakt/ viewed on
/kontakt/) a `primary` label on it would be invisible. */
.webux-headerbar .webux-headernav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item:not(.webux-nav-cta) > .wp-block-navigation-item__content {
color: var(--wp--preset--color--primary, #8b8178);
font-weight: 600;
}
/* ---------------------------------------------------------------------------
Logo inside the open overlay menu
---------------------------------------------------------------------------
No second logo and no rebuild: this is the SAME element from the header bar,
lifted above the overlay for as long as it is open. Size, colour and wordmark
are therefore identical by construction - it cannot jump on open or close.
The position is derived, not measured. `top: 0` plus the height of the header
row, together with the `align-items: center` the logo link already has, puts
the wordmark on exactly the same baseline as in the bar; horizontally it sits
on the root padding the header takes its own padding from. WordPress puts the
overlay on z-index 100000, hence 100001 here.
`position: fixed` is not decoration: the overlay is fixed to the viewport, the
header is not. Without it the logo would sit wherever the page happens to be
scrolled to, i.e. usually nowhere near the top.
The header row height is read from `--webux-header-h`, so a project only has
to state its own value once; 76px is the default this theme ships with. Kept
in this file and not in the shared site.css, which is also deployed from a
separate repository and would overwrite it.
--------------------------------------------------------------------------- */
:where(.lv-header, .webux-headerbar):has(.wp-block-navigation__responsive-container.is-menu-open) .webux-logo {
position: fixed;
top: 0;
left: var(--wp--style--root--padding-left, 24px);
height: var(--webux-header-h, 76px);
z-index: 100001;
}
/* ---------------------------------------------------------------------------
Navigation link only in the overlay menu (opt-in)
---------------------------------------------------------------------------
Add the class `webux-nav-mobile` to a navigation link and it disappears from
the inline (desktop) bar and appears as a normal row in the open overlay.
Written for entries that only make sense on a small screen: a "Home" link,
for example. On the desktop the logo already leads home, and the inline bar
is the one place in this theme where a single extra item can break the row
onto a second line (see the measured breakpoint above). In the overlay every
row is full width, so one more costs nothing.
Deliberately keyed on `webux-headernav` and not on `webux-headerbar`: the
class belongs to the navigation block itself, so the opt-in also works in a
header that was built without the header-bar wrapper.
--------------------------------------------------------------------------- */
.webux-headernav .webux-nav-mobile {
display: none;
}
.webux-headernav .wp-block-navigation__responsive-container.is-menu-open .webux-nav-mobile {
display: block;
}
/* ---------------------------------------------------------------------------
Call to action inside the overlay menu (opt-in)
---------------------------------------------------------------------------
Add the class `webux-nav-cta` to a navigation link of the header navigation
and it becomes the counterpart of the header pill that is hidden above: silent
in the inline (desktop) menu, a full-width button in the open overlay. Without
the class nothing here applies.
The second selector of each pair is the same rule one class deeper. The shared
site.css styles the overlay rows at 0,4,0 and is enqueued after this file, so
the plain selector would lose the separator and the link colour to it.
--------------------------------------------------------------------------- */
.webux-headerbar .webux-nav-cta {
display: none;
}
.webux-headerbar .wp-block-navigation__responsive-container.is-menu-open .webux-nav-cta,
.webux-headerbar .webux-headernav .wp-block-navigation__responsive-container.is-menu-open .webux-nav-cta {
display: block;
/* The last menu row before it keeps the separator; the button carries its
own shape and would only look boxed in by one. */
border-bottom: 0;
margin-top: 28px;
}
.webux-headerbar .wp-block-navigation__responsive-container.is-menu-open .webux-nav-cta .wp-block-navigation-item__content,
.webux-headerbar .webux-headernav .wp-block-navigation__responsive-container.is-menu-open .webux-nav-cta .wp-block-navigation-item__content {
display: flex;
align-items: center;
justify-content: center;
/* WCAG 2.5.5 - and the pill is the primary action of the whole menu. */
min-height: 52px;
padding: 14px 24px;
border-radius: 999px;
background: var(--wp--preset--color--primary, #8b8178);
color: var(--wp--preset--color--base, #ffffff);
font-size: 16px;
font-weight: 500;
text-align: center;
}
.webux-headerbar .wp-block-navigation__responsive-container.is-menu-open .webux-nav-cta .wp-block-navigation-item__content:hover,
.webux-headerbar .webux-headernav .wp-block-navigation__responsive-container.is-menu-open .webux-nav-cta .wp-block-navigation-item__content:hover {
background: var(--wp--preset--color--primary-dark, #6f665e);
color: var(--wp--preset--color--base, #ffffff);
}
.webux-headerbar .wp-block-navigation__responsive-container.is-menu-open .webux-nav-cta .wp-block-navigation-item__content:focus-visible,
.webux-headerbar .webux-headernav .wp-block-navigation__responsive-container.is-menu-open .webux-nav-cta .wp-block-navigation-item__content:focus-visible {
/* Outside the pill, not inset like the plain rows: an inset ring on a filled
button disappears into the fill. */
outline: 2px solid var(--wp--preset--color--contrast, #1a1a1a);
outline-offset: 2px;
}
/* Overlay menu in palette colours instead of hard-coded brand tones. The
shared site.css styles the same elements at specificity 0,4,0 and is enqueued
after this file, hence the extra `.webux-headernav` step (0,5,0). */
.webux-headerbar .webux-headernav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
color: var(--wp--preset--color--contrast, #1a1a1a);
}
.webux-headerbar .webux-headernav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
color: var(--wp--preset--color--primary-dark, #6f665e);
}
.webux-headerbar .webux-headernav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
outline: 2px solid var(--wp--preset--color--primary-dark, #6f665e);
outline-offset: -2px;
}
.webux-headerbar .webux-headernav .wp-block-navigation__responsive-container-open,
.webux-headerbar .webux-headernav .wp-block-navigation__responsive-container-close {
color: var(--wp--preset--color--contrast, #1a1a1a);
}
/* Both menu buttons are bare icons; without this they fall back to the UA ring
while every menu row has a designed one. */
.webux-headerbar .wp-block-navigation__responsive-container-open:focus-visible,
.webux-headerbar .wp-block-navigation__responsive-container-close:focus-visible {
outline: 2px solid var(--wp--preset--color--primary-dark, #6f665e);
outline-offset: 2px;
border-radius: 6px;
}
/* ---------------------------------------------------------------------------
Submenus
---------------------------------------------------------------------------
Core renders a submenu as a 200px dropdown card that is positioned against
the parent item. Inside the overlay menu that card stays 200px wide and, if
the navigation is right-justified on desktop, is pushed to the RIGHT edge -
the child entry then floats on its own, visually unrelated to its parent, at
a different row height and with a fraction of the tap width. Core also hides
the disclosure toggle in the overlay, so the group is permanently expanded:
the hierarchy has to be carried by indentation, which is the pattern used
here (a chevron that cannot be tapped would be worse than none).
All of this is scoped to `.webux-headerbar`, so a header that does not opt in
keeps core's rendering. The shared site.css styles the same rows at 0,4,0 and
loads after this file, hence the extra class steps.
--------------------------------------------------------------------------- */
.webux-headerbar .webux-headernav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
position: static;
width: 100%;
min-width: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
opacity: 1;
visibility: visible;
}
/* display: the parent item inherits `align-items: flex-end` from the desktop
justification, which is what pinned the card to the right edge.
border: the separator sits on the wrapping , so the group ended up with
no rule under its own label and two rules of different width under the child.
The child's own border closes the group; the parent's is dropped. */
.webux-headerbar .webux-headernav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
display: block;
border-bottom: 0;
}
/* Child rows read as rows, not as a leftover dropdown: full width, same rhythm
as the top level, one indent step deep, one size quieter. The indent and the
size carry the hierarchy - the ink stays the same as the parent rows, because
the muted palette step does not reach AA on the white overlay. */
.webux-headerbar .webux-headernav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
display: block;
width: 100%;
padding: 15px 0 15px 20px;
font-size: 16px;
}
/* Desktop-Leiste: Ausrichtung der Aufklappkarte.
Die Navigation ist rechtsbuendig (`items-justified-right`), und Core haengt
das Untermenue deshalb mit `right: 0` an die RECHTE Kante des Elternpunkts.
Die Karte ist im geoeffneten Zustand mindestens 200px breit, der Elternpunkt
aber deutlich schmaler - sie ragt entsprechend weit nach links heraus und
steht scheinbar unter dem Nachbarpunkt statt unter ihrem eigenen. Hier wird
sie stattdessen links am Elternpunkt ausgerichtet; `-1px` gleicht den
1px-Rahmen der Karte aus, damit ihre Innenkante genau auf der Kante des
Labels sitzt (derselbe Wert, den Core fuer linksbuendige Navigationen setzt).
Der letzte Punkt bleibt ausgenommen: dort liefe die 200px-Karte ueber die
rechte Kante der Leiste hinaus, und Cores Rechtsausrichtung ist die richtige.
Das geoeffnete Overlay-Menue ist ebenfalls ausgenommen - es stellt das
Untermenue statisch und braucht gar keine Position. */
.webux-headerbar .webux-headernav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child:not(:last-child) > .wp-block-navigation__submenu-container {
left: -1px;
right: auto;
}
/* Aufklappkarte: modernere Form.
Core liefert eine eckige Box mit harter 1px-Kontur, ohne Polster und direkt
an der Leiste klebend. Hier: runde Ecken, weiche Schatten statt Kontur,
Polster um die Zeilen, eigener Radius und Hover-Fläche pro Zeile und etwas
Luft zwischen Leiste und Karte.
Die 10px Luft wären eine tote Zone: Core hält das Untermenue über
`.has-child:hover` offen, und beim Queren einer Lücke zeigt der Zeiger
kurzzeitig auf keines von beiden - das Menue klappte auf dem Weg nach unten
zu. Das ::before-Pseudoelement überbrückt den Abstand als unsichtbare
Fläche; weil es im Untermenue liegt, das im DOM ein Kind des ist,
zählt der Zeiger dort weiterhin als „über dem Elternpunkt“.
Alles wieder nur für die Desktop-Leiste - das offene Overlay-Menue stellt das
Untermenue statisch und braucht weder Karte noch Schatten. */
.webux-headerbar .webux-headernav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
top: calc(100% + 10px);
min-width: 224px;
padding: 8px;
border: 1px solid rgba(26, 26, 26, 0.06);
border-radius: 16px;
background: var(--wp--preset--color--base, #ffffff);
box-shadow: 0 18px 40px rgba(26, 26, 26, 0.12), 0 2px 8px rgba(26, 26, 26, 0.06);
}
.webux-headerbar .webux-headernav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: 10px;
}
/* Zeilen: eigenes Polster und eigener Radius, damit die Hover-Fläche als Pille
in der Karte sitzt statt bis an deren Kante zu laufen. */
.webux-headerbar .webux-headernav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
width: 100%;
padding: 11px 14px;
border-radius: 10px;
line-height: 1.3;
}
.webux-headerbar .webux-headernav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.webux-headerbar .webux-headernav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible {
background: var(--wp--preset--color--surface, #faf8f2);
background: color-mix(in srgb, var(--wp--preset--color--primary, #8b8178) 12%, transparent);
color: var(--wp--preset--color--primary-dark, #6f665e);
}
/* The submenu toggle is a bare 9.6px chevron button. On a touch device - where
core's hover handler returns early for `pointerType: touch` - it is the ONLY
way to reach a child entry, and it fails WCAG 2.5.8 by a wide margin. Scoped
to coarse pointers so a mouse-driven desktop bar keeps its exact spacing; a
mouse reaches the submenu by hover anyway. Inside the overlay the toggle is
hidden by core and the group is permanently expanded, so this affects the
inline bar only. */
@media (pointer: coarse) {
.webux-headerbar .webux-headernav .wp-block-navigation-submenu__toggle {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: 0;
}
}
/* ---------------------------------------------------------------------------
Overlay CTA, darker step (opt-in)
---------------------------------------------------------------------------
Add `webux-nav-cta--dark` next to `webux-nav-cta`. White on a light brand
colour is a contrast failure for 16px text (Liventra sage #8A9A7B carries
white at 3.00:1, AA needs 4.5:1); on the dark step it passes (#6D7A61 =
4.56:1). Without the class the pill stays exactly as it is today.
--------------------------------------------------------------------------- */
.webux-headerbar .wp-block-navigation__responsive-container.is-menu-open .webux-nav-cta--dark .wp-block-navigation-item__content,
.webux-headerbar .webux-headernav .wp-block-navigation__responsive-container.is-menu-open .webux-nav-cta--dark .wp-block-navigation-item__content {
background: var(--wp--preset--color--primary-dark, #6f665e);
}
.webux-headerbar .wp-block-navigation__responsive-container.is-menu-open .webux-nav-cta--dark .wp-block-navigation-item__content:hover,
.webux-headerbar .webux-headernav .wp-block-navigation__responsive-container.is-menu-open .webux-nav-cta--dark .wp-block-navigation-item__content:hover {
background: color-mix(in srgb, var(--wp--preset--color--primary-dark, #6f665e) 88%, #000);
}