/* ==========================================================================
   Ocean Fused Training – Designsystem
   Umgesetzt nach REDESIGN-GUIDE.md („Coastal Modern", Stand 15.9.2026).

   Die Design-Artboards sind feste Breiten (1440 px Desktop, 390 px Mobil)
   mit durchgehend Inline-Styles. Inline-Styles können keine Media-Queries –
   für eine echte Seite MUSS das klassenbasiert werden. Diese Datei ist die
   Übersetzung: dieselben Werte, aber als System mit Haltepunkten dazwischen.

   Haltepunkte:
     > 1024px   Desktop-Artboard (1440 px Raster, Seitenrand 64 px)
     641–1024px Zwischenstufe, die es im Design nicht gibt – mehrspaltige
                Raster fallen auf eine Spalte weniger zurück
     <= 640px   Mobil-Artboard (Seitenrand 20 px, alles einspaltig)

   Eckiges Design seit 10.9.2026: border-radius ist überall 0. Die
   Radius-Angaben im Guide sind ausdrücklich als 0 zu lesen.
   ========================================================================== */

@import url('../fonts/schriften.css');

/* --------------------------------------------------------------------------
   1. Farben, Abstände, Maße
   -------------------------------------------------------------------------- */
:root {
	/* Farben – exakt die Palette aus dem Guide */
	--creme:        #F3EEE6;
	--gruen:        #69A88D;
	--dunkelgruen:  #1F3D33;
	--text:         #465650;
	--nebentext:    #5E6B66;
	--mint-hell:    #D1DDD0;
	--mint:         #AECBBA;
	--gruen-mittel: #8CBAA3;
	--auf-dunkel:   #C9D9CF;
	--weiss:        #FFFFFF;
	--warn:         #E8A33D;

	/* Abstandsskala, 8er-Basis (Guide, Abschnitt „Abstände") */
	--xl: 96px;
	--l:  80px;
	--m:  48px;
	--s:  24px;

	/* Raster */
	--seitenrand:   64px;
	--inhaltsmax:  1312px;

	--schrift-text: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
	--schrift-titel: 'Montserrat', Arial, sans-serif;
}

@media (max-width: 640px) {
	:root {
		--xl: 56px;
		--l:  48px;
		--m:  32px;
		--s:  20px;
		--seitenrand: 20px;
	}
}

/* --------------------------------------------------------------------------
   2. Grundlagen
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
	margin: 0;
	background: var(--creme);
	color: var(--text);
	font-family: var(--schrift-text);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
@media (max-width: 640px) { body { font-size: 16px; line-height: 1.6; } }

/* height: auto ist hier NICHT kosmetisch, sondern zwingend.
   Die width/height-Attribute im <img> wirken als Praesentationshinweis und
   setzen eine feste Hoehe. Damit ist die Box definit, und ein per CSS
   gesetztes aspect-ratio wird ignoriert - das Bild erscheint in voller
   Dateihoehe. Mit height:auto gewinnt wieder das CSS, und die Attribute
   tun nur noch das, wofuer sie da sind: das Seitenverhaeltnis vorab
   bekanntgeben, damit beim Laden nichts springt.
   Klassen mit eigener Hoehe (.bild--hoch, .hero__bild, .kachel img ...)
   sind spezifischer und stechen diese Regel. */
img, video { max-width: 100%; height: auto; display: block; }
/* <picture> nur als Huelle fuer die Handy-Fassung: fuer das Layout zaehlt das
   <img> darin, als stuende es direkt an seinem Platz. */
picture { display: contents; }
picture > source { display: none; }

/* Lange, unumbrechbare Zeichenketten (E-Mail, URL, zusammengesetzte Wörter)
   dürfen die Seite nicht breiter machen als den Viewport. */
p, li, dd, td, a, h1, h2, h3, h4, figcaption { overflow-wrap: break-word; }

a { color: var(--gruen); text-decoration: none; }
a:hover { color: var(--dunkelgruen); }

/* Sichtbarer Fokus – im Design nicht vorgesehen, aber ohne ihn ist die Seite
   per Tastatur nicht bedienbar. Guide nennt den Ring bei den Terminpillen:
   2px #1F3D33 mit 2px Offset. Der gilt hier überall. */
:focus-visible {
	outline: 2px solid var(--dunkelgruen);
	outline-offset: 2px;
}

/* Sprungmarke für Tastatur- und Screenreader-Nutzung */
.sprungmarke {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 12px 20px;
	background: var(--dunkelgruen);
	color: var(--creme);
	font-weight: 700;
}
.sprungmarke:focus { left: 8px; top: 8px; color: var(--creme); }

/* Nur auf dem Handy sichtbar – fuer Bausteine, die der mobile Entwurf hat
   und der Desktop-Entwurf nicht. */
.nur-mobil { display: none; }
/* Gezielte Zeilenumbrueche nur auf einem Geraet */
.umbruch-mobil { display: none; }
@media (max-width: 640px) { .umbruch-mobil { display: inline; } .umbruch-desktop { display: none; } }
@media (max-width: 640px) { .nur-mobil { display: block; } }

.nur-screenreader {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Raster: Sektionen und Inhaltsbreite
   Regel 1 der Abstandsskala: Polster oben, nie unten – so addieren sich
   Abstände zwischen zwei Blöcken nicht.
   -------------------------------------------------------------------------- */
.sektion { padding: var(--l) var(--seitenrand) 0; }
.sektion--erste { padding-top: 72px; }
.sektion--xl { padding-top: var(--xl); }
.sektion--abschluss { padding-bottom: var(--xl); }

@media (max-width: 640px) { .sektion--erste { padding-top: 36px; } }

.inhalt { max-width: var(--inhaltsmax); margin: 0 auto; }
.inhalt--schmal { max-width: 880px; }
.inhalt--text   { max-width: 720px; }

/* Farbige Vollflächen: 72px Innenpolster, randlos aneinander (Regel 2) */
.flaeche {
	padding: 72px var(--seitenrand);
	margin-top: var(--l);
}
.flaeche--gruen  { background: var(--gruen);       color: var(--creme); }
.flaeche--dunkel { background: var(--dunkelgruen); color: var(--auf-dunkel); }
.flaeche--mint   { background: var(--mint-hell);   color: var(--text); }
.flaeche + .flaeche { margin-top: 0; }
@media (max-width: 640px) { .flaeche { padding: 48px var(--seitenrand); } }

/* Stapel: senkrechte Abstände ohne Rand-Addition */
.stapel   { display: flex; flex-direction: column; }
.stapel-s  > * + * { margin-top: var(--s); }
.stapel-m  > * + * { margin-top: var(--m); }
.stapel-l  > * + * { margin-top: var(--l); }
.stapel-18 > * + * { margin-top: 18px; }

/* Raster. Fallen über die Zwischenstufe auf weniger Spalten zurück, statt
   von 4 direkt auf 1 zu springen. */
.raster { display: grid; gap: 32px; }
.raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
	.raster--3, .raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.raster { gap: 16px; }
	.raster--2, .raster--3, .raster--4 { grid-template-columns: minmax(0, 1fr); }
}

/* Zweispalter Bild/Text. .paar--gedreht stellt das Bild im Quelltext nach
   hinten, auf Mobil kommt es per order trotzdem zuerst (Guide: „Bei Zeilen
   mit alternierender Seite immer Bild zuerst"). */
.paar {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 56px;
	align-items: center;
}
.paar--schmal-links { grid-template-columns: 480px minmax(0, 1fr); gap: 72px; }

/* Feste linke Spalte, Breite per --spalte einstellbar.
   WICHTIG: grid-template-columns NIE inline setzen - Inline-Styles lassen
   sich von Media-Queries nicht überschreiben, die feste Spalte bliebe dann
   auch auf dem Handy stehen und schiebt die Seite seitlich raus. Die
   Custom-Property darf inline stehen, die Regel gewinnt trotzdem. */
.paar--fest { grid-template-columns: var(--spalte, 480px) minmax(0, 1fr); }
@media (max-width: 1024px) { .paar--fest { grid-template-columns: minmax(0, 1fr); } }

.kontaktraster--luft { gap: 56px; align-items: start; }
@media (max-width: 1024px) {
	.paar, .paar--schmal-links { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.paar__bild { order: -1; }
}

/* --------------------------------------------------------------------------
   4. Typografie
   -------------------------------------------------------------------------- */
.titel-1, .titel-2, .titel-3, .titel-4 {
	font-family: var(--schrift-titel);
	font-weight: 800;
	color: var(--dunkelgruen);
	margin: 0;
}
.titel-1 { font-size: 56px; line-height: 1.08; letter-spacing: -1.2px; }
.titel-2 { font-size: 44px; line-height: 1.12; letter-spacing: -1px; }
.titel-3 { font-size: 22px; line-height: 1.25; }
.titel-4 { font-size: 18px; line-height: 1.3; }

/* Nur der Startseiten-Hero ist größer */
.titel-1--hero { font-size: 64px; letter-spacing: -1.5px; }
.titel-1--hero .titel-1__vorzeile {
	display: block; font-size: 40px; letter-spacing: -.8px; margin-bottom: 6px;
}

@media (max-width: 1024px) {
	.titel-1 { font-size: 46px; }
	.titel-1--hero { font-size: 52px; }
	.titel-2 { font-size: 38px; }
}
@media (max-width: 640px) {
	.titel-1 { font-size: 38px; line-height: 1.1; letter-spacing: -1px; }
	.titel-1--hero { font-size: 40px; }
	.titel-1--hero .titel-1__vorzeile { font-size: 26px; }
	.titel-2 { font-size: 32px; line-height: 1.12; letter-spacing: -.6px; }
	.titel-3 { font-size: 20px; }
}

.kicker {
	font-size: 13px; font-weight: 700; letter-spacing: 1.2px;
	text-transform: uppercase; color: var(--gruen); margin: 0;
}
@media (max-width: 640px) { .kicker { font-size: 12px; } }

/* Die Entwuerfe setzen die mobile Schriftstufe nicht einheitlich: Home,
   Teneriffa und Ueber uns nutzen 12px-Kicker und 32px-H2, die uebrigen
   13px und 30px. Die globale Stufe folgt der Mehrheit; die
   Reservierungsseite bekommt ihre eigenen Werte, statt alle anzufassen. */
@media (max-width: 640px) {
	[data-seite="online-reservierung"] .titel-1 { font-size: 34px; line-height: 1.1; }
	[data-seite="online-reservierung"] .titel-2 { font-size: 30px; line-height: 1.15; }
	[data-seite="online-reservierung"] .kicker  { font-size: 13px; }
}

p { margin: 0; }
.lead  { font-size: 19px; line-height: 1.6; }
.klein { font-size: 15px; }
@media (max-width: 640px) {
	.lead  { font-size: 17px; }
	.klein { font-size: 14px; }
}

/* Farbvarianten für Text auf farbigem Grund */
.auf-gruen  { color: var(--creme); }
.auf-gruen  .titel-1, .auf-gruen  .titel-2, .auf-gruen  .titel-3, .auf-gruen  .titel-4 { color: var(--creme); }
.auf-gruen  .kicker { color: var(--mint-hell); }
.auf-dunkel { color: var(--auf-dunkel); }
.auf-dunkel .titel-1, .auf-dunkel .titel-2, .auf-dunkel .titel-3, .auf-dunkel .titel-4 { color: var(--creme); }
.auf-dunkel .kicker { color: var(--gruen-mittel); }
.auf-gruen a, .auf-dunkel a { color: var(--creme); }

.neben { color: var(--nebentext); }

/* --------------------------------------------------------------------------
   Rücknahme der Farbvererbung in hellen Bausteinen.

   .auf-gruen und .auf-dunkel färben Text und Überschriften hell, damit sie
   auf der farbigen Fläche lesbar sind. Karten, Formulare und Kacheln INNERHALB
   dieser Flächen haben aber wieder einen hellen Grund - dort war der Text
   danach weiss auf weiss und schlicht unsichtbar.
   -------------------------------------------------------------------------- */
.auf-gruen .karte, .auf-dunkel .karte, .flaeche--gruen .karte,
.auf-gruen .formularkarte, .flaeche--gruen .formularkarte,
.auf-gruen .landkachel, .flaeche--gruen .landkachel,
.auf-gruen .termin, .flaeche--gruen .termin,
.auf-gruen .ortkarte, .flaeche--gruen .ortkarte,
.auf-gruen .kursfakten, .flaeche--gruen .kursfakten {
	color: var(--text);
}
.auf-gruen .karte .titel-1,  .flaeche--gruen .karte .titel-1,
.auf-gruen .karte .titel-2,  .flaeche--gruen .karte .titel-2,
.auf-gruen .karte .titel-3,  .flaeche--gruen .karte .titel-3,
.auf-gruen .karte .titel-4,  .flaeche--gruen .karte .titel-4,
.auf-dunkel .karte .titel-3, .auf-dunkel .karte .titel-4,
.auf-gruen .ortkarte .titel-3, .flaeche--gruen .ortkarte .titel-3,
.auf-gruen .landkachel, .flaeche--gruen .landkachel {
	color: var(--dunkelgruen);
}
.auf-gruen .karte .kicker, .flaeche--gruen .karte .kicker,
.auf-gruen .ortkarte .kicker, .flaeche--gruen .ortkarte .kicker {
	color: var(--gruen);
}
/* Outline-Knopf in einer hellen Karte: wieder dunkler Rahmen statt cremefarben */
.auf-gruen .karte .knopf--sekundaer, .flaeche--gruen .karte .knopf--sekundaer,
.auf-gruen .ortkarte .knopf--sekundaer, .flaeche--gruen .ortkarte .knopf--sekundaer {
	color: var(--dunkelgruen); border-color: var(--dunkelgruen);
}
.auf-gruen .karte .knopf--sekundaer:hover, .flaeche--gruen .karte .knopf--sekundaer:hover {
	background: var(--dunkelgruen); color: var(--creme);
}
.auf-gruen .karte a, .flaeche--gruen .karte a,
.auf-gruen .ortkarte a, .flaeche--gruen .ortkarte a {
	color: var(--dunkelgruen);
}

/* --------------------------------------------------------------------------
   5. Knöpfe – drei Größen, keine weitere (Guide, Abschnitt „Buttons")
   -------------------------------------------------------------------------- */
.knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 56px;
	padding: 0 30px;
	font-family: var(--schrift-text);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	text-align: center;
	transition: background-color .15s ease, color .15s ease;
}
.knopf--kompakt { height: 48px; padding: 0 22px; font-size: 15px; }
.knopf--inline  { height: 40px; padding: 0 14px; font-size: 13px; }

