/**
 * GreenGood — globales Stylesheet.
 *
 * Lädt überall. Hero-CSS kommt zusätzlich nur auf der Front Page.
 */

/* -------------------------------------------------------------------------- *
 *  Bricolage Grotesque — self-hosted
 *
 *  theme.json `fontFace` macht das in WP 6.5+ automatisch; diese Block hier
 *  ist Fallback für ältere Versionen UND garantiert dass die Fonts auch im
 *  Frontend ohne Site-Editor-Aktivierung ankommen.
 * -------------------------------------------------------------------------- */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200; font-display: swap;
	src: url('../fonts/BricolageGrotesque-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 300; font-display: swap;
	src: url('../fonts/BricolageGrotesque-Light.ttf') format('truetype'); }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400; font-display: swap;
	src: url('../fonts/BricolageGrotesque-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500; font-display: swap;
	src: url('../fonts/BricolageGrotesque-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 600; font-display: swap;
	src: url('../fonts/BricolageGrotesque-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700; font-display: swap;
	src: url('../fonts/BricolageGrotesque-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 800; font-display: swap;
	src: url('../fonts/BricolageGrotesque-ExtraBold.ttf') format('truetype'); }

/* Manrope — Variable + static weights als Fallback.
   Variable Font ist ein einziger Request für 200-800; die Static-TTFs
   dienen Browsern ohne variable-font support (sehr selten). */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
	src: url('../fonts/Manrope-Variable.ttf') format('truetype-variations'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 300; font-display: swap;
	src: url('../fonts/Manrope-Light.ttf') format('truetype'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap;
	src: url('../fonts/Manrope-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap;
	src: url('../fonts/Manrope-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap;
	src: url('../fonts/Manrope-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap;
	src: url('../fonts/Manrope-Bold.ttf') format('truetype'); }

/* -------------------------------------------------------------------------- *
 *  Reset / Body
 * -------------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
	/* Falls die WP-Admin-Bar Margin am html einfügt oder ein anderer Block
	   darüber durchscheint: html-Background matched die Body-Base. So gibt
	   es nirgends einen unbeabsichtigten hellen/schwarzen Streifen. */
	background: var(--wp--preset--color--base);
}

body {
	/* WICHTIG: Default 8px Body-Margin reset — sonst entstehen schwarze
	   Streifen oben/seitlich (das html-Background scheint durch). */
	margin: 0;
	padding: 0;
	font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system,
	             'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.6;
	letter-spacing: -0.005em;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--muted);
	font-feature-settings: "kern", "liga", "calt", "ss01";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
	font-family: 'Bricolage Grotesque', 'Manrope', ui-sans-serif, system-ui, sans-serif;
	text-wrap: balance;
}

p { text-wrap: pretty; }
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

/* Highlight-Logik: <strong> bzw. .gg-highlight ist weiß. */
strong, .gg-highlight {
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
}

h1 strong, h2 strong, h3 strong,
h1 .gg-highlight, h2 .gg-highlight, h3 .gg-highlight {
	color: var(--wp--preset--color--contrast);
	font-weight: inherit;
}

/* Subtle film grain.
   `mix-blend-mode: overlay` zwingt den Compositor jedes Frame eine Pass
   über alle darunterliegenden Layer zu machen — bei animiertem WebGL-
   Canvas teuer. Wir kommen mit normaler Alpha-Blendung sehr nah dran. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9999;
	opacity: 0.045;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* -------------------------------------------------------------------------- *
 *  Header
 * -------------------------------------------------------------------------- */

.gg-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 3vw, 3rem);
	background: transparent;
}

/* Hintergrund + Blur liegen auf einem Pseudo-Element, NICHT auf dem Header
   selbst. Grund: `backdrop-filter` auf .gg-header würde den Header zum
   Containing-Block für `position: fixed`-Kinder machen — dann wäre das
   Overlay-Menü (fixed, inset:0) relativ zur Header-Box statt zum Viewport
   und würde beim Scrollen nur noch im oberen Bildschirmrand aufklappen. */
.gg-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: transparent;
	transition: background-color 280ms ease, backdrop-filter 280ms ease, box-shadow 280ms ease;
}

.gg-header[data-state="scrolled"]::before {
	background: color-mix(in oklab, var(--wp--preset--color--base) 70%, transparent);
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	box-shadow: 0 1px 0 color-mix(in oklab, var(--wp--preset--color--contrast) 6%, transparent);
}

.gg-header__brand {
	display: flex;
	align-items: center;
	/* gg-logo-size kommt via inline-style aus dem Customizer; Fallback 2.8rem */
	height: var(--gg-logo-size, 2.8rem);
	flex-shrink: 0;
	z-index: 2;
	transition: opacity 320ms ease, transform 320ms ease;
}

/* Auf der Startseite (body.home) ist das große Hero-Logo die Brand-Präsenz.
   Das kleine Header-Logo blendet erst beim Scrollen ein.
   Auf allen anderen Seiten ist das Header-Logo sofort sichtbar (sonst gäbe
   es oben einen leeren Header ohne Branding). */
body.home .gg-header__brand {
	opacity: 0;
	transform: translateY(-4px);
	pointer-events: none;
}

body.home .gg-header[data-state="scrolled"] .gg-header__brand {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* Sub-Pages: Header bekommt von Anfang an Backdrop-Blur + Background,
   damit Content nicht durchscheint und das Menü klar lesbar ist. */
body:not(.home) .gg-header::before {
	background: color-mix(in oklab, var(--wp--preset--color--base) 70%, transparent);
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	box-shadow: 0 1px 0 color-mix(in oklab, var(--wp--preset--color--contrast) 6%, transparent);
}

/* Sub-Pages: oberes Padding am Body, damit Page-Content nicht unter dem
   fixed Header startet. Auf der Startseite ist der Hero full-bleed, deshalb
   dort kein Padding. */
body:not(.home) {
	padding-top: clamp(4.5rem, 7vw, 5.5rem);
}

.gg-header__brand img {
	height: 100%;
	width: auto;
	display: block;
}

/* 9-Punkte-Burger */
.gg-header__burger {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	gap: 4px;
	width: 30px;
	height: 30px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	z-index: 2;
}

.gg-burger-dot {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--wp--preset--color--contrast);
	border-radius: 50%;
	transition: transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1),
	            opacity 220ms ease;
}

.gg-header[data-mobile-open="true"] .gg-header__burger .gg-burger-dot:nth-child(1),
.gg-header[data-mobile-open="true"] .gg-header__burger .gg-burger-dot:nth-child(3),
.gg-header[data-mobile-open="true"] .gg-header__burger .gg-burger-dot:nth-child(7),
.gg-header[data-mobile-open="true"] .gg-header__burger .gg-burger-dot:nth-child(9) {
	transform: scale(0.4); opacity: 0.5;
}
.gg-header[data-mobile-open="true"] .gg-header__burger .gg-burger-dot:nth-child(2),
.gg-header[data-mobile-open="true"] .gg-header__burger .gg-burger-dot:nth-child(4),
.gg-header[data-mobile-open="true"] .gg-header__burger .gg-burger-dot:nth-child(6),
.gg-header[data-mobile-open="true"] .gg-header__burger .gg-burger-dot:nth-child(8) {
	opacity: 0;
}
.gg-header[data-mobile-open="true"] .gg-header__burger .gg-burger-dot:nth-child(5) {
	transform: scale(1.8);
}

/* Overlay-Menü */
.gg-menu {
	position: fixed;
	inset: 0;
	z-index: 1;
	background: color-mix(in oklab, var(--wp--preset--color--base) 96%, transparent);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: clamp(2rem, 5vw, 4rem);
	padding: clamp(5rem, 10vw, 8rem) clamp(2rem, 6vw, 6rem);
	opacity: 0;
	pointer-events: none;
	transform: translateY(-8px);
	transition: opacity 280ms ease, transform 280ms ease;
}

.gg-header[data-mobile-open="true"] .gg-menu {
	opacity: 1;
	pointer-events: auto;
	transform: none;
}

.gg-menu ul {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(0.5rem, 1.5vw, 1.25rem);
}

.gg-menu a {
	font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
	font-weight: 600;
	font-size: clamp(2rem, 7vw, 5rem);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--muted);
	transition: color 200ms ease;
}

