/*
Theme Name: REWE Group
Theme URI: https://www.rewe-group.com
Author: REWE Group
Author URI: https://www.rewe-group.com
Description: Block-Theme (Full Site Editing) für den Corporate-Auftritt der REWE Group. Farbwelt, Typografie, Formen und Layout-System nach dem REWE Group Brand Book. Für ein besseres Leben.
Version: 1.1.6
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rewe-group
Tags: full-site-editing, block-patterns, block-styles, one-column, custom-colors, custom-logo, editor-style
*/

/*
 * Hinweis: Der PHP-/CSS-/HTML-Code dieses Themes steht unter GPL v2+.
 * Die Schriften "REWE Group Headlines" und "REWE Group Copy" sowie die
 * REWE-Group-Wortmarke und die "Formen" sind proprietäre Markenbestandteile
 * der REWE Group, ausschließlich für deren Kommunikation lizenziert und
 * von der GPL ausgenommen.
 */

/* --------------------------------------------------------------------------
 * 1. Typografie-Feinschliff
 * ----------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	font-synthesis-weight: none;
}

/* Displaygrößen: Zeilenabstand 90–100 % lt. Brand Book (160/120/104). */
.has-headline-160-font-size,
.has-headline-120-font-size,
.has-headline-104-font-size {
	line-height: 0.95;
	letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
 * 2. Wortmarke (Site-Logo-Fallback) & Logo
 * ----------------------------------------------------------------------- */

.rewe-wordmark a {
	display: inline-block;
	color: inherit;
	line-height: 0;
}

.rewe-wordmark svg {
	display: block;
	width: auto;
	/* Mindesthöhe der Wortmarke: 16 px (Brand Book, Mindestgröße). */
	height: clamp(16px, 0.8vw + 12px, 26px);
}

.wp-block-site-logo img {
	min-height: 16px;
	height: auto;
}

/* Wortmarke im Footer erbt Weiß über currentColor. */

/* --------------------------------------------------------------------------
 * 3. Navigation
 * ----------------------------------------------------------------------- */

.wp-block-navigation a:hover,
.wp-block-navigation a:focus {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.wp-block-navigation .current-menu-item > a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* --------------------------------------------------------------------------
 * 4. Buttons
 * ----------------------------------------------------------------------- */

/* Outline-Variante: transparente Pille mit currentColor-Kontur. */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	background-color: transparent;
	color: currentColor;
	border: 2px solid currentColor;
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):focus {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
 * 5. Chips & Pfeil-Links (Presse-Karten, Themen-Tags)
 * ----------------------------------------------------------------------- */

.rewe-tag,
.rewe-tag a {
	color: inherit;
	text-decoration: none;
}

.rewe-tag {
	display: inline-block;
	border: 1.5px solid currentColor;
	border-radius: 999px;
	padding: 2px 14px;
	font-weight: 700;
	line-height: 1.4;
}

.rewe-arrow-link a,
a.rewe-arrow-link {
	font-weight: 700;
	text-decoration: none;
}

.rewe-arrow-link a:hover,
.rewe-arrow-link a:focus,
a.rewe-arrow-link:hover,
a.rewe-arrow-link:focus {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Kategorie-Chips (Beitrags-Terms als Pillen, z. B. „Pressemitteilung“). */
.rewe-tags a {
	display: inline-block;
	border: 1.5px solid currentColor;
	border-radius: 999px;
	padding: 1px 14px;
	font-weight: 700;
	text-decoration: none;
}

.rewe-tags a:hover,
.rewe-tags a:focus {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rewe-tags .wp-block-post-terms__separator {
	display: inline-block;
	width: 0.25em;
	visibility: hidden;
}

/* Beitragstitel in Karten: Link ohne Unterstreichung, Hover unterstrichen. */
.wp-block-post-title a {
	text-decoration: none;
}

.wp-block-post-title a:hover,
.wp-block-post-title a:focus {
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
 * 6. Formen (organische Markenformen als Deko-Elemente)
 *
 * Technik: leere Gruppen-Blöcke mit CSS-Maske. Die Farbe kommt aus der
 * Hintergrundfarbe des Blocks (Palette) oder – ohne gesetzte Farbe – aus
 * der Sektionsvariablen --rewe-form (siehe Abschnitt 7).
 * ----------------------------------------------------------------------- */

[class*="is-style-section-"] {
	position: relative;
	overflow: clip;
	isolation: isolate;
}

.rewe-form {
	position: absolute;
	z-index: -1;
	pointer-events: none;
	width: clamp(10rem, 32vmin, 26rem);
	aspect-ratio: 1;
	background-color: var(--rewe-form, currentColor);
	-webkit-mask: var(--rewe-form-mask) center / contain no-repeat;
	mask: var(--rewe-form-mask) center / contain no-repeat;
}

.rewe-form--lg {
	width: clamp(18rem, 56vmin, 44rem);
}

.rewe-form--01 { --rewe-form-mask: url(assets/formen/form-01.svg); }
.rewe-form--02 { --rewe-form-mask: url(assets/formen/form-02.svg); }
.rewe-form--03 { --rewe-form-mask: url(assets/formen/form-03.svg); }
.rewe-form--04 { --rewe-form-mask: url(assets/formen/form-04.svg); }
.rewe-form--05 { --rewe-form-mask: url(assets/formen/form-05.svg); }
.rewe-form--06 { --rewe-form-mask: url(assets/formen/form-06.svg); }

.rewe-form--pos-tl { top: -6vmin; left: -4vmin; }
.rewe-form--pos-tr { top: -6vmin; right: -4vmin; }
.rewe-form--pos-br { bottom: -8vmin; right: -4vmin; }
.rewe-form--pos-bl { bottom: -8vmin; left: -4vmin; }

/* Inline-SVG-Variante (Custom-HTML-Block, siehe README): */
.rewe-form-svg {
	display: block;
}

.rewe-form-svg path {
	fill: var(--rewe-form, currentColor);
}

/* --------------------------------------------------------------------------
 * 7. Formen-Farbzuordnung je Sektionsstil
 *
 * Erlaubte Ton-Paarungen lt. Brand Book (Formen / Farbkombinationen):
 * Weiß auf 02-heller · 02-heller auf 01-heller · 01-heller auf Basis ·
 * Basis auf 01-dunkler · 01-dunkler auf 02-dunkler.
 * Gelb: 02-dunkler auf 01-dunkler · 01-dunkler auf 02-dunkler.
 * ----------------------------------------------------------------------- */

.is-style-section-gruen-02-heller { --rewe-form: var(--wp--preset--color--white); }
.is-style-section-gruen-01-heller { --rewe-form: var(--wp--preset--color--gruen-02-heller); }
.is-style-section-gruen-basis { --rewe-form: var(--wp--preset--color--gruen-01-heller); }
.is-style-section-gruen-01-dunkler { --rewe-form: var(--wp--preset--color--gruen-basis); }
.is-style-section-gruen-02-dunkler { --rewe-form: var(--wp--preset--color--gruen-01-dunkler); }

.is-style-section-rot-02-heller { --rewe-form: var(--wp--preset--color--white); }
.is-style-section-rot-01-heller { --rewe-form: var(--wp--preset--color--rot-02-heller); }
.is-style-section-rot-basis { --rewe-form: var(--wp--preset--color--rot-01-heller); }
.is-style-section-rot-01-dunkler { --rewe-form: var(--wp--preset--color--rot-basis); }
.is-style-section-rot-02-dunkler { --rewe-form: var(--wp--preset--color--rot-01-dunkler); }

.is-style-section-orange-02-heller { --rewe-form: var(--wp--preset--color--white); }
.is-style-section-orange-01-heller { --rewe-form: var(--wp--preset--color--orange-02-heller); }
.is-style-section-orange-basis { --rewe-form: var(--wp--preset--color--orange-01-heller); }
.is-style-section-orange-01-dunkler { --rewe-form: var(--wp--preset--color--orange-basis); }
.is-style-section-orange-02-dunkler { --rewe-form: var(--wp--preset--color--orange-01-dunkler); }

.is-style-section-blau-02-heller { --rewe-form: var(--wp--preset--color--white); }
.is-style-section-blau-01-heller { --rewe-form: var(--wp--preset--color--blau-02-heller); }
.is-style-section-blau-basis { --rewe-form: var(--wp--preset--color--blau-01-heller); }
.is-style-section-blau-01-dunkler { --rewe-form: var(--wp--preset--color--blau-basis); }
.is-style-section-blau-02-dunkler { --rewe-form: var(--wp--preset--color--blau-01-dunkler); }

.is-style-section-violett-02-heller { --rewe-form: var(--wp--preset--color--white); }
.is-style-section-violett-01-heller { --rewe-form: var(--wp--preset--color--violett-02-heller); }
.is-style-section-violett-basis { --rewe-form: var(--wp--preset--color--violett-01-heller); }
.is-style-section-violett-01-dunkler { --rewe-form: var(--wp--preset--color--violett-basis); }
.is-style-section-violett-02-dunkler { --rewe-form: var(--wp--preset--color--violett-01-dunkler); }

.is-style-section-gelb-02-heller { --rewe-form: var(--wp--preset--color--white); }
.is-style-section-gelb-01-heller { --rewe-form: var(--wp--preset--color--gelb-02-heller); }
.is-style-section-gelb-basis { --rewe-form: var(--wp--preset--color--gelb-01-heller); }
.is-style-section-gelb-01-dunkler { --rewe-form: var(--wp--preset--color--gelb-02-dunkler); }
.is-style-section-gelb-02-dunkler { --rewe-form: var(--wp--preset--color--gelb-01-dunkler); }

/* --------------------------------------------------------------------------
 * 7a. Hero – linksbündig am Header verankert (Marker-Klasse .rewe-hero)
 *
 * Die Hero-Patterns (patterns/hero-*.php) sind vollflächige Gruppen mit
 * „constrained“-Layout. WordPress zentriert darin die .alignwide-Kinder
 * (H1, Text, Button) und begrenzt sie auf wideSize (90rem). Auf Monitoren
 * breiter als ~1440px wandert der Text dadurch mit wachsendem Viewport nach
 * rechts, während die Navigationslinks im Header (parts/header.html,
 * .rewe-site-header__nav-row) an einer festen x-Position bleiben.
 *
 * Ziel: Der Hero-Text beginnt auf derselben x-Position wie der erste
 * Nav-Link und bleibt dort – unabhängig von der Viewport-Breite.
 *
 * Rechnung: Nav-Zeile padding-left = --wp--preset--spacing--40
 * (clamp(28px, 4vmin, 40px)) + Innenabstand des Links (12px, siehe
 * Abschnitt „Server-rendered nav menus“). Über max() wird der Abstand nie
 * kleiner als das Root-Padding.
 *
 * Mobile (≤ 1024px, Desktop-Nav ausgeblendet, s. „Mobile header“): keine
 * Änderung – dort greift weiterhin das Root-Padding, wie bisher.
 *
 * Das Deko-Element .rewe-form ist absolut positioniert (--pos-br usw.) und
 * kein .alignwide-Kind – es bleibt unberührt am Sektionsrand.
 *
 * Gilt auch im Block-Editor (style.css wird via add_editor_style geladen).
 *
 * Zwei Selektor-Varianten mit identischen Regeln (Selektorliste):
 * 1. .rewe-hero – expliziter Marker, den neu eingefügte Hero-Patterns
 *    automatisch mitbringen.
 * 2. :has(> .rewe-form):has(> h1) – Fallback für Heros, die bereits vor
 *    Einführung der Klasse in der Datenbank gespeichert wurden (z. B. die
 *    synchronisierte Kopie auf der Startseite). Nur das Hero-Markup ist eine
 *    vollflächige constrained-Gruppe mit Form-Deko UND h1 als direkte Kinder
 *    (CTA-Banner hat keine h1; templates/404.html ist hero-artig aufgebaut
 *    und darf mit ausgerichtet werden). Browser ohne :has()-Unterstützung
 *    ignorieren diesen Selektor und behalten das bisherige zentrierte Layout.
 *
 * Spezifität: Beide Varianten liegen über WP-Core (.has-global-padding
 * bzw. .wp-container-core-group-is-layout-* > .alignwide); die Klassen-
 * Variante mit (0,3,0) bzw. (0,4,0) + !important gewinnt eigenständig.
 * ----------------------------------------------------------------------- */

@media (min-width: 1025px) {
	.wp-block-group.alignfull.rewe-hero,
	.wp-block-group.alignfull.is-layout-constrained:has(> .rewe-form):has(> h1) {
		--rewe-hero-inline-padding: max(
			calc(var(--wp--preset--spacing--40) + 12px),
			var(--wp--style--root--padding-left, var(--wp--custom--root-padding, 0px))
		);
		padding-inline: var(--rewe-hero-inline-padding);
	}
}

/* WP setzt im „constrained“-Layout margin-left/right: auto !important –
   daher ebenfalls !important. Rechts bleibt auto, die Breite bleibt auf
   wideSize begrenzt, damit die Zeilenlänge nicht ausufert. Unterhalb von
   wideSize füllt .alignwide ohnehin die volle Breite – kein Unterschied. */
.wp-block-group.rewe-hero.is-layout-constrained > .alignwide,
.wp-block-group.alignfull.is-layout-constrained:has(> .rewe-form):has(> h1) > .alignwide {
	margin-left: 0 !important;
	margin-right: auto !important;
	max-width: var(--wp--style--global--wide-size, 90rem);
}

/* --------------------------------------------------------------------------
 * 8. Fokus-Stile (Barrierefreiheit)
 * ----------------------------------------------------------------------- */

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.wp-block-button__link:focus-visible {
	outline-offset: 4px;
}

/* --------------------------------------------------------------------------
 * 9. Footer
 * ----------------------------------------------------------------------- */

/* Top-anchor target: visually hidden but present in document flow so the
 * browser scrolls to it without shifting content. */
#top {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	overflow: hidden;
	pointer-events: none;
}

.rewe-footer {
	--footer-background: #ffffff;
	--footer-foreground: #111111;
	--footer-divider: rgba(17, 17, 17, 0.25);
	--footer-focus: #111111;
	--footer-cta-background: #222222;
	--footer-cta-foreground: #ffffff;
	--footer-inner-max-width: var(--wp--style--global--wide-size, 1400px);
	--footer-inner-gutter: clamp(1rem, 3vw, 2.5rem);
	background: var(--footer-background);
	color: var(--footer-foreground);
	width: 100%;
	margin-inline: 0;
}

.riag-footer-variant--blue-dark .rewe-footer {
	--footer-background: #006c87;
	--footer-foreground: #ffffff;
	--footer-divider: rgba(255, 255, 255, 0.25);
	--footer-focus: #ffffff;
	--footer-cta-background: #86f6b8;
	--footer-cta-foreground: #222222;
}

.riag-footer-variant--orange-dark .rewe-footer {
	--footer-background: #d83f27;
	--footer-foreground: #ffffff;
	--footer-divider: rgba(255, 255, 255, 0.25);
	--footer-focus: #ffffff;
	--footer-cta-background: #86f6b8;
	--footer-cta-foreground: #222222;
}

.riag-footer-variant--red-dark .rewe-footer {
	--footer-background: #cc293c;
	--footer-foreground: #ffffff;
	--footer-divider: rgba(255, 255, 255, 0.25);
	--footer-focus: #ffffff;
	--footer-cta-background: #86f6b8;
	--footer-cta-foreground: #222222;
}

.riag-footer-variant--green-dark .rewe-footer {
	--footer-background: #01605b;
	--footer-foreground: #ffffff;
	--footer-divider: rgba(255, 255, 255, 0.25);
	--footer-focus: #ffffff;
	--footer-cta-background: #86f6b8;
	--footer-cta-foreground: #222222;
}

.riag-footer-variant--neutral-white .rewe-footer {
	--footer-background: #ffffff;
	--footer-foreground: #111111;
	--footer-divider: rgba(17, 17, 17, 0.25);
	--footer-focus: #111111;
	--footer-cta-background: #222222;
	--footer-cta-foreground: #ffffff;
}

.rewe-footer__upper {
	background: #ffffff;
	color: #111111;
	width: 100%;
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
	padding-bottom: clamp(1.75rem, 3.2vw, 3rem);
}

.rewe-footer__upper-inner,
.rewe-footer__lower-inner {
	box-sizing: border-box;
	width: min(calc(100% - (2 * var(--footer-inner-gutter))), var(--footer-inner-max-width));
	max-width: var(--footer-inner-max-width);
	margin-inline: auto;
}

.rewe-footer__divider {
	border: 0;
	border-top: 1px solid rgba(17, 17, 17, 0.2);
	margin: 0 0 clamp(1.25rem, 3vw, 2rem);
}

.rewe-footer__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: clamp(1.25rem, 3vw, 2.25rem);
}

.rewe-footer__column-title {
	margin: 0 0 0.75rem;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.3;
}

.rewe-footer__menu {
	margin: 0;
}

.rewe-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.45rem;
}

.rewe-footer__links a {
	color: #111111;
	font-size: 0.95rem;
	line-height: 1.35;
	text-decoration: none;
}

.rewe-footer__links a:hover,
.rewe-footer__links a:focus {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.rewe-footer__column--certificates {
	display: grid;
	align-content: start;
}

.rewe-footer__lower {
	background: var(--footer-background);
	color: var(--footer-foreground);
	width: 100%;
	padding-top: clamp(2rem, 4vw, 3.5rem);
	padding-bottom: clamp(1.5rem, 3vw, 2.75rem);
}

.rewe-footer__brand-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.rewe-footer__logo svg {
	display: block;
	width: auto;
	height: clamp(2.75rem, 5.5vw, 5rem);
	min-height: 16px;
	color: currentColor;
}

.rewe-footer__social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rewe-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--rewe-footer-social-icon-color, var(--footer-foreground));
}

.rewe-footer__social a:hover,
.rewe-footer__social a:focus {
	opacity: 0.8;
}

.rewe-footer__social svg {
	display: block;
	width: 24px;
	height: 24px;
}

.rewe-footer__certificates {
	margin: 0;
}

.rewe-footer__certificate-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 0.875rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rewe-footer__certificate-item {
	display: flex;
	align-items: center;
}

.rewe-footer__certificate-link,
.rewe-footer__certificate-item > img,
.rewe-footer__certificate-svg {
	display: inline-flex;
	max-width: 100%;
}

.rewe-footer__certificate-image {
	display: block;
	width: min(100%, 150px);
	max-width: 100%;
	height: clamp(2.75rem, 4vw, 3.75rem);
	object-fit: contain;
	object-position: left center;
}

.rewe-footer__certificate-svg {
	width: min(100%, 150px);
	height: clamp(2.75rem, 4vw, 3.75rem);
}

.rewe-footer__certificate-svg svg {
	display: block;
	width: 100%;
	height: 100%;
}

.rewe-footer__legal {
	margin-top: clamp(1rem, 2.5vw, 1.5rem);
}

.rewe-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rewe-footer__legal-links a {
	color: var(--footer-foreground);
	font-size: 0.875rem;
	line-height: 1.35;
	text-decoration: none;
}

.rewe-footer__legal-links a:hover,
.rewe-footer__legal-links a:focus {
	text-decoration: underline;
}

.rewe-footer__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: clamp(1.2rem, 2.8vw, 2rem);
}

