/* ═══════════════════════════════════════════════════════════
   Unterseiten.

   Die Referenz ist eine Startseite und kennt weder Seitenkopf noch
   Fliesstext. Was hier steht, ist genau das, was die Unterseiten
   zusaetzlich brauchen, in derselben Sprache: dieselben Abstaende,
   dieselbe Typo-Skala, dieselbe Linienstaerke.

   Geladen nur, wo keine Startseite ist.
   ═══════════════════════════════════════════════════════════ */

/* ── Abschnitte ─────────────────────────────────────────── */
/* Der Abstand jedes Abschnitts steht in basis.css, einmal. Hier
   nur die Toenung. */
.hell { background: var(--pa2); }

/* H2 auf Unterseiten. Die grossen Grade bleiben der Startseite
   vorbehalten. Steht hier und nicht in basis.css, weil seiten.css
   nur ausserhalb der Startseite geladen wird; die Klassen .d2 und
   .d3 muessen ueberschrieben werden, deshalb beide im Selektor. */
.hauptteil h2.d2,
.hauptteil h2.d3,
.hauptteil h2:not([class]) {
	font-size: clamp(24px, 2.6vw, 38px);
	line-height: 1.06;
}

/* ── Seitenkopf ─────────────────────────────────────────── */
/* Vorbild: 03_Design/final/idee-kopf-im-bild.html

   Die Schrift liegt im Bild, ein Verlauf darueber macht sie
   lesbar. Keine Papierplatte, die bei einer langen Ueberschrift
   ueber das halbe Bild laeuft, und keine zwei Spalten, die
   verschieden hoch anfangen: alles steht untereinander am unteren
   Rand.
   ═════════════════════════════════════════════════════════════ */

.kopf {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: clamp(24rem, 56svh, 38rem);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/* Oben die Hoehe der festen Kopfleiste freihalten. Der Inhalt
	   sitzt unten, aber auf Seiten mit dreistufiger Brotkrume wird
	   er hoch genug, um darunter zu geraten: auf /soelden/winter/
	   und /soelden/sommer/ lag die Krume hinter der Leiste. */
	padding-block: calc(var(--kopf) + var(--s5)) var(--s7);
	color: var(--we);
}

/* Ohne diese Zeile schrumpft der Satzspiegel als Flex-Element auf
   die Breite seines laengsten Wortes. */
.kopf > .w { width: 100%; position: relative; }

/* Ein dritter Schleier, der dem Text folgt statt dem Bild.
 *
 * Die beiden festen Verlaeufe sind an die Hoehe des Kopfes
 * gebunden. Die Brotkrume steht aber ganz oben im Textblock, also
 * dort, wo ein Verlauf von unten noch duenn ist, und lag auf einer
 * Schneeaufnahme bei 1,4 zu 1. Weiter abdunkeln haette jedes Foto
 * grau gemacht.
 *
 * Dieser Schleier haengt am Satzspiegel und wandert mit, egal wie
 * hoch der Text ist. Er reicht weit ueber ihn hinaus und laeuft
 * weich aus, damit keine Kante sichtbar wird. */
.kopf > .w::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -3rem -14% -4rem -8rem;
	background: radial-gradient(120% 140% at 24% 12%,
		rgba(10, 11, 13, .86) 0%,
		rgba(10, 11, 13, .62) 40%,
		rgba(10, 11, 13, .22) 66%,
		rgba(10, 11, 13, 0) 84%);
	pointer-events: none;
}

.kopf img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 52%;
	z-index: -2;
}

/* Zwei Schleier tragen den Kontrast.
 *
 * Der senkrechte dunkelt nach unten ab, der waagrechte die linke
 * Haelfte, wo die Schrift steht. Zusammen kommen sie hinter der
 * Ueberschrift auf rund 0,7 Deckung, und das reicht auch auf einem
 * Foto, das dort fast weiss ist.
 *
 * Ein einzelner senkrechter Verlauf wie in der Referenz genuegt
 * nicht: gemessen ueber acht Seiten lag die Ueberschrift zwischen
 * 1,4 und 3,2 zu 1, gefordert sind 3,0 fuer grosse Schrift und 4,5
 * fuer den Vorspann. Der Grund ist, dass die Ueberschrift oben im
 * Textblock steht, dort also, wo ein Verlauf von unten noch duenn
 * ist. Rechts bleibt das Foto frei, dort steht nichts.
 */