.gg-menu a:hover { color: var(--wp--preset--color--contrast); }

.gg-menu__meta {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	font-size: 0.95rem;
	font-family: 'Manrope', sans-serif;
	color: var(--wp--preset--color--muted);
}

.gg-menu__meta a {
	font-family: inherit;
	font-size: inherit;
	font-weight: 400;
	letter-spacing: 0;
}

/* -------------------------------------------------------------------------- *
 *  Intro — wp:heading + wp:columns (links Lead, rechts Sub)
 *
 *  WP's columns-Block packt unter ~782px die Spalten untereinander; das ist
 *  für uns OK. Inline-Styles in der Pattern setzen Schriftgrößen pro Spalte.
 * -------------------------------------------------------------------------- */

.gg-intro-heading {
	max-width: 22ch;
	/* Mehr Luft zwischen Eyebrow („Filmproduktion + Werbeagentur · Wien · seit
	   2015") und dem Titel. Überschreibt den kleineren blockGap-Abstand
	   (:where()-Selektor, 0 Spezifität) gezielt nur hier. */
	margin: clamp(1.25rem, 3vw, 2.25rem) 0 0;
	color: var(--wp--preset--color--contrast);
	text-wrap: balance;
}

.wp-block-columns.gg-intro-cols {
	margin-top: clamp(1rem, 2vw, 1.5rem);
	align-items: start;
}

/* -------------------------------------------------------------------------- *
 *  Showcase — wp:image mit abgerundeten Ecken.
 *  Greift sowohl auf das figure-Wrap als auch das innere img zu, weil
 *  WP-Image-Block beides ohne unsere Klasse rendert. Aspect-Ratio 16:9
 *  per object-fit, damit Foto-Tausch optisch nicht aus dem Layout fällt.
 * -------------------------------------------------------------------------- */

.gg-showcase {
	margin: 0 auto;
	max-width: 1400px;
}

.gg-showcase img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: clamp(20px, 2.6vw, 36px);
	background: var(--wp--preset--color--surface);
}

/* -------------------------------------------------------------------------- *
 *  Stats — Drei große Zahlen als Trust-Signal.
 *  <dl> ist semantisch passend (Term + Description), gleichzeitig ein Hint
 *  für Crawler/AI dass die Zahlen Schlüssel-Wert-Paare sind.
 * -------------------------------------------------------------------------- */

.gg-stats__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 4vw, 3rem);
	margin: 0;
	padding: 0;
	text-align: center;
}

@media (min-width: 720px) {
	.gg-stats__grid { grid-template-columns: repeat(3, 1fr); }
}

.gg-stats__item {
	margin: 0;
	border-top: 1px solid color-mix(in oklab, var(--wp--preset--color--contrast) 8%, transparent);
	padding-top: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 720px) {
	.gg-stats__item {
		border-top: 0;
		border-left: 1px solid color-mix(in oklab, var(--wp--preset--color--contrast) 8%, transparent);
		padding-top: 0;
		padding-left: clamp(1rem, 2vw, 1.75rem);
	}
	.gg-stats__item:first-child { border-left: 0; padding-left: 0; }
}

.gg-stats__num {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.75rem, 6vw, 5rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--contrast);
	margin: 0;
}

.gg-stats__label {
	margin: 0.4rem auto 0;
	font-size: 0.92rem;
	color: var(--wp--preset--color--muted);
	line-height: 1.45;
	max-width: 24ch;
}

/* -------------------------------------------------------------------------- *
 *  Client-Logos — leise Grayscale, hover-color als Lebenszeichen.
 * -------------------------------------------------------------------------- */

.gg-clients__caption {
	margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
}

.gg-clients__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 2rem);
	align-items: center;
	justify-items: center;
}

@media (min-width: 520px)  { .gg-clients__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 760px)  { .gg-clients__grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .gg-clients__grid { grid-template-columns: repeat(6, 1fr); } }

