/* ═══════════════════════════════════════════════════════════
   Kopf, Menue, Fuss und die klebende Leiste.
   Werte aus design/final/index.html.
   ═══════════════════════════════════════════════════════════ */

/* ── Kopf ───────────────────────────────────────────────── */
/* Immer body > header. Die Seitenkoepfe der Unterseiten sind
   ebenfalls header-Elemente. Ohne die Eingrenzung stuenden sie
   fest oben im Bild, weiss auf Papier, uebereinandergestapelt.
   Dieselbe Falle wie bei nav im Fuss. */
/* Die Kopfzeile liest ihre Farben aus vier Tokens und weiss nicht,
   auf welcher Seite sie steht. Auf Papier: Text, Marke in Blau,
   Haarlinie. Ueber einem Foto setzt body.kopf-im-bild die Tokens
   um, siehe unten. Ein fuenftes Token --kz-leise (die andere
   Sprache in 70 % Weiss) gab es bis zum 17. September: ueber drei
   Fotos mass es 4,09 bis 4,43 zu 1. Beide Sprachen stehen jetzt in
   --kz-farbe, die aktuelle traegt eine Haarlinie darunter. */
body > header {
	--kz-farbe: var(--tx);
	--kz-grund: rgba(243, 241, 237, .82);
	--kz-marke: var(--bl);
	--kz-linie: var(--ln);
	position: fixed;
	inset: 0 0 auto;
	z-index: var(--z-kopf);
	padding: 10px var(--m);
	color: var(--kz-farbe);
	background: var(--kz-grund);
	backdrop-filter: blur(20px) saturate(150%);
	-webkit-backdrop-filter: blur(20px) saturate(150%);
	box-shadow: 0 1px 0 var(--ln);
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* Wortmarke links, Navigation mittig, rechts die Gruppe aus
	   Sprachwahl und Buchen. Mindestens 48 Pixel dazwischen, damit
	   nichts zusammenklebt. */
	gap: var(--s6);
	min-height: 68px;
	transition: padding .5s var(--e), min-height .5s var(--e),
		background .5s var(--e), color .5s var(--e), box-shadow .5s var(--e);
}
body > header > nav { margin-inline: auto; }

/* .on heisst "gescrollt": die Leiste zieht sich um vier Pixel enger
   und steht auf Papier. */
body > header.on {
	padding-block: 6px;
	min-height: 60px;
}

/* ── Kopfzeile auf dem Foto ─────────────────────────────── */
/* Beginnt die Seite mit einem Foto (Hero, Kopf im Bild), liegt die
   Leiste weiss darauf, ohne Papier und ohne Schleier, wie in
   idee-start, idee-soelden und idee-appartement. Beim Scrollen wird
   sie zu Papier wie ueberall. Der Verlauf oben im Foto traegt die
   Lesbarkeit. Die Klasse setzt kr_body_klassen() nach Inhalt; hier
   werden nur die Tokens umgesetzt, keine Regel der Leiste wird
   wiederholt.

   Der Buchen-Knopf traegt den Akzent, auch auf dem Foto. Die
   Startseiten-Referenz zeigt ihn dort weiss; die Entscheidung vom
   3. September ist juenger und wiegt schwerer: auf jeder Seite gibt
   es genau einen farbigen Knopf, und er tut immer dasselbe. */
body.kopf-im-bild > header:not(.on) {
	--kz-farbe: var(--we);
	--kz-grund: transparent;
	--kz-marke: var(--we);
	--kz-linie: var(--we45);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: none;
}

/* ── Wortmarke ──────────────────────────────────────────── */
/* Inline eingebettet, siehe partials/components/logo-sprite.php.
   Sie nimmt die Textfarbe an: ueber dem Foto ist das Weiss, nach
   dem Wechsel auf Papier das Markenblau, im Fuss wieder Weiss.
   Unter 40 Pixel Hoehe ist der Untertitel unleserlich, dort
   steht nur der Schriftzug. */
/* Die Wortmarke ist am Handy der erste Verweis der Seite und
   braucht dieselbe Tastflaeche wie jeder andere. */
.logo {
	display: flex;
	align-items: center;
	min-height: var(--tippflaeche);
	line-height: 0;
	flex: 0 0 auto;
}
.logo__voll,
.logo__wort {
	display: block;
	width: auto;
	height: var(--logo-hoehe, 26px);
	fill: currentColor;
}
.logo--klein { --logo-hoehe: 26px; }
/* Schutzraum nach rechts, damit die Navigation nicht an die
   Wortmarke stoesst. */
