/*
 * GORILLA GARAGE — Section: Page-Content
 *
 * Vertikal-Rhythmus für den the_content()-Bereich auf Standard-Unterseiten
 * (page.php, page-kontakt.php). Gibt den Sub-Pages das Spacing, das
 * Gutenberg-Blocks von Haus aus nicht mitbringen: Section-Padding um den
 * Content, Whitespace vor Headings, Listen-Spacing, Spalten-Gaps.
 *
 * Reading-Layout für Impressum/Datenschutz lebt separat in legal.css.
 */

/* ────────────────────────────────────────────────────────────
 * Wrapper — gibt Hero ↔ Content ↔ CTA Atemraum
 * ──────────────────────────────────────────────────────────── */

.gg-page-main {
	padding-block: var(--section-padding-block);
	background-color: var(--gg-white);
	background-image: var(--bg-light-fade);
	background-attachment: fixed;
	box-shadow: var(--bg-light-vignette);
	color: var(--color-text);
	overflow-x: clip;
}

/* /aufbereitung/ splittet den Content um die Fahrzeugklassen-Section.
 * Damit es keinen doppelten Abstand gibt (gg-page-main bottom + section top
 * bzw. section bottom + gg-page-main top), wird der wandzugewandte Block
 * auf 0 gesetzt — die dunkle Section bringt ihr eigenes Padding mit. */
.gg-page-main--leading {
	padding-bottom: 0;
}

/* Ausnahme: Endet der führende Block mit einem Karten-Raster, schließt dessen
 * clip-path-Unterkante hart ab — die Karte stößt dann direkt an die Kante zur
 * folgenden Dark-Section (gemeldet 2026-08-21 auf /ratenzahlung/). Auf
 * /aufbereitung/ endet der Block mit einem Bild, das seinen Luftraum selbst
 * mitbringt, deshalb greift die Regel gezielt nur für das Karten-Raster.
 *
 * PADDING, nicht Margin: `overflow-x: clip` oben bildet KEINEN BFC (anders als
 * overflow:hidden), eine Child-Margin läuft also aus dem hellen Block heraus
 * und erzeugt dunklen statt hellen Luftraum — die Kante bliebe an der Karte. */
.gg-page-main--leading:has(.gg-page-content > .gg-pakete-grid:last-child) {
	padding-bottom: var(--section-padding-block-sm);
}

/* Eigenes Top-Padding nach der Vehicle-Classes-Section. (Früher stand hier
 * padding-top:0 + margin-collapse-Trick auf der ersten H2 — der ist nie
 * gegriffen. Grund ist genau umgekehrt zur früheren Notiz hier: overflow-x:
 * clip bildet KEINEN BFC, die H2-Margin läuft also aus dem hellen Container
 * heraus und erzeugt dunklen statt hellen Luftraum. Ergebnis war H2 klebt
 * oben am Light-Container, kein Atem. Daher: echtes Padding.) */
.gg-page-main--continued {
	padding-top: var(--section-padding-block-sm);
}

/* ────────────────────────────────────────────────────────────
 * Reading-Layout
 * ──────────────────────────────────────────────────────────── */

.gg-page-content {
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
}

/* Default-Rhythmus zwischen direkten Block-Kindern */
.gg-page-content > * + * {
	margin-top: var(--space-6);
}

/* Erste Zeile bündig zum Wrapper-Padding */
.gg-page-content > *:first-child {
	margin-top: 0;
}

/* ────────────────────────────────────────────────────────────
 * Headings — mehr Luft DAVOR (kennzeichnet neuen Abschnitt),
 *            engerer Abstand DANACH (Heading + Body gehören zusammen)
 * ──────────────────────────────────────────────────────────── */

.gg-page-content > h2 {
	margin-top: var(--space-16);
}

/* Anker-Ziele (Deep-Links aus dem Startseiten-Bento: #inspektion, #bremsen,
 * #klassiker … und die 301-Weiterleitung /liebhaberservice/ →
 * /werkstatt/#klassiker) landeten sonst unter dem Sticky-Header. Gilt nur
 * für Überschriften, die tatsächlich eine Anker-ID tragen. */
.gg-page-content :is(h2, h3)[id] {
	scroll-margin-top: calc(var(--gg-header-h, 140px) + var(--space-4));
}

/* Wenn direkt nach einem Split-Columns-Block (z.B. /aufbereitung/:
 * „Was wir für Ihr Auto tun" → Liste+Bild → „Pakete …") eine H2 folgt,
 * reicht ein engerer Abstand: der Split markiert bereits den Section-
 * Break, eine zusätzliche 64px-Pause wirkt wie eine Leere. */
.gg-page-content > .gg-content-split + h2 {
	margin-top: var(--space-8);
}

.gg-page-content > h3 {
	margin-top: var(--space-12);
}

.gg-page-content > h2 + *,
.gg-page-content > h3 + *,
.gg-page-content > h4 + * {
	margin-top: var(--space-5);
}

/* ────────────────────────────────────────────────────────────
 * Paragraphs & Listen
 * ──────────────────────────────────────────────────────────── */

.gg-page-content p {
	max-width: 70ch;
}

/* Gutenberg-Align: bei align="center" sitzt der Text-Container (max 70ch) sonst
 * linksbündig im Wrapper — text-align zentriert nur den Inhalt, nicht den Block.
 * margin-inline:auto zentriert den schmäleren <p> selbst. */
.gg-page-content p.has-text-align-center {
	margin-inline: auto;
}

.gg-page-content p.has-text-align-right {
	margin-inline: auto 0;
}

.gg-page-content ul,
.gg-page-content ol {
	padding-left: 0;
	max-width: 70ch;
}

.gg-page-content ol {
	padding-left: var(--space-6);
}

.gg-page-content li + li {
	margin-top: var(--space-2);
}

/* ────────────────────────────────────────────────────────────
 * Bullet-Icon — grüner Check für Body-Listen
 * (Castrol-CI-Bullets und Legal-Listen leben in eigenen
 * Sections und bleiben davon unberührt)
 * ──────────────────────────────────────────────────────────── */