.gg-clients__item {
	width: 100%;
	max-width: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gg-clients__item img {
	max-width: 100%;
	max-height: 56px;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(1) brightness(2) contrast(1.1);
	opacity: 0.65;
	transition: filter 320ms ease, opacity 320ms ease;
}

.gg-clients__item img:hover {
	filter: none;
	opacity: 1;
}

/* -------------------------------------------------------------------------- *
 *  Pricing — drei Programm-Karten + projektbezogene Produktionen.
 *  Featured-Card (mittlere) hebt sich per Akzent-Border und subtle Lift ab.
 * -------------------------------------------------------------------------- */

.wp-block-group.gg-pricing-grid {
	max-width: 1200px;
	margin-inline: auto !important;
	width: 100%;
}

.gg-pricing-card {
	background: color-mix(in oklab, var(--wp--preset--color--surface) 92%, transparent);
	border: 1px solid color-mix(in oklab, var(--wp--preset--color--contrast) 6%, transparent);
	border-radius: 32px;
	padding: clamp(1.75rem, 3vw, 2.5rem) !important;
	text-align: left;
	transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
	            border-color 320ms ease;
	display: flex !important;
	flex-direction: column;
	gap: 0.75rem;
}

.gg-pricing-card:hover {
	transform: translateY(-3px);
	border-color: color-mix(in oklab, var(--wp--preset--color--contrast) 16%, transparent);
}

.gg-pricing-card--featured {
	border-color: color-mix(in oklab, var(--wp--preset--color--accent-2) 60%, transparent) !important;
	background: color-mix(in oklab, var(--wp--preset--color--accent-2) 5%, var(--wp--preset--color--surface));
}

.gg-pricing-card__name {
	margin: 0 !important;
}

.gg-pricing-card__price {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 3.2vw, 2.6rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast);
}
.gg-pricing-card__price strong { font-weight: 800; }
.gg-pricing-card__price span {
	font-size: 0.5em;
	font-weight: 500;
	color: var(--wp--preset--color--muted);
	margin-left: 0.2em;
}

.gg-pricing-card__terms {
	margin: 0;
	font-size: 0.82rem;
	color: var(--wp--preset--color--muted);
	line-height: 1.45;
}

.gg-pricing-card__list {
	margin: 0.6rem 0 0;
	padding-left: 1.1rem;
	font-size: 0.95rem;
	line-height: 1.5;
}
.gg-pricing-card__list li {
	margin-bottom: 0.45rem;
	color: var(--wp--preset--color--contrast);
}
.gg-pricing-card__list li::marker {
	color: var(--wp--preset--color--accent);
}

.gg-pricing-project {
	/* contentSize:900px im Block constrained nur die KINDER; der Box-Rahmen
	   selbst spannte sonst die volle Section-Breite (1400px) und wirkte breiter
	   als die drei Preis-Karten (1200px) darüber. Hier auf Karten-Breite ziehen. */
	max-width: 1200px;
	margin-inline: auto;
	border: 1px dashed color-mix(in oklab, var(--wp--preset--color--contrast) 18%, transparent);
	border-radius: 24px;
	padding: clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.5rem);
	background: transparent;
	text-align: left;
}

.gg-pricing-project__h {
	margin: 0 0 0.4rem !important;
	color: var(--wp--preset--color--contrast);
}

/* -------------------------------------------------------------------------- *
 *  Hero-USPs — zwei wp:columns-Headings + Paragraphen direkt unter Hero.
 *  Sitzt auf dem schwarzen Body-Background, kein eigenes Card-Frame.
 * -------------------------------------------------------------------------- */

.gg-hero-usps .wp-block-column h3 {
	color: var(--wp--preset--color--contrast);
}

/* -------------------------------------------------------------------------- *
 *  „Drei Säulen" + „Drei Dinge" + „Kundenstimmen"
 *
 *  Alle drei nutzen WP grid-layout-Blocks mit minimumColumnWidth. WP zieht
 *  die auto-fit-Columns über den vollen Content-Bereich; wir zentrieren das
 *  Grid mit max-width + auto-margins, damit die Karten ein geschlossenes Set
 *  bilden statt sich zu „verlieren". */

.wp-block-group.gg-usps-grid,
.wp-block-group.gg-services-grid,
.wp-block-group.gg-testimonials-grid {
	max-width: 1100px;
	margin-inline: auto !important;  /* WP Layout-Block überschreibt sonst */
	width: 100%;
}

.wp-block-group.gg-services-grid,
.wp-block-group.gg-testimonials-grid {
	max-width: 1200px;
}

.gg-usps-heading,
.gg-services-heading,
.gg-testimonials-heading,
.gg-references-heading {
	max-width: 22ch;
	margin: 0 auto;
	color: var(--wp--preset--color--contrast);
	text-wrap: balance;
}

/* Kompakter „Herz, Hirn & G'spia"-Fließtext — zentriert, lesbare Zeilenlänge. */
.gg-usps-lead {
	max-width: 64ch;
	margin: clamp(1rem, 2vw, 1.5rem) auto 0;
	color: var(--wp--preset--color--muted);
}

/* -------------------------------------------------------------------------- *
 *  Cards / Boxes — centered content (midu-style)
 *  Generischer Block-Style „GG Card" für wp:group-Boxen.
 *  Wird von Drei-Dinge, Drei-Säulen, Testimonials gleichermaßen genutzt.
 * -------------------------------------------------------------------------- */

.gg-card,
.wp-block-group.is-style-gg-card {
	background: color-mix(in oklab, var(--wp--preset--color--surface) 92%, transparent);
	border: 1px solid color-mix(in oklab, var(--wp--preset--color--contrast) 6%, transparent);
	border-radius: 32px;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
	            border-color 320ms ease;
	text-align: center;
}

.gg-card:hover,
.wp-block-group.is-style-gg-card:hover {
	transform: translateY(-3px);
	border-color: color-mix(in oklab, var(--wp--preset--color--contrast) 16%, transparent);
}

/* Children sollten auch centered alignment haben. */
.wp-block-group.is-style-gg-card > * {
	margin-left: auto;
	margin-right: auto;
}