body > header .logo--klein { margin-right: 32px; }
.logo--klein .logo__voll { display: none; }
.logo--gross { --logo-hoehe: 52px; }
.logo--gross .logo__wort { display: none; }

/* Die Wortmarke ist die einzige Stelle, an der das Blau bleibt.
   Im Fuss steht sie weiss, auf dem Foto ueber dem Hero auch. */
body > header .logo { color: var(--kz-marke); }

/* ── Navigation ─────────────────────────────────────────── */
/* Die Unterstreichung waechst von links und verschwindet
   nach rechts. Deshalb zwei Ursprungspunkte. */
/* Nur der Kopf. Ohne die Eingrenzung faengt der Fuss die Regel
   mit und stellt dort Ueberschrift und Liste nebeneinander. */
body > header nav {
	display: flex;
	gap: var(--s5);
	font-size: 14px;
	font-weight: var(--gw-halb);
}
body > header nav a {
	position: relative;
	opacity: .85;
	transition: opacity .3s;
}
body > header nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -5px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .5s var(--e);
}
body > header nav a:hover,
body > header nav a:focus-visible { opacity: 1; }
body > header nav a:hover::after,
body > header nav a:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left;
}
/* Die aktive Seite traegt die Unterstreichung dauerhaft. So sieht
   der Gast, wo er steht, ohne die Maus zu bewegen. */
body > header nav .current-menu-item > a,
body > header nav [aria-current="page"] { opacity: 1; }
body > header nav .current-menu-item > a::after,
body > header nav [aria-current="page"]::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* Der Punkt vor "de" kam von einer Liste, die Polylang mitbringt
   und die niemand zurueckgesetzt hat. Gilt fuer jede Liste im Kopf
   und im Fuss, nicht nur fuer diese eine. */
body > header ul,
body > header ol,
body > footer ul,
body > footer ol {
	list-style: none;
	margin: 0;
	padding: 0;
}
body > header li,
body > footer li::marker { list-style: none; }

/* ── Rechte Seite im Kopf ───────────────────────────────── */
.hr {
	display: flex;
	align-items: center;
	gap: var(--s3);
	font-size: 13px;
	flex: 0 0 auto;
}
/* Zwei Verweise, getrennt durch eine senkrechte Haarlinie. Keine
   Versalien, keine Klammern: es sind zwei Woerter, keine Marke. Eine
   Liste ohne Punkte. */
.hr .lg {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	font-weight: var(--gw-halb);
}
.hr .lg li + li {
	border-left: 1px solid var(--kz-linie);
	margin-left: 10px;
	padding-left: 10px;
}
/* Die Tastflaeche ist 44 Pixel hoch, das Polster bleibt
   unsichtbar: der negative Aussenabstand nimmt es optisch
   wieder zurueck. */
.hr .lg a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tippflaeche);
	padding-inline: 4px;
	margin-block: -13px;
	color: var(--kz-farbe);
	text-decoration: underline 1px transparent;
	text-underline-offset: .3em;
	transition: text-decoration-color .3s var(--e);
}
/* Die aktuelle Sprache traegt die Haarlinie, in der Farbe der
   Schrift: auf dem Foto Weiss, auf Papier Text. Kein zweites
   Zeichen daneben, keine Helligkeit, kein Gewicht. */
.hr .lg a:hover { text-decoration-color: var(--kz-linie); }
.hr .lg [aria-current="true"],
.hr .lg .current-lang a { text-decoration-color: currentColor; }

/* Der Menueknopf ist auf dem Handy das einzige Bedienelement im
   Kopf. Zwei Haarlinien auf Papier uebersieht man, deshalb bekommt
   er dieselbe Behandlung wie der Buchungsknopf: volle Tastflaeche,
   kraeftige Linien, eine duenne Umrandung. */
.burger {
	display: none;
	position: relative;
	width: var(--tippflaeche);
	height: var(--tippflaeche);
	flex: 0 0 auto;
	box-shadow: inset 0 0 0 1px var(--kz-linie);
	transition: box-shadow .3s var(--e);
}
.burger:hover { box-shadow: inset 0 0 0 1px var(--kz-farbe); }

.burger i {
	position: absolute;
	left: 11px;
	width: 22px;
	height: 1.5px;
	background: var(--kz-farbe);
	transition: transform .4s var(--e), opacity .3s;
}
.burger i:first-child { top: 16px; }
.burger i:last-child { bottom: 16px; }

/* Zum Kreuz: beide Linien wandern auf die Mitte zu. Der Abstand
   zwischen ihnen betraegt 10,5 Pixel, also je 5,25. */