.gg-page-content ul {
	list-style: none;
}

.gg-page-content ul > li {
	position: relative;
	padding-left: calc(2.25em + var(--space-2));
}

.gg-page-content ul > li::before {
	content: '';
	position: absolute;
	left: 0;
	top: -0.1em;
	width: 1.95em;
	height: 1.95em;
	background-image: url('../../images/icons/Icon_check.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* ────────────────────────────────────────────────────────────
 * Gutenberg Columns — Pakete-Grid o.ä.
 * ──────────────────────────────────────────────────────────── */

.gg-page-content .wp-block-columns {
	gap: var(--space-10) var(--space-12);
	margin-top: var(--space-8);
}

.gg-page-content .wp-block-column > * + * {
	margin-top: var(--space-4);
}

.gg-page-content .wp-block-column > h2,
.gg-page-content .wp-block-column > h3,
.gg-page-content .wp-block-column > h4 {
	margin-top: 0;
	margin-bottom: var(--space-3);
}

.gg-page-content .wp-block-column > h3 + p,
.gg-page-content .wp-block-column > h4 + p {
	margin-top: 0;
}

@media (min-width: 1200px) {
	.gg-page-content .gg-liebhaber-cinema__car {
		width: 70%;
		margin-right: -8%;
	}
}

/* ────────────────────────────────────────────────────────────
 * Pakete-Grid — dezente hellgraue Karten für Service-Übersicht
 * (Aufbereitung, Liebhaberservice etc.). Lockert das reine
 * Heading+Absatz-Raster auf, ohne den Light-Mode zu brechen.
 * ──────────────────────────────────────────────────────────── */

.gg-page-content .gg-pakete-grid {
	/* Mehr Luft zwischen den Cards horizontal+vertikal als der Default
	 * (.wp-block-columns: --space-10/--space-12) — die größere
	 * Chevron-Cut-Ecke + raushängende Icon-Bubble brauchen
	 * Atemraum, sonst kleben die Karten optisch zusammen. */
	gap: var(--space-12);
	margin-top: var(--space-12);
}

/* Zwischen mehreren Pakete-Grid-Reihen (Werkstatt hat 3, Reifenservice 2)
 * darf der Atem zwischen den Reihen großzügiger sein — Icon-Bubble der
 * folgenden Reihe ragt sonst zu nah an die Card-Unterkante darüber. */
.gg-page-content .gg-pakete-grid + .gg-pakete-grid {
	margin-top: var(--space-16);
}

/* Karten füllen die Spalte voll aus, damit Reihen gleich hoch sind */
.gg-page-content .gg-pakete-grid > .wp-block-column {
	display: flex;
}

.gg-page-content .gg-pakete-card {
	/* Brand-Chevron-Cut: deutlich stärker als bei den Buttons (14px),
	 * proportional zur größeren Card-Fläche. Wird unten im ::before
	 * via var(--clip-btn-chevron) angewendet (custom property
	 * inheritance vom Parent in das Pseudo-Element). */
	--btn-chevron-cut: 44px;
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1;
	/* Dark-Context lokal innerhalb der Karte —
	 * H3/P erben Heading/Text automatisch über die Tokens.
	 * Body bewusst auf hellgrau für klare Hierarchie zur weißen Headline. */
	--color-text: var(--gg-grey-300);
	--color-text-muted: var(--gg-grey-300);
	--color-heading: var(--gg-white);
	/* Card selbst ist nur Layout-Container — Background + Chevron-Cut
	 * leben auf dem ::before-Pseudo dahinter. Das hält den Icon-Peek
	 * (negativer margin-top) NICHT vom Clip betroffen. */
	background: transparent;
	color: var(--color-text);
	/* Padding-bottom + padding-left großzügig (>= Cut-Wert 44px), damit
	 * Text NIE in die Chevron-Cut-Diagonale rutscht — Glyph-Descender
	 * würden sonst weggeschnitten. */
	padding: var(--space-8) var(--space-6) var(--space-12) var(--space-12);
	transition: transform var(--dur-base) var(--ease-emphasis);
	overflow: visible;
	isolation: isolate;
}

/* Background-Layer mit Brand-Chevron-Cut (top-right + bottom-left)
 * UND Rot→Gold-Topstripe in einer Pseudo-Schicht. clip-path schneidet
 * border/box-shadow weg → daher kein Border, Schatten als filter:
 * drop-shadow (folgt der Chevron-Silhouette).
 * z-index: -1 + isolation: isolate auf der Card hält den Layer hinter
 * Icon/H3/P, sodass das Icon mit margin-top: -60px frei oben raus-
 * schauen darf, ohne vom clip-path beschnitten zu werden. */
.gg-page-content .gg-pakete-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Polygon inline — vermeidet jegliche custom-property-Substitution
	 * über mehrere Stufen (var(--clip-btn-chevron) enthält selbst eine
	 * var()-Referenz, was in manchen Render-Pfaden zu unerwartetem
	 * Fallback-Verhalten führen kann). 44px Cut = deutlich stärker
	 * als der 14px-Button-Default. */
	clip-path: polygon(
		0 0,
		calc(100% - 44px) 0,
		100% 44px,
		100% 100%,
		44px 100%,
		0 calc(100% - 44px)
	);
	background:
		linear-gradient(
			90deg,
			transparent 0%,
			var(--gg-red) 30%,
			var(--gg-gold) 70%,
			transparent 100%
		) top left / 100% 3px no-repeat,
		var(--gg-black-soft);
	filter:
		drop-shadow(0 14px 24px rgba(0, 0, 0, 0.45))
		drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
	transition: filter var(--dur-base) var(--ease-emphasis);
	pointer-events: none;
}

.gg-page-content .gg-pakete-card:hover {
	transform: var(--hover-lift-card);
}

.gg-page-content .gg-pakete-card:hover::before {
	filter:
		drop-shadow(0 22px 36px rgba(0, 0, 0, 0.55))
		drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3));
}

