/* ==================================================================
   ZIRBEROL PRESELL — zentrale Styles
   CI: Gold #C8A84E · Schwarz #1A1A1A · Sand #D5CFC4 · Dunkelrot #8B1A1A
   ================================================================== */

:root {
	--zb-gold: #0E3E3A;      /* Primär: Waldgrün */
	--zb-schwarz: #231F20;
	--zb-sand: #F1DAD6;      /* Pink */
	--zb-sand-hell: #F9EFEC; /* Pink Hell */
	--zb-dunkelrot: #0E3E3A; /* Handschrift in Grün */
	--zb-weiss: #FFFFFF;
}

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: 'Inter', Arial, Helvetica, sans-serif;
	color: var(--zb-schwarz);
	background: var(--zb-weiss);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

/* ------------------------------------------------------------------
   Header / Footer
   ------------------------------------------------------------------ */
.zb-header {
	background: var(--zb-gold);
	padding: 18px 20px;
	text-align: center;
}
.zb-header-inner img { max-height: 64px; width: auto; }
.zb-wordmark {
	font-weight: 800;
	font-size: 1.7rem;
	text-transform: uppercase;
	color: var(--zb-weiss);
	text-decoration: none;
	letter-spacing: 0.02em;
}
.zb-wordmark span {
	display: block;
	font-weight: 300;
	font-size: 0.75rem;
	letter-spacing: 0.55em;
	color: var(--zb-sand);
	margin-top: 2px;
}

.zb-footer {
	background: var(--zb-gold);
	color: rgba(255,255,255,0.85);
	text-align: center;
	padding: 56px 20px 40px;
	font-size: 0.85rem;
	line-height: 1.9;
}
.zb-footer p { margin: 0; }
.zb-footer-wordmark {
	color: var(--zb-weiss);
	font-weight: 700;
	font-size: 1.3rem;
	letter-spacing: 0.03em;
	margin-bottom: 6px;
}
.zb-footer-responsible { color: var(--zb-sand); font-weight: 500; }
.zb-footer-address { opacity: 0.7; }
.zb-footer-nav ul {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: flex;
	gap: 24px;
	justify-content: center;
}
.zb-footer-nav a { color: var(--zb-sand); text-decoration: underline; }
.zb-footer-nav a:hover { color: var(--zb-gold); }

.zb-main { display: block; }

/* ------------------------------------------------------------------
   Sektionen — Grundrhythmus
   ------------------------------------------------------------------ */
.zb-section {
	padding: 90px 24px;
}
@media (min-width: 782px) {
	.zb-section { padding: 120px 32px; }
}

/* Inline-Sektionsnummer: kursiv, Gold, 78 % der Headline-Größe.
   Umsetzung im Editor: Textfarbe Gold + kursiv → serialisiert als <mark>. */
h1 mark.has-inline-color,
h2 mark.has-inline-color,
h3 mark.has-inline-color {
	background: transparent !important;
	font-style: italic;
	font-weight: 600;
	font-size: 0.78em;
}
.zb-num {
	font-style: italic;
	font-weight: 600;
	font-size: 0.78em;
	color: var(--zb-gold);
	margin-right: 0.35em;
}
.zb-dark .zb-num,
.has-schwarz-background-color .zb-num { color: var(--zb-gold); }

/* Bridge am Sektionsende: Mini-Headline + Pfeil */
.zb-bridge {
	font-size: 1.55rem;
	font-weight: 500;
	line-height: 1.35;
	margin-top: 56px;
	font-style: normal;
	opacity: 1;
}
.zb-arrow {
	display: block;
	color: var(--zb-gold);
	font-size: 2rem;
	line-height: 1;
	margin-top: 14px;
	font-style: normal;
}
@media (min-width: 782px) {
	.zb-bridge { font-size: 1.9rem; }
	.zb-arrow { font-size: 2.4rem; }
}

/* ------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------ */
.zb-hero .wp-block-cover__inner-container {
	padding-bottom: 180px;
}
.zb-hero h1 { line-height: 1.08; }
.zb-hero .zb-tagline {
	font-style: italic;
	font-weight: 300;
	font-size: 1.25rem;
	color: var(--zb-sand);
}
.zb-scroll {
	position: absolute;
	bottom: 34px;
	left: 0;
	right: 0;
	text-align: center;
	color: var(--zb-gold);
	letter-spacing: 0.4em;
	font-size: 0.75rem;
	font-weight: 500;
}
.zb-scroll .zb-arrow { margin-top: 6px; display: block; }

