/* =========================================================================
   Warmduscher — gemeinsame Design-Tokens und Button-Basis
   Wird von jedem Element als Abhängigkeit geladen.

   Alle Custom Properties sind mit --wd- prefixed, alle Klassen mit .wd-,
   damit nichts mit Theme- oder WPBakery-Styles kollidiert.

   Schrift: Poppins wird bewusst NICHT hier geladen. Das Child-Theme liefert
   sie bereits aus (und selbst gehostet statt über Google Fonts, was in
   Deutschland datenschutzrechtlich die sichere Variante ist).
   ====================================================================== */

:root {
	/* Welt "Original" — Koralle, aus den Produkt-Renderings abgeleitet */
	--wd-coral-50: #FBDCD0;
	--wd-coral: #F3A085;
	--wd-coral-deep: #E5825F;
	--wd-terra: #A8462A;

	/* Welt "Pure" — Salbei */
	--wd-sage-50: #DFEAE0;
	--wd-sage: #A9C4AF;
	--wd-sage-deep: #7B9C83;
	--wd-forest: #3A4A3E;
	--wd-forest-900: #212A23;

	/* Neutrale */
	--wd-ink: #231F1E;
	--wd-ink-70: rgba(35, 31, 30, .68);
	--wd-ink-45: rgba(35, 31, 30, .45);
	--wd-paper: #F6F3EF;
	--wd-paper-2: #E9E3DB;

	/* Markenakzent */
	--wd-gold: #FFB326;

	/* Schrift */
	--wd-font-display: "Poppins", "Helvetica Neue", Arial, sans-serif;
	--wd-font-body: "Poppins", "Helvetica Neue", Arial, sans-serif;
	--wd-font-data: "Poppins", "Helvetica Neue", Arial, sans-serif;

	/* Maße */
	--wd-gut: clamp(20px, 4vw, 64px);
}

/* ---- Gemeinsame Textbausteine ------------------------------------------
   Die Selektoren sind doppelt geschrieben (.wd-x.wd-x = 0,2,0). Sonst gewinnt
   eine Theme-Regel wie ".entry-content h2 { color: … }" (0,1,1) und die
   Schrift wird unlesbar. Sektions-Overrides stehen ebenfalls bei 0,2,0 und
   setzen sich durch, weil base.css als Abhaengigkeit immer davor geladen wird.
   ---------------------------------------------------------------------- */

/* Kleine Auszeichnung über einer Sektions-Headline, mit auslaufender Linie. */
.wd-eyebrow.wd-eyebrow {
	display: flex;
	align-items: center;
	gap: .75em;
	margin: 0 0 1.4rem;
	font-family: var(--wd-font-data);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--wd-ink-45);
}

.wd-eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	max-width: 120px;
	background: currentColor;
	opacity: .35;
}

/* Sektions-Headline. */
.wd-h-sec.wd-h-sec {
	/* Eigene Farbe statt geerbter: geerbte Farbe hat keine Spezifität und
	   verliert gegen jede Theme-Regel wie "h2 { color: … }". */
	color: inherit;
	margin: 0 0 1.1rem;
	font-family: var(--wd-font-display);
	font-weight: 700;
	font-size: clamp(1.95rem, 4.1vw, 3.4rem);
	line-height: 1.03;
	letter-spacing: -.038em;
	text-wrap: balance;
}

/* Einleitungstext unter einer Sektions-Headline. */
.wd-lede.wd-lede {
	color: var(--wd-ink-70);
	margin: 0;
	max-width: 56ch;
	font-size: clamp(1.04rem, 1.42vw, 1.28rem);
	line-height: 1.52;
}

/* ---- Button ------------------------------------------------------------
   Die Farben liegen in den Modifiern, die Selektoren sind doppelt geschrieben
   (.wd-btn.wd-btn--x = 0,2,0). Sonst gewinnt eine Theme-Regel wie
   ".entry-content a { color: … }" (0,1,1) und der Text wird unlesbar.
   Jeder Button traegt darum immer .wd-btn plus genau einen Modifier.
   ---------------------------------------------------------------------- */

.wd-btn {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	font-family: var(--wd-font-body);
	font-size: .94rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.01em;
	padding: .86em 1.5em;
	border-width: 1.5px;
	border-style: solid;
	border-radius: 100px;
	text-decoration: none;
	transition: transform .2s cubic-bezier(.2, .7, .3, 1), background-color .2s, color .2s;
}

.wd-btn:hover,
.wd-btn:focus {
	transform: translateY(-2px);
	text-decoration: none;
}

/* Vollton auf hellem Grund */
.wd-btn.wd-btn--solid,
.wd-btn.wd-btn--solid:hover,
.wd-btn.wd-btn--solid:focus {
	background: var(--wd-ink);
	border-color: var(--wd-ink);
	color: var(--wd-paper);
}

/* Vollton auf dunklem Grund oder auf Bildern */
.wd-btn.wd-btn--light,
.wd-btn.wd-btn--light:hover,
.wd-btn.wd-btn--light:focus {
	background: var(--wd-paper);
	border-color: var(--wd-paper);
	color: var(--wd-ink);
}

/* Akzent */
.wd-btn.wd-btn--gold,
.wd-btn.wd-btn--gold:hover,
.wd-btn.wd-btn--gold:focus {
	background: var(--wd-gold);
	border-color: var(--wd-gold);
	color: var(--wd-ink);
}

/* Umriss auf hellem Grund */
.wd-btn.wd-btn--ghost {
	background: transparent;
	border-color: var(--wd-ink);
	color: var(--wd-ink);
}

.wd-btn.wd-btn--ghost:hover,
.wd-btn.wd-btn--ghost:focus {
	background: var(--wd-ink);
	border-color: var(--wd-ink);
	color: var(--wd-paper);
}

.wd-btn__arw {
	transition: transform .2s;
}

.wd-btn:hover .wd-btn__arw {
	transform: translateX(3px);
}

/* ---- Tastaturfokus ----------------------------------------------------- */

.wd-btn:focus-visible {
	outline: 2.5px solid var(--wd-gold);
	outline-offset: 3px;
}

/* ---- Reduzierte Bewegung ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.wd-btn,
	.wd-btn__arw {
		transition-duration: .001ms;
	}

	.wd-btn:hover {
		transform: none;
	}
}