/*
Theme Name: Ligapilot
Theme URI: https://ligapilot.de/
Author: ZeehDesign
Author URI: https://zeeh.no/
Description: Block-Theme für die Produktseite des Ligapilot – Spielpläne für den Ligabetrieb in allen Sportarten. Die Startseite ist eine normale Seite („Startseite“) aus Blöcken; die Abschnitte gibt es auch als Muster.
Requires at least: 6.6
Tested up to: 7.2
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ligapilot
Tags: one-page, block-patterns, full-site-editing, custom-colors
*/

/*
 * Gestaltungsregeln (nach Apples Prinzipien):
 * - Hierarchie über Größe, Gewicht und Zeilenabstand, nicht über mehr Farben und Rahmen.
 * - Große Schrift enger, kleine Schrift weiter gesperrt. Fließtext in Systemschrift.
 * - Der Kopf ist eine durchscheinende Ebene; die Kante erscheint erst, wenn Inhalt darunter gleitet.
 * - Knöpfe reagieren auf Drücken (pointer-down), nicht nur auf Hover.
 * - Bewegung folgt dem Scrollen 1:1 und ist unterbrechbar; keine zeitgesteuerten Effekte.
 * - Berücksichtigt reduzierte Bewegung, reduzierte Transparenz und hohen Kontrast.
 */

:root {
	--spl-ease: cubic-bezier(.22, 1, .36, 1);      /* kritisch gedämpft: schnell hinein, kein Überschwingen */
	--spl-radius-s: 12px;
	--spl-radius-m: 20px;
	--spl-radius-l: 28px;
	--spl-shadow-s: 0 1px 2px rgba(20,33,61,.06), 0 4px 12px -6px rgba(20,33,61,.12);
	--spl-shadow-l: 0 2px 6px rgba(12,21,41,.10), 0 30px 70px -30px rgba(12,21,41,.55);
	interpolate-size: allow-keywords;
}

/* ---------- Grundlagen ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
:where(section, .wp-block-group)[id] { scroll-margin-top: 80px; }
::selection { background: var(--wp--preset--color--accent-soft); color: var(--wp--preset--color--ink); }

/* Abschnitte liegen Kante an Kante – keine Lücke zwischen Kopf, Inhalt und Fuß */
.wp-site-blocks > * + * { margin-block-start: 0; }
main > .alignfull + .alignfull,
.spl-front > .alignfull,
.editor-styles-wrapper .is-root-container > .alignfull { margin-block: 0; }
.spl-front > :first-child { margin-block-start: 0; }

/* ---------- Typografi ---------- */
h1, h2, .wp-block-heading { text-wrap: balance; }
p { text-wrap: pretty; }
.has-large-font-size { line-height: 1.45; letter-spacing: -0.005em; }
.has-small-font-size { letter-spacing: 0.01em; }
/* Einleitung unter zentrierten Überschriften: kurze Zeilen lesen sich leichter */
p.has-text-align-center.has-large-font-size { max-inline-size: 40rem; margin-inline: auto; }

.spl-kicker {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	letter-spacing: .16em;          /* kleine Versalien: weiter gesperrt */
	text-transform: uppercase;
	font-size: .8rem;
	margin-block-end: -.25rem;
}

/* ---------- Kopf: durchscheinende Ebene ---------- */
/* Kleben muss die WordPress-Hülle (<header>), nicht die Gruppe darin */
.wp-site-blocks > header.wp-block-template-part,
header.wp-block-template-part:has(> .spl-header) {
	position: sticky;
	top: 0;
	z-index: 50;
}
.spl-header {
	position: relative;
	z-index: 0;
	background: transparent !important;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 8%, transparent);
}
/* Das Material liegt auf einer eigenen Ebene. Steht backdrop-filter am Kopf selbst,
   wird das Handymenü (position: fixed) im Kopfstreifen eingesperrt. */
.spl-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--wp--preset--color--paper) 78%, transparent);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
}
/* Die Kante erscheint erst, wenn Inhalt darunter gleitet (folgt dem Scrollen 1:1) */
@supports (animation-timeline: scroll()) {
	.spl-header {
		border-bottom-color: transparent;
		animation: spl-edge linear both;
		animation-timeline: scroll(root);
		animation-range: 0 64px;
	}
	@keyframes spl-edge {
		to {
			border-bottom-color: color-mix(in srgb, var(--wp--preset--color--ink) 8%, transparent);
			box-shadow: 0 10px 30px -22px rgba(12,21,41,.45);
		}
	}
}
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; } }
@media (max-width: 600px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; } }