.kopf::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(100deg,
			rgba(10, 11, 13, .84) 0%,
			rgba(10, 11, 13, .60) 40%,
			rgba(10, 11, 13, .12) 70%,
			rgba(10, 11, 13, 0) 88%),
		/* Oben dunkler als der Hero (.74, .68 bei 8 %): dort liegt die
		   Kopfzeile weiss auf dem Foto. Mit .66 lag die Sprachwahl auf
		   neun Seiten unter 4,5 zu 1, mit .74 auf dreien; seit dem
		   17. September steht sie in vollem Weiss, und .74 bleibt. */
		linear-gradient(180deg,
			rgba(10, 11, 13, .74) 0%,
			rgba(10, 11, 13, .68) 8%,
			rgba(10, 11, 13, .36) 22%,
			rgba(10, 11, 13, .52) 56%,
			rgba(10, 11, 13, .86) 100%);
}

/* Die Brotkrume heisst im Theme .brotkrumen, nicht .krume wie in
   der Referenz. Ohne diesen Namen blieb sie in --mu, also in
   gedaempftem Schwarz auf dem Foto, und war nicht zu lesen. */
.kopf .brotkrumen {
	/* Damit die Krume im dunklen Teil des Schleiers bleibt. Auf
	   /soelden/winter/ lief sie mit drei Stufen weit nach rechts
	   ins helle Foto und lag dort bei 1,6 zu 1. */
	max-width: 46ch;
	color: var(--we);
	text-shadow: 0 .0625rem 1rem rgba(0, 0, 0, .55);
	margin-bottom: 0;
}
.kopf .brotkrumen a:hover { color: var(--we); }
.kopf .brotkrumen [aria-current] { color: var(--we); }

.kopf h1 {
	font-size: clamp(2.25rem, 6.6vw, 5.5rem);
	letter-spacing: -.042em;
	line-height: .98;
	max-width: 16ch;
	text-shadow: 0 .0625rem 2.5rem rgba(0, 0, 0, .35);
}

.kopf .lead {
	margin-top: var(--s4);
	max-width: 46ch;
	font-size: clamp(1rem, 1.2vw, 1.125rem);
	line-height: 1.5;
	color: rgba(255, 255, 255, .86);
	text-shadow: 0 .0625rem 1.5rem rgba(0, 0, 0, .4);
}

/* Eckdaten als Haarlinienreihe im Bild. Fehlen sie, faellt die
   Reihe weg, ohne dass ein Loch entsteht: der Kopf wird flacher. */
.kopf__fakten {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s6);
	margin-top: var(--s5);
	padding-top: var(--s4);
	border-top: 1px solid rgba(255, 255, 255, .28);
}

.kopf__wert {
	font-weight: var(--gw-normal);
	font-size: 1.375rem;
	letter-spacing: -.03em;
	line-height: 1.1;
}

.kopf__bez {
	margin-top: var(--s1);
	font-size: var(--t-kick);
	line-height: 1;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
}

/* Die Zeile aus Eckdaten und Preis. Der Preis steht rechts, am
   Handy unter den Eckdaten. */
.kopf__zeile {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--s5);
	flex-wrap: wrap;
}
.kopf__preis {
	text-align: right;
	font-size: .8125rem;
	color: rgba(255, 255, 255, .7);
	max-width: 34ch;
}
.kopf__preis b {
	display: block;
	font-weight: var(--gw-normal);
	font-size: 1.5rem;
	letter-spacing: var(--lw-preis);
	color: var(--we);
}

/* Ohne Faktenzeile ist der Kopf schlanker: 42svh statt 58svh, beides
   aus idee-kopf-im-bild.html. Am Inhalt, nicht an einer Klasse. */
.kopf:not(:has(.kopf__fakten)) { min-height: clamp(19rem, 42svh, 28rem); }

/* ── Kopf auf Papier ────────────────────────────────────── */
/* Vorbild: 03_Design/final/idee-buchen.html .kopf. Fuer jede Seite
   ohne Kopfbild: die Buchungsseite und die Rechtsseiten. Links
   Brotkrume, Ueberschrift, ein Satz in --mu; rechts, wenn die Seite
   ihn traegt, die Nummer gross. Haarlinie unten.

   Die Kopfzeile steht fest ueber der Seite und hat hier kein Bild
   unter sich: --kopf plus --s5 sind der Abstand, den ein Kopf im
   Bild von selbst hat. */
