/* =====================================================================
   Lern-Methode – Typografie des Inhaltsbereichs
   Gilt für .content im Frontend und für den Editor (siehe editor.css).
   ===================================================================== */

/* Schriften – hier statt in style.css, weil diese Datei auch im Editor lädt.
   Die @font-face-Regeln kommen aus cache/fonts/ (siehe index.php / editor.css). */
:root {
	--font-text:    "LM Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--font-heading: "LM Heading", "LM Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

:where(.content, .mce-content-body, .cke_editable) {
	color: #1f2933;
	font: 16px/1.65 var(--font-text);
}

:where(.content, .mce-content-body, .cke_editable) h1,
:where(.content, .mce-content-body, .cke_editable) h2,
:where(.content, .mce-content-body, .cke_editable) h3,
:where(.content, .mce-content-body, .cke_editable) h4 {
	color: #8a1c14;
	font-family: var(--font-heading);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	margin: 1.6em 0 .5em;
}
:where(.content, .mce-content-body, .cke_editable) > :first-child { margin-top: 0; }

:where(.content, .mce-content-body, .cke_editable) h1 { font-size: clamp(26px, 3.2vw, 34px); }
:where(.content, .mce-content-body, .cke_editable) h2 { font-size: clamp(21px, 2.4vw, 26px); }
:where(.content, .mce-content-body, .cke_editable) h3 { font-size: 20px; color: #1f7fae; }
:where(.content, .mce-content-body, .cke_editable) h4 { font-size: 17px; color: #1f2933; }

/* Untertitel direkt unter der H1 – wie auf der alten Seite in Blau */
:where(.content, .mce-content-body, .cke_editable) h1 + h2,
:where(.content, .mce-content-body, .cke_editable) .lead {
	margin: .4em 0 1.4em;
	color: #1f7fae;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0;
}

:where(.content, .mce-content-body, .cke_editable) p,
:where(.content, .mce-content-body, .cke_editable) ul,
:where(.content, .mce-content-body, .cke_editable) ol,
:where(.content, .mce-content-body, .cke_editable) blockquote,
:where(.content, .mce-content-body, .cke_editable) table { margin: 0 0 1.1em; }

:where(.content, .mce-content-body, .cke_editable) ul,
:where(.content, .mce-content-body, .cke_editable) ol { padding-left: 1.4em; }
:where(.content, .mce-content-body, .cke_editable) li { margin-bottom: .3em; }
:where(.content, .mce-content-body, .cke_editable) li::marker { color: #1f7fae; }

:where(.content, .mce-content-body, .cke_editable) a { color: #1f7fae; text-underline-offset: 2px; }
:where(.content, .mce-content-body, .cke_editable) a:hover { color: #145b80; }

/* height !important: WYSIWYG-Editoren schreiben feste width/height als Inline-Style –
   ohne das würde max-width das Bild auf schmalen Geräten verzerren */
:where(.content, .mce-content-body, .cke_editable) img { max-width: 100%; height: auto !important; border-radius: 10px; }

:where(.content, .mce-content-body, .cke_editable) blockquote {
	padding: 14px 20px;
	border-left: 4px solid #1f7fae;
	border-radius: 0 10px 10px 0;
	background: #e3f1f8;
	font-style: italic;
}

:where(.content, .mce-content-body, .cke_editable) hr {
	margin: 2em 0;
	border: 0;
	border-top: 1px solid #e1e8ed;
}

:where(.content, .mce-content-body, .cke_editable) table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}
:where(.content, .mce-content-body, .cke_editable) th,
:where(.content, .mce-content-body, .cke_editable) td {
	padding: 9px 12px;
	border-bottom: 1px solid #e1e8ed;
	text-align: left;
	vertical-align: top;
}
:where(.content, .mce-content-body, .cke_editable) th { background: #f5f9fb; color: #0f4766; }

/* Hervorgehobener Kasten, z.B. für „Kostenlose Probestunde“
   Im Editor: Absatz/DIV mit Klasse "box" */
:where(.content, .mce-content-body, .cke_editable) .box {
	margin: 1.8em 0;
	padding: 20px 24px;
	border-radius: 12px;
	background: linear-gradient(135deg, #1f7fae 0%, #145b80 100%);
	color: #fff;
	font-weight: 600;
}
:where(.content, .mce-content-body, .cke_editable) .box a { color: #fff; }
/* =====================================================================
   Lern-Methode – Layout
   Ein Kasten: Kopfbild + (Sidebar | Inhalt) + Footer
   Typografie des Inhalts steht in content.css (auch für den Editor).
   ===================================================================== */

:root {
	--brand:        #8a1c14;   /* Weinrot (Überschriften, Footer) */
	--accent:       #1f7fae;   /* Blau (Untertitel, Links) */
	--accent-dark:  #145b80;
	--accent-soft:  #e3f1f8;
	--side-bg:      #f5f9fb;   /* Hintergrund linke Spalte */
	--side-hover:   #eaf3f8;
	--text:         #1f2933;
	--muted:        #5b6b78;
	--line:         #e1e8ed;
	--page-bg:      #dde9ef;
	--radius:       16px;
	--shadow:       0 10px 40px rgba(20, 50, 70, .12);
	--sidebar-w:    270px;
	--maxw:         1180px;
	--header-ratio: 4;         /* Kopfbild-Seitenverhältnis (Breite : Höhe = 4 : 1) */
	--header-min:   150px;     /* Mindesthöhe auf schmalen Geräten */
	--gutter:       clamp(0px, 3vw, 32px);   /* Abstand Kasten ↔ Fensterrand */
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	padding: var(--gutter) var(--gutter) calc(var(--gutter) + 8px);
	font: 16px/1.65 var(--font-text);   /* Schriftvariablen: content.css */
	color: var(--text);
	background: var(--page-bg) linear-gradient(180deg, #b9d3df 0, var(--page-bg) 420px) no-repeat;
}

.skip-link {
	position: absolute;
	left: 12px; top: -60px;
	z-index: 10;
	padding: 10px 16px;
	border-radius: 8px;
	background: var(--brand);
	color: #fff;
	text-decoration: none;
}
.skip-link:focus { top: 12px; }

.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- Der Kasten ---------- */
.page {
	max-width: var(--maxw);
	margin: 0 auto;
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;              /* rundet Kopfbild & Footer mit ab */
}

/* ---------- Kopfbild (skaliert mit der Breite) ---------- */
.site-header {
	position: relative;
	/* Höhe aus der Kastenbreite – bewusst kein aspect-ratio: das würde die
	   Mindesthöhe in eine Mindestbreite (150px × 4 = 600px) umrechnen und
	   den Kopf auf dem Handy über den Kasten hinaus verbreitern */
	height: max(var(--header-min), calc(min(var(--maxw), 100vw - 2 * var(--gutter)) / var(--header-ratio)));
	display: flex;
	align-items: flex-end;
	/* Alle vw-Werte im Kopf sind so gewählt, dass ihr Maximum bei ~1250px
	   Fensterbreite erreicht wird – dort hat der Kasten seine volle Breite.
	   So wachsen Kopf, Logos und Schrift im selben Verhältnis. */
	padding: clamp(16px, 2.5vw, 32px);
	color: #fff;
	background:
		radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .18) 0, transparent 40%),
		radial-gradient(circle at 60% 110%, rgba(255, 255, 255, .12) 0, transparent 45%),
		linear-gradient(120deg, #164b68 0%, var(--accent) 60%, #4fa6cf 100%);
}
.site-header.has-image {
	background:
		linear-gradient(100deg, rgba(10, 45, 70, .75) 0%, rgba(10, 45, 70, .3) 50%, rgba(10, 45, 70, 0) 100%),
		var(--header-img) center / cover no-repeat,
		var(--accent-dark);
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: inherit;
	text-decoration: none;
}
.brand-logo {
	width: clamp(42px, 5.5vw, 64px);
	height: auto;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .25));
}
/* Großes Bild-Logo (mit Schriftzug): skaliert mit der Viewport-Breite */
.brand.has-logo { align-items: flex-end; gap: clamp(10px, 2vw, 22px); }
.brand.has-logo .brand-logo { width: clamp(170px, 40vw, 500px); }
.brand.has-logo .brand-text span { padding-bottom: .4em; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }

/* Zweites Logo rechts (img/logo-right.*), darunter WEBSITE_HEADER */
.site-header { justify-content: space-between; gap: 12px; }
.header-aside {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: clamp(4px, .8vw, 10px);
	color: #fff;
	text-align: right;
}
.logo-right {
	width: clamp(110px, 24vw, 300px);
	height: auto;
	filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .3));
}
.site-url {
	font-family: var(--font-heading);
	font-size: clamp(12px, 2.5vw, 31px);
	font-weight: 600;
	letter-spacing: .3px;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}
.brand-text strong {
	display: block;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: clamp(22px, 3.4vw, 38px);
	line-height: 1.1;
	letter-spacing: -.5px;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.brand-text span {
	display: block;
	opacity: .92;
	font-size: clamp(13px, 1.3vw, 15px);
}

/* ---------- Zwei Spalten ohne Lücke ---------- */
.layout {
	display: grid;
	grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
}

/* ---------- Seitenspalte / Navigation ---------- */
.nav-toggle { display: none; }

.sidebar {
	background: var(--side-bg);
	border-right: 1px solid var(--line);
	padding: 18px 0 28px;
}
.sidebar-inner { position: sticky; top: 0; }

.sidebar-title {
	margin: 0;
	padding: 4px 24px 10px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--muted);
}

.menu, .menu ul { list-style: none; margin: 0; padding: 0; }

.menu > li > a {
	display: block;
	padding: 11px 24px 11px 20px;
	border-left: 4px solid transparent;
	color: var(--brand);
	font-family: var(--font-heading);
	font-size: 16.5px;
	font-weight: 500;
	text-decoration: none;
	transition: background .15s, border-color .15s;
}
.menu > li + li { border-top: 1px solid var(--line); }
.menu > li > a:hover,
.menu > li > a:focus-visible { background: var(--side-hover); border-left-color: var(--accent); }

/* aktuelle Seite / aktueller Zweig (Klassen von show_menu2) */
.menu > li.menu-current > a,
.menu > li.menu-parent > a {
	background: var(--accent-soft);
	border-left-color: var(--accent);
	color: #0f4766;
}

/* 2. Ebene – show_menu2 gibt sie dank SM2_TRIM nur im aktiven Zweig aus */
.menu ul { padding: 4px 0 10px; }
.menu ul a {
	display: block;
	position: relative;
	padding: 6px 24px 6px 42px;
	color: var(--muted);
	font-size: 14.5px;
	line-height: 1.45;
	text-decoration: none;
}
.menu ul a::before {
	content: "";
	position: absolute;
	left: 27px; top: 50%;
	width: 6px; height: 6px;
	margin-top: -3px;
	border-radius: 50%;
	background: #c3d2dc;
}
.menu ul a:hover,
.menu ul a:focus-visible { color: var(--accent); }
.menu ul li.menu-current > a { color: var(--accent); font-weight: 600; }
.menu ul li.menu-current > a::before { background: var(--accent); }

.sidebar-block {
	margin: 20px 20px 0;
	padding: 16px 18px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid var(--line);
	font-size: 14.5px;
}
.sidebar-block > :first-child { margin-top: 0; }
.sidebar-block > :last-child  { margin-bottom: 0; }

.sidebar-search { margin: 20px 20px 0; }
.sidebar-search input {
	width: 100%;
	padding: 9px 14px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	font: inherit;
	font-size: 14.5px;
	color: var(--text);
}
.sidebar-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- Inhalt ---------- */
.content {
	padding: clamp(22px, 4vw, 44px) clamp(20px, 4.5vw, 52px) clamp(30px, 5vw, 56px);
	min-width: 0;
}

/* ---------- Footer (unten im Kasten, über beide Spalten) ---------- */
.site-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 28px;
	padding: 22px clamp(20px, 3vw, 32px);
	background: var(--brand);
	color: #f6dcd8;
	font-size: 14.5px;
}
.site-footer a { color: #fff; }
.site-footer p { margin: 0; }
.footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------- Mobil: Hamburger ---------- */
@media (max-width: 860px) {
	.layout { grid-template-columns: minmax(0, 1fr); }

	.nav-toggle {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		padding: 14px 20px;
		border: 0;
		border-bottom: 1px solid var(--line);
		background: var(--side-bg);
		color: var(--brand);
		font: inherit;
		font-family: var(--font-heading);
		font-weight: 600;
		cursor: pointer;
	}
	.nav-icon {
		width: 24px; height: 24px;
		flex-shrink: 0;
		fill: none;
		stroke: currentColor;
		stroke-width: 2.2;
		stroke-linecap: round;
	}
	.nav-toggle .icon-close,
	.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
	.nav-toggle[aria-expanded="true"] .icon-close { display: inline; }

	.sidebar { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 16px; }
	.sidebar-title { display: none; }

	/* Ohne JS bleibt das Menü sichtbar; mit JS ist es zugeklappt */
	.js .sidebar { display: none; }
	.js .nav-open .sidebar { display: block; }
	html:not(.js) .nav-toggle { display: none; }

	.menu > li > a { padding: 14px 20px 14px 16px; }   /* größere Touch-Ziele */
	.menu ul a { padding: 10px 20px 10px 42px; }
}

@media (max-width: 520px) {
	.page { border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}

@media print {
	body { padding: 0; background: none; }
	.page { box-shadow: none; border-radius: 0; }
	.sidebar, .nav-toggle, .skip-link { display: none !important; }
	.layout { display: block; }
	.site-header { height: auto; background: none; color: #000; padding: 0 0 12px; }
	.brand-text strong { text-shadow: none; }
}