/*
 * KjG Recke – Rahmen: Kopfzeile, Fusszeile und Grundgeruest
 *
 * Variante A "Formenspiel".
 *
 * Diese Datei macht die Seite unabhaengig vom Theme. Kopf- und Fusszeile
 * kommen aus dem Plugin, nicht aus dem Theme - sonst saehe jede Seite
 * anders aus als die Vorlage.
 *
 * Alle Groessen in px. Breakpoints wie in Elementor:
 * Tablet bis 1024px, Handy bis 767px.
 */

/* ===================================================================
   Grundgeruest
   =================================================================== */

html.kjg-html {
	box-sizing: border-box;
	-webkit-text-size-adjust: 100%;
}

html.kjg-html *,
html.kjg-html *::before,
html.kjg-html *::after {
	box-sizing: inherit;
}

body.kjg-body {
	margin: 0;
	padding: 0;
	background: #ffffff;
	color: #10262c;
	font-family: "SeccaKjG", "Segoe UI", system-ui, -apple-system, sans-serif;
	font-size: 17px;
	line-height: 1.6;
	overflow-x: hidden;
}

/* Diese Grundregeln stehen bewusst in :where(). Damit haben sie
   Spezifitaet null und gewinnen nie gegen eine Klasse - sonst faerbt
   die Grundregel am Ende weisse Button-Schrift wieder dunkel ein. */

:where(.kjg-body img) {
	max-width: 100%;
	height: auto;
}

:where(.kjg-body a) {
	color: #00707c;
}

:where(.kjg-body) :where(h1, h2, h3, h4) {
	font-family: "SeccaDisplay", "SeccaKjG", "Segoe UI", system-ui, sans-serif;
	color: #10262c;
	line-height: 1.1;
	margin-top: 0;
}

/* Sprungmarke fuer die Tastaturbedienung */

.kjg-sprung {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background: #063b46;
	color: #ffffff;
	padding: 14px 22px;
	border-radius: 0 0 14px 0;
	font-weight: 700;
	text-decoration: none;
}

.kjg-sprung:focus {
	left: 0;
}

/* Innenbreite, gleich wie in den Elementor-Vorlagen */