/* -------------------------------------------------------------------------- *
 *  Reference Cards — Midu-Style
 *  Bild fullscreen, Tags oben (links + rechts split), Title + Excerpt unten.
 * -------------------------------------------------------------------------- */

.gg-refs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
}

.gg-ref {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 32px;
	background: var(--wp--preset--color--surface);
	aspect-ratio: 4 / 3;
	color: var(--wp--preset--color--contrast);
	isolation: isolate;
	transition: transform 360ms cubic-bezier(0.2, 0.7, 0.2, 1);
	text-decoration: none;
}

.gg-ref:hover {
	transform: translateY(-3px);
}

.gg-ref__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.gg-ref:hover .gg-ref__img { transform: scale(1.05); }

/* Top gradient für Tag-Lesbarkeit, bottom für Title. */
.gg-ref::before,
.gg-ref::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	z-index: 1;
	pointer-events: none;
}

.gg-ref::before {
	top: 0;
	height: 40%;
	background: linear-gradient(to bottom,
		color-mix(in oklab, var(--wp--preset--color--base) 65%, transparent) 0%,
		transparent 100%);
}

.gg-ref::after {
	bottom: 0;
	height: 65%;
	background: linear-gradient(to top,
		color-mix(in oklab, var(--wp--preset--color--base) 92%, transparent) 0%,
		transparent 100%);
}

.gg-ref__topbar {
	position: absolute;
	top: clamp(1rem, 2vw, 1.5rem);
	left: clamp(1rem, 2vw, 1.5rem);
	right: clamp(1rem, 2vw, 1.5rem);
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0.5rem;
	pointer-events: none;
}

