/*
Theme Name: Unterelbe
Theme URI: https://unterelbe.net/
Description: Child-Theme von Twenty Twenty-Five für die Hauptseite des Netzwerks unterelbe.net – Startseite als Wegweiser zu radsport.unterelbe.net und staderschleudercup.unterelbe.net. Schriften lokal (keine Verbindung zu Google).
Author: Norbert Wigbels
Template: twentytwentyfive
Version: 1.0.1
Requires at least: 6.7
Requires PHP: 7.4
Text Domain: unterelbe
Update URI: false
License: GNU General Public License v2 or later
*/

:root {
	--ue-fluss: var(--wp--preset--color--accent-3);
	--ue-link: var(--wp--preset--color--accent-2);
	--ue-flaeche: var(--wp--preset--color--accent-5);
	--ue-linie: var(--wp--preset--color--accent-6);
	--ue-grau: var(--wp--preset--color--accent-4);
}

/* ---------- Kopf ---------- */
.ue-kopf { padding-top: 4.5rem; padding-bottom: 1rem; }
.ue-kicker { margin: 0; color: var(--ue-grau); font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; }
.ue-kopf h1 { margin-top: .6rem; text-wrap: balance; }
/* keine max-width: das Layout „constrained“ zentriert schmalere Blöcke (margin auto) → stünde rechts der Überschrift */
.ue-intro { color: var(--ue-grau); font-size: 1.15rem; }
.ue-kopf .wp-block-separator.ue-welle {
	width: 100% !important; max-width: none; height: 28px; margin-top: 1.6rem; border: 0; opacity: 1;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 28' preserveAspectRatio='none'%3E%3Cpath d='M0 14 C 40 2, 80 2, 120 14 S 200 26, 240 14' fill='none' stroke='%23dde3ea' stroke-width='2'/%3E%3C/svg%3E") repeat-x 0 50% / 240px 28px;
}

/* ---------- Karten: ganze Karte klickbar über den Titel-Link ---------- */
.ue-karten { padding-bottom: 3rem; }
.ue-karte {
	position: relative; height: 100%;
	display: flex; flex-direction: column;
	background: var(--ue-flaeche); border: 1px solid var(--ue-linie); border-radius: 10px; overflow: hidden;
	transition: transform .15s ease, box-shadow .15s ease;
}
.ue-karte:hover, .ue-karte:focus-within { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(15, 34, 56, .12); }
.ue-karte > *, .ue-karte .ue-text > * { margin-block-start: 0; }
.ue-karte .wp-block-image { margin: 0; }
.ue-karte .wp-block-image img { display: block; width: 100%; height: auto; aspect-ratio: 720 / 378; object-fit: cover; }
.ue-karte .ue-text { padding: 1.25rem 1.4rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
.ue-karte h2 { margin: 0 0 .4rem; }
.ue-karte h2 a { color: var(--ue-fluss); text-decoration: none; }
.ue-karte h2 a::after { content: ""; position: absolute; inset: 0; }
.ue-karte h2 a:focus-visible { outline: none; }
.ue-karte:focus-within { outline: 3px solid var(--ue-link); outline-offset: 2px; }
.ue-karte p { margin: 0 0 1rem; color: var(--ue-grau); }
.ue-karte p.ue-adresse { margin: auto 0 0; color: var(--ue-link); font-weight: 600; }
.ue-adresse::after { content: " →"; }

/* ---------- Fuß ---------- */
.ue-fuss { border-top: 1px solid var(--ue-linie); color: var(--ue-grau); font-size: .9rem; padding-top: 1.5rem; padding-bottom: 2.5rem; }
.ue-fuss p { margin: 0; }
.ue-fuss a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
	.ue-karte { transition: none; }
	.ue-karte:hover, .ue-karte:focus-within { transform: none; }
}