.gg-page-content .gg-pakete-card__icon {
	display: block;
	width: clamp(72px, 9vw, 104px);
	height: auto;
	aspect-ratio: 1 / 1;
	/* Icon sitzt deutlich höher über der Card — Bubble-Spitze ragt
	 * weiter aus der Top-Kante raus, wirkt mehr wie ein gepinnter
	 * Marker als wie ein eingebettetes Icon. */
	margin: calc(-1 * var(--space-16) - var(--space-2)) 0 var(--space-5);
	object-fit: contain;
	filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45));
	transition: transform var(--dur-base) var(--ease-emphasis);
}

.gg-page-content .gg-pakete-card__icon:hover,
.gg-page-content .gg-pakete-card:focus-within .gg-pakete-card__icon {
	transform: var(--hover-scale-icon);
}

.gg-page-content .gg-pakete-card > .gg-pakete-card__icon + h3 {
	margin-top: 0;
}

.gg-page-content .gg-pakete-card > h3 {
	font-size: var(--fs-lg);
	margin-top: 0;
	margin-bottom: var(--space-3);
	line-height: var(--lh-tight);
}

.gg-page-content .gg-pakete-card > h3 + p {
	margin-top: 0;
}

.gg-page-content .gg-pakete-card p {
	color: var(--color-text);
	max-width: none;
}

.gg-page-content .gg-pakete-card > *:last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.gg-page-content .gg-pakete-card,
	.gg-page-content .gg-pakete-card:hover,
	.gg-page-content .gg-pakete-card__icon,
	.gg-page-content .gg-pakete-card__icon:hover,
	.gg-page-content .gg-pakete-card:focus-within .gg-pakete-card__icon {
		transform: none;
		transition: none;
	}
}

/* ────────────────────────────────────────────────────────────
 * Solo-Variante — alleinstehende Pakete-Card ohne wp:columns-Wrapper
 * (Liebhaberservice-Callout). Zentriert auf Reading-Breite, kein flex:1.
 * ──────────────────────────────────────────────────────────── */

.gg-page-content .gg-pakete-card--solo {
	flex: initial;
	max-width: 70ch;
	/* Linksbündig im Wrapper (vorher zentriert) — die Solo-Card sitzt jetzt
	 * an der linken Reading-Kante, der Mascot rechts hat dadurch mehr Spielraum. */
	margin-inline: 0 auto;
	/* Grid-Layout: Icon links, Text rechts daneben — eliminiert den toten
	 * Leerraum rechts vom Icon, den ein reines flex-column-Stacking erzeugt. */
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: var(--space-6);
}

/* Larger Icon-Variant — für den prominenten Klassiker-Pin auf der Solo-Card */
.gg-page-content .gg-pakete-card__icon--lg {
	width: clamp(96px, 12vw, 140px);
}

/* Solo-Card: Icon noch eine Stufe höher über die Card-Oberkante schieben
 * (größerer negativer margin-top als der Default-Pakete-Card-Icon).
 * Der Lift kommt aus --gg-solo-lift auf dem Frame — DIESELBE Zahl, aus der
 * der Frame seinen Top-Abstand berechnet. Nur so kann der Pin nicht in den
 * Text darüber wachsen, wenn eine der beiden Seiten angefasst wird. */
.gg-page-content .gg-pakete-card--solo .gg-pakete-card__icon {
	margin-top: calc(-1 * var(--gg-solo-lift, calc(var(--space-20) + var(--space-4))));
	margin-bottom: 0;
}

/* Paragraph rechts neben dem Icon, max-width entlocken damit er die volle
 * Spalte nutzt (sonst greift die globale .gg-page-content p {max-width:70ch}). */
.gg-page-content .gg-pakete-card--solo > p {
	max-width: none;
	margin: 0;
}

/* ────────────────────────────────────────────────────────────
 * Pakete-Card-Tooltip (vom JS dynamisch eingehängt, pakete-tooltips.js)
 *
 * Erscheint per CSS beim :hover/:focus-within über dem Icon.
 * `aria-hidden="true"` weil Card-Body bereits Title + Description sichtbar
 * zeigt — Screenreader sollen den Text nicht doppelt vorlesen.
 * ──────────────────────────────────────────────────────────── */

.gg-page-content .gg-pakete-card__tooltip {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translate(-50%, 4px);
	width: max-content;
	max-width: 240px;
	padding: 10px 14px;
	background: var(--gg-black-soft, #141414);
	color: var(--gg-white);
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-wide);
	text-align: center;
	border-radius: var(--radius-md, 10px);
	box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.55);
	opacity: 0;
	pointer-events: none;
	z-index: 5;
	transition:
		opacity var(--dur-base) var(--ease-emphasis),
		transform var(--dur-base) var(--ease-emphasis);
}

.gg-page-content .gg-pakete-card__tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: var(--gg-black-soft, #141414);
}

.gg-page-content .gg-pakete-card__icon:hover ~ .gg-pakete-card__tooltip,
.gg-page-content .gg-pakete-card:focus-within .gg-pakete-card__tooltip {
	opacity: 1;
	transform: translate(-50%, 0);
}

