/*
Theme Name: WunderMama
Theme URI: https://wunder-mama.de
Description: Child-Theme für Twenty Twenty-Five. Übernimmt Farben, Schriften und Button-Stil der bisherigen wunder-mama.de (OceanWP/Elementor), ohne den Plugin-Ballast. Schriften sind lokal eingebunden.
Author: netztaucher
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: wundermama
*/

/* Parallax-Hero: das Original fixierte den Hintergrund erst ab 1025px.
   Darunter (und generell auf iOS, das fixed ignoriert) bleibt er normal
   scrollend, sonst schneidet das Bild auf Mobilgeräten falsch an. */
.wp-block-cover.has-parallax {
	background-attachment: scroll;
}

@media (min-width: 1025px) {
	.wp-block-cover.has-parallax {
		background-attachment: fixed;
	}
}

/* main traegt kein seitliches Padding mehr, damit die Cover-Blöcke wirklich
   randlos laufen. Auf schmalen Viewports muss der Textabstand deshalb hier
   nachgezogen werden. */
@media (max-width: 900px) {
	.wp-block-group.alignfull > .wp-block-heading,
	.wp-block-group.alignfull > p,
	.wp-block-group.alignfull > .wp-block-columns,
	.wp-block-group.alignfull > .wp-block-buttons {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
}

/* Icon-Sektionen: weisses SVG im blauen Kreis, 50px Symbol in 100px Kreis. */
.wm-icon {
	display: flex;
	justify-content: center;
	margin-bottom: 1.25rem;
}

.wm-icon__circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 100px;
	padding: 25px;
	border-radius: 50%;
	background: #517FAD;
	box-sizing: border-box;
}

.wm-icon__circle svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Das Video laeuft im Original bis an den linken Bildschirmrand; die
   Textspalte bleibt im 1270px-Raster. */
@media (min-width: 900px) {
	/* alignfull-Gruppen erben in TT5 das Root-Padding (50px); fuer die
	   Medienreihe muss es weg, sonst startet das Video nicht bei 0. */
	.wp-block-group.wm-media-row {
		padding-left: 0;
		padding-right: 0;
	}

	.wm-media-row > .wp-block-columns {
		max-width: none;
		margin-left: 0;
		margin-right: 0;
		gap: 0;
	}

	.wm-media-row .wp-block-column:first-child {
		padding-left: 0;
	}

	.wm-media-row .wp-block-column:last-child {
		padding-left: 3.5rem;
		padding-right: max(1.5rem, calc((100vw - 1270px) / 2));
	}

	/* Zweite Reihe: Video rechts, Text links. Eigene Klasse statt
	   nth-of-type — letzteres zaehlt alle div-Geschwister und traf die
	   falsche Gruppe. */
	.wm-media-row--rev .wp-block-column:first-child {
		padding-left: max(1.5rem, calc((100vw - 1270px) / 2));
		padding-right: 3.5rem;
	}

	.wm-media-row--rev .wp-block-column:last-child {
		padding-left: 0;
		padding-right: 0;
	}
}

/* Hero-Overlay im Original: 47%. dimRatio kennt nur 10er-Schritte, und die
   Core-Regel fuer has-background-dim-50 ist spezifischer — daher hier
   ausdruecklich mit derselben Klassenkombination ueberschrieben. */
.wp-block-cover.wm-hero .wp-block-cover__background.has-background-dim.has-background-dim-50 {
	opacity: 0.47;
}

/* Trenner im Original: kurzer, kräftiger Balken in Markenblau — kein
   durchgehender Strich. Zentriert, in Spalten linksbündig. */
.wp-block-separator.wm-rule {
	width: 60px;
	height: 4px;
	border: 0;
	background: #517FAD;
	opacity: 1;
	margin: 1.25rem auto 1.75rem;
}

.wp-block-separator.wm-rule.wm-rule--left {
	margin-left: 0;
}

/* Namenszeile unter dem Video: kursiv mit senkrechtem Strich. */
.wm-eyebrow {
	border-left: 4px solid #517FAD;
	padding-left: 1rem;
	margin-top: 1.25rem;
}

/* Header: auf der Startseite transparent ueber dem Hero, auf Unterseiten
   normal im Fluss mit weissem Grund — sonst laege das Logo auf dem Text. */
body.home .wp-site-blocks > header.wp-block-template-part {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
}

body:not(.home) .wm-header {
	background: #fff;
	border-bottom: 1px solid #E8ECF1;
}

