/* Aufmacher: der Platz als Layoutraster.
   Der Grundriss liegt rechts und läuft über den Rand hinaus — er ist ein
   Ausschnitt der Anlage, kein zentriertes Bildchen. */

/* Zwei Spalten: Text links auf Tiefblau, Sandfläche rechts.
   Die Sandfläche läuft bis an den Bildschirmrand — sie ist ein Ausschnitt
   der Anlage, kein gerahmtes Bild. */
.ktf77-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: grid;
	grid-template-columns: 1fr clamp(20rem, 40%, 46rem);
	align-items: center;
	min-block-size: clamp(28rem, 62vh, 40rem);
	padding: 0;
}

.ktf77-hero__court {
	grid-column: 2;
	grid-row: 1;
	align-self: stretch;
	max-inline-size: none;
	/* Die Sandfläche macht der Container. Das SVG zeichnet nur die Linien —
	   so bleibt der Platz vollständig sichtbar statt beschnitten, und der
	   Auslauf ringsum sieht aus wie auf der Anlage. */
	background: var(--wp--preset--color--clay);
	display: grid;
	place-items: center;
	padding: clamp(1.25rem, 3vw, 2.5rem);
}

.ktf77-hero__court svg {
	inline-size: auto;
	block-size: 100%;
	max-inline-size: 100%;
	display: block;
}

.ktf77-hero__inner {
	grid-column: 1;
	grid-row: 1;
	max-inline-size: none;
	/* Linksbündig zur selben Kante wie der übrige Seiteninhalt (wideSize
	   78rem, zentriert). Ohne diese Rechnung würde die Überschrift gegenüber
	   den Abschnitten darunter versetzt stehen. */
	padding-inline-start: max(var(--wp--preset--spacing--30), (100vw - 78rem) / 2);
	padding-inline-end: clamp(1.5rem, 4vw, 3.5rem);
	padding-block: clamp(3rem, 7vw, 5.5rem);
}

.ktf77-hero__inner > * {
	max-inline-size: 38rem;
}

/* Etikett: gesperrte Versalien, davor ein kurzer Strich wie eine Grundlinie. */
.ktf77-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.ktf77-eyebrow::before {
	content: "";
	inline-size: 2.5rem;
	block-size: 2px;
	background: currentColor;
	flex: 0 0 auto;
}

.ktf77-hero__title {
	margin-block: 0.6rem 0;
	max-inline-size: 14ch;
	text-wrap: balance;
}

.ktf77-hero__lead {
	margin-block-start: 1.25rem;
	max-inline-size: 44ch;
	color: #C7D2E8;
}

/* Zahlenleiste: die vier Angaben, nach denen zuerst gefragt wird.
   Tabellenziffern, damit die Zahlen unter dem Etikett stehen wie auf einer
   Anzeigetafel. */
.ktf77-fakten {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, auto));
	justify-content: start;
	gap: 1.25rem clamp(1.5rem, 3.5vw, 3rem);
	margin-block-start: clamp(2.5rem, 5vw, 4rem);
	padding-block-start: 1.25rem;
	border-block-start: 1px solid rgba(255, 255, 255, 0.22);
}

.ktf77-fakten__eintrag {
	display: flex;
	flex-direction: column-reverse;
	gap: 0.15rem;
}

.ktf77-fakten dt {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #93A6CC;
}

.ktf77-fakten dd {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.9rem, 4vw, 2.75rem);
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--base);
}

/* Der Ghost-Button steht auf dunklem Grund und braucht eine eigene Kante. */
.ktf77-btn-ghost .wp-block-button__link {
	background: transparent;
	border: 2px solid rgba(255, 255, 255, 0.55);
}

.ktf77-btn-ghost .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: #FFFFFF;
}

/* Das Netz als Abschluss des Aufmachers: Tape oben, Maschen darunter.
   Es sitzt auf der Unterkante und läuft über die volle Breite — als
   Trennlinie zwischen Platz und Seite. */
.ktf77-netz {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 2;
	max-inline-size: none;
	block-size: 18px;
	background:
		linear-gradient(to bottom, var(--wp--preset--color--base) 0 4px, transparent 4px),
		repeating-linear-gradient(90deg, var(--wp--preset--color--deep) 0 1px, transparent 1px 7px),
		repeating-linear-gradient(0deg, var(--wp--preset--color--deep) 0 1px, transparent 1px 7px),
		var(--wp--preset--color--primary);
	border-block-end: 2px solid var(--wp--preset--color--deep);
}

@media (max-width: 900px) {
	/* Auf schmalen Schirmen liegt der Platz als Band unter dem Text. */
	.ktf77-hero {
		grid-template-columns: 1fr;
		min-block-size: 0;
	}

	.ktf77-hero__inner {
		grid-column: 1;
		grid-row: 1;
		padding-inline: var(--wp--preset--spacing--30);
	}

	.ktf77-hero__court {
		grid-column: 1;
		grid-row: 2;
		block-size: clamp(17rem, 62vw, 24rem);
		padding-block: 1.25rem;
	}

	/* Keine Rotation: bei gedrehten Elementen bezieht sich die Größe weiter
	   auf die ungedrehte Achse, was die Fläche unberechenbar macht. Der Platz
	   bleibt hochkant und passt sich über die Höhe ein. */
	.ktf77-hero__court svg {
		block-size: 100%;
		inline-size: auto;
	}

	.ktf77-hero__title,
	.ktf77-hero__inner > * {
		max-inline-size: 100%;
	}

	.ktf77-fakten {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Auftakt: die Linien werden gezogen, wie ein Platz vor der Saison.
   Eine einzige Bewegung auf der ganzen Seite — mehr wäre Effekthascherei.

   Dank pathLength="1" im SVG hat jede Form die Länge 1, egal wie lang sie
   tatsächlich ist. Ein einziges Strichmuster genügt damit für alle. */
@media (prefers-reduced-motion: no-preference) {
	.ktf77-court > * {
		stroke-dasharray: 1;
		stroke-dashoffset: 1;
		animation: ktf77-linie-ziehen 0.9s cubic-bezier(0.33, 1, 0.68, 1) forwards;
	}

	.ktf77-court > *:nth-child(1) { animation-delay: 0.05s; }
	.ktf77-court > *:nth-child(2) { animation-delay: 0.22s; }
	.ktf77-court > *:nth-child(3) { animation-delay: 0.26s; }
	.ktf77-court > *:nth-child(4) { animation-delay: 0.38s; }
	.ktf77-court > *:nth-child(5) { animation-delay: 0.42s; }
	.ktf77-court > *:nth-child(6) { animation-delay: 0.52s; }
	.ktf77-court > *:nth-child(7) { animation-delay: 0.6s; }
	.ktf77-court > *:nth-child(8) { animation-delay: 0.62s; }

	.ktf77-net {
		opacity: 0;
		animation: ktf77-netz-ein 0.45s ease-out 0.85s forwards;
	}
}

@keyframes ktf77-linie-ziehen {
	to { stroke-dashoffset: 0; }
}

@keyframes ktf77-netz-ein {
	to { opacity: 1; }
}