/* ------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------ */
.zb-btn .wp-block-button__link,
.wp-block-button.zb-btn > a {
	background: var(--zb-gold);
	color: var(--zb-schwarz);
	font-weight: 700;
	padding: 18px 38px;
	border-radius: 4px;
	text-decoration: none;
	font-size: 1.05rem;
	letter-spacing: 0.01em;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.zb-btn .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(200, 168, 78, 0.35);
	color: var(--zb-schwarz);
}
.zb-btn-inline .wp-block-button__link {
	background: transparent;
	color: inherit;
	border: 2px solid var(--zb-gold);
	font-weight: 700;
	padding: 14px 30px;
	border-radius: 4px;
}
.zb-btn-inline .wp-block-button__link:hover {
	background: var(--zb-gold);
	color: var(--zb-schwarz);
}

/* ------------------------------------------------------------------
   Kategorie-Karten (Section 5) & Review-Karten (Section 9)
   ------------------------------------------------------------------ */
.zb-card {
	background: var(--zb-weiss);
	border: 1px solid rgba(26, 26, 26, 0.12);
	border-radius: 8px;
	padding: 30px 28px;
	height: 100%;
	box-sizing: border-box;
}
.zb-cat-label {
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--zb-gold);
	margin-bottom: 10px;
}
.zb-card h3 { margin: 0 0 10px; font-size: 1.25rem; }
.zb-card p { margin: 0; font-size: 0.95rem; line-height: 1.65; }

.zb-review-card {
	background: var(--zb-sand-hell);
	border-radius: 8px;
	padding: 28px;
	height: 100%;
	box-sizing: border-box;
}
.zb-stars { color: var(--zb-gold); letter-spacing: 0.15em; font-size: 1.05rem; }
.zb-review-title { font-style: italic; font-weight: 600; font-size: 1.15rem; margin: 8px 0; }
.zb-review-meta { font-size: 0.8rem; opacity: 0.6; margin-top: 12px; }

/* ------------------------------------------------------------------
   Vergleichstabelle (Section 6)
   ------------------------------------------------------------------ */
.zb-vergleich table {
	border-collapse: collapse;
	width: 100%;
	background: var(--zb-weiss);
	border: 1px solid rgba(26, 26, 26, 0.15);
	border-radius: 8px;
	overflow: hidden;
}
.zb-vergleich th {
	background: var(--zb-schwarz);
	color: var(--zb-gold);
	padding: 16px;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}
.zb-vergleich td {
	padding: 15px 16px;
	border-top: 1px solid rgba(26, 26, 26, 0.1);
	font-size: 0.95rem;
	vertical-align: top;
}
.zb-vergleich td:last-child { font-weight: 500; }

/* ------------------------------------------------------------------
   Mechanik-Schritte (Section 8)
   ------------------------------------------------------------------ */
.zb-step {
	display: flex;
	gap: 22px;
	align-items: flex-start;
	margin: 0 0 34px;
	text-align: left;
}
.zb-step-num {
	font-style: italic;
	font-weight: 600;
	font-size: 2.6rem;
	line-height: 1;
	color: var(--zb-gold);
	min-width: 52px;
}
.zb-step h3 { margin: 4px 0 6px; font-size: 1.15rem; }
.zb-step p { margin: 0; font-size: 0.98rem; }
.zb-step p.zb-step-num { font-size: 2.6rem; }
.zb-step-body > * { margin-top: 0; }
.zb-arrow p, p.zb-arrow { margin-top: 14px; }

/* ------------------------------------------------------------------
   FAQ (Section 10) — core/details
   ------------------------------------------------------------------ */
.zb-faq .wp-block-details {
	background: var(--zb-weiss);
	border: 1px solid rgba(26, 26, 26, 0.12);
	border-radius: 8px;
	padding: 0;
	margin-bottom: 14px;
}
.zb-faq summary {
	cursor: pointer;
	font-weight: 700;
	font-size: 1.05rem;
	padding: 20px 56px 20px 24px;
	position: relative;
	list-style: none;
}
.zb-faq summary::-webkit-details-marker { display: none; }
.zb-faq summary::after {
	content: '+';
	position: absolute;
	right: 22px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--zb-gold);
	font-size: 1.6rem;
	font-weight: 400;
}
.zb-faq details[open] summary::after { content: '–'; }
.zb-faq details > :not(summary) {
	padding: 0 24px 20px;
	margin: 0;
	font-size: 0.98rem;
}