.burger[aria-expanded="true"] i:first-child { transform: translateY(5.25px) rotate(45deg); }
.burger[aria-expanded="true"] i:last-child { transform: translateY(-5.25px) rotate(-45deg); }

/* ── Menue auf dem Handy ────────────────────────────────── */
/* Vorgabe aus der Referenz, unveraendert uebernommen. Kein
   Ueberblenden, sondern hidden: ein Menue, das mit opacity 0 im
   Dokument steht, faengt Beruehrungen ab und wird vorgelesen. */
.mnu {
	position: fixed;
	inset: 0;
	z-index: 95;
	background: var(--pa);
	display: flex;
	flex-direction: column;
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mnu[hidden] { display: none; }
.mnu ul,
.mnu ol { list-style: none; margin: 0; padding: 0; }

.mnu-kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px var(--m);
	border-bottom: 1px solid var(--ln);
}
.mnu-zu {
	width: 44px;
	height: 44px;
	box-shadow: inset 0 0 0 1px var(--ln);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	background: none;
	border: 0;
	color: var(--tx);
	cursor: pointer;
}

.mnu-nav {
	display: flex;
	flex-direction: column;
	padding-inline: var(--m);
}
.mnu-nav a {
	display: flex;
	align-items: center;
	/* min-height, nicht height: ein Eintrag, der umbricht, sprengt
	   sonst seine Zeile statt hoeher zu werden. */
	min-height: 64px;
	padding-block: var(--s2);
	line-height: 1.2;
	font-size: 22px;
	font-weight: var(--gw-normal);
	letter-spacing: -.03em;
	border-bottom: 1px solid var(--ln);
	opacity: 0;
	transform: translateY(8px);
	animation: mnuAuf .5s var(--e) forwards;
}
.mnu-nav a:nth-child(1) { animation-delay: .04s; }
.mnu-nav a:nth-child(2) { animation-delay: .08s; }
.mnu-nav a:nth-child(3) { animation-delay: .12s; }
.mnu-nav a:nth-child(4) { animation-delay: .16s; }
.mnu-nav a:nth-child(5) { animation-delay: .20s; }
.mnu-nav a:active { background: var(--pa2); }
@keyframes mnuAuf { to { opacity: 1; transform: none; } }

.mnu-unter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s1) var(--s4);
	padding: 20px var(--m) 0;
	font-size: 15px;
	color: var(--mu);
}

.mnu-fuss {
	margin-top: auto;
	padding: 0 var(--m) 20px;
}
.mnu-fuss .kn {
	width: 100%;
	min-height: 54px;
	justify-content: center;
	font-size: 15px;
}
.mnu-zeile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s3);
	margin-top: var(--s3);
	padding-top: var(--s3);
	border-top: 1px solid var(--ln);
}
.mnu-lg {
	display: flex;
	align-items: center;
	gap: var(--s2);
	font-size: 15px;
}
.mnu-lg b { font-weight: var(--gw-halb); }
.mnu-lg a { color: var(--mu); }
.mnu-lg i { width: 1px; height: 12px; background: var(--ln); }
.mnu-tel {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.2;
}
.mnu-tel span {
	font-size: 9.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--mu);
}
.mnu-tel a {
	font-size: 16px;
	font-weight: var(--gw-halb);
	letter-spacing: -.02em;
	margin-top: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.mnu-nav a { animation-delay: 0s !important; }
}

/* ── Fuss ───────────────────────────────────────────────── */
/* Der Fuss ist dicht: vier Spalten, kleine Schrift, kurze Zeilen.
   Vorbild: 03_Design/final/idee-start.html */
body > footer {
	background: var(--dk);
	color: rgba(244, 244, 242, .72);
	padding-block: var(--s5);
	font-size: .8125rem;
}
.fg {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--s5);
	/* Die drei Spalten beginnen auf einer Linie. Ohne diese Zeile
	   streckt sich die erste ueber die volle Hoehe und ihr Inhalt
	   setzt tiefer an als die Ueberschriften daneben. */
	align-items: start;
}
body > footer h2 {
	font-size: .8125rem;
	letter-spacing: -.01em;
	text-transform: none;
	color: var(--pa);
	margin-bottom: var(--s2);
	font-weight: var(--gw-halb);
}
/* Polster am Eintrag, nicht Rand dazwischen. Die Tastflaeche
   bleibt 44 Pixel hoch, der negative Aussenabstand zieht die Zeile
   optisch wieder zusammen. */