@media (hover: none) {
	.gg-page-content .gg-pakete-card__tooltip {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gg-page-content .gg-pakete-card__tooltip,
	.gg-page-content .gg-pakete-card__icon:hover ~ .gg-pakete-card__tooltip,
	.gg-page-content .gg-pakete-card:focus-within .gg-pakete-card__tooltip {
		transform: translate(-50%, 0);
		transition: opacity var(--dur-base) linear;
	}
}

/* ────────────────────────────────────────────────────────────
 * Pakete-Section mit Mascot — freigestellter Gorilla, der hinter
 * der ersten Karten-Reihe steht und oben rechts „rausschaut".
 * Bewusst NICHT in den Grid-Flow, sondern absolut hinter den
 * Karten, damit der Reihen-Rhythmus erhalten bleibt.
 * Mobile: kleiner skaliert oder ausgeblendet, damit er die
 * gestapelten Karten nicht überdeckt.
 * ──────────────────────────────────────────────────────────── */

.gg-page-content .gg-pakete-section--mascot {
	position: relative;
	overflow: visible;
	isolation: isolate;
}

.gg-page-content .gg-pakete-section--mascot > .gg-pakete-grid {
	position: relative;
	z-index: 1;
}

/*
 * Horizontale Position: Maßgeblich ist die Kante des SICHTBAREN Motivs,
 * nicht die der img-Box. Die beiden Freisteller haben unterschiedlich
 * viel transparenten Rand rechts (Reifen-Gorilla ~20,5 %, Werkstatt-
 * Gorilla ~8 %) — ein gemeinsamer right-Wert setzt sie deshalb optisch
 * NICHT auf dieselbe Kante. Der Reifenstapel stand dadurch rund 40px zu
 * weit links und lief in die Bullet-Zeile („… ohne Kleingedrucktes.").
 *
 * Statt geratener Offsets wird der transparente Rand pro Bild
 * herausgerechnet: `--gg-gorilla-out` ist der Abstand, den das sichtbare
 * Motiv über die Container-Kante hinausragt, `--gg-gorilla-trim` der
 * transparente Anteil rechts im PNG. Selektor über [src$=] statt einer
 * neuen Klasse, damit der Seed-Content (inc/pages.php) unberührt bleibt
 * und kein GG_PAGES_VERSION-Bump nötig ist.
 */

.gg-page-content .gg-pakete-section__mascot {
	position: absolute;
	--gg-gorilla-w: 280px;
	--gg-gorilla-out: 16px;
	--gg-gorilla-trim: 0;
	top: -240px;
	right: calc(-1 * (var(--gg-gorilla-out) + var(--gg-gorilla-trim) * var(--gg-gorilla-w)));
	width: var(--gg-gorilla-w);
	height: auto;
	z-index: 0;
	pointer-events: none;
	filter: drop-shadow(0 18px 22px rgb(0 0 0 / 0.35));
	-webkit-user-select: none;
	user-select: none;
}

.gg-page-content .gg-pakete-section__mascot[src$="gorilla-reifenservice.png"] {
	--gg-gorilla-trim: 0.205;
}

.gg-page-content .gg-pakete-section__mascot[src$="gorilla-werkstatt.png"] {
	--gg-gorilla-trim: 0.08;
}

/* Unter 1024px hat der Gorilla keinen Platz, an keiner Position.
 * Der Textblock füllt dort praktisch die ganze Container-Breite (die
 * Bullet-Liste ist noch nicht von max-width: 70ch gedeckelt, z.B. 688
 * von 722px bei 768px Viewport; auf dem Phone reicht die zweizeilige H2
 * bis 507 von 582px) und neben dem Container liegt kein freier Rand.
 * Jede Position, die das Motiv aus dem Text hält, schiebt es über die
 * Viewport-Kante, wo overflow-x: clip es anschneidet. Vorher überdeckte
 * es genau deshalb Text: bei 768px 118px der Bullet-Zeile, auf dem Phone
 * die H2. Der Gorilla ist ab 1024px sichtbar, darunter ausgeblendet —
 * ein Gorilla-Motiv steckt auf diesen Seiten ohnehin schon im Hero. */
@media (max-width: 1023px) {
	/* Nur die Gorilla-Freisteller — die Watermark-Bubble auf /aufbereitung
	 * hat ihre eigene, schmalere Zone und bleibt bis 768px sichtbar. */
	.gg-page-content .gg-pakete-section--mascot:not(.gg-pakete-section--watermark) .gg-pakete-section__mascot {
		display: none;
	}
}

@media (min-width: 1024px) {
	.gg-page-content .gg-pakete-section__mascot {
		--gg-gorilla-w: 360px;
		--gg-gorilla-out: 48px;
		top: -320px;
	}

	/* Der Werkstatt-Gorilla ist breiter freigestellt (Schraubenschlüssel
	 * links, kaum transparenter Rand) und braucht etwas mehr Weg nach
	 * rechts, um die H2 freizugeben. */
	.gg-page-content .gg-pakete-section__mascot[src$="gorilla-werkstatt.png"] {
		--gg-gorilla-w: 340px;
		--gg-gorilla-out: 56px;
	}
}

/* Watermark-Variante: kleines, voll sichtbares Icon oben rechts —
 * als dezenter Akzent, nicht hinter den Karten.
 *
 * Weil das Icon (anders als der Gorilla) frei im Weißraum liegt und nicht
 * von den Karten verdeckt wird, darf es an KEINER Viewport-Breite Text
 * überdecken. Dafür zwei Regeln statt fester Pixel-Offsets:
 *   1. vertikal an die Karten-Oberkante gebunden (bottom: 100%) — so
 *      rutscht das Icon nie in die Card-Headline, egal wie groß es
 *      skaliert. Vorher: top: -160px + bis 260px Höhe = 100px Überlappung
 *      in die erste Karten-Reihe.
 *   2. horizontal hält die H2 davor die Icon-Zone per padding-right frei
 *      (Regel unten). Breite + Overhang leben deshalb in Custom
 *      Properties auf .gg-page-content: eine Änderung wirkt auf beide
 *      Seiten, sie können nicht auseinanderlaufen.
 */

.gg-page-content {
	/* Icon-Zone der Watermark-Variante. Der Overhang bleibt kleiner als
	 * der Außenabstand des Containers (Container-Padding + freie Marge
	 * neben container--narrow), damit overflow-x: clip auf
	 * .gg-page-main nichts anschneidet. */
	--gg-mascot-w: clamp(112px, 14vw, 140px);
	--gg-mascot-out: clamp(0px, calc((100vw - var(--container-narrow)) / 2), 48px);
	--gg-mascot-gap: var(--space-8);
}

@media (min-width: 1024px) {
	.gg-page-content {
		--gg-mascot-w: clamp(128px, 11vw, 138px);
	}
}

.gg-page-content .gg-pakete-section--watermark .gg-pakete-section__mascot {
	top: auto;
	bottom: calc(100% + var(--space-2));
	right: calc(-1 * var(--gg-mascot-out));
	width: var(--gg-mascot-w);
	transform: none;
	opacity: 1;
	/* Sicherheitsnetz: reicht das Icon doch mal in die Karten-Reihe,
	 * liegen die (positionierten) Cards darüber statt darunter. */
	z-index: 0;
	filter: drop-shadow(0 18px 26px rgb(0 0 0 / 0.38));
}

/* Die H2 direkt vor der Section reserviert die Icon-Zone. */
.gg-page-content > h2:has(+ .gg-pakete-section--watermark) {
	padding-right: calc(var(--gg-mascot-w) - var(--gg-mascot-out) + var(--gg-mascot-gap));
}

/* Mobil ist im Textfluss kein Platz für die Zone: die H2 müsste so viel
 * reservieren, dass „Einzelleistungen" als längstes Wort nicht mehr in
 * eine Zeile passt und unter dem Icon rauslaufen würde. Unter 768px
 * entfällt das Icon daher — derselbe Schwamm steckt dort schon im Hero.
 * Vorher stand es ohnehin fast komplett hinter overflow-x: clip. */
@media (max-width: 767px) {
	.gg-page-content .gg-pakete-section--watermark .gg-pakete-section__mascot {
		display: none;
	}

	.gg-page-content > h2:has(+ .gg-pakete-section--watermark) {
		padding-right: 0;
	}
}

/* ────────────────────────────────────────────────────────────
 * Content-Illustration — freigestellte Gorilla-Szene neben der
 * Bullet-Liste (Aufbereitung). Schwebt ohne Karte, darf den
 * Spaltenrand leicht überlappen, mobil unter den Text gestapelt.
 * ──────────────────────────────────────────────────────────── */

.gg-page-content .gg-content-illustration {
	margin: 0;
	background: transparent;
}

.gg-page-content .gg-content-illustration {
	/* Erlaubt dem Bild über den Spaltenrand hinauszuwachsen, ohne H-Scroll */
	overflow: visible;
}

.gg-page-content .gg-content-illustration img {
	display: block;
	width: 100%;
	max-width: 720px;
	height: auto;
	margin-inline: auto;
	filter: drop-shadow(0 18px 22px rgb(0 0 0 / 0.12));
}

/* Solo-Frame — Wrapper für eine alleinstehende Pakete-Card mit dezentem
 * Mascot, der hinter der Card hervorlugt. Frame öffnet einen stacking-
 * context via isolation: isolate, sodass der Mascot per z-index: -1 lokal
 * hinter die Card rutscht, ohne global hinter den Body-Hintergrund zu fallen. */
.gg-page-content .gg-pakete-solo-frame {
	/* Icon-Zone: Der Check-Pin hängt --gg-solo-lift über die Card-Oberkante
	 * hinaus. Genau diese Höhe (plus etwas Luft) reserviert der Frame als
	 * Top-Margin — Lift und Reservierung hängen an EINER Variable, damit sie
	 * nicht auseinanderlaufen können. */
	--gg-solo-lift: calc(var(--space-20) + var(--space-4));
	--gg-solo-lift-gap: var(--space-4);
	position: relative;
	isolation: isolate;
	overflow: visible;
	/* Großzügiger Atemraum oben und unten — der jetzt deutlich größere Mascot
	 * ragt sonst in die Bullet-Liste darüber oder den "Dreh raus"-Absatz darunter. */
	margin-block-start: calc(var(--gg-solo-lift) + var(--gg-solo-lift-gap));
	margin-block-end: var(--space-32);
}

/* Sitzt der Frame als LETZTES Content-Element (so im Klassiker-Abschnitt
 * von /werkstatt/),
 * gibt es darunter keinen Absatz mehr, von dem der Mascot Abstand braucht —
 * der Bottom-Space addierte sich dort nur auf das Section-Padding von
 * .gg-page-main und riss eine ~300px-Leerzone vor den Castrol-Streifen.
 * Der Mascot ragt ~16% unter den Frame; dafür reicht das Section-Padding. */
.gg-page-content > .gg-pakete-solo-frame:last-child {
	margin-bottom: 0;
}

.gg-page-content .gg-pakete-solo-frame__mascot {
	position: absolute;
	right: -50%;
	bottom: -16%;
	width: clamp(720px, 92vw, 1200px);
	height: auto;
	z-index: -1;
	/* Horizontal gespiegelt — Auto zeigt nach rechts. */
	transform: scaleX(-1);
	pointer-events: none;
	filter: drop-shadow(0 22px 32px rgb(0 0 0 / 0.32));
	opacity: 0.95;
	-webkit-user-select: none;
	user-select: none;
}

/* Unter 1024px fährt der Wagen VOR die Card statt dahinter.
 *
 * Grund: erst ab ~1024px bleibt neben dem Textblock ein freier Rand, in dem
 * das Motiv stehen kann. Darunter füllt der Text die Containerbreite — hinter
 * der Card schluckt die schwarze Fläche den Wagen bis auf einen Streifen
 * Kotflügel (gemeldet 2026-08-18), daneben liegt er auf der Bullet-Liste.
 *
 * Geometrie: Das Motiv sitzt mit `bottom: 0` auf der Frame-Unterkante, die
 * Card-Unterkante schneidet es auf 30% seiner sichtbaren Höhe — Kopf über der
 * Kante (vor Schwarz), Wagen darunter (auf Hell). Alles hängt an
 * --gg-solo-car-w; die Faktoren folgen aus der PNG-Geometrie:
 *   Box-Ratio 1672/941 = 1,777 → Box-Höhe   = w * 0,563
 *   Alpha-Rand oben 3,4% / unten 7,8%       → sichtbare Höhe = w * 0,500
 *   Zone IN der Card   = 0,30 * 0,500 * w   = w * 0,15
 *   Zone UNTER der Card= (Boxhöhe - 0,034*Boxhöhe) - 0,15w = w * 0,394
 * Beide Zonen werden als Padding reserviert — deshalb kann kein Text unter
 * das Motiv geraten, egal wie lang der Absatz wird. */
@media (max-width: 1023px) {
	.gg-page-content .gg-pakete-solo-frame {
		/* Breite des Wagen-Motivs — steuert zugleich beide reservierten Zonen. */
		--gg-solo-car-w: clamp(260px, 62vw, 460px);
		/* Zone UNTER der Card */
		padding-bottom: calc(var(--gg-solo-car-w) * 0.394);
	}

	.gg-page-content .gg-pakete-solo-frame__mascot {
		z-index: 1;
		right: calc(-1 * var(--space-2));
		bottom: 0;
		width: var(--gg-solo-car-w);
		opacity: 1;
	}

	/* Zone IN der Card plus Luft zur letzten Textzeile */
	.gg-page-content .gg-pakete-card--solo {
		padding-bottom: calc(var(--gg-solo-car-w) * 0.15 + var(--space-4));
	}
}

@media (max-width: 600px) {
	.gg-page-content .gg-pakete-solo-frame {
		/* Kleinerer Pin-Überhang auf schmalen Viewports: die Bullet-Liste
		 * darüber läuft hier über die volle Breite, jeder Pixel Lift ist
		 * reservierter Leerraum. Top-Margin folgt automatisch (calc oben).
		 * (Stand vorher --space-14 — Token existiert nicht, die ganze
		 * margin-block-Deklaration fiel damit auf 0 und der Pin landete
		 * mitten in der Liste.) */
		--gg-solo-lift: var(--space-16);
		/* Schmaler Viewport: Motiv darf fast die volle Cardbreite nutzen. */
		--gg-solo-car-w: clamp(260px, 92vw, 400px);
		margin-block-end: var(--space-20);
	}
}

@media (min-width: 768px) {
	.gg-page-content .gg-content-illustration img {
		max-width: none;
		/* Aus der Spalte heraus weit in den Viewport schweben */
		width: calc(100% + 90%);
		margin-inline-start: -20%;
		margin-inline-end: -70%;
	}
}

@media (min-width: 1200px) {
	.gg-page-content .gg-content-illustration img {
		/* Auf großen Screens noch eine Schippe drauf */
		width: calc(100% + 120%);
		margin-inline-end: -100%;
	}
}

/* ────────────────────────────────────────────────────────────
 * „Warum Gorilla Garage" — Fullscreen-Sektion
 *
 * 2-spaltige Komposition im Reading-Container:
 *   - Links: H2 + Bullet-Liste der USP-Punkte
 *   - Rechts: Riesen-Gorilla-Mascot mit dunkler Google-Reviews-
 *             Karte, die über seinem Bauch schwebt
 *
 * Mobile: alles gestapelt — erst Liste, dann Mascot-Komposition.
 *
 * Full-Bleed liegt AUSSCHLIESSLICH im ::before-Hintergrund, nicht im
 * Kasten selbst. Der frühere Breakout (`margin-inline: calc(50% - 50vw)`
 * + `width: 100vw`) hat die Sektion um eine halbe Scrollbar-Breite nach
 * links gezogen: 100vw zählt die Scrollbar mit, der Container daneben
 * nicht. Ergebnis war ein sichtbar kleinerer linker Rand als beim Rest
 * der Seite (14,5px statt 22px bei 733px Viewport). Jetzt erbt die
 * Sektion das Gutter des Reading-Containers und fluchtet mit Hero,
 * Fließtext und CTA — mit und ohne Scrollbar.
 * ──────────────────────────────────────────────────────────── */

.gg-page-content .gg-warum-fullscreen {
	position: relative;
	margin-block: 0 var(--space-12);
	padding-block: 0 var(--space-12);
	overflow: visible;
	isolation: isolate;
}

/* Heller Canvas über die volle Breite — darf ruhig unter der Scrollbar
 * hindurchlaufen, `.gg-page-main` (overflow-x: clip) schneidet ab.
 * z-index: -1 bleibt innerhalb der Sektion (isolation: isolate), liegt
 * also über dem Page-Canvas und unter Liste/Mascot/Karte. */
.gg-page-content .gg-warum-fullscreen::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block: 0;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	background-color: var(--gg-off-white);
	pointer-events: none;
}