.spl-logo-img a, .spl-logo-img img { display: block; }
.spl-site-title { letter-spacing: -0.005em; }
.spl-site-title a { text-decoration: none; color: inherit; }
.spl-logo a { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--wp--preset--color--ink); }
.spl-logo img { width: 36px; height: 36px; }

.spl-header .wp-block-navigation { font-weight: 500; }
.spl-header .wp-block-navigation a { text-decoration: none; opacity: .82; transition: opacity .2s var(--spl-ease); }
.spl-header .wp-block-navigation a:hover,
.spl-header .wp-block-navigation a:focus-visible { opacity: 1; }
.spl-header .wp-block-navigation__responsive-container.is-menu-open {
	background: color-mix(in srgb, var(--wp--preset--color--paper) 92%, transparent) !important;
	-webkit-backdrop-filter: saturate(180%) blur(24px);
	backdrop-filter: saturate(180%) blur(24px);
}
.spl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-size: 1.6rem; font-weight: 600; }
.spl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.spl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start !important; }
.spl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.1rem; }

/* ---------- Knöpfe: Rückmeldung beim Drücken ---------- */
.wp-element-button,
.wp-block-button__link {
	transition: transform .12s var(--spl-ease), background-color .2s var(--spl-ease), color .2s var(--spl-ease), border-color .2s var(--spl-ease);
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}
.wp-element-button:active,
.wp-block-button__link:active { transform: scale(.97); transition-duration: .06s; }
.is-style-outline > .wp-block-button__link { border-width: 1.5px; }
.is-style-outline > .wp-block-button__link:hover { background: rgba(255,255,255,.08); }
:focus-visible { outline: 3px solid var(--wp--preset--color--accent); outline-offset: 3px; border-radius: 6px; }

/* ---------- Hero ---------- */
.spl-hero { position: relative; overflow: hidden; isolation: isolate; }
.spl-hero::before {
	/* zartes Raster wie ein Kalenderblatt */
	content: "";
	position: absolute; inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(120% 90% at 70% 10%, #000 30%, transparent 80%);
	mask-image: radial-gradient(120% 90% at 70% 10%, #000 30%, transparent 80%);
	pointer-events: none;
}
.spl-hero::after {
	/* warmes Licht hinter dem Bildschirmfoto */
	content: "";
	position: absolute;
	z-index: -1;
	inset: -20% -10% auto auto;
	width: 70%;
	aspect-ratio: 1;
	background: radial-gradient(closest-side, rgba(242,107,29,.22), transparent 70%);
	pointer-events: none;
}
.spl-hero h1 { margin-block: .35rem 0; }
.spl-hero .spl-shot img {
	border-radius: var(--spl-radius-m);
	box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 80px -30px rgba(0,0,0,.7), 0 12px 24px -12px rgba(0,0,0,.35);
}

/* Sportarten: ruhige Zeile statt vieler Chips */
.spl-sports { display: flex; flex-wrap: wrap; gap: .1rem .45rem; margin: 0; padding: 0; list-style: none; }
.spl-sports li {
	padding: 0;
	border: 0;
	font-size: .95rem;
	color: var(--wp--preset--color--on-dark-muted);
}
.spl-sports li:not(:last-child)::after { content: "·"; margin-inline-start: .45rem; opacity: .5; }
.spl-sports li:last-child { color: var(--wp--preset--color--paper); }

/* ---------- Video ---------- */
.spl-video video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--spl-radius-l);
	background: var(--wp--preset--color--ink);
	box-shadow: var(--spl-shadow-l);
}
.spl-video-missing {
	aspect-ratio: 16 / 9;
	display: grid;
	place-items: center;
	text-align: center;
	padding: 2rem;
	border-radius: var(--spl-radius-l);
	border: 2px dashed var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted);
}

/* ---------- Karten: Flächen statt Rahmen ---------- */
.spl-card {
	height: 100%;
	border: 0;
	border-radius: var(--spl-radius-m);
	background: var(--wp--preset--color--mist);
}
/* Auf grauem Grund werden die Karten weiß und heben sich leicht ab */
.has-mist-background-color .spl-card { background: var(--wp--preset--color--paper); box-shadow: var(--spl-shadow-s); }
.spl-card h3 { margin-top: .9rem; font-size: 1.35rem; }
.spl-card p { margin-top: .5rem; }
.spl-icon-img { margin: 0 !important; }
.spl-icon-img img { width: 44px; height: 44px; border-radius: 12px; }
.spl-icon {
	display: inline-grid;
	place-items: center;
	width: 44px; height: 44px;
	border-radius: 12px;
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent-text);
}
.spl-icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spl-features { margin-block-start: var(--wp--preset--spacing--30) !important; }
.spl-features.wp-block-columns + .spl-features.wp-block-columns { margin-block-start: 1.25rem !important; }