.gg-ref__tags-left,
.gg-ref__tags-right {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.gg-ref__tags-right { justify-content: flex-end; }

.gg-ref__tag {
	display: inline-block;
	padding: 0.4em 0.95em;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	border: 1px solid color-mix(in oklab, var(--wp--preset--color--contrast) 30%, transparent);
	border-radius: 999px;
	background: color-mix(in oklab, var(--wp--preset--color--base) 35%, transparent);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.gg-ref__inner {
	position: absolute;
	left: clamp(1rem, 2vw, 1.75rem);
	right: clamp(1rem, 2vw, 1.75rem);
	bottom: clamp(1rem, 2vw, 1.75rem);
	z-index: 2;
	display: grid;
	gap: 0.5rem;
}

.gg-ref__title {
	font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
	font-weight: 600;
	font-size: clamp(1.3rem, 2vw, 1.75rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast);
	margin: 0;
}

.gg-ref__excerpt {
	font-size: 0.95rem;
	line-height: 1.5;
	color: color-mix(in oklab, var(--wp--preset--color--contrast) 75%, transparent);
	margin: 0;
}

/* -------------------------------------------------------------------------- *
 *  Referenz-Lightbox (natives <dialog>) — Detail/Posting-Text je Referenz.
 * -------------------------------------------------------------------------- */
.gg-lightbox {
	width: min(880px, 92vw);
	max-width: 92vw;
	max-height: 90vh;
	padding: 0;
	border: none;
	border-radius: 24px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.gg-lightbox::backdrop {
	background: color-mix(in oklab, var(--wp--preset--color--base) 78%, transparent);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.gg-lightbox[open] { display: block; }

.gg-lightbox__panel {
	max-height: 90vh;
	overflow-y: auto;
}

.gg-lightbox__close {
	position: absolute;
	top: 0.65rem;
	right: 0.65rem;
	z-index: 3;
	width: 2.6rem;
	height: 2.6rem;
	display: grid;
	place-items: center;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: var(--wp--preset--color--contrast);
	background: color-mix(in oklab, var(--wp--preset--color--surface) 82%, transparent);
	border: 1px solid color-mix(in oklab, var(--wp--preset--color--contrast) 14%, transparent);
	border-radius: 999px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.gg-lightbox__close:hover {
	background: color-mix(in oklab, var(--wp--preset--color--contrast) 12%, var(--wp--preset--color--surface));
}

.gg-lightbox__media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
}

.gg-lightbox__media iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.gg-lightbox__content {
	padding: clamp(1.25rem, 3vw, 2rem);
	display: grid;
	gap: 0.75rem;
}

.gg-lightbox__tags {
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.gg-lightbox__title {
	font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
	font-weight: 700;
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0;
}

.gg-lightbox__body {
	font-size: 1.05rem;
	line-height: 1.65;
	color: color-mix(in oklab, var(--wp--preset--color--contrast) 85%, transparent);
}

.gg-lightbox__body > :first-child { margin-top: 0; }
.gg-lightbox__body > :last-child { margin-bottom: 0; }

.gg-lightbox__actions { margin: 0.5rem 0 0; }

.gg-lightbox__full {
	display: inline-block;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* -------------------------------------------------------------------------- *
 *  Kontakt-Formular + Danke-Seite.
 *
 *  Native HTML-Form mit Honeypot. Felder werden bei Fehler aus dem Server-
 *  side-Transient vorbefüllt; Error-Texte stehen unter den Feldern als
 *  <em class="gg-contact-form__err">. has-error-Klasse am <form> ist Hook
 *  für globales Styling (subtle red border).
 * -------------------------------------------------------------------------- */

.gg-contact-section { color: var(--wp--preset--color--contrast); }
.gg-contact-heading { color: var(--wp--preset--color--contrast); text-wrap: balance; }

.gg-contact-form {
	margin: clamp(2rem, 4vw, 3.5rem) auto 0;
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
	max-width: 720px;
}

/* Honeypot — visually + accessibility hidden */
.gg-contact-form__hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
}

.gg-contact-form__notice {
	background: color-mix(in oklab, var(--wp--preset--color--accent-2) 20%, transparent);
	border: 1px solid color-mix(in oklab, var(--wp--preset--color--accent-2) 50%, transparent);
	color: var(--wp--preset--color--contrast);
	padding: 0.85rem 1rem;
	border-radius: 14px;
	font-size: 0.95rem;
	line-height: 1.5;
}

.gg-contact-form__row { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.gg-contact-form__row--2 { grid-template-columns: 1fr; }
@media (min-width: 600px) {
	.gg-contact-form__row--2 { grid-template-columns: 1fr 1fr; }
}

.gg-contact-form__field {
	display: grid;
	gap: 0.35rem;
}
.gg-contact-form__field--full { grid-column: 1 / -1; }

.gg-contact-form__label {
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	font-weight: 600;
}
.gg-contact-form__req {
	color: var(--wp--preset--color--accent);
	margin-left: 0.2em;
}

.gg-contact-form input[type="text"],
.gg-contact-form input[type="email"],
.gg-contact-form input[type="tel"],
.gg-contact-form textarea {
	width: 100%;
	box-sizing: border-box;
	background: color-mix(in oklab, var(--wp--preset--color--surface) 88%, transparent);
	border: 1px solid color-mix(in oklab, var(--wp--preset--color--contrast) 12%, transparent);
	border-radius: 14px;
	padding: 0.8rem 1rem;
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}

.gg-contact-form input:focus,
.gg-contact-form textarea:focus {
	outline: 0;
	border-color: color-mix(in oklab, var(--wp--preset--color--contrast) 45%, transparent);
	background: color-mix(in oklab, var(--wp--preset--color--surface) 96%, transparent);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--wp--preset--color--accent) 22%, transparent);
}

.gg-contact-form input[aria-invalid="true"],
.gg-contact-form textarea[aria-invalid="true"] {
	border-color: color-mix(in oklab, var(--wp--preset--color--accent-2) 70%, transparent);
}

.gg-contact-form textarea {
	resize: vertical;
	min-height: 140px;
}

.gg-contact-form__err {
	display: block;
	font-style: normal;
	font-size: 0.85rem;
	line-height: 1.4;
	color: color-mix(in oklab, var(--wp--preset--color--accent-2) 88%, var(--wp--preset--color--contrast));
}

.gg-contact-form__submit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.9rem;
	margin-top: clamp(0.5rem, 1vw, 1rem);
}

.gg-contact-form__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.95em 2.2em;
	border-radius: 999px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border: 0;
	cursor: pointer;
	transition: transform 220ms cubic-bezier(0.2,0.7,0.2,1), background-color 220ms ease;
}
.gg-contact-form__cta:hover { transform: translateY(-2px); }

.gg-contact-form__hint {
	margin: 0;
	max-width: 50ch;
	text-align: center;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}
.gg-contact-form__hint a {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.gg-contact-direct {
	margin: clamp(2rem, 4vw, 3rem) auto 0;
	text-align: center;
	color: var(--wp--preset--color--muted);
	font-size: 0.95rem;
}
.gg-contact-direct a {
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
}
.gg-contact-direct__sep {
	margin: 0 0.6em;
	color: color-mix(in oklab, var(--wp--preset--color--muted) 50%, transparent);
}

/* -------------------------------------------------------------------------- *
 *  Danke-Seite — leise, viel Luft, „Sonnige Grüße"-Vibe.
 * -------------------------------------------------------------------------- */

.gg-thanks-heading { color: var(--wp--preset--color--contrast); text-wrap: balance; }

/* -------------------------------------------------------------------------- *
 *  Page-Title (wp:post-title) auf normalen Pages — proportional zum Content.
 *  Ohne diese Regel zieht der default-h1-Style aus theme.json (font-weight 900,
 *  line-height 0.92) den Title auf hero-große Dimensionen.
 * -------------------------------------------------------------------------- */

.gg-page-title__h.wp-block-post-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 4.5vw, 3.5rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--contrast);
	text-wrap: balance;
}

/* Wenn Legal- oder About-Pattern direkt unter dem Page-Title kommt, brauchen
   wir das volle Spacing-70-Top-Padding nicht — der Page-Title hat schon ein
   Padding oben angehängt. */
.gg-page-title + .wp-block-post-content > .gg-legal,
.gg-page-title + .wp-block-post-content > .gg-about-section {
	padding-top: var(--wp--preset--spacing--30) !important;
}

/* -------------------------------------------------------------------------- *
 *  Page-Hero — Cover-Block-Header pro Seite (Über Uns, Kontakt, Referenzen,
 *  Legal …). Trägt den großen Seiten-Titel im/über dem Beitragsbild und ersetzt
 *  den früheren wp:post-title. Platzhalter: ohne Featured Image zeigt der Cover
 *  nur die Base-Overlay-Farbe — sieht bewusst wie eine gesetzte Fläche aus.
 * -------------------------------------------------------------------------- */

.gg-page-hero.wp-block-cover {
	align-items: flex-end;
	justify-content: flex-start;
	min-height: clamp(40vh, 48vh, 60vh);
	padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 3vw, 3rem);
	color: var(--wp--preset--color--contrast);
}

.gg-page-hero .wp-block-cover__inner-container {
	width: 100%;
	max-width: 1400px;
	margin-inline: auto;
}

.gg-page-hero__title.wp-block-heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.75rem, 8vw, 6rem);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--contrast);
	text-wrap: balance;
}

.gg-page-hero__eyebrow.wp-block-paragraph {
	margin: 0 0 0.6rem;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-2);
}

/* -------------------------------------------------------------------------- *
 *  Legal-Pages — Impressum / AGB / Datenschutz.
 *  Lange-Text-Layout, lesbar, mit semantischer <dl> für Impressum-Daten.
 * -------------------------------------------------------------------------- */

.gg-legal h2 {
	margin-top: clamp(1.5rem, 3vw, 2.25rem) !important;
	margin-bottom: 0.4rem !important;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--contrast);
}

.gg-legal p {
	line-height: 1.65;
	color: color-mix(in oklab, var(--wp--preset--color--muted) 95%, var(--wp--preset--color--contrast));
}

.gg-legal__dl {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.4rem 1.5rem;
	margin: 0;
}

@media (min-width: 600px) {
	.gg-legal__dl { grid-template-columns: 180px 1fr; gap: 1rem 1.5rem; }
}

.gg-legal__dl dt {
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding-top: 0.3rem;
}