/* Über-Uns öffnet den Artikel mit dieser Sektion — bewusst KEIN
 * negativer Margin nach oben (war: an Hero geklebt). Sektion bekommt
 * das normale Top-Padding von .gg-page-main als Atemraum zum Hero. */

.gg-page-content .gg-warum-fullscreen__inner {
	display: grid;
	/* minmax(0, 1fr) statt 1fr: der Mascot bringt eine harte Mindestbreite
	 * mit und wuerde die Spur sonst ueber den Container hinaus aufblasen —
	 * die Liste waere mitgewandert und haette rechts kein Gutter mehr. */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-10);
	align-items: start;
}

@media (min-width: 900px) {
	.gg-page-content .gg-warum-fullscreen__inner {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		gap: clamp(var(--space-10), 6vw, var(--space-20));
	}
}

/* ── Liste links ─────────────────────────────────────────── */

.gg-page-content .gg-warum-fullscreen__title {
	margin-top: 0;
	margin-bottom: var(--space-6);
	max-width: 16ch;
}

.gg-page-content .gg-warum-fullscreen__list {
	margin: 0;
	max-width: 60ch;
	font-size: var(--fs-base);
}

.gg-page-content .gg-warum-fullscreen__list li + li {
	margin-top: var(--space-3);
}

/* ── Mascot-Spalte ───────────────────────────────────────── */