.rewe-footer__copyright {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.35;
}

.rewe-footer__translation-notice {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.35;
	text-align: center;
}

.rewe-footer__back-to-top .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.6rem 1.25rem;
	border-radius: 999px;
	background-color: var(--footer-cta-background);
	color: var(--footer-cta-foreground);
	font-weight: 700;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.rewe-footer__back-to-top .wp-block-button__link:hover,
.rewe-footer__back-to-top .wp-block-button__link:focus {
	opacity: 0.85;
}

.rewe-footer :is(a, .wp-block-button__link):focus-visible {
	outline: 3px solid var(--footer-focus);
	outline-offset: 2px;
}

@media (max-width: 680px) {
	.rewe-footer__meta {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* --------------------------------------------------------------------------
 * 10. Site-Header (eine Fläche, Varianten via CSS-Variablen)
 * ----------------------------------------------------------------------- */

.rewe-site-header {
	--header-background: #ffffff;
	--header-foreground: #111111;
	--header-control-background: #f2f2f2;
	--header-control-background-hover: #e6e6e6;
	--header-divider: #111111;
	--header-focus: #111111;
	position: relative; /* needed for mobile panel absolute positioning */
	width: 100%;
	background: var(--header-background);
	color: var(--header-foreground);
}

.riag-header-variant--blue-dark .rewe-site-header {
	--header-background: #006c87;
	--header-foreground: #ffffff;
	--header-control-background: rgb(255 255 255 / 12%);
	--header-control-background-hover: rgb(255 255 255 / 20%);
	--header-divider: transparent;
	--header-focus: #ffffff;
}

.riag-header-variant--orange-dark .rewe-site-header {
	--header-background: #d83f27;
	--header-foreground: #ffffff;
	--header-control-background: rgb(255 255 255 / 12%);
	--header-control-background-hover: rgb(255 255 255 / 20%);
	--header-divider: transparent;
	--header-focus: #ffffff;
}

.riag-header-variant--red-dark .rewe-site-header {
	--header-background: #cc293c;
	--header-foreground: #ffffff;
	--header-control-background: rgb(255 255 255 / 12%);
	--header-control-background-hover: rgb(255 255 255 / 20%);
	--header-divider: transparent;
	--header-focus: #ffffff;
}

.riag-header-variant--green-dark .rewe-site-header {
	--header-background: #01605b;
	--header-foreground: #ffffff;
	--header-control-background: rgb(255 255 255 / 12%);
	--header-control-background-hover: rgb(255 255 255 / 20%);
	--header-divider: transparent;
	--header-focus: #ffffff;
}

.riag-header-variant--neutral-white .rewe-site-header {
	--header-background: #ffffff;
	--header-foreground: #111111;
	--header-control-background: #f2f2f2;
	--header-control-background-hover: #e6e6e6;
	--header-divider: #111111;
	--header-focus: #111111;
}

.rewe-site-header__brand-row,
.rewe-site-header__nav-row {
	background: var(--header-background);
	color: var(--header-foreground);
	box-sizing: border-box;
}

.rewe-site-header__nav-row {
	border-bottom: 1px solid var(--header-divider);
}

.rewe-site-header .wp-block-site-logo,
.rewe-site-header .wp-block-site-logo a,
.rewe-site-header .rewe-wordmark,
.rewe-site-header .rewe-wordmark a {
	color: var(--header-foreground);
}

/* Wortmarke im Header: feste Höhe 40px (Desktop) bzw. 22px (mobil, s. u.),
   Breite ergibt sich aus dem viewBox-Seitenverhältnis (600×80 → ≈300px). */
.rewe-site-header .rewe-wordmark svg,
.rewe-site-header .wp-block-site-logo svg,
.rewe-site-header .wp-block-site-logo img {
	display: block;
	height: 40px;
	max-height: none;
	width: auto;
	/* Fallback-Seitenverhältnis, falls ein SVG ohne natürliches Verhältnis geladen wird. */
	aspect-ratio: auto 600 / 80;
}

.rewe-site-header__logo {
	/* Nicht schrumpfen: Die Wortmarke behält ihre feste Höhe. */
	flex: 0 0 auto;
	max-width: none;
}

.rewe-site-header__utility {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
}

.rewe-site-header .utility-control .wp-block-search__button,
.rewe-site-header .rewe-header-language-switcher__toggle,
.rewe-mobile-nav-toggle {
	background: var(--header-control-background);
	color: var(--header-foreground);
	border: 0;
	border-radius: 4px;
	box-shadow: none;
	width: clamp(42px, 4vw, 50px);
	min-width: clamp(42px, 4vw, 50px);
	height: clamp(42px, 4vw, 50px);
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.125rem;
	line-height: 1;
	text-decoration: none;
	appearance: none;
	-webkit-appearance: none;
}

.rewe-site-header .utility-control .wp-block-search__button,
.rewe-site-header .rewe-header-language-switcher__toggle,
.rewe-mobile-nav-toggle {
	cursor: pointer;
}

.rewe-site-header .utility-control .wp-block-search__button:hover,
.rewe-site-header .utility-control .wp-block-search__button:active,
.rewe-site-header .rewe-header-language-switcher__toggle:hover,
.rewe-site-header .rewe-header-language-switcher__toggle[aria-expanded="true"],
.rewe-mobile-nav-toggle:hover,
.rewe-mobile-nav-toggle:active {
	background: var(--header-control-background-hover);
}

.rewe-site-header .wp-block-search__button svg {
	fill: currentColor;
}

/* Ausgeklapptes Suchfeld (Button-only-Modus): Abstand zur Lupe wie der
 * Utility-Gap. Gap nur im ausgeklappten Zustand, sonst würde er im
 * eingeklappten Zustand (Input 0px breit) als Leerraum sichtbar bleiben. */
.rewe-site-header .wp-block-search.wp-block-search__button-only:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
	gap: 12px;
}

.rewe-site-header .wp-block-search.wp-block-search__button-only .wp-block-search__button {
	margin: 0;
}

/* Suchfeld im Look der Header-Controls (Farben über Header-Variablen, damit
 * die dunklen Varianten lesbar bleiben). Core kollabiert das Feld über
 * .wp-block-search__searchfield-hidden auf width:0 !important – diese
 * Regel greift daher nur im ausgeklappten Zustand. */
.rewe-site-header .rewe-site-header__search {
	min-width: 0;
}

.rewe-site-header .rewe-site-header__search .wp-block-search__input {
	box-sizing: border-box;
	flex: 0 1 auto;
	width: min(clamp(180px, 22vw, 320px), 60vw);
	min-width: 0;
	height: clamp(42px, 4vw, 50px);
	margin: 0;
	padding: 0 14px;
	border: 0;
	border-radius: 4px;
	background: var(--header-control-background);
	color: var(--header-foreground);
	font: inherit;
	font-size: 1rem;
	line-height: 1;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
}

.rewe-site-header .rewe-site-header__search .wp-block-search__input::placeholder {
	color: var(--header-foreground);
	opacity: 0.6;
}

/* Natives Lösch-„X“ (WebKit/Blink) in der Header-Vordergrundfarbe zeichnen:
 * die Browser-Darstellung (dunkelblau/grau) hat auf dunklen Headern keinen
 * Kontrast. Icon per Mask, Farbe über background-color -> folgt automatisch
 * der Header-Variante (weiß auf dunkel, dunkel auf hell). Firefox rendert
 * keinen Cancel-Button, dort ändert sich nichts. */
.rewe-site-header .rewe-site-header__search .wp-block-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 0 0 0 6px;
	padding: 0;
	background-color: var(--header-foreground);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: 0.7;
	cursor: pointer;
}