.gg-legal__dl dd {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	line-height: 1.55;
}

.gg-legal__hint {
	display: block;
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
	margin-top: 0.2rem;
}

/* -------------------------------------------------------------------------- *
 *  About — Robert-Loop + Bio + Credentials.
 *  Image-Sequenz wird per JS gewechselt (siehe main.js, data-gg-robert-loop).
 *  Fallback ohne JS: zeigt das erste Bild statisch.
 * -------------------------------------------------------------------------- */

.gg-robert {
	margin: 0;
	width: 100%;
	max-width: 480px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	margin-inline: auto;
	box-shadow: 0 24px 60px -20px rgba(0,0,0,0.4),
	            inset 0 0 0 1px color-mix(in oklab, var(--wp--preset--color--contrast) 6%, transparent);
}

.gg-robert img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gg-about-creds {
	list-style: none;
	margin: clamp(1.25rem, 2.5vw, 2rem) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	font-size: 0.92rem;
	color: var(--wp--preset--color--muted);
}

.gg-about-creds li {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	line-height: 1.4;
}

.gg-about-creds img {
	width: 44px;
	height: 44px;
	object-fit: contain;
	border-radius: 8px;
	background: #fff;
	padding: 4px;
}

.gg-about-creds__dot {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 44px;
	height: 44px;
	color: var(--wp--preset--color--accent);
	font-size: 1.4rem;
}

/* -------------------------------------------------------------------------- *
 *  FAQ — native <details>/<summary>. Browser-Default-Accordion, schmal
 *  gestyled. Crawler-freundlich weil der Text auch im HTML-Quellcode liegt.
 * -------------------------------------------------------------------------- */

.gg-faq {
	margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.gg-faq__item {
	border: 1px solid color-mix(in oklab, var(--wp--preset--color--contrast) 8%, transparent);
	border-radius: 18px;
	background: color-mix(in oklab, var(--wp--preset--color--surface) 92%, transparent);
	overflow: hidden;
	transition: border-color 280ms ease;
}

.gg-faq__item[open] {
	border-color: color-mix(in oklab, var(--wp--preset--color--accent) 50%, transparent);
}

.gg-faq__q {
	list-style: none;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: clamp(1rem, 1.8vw, 1.4rem) clamp(1.2rem, 2vw, 1.6rem);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.05rem, 1.3vw, 1.2rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast);
	user-select: none;
}
.gg-faq__q::-webkit-details-marker { display: none; }

.gg-faq__icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	position: relative;
	margin-top: 0.35em;
}
.gg-faq__icon::before,
.gg-faq__icon::after {
	content: "";
	position: absolute;
	background: var(--wp--preset--color--contrast);
	border-radius: 1px;
	transition: transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 280ms ease;
}
.gg-faq__icon::before { top: 50%; left: 0;   right: 0;  height: 2px; transform: translateY(-50%); }
.gg-faq__icon::after  { left: 50%; top: 0;   bottom: 0; width: 2px;  transform: translateX(-50%); }
.gg-faq__item[open] .gg-faq__icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }

.gg-faq__a {
	padding: 0 clamp(1.2rem, 2vw, 1.6rem) clamp(1rem, 1.8vw, 1.4rem);
	color: var(--wp--preset--color--muted);
}
.gg-faq__a p {
	margin: 0;
	line-height: 1.65;
	font-size: clamp(0.95rem, 1.05vw, 1.02rem);
}

/* -------------------------------------------------------------------------- *
 *  Footer
 *
 *  Vier-Spalten-Grid: Brand+Tagline+Socials | Navigation | Kontakt | Legal.
 *  Unten Copyright + UID. Auf mobile stapeln die WP-Columns automatisch.
 * -------------------------------------------------------------------------- */

.gg-footer {
	border-top: 1px solid color-mix(in oklab, var(--wp--preset--color--contrast) 8%, transparent);
	margin-top: clamp(2rem, 4vw, 4rem);
	color: var(--wp--preset--color--muted);
}

.gg-footer__brand {
	display: inline-flex;
	height: calc(var(--gg-logo-size, 2.8rem) * 0.9);
	margin-bottom: 0.9rem;
}
.gg-footer__brand img {
	height: 100%;
	width: auto;
	display: block;
}

.gg-footer__tagline {
	max-width: 36ch;
	margin: 0 0 1.25rem;
}

.gg-footer__social {
	display: flex;
	gap: 0.6rem;
	align-items: center;
}
.gg-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	color: var(--wp--preset--color--contrast);
	border: 1px solid color-mix(in oklab, var(--wp--preset--color--contrast) 14%, transparent);
	transition: background-color 220ms ease, transform 220ms ease, border-color 220ms ease;
}
.gg-footer__social a:hover {
	background: color-mix(in oklab, var(--wp--preset--color--contrast) 8%, transparent);
	border-color: color-mix(in oklab, var(--wp--preset--color--contrast) 28%, transparent);
	transform: translateY(-2px);
}

.gg-footer__h {
	margin: 0 0 0.9rem !important;
}

.gg-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}
.gg-footer__list a {
	color: var(--wp--preset--color--contrast);
	font-size: 0.95rem;
	transition: color 220ms ease;
}
.gg-footer__list a:hover {
	color: var(--wp--preset--color--accent);
}

.gg-footer__addr {
	font-style: normal;
	font-size: 0.95rem;
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
}
.gg-footer__addr a {
	color: var(--wp--preset--color--contrast);
}
.gg-footer__addr a:hover { color: var(--wp--preset--color--accent); }

.gg-footer__bottom {
	border-top: 1px solid color-mix(in oklab, var(--wp--preset--color--contrast) 6%, transparent);
	padding-top: clamp(1rem, 2vw, 1.5rem);
	margin-top: clamp(1.5rem, 3vw, 2rem);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	font-size: 0.8rem;
	color: color-mix(in oklab, var(--wp--preset--color--muted) 75%, transparent);
}
.gg-footer__bottom p { margin: 0; }

/* -------------------------------------------------------------------------- *
 *  Highlight-Helpers
 * -------------------------------------------------------------------------- */

