/*
Theme Name:        Jundo Block Theme
Theme URI:         https://sdash.de
Author:            SDASH – Karsten
Author URI:        https://sdash.de
Description:       Individuelles WordPress-Block-Theme (Full Site Editing) für Dachdecker Jürgens und Ottenjann. Ruhig, aufgeräumt, diszipliniert – gebaut mit theme.json, nativen Block-Templates und Block Patterns, ohne Page-Builder.
Requires at least:  6.4
Tested up to:       6.6
Requires PHP:       7.4
Version:            0.3.8
License:            GNU General Public License v2 or later
License URI:        http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:        jundo-theme
Tags:               full-site-editing, block-patterns, custom-colors, custom-logo, threaded-comments, translation-ready

Alle Design-Tokens (Farben, Typografie, Spacing, Layout) leben in theme.json und
werden über den nativen Site Editor (Global Styles) verwaltet – kein Customizer.
Diese Datei enthält nur den Theme-Header (WordPress-Pflicht) sowie kleine globale
Ergänzungen, die theme.json nicht abbilden kann (Skip-Link, Sticky-Header, Reveal-Animation).
*/

/* =============================================================
   Site-Title/-Tagline im Header ausblenden, sobald ein echtes Logo
   gesetzt ist (WordPress markiert das automatisch mit body.wp-custom-logo).
   Das Logo enthält den Firmennamen bereits als Bild — ein Text-Titel
   daneben wäre redundant (auch für Screenreader, da der Alt-Text des
   Logos die gleiche Information liefert).
   ============================================================= */
body.wp-custom-logo .jundo-masthead .wp-block-site-title,
body.wp-custom-logo .jundo-masthead .wp-block-site-tagline {
	display: none;
}

/* =============================================================
   Logo-Padding im Header — das site-logo-Bild hat, anders als Site-
   Title/-Tagline daneben, keine Zeilenhöhe, die von sich aus Luft nach
   oben/unten schafft, und wirkt dadurch im fixed Header knapp/abgeschnitten.
   ============================================================= */
.jundo-masthead .wp-block-site-logo {
	padding-top: 10px;
	padding-bottom: 10px;
}

/* =============================================================
   Vollbild-Hero (jundo/hero-business Pattern) — füllt die gesamte
   Bildschirmhöhe, Inhalt wird vertikal zentriert. dvh mit vh-Fallback
   gegen das "springende" 100vh-Verhalten mobiler Browser (Adressleiste).
   ============================================================= */
.jundo-hero-fullscreen {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
	min-height: 100dvh;
	box-sizing: border-box;
}

/* =============================================================
   overflow-x:clip auf dem body — verhindert horizontales Scrollen durch
   knapp überstehende alignfull-Abschnitte, ohne body zum Scroll-Container
   zu machen (im Unterschied zu overflow:hidden).
   ============================================================= */
body {
	overflow-x: clip;
	padding-top: var(--jundo-masthead-height, 88px);
}

/* =============================================================
   Globaler Fokus-Ring (Barrierefreiheit) — einheitlich für Links,
   Buttons, Navigation. Gleiche Optik wie der bestehende Fokus-Ring
   im Kontaktformular (css/footer-contact.css). Nur :focus-visible,
   damit kein Ring bei Maus-Klick erscheint, nur bei Tastaturfokus.
   ============================================================= */
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-accent);
	outline-offset: 2px;
}

/* =============================================================
   Skip-Link (Barrierefreiheit) — unsichtbar bis Tastaturfokus
   ============================================================= */
.skip-link {
	position: absolute;
	top: -100px;
	left: 8px;
	z-index: 100000;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--white);
	padding: 12px 20px;
	border-radius: 8px;
	transition: top 0.2s ease;
}
.skip-link:focus {
	top: 8px;
}

