/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* ==========================================================================
   Klaas Hoogland — Ergänzungen zu Elementor
   Hier steht nur, was sich über Elementor-Controls nicht abbilden lässt.
   Farben und Maße stammen aus export/README.md.
   ========================================================================== */

/* --- Kopfzeile ----------------------------------------------------------- */

/* Logo schrumpft auf seinen Inhalt statt die Flex-Zeile zu dehnen */
.kh-logo {
	width: fit-content;
	flex: 0 0 auto;
}
.kh-logo-img img {
	height: 44px;
	width: auto;
	display: block;
}

/* Navigation + CTA bleiben als Gruppe rechts, ohne zu dehnen */
.kh-nav-group {
	width: fit-content;
	flex: 0 1 auto;
}

/* --- Eyebrow-Label ------------------------------------------------------- */
/* Elementor kann keinen Font-Stack setzen, nur eine einzelne Familie. */
.kh-eyebrow .elementor-heading-title {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* --- Fußzeile ------------------------------------------------------------ */

.kh-f-logo img {
	height: 46px;
	width: auto;
	display: block;
}

/* Elementors Rows-Control kompiliert immer zu repeat(N, 1fr). Sobald ein
   Raster umbricht, zwingt das alle Zeilen auf die Höhe der höchsten und
   reißt Lücken. Gilt für jedes Raster aus dem Generator (Marker kh-grid).
   Auf Desktop bleibt Elementors Wert stehen, damit das Control dort greift. */
@media (max-width: 1024px) {
	.kh-grid {
		grid-template-rows: auto !important;
	}
}

/* Links in Text-Widgets (Telefon, E-Mail) — überschreibt Hello #c36 */
.kh-f-link a {
	color: rgba(255, 255, 255, 0.84);
	text-decoration: none;
	transition: color 220ms ease;
}
.kh-f-link a:hover,
.kh-f-link a:focus {
	color: #b8934e;
}

/* WhatsApp-Schaltfläche schrumpft auf Textbreite statt Spaltenbreite */
.kh-whatsapp {
	width: fit-content;
	align-self: flex-start;
}
.kh-whatsapp .elementor-button {
	min-height: 48px;
}

/* Untere Leiste: Rechtliches rechts, ohne zu dehnen */
.kh-f-recht {
	width: fit-content;
}

/* Elementor setzt auf Menüeinträgen eigene Farben — die Fußzeilen-Menüs
   erben sonst Hellos Linkfarbe beim Fokus. */
.kh-f-menu .elementor-item:focus,
.kh-f-recht .elementor-item:focus {
	color: #b8934e;
}

/* --- Kopfzeile: eingeklappte Navigation --------------------------------- */

/* Das Nav-Widget ist im Burger-Zustand deutlich breiter als das Icon und
   reißt sonst eine Lücke zwischen Icon und Schaltfläche. */
@media (max-width: 1024px) {
	.kh-nav {
		width: fit-content;
		flex: 0 0 auto;
	}
}

/* Auf dem Telefon passen Logo, Icon und Schaltfläche nicht in eine Zeile.
   display:contents löst die Gruppe auf, damit Logo + Icon oben stehen und
   die Schaltfläche darunter über die volle Breite läuft. */
@media (max-width: 767px) {
	.kh-nav-group {
		display: contents;
	}
	.kh-cta {
		width: 100%;
	}
	.kh-cta .elementor-button {
		width: 100%;
		justify-content: center;
	}
	.kh-logo-img img {
		height: 38px;
	}
}

/* ==========================================================================
   Startseite
   ========================================================================== */

/* --- Hero --------------------------------------------------------------- */

/* Design: height 1000px, gedeckelt auf die sichtbare Fensterhöhe. */
.kh-hero {
	height: 1000px;
	max-height: 100svh;
}

/* Elementors Verlaufs-Control kennt nur zwei Stopps, das Design hat vier.
   Der Verlauf trägt die Lesbarkeit der rechtsbündigen Überschrift. */
.kh-hero::before {
	background-image: linear-gradient(
		100deg,
		rgba(15, 52, 112, 0) 34%,
		rgba(15, 52, 112, 0.38) 56%,
		rgba(15, 52, 112, 0.74) 78%,
		rgba(15, 52, 112, 0.88) 100%
	) !important;
}

/* Zeilenlängen aus dem Design, rechtsbündig ausgerichtet */
.kh-hero-h1 .elementor-heading-title {
	max-width: 16ch;
	margin-left: auto;
}
.kh-hero-lead {
	max-width: 46ch;
	margin-left: auto;
}

/* Umriss-Schaltfläche: Rahmen weiß, Füllung erst beim Überfahren */
.kh-btn-outline .elementor-button:hover {
	border-color: #ffffff;
}

/* --- Bildzuschnitte ----------------------------------------------------- */
/* Elementor kennt kein aspect-ratio-Control; feste Höhen würden die
   Sektionen stauchen statt die Bilder zu füllen. */
.kh-portrait img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 40%;
	display: block;
}
.kh-platzbild img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 40% 50%;
	display: block;
}
.kh-card-img img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}
.kh-img-a img { object-position: 50% 50%; }
.kh-img-b img { object-position: 50% 55%; }
.kh-img-c img { object-position: 62% 60%; }

/* --- Zeilenlängen ------------------------------------------------------- */
.kh-fliess { max-width: 66ch; }
.kh-card-text { max-width: 44ch; }
.kh-h2-schmal .elementor-heading-title { max-width: 18ch; }

/* --- Karten ------------------------------------------------------------- */
.kh-card {
	box-shadow: 0 1px 2px rgba(15, 52, 112, 0.06);
	transition: box-shadow 220ms ease, transform 220ms ease;
}
.kh-card:hover {
	box-shadow: 0 14px 32px rgba(15, 52, 112, 0.13);
	transform: translateY(-3px);
}