body > footer li { padding-block: .2rem; }
body > footer li a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tippflaeche);
	margin-block: -.75rem;
}
body > footer a:hover { color: var(--we); }
body > footer .logo { color: var(--we); }
.fuss__adresse { margin-top: 0; }
.fuss__kontakt { margin-top: var(--s2); }
.fuss__partner {
	margin-top: var(--s3);
	display: flex;
	align-items: baseline;
	gap: var(--s1);
	font-size: var(--t-klein);
}
.fuss__partner span {
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(243, 241, 237, .5);
}
body > footer .ex { box-shadow: inset 0 -1px 0 rgba(243, 241, 237, .3); }
body > footer .ex:hover { box-shadow: inset 0 -1px 0 currentColor; }
.fb a {
	display: inline-block;
	padding-block: var(--s2);
	margin-block: -12px;
}
/* Der Trenner zwischen den beiden Sprachen. */
.fb i {
	display: inline-block;
	width: 1px;
	height: .7em;
	margin-inline: .5rem;
	background: currentColor;
	opacity: .4;
}
.fb b { font-weight: var(--gw-halb); color: var(--pa); }
.fb {
	margin-top: var(--s5);
	padding-top: var(--s3);
	border-top: 1px solid rgba(244, 244, 242, .12);
	display: flex;
	justify-content: space-between;
	gap: var(--s3);
	flex-wrap: wrap;
	font-size: .75rem;
	color: rgba(244, 244, 242, .5);
}

/* ── Klebeleiste, nur auf dem Handy ─────────────────────── */
.sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--z-leiste);
	display: none;
	background: rgba(243, 241, 237, .9);
	backdrop-filter: blur(18px) saturate(140%);
	align-items: center;
	gap: var(--s1);
	/* Ein Schatten nach oben, damit die Leiste ueber dem Inhalt
	   schwebt statt darauf zu liegen. */
	box-shadow: 0 -8px 28px rgba(20, 22, 26, .1);
	padding: 10px 14px calc(10px + var(--sicher-unten));
}

/* Sie war frueher an den Hero gekoppelt und fuhr erst hoch, wenn
   er durch war. Ab 13. August steht sie von Anfang an. Wer auf
   dem Handy kommt, sieht Preis, Anruf und Buchung sofort. */
.sticky .p {
	/* Nur so breit wie noetig. Die Breite gehoert dem Aufruf. */
	flex: 0 0 auto;
	font-size: 9.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--mu);
}
.sticky .p b {
	display: block;
	font-weight: var(--gw-normal);
	letter-spacing: -.03em;
	font-size: 23px;
	color: var(--tx);
	letter-spacing: 0;
	text-transform: none;
	margin-top: 3px;
}
/* Auf dem Handy ist das der einzige Buchungsaufruf, der immer
   sichtbar ist. Er nimmt, was nach Preis und Telefon uebrig
   bleibt. */
.sticky .kn {
	flex: 1;
	min-height: 54px;
	font-size: 15px;
	font-weight: var(--gw-halb);
	padding: 0 20px;
	justify-content: center;
}
.sticky .tel {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	min-height: 48px;
	box-shadow: inset 0 0 0 1px var(--ln);
}

/* ── Haltepunkte ────────────────────────────────────────── */
@media (max-width: 61.25rem) {
	.fg { grid-template-columns: 1fr 1fr; }

	/* Navigation, Sprachwahl und Buchen brauchen zusammen rund 740
	   Pixel. Bei 768 stand der Knopf bis 772, ueber den Rand hinaus
	   (Sichtpruefung 1. Oktober). Unter dem Haltepunkt uebernimmt
	   der Menueknopf, Sprachwahl und Buchen bleiben im Kopf. */
	body > header nav { display: none; }
	.burger { display: block; }
}

@media (max-width: 760px) {
	body > header nav,
	.hr .lg { display: none; }

	/* Der Buchungsaufruf steht mobil in der Klebeleiste, nicht
	   zweimal auf demselben Bildschirm. Im Kopf bleiben Wortmarke
	   und Menueknopf. */
	.hr .kn.rand { display: none; }

	.burger { display: block; }
	.sticky { display: flex; }
	.fg { grid-template-columns: 1fr; gap: var(--s4); }
	/* Der Platz fuer die Klebeleiste gehoert ans body, nicht an den
	   Fuss: idee-appartement.html, body{padding-bottom:4.5rem}. Der
	   Wert ist die gemessene Hoehe der Leiste plus safe-area. */
	body { padding-bottom: var(--klebeleiste); }
}