/* =============================================================
   Fixed Header + Scroll-Elevation (main.js togglet .is-scrolled)

   position:fixed statt sticky: in der verschachtelten FSE-Struktur
   (wp-site-blocks > header.wp-block-template-part > .jundo-masthead)
   griff position:sticky in Firefox nicht zuverlässig – fixed ist hier
   robuster. Der Platzhalter (padding-top auf body, siehe oben) hält
   den nachfolgenden Content frei; main.js misst die tatsächliche
   Masthead-Höhe per ResizeObserver und schreibt sie in
   --jundo-masthead-height (der 88px-Wert oben ist nur der No-JS-/
   Erstladung-Fallback).
   ============================================================= */
.jundo-masthead {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 90;
	transition: box-shadow 0.2s ease;
}
.jundo-masthead.is-scrolled {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Ungescrollt: Navy wie der Footer (Marke wirkt sofort geschlossen). Ab
   Scroll-Start wechselt der Header auf Weiß — WordPress' Farb-Utility-Klasse
   (.has-contrast-background-color) kommt mit !important, braucht also höhere
   Spezifität + eigenes !important, um überschrieben zu werden. */
.jundo-masthead.is-scrolled.has-contrast-background-color {
	background-color: var(--wp--preset--color--background) !important;
}

/* Nav-Text auf dem ungescrollten Navy-Header: Weiß statt der globalen
   Link-Farbe (Marken-Blau), die auf Navy kaum Kontrast hätte. Hover/Focus
   nutzt Rot-Hell (--primary-accent) — laut DESIGN.md die vorgesehene
   Textfarbe auf dunklem Grund. Ab .is-scrolled greifen wieder die normalen
   globalen Link-Farben (Blau/Navy-Hover) auf Weiß.
   Das Untermenü-Pfeil-Icon (<button class="...submenu__toggle">, z. B. bei
   "Unternehmen") ist bewusst mit aufgeführt: als <button> greift die
   globale Link-Farbe nicht, es bliebe sonst beim Standard-Fließtext-Grau
   (#333) — auf Navy praktisch unsichtbar. */
.jundo-masthead:not(.is-scrolled) .wp-block-navigation a,
.jundo-masthead:not(.is-scrolled) .wp-block-navigation .wp-block-navigation-submenu__toggle {
	color: var(--wp--preset--color--white);
}
.jundo-masthead:not(.is-scrolled) .wp-block-navigation a:hover,
.jundo-masthead:not(.is-scrolled) .wp-block-navigation a:focus-visible,
.jundo-masthead:not(.is-scrolled) .wp-block-navigation .wp-block-navigation-submenu__toggle:hover,
.jundo-masthead:not(.is-scrolled) .wp-block-navigation .wp-block-navigation-submenu__toggle:focus-visible {
	color: var(--wp--preset--color--primary-accent);
}

/* Mobiles Hamburger-Overlay: komplett in der dunklen Marken-/Kartenfarbe
   statt weiß, unabhängig vom Scroll-Zustand des Headers (daher keine
   .is-scrolled-Unterscheidung mehr nötig wie zuvor). WP-Core setzt den
   Hintergrund selbst mit fixer #fff-Farbe, sobald der Navigation-Block
   keine eigene Hintergrundfarbe hat (".has-background") — braucht daher
   !important, um zuverlässig zu gewinnen (gleiches Muster wie bei
   .has-contrast-background-color oben). */
.jundo-masthead .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--contrast) !important;
}

/* Linksbündig statt der globalen Rechts-Ausrichtung: WP-Core dupliziert die
   Klasse "items-justified-right" (vom Navigation-Block-Attribut
   "justifyContent: right", eigentlich für die Desktop-Zeile gedacht) auf
   mehrere verschachtelte Elemente im Overlay (u. a. das innere <ul>), die
   damit jeweils ihre eigene align-items-Deklaration tragen statt sie nur zu
   erben — eine einzelne CSS-Variable auf einer Elternebene neu zu setzen
   reicht deshalb nicht. !important erzwingt die Ausrichtung überall
   zuverlässig, nur im geöffneten Overlay; die Desktop-Zeile bleibt über
   .items-justified-right unverändert rechtsbündig neben dem Logo. */