.knopf--primaer { background: var(--gruen); color: var(--creme); }
.knopf--primaer:hover { background: var(--gruen-mittel); color: var(--creme); }

/* Rahmen IMMER 2px (Regel 2). Hover füllt den Rahmenfarbton. */
.knopf--sekundaer {
	background: transparent;
	color: var(--dunkelgruen);
	border: 2px solid var(--dunkelgruen);
	padding: 0 28px;
}
.knopf--sekundaer:hover { background: var(--dunkelgruen); color: var(--creme); }

/* Auf dunkelgrünem Grund invers */
.auf-dunkel .knopf--primaer, .flaeche--dunkel .knopf--primaer {
	background: var(--creme); color: var(--dunkelgruen);
}
.auf-dunkel .knopf--primaer:hover, .flaeche--dunkel .knopf--primaer:hover {
	background: var(--mint-hell); color: var(--dunkelgruen);
}
.auf-dunkel .knopf--sekundaer, .flaeche--gruen .knopf--sekundaer, .auf-gruen .knopf--sekundaer {
	color: var(--creme); border-color: var(--creme);
}
.auf-dunkel .knopf--sekundaer:hover, .flaeche--gruen .knopf--sekundaer:hover, .auf-gruen .knopf--sekundaer:hover {
	background: var(--creme); color: var(--dunkelgruen);
}

.knopf-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
@media (max-width: 640px) {
	/* Mobil volle Breite, untereinander */
	.knopf-reihe { flex-direction: column; align-items: stretch; gap: 12px; }
	.knopf { height: 54px; width: 100%; }
	.knopf--kompakt, .knopf--inline { width: auto; }
	.knopf--kompakt { height: 48px; }
	.knopf--inline  { height: 40px; }
}

/* Textlink mit Pfeil – nur als Querverweis im Satz, nie als Handlungsaufruf */
/* „Weiter zu Oktober": im Entwurf dunkel, fett, mit Unterstrich – kein
   gruener Nebenlink. */
.pfeillink {
	display: inline-flex; align-self: flex-start; align-items: center; gap: 10px;
	padding: 4px 0;
	color: var(--dunkelgruen);
	font-family: var(--schrift-titel); font-weight: 800; font-size: 16px; line-height: 1.3;
	/* border zuerst ganz weg – sonst bleibt beim <button> der Standardrahmen
	   des Browsers stehen – und dann nur die Unterkante setzen. */
	border: 0; border-bottom: 2px solid var(--dunkelgruen);
}
.pfeillink:hover { color: var(--gruen); border-bottom-color: var(--gruen); }
.pfeillink:hover svg { stroke: var(--gruen); }

/* --------------------------------------------------------------------------
   6. Chip
   -------------------------------------------------------------------------- */
.chip {
	display: inline-flex; align-items: center; align-self: flex-start;
	height: 34px; padding: 0 14px;
	background: var(--mint-hell); color: var(--dunkelgruen);
	font-weight: 600; font-size: 13px; letter-spacing: .4px;
}
@media (max-width: 640px) { .chip { height: 32px; font-size: 12px; } }

/* --------------------------------------------------------------------------
   7. Karten und Panels
   -------------------------------------------------------------------------- */
.karte {
	background: var(--weiss);
	padding: 36px 32px;
	display: flex; flex-direction: column; gap: 14px;
}
/* Karten- und Paneltexte stehen im Entwurf eine Stufe kleiner als der
   Fliesstext: 16px/1.6 statt 17px/1.65. */
.karte > p, .panel-dunkel p:not(.klein) { font-size: 16px; line-height: 1.6; }

.karte--mint  { background: var(--mint-hell); }
.karte--creme { background: var(--creme); }
.karte--schlank { padding: 22px 28px; }
/* Blocksatz in den Karten. Lange Schlusswoerter tragen im HTML ein &shy;, sonst reissen sie davor grosse Luecken. */
.karte__blocktext {
	align-self: stretch;
	text-align: justify;
	hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 14 6 6; -webkit-hyphenate-limit-before: 6; -webkit-hyphenate-limit-after: 6; -webkit-hyphenate-limit-lines: 1;
}
@media (max-width: 640px) { .karte { padding: 28px 24px; } }

.panel-dunkel {
	background: var(--dunkelgruen); color: var(--auf-dunkel);
	padding: 48px 44px;
	display: flex; flex-direction: column; gap: 20px;
}
@media (max-width: 640px) { .panel-dunkel { padding: 32px 24px; } }

/* Icon-Kachel */
.icon-kachel {
	display: flex; align-items: center; justify-content: center;
	width: 72px; height: 72px; flex: none;
	background: var(--mint-hell);
}
.flaeche--gruen .icon-kachel { background: var(--creme); }

/* Runder Icon-Ring auf dunklem Panel */
.icon-ring {
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; flex: none;
	border: 1.5px solid var(--gruen); border-radius: 999px;
}

/* --------------------------------------------------------------------------
   8. Listen mit Häkchen bzw. Punkt (keine Bullet-Zeichen)
   -------------------------------------------------------------------------- */
.haken-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.haken-liste li { display: flex; align-items: flex-start; gap: 12px; }
.haken-liste svg { flex: none; margin-top: 3px; }

.punkt-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.punkt-liste li { display: flex; align-items: flex-start; gap: 12px; }
.punkt-liste li::before {
	content: ''; flex: none;
	width: 8px; height: 8px; margin-top: 10px;
	background: var(--gruen); border-radius: 999px;
}

/* --------------------------------------------------------------------------
   9. Bilder
   -------------------------------------------------------------------------- */
.bild { width: 100%; object-fit: cover; border-radius: 0; }
.bild--hoch   { height: 600px; }
.bild--gross  { height: 520px; }
.bild--mittel { height: 420px; }
.bild--band   { height: 280px; }
.bild--flach  { height: 360px; }

@media (max-width: 1024px) {
	.bild--hoch, .bild--gross { height: 440px; }
	.bild--mittel { height: 360px; }
}
@media (max-width: 640px) {
	.bild--hoch, .bild--gross { height: 380px; }
	.bild--mittel { height: 320px; }
	.bild--band, .bild--flach { height: 220px; }
	/* Bild ganz zeigen statt in feste Hoehe zu beschneiden */
	.bild--ganz-mobil { height: auto; }
}

/* --------------------------------------------------------------------------
   10. Formulare
   Im Design sind das Attrappen (Divs). Hier echte Felder: beschriftet,
   tastaturbedienbar, mit Browser-Validierung.
   -------------------------------------------------------------------------- */
.formularkarte {
	background: var(--weiss);
	padding: 48px 52px;
	display: flex; flex-direction: column; gap: 18px;
}
@media (max-width: 640px) { .formularkarte { padding: 28px 20px; gap: 24px; } }

.feld { display: flex; flex-direction: column; gap: 8px; }
/* Ohne eigene Zeilenhoehe erbt die Beschriftung 1.65 und wird 21 px hoch –
   das schob jede Formularzeile 5 px nach unten. */
.feld__label { font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--dunkelgruen); }

.feld input, .feld select, .feld textarea {
	width: 100%;
	height: 54px;
	padding: 0 18px;
	font-family: inherit;
	font-size: 15px;
	color: var(--dunkelgruen);
	background: var(--creme);
	border: 1px solid transparent;
	border-radius: 0;
}
.feld textarea { height: 150px; padding: 16px 18px; resize: vertical; line-height: 1.6; }

/* Der Entwurf zeichnet einen schlanken Chevron statt des Browser-Pfeils.
   Als Hintergrundbild, damit kein zusaetzliches Element noetig ist. */