.rewe-site-header .rewe-site-header__search .wp-block-search__input::-webkit-search-cancel-button:hover,
.rewe-site-header .rewe-site-header__search .wp-block-search__input:focus-visible::-webkit-search-cancel-button {
	opacity: 1;
}

.rewe-site-header .rewe-site-header__search .wp-block-search__input:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.rewe-site-header .rewe-header-language-switcher {
	display: block;
}

.rewe-site-header .rewe-header-language-switcher__toggle svg {
	display: block;
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.rewe-site-header .rewe-header-language-switcher--placeholder .rewe-header-language-switcher__toggle {
	cursor: default;
}

/* --------------------------------------------------------------------------
 * Header language modal (rewe-group/language-switcher block)
 * ----------------------------------------------------------------------- */

html.rewe-language-modal-open {
	overflow: hidden;
}

.rewe-header-language-modal {
	position: fixed;
	inset: 0;
	z-index: 2000;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 24px 16px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--offblack, #222222);
	font-family: var(--wp--preset--font-family--copy, sans-serif);
	text-align: left;
	overflow: auto;
}

.rewe-header-language-modal:not([open]) {
	display: none;
}

.rewe-header-language-modal[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Backdrop: native top-layer pseudo element. */
.rewe-header-language-modal::backdrop {
	background: rgb(0 0 0 / 55%);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

/* Fallback without <dialog> support: the element itself acts as backdrop. */
.rewe-header-language-modal--fallback:not([hidden]) {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgb(0 0 0 / 55%);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.rewe-header-language-modal--fallback[hidden] {
	display: none;
}

.rewe-header-language-modal__panel {
	box-sizing: border-box;
	width: 100%;
	max-width: 40rem;
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	overflow: auto;
	padding: clamp(24px, 4vw, 40px);
	border-radius: 0;
	background: var(--wp--preset--color--offwhite, #f2f2f2);
	color: var(--wp--preset--color--offblack, #222222);
	box-shadow: 0 24px 64px rgb(0 0 0 / 30%);
}

.rewe-header-language-modal__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: clamp(20px, 3vw, 32px);
}

.rewe-header-language-modal__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--headlines, var(--wp--preset--font-family--copy, sans-serif));
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 700;
	line-height: 1.2;
	color: inherit;
}

.rewe-header-language-modal__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -8px -8px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.rewe-header-language-modal__close svg {
	display: block;
	width: 24px;
	height: 24px;
}

.rewe-header-language-modal__close:hover {
	background: rgb(0 0 0 / 8%);
}

.rewe-site-header .rewe-header-language-modal__close:focus-visible {
	outline: 3px solid var(--wp--preset--color--gruen-basis, #009b90);
	outline-offset: 2px;
}

.rewe-header-language-modal__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rewe-header-language-modal__item {
	margin: 0;
	padding: 0;
}

.rewe-header-language-modal__option {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	padding: 14px 24px;
	border: 2px solid var(--wp--preset--color--offblack, #222222);
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--offblack, #222222);
	font-family: var(--wp--preset--font-family--copy, sans-serif);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.rewe-header-language-modal__option:hover,
.rewe-header-language-modal__option:focus-visible {
	border-color: var(--wp--preset--color--gruen-basis, #009b90);
	color: var(--wp--preset--color--gruen-01-dunkler, #01605b);
	background: var(--wp--preset--color--gruen-02-heller, #d6fff3);
}

/* Scoped to beat the generic header a/button focus ring on the light panel. */
.rewe-site-header .rewe-header-language-modal__option:focus-visible {
	outline: 3px solid var(--wp--preset--color--gruen-basis, #009b90);
	outline-offset: 2px;
}

.rewe-header-language-modal__option--current,
.rewe-header-language-modal__option--current:hover {
	border-color: var(--wp--preset--color--gruen-02-dunkler, #00403d);
	background: var(--wp--preset--color--gruen-02-dunkler, #00403d);
	color: var(--wp--preset--color--white, #ffffff);
	cursor: default;
}

.rewe-site-header__nav-left,
.rewe-site-header__nav-right {
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
 * Server-rendered nav menus (rewe-group/menu-location block)
 * ----------------------------------------------------------------------- */

.rewe-site-header__nav-row .rewe-site-header__nav-location {
	display: flex;
	align-items: stretch;
	margin: 0;
	padding: 0;
}

.rewe-site-header__nav-row .rewe-site-header__menu {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
}

.rewe-site-header__menu--right {
	justify-content: flex-end;
}

/* Top-level links */
.rewe-site-header__nav-row .rewe-site-header__menu > li > a,
.rewe-site-header__nav-row .rewe-site-header__menu > li > span {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	padding: 14px 12px;
	color: var(--header-foreground);
	text-decoration: none;
	display: flex;
	align-items: center;
	white-space: nowrap;
}

.rewe-site-header__nav-row .rewe-site-header__menu > li > a:hover,
.rewe-site-header__nav-row .rewe-site-header__menu > li > a:focus {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Current page indicator */
.rewe-site-header__nav-row .rewe-site-header__menu > .current-menu-item > a,
.rewe-site-header__nav-row .rewe-site-header__menu > .current-page-ancestor > a {
	border-bottom: 3px solid currentColor;
	padding-bottom: 11px;
}

/* Dropdown submenus */
.rewe-site-header__menu li {
	position: relative;
}

.rewe-site-header__menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 100;
	list-style: none;
	margin: 0;
	padding: 4px 0;
	background: var(--header-background);
	color: var(--header-foreground);
	min-width: 180px;
	box-shadow: 0 4px 12px rgb(0 0 0 / 12%);
}

.rewe-site-header__menu--right .sub-menu {
	left: auto;
	right: 0;
}

.rewe-site-header__menu li:hover > .sub-menu,
.rewe-site-header__menu li:focus-within > .sub-menu {
	display: block;
}

.rewe-site-header__menu .sub-menu a {
	display: block;
	padding: 8px 16px;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--header-foreground);
	text-decoration: none;
	white-space: nowrap;
}

.rewe-site-header__menu .sub-menu a:hover,
.rewe-site-header__menu .sub-menu a:focus {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Third level */
.rewe-site-header__menu .sub-menu .sub-menu {
	top: 0;
	left: 100%;
}

.rewe-site-header__menu--right .sub-menu .sub-menu {
	left: auto;
	right: 100%;
}

@media (min-width: 1025px) {
	.rewe-site-header {
		z-index: 1000;
		overflow: visible !important;
	}

	.rewe-site-header__nav-row {
		position: relative;
		z-index: 2;
		overflow: visible !important;
	}

	.rewe-site-header__nav-row .rewe-site-header__nav-location,
	.rewe-site-header__nav-row .rewe-site-header__menu,
	.rewe-site-header__nav-row .rewe-site-header__menu > li {
		overflow: visible !important;
	}

	.rewe-site-header__menu .sub-menu {
		z-index: 1001;
	}
}

.rewe-site-header__nav-row .rewe-site-header__menu > li > .rewe-menu-heading__button {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 14px 12px;
	color: var(--header-foreground);
	background: transparent;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	box-shadow: none;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: inherit;
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
	cursor: default;
	appearance: none;
	-webkit-appearance: none;
}

.rewe-site-header__menu > li.menu-item-has-children > .rewe-menu-heading__button::before,
.rewe-site-header__menu > li.menu-item-has-children > .rewe-menu-heading__button::after {
	content: none !important;
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
	transform: none !important;
}

.rewe-site-header__nav-row .rewe-site-header__menu > li > .rewe-menu-heading__button:hover,
.rewe-site-header__nav-row .rewe-site-header__menu > li > .rewe-menu-heading__button:focus {
	color: var(--header-foreground);
	background: transparent;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.rewe-site-header__nav-row .rewe-site-header__menu > li > .rewe-menu-heading__button:focus-visible {
	outline: 3px solid var(--header-focus);
	outline-offset: -3px;
}

.rewe-site-header__nav-row .wp-block-navigation-item__content {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	padding: 14px 12px;
	color: var(--header-foreground);
	text-decoration: none;
	display: block;
}

.rewe-site-header__nav-row .wp-block-navigation-item__content:hover,
.rewe-site-header__nav-row .wp-block-navigation-item__content:focus {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.rewe-site-header__nav-row .current-menu-item > .wp-block-navigation-item__content {
	border-bottom: 3px solid currentColor;
	padding-bottom: 11px;
}

/* Setup hint (visible to admins only when no menu is assigned) */
.rewe-menu-location-hint {
	display: flex;
	align-items: center;
}

/* --------------------------------------------------------------------------
 * Mobile navigation toggle
 * ----------------------------------------------------------------------- */

.rewe-site-header .rewe-mobile-nav-toggle {
	display: none;
}

/* --------------------------------------------------------------------------
 * Mobile navigation panel
 * ----------------------------------------------------------------------- */

.rewe-mobile-nav-panel {
	--mobile-nav-divider: rgb(0 0 0 / 12%);
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	max-height: calc(100vh - 100px);
	max-height: calc(100dvh - 100px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	z-index: 1200;
	background: var(--header-background);
	color: var(--header-foreground);
	padding: 0 0 16px;
	box-shadow: 0 12px 24px rgb(0 0 0 / 16%);
	box-sizing: border-box;
}

.riag-header-variant--blue-dark .rewe-mobile-nav-panel,
.riag-header-variant--orange-dark .rewe-mobile-nav-panel,
.riag-header-variant--red-dark .rewe-mobile-nav-panel,
.riag-header-variant--green-dark .rewe-mobile-nav-panel {
	--mobile-nav-divider: rgb(255 255 255 / 25%);
}

.rewe-mobile-nav-panel:not([hidden]) {
	display: block;
}

.rewe-mobile-nav-panel .rewe-site-header__nav-location {
	display: block;
}

.rewe-mobile-nav-panel .rewe-site-header__menu {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rewe-mobile-nav-panel .rewe-site-header__menu li {
	position: static;
	margin: 0;
	padding: 0;
}

/* Row: link/heading on the left, optional chevron toggle on the right. */
.rewe-mobile-nav-panel .rewe-mobile-nav-row {
	display: flex;
	align-items: stretch;
	border-top: 1px solid var(--mobile-nav-divider);
}

.rewe-mobile-nav-panel .rewe-site-header__menu > li:first-child > .rewe-mobile-nav-row {
	border-top: 0;
}

.rewe-mobile-nav-panel .rewe-mobile-nav-row > a,
.rewe-mobile-nav-panel .rewe-mobile-nav-row > span,
.rewe-mobile-nav-panel .rewe-mobile-nav-row > .rewe-menu-heading__button {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	width: auto;
	min-height: 64px;
	box-sizing: border-box;
	margin: 0;
	padding: 14px 24px;
	color: var(--header-foreground);
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
	text-decoration: none;
	white-space: normal;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.rewe-mobile-nav-panel .rewe-mobile-nav-row > a:hover,
.rewe-mobile-nav-panel .rewe-mobile-nav-row > a:focus,
.rewe-mobile-nav-panel .rewe-mobile-nav-row > .rewe-menu-heading__button:hover,
.rewe-mobile-nav-panel .rewe-mobile-nav-row > .rewe-menu-heading__button:focus {
	color: var(--header-foreground);
	background: transparent;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.rewe-mobile-nav-panel .current-menu-item > .rewe-mobile-nav-row > a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Chevron toggle for items with children. */
.rewe-mobile-nav-panel .rewe-mobile-nav-subtoggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	min-width: 56px;
	margin: 0;
	padding: 0;
	color: var(--header-foreground);
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.rewe-mobile-nav-panel .rewe-mobile-nav-subtoggle:hover,
.rewe-mobile-nav-panel .rewe-mobile-nav-subtoggle:active {
	background: var(--header-control-background);
}

.rewe-mobile-nav-panel .rewe-mobile-nav-subtoggle svg {
	display: block;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.2s ease;
}

.rewe-mobile-nav-panel .rewe-mobile-nav-subtoggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* Submenus are collapsed by default; JS removes [hidden] on expand. */
.rewe-mobile-nav-panel .rewe-site-header__menu .sub-menu {
	display: block;
	position: static;
	min-width: 0;
	margin: 0;
	padding: 0 0 8px;
	background: var(--header-control-background);
	color: var(--header-foreground);
	box-shadow: none;
	list-style: none;
}

.rewe-mobile-nav-panel .rewe-site-header__menu .sub-menu[hidden] {
	display: none;
}

.rewe-mobile-nav-panel .rewe-site-header__menu .sub-menu .rewe-mobile-nav-row {
	border-top: 0;
}

.rewe-mobile-nav-panel .rewe-site-header__menu .sub-menu .rewe-mobile-nav-row > a,
.rewe-mobile-nav-panel .rewe-site-header__menu .sub-menu .rewe-mobile-nav-row > span {
	min-height: 48px;
	padding: 10px 24px 10px 40px;
	font-size: 0.9375rem;
	font-weight: 400;
}

.rewe-mobile-nav-panel .rewe-site-header__menu .sub-menu .sub-menu {
	background: transparent;
	padding-bottom: 0;
}

.rewe-mobile-nav-panel .rewe-site-header__menu .sub-menu .sub-menu .rewe-mobile-nav-row > a,
.rewe-mobile-nav-panel .rewe-site-header__menu .sub-menu .sub-menu .rewe-mobile-nav-row > span {
	padding-left: 56px;
}

/* Second menu location gets a visual separator from the first. */
.rewe-mobile-nav-panel .rewe-site-header__nav-location + .rewe-site-header__nav-location {
	margin-top: 8px;
	border-top: 1px solid var(--mobile-nav-divider);
}

.rewe-mobile-nav-panel .rewe-site-header__nav-location + .rewe-site-header__nav-location .rewe-site-header__menu > li:first-child > .rewe-mobile-nav-row {
	border-top: 0;
}

.rewe-mobile-nav-panel .rewe-mobile-nav-row > a:focus-visible,
.rewe-mobile-nav-panel .rewe-mobile-nav-row > .rewe-menu-heading__button:focus-visible,
.rewe-mobile-nav-panel .rewe-mobile-nav-subtoggle:focus-visible {
	outline: 3px solid var(--header-focus);
	outline-offset: -3px;
}

.rewe-site-header a:focus-visible,
.rewe-site-header button:focus-visible,
.rewe-site-header summary:focus-visible,
.rewe-site-header .wp-block-navigation-item__content:focus-visible,
.rewe-site-header .wp-block-navigation__responsive-container-open:focus-visible,
.rewe-site-header .wp-block-navigation__responsive-container-close:focus-visible {
	outline: 3px solid var(--header-focus);
	outline-offset: 3px;
}

.rewe-site-header .wp-block-navigation__responsive-container-open,
.rewe-site-header .wp-block-navigation__responsive-container-close {
	color: var(--header-foreground);
}

/* --------------------------------------------------------------------------
 * Mobile header (≤ 1024px): logo + hamburger on the first row,
 * language switcher (left) + search (right) on the second row.
 * The desktop nav row is hidden and its menus live in the mobile panel.
 * ----------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.rewe-site-header {
		z-index: 1000;
	}

	.rewe-site-header__brand-row {
		flex-wrap: wrap !important;
		align-items: center;
		row-gap: 0 !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
		padding-bottom: 0 !important;
	}

	.rewe-site-header__logo {
		order: 1;
		flex: 1 1 auto;
		max-width: calc(100% - 66px);
		padding-bottom: clamp(16px, 2.8vw, 24px);
	}

	.rewe-site-header .rewe-wordmark svg,
	.rewe-site-header .wp-block-site-logo svg,
	.rewe-site-header .wp-block-site-logo img {
		height: 22px;
	}

	.rewe-site-header .rewe-mobile-nav-toggle {
		display: inline-flex;
		order: 2;
		margin-left: auto;
		margin-bottom: clamp(16px, 2.8vw, 24px);
	}

	.rewe-site-header__utility {
		order: 3;
		flex: 1 0 100% !important;
		flex-direction: row-reverse;
		flex-wrap: nowrap;
		justify-content: space-between !important;
		align-items: center;
		margin-left: -16px;
		margin-right: -16px;
		width: calc(100% + 32px);
		padding: 10px 16px;
		border-top: 1px solid rgb(0 0 0 / 12%);
	}

	.riag-header-variant--blue-dark .rewe-site-header__utility,
	.riag-header-variant--orange-dark .rewe-site-header__utility,
	.riag-header-variant--red-dark .rewe-site-header__utility,
	.riag-header-variant--green-dark .rewe-site-header__utility {
		border-top-color: rgb(255 255 255 / 25%);
	}

	.rewe-site-header .wp-block-search.wp-block-search__button-only .wp-block-search__inside-wrapper {
		justify-content: flex-end;
	}

	/* Desktop nav row must be hidden even against WP layout styles. */
	.rewe-site-header__nav-row {
		display: none !important;
	}

	.rewe-site-header .wp-block-navigation__responsive-container {
		background: var(--header-background);
		color: var(--header-foreground);
	}
}

/* Hamburger icon bars */
.rewe-mobile-nav-toggle__icon {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 22px;
}

.rewe-mobile-nav-toggle__icon span {
	display: block;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.rewe-mobile-nav-toggle[aria-expanded="true"] .rewe-mobile-nav-toggle__icon span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.rewe-mobile-nav-toggle[aria-expanded="true"] .rewe-mobile-nav-toggle__icon span:nth-child(2) {
	opacity: 0;
}

.rewe-mobile-nav-toggle[aria-expanded="true"] .rewe-mobile-nav-toggle__icon span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
	.rewe-site-header .wp-block-navigation__responsive-container {
		transition: none;
	}

	.rewe-site-header .utility-control .wp-block-search__button,
	.rewe-site-header .rewe-header-language-switcher__toggle,
	.rewe-mobile-nav-toggle {
		transition: none;
	}

	.rewe-mobile-nav-toggle__icon span {
		transition: none;
	}

	.rewe-header-language-modal__option {
		transition: none;
	}
}

.rewe-flexible-sections > .wp-block-post-content > [class*="wp-block-acf-"]:first-child {
	max-width: none;
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
}

body:is(.page-template-page-fullwidth, .page-template-page-fullwidth-html) .wp-block-post-content {
	--riag-text-content-width: 1200px;
	--riag-text-content-gutter: clamp(1rem, 3vw, 2.5rem);
}

body:is(.page-template-page-fullwidth, .page-template-page-fullwidth-html) .wp-block-post-content
	> :is(
		p,
		h1,
		h2,
		h3,
		h4,
		h5,
		h6,
		ul,
		ol,
		.wp-block-quote,
		.wp-block-pullquote,
		table,
		.wp-block-table,
		pre,
		code,
		.wp-block-preformatted,
		.wp-block-code,
		.wp-block-verse
	):not(.alignfull) {
	box-sizing: border-box;
	width: calc(100% - (2 * var(--riag-text-content-gutter)));
	max-width: var(--riag-text-content-width);
	margin-right: auto;
	margin-left: auto;
}

/* --------------------------------------------------------------------------
 * Usercentrics-Consent-Gate (Instagram-Feed, siehe inc/usercentrics-gate.php)
 * ----------------------------------------------------------------------- */

/* Entschärfte Feed-Medien (src → data-uc-src) behalten ihre Fläche, damit
   das Grid nicht kollabiert und das SDP-Overlay den Feed abdecken kann. */
.uc-gated-instagram img[data-uc-src],
.uc-gated-instagram video[data-uc-src] {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background-color: #ececec;
}

.uc-gated-instagram {
	min-height: 20rem;
}

/* --------------------------------------------------------------------------
 * Usercentrics Smart Data Protector: Platzhalter in Core-Embeds (YouTube etc.)
 * SDP ersetzt das absolut positionierte iframe durch einen statischen
 * .uc-embedding-container (min-height 320px / max-height 500px); der fällt
 * unter den 16:9-Abstandhalter (::before) des Wrappers → weißer Streifen in
 * Videohöhe, auf breiten Viewports zusätzlich Restfläche unter dem 500px-
 * Deckel. Der Container füllt stattdessen die Aspect-Ratio-Fläche komplett;
 * Poster-Bild und zentrierte Karte (.uc-embedding-wrapper) kommen bereits
 * fertig gestylt vom SDP.
 * ----------------------------------------------------------------------- */
.wp-embed-responsive .wp-has-aspect-ratio .wp-block-embed__wrapper > .uc-embedding-container {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	max-height: none;
	margin: 0;
}