.muted  { color: var(--wp--preset--color--muted); }
.accent { color: var(--wp--preset--color--accent); }

/* Visuell versteckt, aber für Screenreader + Crawler/LLMs im DOM lesbar.
   Genutzt z.B. für den echten H1-Text hinter dem Hero-Logo. */
.gg-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------- *
 *  Scroll-Reveal
 * -------------------------------------------------------------------------- */

[data-gg-reveal] {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 800ms cubic-bezier(0.2, 0.7, 0.2, 1),
	            transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: var(--reveal-delay, 0ms);
}

[data-gg-reveal].is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	[data-gg-reveal] {
		opacity: 1; transform: none; transition: none;
	}
	.gg-card, .gg-ref, .gg-ref__img, .gg-burger-dot {
		transition: none;
	}
}

/* ========================================================================== *
 *  Shared eyebrow kicker (ohne Inline-Styles nutzbar).
 * ========================================================================== */
.gg-eyebrow {
	margin: 0 0 0.4rem;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-2);
}

/* ========================================================================== *
 *  Blog — Einzelbeitrag (single.html).  Lange-Text-Layout, ruhig & lesbar.
 * ========================================================================== */
.gg-article__eyebrow.wp-block-post-terms {
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-2);
}
.gg-article__eyebrow.wp-block-post-terms a { text-decoration: none; }

.gg-article__title.wp-block-post-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.1rem, 5vw, 3.4rem);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.035em;
	color: var(--wp--preset--color--contrast);
	text-wrap: balance;
}

.gg-article__meta { align-items: center; color: var(--wp--preset--color--muted); }
.gg-article__meta .wp-block-post-author-name::before {
	content: "·";
	margin-right: 0.6em;
	opacity: 0.6;
}

.gg-article__cover.wp-block-post-featured-image img,
.gg-article__cover img {
	border-radius: 24px;
	width: 100%;
}

/* Lesefluss im Beitragstext */
.gg-article .wp-block-post-content > p,
.gg-article .wp-block-post-content > ul,
.gg-article .wp-block-post-content > ol {
	font-size: clamp(1.05rem, 1.3vw, 1.2rem);
	line-height: 1.75;
	color: color-mix(in oklab, var(--wp--preset--color--contrast) 82%, var(--wp--preset--color--muted));
}
.gg-article .wp-block-post-content > * + * { margin-top: 1.4em; }
.gg-article .wp-block-post-content h2 {
	margin-top: 1.8em;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast);
}
.gg-article .wp-block-post-content h3 {
	margin-top: 1.5em;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
	color: var(--wp--preset--color--contrast);
}
.gg-article .wp-block-post-content img { border-radius: 18px; }
.gg-article .wp-block-post-content blockquote {
	margin: 1.6em 0;
	padding-left: 1.1em;
	border-left: 3px solid var(--wp--preset--color--accent);
	font-size: clamp(1.15rem, 1.6vw, 1.4rem);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
}

.gg-article__foot {
	align-items: center;
	border-top: 1px solid color-mix(in oklab, var(--wp--preset--color--contrast) 10%, transparent);
	color: var(--wp--preset--color--muted);
}
.gg-article__back a { text-decoration: none; }
.gg-article__back a:hover { color: var(--wp--preset--color--accent); }
.gg-article__tags.wp-block-post-terms { color: var(--wp--preset--color--muted); }

/* Case-Study (single-referenz.html): Eyebrow als post-terms im Cover-Hero
   (die bestehende .gg-page-hero__eyebrow-Regel zielt nur auf Paragraphen). */
.gg-page-hero__eyebrow.wp-block-post-terms {
	margin: 0 0 0.6rem;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-2);
}
.gg-page-hero__eyebrow.wp-block-post-terms a { text-decoration: none; color: inherit; }

/* Case-Study (single-referenz.html): Meta-Zeile im Cover-Hero. */
.gg-ref-hero__meta { align-items: center; color: var(--wp--preset--color--muted); }
.gg-ref-hero__meta .wp-block-post-terms a { text-decoration: none; color: inherit; }
.gg-ref-article .wp-block-embed { margin-block: clamp(1.5rem, 3vw, 2.5rem); }

/* ========================================================================== *
 *  Blog — Übersicht (index.html).  Karten-Grid mit Beitragsbild.
 * ========================================================================== */
.gg-blog-head__h { color: var(--wp--preset--color--contrast); text-wrap: balance; }

.gg-post-card {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	text-align: left;
}
.gg-post-card__img img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
	transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.gg-post-card:hover .gg-post-card__img img { transform: scale(1.03); }
.gg-post-card__cat.wp-block-post-terms {
	margin-top: 0.4rem;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-2);
}
.gg-post-card__cat.wp-block-post-terms a { text-decoration: none; }
.gg-post-card__title a { text-decoration: none; color: var(--wp--preset--color--contrast); }
.gg-post-card__title a:hover { color: var(--wp--preset--color--accent); }
.gg-post-card__excerpt { color: var(--wp--preset--color--muted); line-height: 1.55; }
.gg-blog-pagination { gap: 0.5rem; }

/* ========================================================================== *
 *  Landing-Pages (templates/page-landing.html + patterns/landing.php).
 *  Gleiche Designsprache wie die Startseite, aber single-focused (ein CTA).
 * ========================================================================== */

/* Schlanker Landing-Header: Logo + ein CTA, keine Navigation. */
.gg-header--landing { justify-content: space-between; }
.gg-header__cta {
	display: inline-flex;
	align-items: center;
	padding: 0.6rem 1.4rem;
	border-radius: 999px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
	transition: transform 220ms ease, background-color 220ms ease;
}
.gg-header__cta:hover { transform: translateY(-2px); color: var(--wp--preset--color--base); }

/* Landing-Body: kein Top-Padding (Hero ist full-bleed wie auf der Startseite). */
body.gg-landing { padding-top: 0; }