.feld select {
	appearance: none; -webkit-appearance: none;
	padding-right: 46px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231F3D33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	background-size: 18px 18px;
}
.feld input::placeholder, .feld textarea::placeholder { color: #8A948F; }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--gruen); }
.feld input:user-invalid, .feld textarea:user-invalid { border-color: #B3261E; }

/* Vorbelegtes Feld kurz hervorheben, damit die Auswahl auffaellt */
/* background-color, nicht die Kurzform: sonst faellt der Chevron im
   Hintergrundbild weg. */
.feld--vorbelegt select { border-color: var(--gruen); background-color: var(--mint-hell); }
.feld--vorbelegt .feld__label::after {
	content: ' – aus deiner Auswahl übernommen';
	font-weight: 400; color: var(--gruen);
}

.feld-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

/* Feldgruppen (Reservierungsformular).
   Der Entwurf gliedert nur die mobile Fassung in „Deine Daten“, „Adresse“
   und „Termin und Nachricht“; auf Desktop steht dasselbe Formular flach und
   zweispaltig. Ein Markup fuer beides: die Gruppen loesen sich mit
   display: contents auf, ihre Titel verschwinden.

   Die beiden Entwuerfe ordnen die Felder unterschiedlich an. Das Markup
   folgt der mobilen Reihenfolge (Person – Adresse – Termin), damit die
   Gruppentitel zu den Feldern passen, die ihnen folgen. Auf Desktop stellt
   „order“ die Anordnung des Desktop-Entwurfs wieder her. */
.feldgruppe, .feldgruppe__zwei { display: contents; }
.feldgruppe__titel { display: none; }

.feld--o1 { order: 1; } .feld--o2 { order: 2; } .feld--o3 { order: 3; }
.feld--o4 { order: 4; } .feld--o5 { order: 5; } .feld--o6 { order: 6; }
.feld--o7 { order: 7; } .feld--o8 { order: 8; } .feld--o9 { order: 9; }
.feld--breit { grid-column: 1 / -1; }

@media (max-width: 640px) {
	/* Mobil traegt die Gruppe die Gliederung, nicht mehr das Raster. */
	.feld-paar { display: flex; flex-direction: column; gap: 0; }
	.feldgruppe { display: flex; flex-direction: column; gap: 14px; }
	.feldgruppe + .feldgruppe {
		margin-top: 20px; padding-top: 20px; border-top: 1px solid #ECE7DE;
	}
	.feldgruppe__titel {
		display: block;
		font-size: 13px; font-weight: 700; letter-spacing: 1.2px;
		text-transform: uppercase; color: var(--gruen);
	}
	/* Vor-/Nachname und PLZ/Stadt bleiben auch auf 390 px nebeneinander. */
	.feldgruppe__zwei {
		display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
	}
	.feld--o1, .feld--o2, .feld--o3, .feld--o4, .feld--o5,
	.feld--o6, .feld--o7, .feld--o8, .feld--o9 { order: 0; }

	.feld input, .feld select, .feld textarea { height: 52px; padding: 0 16px; }
	.feld select { padding-right: 42px; background-position: right 16px center; }
	.feld textarea { height: 120px; padding: 14px 16px; }
}

/* Blocksatz mit Silbentrennung – so setzt der Entwurf die Fliesstexte auf
   der Reservierungsseite. Die Grenzwerte verhindern Trennungen an zu kurzen
   Wortstuecken. */
/* Blocksatz mit Silbentrennung setzen die Entwuerfe auf lange Fliesstext-
   spalten – nicht auf Kartentexte, Kurzabsaetze oder Kleingedrucktes.
   Deshalb als Klasse und gezielt gesetzt, nicht pauschal ueber alle <p>. */
/* Fliesstextspalten: Desktop 17px/1.75, mobil 16px/1.65. Die Werte standen
   vorher inline und liessen sich deshalb mobil nicht ueberschreiben. */
.blocksatz { line-height: 1.75; }
.blocksatz--gross { font-size: 18px; }
@media (max-width: 640px) {
	.blocksatz, .blocksatz p, .blocksatz--gross { font-size: 16px; line-height: 1.65; }
}

/* Coach-Texte: urspruenglich nur mobil im Blocksatz, auf Wunsch (2026-09-16)
   auf allen Breiten - der Klassenname ist geblieben. */
.blocksatz--mobil {
	text-align: justify;
	hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 14 6 6; -webkit-hyphenate-limit-before: 6; -webkit-hyphenate-limit-after: 6; -webkit-hyphenate-limit-lines: 1;
}

.blocksatz, .blocksatz p {
	text-align: justify;
	hyphens: auto; -webkit-hyphens: auto;
	hyphenate-limit-chars: 14 6 6; -webkit-hyphenate-limit-before: 6; -webkit-hyphenate-limit-after: 6; -webkit-hyphenate-limit-lines: 1;
}

/* Kleingedrucktes steht im Entwurf durchgehend auf 13px/1.55. Ohne eigene
   Angabe zog .klein hier 15px und die Zustimmung wurde 46px hoeher als
   gezeichnet. */
.zustimmung { display: flex; align-items: flex-start; gap: 14px; padding-top: 6px; }
.zustimmung .klein { font-size: 13px; line-height: 1.55; }
.zustimmung input[type="checkbox"] {
	flex: none; width: 20px; height: 20px; margin: 1px 0 0;
	accent-color: var(--gruen);
}

/* Hinweis unter dem Absenden-Knopf, solange kein Versand angeschlossen ist */
.formular-hinweis {
	padding: 14px 16px;
	background: var(--mint-hell);
	color: var(--dunkelgruen);
	font-size: 14px;
	line-height: 1.5;
}

/* Honigtopf: für Menschen unsichtbar, Bots füllen ihn aus.
   Nicht display:none – manche Bots erkennen das. */
.honigtopf {
	position: absolute; left: -9999px;
	width: 1px; height: 1px; overflow: hidden;
}

/* Kontaktblock: dunkles Panel links, Formularkarte rechts. Unter 1024px
   untereinander, sonst wird die Formularspalte unbenutzbar schmal. */
.kontaktraster { display: grid; grid-template-columns: 460px minmax(0, 1fr); }
@media (max-width: 1024px) { .kontaktraster { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   11. Terminliste
   -------------------------------------------------------------------------- */
.termin {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 132px 140px 260px;
	align-items: center;
	gap: 32px;
	padding: 24px 32px;
	background: var(--weiss);
	font-variant-numeric: tabular-nums;
}
.termin__zeitraum { font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--dunkelgruen); }
.termin__tage { font-size: 15px; line-height: 1.4; color: var(--nebentext); }
.termin__proPerson { font-size: 13px; color: var(--nebentext); }
@media (max-width: 1200px) {
	.termin { grid-template-columns: minmax(0, 1fr) auto; row-gap: 16px; }
}
.termin__datum { font-family: var(--schrift-titel); font-weight: 800; font-size: 18px; color: var(--dunkelgruen); }
/* Der Preis steht im Entwurf kraeftig: Montserrat 800, 22px, dunkelgruen –
   nicht als Nebentext. */
.termin__preis {
	font-family: var(--schrift-titel); font-weight: 800;
	font-size: 22px; line-height: 1.2; color: var(--dunkelgruen);
}

/* Statuspille am Termin. Der Entwurf zeichnet sie rechteckig (kein Radius),
   34px hoch und in gedaempften Farben – nicht als Knopf. Ein Hover-Zustand
   gehoert nicht dazu: die Pille ist eine Anzeige, nichts zum Klicken. */
.pille {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 132px; height: 34px; padding: 0 14px;
	font-size: 13px; font-weight: 700;
	border-radius: 0;
	white-space: nowrap;
}
.pille--frei      { background: #D1DDD0; color: #1F3D33; }
.pille--wenige    { background: #F0D9AE; color: #5A3E0C; }
.pille--voll      { background: #E6E0D5; color: #465650; }
/* Laeuft gerade: gefuelltes Gruen. Deutlich kraeftiger als die uebrigen
   Pillen - das ist der einzige Zustand, der sich taeglich aendert, und er
   soll beim Ueberfliegen sofort auffallen. */
.pille--laufend   { background: var(--gruen); color: var(--weiss); }
.pille--alt       { background: transparent; color: var(--nebentext); border: 1px solid rgba(31,61,51,.25); }

/* Abgelaufener Termin: bleibt lesbar, tritt aber zurueck. Nicht ausblenden -
   sonst bricht die Liste mitten im laufenden Monat ab und man fragt sich,
   ob etwas fehlt. */
.termin:has(.pille--alt) { opacity: .55; }
.termin:has(.pille--alt) .knopf { pointer-events: none; opacity: .6; }
/* Laufender Kurs: nicht ausgegraut - er ist ja aktuell. Nur der Knopf ist
   tot, buchen laesst er sich nicht mehr. */
.termin:has(.pille--laufend) .knopf { pointer-events: none; opacity: .6; }

/* Die Termine sind eigene Karten, keine durchgehende Flaeche – der Entwurf
   setzt sie mit Abstand untereinander. */
.monatsgruppe { display: flex; flex-direction: column; gap: 16px; }
/* display: flex schlaegt die eingebaute Regel fuer [hidden]. Ohne diese Zeile
   stehen alle Monate gleichzeitig auf der Seite, weil das Skript die Gruppen
   ueber das hidden-Attribut aus- und einblendet. */
.monatsgruppe[hidden] { display: none; }

@media (max-width: 640px) {
	/* Mobil ordnet der Entwurf um: Datum und Preis in einer Zeile, darunter
	   die Statuspille linksbuendig, darunter der Knopf ueber die volle
	   Breite. Deshalb zwei Spalten statt einer. */
	.monatsgruppe { gap: 14px; }
	.termin {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
		gap: 16px; padding: 24px;
	}
	/* Zeitraum ueber die ganze Zeile (lange Zeitraeume wie „28. September –
	   02. Oktober" brechen sonst um), darunter Status links und Preis rechts
	   auf einer Hoehe, zuletzt der Knopf. */
	.termin { align-items: center; gap: 14px 12px; padding: 20px; }
	.termin__wann { grid-column: 1 / -1; grid-row: 1; }
	.termin .pille  { grid-column: 1; grid-row: 2; justify-self: start; width: auto; }
	.termin__geld {
		grid-column: 2; grid-row: 2;
		display: flex; align-items: baseline; gap: 6px; text-align: right;
	}
	.termin__preis { font-size: 19px; }
	.termin .knopf  { grid-column: 1 / -1; grid-row: 3; width: 100%; margin-top: 4px; }
	.termin__zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
}

/* --------------------------------------------------------------------------
   12. Akkordeon – echtes <details>, funktioniert auch ohne JavaScript
   -------------------------------------------------------------------------- */
/* Der Entwurf setzt jeden Abschnitt als eigene weisse Karte mit Abstand –
   nicht als Liste mit Trennlinien. Der Pfeil sitzt in einem gruenen Quadrat. */
.akkordeon { display: flex; flex-direction: column; gap: 14px; }
.akkordeon details { background: var(--weiss); }

.akkordeon summary {
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	padding: 22px 32px;
	font-family: var(--schrift-titel); font-weight: 800; font-size: 22px; line-height: 1.25;
	color: var(--dunkelgruen);
	cursor: pointer;
	list-style: none;
}
.akkordeon summary::-webkit-details-marker { display: none; }

/* Der Pfeil ist im Entwurf ein 40x40-Quadrat in Gruen. Als ::after gebaut,
   damit das Markup ein schlichtes <summary> bleibt. */
.akkordeon summary::after {
	content: ''; flex: none;
	width: 40px; height: 40px;
	background: var(--gruen);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23F3EEE6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center;
	transition: transform .2s ease;
}
.akkordeon details[open] summary::after { transform: rotate(180deg); }
.akkordeon details[open] summary { padding-bottom: 6px; }
.akkordeon__inhalt { padding: 0 32px 32px; }
/* Blocksatz in allen Abschnitten; Silbentrennung verhindert grosse Luecken */
.akkordeon__inhalt p, .akkordeon__inhalt li {
	text-align: justify; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 14 6 6; -webkit-hyphenate-limit-before: 6; -webkit-hyphenate-limit-after: 6; -webkit-hyphenate-limit-lines: 1;
}

/* Leistungszeile mit gruenem Haken davor. Als Hintergrundbild am Absatz,
   damit kein zusaetzliches Element ins Markup muss und der Text sauber
   unter dem Haken einrueckt. */
.hakenzeile {
	padding-left: 32px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2369A88D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 0 top 3px;
}

/* „Nicht inkludiert" steht im Entwurf in einem abgesetzten Kasten. */
/* Als Fliesstext mit Symbol davor, nicht als Flex-Zeile: sonst werden
   „Nicht inkludiert:" und der Text zu zwei Spalten und brechen auf dem
   Handy getrennt um. */
.hinweiszeile {
	position: relative;
	padding: 14px 18px 14px 48px;
	background: var(--creme);
	border-left: 3px solid #E8A33D;
	line-height: 1.6;
}
.akkordeon__inhalt .hinweiszeile { text-align: left; hyphens: manual; }
.hinweiszeile::before {
	content: ''; position: absolute; left: 16px; top: 16px;
	width: 20px; height: 20px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23E8A33D' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5'/%3E%3Cpath d='M12 16.5v.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center;
}

@media (max-width: 640px) {
	.akkordeon summary { padding: 20px; font-size: 18px; gap: 14px; }
	.akkordeon summary::after { width: 34px; height: 34px; }
	.akkordeon__inhalt { padding: 0 20px 24px; }
}

/* --------------------------------------------------------------------------
   13. Galerie mit Overlay
   -------------------------------------------------------------------------- */
.galerie { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) { .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .galerie { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

.kachel {
	display: block; position: relative; overflow: hidden;
	background: var(--mint-hell); border: 0; padding: 0; cursor: pointer;
	text-align: left; width: 100%;
}
.kachel img { width: 100%; height: 260px; object-fit: cover; transition: transform .25s ease; }
.kachel:hover img { transform: scale(1.03); }
.kachel:hover { box-shadow: 0 8px 24px rgba(31,61,51,.12); }
.kachel__titel {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 16px 18px;
	background: linear-gradient(to top, rgba(31,61,51,.85), rgba(31,61,51,0));
	color: var(--creme);
	font-family: var(--schrift-titel); font-weight: 800; font-size: 18px;
}

dialog.overlay {
	width: min(920px, 92vw);
	padding: 0;
	border: 0;
	background: var(--creme);
	color: var(--text);
}
dialog.overlay::backdrop { background: rgba(31,61,51,.72); }
.overlay__bild { width: 100%; height: min(60vh, 520px); object-fit: cover; }
.overlay__text { padding: 28px 32px 32px; display: flex; flex-direction: column; gap: 14px; }
.overlay__zu {
	position: absolute; top: 12px; right: 12px; z-index: 2;
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	background: var(--creme); color: var(--dunkelgruen);
	border: 0; cursor: pointer; font-size: 22px; line-height: 1;
}
@media (max-width: 640px) { .overlay__text { padding: 20px; } }

/* Highlight-Fenster: feste Groesse, damit beim Blaettern nichts springt.
   Computer: Bild links, Text rechts. Handy: Bild oben, Text darunter.
   Laengerer Text scrollt innerhalb seines Bereichs, die Pfeile bleiben stehen. */
dialog.overlay--hl {
	width: min(1040px, 92vw); height: min(600px, 88vh);
	max-width: none; max-height: none; overflow: hidden;
}
dialog.overlay--hl[open] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.overlay--hl .overlay__bild { width: 100%; height: 100%; min-height: 0; object-fit: cover; background: var(--mint-hell); }
.overlay__spalte { display: flex; flex-direction: column; min-height: 0; }
.overlay--hl .overlay__text { flex: 1; min-height: 0; overflow-y: auto; padding: 72px 40px 24px; gap: 16px; }
.overlay--hl .overlay__titel { font-size: 26px; line-height: 1.25; }
/* Blocksatz mit Silbentrennung (lang="de" am <html>), sonst reissen
   im schmalen Handy-Fenster grosse Luecken zwischen den Woertern auf. */
.overlay__beschreibung { line-height: 1.75; text-align: justify; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 14 6 6; -webkit-hyphenate-limit-before: 6; -webkit-hyphenate-limit-after: 6; -webkit-hyphenate-limit-lines: 1; }
.overlay__beschreibung p { margin: 0; }
.overlay__beschreibung p + p { margin-top: 12px; }
.overlay__nav {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 20px 40px 32px; border-top: 1px solid #E6E1D8;
}
.overlay__blaettern {
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; padding: 0;
	background: var(--dunkelgruen); color: var(--creme);
	border: 0; cursor: pointer;
}
.overlay__blaettern:disabled { opacity: .3; cursor: default; }
.overlay__zaehler { font-size: 14px; font-weight: 700; letter-spacing: 1px; color: var(--nebentext); }
@media (max-width: 800px) {
	/* Hoehe richtet sich nach dem laengsten Highlight-Text (seite.js misst
	   ihn und setzt --hl-text), nicht nach dem Bildschirm. So bleibt das
	   Fenster beim Blaettern gleich gross, ohne leere Flaeche unten. */
	dialog.overlay--hl { width: 94vw; height: var(--hl-hoehe, 88dvh); max-height: 92vh; max-height: 92dvh; }
	dialog.overlay--hl[open] { display: flex; flex-direction: column; }
	.overlay--hl .overlay__bild { flex: 0 0 auto; height: 30vh; height: 30dvh; }
	.overlay--hl .overlay__spalte { flex: 0 1 auto; }
	.overlay--hl .overlay__text { flex: 0 1 var(--hl-text, auto); padding: 20px 20px 12px; gap: 10px; }
	/* waechst mit der Breite, damit feste Umbrueche auch auf 360-px-Handys halten */
	.overlay--hl .overlay__titel { font-size: min(21px, 5.4vw); }
	.overlay--hl .overlay__beschreibung { font-size: 16px; }
	.overlay__nav { padding: 14px 20px 18px; }
}

/* --------------------------------------------------------------------------
   14. Kopfzeile
   -------------------------------------------------------------------------- */
.kopfzeile {
	position: sticky; top: 0; z-index: 50;
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px;
	height: 88px;
	padding: 0 var(--seitenrand);
	background: var(--gruen);
}
.kopfzeile__logo img { width: 150px; height: auto; }

.kopfzeile__nav {
	display: flex; align-items: center; gap: 32px;
	font-weight: 600; font-size: 15px;
}
.kopfzeile__nav a { color: var(--creme); }
.kopfzeile__nav a:hover { color: var(--dunkelgruen); }
.kopfzeile__nav a[aria-current="page"] {
	border-bottom: 2px solid var(--creme);
	padding-bottom: 3px;
}

/* Untermenü „Seminare". Oeffnet bei Hover UND bei Tastaturfokus - nur
   Hover waere per Tastatur nicht erreichbar. */
.kopfzeile__punkt { position: relative; display: flex; align-items: center; }
.kopfzeile__punkt > a { display: inline-flex; align-items: center; gap: 4px; }

.kopfzeile__unter {
	position: absolute; top: 100%; left: -16px;
	display: flex; flex-direction: column;
	min-width: 240px; padding: 8px 0;
	background: var(--gruen);
	box-shadow: 0 8px 24px rgba(31,61,51,.22);
	opacity: 0; visibility: hidden;
	transition: opacity .15s ease;
	z-index: 60;
}
.kopfzeile__punkt:hover .kopfzeile__unter,
.kopfzeile__punkt:focus-within .kopfzeile__unter { opacity: 1; visibility: visible; }

.kopfzeile__unter a {
	padding: 10px 20px;
	color: var(--creme); font-weight: 600; font-size: 15px;
	white-space: nowrap;
}
.kopfzeile__unter a:hover { background: var(--dunkelgruen); color: var(--creme); }

/* Mobil: Unterpunkte eingerückt darunter, immer sichtbar (kein zweiter Klick) */
.mobilmenue__unter { list-style: none; margin: 0; padding: 0 0 8px 16px; }
.mobilmenue__unter a { font-size: 15px; font-weight: 500; padding: 10px 0; opacity: .9; }

.kopfzeile__cta {
	display: inline-flex; align-items: center; justify-content: center;
	height: 48px; padding: 0 24px;
	background: var(--creme); color: var(--dunkelgruen);
	font-weight: 700; font-size: 15px;
}
.kopfzeile__cta:hover { background: var(--mint-hell); color: var(--dunkelgruen); }

/* Menüknopf nur auf Mobil */
.kopfzeile__menueknopf {
	display: none;
	align-items: center; justify-content: center;
	width: 44px; height: 44px; flex: none;
	background: var(--creme); border: 0; border-radius: 999px; cursor: pointer;
}

@media (max-width: 1024px) {
	.kopfzeile { height: 72px; }
	.kopfzeile__logo img { width: 118px; }
	.kopfzeile__nav, .kopfzeile__cta { display: none; }
	.kopfzeile__menueknopf { display: flex; }
}

/* Aufgeklapptes Mobilmenü */
.mobilmenue {
	display: none;
	padding: 8px var(--seitenrand) 24px;
	background: var(--gruen);
	position: sticky; top: 72px; z-index: 49;
}
.mobilmenue[data-offen="ja"] { display: block; }
.mobilmenue ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mobilmenue a {
	display: block; padding: 14px 0;
	color: var(--creme); font-weight: 600; font-size: 17px;
	border-bottom: 1px solid rgba(243,238,230,.2);
}
.mobilmenue .knopf { margin-top: 20px; }
@media (min-width: 1025px) { .mobilmenue { display: none !important; } }

/* --------------------------------------------------------------------------
   15. Fußzeile
   -------------------------------------------------------------------------- */
.fusszeile {
	/* Kein margin-top: der letzte Abschnitt bringt mit .sektion--abschluss
	   bereits var(--xl) Innenabstand mit. Beides zusammen ergab 192px statt
	   der 96px, die die Entwuerfe zeigen – auf jeder Seite. */
	padding: 64px var(--seitenrand) 32px;
	background: var(--dunkelgruen);
	color: var(--creme);
}
.fusszeile__raster {
	display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px;
	max-width: var(--inhaltsmax); margin: 0 auto;
}
.fusszeile__spalte {
	display: flex; flex-direction: column; gap: 12px; font-size: 15px;
	/* E-Mail-Adressen und lange Wörter haben keine Umbruchstelle. Ohne das
	   schiebt info@oceanfusedtraining.com auf schmalen Schirmen das ganze
	   Dokument breiter als den Viewport - die Seite laesst sich dann seitlich
	   wegschieben. */
	min-width: 0;
	overflow-wrap: anywhere;
}
.fusszeile__titel {
	font-weight: 700; color: var(--gruen-mittel);
	text-transform: uppercase; letter-spacing: 1px; font-size: 12px;
}
.fusszeile a { color: var(--creme); }
.fusszeile a:hover { color: var(--mint); }
.fusszeile__spalte > img { width: 220px; height: auto; }   /* nur das Logo, nicht die Icons */
/* Der Untertitel unter dem Logo steht im Entwurf gedaempft, nicht in Creme. */
.fusszeile__spalte > p { color: #C9D9CF; }
@media (max-width: 640px) {
	.fusszeile__spalte > p { font-size: 14px; line-height: 1.5; }
}

.fusszeile__unten {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: 12px;
	max-width: var(--inhaltsmax); margin: 48px auto 0;
	padding-top: 24px;
	border-top: 1px solid rgba(243,238,230,.15);
	font-size: 13px; color: var(--gruen-mittel);
}
.fusszeile__unten a { color: var(--auf-dunkel); }

@media (max-width: 1024px) {
	.fusszeile__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
	/* Der Entwurf stellt mobil Logo ueber volle Breite und darunter
	   Seminare | Informationen. Das geht nur auf, weil er die Spalte Kontakt
	   mobil weglaesst. Telefon und E-Mail sind auf dem Handy aber das
	   Nuetzlichste in der Fusszeile, also bleibt es beim 2x2-Raster:
	   Logo | Seminare / Informationen | Kontakt. Das ist 102px kompakter. */
}
/* Instagram und WhatsApp: zwei gleich grosse Flaechen im selben Linienstil */
.fusszeile__sozial { display: flex; align-items: center; gap: 12px; padding-top: 8px; }
.fusszeile__sozial a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	border: 1px solid rgba(243,238,230,.25);
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.fusszeile__sozial a:hover { background: var(--creme); border-color: var(--creme); color: var(--dunkelgruen); }
.fusszeile__sozial svg { display: block; }

@media (max-width: 640px) {
	.fusszeile { padding: 44px var(--seitenrand) 24px; }
	.fusszeile__spalte > img { width: 190px; }
	/* Logo oben ueber die volle Breite, darunter Seminare | Informationen,
	   Kontakt wieder ueber die volle Breite - dort hat die E-Mail-Adresse
	   Platz fuer eine Zeile. */
	.fusszeile__raster { gap: 32px 24px; font-size: 15px; }
	.fusszeile__spalte--marke,
	.fusszeile__spalte--kontakt { grid-column: 1 / -1; }
	.fusszeile__spalte--kontakt {
		padding-top: 28px;
		border-top: 1px solid rgba(243,238,230,.15);
	}
	.fusszeile__epost { overflow-wrap: normal; white-space: nowrap; }
	.fusszeile__unten { flex-direction: column; align-items: flex-start; font-size: 12px; margin-top: 32px; }
}

/* --------------------------------------------------------------------------
   16. Google-Bewertungsplakette
   Im Artboard absolut positioniert, auf der echten Seite laut Kommentar
   „position: fixed" gedacht. Auf Mobil ausgeblendet – dort verdeckt sie
   sonst den Inhalt.
   -------------------------------------------------------------------------- */
.bewertung {
	position: fixed; left: 24px; bottom: 24px; z-index: 40;
	display: flex; flex-direction: column; gap: 3px;
	padding: 10px 14px;
	background: var(--weiss); color: var(--dunkelgruen);
	box-shadow: 0 8px 24px rgba(31,61,51,.18);
}
.bewertung__zeile { display: flex; align-items: center; gap: 8px; }
.bewertung__note { font-weight: 800; font-size: 15px; }
.bewertung__sterne { display: flex; gap: 1px; }
.bewertung__anzahl { font-size: 12px; color: var(--nebentext); }
@media (max-width: 1024px) { .bewertung { display: none; } }

/* --- Aufklappbare Bewertungen ------------------------------------------
   Gebaut als <details>/<summary>: klappt ohne JavaScript auf, ist von Haus
   aus tastaturbedienbar und braucht keinen eigenen Zustand. Die Liste
   scrollt, das Feld waechst also nicht ueber den Bildschirm hinaus. */
.bewertung--klappe { padding: 0; width: 340px; max-width: calc(100vw - 48px); }
.bewertung__knopf {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "zeile pfeil" "anzahl pfeil";
	align-items: center; gap: 2px 10px;
	padding: 10px 14px; cursor: pointer; list-style: none;
}
.bewertung__knopf::-webkit-details-marker { display: none; }
.bewertung__knopf:hover { background: #FAFBFA; }
.bewertung__knopf .bewertung__zeile  { grid-area: zeile; }
.bewertung__knopf .bewertung__anzahl { grid-area: anzahl; }
.bewertung__pfeil {
	grid-area: pfeil; display: flex; color: var(--nebentext);
	transition: transform 180ms ease;
}
.bewertung--klappe[open] .bewertung__pfeil { transform: rotate(180deg); }
.bewertung--klappe[open] .bewertung__knopf { border-bottom: 1px solid #EEF2F0; }

.bewertung__liste {
	margin: 0; padding: 0; list-style: none;
	/* Scroller: fuenf Rezensionen passen sonst nicht auf kleine Schirme. */
	max-height: min(52vh, 420px); overflow-y: auto; overscroll-behavior: contain;
}
.rez {
	display: flex; gap: 12px; padding: 14px;
	border-bottom: 1px solid #F2F5F3; text-align: left;
}
.rez:last-child { border-bottom: 0; }
.rez__kuerzel {
	flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--mint); color: var(--dunkelgruen);
	font-size: 12px; font-weight: 800; letter-spacing: .5px;
}
.rez__inhalt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rez__wer { margin: 0; font-size: 13px; font-weight: 700; color: var(--dunkelgruen); }
.rez__kopf { margin: 0; display: flex; align-items: center; gap: 8px; }
.rez__sterne { display: flex; gap: 1px; }
.rez__wann { font-size: 11px; color: var(--nebentext); }
.rez__text, .rez__voll {
	margin: 2px 0 0; font-size: 13px; line-height: 1.55; color: var(--text);
	overflow-wrap: anywhere;
}
/* Gekuerzter Text mit „Mehr anzeigen" – wieder <details>, damit es ohne
   JavaScript vollstaendig lesbar bleibt. */
.rez__mehr > summary {
	font-size: 13px; line-height: 1.55; color: var(--text);
	cursor: pointer; list-style: none;
}
.rez__mehr > summary::-webkit-details-marker { display: none; }
.rez__mehrwort { display: block; margin-top: 2px; font-weight: 700; color: var(--gruen); }
.rez__mehr[open] > summary { display: none; }
.bewertung__fuss {
	margin: 0; padding: 11px 14px; border-top: 1px solid #EEF2F0;
	font-size: 12px; color: var(--nebentext); text-align: left;
}
.bewertung__fuss a { color: var(--dunkelgruen); font-weight: 700; }

/* --------------------------------------------------------------------------
   17. Hero
   -------------------------------------------------------------------------- */
.hero {
	position: relative;
	/* Einheitliche Bannerhoehe auf allen Seiten (2026-09-16): Startseite
	   minus 10 % - 680/520/440 wurden zu 612/468/396. */
	min-height: 612px;
	display: flex; align-items: center;
	padding: 64px var(--seitenrand);
	/* Grundfarbe, solange das Hero-Bild noch nicht da ist. #666 statt #000
	   auf Wunsch (2026-09-16): kein harter schwarzer Block beim Laden. */
	background: #666;
	overflow: hidden;
}
.hero__bilder { position: absolute; inset: 0; }
.hero__bild {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
	opacity: 0; transition: opacity 900ms ease;
}
.hero__bild[data-aktiv="ja"] { opacity: 1; }
/* Ohne JavaScript bliebe sonst alles unsichtbar */
.hero__bilder > .hero__bild:first-child,
.hero__bilder > picture:first-child > .hero__bild { opacity: 1; }

.hero__inhalt {
	position: relative; z-index: 2;
	display: flex; flex-direction: column; align-items: center;
	gap: 22px; text-align: center;
	width: 100%; max-width: 900px; margin: 0 auto;
}
.hero__inhalt .titel-1 { color: var(--creme); }
.hero__lead { max-width: 640px; font-size: 22px; line-height: 1.5; color: #E6F0EA; }

/* Frueher lag hier ein Scrim: ein schwarzer Verlauf ueber dem ganzen Bild,
   damit heller Text auf hellen Bildstellen lesbar bleibt.
   Auf Wunsch entfernt (2026-09-16): die Helligkeit wird jetzt pro Bild im
   Admin eingestellt (Reiter „Bilder"), statt jedes Foto pauschal
   abzudunkeln. Dort laesst sich jede Aenderung einzeln zuruecknehmen.
   ACHTUNG beim Austauschen eines Hero-Bildes: ohne Scrim traegt nur noch
   das Foto selbst die Lesbarkeit. Geprueft wird das mit
   pruef/herokontrast.mjs - noetig sind 3:1 (grosser Text). */

.hero__punkte {
	position: absolute; left: 0; right: 0; bottom: 24px; z-index: 3;
	display: flex; justify-content: center; gap: 6px;
}
.hero__punkt {
	width: 10px; height: 8px; padding: 0;
	background: rgba(243,238,230,.55);
	border: 0; cursor: pointer;
	transition: width .3s ease, background .3s ease;
}
.hero__punkt[aria-current="true"] { width: 28px; background: var(--creme); }

@media (max-width: 1024px) { .hero { min-height: 468px; } }
@media (max-width: 640px) {
	.hero { min-height: 396px; padding: 48px var(--seitenrand); }
	.hero__lead { font-size: 17px; }
}

/* Kompakter Seitenkopf: Chip + H1 + Lead, darunter Bannerbild */
.seitenkopf { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }

/* Banner mit Bild auf dunklem Grund (Muster „Bildungsurlaub", 14.9.) */
.banner { position: relative; background: #000; overflow: hidden; }
.banner img { width: 100%; height: 420px; object-fit: cover; opacity: .7; }
.banner__verlauf {
	position: absolute; inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.75));
}
.banner__inhalt {
	position: absolute; inset: 0; z-index: 2;
	display: flex; flex-direction: column; justify-content: flex-end;
	gap: 14px;
	padding: 48px var(--seitenrand);
}
.banner__inhalt .titel-1 { color: var(--creme); }
@media (max-width: 640px) { .banner img { height: 300px; } }

/* Stärkerer Verlauf für Fotos, die selbst hell sind (Innenaufnahmen).
   Bei den dunklen Ozeanbildern genügt der Standard-Scrim. */
/* Ohne Scrim hat der staerkere Verlauf nichts mehr zu ueberschreiben. Die
   verringerte Deckkraft des Bildes bleibt - sie gehoert zum Entwurf. */
.hero--stark .hero__bild { opacity: .7; }

/* Coach-Foto: fester Rahmen 528:334. Der Ausschnitt steckt seit dem
   Bildumbau (2026-09-17) in der Datei selbst, nicht mehr im Seitencode. */
.coachbild {
	position: relative; width: 100%; aspect-ratio: 528 / 334;
	overflow: hidden; background: var(--mint-hell);
}
.coachbild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Abschlussblock: Linie, Text links, Knopf rechts. Kommt auf Über uns,
   Bildungsurlaub, Für Arbeitgeber, Flow-Erleben und Location vor. */
.abschluss {
	display: grid; grid-template-columns: minmax(0, 1fr) auto;
	align-items: end; gap: 64px;
	padding-top: 32px; border-top: 2px solid var(--dunkelgruen);
}
.abschluss__text { display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
.abschluss .titel-2 { font-size: 36px; line-height: 1.15; letter-spacing: -.7px; }
@media (max-width: 1024px) {
	.abschluss { grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
}
@media (max-width: 640px) { .abschluss .titel-2 { font-size: 28px; } }

/* Flache Variante des Abschlussblocks: alles untereinander unter der Linie.
   Auf Bildungsurlaub, Flow-Erleben und Location so vorgesehen. */
.abschluss--flach { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.abschluss--flach .titel-2 { font-size: 44px; line-height: 1.12; letter-spacing: -1px; max-width: 900px; }
@media (max-width: 1024px) { .abschluss--flach .titel-2 { font-size: 38px; } }
@media (max-width: 640px)  { .abschluss--flach .titel-2 { font-size: 32px; } }

/* Hinweisband: vollbreite Grünfläche mit Kicker/Kernaussage links und
   Erläuterung rechts. */
.hinweisband {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: 48px;
	padding: 36px var(--seitenrand);
	background: var(--gruen); color: var(--dunkelgruen);
}
.hinweisband__kern {
	font-family: var(--schrift-titel); font-weight: 800;
	font-size: 26px; line-height: 1.25; letter-spacing: -.4px; color: var(--dunkelgruen);
}
.hinweisband .kicker { color: var(--dunkelgruen); }
@media (max-width: 640px) { .hinweisband { gap: 20px; padding: 28px var(--seitenrand); } .hinweisband__kern { font-size: 22px; } }

/* Aufzählung mit Doppelpunkt-Einleitung (Flow-Erleben, Für Arbeitgeber) */
.merkliste { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 16px; line-height: 1.7; }
.merkliste strong { font-weight: 700; color: var(--dunkelgruen); }

/* Namenskachel (Bundesländer auf der Bildungsurlaub-Seite) */
.landkachel {
	display: flex; align-items: center;
	min-height: 88px; padding: 20px 24px;
	background: var(--weiss); color: var(--dunkelgruen);
	font-family: var(--schrift-titel); font-weight: 800;
	font-size: 22px; line-height: 1.2; letter-spacing: -.3px;
}
.landkachel--antrag {
	flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px;
	background: transparent; border: 2px solid var(--dunkelgruen);
}
.landkachel--antrag span:last-child {
	font-family: var(--schrift-text); font-weight: 400; font-size: 13px; line-height: 1.3;
}

/* Die Bundeslaender bleiben mobil zweispaltig – so zeichnet es der Entwurf.
   Die allgemeine Regel (.raster--4 faellt auf eine Spalte) bleibt unberuehrt,
   weil sie fuer Karten mit Fliesstext richtig ist. */
.raster--laender { gap: 16px; }
@media (max-width: 640px) {
	.raster--laender { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	/* Schrift waechst mit der Breite: „Niedersachsen" passte auf 360-px-Handys
	   (Galaxy S21) mit 20px nicht mehr in die halbe Breite. */
	.landkachel { min-height: 92px; padding: 16px 12px; font-size: min(20px, 4.2vw); line-height: 1.25; overflow-wrap: normal; }
}
.landkachel--antrag:hover { background: var(--dunkelgruen); color: var(--creme); }

/* Die acht Laender fuehren zu den Informationsseiten der Laender (18.09.2026).
   Gleiche Kachel wie vorher, nur mit Pfeil und Hover - damit man sieht, dass
   es ein Link ist. */
.landkachel--link {
	justify-content: space-between; gap: 10px;
	text-decoration: none;
	transition: background .18s ease, color .18s ease;
}
.landkachel--link:hover, .landkachel--link:focus-visible {
	background: var(--dunkelgruen); color: var(--creme);
}
.landkachel__pfeil { flex-shrink: 0; opacity: .7; }
.landkachel--link:hover .landkachel__pfeil { opacity: 1; }
@media (max-width: 640px) {
	.landkachel--link { gap: 6px; }
	.landkachel__pfeil { width: 14px; height: 14px; }
}

/* Zitatblock mit grüner Randlinie (Gesetzestexte, Quellen) */
.zitat {
	display: flex; flex-direction: column; gap: 8px;
	max-width: 1000px; padding-left: 22px;
	border-left: 3px solid var(--gruen);
}

/* Benannter Link nach aussen, unterstrichen mit grüner Linie */
.externlink {
	display: inline-flex; align-self: flex-start; align-items: center; gap: 8px;
	color: var(--dunkelgruen); font-weight: 700; font-size: 16px;
	border-bottom: 2px solid var(--gruen); padding-bottom: 2px;
}
.externlink:hover { border-bottom-color: var(--dunkelgruen); }

/* Abgesetzter Hinweis unter einem Textblock */
.hinweisfeld {
	display: flex; flex-direction: column; gap: 10px;
	max-width: 1040px; padding-top: 20px; margin-top: 8px;
	border-top: 1px solid var(--mint-hell);
}

/* Hero-Video: liegt wie ein Hero-Bild, wird aber nur bei breitem Schirm
   und ohne Datensparmodus überhaupt geladen (siehe seite.js). */
.hero__video {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
	opacity: .7;
}

/* --------------------------------------------------------------------------
   Karte der Seminarorte (OpenStreetMap/Leaflet)

   Klasse heisst .landkarte, NICHT .karte: .karte sind die Inhaltskarten
   weiter oben. Beide hiessen gleich, und weil dieser Block spaeter steht,
   bekamen alle Inhaltskarten den Kartenhintergrund und min-height: 420px.
   -------------------------------------------------------------------------- */
/* isolation: hier steckt ein echter Fehler drin gewesen. Leaflet vergibt
   seinen Ebenen z-index 200 bis 1000 (Kacheln, Marker, Bedienknoepfe,
   Quellenangabe). position: relative allein macht noch keinen eigenen
   Stapelraum auf - dadurch traten diese Werte gegen die der ganzen Seite an
   und schlugen die klebende Kopfzeile (z-index: 50). Beim Scrollen lag die
   Karte dann ueber der Kopfzeile.
   isolation: isolate macht einen eigenen Stapelraum auf: Leaflets Werte
   gelten nur noch innerhalb der Karte, und die Karte selbst ordnet sich mit
   ihrem eigenen z-index in die Seite ein. */
.landkarte {
	position: relative; overflow: hidden; isolation: isolate; z-index: 0;
	background: var(--mint); min-height: 420px;
}
.landkarte__vorschau { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }

.landkarte__leinwand { width: 100%; height: 100%; min-height: 420px; }

/* Einwilligungsschranke ueber dem Standbild. Die Karte laedt erst auf Klick
   oder nach Zustimmung im Dialog - vorher geht keine IP an OpenStreetMap. */
.landkarte__schranke {
	position: absolute; inset: 0; z-index: 2;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 16px; padding: 24px;
	background: rgba(31, 61, 51, .72); text-align: center;
}
.landkarte__schranke-text {
	margin: 0; max-width: 34ch;
	color: var(--weiss); font-size: 15px; line-height: 1.55;
}

/* Marker ist das Foto des Ortes, mit kleiner Nummer in der Ecke */
.landkarte__pin { background: none; border: 0; }
.landkarte__pin img {
	width: 56px; height: 56px; object-fit: cover;
	border: 3px solid var(--creme);
	box-shadow: 0 3px 12px rgba(31,61,51,.4);
	transition: transform .15s ease;
}
.landkarte__pin:hover img, .landkarte__pin:focus img { transform: scale(1.08); }
.landkarte__pin__nr {
	position: absolute; left: -4px; bottom: -4px;
	display: flex; align-items: center; justify-content: center;
	min-width: 24px; height: 22px; padding: 0 5px;
	background: var(--gruen); color: var(--creme);
	border: 2px solid var(--creme);
	font-family: var(--schrift-titel); font-weight: 800; font-size: 11px;
	line-height: 1;
}

/* Popup: Bild oben, Text darunter, Maps-Link unten */
/* Leaflet setzt die Breite inline; nur die Innenabstaende zuruecksetzen,
   NICHT die Breite ueberschreiben - sonst faellt das Popup auf eine
   Wortbreite zusammen. */
.landkarte__popup-huelle .leaflet-popup-content { margin: 0; }
.landkarte__popup-huelle .leaflet-popup-content-wrapper { padding: 0; overflow: hidden; }
.landkarte__popup__bild { width: 100%; height: 150px; object-fit: cover; display: block; }
.landkarte__popup__text { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.landkarte__popup__nr {
	font-family: var(--schrift-titel); font-weight: 800;
	font-size: 12px; letter-spacing: 1.2px; color: var(--gruen);
}
.landkarte__popup__text strong {
	font-family: var(--schrift-titel); font-weight: 800;
	font-size: 19px; line-height: 1.2; color: var(--dunkelgruen);
}
.landkarte__popup__text p { font-size: 14px; line-height: 1.55; color: var(--text); margin: 0; }
.landkarte__popup__text a {
	align-self: flex-start; margin-top: 4px;
	color: var(--dunkelgruen); font-weight: 700; font-size: 14px;
	border-bottom: 2px solid var(--gruen); padding-bottom: 1px;
}
/* Leaflet bringt eigene Rundungen mit - das Design ist eckig */
.landkarte .leaflet-popup-content-wrapper, .landkarte .leaflet-popup-tip,
.landkarte .leaflet-control-zoom a, .landkarte .leaflet-bar { border-radius: 0; }
.landkarte .leaflet-popup-content { font-family: var(--schrift-text); font-size: 14px; line-height: 1.55; }
.landkarte .leaflet-popup-content strong { color: var(--dunkelgruen); }
.landkarte .leaflet-container { font-family: var(--schrift-text); }

@media (max-width: 640px) {
	.landkarte, .landkarte__vorschau, .landkarte__leinwand { min-height: 320px; }
}

/* Ortskarte: Bild oben, Text unten (Location) */
.ortkarte { display: flex; flex-direction: column; background: var(--weiss); }
.ortkarte img { width: 100%; height: 240px; object-fit: cover; }
.ortkarte__text { display: flex; flex-direction: column; gap: 12px; padding: 32px 30px 34px; }
.ortkarte__nr {
	font-family: var(--schrift-titel); font-weight: 800;
	font-size: 13px; letter-spacing: 1.2px; color: var(--gruen);
}
.ortkarte__kopf { display: flex; align-items: baseline; gap: 12px; }

/* Link mit grüner Unterstreichung (Maps-Links) */
.unterlink {
	align-self: flex-start; margin-top: 6px;
	color: var(--dunkelgruen); font-weight: 700; font-size: 16px; line-height: 1.5;
	text-decoration: underline; text-decoration-color: var(--gruen);
	text-decoration-thickness: 2px; text-underline-offset: 3px;
}

/* Zahlenpanel neben der Karte */
.zahlenpanel {
	display: flex; flex-direction: column; justify-content: center; gap: 22px;
	padding: 44px 40px; background: var(--gruen); color: var(--dunkelgruen);
}
.zahlenpanel__wert {
	font-family: var(--schrift-titel); font-weight: 800;
	font-size: 44px; line-height: 1; letter-spacing: -1.2px; color: var(--dunkelgruen);
}
.zahlenpanel__zeile { display: flex; flex-direction: column; gap: 2px; }
.zahlenpanel__zeile:not(:last-child) {
	padding-bottom: 18px; border-bottom: 1px solid rgba(31,61,51,.28);
}
/* Mobil stellt der Entwurf Zahl und Beschriftung nebeneinander – in der
   schmalen Desktop-Spalte stehen sie dagegen untereinander. */
@media (max-width: 640px) {
	.zahlenpanel__zeile { flex-direction: row; align-items: baseline; gap: 14px; }
	.zahlenpanel__wert { font-size: 30px; white-space: nowrap; min-width: 92px; }
}

/* Karte + Panel nebeneinander, unter 1024px untereinander */
.kartenpaar { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px; align-items: stretch; }
@media (max-width: 1024px) { .kartenpaar { grid-template-columns: minmax(0, 1fr); } }

/* Hochformat-Galerie (Location) */
.hochgalerie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hochgalerie img { width: 100%; aspect-ratio: 352 / 469; object-fit: cover; }
@media (max-width: 1024px) { .hochgalerie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Highlight-Kacheln (Teneriffa): fünf schmale Karten mit Hochformat-Bild */
.hl-raster { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1024px) { .hl-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.hl-kachel { display: flex; flex-direction: column; padding: 6px; background: var(--weiss); color: var(--dunkelgruen); }
.hl-kachel img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.hl-kachel__text { display: flex; flex-direction: column; gap: 6px; padding: 14px 10px 10px; }
.hl-kachel h3 { font-size: 17px; line-height: 1.25; overflow-wrap: break-word; hyphens: manual; margin: 0; }

/* Highlight-Kachel ist jetzt ein Knopf (oeffnet das Overlay) */
.hl-kachel { border: 0; cursor: pointer; text-align: left; font: inherit; width: 100%; }
.hl-kachel:hover img { transform: scale(1.03); }
.hl-kachel img { transition: transform .25s ease; }
.hl-kachel:hover { box-shadow: 0 8px 24px rgba(31,61,51,.12); }
.hl-kachel__text { display: flex; flex-direction: column; gap: 6px; padding: 14px 10px 10px; }
.hl-kachel__text .titel-3 {
	font-family: var(--schrift-titel); font-weight: 800;
	font-size: 17px; line-height: 1.25; color: var(--dunkelgruen);
	overflow-wrap: break-word; hyphens: manual;
}
.hl-kachel__mehr {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 13px; color: var(--nebentext);
}
.hl-punkte { display: none; }

/* Mobil: Slider statt Raster. Eine grosse Karte je Blick, die naechste
   schaut rechts heraus, damit klar ist, dass man wischen kann. Die Spur
   laeuft bis an den Bildschirmrand. */
@media (max-width: 640px) {
	.hl-raster {
		display: flex; gap: 12px;
		margin: 12px calc(-1 * var(--seitenrand)) 0;
		padding: 0 var(--seitenrand) 4px;
		overflow-x: auto; overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 var(--seitenrand);
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}
	.hl-raster::-webkit-scrollbar { display: none; }
	.hl-kachel {
		flex: 0 0 84%; width: auto; padding: 8px;
		scroll-snap-align: start;
	}
	.hl-kachel:hover img { transform: none; }
	.hl-kachel img { aspect-ratio: 4 / 5; }
	/* Nur die Ueberschrift - der Text steht im Fenster */
	.hl-kachel__text { padding: 16px 10px 10px; }
	.hl-kachel__text .titel-3 { font-size: 20px; line-height: 1.25; hyphens: manual; }
	.hl-kachel__mehr { display: none; }

	.hl-punkte { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
	.hl-punkt {
		width: 10px; height: 8px; padding: 0; border: 0; cursor: pointer;
		background: var(--mint);
		transition: width .3s ease, background .3s ease;
	}
	.hl-punkt[aria-current="true"] { width: 28px; background: var(--dunkelgruen); }
}

/* Fließtext im Akkordeon: die Inhalte bringen eigene <p> und <strong> mit */
/* Im Akkordeon volle Kartenbreite (die 820px gelten nur fuer Rechtstextseiten) */
.akkordeon__inhalt.rechtstext { max-width: none; }
.akkordeon__inhalt.rechtstext p { margin-bottom: 14px; line-height: 1.75; }
.akkordeon__inhalt.rechtstext p:last-child { margin-bottom: 0; }
.akkordeon__inhalt.rechtstext p:empty { display: none; }
.akkordeon__inhalt.rechtstext strong { color: var(--dunkelgruen); }
.akkordeon__inhalt.rechtstext ul { margin: 0 0 14px 22px; }
/* Aufzaehlungspunkte sind kurz und stehen eingerueckt - im Blocksatz
   rissen sie auf dem Handy grosse Luecken. Deshalb linksbuendig. */
.akkordeon__inhalt li { text-align: left; hyphens: manual; -webkit-hyphens: manual; }
.akkordeon__inhalt.rechtstext li + li { margin-top: 6px; }
.akkordeon__inhalt.rechtstext ul { padding-left: 0; }
/* Gesetzestext im Akkordeon: Abstand wie ein Absatz */
.akkordeon__inhalt .zitat { margin: 4px 0 18px; max-width: none; }
@media (max-width: 640px) { .akkordeon__inhalt .zitat { padding-left: 14px; } }
/* Fette Zwischenueberschriften nicht im Blocksatz auseinanderziehen */
.akkordeon__inhalt p.zwischentitel { text-align: left; hyphens: manual; -webkit-hyphens: manual; }
.akkordeon__inhalt .zitat p { margin-bottom: 0; }
@media (max-width: 640px) { .akkordeon__inhalt.rechtstext ul { margin-left: 20px; } }

/* Monatsknopf ist jetzt ein <button> */
.monatsknopf { border: 0; cursor: pointer; font: inherit; }

/* „Weiter zu Oktober" ist ein Knopf, kein Link */
/* Der Weiter-Link ist ein <button>. Nur die Knopf-Eigenheiten zuruecksetzen –
   NICHT font und border, sonst faellt die Gestaltung aus .pfeillink weg
   (hoehere Spezifitaet durch den Elementnamen). */
button.pfeillink { background: none; cursor: pointer; }

/* Coach-Karte mit weißem Rahmen (Teneriffa) */
.coachkarte { display: flex; flex-direction: column; padding: 12px; background: var(--weiss); }
.coachkarte__text { display: flex; flex-direction: column; gap: 14px; padding: 30px 28px 28px; }
@media (max-width: 640px) {
	/* Weniger Rand um den Text: zusammen mit Kartenrahmen und Seitenrand
	   blieben vorher nur 270 von 390 px fuer den Blocksatz uebrig. */
	.coachkarte { padding: 8px; }
	.coachkarte__text { gap: 10px; padding: 22px 12px 16px; }
}

/* Kursübersicht: sechs Fakten mit Trennlinien */
.kursfakten { display: flex; flex-direction: column; gap: 22px; padding: 28px 32px; background: var(--weiss); }
.kursfakten__raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.kursfakten__zelle { display: flex; flex-direction: column; gap: 6px; }
.kursfakten__zelle + .kursfakten__zelle { border-left: 1px solid #E6E1D8; padding-left: 20px; }
.kursfakten__label { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--nebentext); }
.kursfakten__wert { font-family: var(--schrift-titel); font-weight: 800; font-size: 18px; line-height: 1.3; color: var(--dunkelgruen); }
.kursfakten__fuss {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px;
	padding-top: 20px; border-top: 1px solid #E6E1D8;
}
@media (max-width: 1024px) {
	.kursfakten__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.kursfakten__zelle + .kursfakten__zelle { border-left: 0; padding-left: 0; }
}
@media (max-width: 640px) {
	/* Mobil als Liste: Bezeichnung links, Wert rechts, eine Zeile je Fakt.
	   Im Zwei-Spalten-Raster brachen „Playa de Las Américas" und „Deutsch
	   und Englisch" um, waehrend links Platz frei blieb. */
	.kursfakten { padding: 8px 20px 20px; gap: 16px; }
	.kursfakten__raster { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.kursfakten__zelle {
		flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px;
		padding: 14px 0;
	}
	.kursfakten__zelle + .kursfakten__zelle { border-top: 1px solid #E6E1D8; }
	.kursfakten__label { flex: 0 1 auto; min-width: 0; font-size: 11px; letter-spacing: .6px; }
	.kursfakten__wert { font-size: clamp(13px, 3.9vw, 16px); text-align: right; white-space: nowrap; }
	.kursfakten__raster + .kursfakten__fuss { margin-top: -6px; }
	.kursfakten__fuss .klein { font-size: 14px; }
	.kursfakten__fuss { flex-direction: column; align-items: stretch; gap: 14px; padding-top: 18px; }
	.kursfakten__fuss > div { display: grid !important; grid-template-columns: 1fr 1fr; }
	.kursfakten__fuss .knopf { width: 100%; padding: 0 12px; }
}

/* Monatsnavigation: zweizeilige Schaltfläche (Monat + Anzahl) */
.monatsknopf {
	display: inline-flex; flex: 0 0 auto; flex-direction: column;
	align-items: center; justify-content: center; gap: 1px;
	min-width: 150px; height: 48px; padding: 0 20px;
	background: var(--mint-hell); color: var(--dunkelgruen);
}
.monatsknopf[aria-current="true"] { background: var(--gruen); color: var(--creme); }
/* Die Terminzahl steht auch im aktiven Knopf gedaempft – so der Entwurf. */
.monatsknopf[aria-current="true"] .monatsknopf__anzahl { color: var(--mint-hell); }
.monatsknopf:hover { background: var(--mint); color: var(--dunkelgruen); }
.monatsknopf__name { font-size: 15px; font-weight: 700; line-height: 18px; }
.monatsknopf__anzahl { font-size: 12px; font-weight: 600; line-height: 14px; }
.monatsnav { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 640px) {
	/* Mobil passen nicht zwei Monate nebeneinander, ohne dass die Leiste
	   umbricht und wie ein Raster aussieht. Der Entwurf laesst sie stattdessen
	   seitlich wischen. */
	.monatsnav {
		flex-wrap: nowrap; overflow-x: auto;
		scrollbar-width: none; -webkit-overflow-scrolling: touch;
	}
	.monatsnav::-webkit-scrollbar { display: none; }
	.monatsknopf { min-width: 132px; }
}

/* Eckdaten unter dem Hero (Dauer, Ort, Gruppengröße) */
.eckdaten { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 28px; padding-top: 8px; }
.eckdaten > span { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--creme); }

/* Akkordeon-Eintrag, dessen Inhalt im Design-Export fehlt */
.akkordeon__offen {
	font-size: 15px; color: var(--nebentext); font-style: italic;
}

/* --------------------------------------------------------------------------
   18. Mitlaufendes Inhaltsverzeichnis (Für Arbeitgeber)
   -------------------------------------------------------------------------- */
.mit-inhaltsverzeichnis { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: start; }
.inhaltsverzeichnis { position: sticky; top: 112px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.inhaltsverzeichnis a { color: var(--nebentext); display: flex; gap: 10px; }
.inhaltsverzeichnis a:hover, .inhaltsverzeichnis a.aktiv { color: var(--dunkelgruen); font-weight: 700; }
.inhaltsverzeichnis__nr { color: var(--gruen); font-weight: 700; }
/* Downloads im Inhaltsverzeichnis: gleiche Groesse wie die Eintraege darueber */
.inhaltsverzeichnis a.inhaltsverzeichnis__download { align-items: center; gap: 10px; }
.inhaltsverzeichnis__download svg { flex: none; color: var(--gruen); }
@media (max-width: 1024px) {
	.mit-inhaltsverzeichnis { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.inhaltsverzeichnis { position: static; }
}

/* Rechtstexte: schmale Lesespalte, klare Gliederung */
.rechtstext { max-width: 820px; }
.rechtstext h2 { margin-top: var(--m); }
.rechtstext h3 { margin-top: var(--s); }
.rechtstext p, .rechtstext li { line-height: 1.75; }
.rechtstext dl { margin: 0; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px 24px; }
.rechtstext dt { font-weight: 700; color: var(--dunkelgruen); }
.rechtstext dd { margin: 0; }
@media (max-width: 640px) {
	.rechtstext dl { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
	.rechtstext dd { margin-bottom: 12px; }
}

/* Auffälliger Kasten für offene Punkte */
.offener-punkt {
	padding: 20px 24px;
	background: var(--mint-hell);
	border-left: 4px solid var(--warn);
}

/* Space-Invaders-Easter-Egg. Das Spiel ist eine eigenständige HTML-Datei
   mit eigenem Layout – deshalb im iframe statt eingebettet, sonst prallen
   die beiden Stylesheets aufeinander. */
dialog.spiel {
	width: min(680px, 96vw);
	max-width: none;
	height: min(760px, 92vh);
	padding: 0;
	border: 0;
	background: #070c0b;
	overflow: hidden;
}
dialog.spiel::backdrop { background: rgba(7, 12, 11, .92); }
dialog.spiel iframe { width: 100%; height: 100%; border: 0; display: block; }
.spiel__zu {
	position: absolute; top: 10px; right: 12px; z-index: 2;
	width: 40px; height: 40px;
	display: flex; align-items: center; justify-content: center;
	background: #0d1615; color: #4dffa0;
	border: 1px solid #1c2e2a; cursor: pointer;
	font-size: 18px; line-height: 1;
}
.spiel__zu:hover { background: #1c2e2a; }

/* --------------------------------------------------------------------------
   19. Kleinteile
   -------------------------------------------------------------------------- */
.trennlinie { border: 0; border-top: 1px solid rgba(31,61,51,.15); margin: 0; }

.faktenleiste {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
	padding: 28px 32px; background: var(--weiss);
}
.faktenleiste__wert { font-family: var(--schrift-titel); font-weight: 800; font-size: 20px; color: var(--dunkelgruen); }
.faktenleiste__label { font-size: 13px; color: var(--nebentext); }
@media (max-width: 1024px) { .faktenleiste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .faktenleiste { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px; } }

/* --------------------------------------------------------------------------
   Instagram-Karussell
   Waagerechte Spur mit Einrastpunkten. Ohne JavaScript laesst sie sich
   wischen bzw. mit der Tastatur scrollen - die Pfeile sind Komfort, keine
   Voraussetzung.
   -------------------------------------------------------------------------- */
.insta { position: relative; }

.insta__spur {
	display: flex; gap: 16px;
	overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 0;
	padding-bottom: 4px;
	/* Bildlaufleiste ausblenden, ohne die Bedienbarkeit zu nehmen */
	scrollbar-width: thin;
	scrollbar-color: var(--mint) transparent;
}
.insta__spur::-webkit-scrollbar { height: 6px; }
.insta__spur::-webkit-scrollbar-thumb { background: var(--mint); }

.insta-karte {
	/* Der Entwurf zeigt sechs Kacheln, die genau in die Inhaltsbreite passen
	   (mobil drei). Das Karussell bleibt scrollbar – im Ruhezustand sieht es
	   aber aus wie das gezeichnete Raster, statt die sechste Kachel
	   anzuschneiden. */
	position: relative; flex: 0 0 auto;
	/* Der Entwurf zeichnet die Kacheln quadratisch: 205x200 auf 1440,
	   110x110 auf 390. Als aspect-ratio statt fester Hoehe, damit sie
	   auch bei Zwischenbreiten quadratisch bleiben. */
	width: calc((100% - 5 * 16px) / 6); aspect-ratio: 1 / 1;
	scroll-snap-align: start;
	overflow: hidden;
	background: var(--mint-hell);
	display: flex; align-items: center; justify-content: center;
}
.insta-karte img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.insta-karte:hover img { transform: scale(1.04); }

/* Platzhalter zeigen nur das Zeichen mittig, kein Vollbild */
.insta-karte--platzhalter img { width: 32px; height: 32px; object-fit: contain; }

/* Einwilligungsschranke vor dem Instagram-Widget. Eigene Flaeche statt
   Ueberlagerung: auf dem Handy sind die Platzhalterkacheln flacher als der
   Text, dann stand der Knopf frueher halb ausserhalb. Sobald die Schranke
   aktiv ist, setzt insta.js data-insta="schranke" - die Kacheln und die
   Pfeile darunter verschwinden dann. */
.insta__schranke {
	display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 16px;
	padding: 32px 24px; text-align: center;
	background: var(--mint-hell);
}
.insta__schranke p { max-width: 460px; margin: 0; font-size: 15px; line-height: 1.6; }
.insta[data-insta="schranke"] .insta__spur,
.insta[data-insta="schranke"] .insta__pfeil { display: none; }
/* Hoehe setzt lightwidget.js passend zum Inhalt. Bis dahin ungefaehr eine
   Reihe quadratischer Kacheln freihalten - eine feste Mindesthoehe liess
   auf dem Handy eine grosse leere Flaeche unter dem Feed stehen. */
.insta__rahmen { display: block; width: 100%; border: 0; overflow: hidden; aspect-ratio: 4 / 1; }

@media (max-width: 640px) {
	.insta__spur { gap: 10px; }
	.insta-karte { width: calc((100% - 2 * 10px) / 3); }
}

/* Abspiel- bzw. Albumzeichen */
.insta-karte__art {
	position: absolute; top: 10px; right: 10px;
	display: flex; align-items: center; justify-content: center;
	width: 34px; height: 34px;
	background: rgba(31, 61, 51, .62); color: var(--creme);
	backdrop-filter: blur(2px);
}

.insta__pfeil {
	position: absolute; top: 50%; transform: translateY(-50%);
	z-index: 2;
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	background: var(--creme); color: var(--dunkelgruen);
	border: 1px solid rgba(31,61,51,.15);
	box-shadow: 0 4px 16px rgba(31,61,51,.18);
	cursor: pointer;
	border-radius: 999px;
}
.insta__pfeil--zurueck { left: -10px; }
.insta__pfeil--vor { right: -10px; }
.insta__pfeil:hover { background: var(--mint-hell); }
.insta__pfeil:disabled { opacity: 0; pointer-events: none; }

/* Solange die Platzhalter stehen, fuehren die Pfeile ins Leere */
.insta[data-insta="platzhalter"] .insta__pfeil { display: none; }

@media (max-width: 640px) {
	/* Breite steht weiter oben bei .insta-karte (drei je Reihe wie im
	   Entwurf) – hier nur noch die Pfeile ausblenden, auf dem Handy wird
	   gewischt. */
	.insta__pfeil { display: none; }
}

.kartenplatzhalter {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
	height: 420px; background: var(--mint); color: var(--dunkelgruen);
	font-weight: 700;
}
@media (max-width: 640px) { .kartenplatzhalter { height: 260px; } }

/* Silbentrennung nur als Ausnahme (2026-09-16): an allen Stellen mit
   hyphens: auto gilt hyphenate-limit-chars: 14 6 6 - getrennt werden nur
   Woerter ab 14 Buchstaben, mit mindestens 6 Buchstaben vor und nach dem
   Strich. Safari kennt das nicht und nutzt -webkit-hyphenate-limit-*;
   -lines: 1 verhindert dort zwei Striche hintereinander. Gemessen ueber alle
   Seiten: auf dem Handy rund 80 % weniger Striche; die Wortabstaende werden
   etwas groesser, bleiben aber lesbar (Vergleich mit 10 4 4 und ohne
   Trennung - ohne entstehen tatsaechlich Loecher). Auf dem Handy ab 12
   Buchstaben: sonst bleibt z.B. „Ich bin Daniel Kukshaus," als Zeile mit
   Loechern stehen, weil „Mitbegründer" nicht getrennt werden darf. */
@media (max-width: 640px) {
	.blocksatz, .blocksatz p, .blocksatz--mobil, .akkordeon__inhalt p, .akkordeon__inhalt li,
	.karte__blocktext, .overlay__beschreibung {
		hyphenate-limit-chars: 12 5 5; -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 5;
	}
}

/* --------------------------------------------------------------------------
   Flow-Erleben: Programmkarten (2026-09-16)
   Weisse Karten mit gruener Nummer wie Kursuebersicht und Highlight-Kacheln.
   Drei Spalten, das Foto fuellt die sechste Zelle; Tablet zwei, Handy eine.
   -------------------------------------------------------------------------- */
.flow-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.flow-karte { background: var(--weiss); gap: 12px; padding: 28px; }
.flow-karte__nr {
	font-family: var(--schrift-titel); font-weight: 800; font-size: 15px;
	letter-spacing: 1px; color: var(--gruen);
}
.flow-karte .titel-3 { font-size: 20px; line-height: 1.25; }
.flow-karte p { font-size: 16px; line-height: 1.65; }
.flow-raster__bild { position: relative; min-height: 260px; overflow: hidden; }
.flow-raster__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1024px) {
	.flow-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.flow-raster { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.flow-karte { padding: 22px 20px; }
	/* Untereinander gestapelt: alle Karten gleich hoch (Text drei Zeilen) */
	.flow-karte p { min-height: calc(3 * 1.65em); }
	/* kurze Texte in schmaler Spalte: fruehere Trennung gegen Luecken */
	.flow-karte p.blocksatz { hyphenate-limit-chars: 6 3 3; -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3; -webkit-hyphenate-limit-lines: 2; }
	.flow-raster__bild { min-height: 0; aspect-ratio: 4 / 3; order: -1; }
}
/* Gruene Abschlussflaeche direkt ueber der Fusszeile: kein Aussenabstand
   nach unten, Bild neben dem Text */
.flaeche--abschluss { margin-bottom: 0; }
.flaeche--abschluss .bild { height: 380px; }
@media (max-width: 1024px) { .flaeche--abschluss .bild { height: 320px; } }
@media (max-width: 640px)  { .flaeche--abschluss .bild { height: 240px; } }

/* --------------------------------------------------------------------------
   Bildrahmen, die vorher als Inline-Stil im Seitencode standen (2026-09-17)
   -------------------------------------------------------------------------- */
/* Bild als Hintergrund eines Panels (Kontakt, Anfrage) */
.bild-flaeche { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bild--4zu3 { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bild--3zu4 { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.bild--400  { width: 100%; height: 400px; object-fit: cover; }
/* Location: Standbild unter dem Video. Bis das Video laeuft, ist das Bild
   zu sehen; das Video liegt darueber. */
.hero__bilder .hero__video { z-index: 0; }

/* Banner-Unterzeile mit festem Umbruch: Schrift waechst mit der Breite, damit
   die zwei Zeilen auch auf schmalen Handys (360 px, z. B. Galaxy S21) halten.
   Am Dateiende, weil .hero__lead weiter oben die mobile Groesse setzt. */
@media (max-width: 640px) { .hero .hero__lead--zweizeilig { font-size: min(17px, 4.3vw); } }

/* Highlight-Fenster: Blocksatz ohne grosse Luecken (2026-09-17). Texte sind
   jetzt ein Absatz. Gemessen ueber alle fuenf Texte: etwas breitere Spalte und
   Trennung ab 10 Buchstaben senkt die sehr grossen Wortabstaende am Computer
   von 23 auf 5, auf dem Handy (360/390 px) von 37/42 auf 23/17 – bei 3 bzw.
   5–7 Trennstrichen insgesamt. Gilt nur hier, nicht fuer die uebrige Seite. */
.overlay--hl .overlay__text { padding-left: 32px; padding-right: 32px; }
.overlay--hl .overlay__beschreibung {
	hyphenate-limit-chars: 10 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4;
}
@media (max-width: 800px) {
	.overlay--hl .overlay__text { padding-left: 16px; padding-right: 16px; }
}

/* FAQ „Inkludierte Leistungen" auf dem Handy (2026-09-17): kleinerer Haken,
   weniger Einzug, breitere Textspalte und in diesen kurzen Zeilen fruehere
   Silbentrennung – sonst rissen Woerter wie „zubereitetes, ausgewogenes"
   grosse Luecken in den Blocksatz. */
@media (max-width: 640px) {
	.akkordeon__inhalt { padding-left: 16px; padding-right: 16px; }
	.akkordeon__inhalt p.hakenzeile {
		padding-left: 22px;
		background-size: 15px 15px; background-position: left 0 top 6px;
		hyphenate-limit-chars: 6 3 3; -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3;
		-webkit-hyphenate-limit-lines: 2;
	}
	.hinweiszeile { padding: 12px 14px 12px 40px; }
	.hinweiszeile::before { left: 12px; top: 14px; }
}

/* Planungsstand im Banner (Flow-Erleben, ersetzt das gruene Hinweisband) */
.hero__planung {
	display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
	padding: 8px 14px; background: rgba(243,238,230,.14); border: 1px solid rgba(243,238,230,.45);
	color: var(--creme); font-family: var(--schrift-titel); font-weight: 800; font-size: 17px; line-height: 1.2;
}
.hero__planung-marke {
	padding: 3px 8px; background: var(--gruen); color: var(--creme);
	font-family: var(--schrift-text); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}
@media (max-width: 640px) { .hero__planung { font-size: 15px; padding: 7px 12px; } }

/* Location: Video mit 55 % Deckkraft auf Schwarz (statt auf dem grauen
   Lade-Hintergrund der anderen Banner) */
.hero--video { background: #000; }
.hero--video .hero__video { opacity: .55; }

/* Fliesstext in zwei Spalten nebeneinander (Location), mobil untereinander */
.textspalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 56px; }
.textspalten__spalte { display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 1024px) { .textspalten { grid-template-columns: minmax(0, 1fr); } }

/* Banner „Ueber uns": Bild mit 70 % Deckkraft auf Schwarz (2026-09-18).
   Hoehere Spezifitaet als .hero__bilder > picture:first-child > .hero__bild,
   sonst bliebe das Bild bei voller Deckkraft. */
.hero--dunkel { background: #000; }
.hero--dunkel .hero__bilder > .hero__bild,
.hero--dunkel .hero__bilder > picture > .hero__bild { opacity: .7; }

/* Namensnennung unter dem Kartenstandbild. Bei OpenStreetMap Pflicht - die
   bedienbare Karte bringt ihre eigene mit, das Standbild nicht. */
.landkarte__quelle {
	position: absolute; right: 0; bottom: 0; z-index: 2; margin: 0;
	padding: 2px 6px; font-size: 11px; color: var(--text);
	background: rgba(255, 255, 255, .75);
}
.landkarte__quelle a { color: inherit; text-decoration: underline; }

/* Fusszeile unten: seit der Widerrufsbelehrung stehen dort vier Links. Auf
   schmalen Handys brechen sie um - dann lieber sauber umbrechen als einen
   Link mitten im Wort zerreissen. */
.fusszeile__unten > div { flex-wrap: wrap; row-gap: 8px; }
.fusszeile__unten a { white-space: nowrap; }
@media (max-width: 360px) {
	.fusszeile__unten > div { gap: 16px; }
}

/* Sehr schmale Handys (unter 360 px): lange Einzelwoerter wie
   „Landesanerkennung" passen bei 32 px nicht mehr in eine Zeile. Statt im Wort
   zu trennen, schrumpft die Ueberschrift leicht mit. .abschluss--flach muss
   mitgenannt werden, sonst gewinnt dessen eigene 32-px-Regel. */
@media (max-width: 359px) {
	.titel-2,
	.abschluss .titel-2,
	.abschluss--flach .titel-2 { font-size: min(32px, 8.4vw); }
}

/* Zwei gleich breite Knoepfe nebeneinander - auch auf dem Handy (18.09.2026).
   Nur fuer Paare gedacht; die normale .knopf-reihe bleibt unveraendert, weil
   sie an anderen Stellen drei oder mehr Knoepfe traegt. */
/* width:100% ist noetig: der Elternblock ist eine Flex-Spalte mit
   align-items: flex-start, sonst bliebe die Reihe so schmal wie ihr
   Inhalt und beide Knoepfe waeren wieder unterschiedlich breit. */
.knopf-reihe--paar { flex-wrap: nowrap; width: 100%; max-width: 520px; }
.knopf-reihe--paar .knopf { flex: 1 1 0; min-width: 0; padding-left: 12px; padding-right: 12px; }
/* Der Rahmen des sekundaeren Knopfes macht ihn bei flex-basis 0 sonst um
   genau seine Rahmenbreite breiter - deshalb bekommt der primaere denselben
   Rahmen, nur unsichtbar. Nur den primaeren anfassen, sonst ueberschreibt die
   Regel den sichtbaren Rahmen des sekundaeren. */
.knopf-reihe--paar .knopf--primaer { border: 2px solid transparent; }
@media (max-width: 640px) {
	.knopf-reihe--paar { flex-direction: row; align-items: stretch; gap: 10px; }
	.knopf-reihe--paar .knopf { width: auto; height: 54px; font-size: min(16px, 4vw); }
}

/* Banner der Online-Reservierung (18.09.2026): Das Foto ist sehr hell, die
   helle Schrift war darauf kaum zu lesen. Jetzt dunkle Schrift auf leicht
   abgedunkeltem Bild - staerker abdunkeln wuerde der dunklen Schrift wieder
   den Kontrast nehmen. */
.hero--gedaempft { background: #000; }
.hero--gedaempft .hero__bilder > .hero__bild,
.hero--gedaempft .hero__bilder > picture > .hero__bild { opacity: .82; }