.kjg-breite {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.kjg-inhalt {
	min-height: 40vh;
}

/* ===================================================================
   Kopfzeile
   =================================================================== */

.kjg-kopf {
	position: sticky;
	top: 0;
	z-index: 500;
	background: #ffffff;
	border-bottom: 1px solid #e3eef0;
}

.kjg-kopf__innen {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 74px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.kjg-kopf__marke {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	margin-right: auto;
	flex: 0 0 auto;
}

.kjg-kopf__marke img {
	display: block;
	height: 46px;
	width: auto;
}

/* Hauptmenue */

.kjg-nav {
	display: flex;
	align-items: center;
}

.kjg-nav ul {
	display: flex;
	align-items: center;
	gap: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kjg-nav li {
	position: relative;
	margin: 0;
}

.kjg-nav a {
	display: block;
	padding: 6px 0;
	font-family: "SeccaKjG", "Segoe UI", system-ui, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: #10262c;
	text-decoration: none;
	border-bottom: 3px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.kjg-nav a:hover,
.kjg-nav a:focus-visible {
	color: #00707c;
	border-bottom-color: #00b6be;
}

.kjg-nav .current-menu-item > a,
.kjg-nav .current-menu-ancestor > a,
.kjg-nav .current_page_item > a,
.kjg-nav .current_page_parent > a {
	color: #00707c;
	border-bottom-color: #00b6be;
}

/* Untermenue */

.kjg-nav ul ul {
	position: absolute;
	top: 100%;
	left: -18px;
	display: block;
	min-width: 230px;
	padding: 10px;
	margin: 0;
	background: #ffffff;
	border: 1px solid #e3eef0;
	border-radius: 16px;
	box-shadow: 0 16px 38px rgba(6, 59, 70, 0.14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.14s ease, transform 0.14s ease;
}

.kjg-nav li:hover > ul,
.kjg-nav li:focus-within > ul {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.kjg-nav ul ul li {
	width: 100%;
}

.kjg-nav ul ul a {
	padding: 9px 12px;
	border-bottom: 0;
	border-radius: 10px;
	font-size: 15px;
}

.kjg-nav ul ul a:hover,
.kjg-nav ul ul a:focus-visible {
	background: #f2f8f8;
	color: #00707c;
}

/* Knopf in der Kopfzeile */

.kjg-kopf__cta,
a.kjg-kopf__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 24px;
	border-radius: 999px;
	background: #00707c;
	color: #ffffff;
	font-family: "SeccaKjG", "Segoe UI", system-ui, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	flex: 0 0 auto;
	transition: background-color 0.15s ease;
}

.kjg-kopf__cta:hover,
a.kjg-kopf__cta:hover,
.kjg-kopf__cta:focus-visible {
	background: #063b46;
	color: #ffffff;
}

/* Menueknopf fuers Handy */

.kjg-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 1px solid #dce8ea;
	border-radius: 16px;
	background: #f2f8f8;
	cursor: pointer;
	flex: 0 0 auto;
}

.kjg-burger__striche,
.kjg-burger__striche::before,
.kjg-burger__striche::after {
	display: block;
	width: 22px;
	height: 2px;
	background: #10262c;
	border-radius: 2px;
	transition: transform 0.18s ease, opacity 0.18s ease;
}

.kjg-burger__striche {
	position: relative;
}

.kjg-burger__striche::before,
.kjg-burger__striche::after {
	content: "";
	position: absolute;
	left: 0;
}

.kjg-burger__striche::before { top: -7px; }
.kjg-burger__striche::after  { top: 7px; }

.kjg-burger[aria-expanded="true"] .kjg-burger__striche {
	background: transparent;
}

.kjg-burger[aria-expanded="true"] .kjg-burger__striche::before {
	top: 0;
	transform: rotate(45deg);
}

.kjg-burger[aria-expanded="true"] .kjg-burger__striche::after {
	top: 0;
	transform: rotate(-45deg);
}

/* Aufgeklapptes Menue auf dem Handy */

.kjg-handymenue {
	display: none;
	border-top: 1px solid #e3eef0;
	background: #ffffff;
	padding: 16px 0 26px;
}

.kjg-handymenue.ist-offen {
	display: block;
}

.kjg-handymenue ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kjg-handymenue li {
	margin: 0;
}

.kjg-handymenue a {
	display: block;
	padding: 14px 4px;
	border-bottom: 1px solid #eef5f6;
	font-size: 19px;
	font-weight: 700;
	color: #10262c;
	text-decoration: none;
}

.kjg-handymenue ul ul a {
	padding-left: 22px;
	font-size: 17px;
	font-weight: 400;
	color: #4a6168;
}

.kjg-handymenue .kjg-kopf__cta {
	margin-top: 20px;
	width: 100%;
	min-height: 54px;
}

/* ===================================================================
   Fusszeile
   =================================================================== */

.kjg-fuss {
	position: relative;
	overflow: hidden;
	background: #063b46;
	color: #ffffff;
	margin-top: 0;
}

/* Bildmarke halbtransparent als Zier, wie in der Vorlage */
.kjg-fuss::before {
	content: "";
	position: absolute;
	left: -90px;
	bottom: -120px;
	width: 380px;
	height: 380px;
	background-image: url("../img/bildmarke-weiss.png");
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.07;
	pointer-events: none;
}

.kjg-fuss__innen {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
	gap: 36px;
	padding-top: 56px;
	padding-bottom: 40px;
}

.kjg-fuss__marke img {
	display: block;
	height: 42px;
	width: auto;
	margin-bottom: 20px;
}

.kjg-fuss__anschrift {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.86);
}

.kjg-fuss__titel {
	margin: 0 0 16px;
	font-family: "SeccaKjG", "Segoe UI", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #ffffff;
}

.kjg-fuss ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kjg-fuss li {
	margin: 0 0 10px;
}

.kjg-fuss a {
	font-size: 16px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.9);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kjg-fuss a:hover,
.kjg-fuss a:focus-visible {
	color: #a6ce39;
}

.kjg-fuss__leiste {
	position: relative;
	z-index: 1;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.kjg-fuss__leiste-innen {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	align-items: center;
	padding-top: 18px;
	padding-bottom: 22px;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.62);
}

/* ===================================================================
   Variante A – Formen und Uebergaenge
   =================================================================== */

/* Schwung aus element_8 als Uebergang zwischen zwei Flaechen.
   Traegst du beim Container unter CSS-Klassen ein. */

.kjg-schwung-oben {
	position: relative;
}

.kjg-schwung-oben::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -58px;
	height: 60px;
	background: inherit;
	clip-path: polygon(0 100%, 100% 0, 100% 100%);
	pointer-events: none;
}

.kjg-schwung-unten {
	position: relative;
}

.kjg-schwung-unten::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -58px;
	height: 60px;
	background: inherit;
	clip-path: polygon(0 0, 100% 0, 0 100%);
	pointer-events: none;
}

/* Pfeil aus element_4 als Akzent, z. B. vor einer Dachzeile */

.kjg-pfeil::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 26px;
	margin-right: 10px;
	vertical-align: -4px;
	background-image: url("../img/el4-hell.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

/* ===================================================================
   Tablet: bis 1024px
   =================================================================== */

@media (max-width: 1024px) {
	.kjg-fuss__innen {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}

	.kjg-nav ul {
		gap: 18px;
	}

	.kjg-nav a {
		font-size: 15px;
	}

	.kjg-kopf__innen {
		gap: 18px;
	}
}

/* ===================================================================
   Handy: bis 767px
   =================================================================== */

@media (max-width: 767px) {
	.kjg-breite {
		padding: 0 18px;
	}

	.kjg-nav,
	.kjg-kopf__innen > .kjg-kopf__cta {
		display: none;
	}

	.kjg-burger {
		display: flex;
	}

	.kjg-kopf__innen {
		min-height: 66px;
	}

	.kjg-kopf__marke img {
		height: 40px;
	}

	.kjg-fuss__innen {
		grid-template-columns: 1fr;
		gap: 30px;
		padding-top: 42px;
	}

	.kjg-fuss::before {
		width: 260px;
		height: 260px;
		left: -70px;
		bottom: -90px;
	}

	.kjg-schwung-oben::before,
	.kjg-schwung-unten::after {
		height: 34px;
		top: -32px;
	}

	.kjg-schwung-unten::after {
		top: auto;
		bottom: -32px;
	}
}

/* ===================================================================
   Druck
   =================================================================== */

@media print {
	.kjg-kopf,
	.kjg-burger,
	.kjg-handymenue,
	.kjg-sprung {
		display: none !important;
	}

	.kjg-fuss {
		background: #ffffff !important;
		color: #000000 !important;
		border-top: 1pt solid #666;
	}

	.kjg-fuss::before {
		display: none;
	}

	.kjg-fuss a,
	.kjg-fuss__anschrift,
	.kjg-fuss__titel,
	.kjg-fuss__leiste-innen {
		color: #000000 !important;
	}
}

/* ===================================================================
   Inhaltsbreite von Elementor
   Auf dieser Website steht unter Elementor > Website-Einstellungen >
   Layout eine Inhaltsbreite von 300 px. Damit schrumpft jede Seite zu
   einer schmalen Spalte, und grosse Bilder schieben die Seite seitlich
   aus dem Bild. Hier wird die Breite auf das Mass der Vorlage gesetzt.
   =================================================================== */

.kjg-body .elementor .e-con,
.kjg-body .elementor .e-con-inner {
	--container-max-width: 1200px;
}

.kjg-body .elementor-section.elementor-section-boxed > .elementor-container {
	max-width: 1200px;
}

.kjg-body .elementor img {
	max-width: 100%;
	height: auto;
}

@media (max-width: 1024px) {
	.kjg-body .elementor .e-con,
	.kjg-body .elementor .e-con-inner {
		--container-max-width: 100%;
	}

	.kjg-body .elementor-section.elementor-section-boxed > .elementor-container {
		max-width: 100%;
	}
}

/* Foto-Platzhalter in die KjG-Formen bringen. Die Masken weiter oben
   greifen nur bei echten Bildern; solange dort noch ein Platzhalter
   steht, uebernimmt die Rundung. */

.kjg-form-blob .kjg-fotoplatz {
	border-radius: 48% 52% 58% 42% / 46% 44% 56% 54% !important;
}

.kjg-form-kreis .kjg-fotoplatz {
	border-radius: 999px !important;
}

.kjg-form-huegel .kjg-fotoplatz {
	border-radius: 190px 190px 26px 26px !important;
}