/* Trust-Badges */
.zb-badge { text-align: center; padding: 10px; }
.zb-badge-icon { font-size: 1.9rem; color: var(--zb-gold); margin-bottom: 8px; }
.zb-badge p { margin: 0; font-size: 0.9rem; font-weight: 500; }

/* ------------------------------------------------------------------
   Akzente
   ------------------------------------------------------------------ */
.zb-handschrift {
	font-family: 'Allura', 'Brush Script MT', cursive;
	color: var(--zb-dunkelrot);
	font-weight: 700;
	font-size: 1.9em;
	line-height: 1.2;
}
.zb-lead {
	font-style: italic;
	font-size: 1.3rem;
	line-height: 1.55;
	font-weight: 300;
}
.zb-quote {
	border-left: 3px solid var(--zb-gold);
	padding-left: 24px;
	font-style: italic;
	font-size: 1.35rem;
	line-height: 1.5;
	font-weight: 300;
	margin: 40px auto;
	text-align: left;
}
.zb-brandline {
	font-style: italic;
	font-weight: 600;
	font-size: 2rem;
	color: var(--zb-gold);
	line-height: 1.2;
}

/* ------------------------------------------------------------------
   Video-Embed (16:9) & Eyebrow & Daten-Zeilen
   ------------------------------------------------------------------ */
.zb-video {
	position: relative;
	padding-top: 56.25%;
	border-radius: 8px;
	overflow: hidden;
	background: var(--zb-schwarz);
}
.zb-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.zb-eyebrow {
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--zb-gold);
	font-size: 0.78rem;
	font-weight: 700;
}
.zb-data p, p.zb-data {
	border-bottom: 1px solid rgba(26,26,26,0.12);
	padding: 10px 0;
	margin: 0;
	font-size: 0.95rem;
}
.zb-dark .zb-data p, .zb-dark p.zb-data { border-color: rgba(255,255,255,0.18); }

/* ------------------------------------------------------------------
   Fade-in beim Scrollen (JS setzt .zb-inview)
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
	body:not(.block-editor-iframe__body) .zb-fade {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity 0.7s ease, transform 0.7s ease;
	}
	body:not(.block-editor-iframe__body) .zb-fade.zb-inview {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------------------------------------
   Kleinigkeiten
   ------------------------------------------------------------------ */
.zb-presell .wp-block-cover { margin-top: 0; }
.wp-block-image img { border-radius: 8px; }
.zb-hero img, .wp-block-cover img { border-radius: 0; }


/* The Wald: Akzente auf dunklen (grünen) Flächen in Pink */
.zb-dark mark.has-inline-color, .wp-block-cover mark.has-inline-color { color: #F1DAD6 !important; }
.zb-dark .zb-arrow, .wp-block-cover .zb-arrow, .zb-dark .zb-scroll, .wp-block-cover .zb-scroll { color: #F1DAD6; }
.zb-dark .zb-cat-label, .wp-block-cover .zb-cat-label, .zb-dark .zb-eyebrow, .wp-block-cover .zb-eyebrow { color: #F1DAD6; }
.zb-dark .zb-handschrift, .wp-block-cover .zb-handschrift { color: #F1DAD6; }
.zb-dark h1, .zb-dark h2, .zb-dark h3, .wp-block-cover h1, .wp-block-cover h2 { color: #FFFFFF; }
.zb-dark .zb-quote { border-color: #F1DAD6; }
.zb-btn .wp-block-button__link { color: #FFFFFF; }
.zb-btn .wp-block-button__link:hover { color: #FFFFFF; box-shadow: 0 8px 24px rgba(14,62,58,0.35); }
.zb-dark .zb-btn .wp-block-button__link, .wp-block-cover .zb-btn .wp-block-button__link { background: #F1DAD6; color: #0E3E3A; }
.zb-handschrift { font-size: 2.3em; font-weight: 400; }