.jundo-masthead .wp-block-navigation__responsive-container.is-menu-open,
.jundo-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.jundo-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.jundo-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: flex-start !important;
}
.jundo-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.jundo-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	color: var(--wp--preset--color--white);
}
.jundo-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.jundo-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible,
.jundo-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle:hover,
.jundo-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle:focus-visible {
	color: var(--wp--preset--color--primary-accent);
}

/* Ober-Menüpunkte mit Untermenü ("Leistungen", "Unternehmen") im Overlay
   klar als solche erkennbar machen: WP-Core blendet das Pfeil-Icon im
   mobilen Menü standardmäßig aus, weil Untermenüs dort ohnehin immer
   aufgeklappt sind (nicht per Klick um-/zugeklappt werden) — hier bewusst
   wieder eingeblendet, rein als visueller Hinweis "hier folgt eine
   Unterliste". Label + Icon sollen nebeneinander stehen, die Unterliste
   aber weiterhin darunter (nicht daneben) — deshalb nicht einfach auf
   flex-direction:row umgestellt (das brächte auch das lange
   Untermenü-<ul> mit in dieselbe Zeile), sondern per flex-wrap +
   flex-basis:100% auf dem <ul> gezielt in eine neue Zeile gezwungen. */
.jundo-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
}
.jundo-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > .wp-block-navigation__submenu-container {
	flex-basis: 100%;
}
.jundo-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
	display: inline-flex !important;
	width: 0.7em;
	height: 0.7em;
	margin-left: 8px;
}
/* Alle Ober-Menüpunkte fett (nicht nur die mit Untermenü) — sie sollen
   sich als oberste Ebene klar von den eingerückten Unterpunkten absetzen.
   Über ".wp-block-navigation__container >" auf die oberste Ebene begrenzt:
   sowohl Ober- als auch Unterpunkte tragen dieselbe Klasse
   "wp-block-navigation-item", unterscheiden sich aber darin, welches <ul>
   sie direkt umschließt (oberste Liste vs. verschachteltes
   .submenu-container) — ohne diese Einschränkung würden auch
   Team/News/Karriere und die einzelnen Leistungen fett. */
.jundo-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-weight: 700;
}

/* Untermenüs im mobilen Overlay bekommen bewusst KEINE eigene Karte (anders
   als das Desktop-Hover-Dropdown, siehe "Mega-Menü-Karte" unten) — nur ein
   dezenter linker Einzug, damit sie sich als Unterpunkte lesen lassen,
   sonst optisch wie die Top-Level-Einträge. */
.jundo-masthead.jundo-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
	background-color: transparent !important;
	border: none;
	border-radius: 0;
	padding: 0 0 0 var(--wp--preset--spacing--medium);
	min-width: 0;
	box-shadow: none;
}
.jundo-masthead.jundo-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-bottom: none;
}
.jundo-masthead.jundo-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: var(--wp--preset--spacing--x-small) 0;
	border-radius: 0;
}
.jundo-masthead.jundo-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.jundo-masthead.jundo-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background-color: transparent;
	color: var(--wp--preset--color--primary-accent);
}
.jundo-masthead.jundo-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container .wp-block-navigation-item__description {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-text);
}
.jundo-masthead.jundo-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
	display: none;
}

/* =============================================================
   Mega-Menü-Karte für Untermenüs (z. B. "Unternehmen" > Team/News/
   Karriere) — dunkle, dezent abgerundete Karte mit Icon-Chip, Titel +
   Kurzbeschreibung je Eintrag, Trennlinien dazwischen. Bewusst kein
   Glass-/Blur-Effekt und kein Pill-Trigger-Button (siehe CLAUDE.md:
   "keine verspielten Pill-Formen") — nur das aufklappende Panel selbst
   ist gestaltet, der Trigger bleibt normaler Text + Chevron. Gilt
   unabhängig vom Scroll-Zustand des Headers (immer dunkel), damit die
   Karte sich bewusst vom übrigen (hellen) Seiteninhalt abhebt.
   ============================================================= */