/* Textlink in Gold mit heller Unterstreichung */
.kh-cardlink a {
	color: #b8934e;
	border-bottom: 1.5px solid #e3d3b4;
	padding-bottom: 2px;
	text-decoration: none;
	transition: color 220ms ease, border-color 220ms ease;
}
.kh-cardlink a:hover {
	color: #0f3470;
	border-bottom-color: #0f3470;
}

/* --- Kontaktkacheln ----------------------------------------------------- */
.kh-kachel {
	transition: border-color 220ms ease;
}
.kh-kachel:hover {
	border-color: #b8934e;
}
/* Wert und Label sollen nebeneinander stehen, nicht umbrechen */
.kh-kachel-wert .elementor-heading-title,
.kh-kachel-label .elementor-heading-title {
	white-space: nowrap;
}

/* --- Aufzählung mit goldenen Punkten ------------------------------------ */
/* Der Punkt soll in der ersten Textzeile sitzen, auch wenn der Eintrag umbricht. */
.kh-punkte .elementor-icon-list-item {
	align-items: flex-start;
}
.kh-punkte .elementor-icon-list-icon {
	display: flex;
	align-items: center;
	height: calc(18px * 1.6);
}

/* --- Karte -------------------------------------------------------------- */
.kh-karte .elementor-widget-container {
	overflow: hidden;
	border-radius: 14px;
}

/* --- Hinweistext -------------------------------------------------------- */
.kh-hinweis a {
	color: #5a6172;
	text-decoration: underline;
}

/* --- Hero auf dem Telefon ------------------------------------------------ */
/* Der Verlauf des Designs läuft waagerecht und trägt bei 390px Breite nicht
   mehr — die Überschrift stünde auf hellem Himmel. Senkrecht statt waagerecht. */
@media (max-width: 767px) {
	.kh-hero::before {
		background-image: linear-gradient(
			180deg,
			rgba(15, 52, 112, 0.42) 0%,
			rgba(15, 52, 112, 0.62) 45%,
			rgba(15, 52, 112, 0.88) 100%
		) !important;
	}
	.kh-hero-h1 .elementor-heading-title,
	.kh-hero-lead {
		max-width: none;
	}
}

/* ==========================================================================
   Unterseiten
   ========================================================================== */

/* --- Seitenkopf --------------------------------------------------------- */

/* Brotkrumen */
.kh-krumen a {
	color: rgba(255, 255, 255, 0.86);
	text-decoration: none;
}
.kh-krumen a:hover {
	color: #e3c98d;
}
.kh-krumen .kh-sep {
	padding: 0 4px;
	color: rgba(255, 255, 255, 0.45);
}
.kh-kopf-h1 .elementor-heading-title {
	max-width: 22ch;
}
.kh-kopf-lead {
	max-width: 52ch;
}

/* --- Bildzuschnitte ----------------------------------------------------- */
/* Elementor kennt kein aspect-ratio-Control. */
.kh-bild img {
	width: 100%;
	object-fit: cover;
	display: block;
}
.kh-ar-32 img { aspect-ratio: 3 / 2; }
.kh-ar-43 img { aspect-ratio: 4 / 3; }
.kh-pos-50-40 img { object-position: 50% 40%; }
.kh-pos-50-45 img { object-position: 50% 45%; }
.kh-pos-50-50 img { object-position: 50% 50%; }
.kh-pos-50-55 img { object-position: 50% 55%; }
.kh-pos-50-60 img { object-position: 50% 60%; }
.kh-pos-40-50 img { object-position: 40% 50%; }

/* Schwungstrecke: Hochformat 3:4, Reihenfolge bleibt erhalten */
.kh-phase img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
}
.kh-phase-01 img { object-position: 42% 50%; }
.kh-phase-02 img { object-position: 36% 50%; }
.kh-phase-03 img { object-position: 36% 50%; }
.kh-phase-04 img { object-position: 38% 50%; }
.kh-phase-text strong {
	color: #b8934e;
	font-weight: 600;
	margin-right: 6px;
}

/* --- Zeilenlängen ------------------------------------------------------- */
.kh-lead { max-width: 68ch; }
.kh-cta-lead { max-width: 56ch; }
.kh-h2-cta .elementor-heading-title { max-width: 24ch; }

/* --- Zitate ------------------------------------------------------------- */
.kh-zitat .elementor-heading-title {
	font-style: italic;
	font-weight: 400;
}

/* --- Verlinkungen im Fließtext ------------------------------------------ */
.kh-inline-link a {
	color: #b8934e;
	text-decoration: underline;
	text-decoration-color: #e3d3b4;
	text-underline-offset: 3px;
}
.kh-inline-link a:hover {
	color: #0f3470;
	text-decoration-color: #0f3470;
}

/* --- Umriss-Schaltfläche auf hellem Grund ------------------------------- */
.kh-btn-gold-outline .elementor-button:hover {
	border-color: #b8934e;
}

/* --- Kursdaten ---------------------------------------------------------- */
.kh-kd-cta .elementor-button {
	width: 100%;
	justify-content: center;
}

/* --- Trainingszeiten ---------------------------------------------------- */
@media (max-width: 767px) {
	.kh-zeitzeile {
		row-gap: 8px;
	}
}

/* --- Rechtsseiten ------------------------------------------------------- */
.kh-recht .kh-fliess {
	max-width: none;
}
.kh-dl-wert a {
	color: #0f3470;
}

/* Überschriften der Unterseiten brechen laut Design bei 22 Zeichen um */
.kh-h2-22 .elementor-heading-title {
	max-width: 22ch;
}