/* Hero-Band — reused Bubble-Shader-Canvas (.gg-hero__canvas) als Hintergrund. */
.gg-lp-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: min(92vh, 880px);
	padding: clamp(7rem, 14vh, 10rem) clamp(1rem, 3vw, 3rem) clamp(3rem, 7vh, 5rem);
	overflow: hidden;
	background: var(--wp--preset--color--base);
}
/* Bubble-Canvas und Showreel-Video liegen als direkte Kinder in der Hero-
   Section. Deren constrained-Layout (contentSize) kappt sonst ALLE direkten
   Kinder per max-width + margin-inline:auto — auch diese absolut positionierten
   Hintergrund-Layer, die dadurch mittig „geboxt" statt full-bleed erscheinen.
   (.gg-lp-hero__media nutzt die .gg-hero__media-Optik aus hero.css.) */
.gg-lp-hero__canvas,
.gg-lp-hero__media {
	max-width: none !important;
	margin-inline: 0 !important;
}
.gg-lp-hero__content {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	gap: clamp(0.9rem, 2vw, 1.5rem);
}
.gg-lp-hero__eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-2);
}
.gg-lp-hero__title { margin: 0; text-wrap: balance; }
.gg-lp-hero__title strong { color: var(--wp--preset--color--accent); }
.gg-lp-hero__sub {
	margin: 0;
	max-width: 42ch;
	color: color-mix(in oklab, var(--wp--preset--color--contrast) 88%, var(--wp--preset--color--muted));
}
.gg-lp-hero__cta { margin-top: 0.4rem; }
.gg-lp-hero__note { margin: 0; color: var(--wp--preset--color--muted); }

/* Benefit-Bullets: skimmbar, Häkchen statt Disc. */
.gg-lp-bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.gg-lp-bullets li {
	position: relative;
	padding-left: 2rem;
	font-size: clamp(1.02rem, 1.3vw, 1.18rem);
	line-height: 1.55;
	color: color-mix(in oklab, var(--wp--preset--color--contrast) 80%, var(--wp--preset--color--muted));
}
.gg-lp-bullets li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0.05em;
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}
.gg-lp-bullets li strong { color: var(--wp--preset--color--contrast); }

/* Problem→Lösung Prose */
.gg-lp-prose h2 { color: var(--wp--preset--color--contrast); text-wrap: balance; }
.gg-lp-prose p { color: color-mix(in oklab, var(--wp--preset--color--contrast) 80%, var(--wp--preset--color--muted)); }

/* Social Proof — zwei Karten nebeneinander. */
.gg-lp-proof .wp-block-column { display: flex; }
.gg-lp-proof .is-style-gg-card { text-align: left; width: 100%; }
.gg-lp-proof__by { margin-bottom: 0 !important; }

/* Value-Stack */
.gg-lp-stack__list { list-style: none; margin: 0; padding: 0; }
.gg-lp-stack__list li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid color-mix(in oklab, var(--wp--preset--color--contrast) 8%, transparent);
	color: var(--wp--preset--color--contrast);
}
.gg-lp-stack__list li span { color: var(--wp--preset--color--muted); white-space: nowrap; }
.gg-lp-stack__total { margin: 0; color: var(--wp--preset--color--muted); }
.gg-lp-stack__total strong { color: var(--wp--preset--color--contrast); }

/* Dringlichkeit — leiser Akzent-Hinweis, kein Fake-Countdown. */
.gg-lp-urgency {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--accent-2);
	max-width: 56ch;
	margin-inline: auto;
}

/* Crossroads-Close CTA */
.gg-lp-cta { scroll-margin-top: 6rem; }
.gg-lp-cta h2 { color: var(--wp--preset--color--contrast); text-wrap: balance; }

/* Eingebettetes Kontaktformular in der Landing-CTA: linksbündig, volle Breite. */
.gg-lp-cta .gg-contact-form { text-align: left; margin-inline: auto; }
.gg-lp-cta .wp-block-shortcode { margin: 0; }

/* ========================================================================== *
 *  Referenz-Video — full-width 16:9 (greengood/ref-video).
 * ========================================================================== */
.gg-ref-video {
	margin-block: clamp(1.5rem, 4vw, 3rem);
}
.gg-ref-video__frame {
	position: relative;
	width: min(100% - clamp(2rem, 6vw, 5rem), 1400px);
	margin-inline: auto;
	aspect-ratio: 16 / 9;
	border-radius: clamp(16px, 2vw, 28px);
	overflow: hidden;
	background: #000;
	box-shadow: 0 30px 80px -40px rgba(0,0,0,0.8);
}
.gg-ref-video__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* ========================================================================== *
 *  Fixed-Header-Korrekturen.
 * ========================================================================== */

/* Admin-Bar-Versatz: ohne das verschwindet der fixe Header für eingeloggte
   User hinter der 32px/46px hohen WP-Admin-Bar („halb über dem oberen Rand"). */
body.admin-bar .gg-header { top: var(--wp-admin--admin-bar--height, 32px); }
body.admin-bar .gg-menu   { top: 0; }
@media screen and (max-width: 782px) {
	body.admin-bar .gg-header { top: 46px; }
}

/* Hero-/Cover-Seiten (Landing + Cover-Header-Seiten): kein Top-Padding und
   transparenter Header über dem Bild → der schwarze Streifen oben verschwindet,
   der Hero/Cover läuft randlos bis ganz nach oben. Beim Scrollen wird der Header
   wie gewohnt solide (data-state="scrolled" aus main.js). */
body.gg-landing,
body.gg-has-cover { padding-top: 0; }

body.gg-landing .gg-header,
body.gg-has-cover .gg-header {
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
}
body.gg-landing .gg-header[data-state="scrolled"],
body.gg-has-cover .gg-header[data-state="scrolled"] {
	background: color-mix(in oklab, var(--wp--preset--color--base) 70%, transparent);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	backdrop-filter: saturate(140%) blur(14px);
	box-shadow: 0 1px 0 color-mix(in oklab, var(--wp--preset--color--contrast) 6%, transparent);
}

/* ========================================================================== *
 *  Footer-Menü „Für wen" → Landing-Pages.
 * ========================================================================== */
.gg-footer__top.gg-footer__top--5 { flex-wrap: wrap; }