.jundo-masthead.jundo-masthead .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
	/* !important nötig: WP-Core setzt background-color auf dem mobilen
	   Overlay (.responsive-container.is-menu-open ... .submenu-container)
	   selbst mit !important auf transparent, um verschachtelte Untermenüs
	   dort optisch "flach" zu halten — exakt das gleiche Muster wie bei
	   .has-contrast-background-color oben. */
	background-color: var(--wp--preset--color--contrast) !important;
	border: none;
	border-radius: 12px;
	padding: 8px;
	/* Kein margin-top: der Menüpunkt öffnet/schließt per mouseenter/
	   mouseleave auf dem <li> (siehe view.js von core/navigation,
	   "open-on-hover-click"). Jeder optische Abstand hier reißt eine
	   Lücke, in der die Maus das <li> verlässt und das Menü sich
	   schließt, bevor man einen Unterpunkt erreicht. */
	min-width: 300px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}
.jundo-masthead.jundo-masthead .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.jundo-masthead.jundo-masthead .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container .wp-block-navigation-item:last-child {
	border-bottom: none;
}
.jundo-masthead.jundo-masthead .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: 14px;
	row-gap: 2px;
	padding: 12px 10px;
	border-radius: 8px;
}
.jundo-masthead.jundo-masthead .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.jundo-masthead.jundo-masthead .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background-color: rgba(255, 255, 255, 0.06);
	text-decoration: none;
}
.jundo-masthead.jundo-masthead .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container .wp-block-navigation-item__label {
	grid-column: 2;
	grid-row: 1;
	font-weight: 700;
	color: var(--wp--preset--color--white);
}
.jundo-masthead.jundo-masthead .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover .wp-block-navigation-item__label,
.jundo-masthead.jundo-masthead .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible .wp-block-navigation-item__label {
	color: var(--wp--preset--color--primary-accent);
}
.jundo-masthead.jundo-masthead .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container .wp-block-navigation-item__description {
	display: block;
	grid-column: 2;
	grid-row: 2;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-text);
}
.jundo-masthead.jundo-masthead .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
	content: "";
	grid-column: 1;
	grid-row: 1 / 3;
	align-self: center;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background-color: rgba(255, 255, 255, 0.08);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
}
/* Icon je Eintrag, über die feste Reihenfolge im "Unternehmen"-Untermenü
   adressiert (Team, News, Karriere) — core/navigation-link unterstützt
   kein eigenes Icon-Attribut, daher positionsbasiert per CSS. Skaliert auf
   die "jundo-nav-unternehmen"-Klasse dieses Submenu-Blocks, damit sie sich
   nicht mit anderen Dropdowns (z. B. "Leistungen") überschneiden, die
   ebenfalls die generische .wp-block-navigation__submenu-container-Hülle
   nutzen. */
.jundo-masthead.jundo-masthead .jundo-nav-unternehmen .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container > li:nth-child(1) .wp-block-navigation-item__content::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}
.jundo-masthead.jundo-masthead .jundo-nav-unternehmen .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container > li:nth-child(2) .wp-block-navigation-item__content::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2'/%3E%3Cpath d='M18 14h-8'/%3E%3Cpath d='M15 18h-5'/%3E%3Cpath d='M10 6h8v4h-8V6Z'/%3E%3C/svg%3E");
}
.jundo-masthead.jundo-masthead .jundo-nav-unternehmen .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container > li:nth-child(3) .wp-block-navigation-item__content::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='7' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
}

/* "Leistungen"-Dropdown: Einträge kommen dynamisch aus dem
   jundo_leistung-CPT (siehe inc/leistungen-nav.php) und ihre Anzahl/
   Reihenfolge kann sich jederzeit ändern — deshalb bewusst KEIN
   positionsbasiertes Icon wie bei "Unternehmen", sondern ein
   einheitliches Dach-Icon für jeden Eintrag. */