.gg-page-content .gg-warum-fullscreen__mascot-col {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(420px, 60vw, 640px);
}

/* Ab Tablet: Gorilla + Sterne deutlich nach oben ziehen, so dass
 * sie über die Sektion-Kante hinweg in den dunklen Page-Hero ragen.
 * Der Wert überspannt den Atemraum zwischen Hero und Sektion plus
 * den Eintauch-Bereich in den Hero. Mobile bleibt gestapelt, dort
 * würde die Verschiebung in die Liste schneiden. */
@media (min-width: 900px) {
	.gg-page-content .gg-warum-fullscreen__mascot-col {
		margin-block-start: clamp(-340px, -24vw, -220px);
		/* Gorilla + Karte aus der rechten Spalte ein Stück Richtung
		 * Listen-Spalte schieben — schließt den Whitespace rechts und
		 * lässt das Maskottchen mittiger im Viewport sitzen. */
		transform: translateX(clamp(-120px, -6vw, -48px));
	}
}

.gg-page-content .gg-warum-fullscreen__mascot {
	display: block;
	grid-column: 1;
	grid-row: 1;
	width: clamp(360px, 45vw, 680px);
	max-width: none;
	height: auto;
	filter: drop-shadow(0 28px 32px rgba(0, 0, 0, 0.35));
	-webkit-user-select: none;
	user-select: none;
	pointer-events: none;
	z-index: 1;
}