.kopf-papier {
	border-bottom: 1px solid var(--ln);
}
.kopf-papier__g {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--s5);
	padding-block: calc(var(--kopf) + var(--s5)) var(--s4);
}
.kopf-papier h1 {
	font-size: clamp(2rem, 4vw, 3.25rem);
	letter-spacing: -.04em;
	line-height: 1;
}
.kopf-papier .lead {
	margin-top: var(--s2);
	max-width: 52ch;
	color: var(--mu);
}
.kopf-papier__ruf {
	flex: none;
	margin: 0;
	text-align: right;
}
.kopf-papier__nummer {
	display: block;
	font-size: clamp(1.125rem, 1.6vw, 1.5rem);
	letter-spacing: -.025em;
}
.kopf-papier__bez {
	display: block;
	margin-top: var(--s1);
	font-size: var(--t-kick);
	font-weight: var(--gw-halb);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mu);
}

@media (max-width: 61.25rem) {

	.kopf {
		min-height: clamp(20rem, 58svh, 30rem);
		padding-block: calc(var(--kopf) + var(--s4)) var(--s5);
	}
	.kopf h1 { max-width: none; }

	.kopf__fakten {
		gap: var(--s5);
		margin-top: var(--s4);
		padding-top: var(--s3);
	}
	.kopf__wert { font-size: 1.125rem; }
	.kopf__bez { font-size: .625rem; letter-spacing: .1em; }
	/* Der Preis steht unter den Eckdaten, nicht daneben. Nebeneinander
	   haengt sein Abstand zur Ueberschrift davon ab, wie viele
	   Eckdaten eine Wohnung hat: beim Soeldenkogel waren es 21 Pixel,
	   bei den anderen 32. */
	.kopf__zeile {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--s4);
	}
	.kopf__preis { text-align: left; }

	.kopf-papier__g {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--s4);
		padding-block: calc(var(--kopf) + var(--s4)) var(--s4);
	}
	.kopf-papier__ruf { text-align: left; }
}

/* ── Brotkrumen ─────────────────────────────────────────── */
.brotkrumen {
	font-size: var(--t-winzig);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mu);
	margin-bottom: var(--s3);
}
.brotkrumen ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s1);
}
/* Tippflaeche 44 Pixel, ohne dass die Zeile hoeher wird. Das
   negative Aussenmass zieht die Zeile wieder auf ihre Texthoehe
   zusammen; angefasst wird trotzdem die volle Flaeche. */
.brotkrumen a,
.brotkrumen span {
	display: inline-flex;
	align-items: center;
	min-height: var(--tippflaeche);
	margin-block: -12px;
}
.brotkrumen li + li::before {
	content: "·";
	margin-right: 10px;
	color: var(--ln);
}
.brotkrumen a { transition: color .3s; }
.brotkrumen a:hover { color: var(--tx); }
.brotkrumen [aria-current] { color: var(--tx); }

/* ── Dritte Ueberschriftenstufe ─────────────────────────── */
.d3 {
	font-weight: var(--gw-normal);
	font-size: var(--t-name);
	line-height: 1.1;
	letter-spacing: var(--lw-name);
}
.d3 em {
	font-style: normal;
	font-weight: var(--gw-normal);
	color: var(--mu);
}

/* ── Fliesstext ─────────────────────────────────────────── */
/* Fliesstext ist schwarz. Grau war er nicht zu lesen. */
.fliesstext {
	max-width: 68ch;
	font-size: var(--t-lead);
	line-height: 1.75;
	color: var(--tx);
}
/* Auch der Fliesstext haelt sich an die Skala. 1.1em waren
   19 Pixel, also ein Wert, den es sonst nirgends gibt. */