.jundo-masthead.jundo-masthead .jundo-nav-leistungen .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container > li .wp-block-navigation-item__content::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3C/svg%3E");
}

/* Eigentliche Ursache der weißen Lücke zwischen Header und Hero: WordPress
   behandelt Header-/Main-/Footer-Template-Parts als Flow-Layout-Kinder und
   hängt dem zweiten Kind (#primary) automatisch den globalen Block-Gap
   (theme.json spacing.blockGap, 1.5rem) als margin-block-start an — sichtbar
   als weißer Streifen, seit der Header nicht mehr weiß ist. */
#primary {
	margin-block-start: 0;
}

/* =============================================================
   Scroll-Reveal "Reveal the Work" (main.js fügt .jundo-reveal /
   .is-visible hinzu) — eine deckende Fläche in Marken-Navy liegt über
   dem Ziel-Element und wird beim Scroll-ins-Bild weggezogen, wie beim
   Abziehen einer Abdeckplane. Absichtlich Navy statt Rot als Deckfarbe:
   DESIGN.md reserviert Rot als Großflächenfarbe für die eine
   Hero-Info-Card, nicht für wiederkehrende Deko (siehe "Do's and Don'ts").
   Ohne JavaScript bleibt der Inhalt regulär sichtbar (progressive enhancement).
   ============================================================= */
.jundo-reveal {
	position: relative;
	overflow: hidden;
}
.jundo-reveal::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--contrast);
	transform: scaleX(1);
	transform-origin: right;
	transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1) var(--reveal-delay, 0ms);
	pointer-events: none;
	z-index: 5;
}
.jundo-reveal.is-visible::after {
	transform: scaleX(0);
}
@media (prefers-reduced-motion: reduce) {
	.jundo-reveal::after {
		transition: none;
		transform: scaleX(0);
	}
	.jundo-masthead {
		transition: none;
	}
}

/* =============================================================
   Section-Kicker + Gradient-Hook — wiederkehrendes Überschriften-
   Muster für Startseiten-Abschnitte: kleine rote Eyebrow-Zeile über
   der Headline, in der Headline selbst trägt die hintere Worthälfte
   einen Farbverlauf (.jundo-gradient-text).
   ============================================================= */
.jundo-section-kicker {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin-bottom: var(--wp--preset--spacing--x-small);
}

.jundo-gradient-text {
	background: linear-gradient(90deg, var(--wp--preset--color--primary-accent), var(--wp--preset--color--primary));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* =============================================================
   Breadcrumbs (inc/breadcrumbs.php, [jundo_breadcrumbs]) — schlichte
   Textnavigation im Content-Bereich, unterhalb des jeweiligen Heros.
   Aktuelle Seite (letztes Element) bewusst nicht verlinkt und gedimmt,
   da direkt darunter ohnehin die H1 folgt (keine Redundanz-Betonung).
   ============================================================= */
.jundo-breadcrumbs {
	margin-bottom: var(--wp--preset--spacing--medium);
	font-size: var(--wp--preset--font-size--small);
}
.jundo-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.jundo-breadcrumbs__item {
	color: var(--wp--preset--color--foreground-light);
}
.jundo-breadcrumbs__item:not(:first-child)::before {
	content: "›";
	display: inline-block;
	margin: 0 var(--wp--preset--spacing--x-small);
	color: var(--wp--preset--color--border);
}
.jundo-breadcrumbs__item a {
	color: var(--wp--preset--color--foreground-light);
	text-decoration: none;
}
.jundo-breadcrumbs__item a:hover,
.jundo-breadcrumbs__item a:focus-visible {
	color: var(--wp--preset--color--secondary);
	text-decoration: underline;
}
.jundo-breadcrumbs__item--current {
	font-weight: 600;
}