/* Problem */
.spl-pain { border-left: 2px solid var(--wp--preset--color--accent); padding-left: 1.25rem; }
.spl-pain h3 { font-size: 1.35rem; }
.spl-pain p { margin-top: .4rem; }
.spl-pain + .spl-pain { margin-top: 2.25rem; }

/* „Für wen passt es?“: Rollen untereinander statt drei schmaler Spalten */
#fuer-wen .wp-block-column > .wp-block-columns { flex-direction: column; gap: 1rem; }
#fuer-wen .wp-block-column > .wp-block-columns > .wp-block-column { flex-basis: auto !important; }
#fuer-wen .spl-card h3 { margin-top: 0; }

/* Schritte */
.spl-step-no {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 3.5rem;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--accent);
	font-variant-numeric: tabular-nums;
}

.spl-features .wp-block-column { min-width: 0; }

/* ---------- Preis ---------- */
.spl-price-card { border-radius: var(--spl-radius-l); box-shadow: var(--spl-shadow-l); }
.spl-price { font-family: var(--wp--preset--font-family--heading); font-weight: 700; line-height: .95; letter-spacing: -0.02em; margin-block: .25rem; }
.spl-check { list-style: none; padding-left: 0; }
.spl-check li { position: relative; padding-left: 1.8rem; margin: .5rem 0; }
.spl-check li::before {
	content: "";
	position: absolute; left: 0; top: .28em;
	width: 1.1rem; height: 1.1rem;
	border-radius: 50%;
	background: var(--wp--preset--color--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.spl-on-dark .spl-check li::before { background-color: var(--wp--preset--color--accent); }

/* ---------- Fragen und Antworten ---------- */
.spl-faq .wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 0;
}
.spl-faq > .wp-block-details { margin-block: 0; }
.spl-faq .wp-block-details:first-child { border-top: 1px solid var(--wp--preset--color--line); }
.spl-faq .wp-block-details summary {
	font-weight: 600;
	font-size: 1.125rem;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem 0;
	-webkit-tap-highlight-color: transparent;
}
.spl-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.spl-faq .wp-block-details summary::after {
	content: "";
	flex: none;
	width: 1.75rem; height: 1.75rem;
	border-radius: 50%;
	background: var(--wp--preset--color--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5' fill='none' stroke='%23B4470B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 60% no-repeat;
	transition: transform .35s var(--spl-ease), background-color .2s var(--spl-ease);
}
.spl-faq .wp-block-details summary:hover::after { background-color: var(--wp--preset--color--accent-soft); }
.spl-faq .wp-block-details[open] summary::after { transform: rotate(180deg); }
.spl-faq .wp-block-details > :not(summary) { margin: 0 0 1.25rem; color: var(--wp--preset--color--muted); max-inline-size: 60ch; }
/* Die Antwort gleitet auf (wo der Browser es kann) */
.spl-faq .wp-block-details::details-content {
	block-size: 0;
	overflow: clip;
	opacity: 0;
	transition: block-size .4s var(--spl-ease), opacity .3s var(--spl-ease), content-visibility .4s allow-discrete;
}
.spl-faq .wp-block-details[open]::details-content { block-size: auto; opacity: 1; }

/* ---------- Fußzeile ---------- */
.spl-footer ul { list-style: none; }
.spl-footer li { margin: .35rem 0; }
.spl-footer a { color: inherit; text-decoration: none; }
.spl-footer a:hover { color: var(--wp--preset--color--paper); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Abschnitte erscheinen beim Scrollen ----------
 * Direkt an die Scrollposition gekoppelt (keine zeitgesteuerte Animation),
 * also jederzeit umkehrbar und anhaltbar. Nur auf der Startseite, nicht im Editor. */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.wp-site-blocks .spl-front > .alignfull:not(.spl-hero) > * {
			animation: spl-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 35%;
		}
		@keyframes spl-rise {
			from { opacity: 0; transform: translateY(1.75rem) scale(.985); }
		}
	}
}

/* ---------- Barrierefreiheit ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; }
	.wp-element-button:active, .wp-block-button__link:active { transform: none; }
	.spl-faq .wp-block-details::details-content { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
	.spl-header::before,
	.spl-header .wp-block-navigation__responsive-container.is-menu-open {
		background: var(--wp--preset--color--paper) !important;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}
@media (prefers-contrast: more) {
	.spl-header { border-bottom: 1px solid var(--wp--preset--color--ink); }
	.spl-header::before { background: var(--wp--preset--color--paper); backdrop-filter: none; }
	.spl-card { border: 1px solid var(--wp--preset--color--ink); }
	.spl-header .wp-block-navigation a { opacity: 1; }
	.spl-sports li { color: var(--wp--preset--color--paper); }
}

/* Druck: alles sichtbar, keine Effekte */
@media print {
	.wp-site-blocks > header.wp-block-template-part { position: static; }
	.spl-header::before { backdrop-filter: none; }
	.wp-site-blocks .spl-front > .alignfull > * { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---------- Luft ----------
 * Ein klarer Rhythmus: Überschrift → Einleitung → Inhalt, mit wachsendem Abstand,
 * je stärker der Inhalt wechselt. Macht die Seite leichter überfliegbar. */
.spl-front h2.wp-block-heading { margin-block-start: .5rem; }
.spl-front .spl-kicker + h2 { margin-block-start: .75rem; }
.spl-front h2 + p.has-large-font-size { margin-block-start: 1.25rem; }
/* Nach der Einleitung: klare Pause vor Karten, Schritten und Video */
.spl-front p.has-large-font-size + .wp-block-columns,
.spl-front p.has-large-font-size + .wp-block-video,
.spl-front p.has-large-font-size + figure { margin-block-start: var(--wp--preset--spacing--50) !important; }
.spl-front .wp-block-columns { gap: var(--wp--preset--spacing--40) clamp(2rem, 4vw, 3.5rem); }

/* Hero */
.spl-hero .wp-block-buttons { margin-block-start: 2.5rem !important; }
.spl-hero h1 + p { margin-block-start: 1.75rem; }
.spl-hero .wp-block-buttons + p { margin-block-start: 1.25rem; }
.spl-sports { margin-block-start: 2.5rem !important; }

/* Karten: mehr Luft innen und dazwischen */
.spl-card { padding: clamp(1.75rem, 3vw, 2.5rem) !important; }
.spl-card h3 { margin-top: 1.25rem; }
.spl-card p { margin-top: .75rem; line-height: 1.65; }
.spl-features.wp-block-columns + .spl-features.wp-block-columns { margin-block-start: 2rem !important; }
#fuer-wen .wp-block-column > .wp-block-columns { gap: 1.5rem; }

/* Problem und Schritte */
.spl-pain + .spl-pain { margin-top: 3rem; }
.spl-pain p { margin-top: .75rem; }
.spl-step-no + h3 { margin-block-start: 1.25rem; }
.spl-step-no ~ p { margin-block-start: .75rem; }

/* Preis */
.spl-price-card { padding: clamp(2.25rem, 4vw, 3.5rem) !important; }
.spl-price-card .wp-block-buttons { margin-block-start: 2.25rem !important; }
.spl-check li { margin: .8rem 0; }
#preis .spl-check { margin-block-start: 2rem; }

/* Fragen und Antworten */
.spl-faq { margin-block-start: var(--wp--preset--spacing--50) !important; }
.spl-faq .wp-block-details summary { padding: 1.6rem 0; }
.spl-faq .wp-block-details > :not(summary) { margin-bottom: 1.75rem; line-height: 1.7; }

/* Abschluss und Fuß */
.spl-front .has-accent-background-color .wp-block-buttons { margin-block-start: 2.25rem; }
.spl-footer { padding-block: clamp(4rem, 8vw, 6rem) clamp(2.5rem, 5vw, 3.5rem) !important; }
.spl-footer .wp-block-separator { margin-block: 3rem 1.5rem; }
.spl-footer h3 { margin-bottom: 1rem; }

/* ---------- Mobil ---------- */
@media (max-width: 781px) {
	.spl-hero .wp-block-columns { gap: 3rem; }
	.spl-step-no { font-size: 2.75rem; }
	.spl-features.wp-block-columns + .spl-features.wp-block-columns { margin-block-start: 1.5rem !important; }
	.spl-front .wp-block-columns { gap: 1.5rem; }
	.spl-front .wp-block-columns:has(.spl-step-no),
	.spl-front .wp-block-columns:has(.spl-pain) { gap: 2.75rem; }
	.spl-features .wp-block-column + .wp-block-column { margin-top: 0; }
}