/* Gestapelter Modus: der 360px-Boden ist auf 360-390px-Screens breiter als
 * der Content-Bereich — der Gorilla hat die Spur aufgeblasen und Liste wie
 * Karte ueber das rechte Gutter geschoben. Hier deckelt er sich auf die
 * Spaltenbreite; `min-width: 0` nimmt der Spalte zusaetzlich die
 * automatische Mindestbreite (Grid-Item), sonst zieht der Karten-Inhalt
 * sie wieder ueber den Rand. Ab 900px lebt die Desktop-Komposition genau
 * von diesem Ueberhang — deshalb bleibt sie hier aussen vor. */
@media (max-width: 899px) {
	.gg-page-content .gg-warum-fullscreen__mascot-col {
		min-width: 0;
	}

	.gg-page-content .gg-warum-fullscreen__mascot {
		width: min(clamp(360px, 45vw, 680px), 100%);
	}

	/* Die Reviews-Karte bringt ueber ihren CTA eine Mindestbreite von ~328px
	 * mit — auf 320-375px-Screens haette sie die Spalte gesprengt. Der Label
	 * darf stattdessen umbrechen; Padding bleibt unangetastet, sonst laufen
	 * die Chevron-Cuts in den Text. */
	.gg-page-content .gg-warum-fullscreen__card {
		min-width: 0;
	}
}

/* Dunkle Google-Reviews-Karte — schwebt über dem Bauch des Gorillas.
 *
 * Brand-Chevron-Cut (top-right + bottom-left chamfer, 44px) — identisch zu
 * Pakete-Card, Vehicle-Classes, Review-Card, Experts und Services-Bento.
 * Topstripe, Body-Gradient (mit Gold-Highlight oben + Vignette unten) und
 * Drop-Shadow leben in einer einzigen ::before-Schicht; das frühere ::after
 * ist hineingewandert (clip-path schneidet sonst border/box-shadow weg).
 *
 * Padding so gesetzt, dass die Cut-Diagonalen NIE in Content rutschen:
 * Top/Right Cut → padding-top/right ≥ 32px Summe ≥ 44px erfüllt;
 * Bottom/Left Cut → padding-bottom/left großzügig, Summe ≥ 44px. */
.gg-page-content .gg-warum-fullscreen__card {
	position: relative;
	grid-column: 1;
	grid-row: 1;
	align-self: end;
	justify-self: center;
	width: 100%;
	max-width: 420px;
	margin-bottom: 0;
	padding: var(--space-8) var(--space-8) var(--space-10) var(--space-10);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	background: transparent;
	color: var(--gg-off-white);
	overflow: visible;
	isolation: isolate;
	text-align: left;
	z-index: 2;
	transition: transform var(--dur-base) var(--ease-emphasis);
}

@media (min-width: 900px) {
	.gg-page-content .gg-warum-fullscreen__card {
		width: min(95%, 360px);
		max-width: 360px;
		margin-bottom: 18%;
	}
}

/* Background-Layer: Chevron-Cut + Topstripe + Body-Gradient mit Gold-Highlight
 * oben + Bottom-Vignette in EINER Pseudo-Schicht (clip-path verbietet das
 * Trennen via ::after — Border/box-shadow würden weggeschnitten,
 * [[feedback_keine_border_auf_chevron]]). */
.gg-page-content .gg-warum-fullscreen__card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	clip-path: polygon(
		0 0,
		calc(100% - 44px) 0,
		100% 44px,
		100% 100%,
		44px 100%,
		0 calc(100% - 44px)
	);
	background:
		/* Rot→Gold-Topstripe (oberste Lage) */
		linear-gradient(
			90deg,
			transparent 0%,
			var(--gg-red) 30%,
			var(--gg-gold) 70%,
			transparent 100%
		) top left / 100% 3px no-repeat,
		/* Gold-Highlight oben */
		radial-gradient(
			120% 80% at 50% 0%,
			rgba(201, 162, 76, 0.10) 0%,
			transparent 55%
		),
		/* Subtiles Top-Highlight */
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.04) 0%,
			rgba(255, 255, 255, 0) 40%
		),
		/* Bottom-Vignette */
		radial-gradient(
			120% 100% at 50% 100%,
			rgba(0, 0, 0, 0.32) 0%,
			transparent 55%
		),
		/* Body-Solid */
		var(--gg-black-soft);
	filter:
		drop-shadow(0 18px 28px rgba(0, 0, 0, 0.6))
		drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
	transition: filter var(--dur-base) var(--ease-emphasis);
	pointer-events: none;
}

.gg-page-content .gg-warum-fullscreen__card:hover {
	transform: var(--hover-lift-card);
}

.gg-page-content .gg-warum-fullscreen__card:hover::before {
	filter:
		drop-shadow(0 26px 42px rgba(0, 0, 0, 0.7))
		drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
}