/* Navigation */
.wm-nav__list {
	display: flex;
	align-items: center;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wm-nav__list a {
	font-size: 16px;
	text-decoration: none;
	color: #517FAD;
	white-space: nowrap;
	transition: opacity 0.2s;
}

body.home .wm-nav__list a {
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.wm-nav__list a:hover {
	opacity: 0.75;
}

.wm-nav__cta {
	background: #517FAD;
	color: #fff !important;
	padding: 0.7em 1.4em;
	border-radius: 24px;
	font-family: Raleway, sans-serif;
	font-weight: 600;
	text-shadow: none !important;
}

body.home .wm-nav__cta {
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(4px);
}

.wm-nav__checkbox,
.wm-nav__burger {
	display: none;
}

@media (max-width: 860px) {
	.wm-nav__burger {
		display: flex;
		flex-direction: column;
		gap: 5px;
		cursor: pointer;
		padding: 0.5rem;
	}

	.wm-nav__burger span {
		display: block;
		width: 26px;
		height: 2px;
		background: #517FAD;
	}

	body.home .wm-nav__burger span {
		background: #fff;
	}

	.wm-nav__list {
		display: none;
		position: absolute;
		right: 1.5rem;
		top: 100%;
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
		background: #fff;
		padding: 1.25rem 1.75rem;
		border-radius: 12px;
		box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
	}

	.wm-nav__checkbox:checked ~ .wm-nav__list {
		display: flex;
	}

	body.home .wm-nav__list a {
		color: #517FAD;
		text-shadow: none;
	}
}

/* Unterseiten: schmalerer Satzspiegel, Tabelle im Markenlook. */
.wm-subpage .wp-block-table td,
.wm-subpage .wp-block-table th {
	border: 1px solid #E1E6EC;
	padding: 0.7em 0.9em;
	font-size: 16px;
}

.wm-subpage .wp-block-table th {
	background: #F5F7FA;
	color: #517FAD;
	font-weight: 600;
}

/* Preisspalte darf nicht umbrechen — "31,50 €" auf zwei Zeilen liest sich
   wie zwei Angaben. */
.wm-subpage .wp-block-table td:nth-child(2) {
	white-space: nowrap;
	text-align: right;
	font-weight: 500;
	color: #517FAD;
}

.wm-subpage .wp-block-table td:first-child {
	font-weight: 500;
}

/* Footer-Logo ist die helle Variante auf blauem Grund. */
.wm-footer-strip {
	min-height: 120px;
}

.wm-footer-strip figure {
	margin: 0;
}

.wm-footer-links {
	margin: 0;
	display: flex;
	gap: 1.75rem;
	flex-wrap: wrap;
}

.wm-footer-links a {
	color: #fff;
	text-decoration: none;
}

.wm-footer-links a:hover {
	text-decoration: underline;
}

/* CTA-Buttons tragen im Original ein Chevron hinter dem Text. */
.wp-block-button__link.wp-element-button::after {
	content: "\203A";
	margin-left: 0.6em;
	font-weight: 400;
}

/* Hero: langsamer Ken-Burns auf dem Bild, Text und Button gestaffelt
   eingeblendet. Der Zoom startet bei 1 und läuft nach aussen, damit an den
   Kanten nichts aufblitzt. */
.wp-block-cover.wm-hero {
	overflow: hidden;
}

/* Der Hero-Text bricht im Original auf zwei Zeilen um; ohne Begrenzung
   liefe er über die volle Containerbreite von 1270px. */
.wp-block-cover.wm-hero h1,
.wp-block-cover.has-parallax h2 {
	max-width: 900px;
	margin-inline: auto;
}

/* Hero-Bild: langsamer Zoom (zeitbasiert) als Grundzustand. */
.wp-block-cover.wm-hero .wp-block-cover__image-background {
	animation: wm-kenburns 24s ease-out forwards;
	transform-origin: 60% 40%;
	will-change: transform;
	height: 118%;
	top: -9%;
}

/* Wo der Browser scroll-gekoppelte Animationen kann, ersetzt echtes Parallax
   den Zoom: Das Bild wandert beim Scrollen langsamer als die Seite. Das wirkt
   weicher als background-attachment:fixed und funktioniert auch auf iOS. */
@supports (animation-timeline: scroll()) {
	.wp-block-cover.wm-hero .wp-block-cover__image-background {
		animation: wm-hero-parallax linear both;
		animation-timeline: scroll(root block);
		animation-range: 0 100vh;
	}

	@keyframes wm-hero-parallax {
		from { transform: translateY(-6%) scale(1.06); }
		to   { transform: translateY(6%) scale(1.12); }
	}
}

.wp-block-cover.wm-hero .wp-block-cover__inner-container > * {
	animation: wm-rise 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}

.wp-block-cover.wm-hero .wp-block-cover__inner-container > :first-child {
	animation-delay: 0.15s;
}

.wp-block-cover.wm-hero .wp-block-cover__inner-container > * + * {
	animation-delay: 0.55s;
}

@keyframes wm-kenburns {
	from { transform: scale(1); }
	to   { transform: scale(1.12); }
}

@keyframes wm-rise {
	from { opacity: 0; transform: translateY(1.25rem); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-cover.wm-hero .wp-block-cover__image-background,
	.wp-block-cover.wm-hero .wp-block-cover__inner-container > * {
		animation: none;
	}
}