.fliesstext > * + * { margin-top: var(--s4); }
.fliesstext h2,
.fliesstext h3 {
	color: var(--tx);
	font-weight: var(--gw-normal);
	letter-spacing: var(--lw-name);
	line-height: 1.15;
	margin-top: var(--s6);
}
.fliesstext h2 { font-size: var(--t-name); }
.fliesstext h3 { font-size: clamp(20px, 1.9vw, 26px); }
.fliesstext strong {
	color: var(--tx);
	font-weight: var(--gw-halb);
}
/* Kein Blau im Satz. Der Verweis traegt eine Haarlinie, beim
   Ueberfahren wird sie blau: das ist eine der drei Stellen, an denen
   Blau erlaubt bleibt. */
.fliesstext a {
	color: inherit;
	box-shadow: inset 0 -1px 0 var(--ln);
	transition: box-shadow .3s var(--e);
}
.fliesstext a:hover { box-shadow: inset 0 -1px 0 var(--tx); }
.fliesstext ul { max-width: 58ch; }
.fliesstext li {
	padding-left: 20px;
	position: relative;
	padding-block: 3px;
}
.fliesstext li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 15px;
	width: 8px;
	height: 1px;
	background: var(--tx);
}

/* ── Kleingedrucktes ────────────────────────────────────── */
.meta {
	font-size: var(--t-klein);
	color: var(--mu);
	margin-top: var(--s2);
}
.meta a {
	color: var(--tx);
	display: inline-flex;
	align-items: center;
	min-height: var(--tippflaeche);
}

/* ── Knopfreihe ─────────────────────────────────────────── */
.knopfreihe {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	margin-top: var(--s5);
}


/* ── Verweisreihe am Ende eines Abschnitts ──────────────── */
/* Textlinks nebeneinander, keine Knoepfe. Ein gefuellter Knopf am
   Ende einer Seite, ohne Satz daneben, war der schlechteste Zustand
   der ersten Fassung: viel Flaeche, ein einzelnes Element darin.
   Steht hier und nicht im Baustein Text, weil die Appartementseite
   dieselbe Reihe braucht und den Baustein nicht laedt. */
.text__wege {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2) clamp(var(--s4), 2.6vw, var(--s6));
	margin-top: var(--s4);
	font-size: var(--t-mittel);
}

/* ── Eckdatenreihe auf der Appartementseite ─────────────── */
.stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--r-mittel);
	border-block: 1px solid var(--ln);
	padding-block: var(--s5);
}
.stats dd {
	display: flex;
	flex-direction: column;
	gap: var(--s1);
}
.stats b {
	font-weight: var(--gw-normal);
	font-size: var(--t-zahl);
	line-height: 1;
	color: var(--tx);
	letter-spacing: var(--lw-name);
}
.stats span {
	font-size: var(--t-winzig);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--mu);
}

@media (max-width: 980px) {
	.stats { grid-template-columns: 1fr 1fr; }
}


/* ── Seite nicht gefunden ───────────────────────────────── */
/* Der Abstand nach oben ist derselbe wie beim Seitenkopf: die feste
   Kopfleiste ist 68 Pixel hoch, darunter beginnt der Inhalt. Vorher
   fehlte er ganz und die Ueberschrift steckte hinter der Leiste. */
.fehlerseite {
	padding-block: calc(var(--kopf) + var(--s7)) var(--s8);
}
.fehlerseite__innen { max-width: 62ch; }
.fehlerseite .lead { margin-top: var(--s3); }

/* Die Ziele als Haarlinienliste, wie die Faktenlisten auf den
   Saisonbloecken. Beim Ueberfahren rueckt die Zeile ein Stueck
   nach rechts, das ist die einzige Bewegung. */
.fehlerseite__wege {
	list-style: none;
	margin-top: var(--s5);
	border-top: 1px solid var(--ln);
}
.fehlerseite__wege li { border-bottom: 1px solid var(--ln); }
.fehlerseite__wege a {
	display: flex;
	align-items: center;
	min-height: 56px;
	font-size: var(--t-lead);
	font-weight: var(--gw-halb);
	transition: padding-left .4s var(--e), color .4s var(--e);
}
.fehlerseite__wege a:hover,
.fehlerseite__wege a:focus-visible {
	padding-left: 10px;
	color: var(--tx);
}

/* Knoepfe mit Abstand zum Fuss, nicht daran geklebt. */
.fehlerseite__aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	margin-top: var(--s7);
}

@media (prefers-reduced-motion: reduce) {
	.fehlerseite__wege a { transition: none; }
}