@media (prefers-reduced-motion: reduce) {
	.gg-page-content .gg-warum-fullscreen__card,
	.gg-page-content .gg-warum-fullscreen__card:hover {
		transform: none;
		transition: none;
	}
}

/* 1) Sterne — größer, generös, leichter Gold-Glow */
.gg-page-content .gg-warum-fullscreen__stars {
	font-size: var(--fs-lg);
	letter-spacing: 0.24em;
	color: var(--gg-gold);
	text-shadow: 0 0 24px rgba(201, 162, 76, 0.35);
	margin: 0;
	max-width: none;
	line-height: 1;
}

/* 2) Rating-Zeile — riesige 4,9 links, kompakter Meta-Block daneben */
.gg-page-content .gg-warum-fullscreen__rating {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
	max-width: none;
	color: var(--gg-white);
}

.gg-page-content .gg-warum-fullscreen__rating-score {
	font-family: var(--font-display, var(--font-body));
	font-size: var(--fs-2xl);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-tight, 0);
	line-height: 1;
	color: var(--gg-gold);
	flex: 0 0 auto;
	text-shadow: 0 2px 12px rgba(201, 162, 76, 0.25);
}

.gg-page-content .gg-warum-fullscreen__rating-meta {
	display: block;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	color: var(--gg-grey-300);
	letter-spacing: var(--ls-wide);
	line-height: 1.35;
}

.gg-page-content .gg-warum-fullscreen__rating-count {
	display: block;
	color: var(--gg-off-white);
}

.gg-page-content .gg-warum-fullscreen__rating-meta .gg-google-logo {
	display: inline-flex;
	vertical-align: baseline;
}

.gg-page-content .gg-warum-fullscreen__rating-meta .gg-google-logo__wordmark {
	font-size: 1em;
	font-weight: var(--fw-bold);
	letter-spacing: -0.02em;
}

/* 3) Subline — ruhig, gemuted */
.gg-page-content .gg-warum-fullscreen__note {
	font-size: var(--fs-sm);
	color: var(--gg-grey-300);
	margin: 0;
	max-width: none;
	line-height: var(--lh-snug, 1.4);
}

/* 4) CTA — prominenter Pill mit Gold-Akzent, füllt die Karte.
 *    Single-Line garantiert über white-space:nowrap am Label. */
.gg-page-content .gg-warum-fullscreen__cta {
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	margin-top: var(--space-2);
	padding: var(--space-3) var(--space-5);
	background-color: rgba(201, 162, 76, 0.10);
	border: 1px solid rgba(201, 162, 76, 0.55);
	border-radius: var(--radius-pill);
	color: var(--gg-white);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	text-decoration: none;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.06) inset,
		0 8px 24px -10px rgba(201, 162, 76, 0.35);
	transition:
		transform var(--dur-base) var(--ease-emphasis),
		border-color var(--dur-base) var(--ease-emphasis),
		background-color var(--dur-base) var(--ease-emphasis),
		box-shadow var(--dur-base) var(--ease-emphasis);
}

.gg-page-content .gg-warum-fullscreen__cta-label {
	white-space: nowrap;
}

.gg-page-content .gg-warum-fullscreen__cta-arrow {
	flex: 0 0 auto;
	color: var(--gg-gold);
	font-weight: var(--fw-bold);
	transition: transform var(--dur-base) var(--ease-emphasis);
}

.gg-page-content .gg-warum-fullscreen__cta:hover,
.gg-page-content .gg-warum-fullscreen__cta:focus-visible {
	transform: var(--hover-lift-btn);
	background-color: rgba(201, 162, 76, 0.18);
	border-color: var(--gg-gold);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.08) inset,
		0 14px 32px -10px rgba(201, 162, 76, 0.5);
	text-decoration: none;
}

.gg-page-content .gg-warum-fullscreen__cta:hover .gg-warum-fullscreen__cta-arrow,
.gg-page-content .gg-warum-fullscreen__cta:focus-visible .gg-warum-fullscreen__cta-arrow {
	transform: var(--hover-nudge-arrow);
}

@media (prefers-reduced-motion: reduce) {
	.gg-page-content .gg-warum-fullscreen__cta,
	.gg-page-content .gg-warum-fullscreen__cta:hover,
	.gg-page-content .gg-warum-fullscreen__cta-arrow,
	.gg-page-content .gg-warum-fullscreen__cta:hover .gg-warum-fullscreen__cta-arrow {
		transform: none;
		transition: none;
	}
}

/* ────────────────────────────────────────────────────────────
 * Standort-Abschnitt (/ueber-uns/) — mobil mittig
 *
 * Headline + Lead stehen im Seed als normale Gutenberg-Blöcke ohne
 * eigene Klasse (inc/pages.php). Statt dem geseedeten Content eine
 * Klasse aufzuzwingen — was einen GG_PAGES_VERSION-Bump und damit ein
 * Überschreiben redaktioneller Änderungen bedeuten würde — hängt die
 * Regel am Nachbarn: der Block ist eindeutig daran zu erkennen, dass
 * auf H2 + Absatz direkt der [gg_openings]-Ausgabeblock folgt.
 * (Gleiches :has()-Muster wie beim Pakete-Mascot weiter oben.)
 *
 * Der Rest des Bausteins zentriert sich in components/openings.css —
 * derselbe Breakpoint (--bp-sm), damit Text und Tabelle gemeinsam
 * umschalten und es unterwegs keinen halb zentrierten Zustand gibt.
 * ──────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
	.gg-page-content > h2:has(+ p + .gg-openings),
	.gg-page-content > p:has(+ .gg-openings) {
		text-align: center;
	}

	/* Absatz ist auf 70ch gedeckelt: unter dem Deckel würde der Block
	 * sonst linksbündig im Container hängen, obwohl der Text mittig ist. */
	.gg-page-content > p:has(+ .gg-openings) {
		margin-inline: auto;
	}
}