/* ==========================================================================
   Pension am Schloss — Startseite ohne Page Builder
   --------------------------------------------------------------------------
   HERKUNFT DER GESTALTUNGSWERTE
   Jeder Farbwert stammt aus dem Elementor-Kit der laufenden Site (Kit-ID aus
   elementor_active_kit), gemessen am 21.09.2026 — nichts ist erfunden und
   nichts aus einem anderen Projekt uebernommen:

     Primary        #23A455   -> --pas-ci
     Dunkelgruen    #495338   -> --pas-park
     hellbraun      #d3b574   -> --pas-messing
     hellgrau fuss  #D7D7D7
     Schrift Text   Jost      -> --pas-sans
     Schrift Titel  PT Serif  -> --pas-serif

   WARUM DER KNOPF NICHT #23A455 IST
   Weisse Schrift auf #23A455 ergibt 3,22:1. Fuer normalen Text sind 4,5:1
   noetig — der Text verschwindet in der Flaeche. Statt die Marke zu wechseln,
   wurde derselbe Farbton (HSL 143°/65 %) abgedunkelt bis der Kontrast stimmt:
   #176D39 = 6,40:1. Es ist dasselbe Gruen, nur benutzbar.

   ALLE PAARE SIND GERECHNET, NICHT GESCHAETZT
     Weiss auf --pas-tat        6,40:1
     Weiss auf --pas-tat-hover  9,01:1
     Weiss auf --pas-tief      14,97:1
     Messing auf --pas-tief     7,58:1
     --pas-ink auf Weiss       16,40:1
     --pas-text auf Weiss      10,41:1
     --pas-leise auf Weiss      6,28:1
     --pas-tat auf Weiss        6,40:1
     Sterne auf Weiss           6,07:1   (vorher #f0a500 = 2,08:1, durchgefallen)

   ABSTAENDE
   Eine einzige Skala, 4 bis 128, keine Zwischenwerte. Gleiche Ebene = gleicher
   Abstand. Der Rhythmus entsteht durch die Wahl der Stufe, nicht durch krumme
   Pixelwerte.
   ========================================================================== */

/* ---------- Schriften: ausschliesslich lokal, nie von Google ------------- */

@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("fonts/jost-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
	               U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
	               U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("fonts/jost-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
	               U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
	               U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "PT Serif";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/ptserif-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
	               U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
	               U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "PT Serif";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/ptserif-700-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
	               U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
	               U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "PT Serif";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/ptserif-400-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
	               U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
	               U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "PT Serif";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/ptserif-700-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
	               U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
	               U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------- Marken-Werte ------------------------------ */

:root {
	/* Flaechen dunkel */
	--pas-tief:        #1e2a1c;
	--pas-tief-2:      #273524;
	--pas-park:        #495338;   /* CI Dunkelgruen */

	/* Handlung */
	--pas-tat:         #176d39;   /* CI-Farbton, auf lesbare Helligkeit gebracht */
	--pas-tat-hover:   #12542c;
	--pas-ci:          #23a455;   /* CI Primary — nur als Signal auf Dunkel */

	/* Akzent */
	--pas-messing:     #d3b574;   /* CI hellbraun — nur auf Dunkel */
	--pas-messing-t:   #7a5e28;   /* dasselbe Messing, dunkel genug fuer Hell */

	/* Schrift auf Hell */
	--pas-ink:         #1c2118;
	--pas-text:        #3b4235;
	--pas-leise:       #5a6353;

	/* Flaechen hell */
	--pas-weiss:       #ffffff;
	--pas-dunst:       #f2f4ef;   /* gruen getoent, bewusst kein Creme */
	--pas-linie:       #dce0d6;
	--pas-linie-dkl:   rgba(211, 181, 116, .28);

	/* Abstandsskala — eine einzige, keine Zwischenwerte */
	--pas-4:   4px;   --pas-8:   8px;   --pas-12:  12px;  --pas-16:  16px;
	--pas-24: 24px;   --pas-32: 32px;   --pas-48:  48px;  --pas-64:  64px;
	--pas-96: 96px;   --pas-128: 128px;

	/* Formensprache — vier Werte, mehr nicht */
	--pas-r-klein:  6px;
	--pas-r:       12px;
	--pas-r-gross: 20px;
	--pas-r-pille: 999px;

	--pas-breite:       1200px;
	--pas-breite-text:  68ch;   /* Zeilenlaenge bleibt lesbar */

	--pas-sans:  "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
	--pas-serif: "PT Serif", Georgia, "Times New Roman", serif;

	/* Bewegung — exponentielles Ausklingen, kein Federn */
	--pas-eas:   cubic-bezier(.22, 1, .36, 1);
	--pas-eas-k: cubic-bezier(.33, 1, .68, 1);

	/* Ebenen — benannt, nie 9999 */
	/* Ueber JEDEM Seiteninhalt — auch ueber eingebetteten Bausteinen wie der
	   Karte (Leaflet bis 1000) —, aber unter HBooks Kalender (99999) und dem
	   Einwilligungsdialog (100000). Bis 09.10.2026 standen hier 30/40/60;
	   die Kartenebenen (200–1000) lagen dadurch ueber der schwebenden Leiste. */
	--pas-z-kopf:   9000;
	--pas-z-fliege: 9500;
	--pas-z-sprung: 9900;

	/* Der Haken als eingebettete Grafik — EIN Pfad, an drei Stellen benutzt.
	   Als Maske, damit `currentColor` durchschlaegt und das Zeichen die Farbe
	   seines Textes traegt. */
	--pas-haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E");
}

/* ------------------------------ Grundlage -------------------------------- */

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

/* KEIN `scroll-behavior: smooth` am html.
   Es klingt nach der Loesung, ist hier aber die Ursache: Die Sprungmarken
   werden per JavaScript Bild fuer Bild gefahren, und jeder dieser Schritte
   wuerde vom Browser noch einmal einzeln geglaettet. Aus zwei Glaettungen
   uebereinander wird kein weicherer Lauf, sondern ein zaehes Nachziehen mit
   sichtbaren Rucken. Die Fahrt macht `sanftFahren()` allein. */
html { scroll-padding-top: 96px; }

body.pas-proto {
	margin: 0;
	font-family: var(--pas-sans);
	font-size: 17px;
	line-height: 1.65;
	color: var(--pas-text);
	background: var(--pas-weiss);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* KEIN overflow-x:hidden am body.
	   CSS erlaubt nicht, dass eine Achse `visible` und die andere `hidden`
	   ist — es rechnet die zweite mit. Der body wurde dadurch zum
	   klippenden Container, und JEDER IntersectionObserver hoerte auf zu
	   feuern: die schwebende Leiste erschien nie, die Kopfzeile schaltete
	   nie um, kein Ankerpunkt wurde markiert. Am lebenden Dokument
	   nachgemessen (`gefeuert: false`), nicht vermutet.
	   Noetig war die Zeile ohnehin nicht: die Parallaxe verschiebt nur
	   senkrecht, und `.pas-hero` klippt selbst. */
}

/* GRUNDSTILE STEHEN IN :where() — Spezifitaet null.
 *
 * Das ist keine Spielerei, sondern die Lehre aus drei gleichartigen
 * Fehlern an dieser Seite. Eine Grundregel wie `.pas-proto h2` hat die
 * Spezifitaet (0,1,1) und schlaegt damit JEDE einzelne Bauteil-Klasse
 * (0,1,0). Nacheinander sind daran gescheitert:
 *   1. `.pas-knopf`       — gruene Schrift auf gruenem Knopf, 1,00:1
 *   2. `.pas-fliege__tat` — gruen auf gruen, 1,98:1
 *   3. `.pas-band__spruch`— dunkelgruene Ueberschrift auf dem Foto
 * Jedes Mal war die Rechnung im Bauteil richtig und wurde von der
 * Grundregel ueberstimmt. Mit `:where()` faellt die Spezifitaet der
 * Grundregel auf null: Ein Bauteil gewinnt ab jetzt immer, unabhaengig
 * von der Reihenfolge im Stylesheet. */
:where(.pas-proto h1, .pas-proto h2, .pas-proto h3) {
	font-family: var(--pas-serif);
	color: var(--pas-ink);
	margin: 0 0 var(--pas-16);
	font-weight: 700;
	text-wrap: balance;
}
:where(.pas-proto h1) {
	font-size: clamp(2.5rem, 1.7rem + 3.4vw, 4.25rem);   /* max 68px, unter der 96px-Grenze */
	line-height: 1.04;
	letter-spacing: -.02em;                               /* ueber der -0.04em-Grenze */
}
:where(.pas-proto h2) {
	font-size: clamp(1.875rem, 1.45rem + 1.8vw, 2.75rem);
	line-height: 1.12;
	letter-spacing: -.015em;
	margin-bottom: var(--pas-24);
}
:where(.pas-proto h3) {
	font-family: var(--pas-sans);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
	margin-bottom: var(--pas-8);
}
:where(.pas-proto p) { margin: 0 0 var(--pas-16); text-wrap: pretty; }
:where(.pas-proto p:last-child) { margin-bottom: 0; }
/* NUR klassenlose Links im Fliesstext bekommen die Linkfarbe.
   Vorher stand hier `.pas-proto a` — Spezifitaet (0,1,1). Das schlug jede
   Bauteil-Klasse wie `.pas-knopf` (0,1,0) und faerbte die Knopfschrift
   gruen: gruene Schrift auf gruenem Knopf, 1,00:1, faktisch unsichtbar.
   Der Karten-Knopf blieb korrekt, weil er ein <button> ist und kein <a> —
   daran war der Fehler zu erkennen.
   `:where()` setzt die Spezifitaet auf null und `:not([class])` grenzt die
   Regel auf genau die Links ein, fuer die sie gedacht ist. Damit kann sie
   kein Bauteil mehr uebersteuern, unabhaengig von der Reihenfolge. */
/* KEINE UNTERSTREICHUNG — nirgends, in keinem Zustand.
   Unterschieden werden Links ueber Farbe und Gewicht, und dort, wo es auf
   die Handlung ankommt, ueber die Knopfform. */
.pas-proto :where(a:not([class])) { color: var(--pas-tat); font-weight: 600; }
.pas-proto a,
.pas-proto a:hover,
.pas-proto a:focus,
.pas-proto a:visited { text-decoration: none; }

.pas-proto :focus-visible {
	outline: 3px solid var(--pas-tat);
	outline-offset: 3px;
	border-radius: var(--pas-r-klein);
}

img { max-width: 100%; height: auto; }

/* Nichts klebt am Rand — der Seitenabstand gilt auf jeder Breite */
.pas-breite {
	width: 100%;
	max-width: var(--pas-breite);
	margin-inline: auto;
	padding-inline: var(--pas-32);
}
@media (max-width: 640px) { .pas-breite { padding-inline: var(--pas-16); } }

.pas-sprung {
	position: absolute; left: -9999px;
	background: var(--pas-ink); color: #fff;
	padding: var(--pas-12) var(--pas-16);
	border-radius: var(--pas-r-klein);
	text-decoration: none;
}
.pas-sprung:focus { left: var(--pas-16); top: var(--pas-16); z-index: var(--pas-z-sprung); }

.pas-nur-sr {
	position: absolute; width: 1px; height: 1px;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* =========================== Kopfzeile ================================== */
/* Ueber dem Hero-Foto: durchsichtig mit heller Schrift. Sobald gescrollt
   wird, wird sie zur weissen Leiste. Beide Zustaende sind geprueft:
   Weiss auf dem abgedunkelten Foto und --pas-ink auf Weiss. */

.pas-kopf {
	position: fixed; inset: 0 0 auto;
	z-index: var(--pas-z-kopf);
	transition: background-color .35s var(--pas-eas), box-shadow .35s var(--pas-eas);
}
/* Gemessen: Ueber dem hellsten Punkt des Himmels lag das weisse Menue bei
   4,43:1 — knapp unter den noetigen 4,5:1. Statt das ganze Foto dunkler zu
   machen (und damit das Schloss zu verlieren) bekommt nur der Kopfstreifen
   einen eigenen, nach unten auslaufenden Schleier. */
.pas-kopf::before {
	content: "";
	position: absolute; inset: 0 0 auto; height: 172px;
	background: linear-gradient(180deg,
		rgba(30,42,28,.58) 0%,
		rgba(30,42,28,.26) 58%,
		rgba(30,42,28,0) 100%);
	pointer-events: none;
	transition: opacity .35s var(--pas-eas);
}
.pas-kopf.ist-fest::before { opacity: 0; }

/* MOBILE FIRST: Am Telefon stehen Logo und Telefon in der ersten Zeile,
   die Navigation darunter und laesst sich seitlich schieben. Vorher war
   hier nur die Desktop-Zeile definiert — bei 390 px stapelte sich das
   Menue senkrecht, der Kopf wurde 264 px hoch und das Logo auf 14 px
   Breite gequetscht. Gemessen, nicht geschaetzt. */
.pas-kopf__reihe {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"logo tel"
		"nav  nav";
	align-items: center;
	column-gap: var(--pas-12);
	row-gap: var(--pas-4);
	padding-block: var(--pas-8);
}

.pas-kopf__logo {
	grid-area: logo;
	display: flex; align-items: center;
	min-height: 44px;   /* Tippziel: das Bild misst 34 px, der Link muss 44 haben */
}
.pas-kopf__logo img {
	display: block;
	height: 34px;
	width: auto;
	max-width: none;      /* sonst quetscht das Raster das Logo zusammen */
	flex: 0 0 auto;
	transition: filter .35s var(--pas-eas), height .35s var(--pas-eas);
	filter: brightness(0) invert(1);   /* ueber dem Foto: weiss */
}

.pas-kopf__nav { grid-area: nav; min-width: 0; }

.pas-menue {
	display: flex; align-items: center;
	gap: var(--pas-4);
	list-style: none; margin: 0; padding: 0;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
	/* Die Randabstaende bleiben erhalten, obwohl die Reihe bis an die
	   Kante scrollen darf — nichts klebt am Rand. */
	margin-inline: calc(var(--pas-16) * -1);
	padding-inline: var(--pas-16);
}
.pas-menue::-webkit-scrollbar { display: none; }
.pas-menue li { flex: 0 0 auto; }

/* Markierungen sind eingerueckt und rund — nie randlos bis an die Kante */
.pas-menue a {
	display: flex; align-items: center; justify-content: center;
	min-height: 40px;
	padding: var(--pas-8) var(--pas-16);
	border-radius: var(--pas-r-pille);
	text-decoration: none;
	color: #fff; font-weight: 500;
	white-space: nowrap;
	transition: background-color .2s var(--pas-eas), color .2s var(--pas-eas);
}
.pas-menue a:hover { background: rgba(255,255,255,.16); }
.pas-menue a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

/* Am Telefon nur das Hoerersymbol — die Nummer braucht 130 px, die hier
   niemand hat. Der Linkname bleibt ueber aria-label erhalten, der Anruf
   funktioniert unveraendert. */
.pas-kopf__tel {
	grid-area: tel;
	justify-self: end;
	display: inline-flex; align-items: center; justify-content: center;
	gap: var(--pas-8);
	min-width: 44px; min-height: 44px;
	padding: 0;
	border: 1px solid rgba(255,255,255,.4);
	border-radius: var(--pas-r-pille);
	white-space: nowrap; font-weight: 600; text-decoration: none;
	color: #fff;
	transition: background-color .2s var(--pas-eas), border-color .2s var(--pas-eas), color .2s var(--pas-eas);
}
.pas-kopf__tel:hover { background: rgba(255,255,255,.16); }
.pas-kopf__telnr { display: none; }
.pas-kopf__telicon { font-size: 1.125rem; }

/* Ab Tablet: die Nummer wird ausgeschrieben. */
@media (min-width: 600px) {
	.pas-kopf__tel { min-width: 0; padding: var(--pas-8) var(--pas-16); }
	.pas-kopf__telnr { display: inline; }
	.pas-kopf__telicon { font-size: 1rem; }
}

/* Ab Desktop: alles in eine Zeile. */
@media (min-width: 900px) {
	.pas-kopf__reihe {
		display: flex;
		align-items: center;
		gap: var(--pas-24);
		min-height: 80px;
		padding-block: 0;
	}
	.pas-kopf__logo img { height: 46px; }
	.pas-kopf__nav { margin-left: auto; }
	.pas-menue { overflow-x: visible; margin-inline: 0; padding-inline: 0; flex-wrap: wrap; }
}

/* Heller Zustand: gescrollt ODER eine Seite ohne Foto darunter.
 *
 * EIN Kopf, zwei Zustaende — kein zweiter Header (Frage Dimi, 30.09.2026).
 * Bis 0.7.1 setzte `.pas-proto--heller-kopf` nur den weissen Hintergrund.
 * Der dunkle Verlauf aus ::before, die weisse Schrift und das weiss
 * gefilterte Logo blieben stehen: ein graues Band mit weisser Schrift auf
 * Weiss. Jetzt gilt auf Seiten ohne Foto von Anfang an genau der Zustand,
 * den die Startseite nach dem Scrollen annimmt. Das Logo ist dann das
 * Original (ID 3434, farbig) — der Filter entfaellt, nichts ist nachgebaut. */
.pas-kopf.ist-fest,
.pas-proto--heller-kopf .pas-kopf {
	background: rgba(255,255,255,.92);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	box-shadow: 0 1px 0 var(--pas-linie), 0 8px 28px rgba(30,42,28,.07);
}
.pas-proto--heller-kopf .pas-kopf::before { opacity: 0; }
.pas-kopf.ist-fest .pas-kopf__logo img,
.pas-proto--heller-kopf .pas-kopf__logo img { filter: none; }
.pas-kopf.ist-fest .pas-menue a,
.pas-proto--heller-kopf .pas-menue a { color: var(--pas-ink); }
.pas-kopf.ist-fest .pas-menue a:hover,
.pas-proto--heller-kopf .pas-menue a:hover { background: var(--pas-dunst); color: var(--pas-tat); }
.pas-kopf.ist-fest .pas-menue a:focus-visible,
.pas-proto--heller-kopf .pas-menue a:focus-visible { outline-color: var(--pas-tat); }
.pas-kopf.ist-fest .pas-kopf__tel,
.pas-proto--heller-kopf .pas-kopf__tel { color: var(--pas-ink); border-color: var(--pas-linie); }
.pas-kopf.ist-fest .pas-kopf__tel:hover,
.pas-proto--heller-kopf .pas-kopf__tel:hover { background: var(--pas-dunst); border-color: var(--pas-tat); color: var(--pas-tat); }

/* ============== Seiten ohne Hero-Foto (Rechtstexte, Kontakt) ============ */
/* Die Kopfzeile ist `position: fixed`. Auf der Startseite schiebt der Hero
   den Inhalt mit seinem eigenen Innenabstand darunter weg. Seiten ohne Foto
   brauchen diesen Abstand selbst — sonst liegt die erste Überschrift unter
   der Leiste und niemand sieht sie. */

body.pas-proto--heller-kopf { padding-top: 108px; }
@media (min-width: 900px) { body.pas-proto--heller-kopf { padding-top: 80px; } }

/* Ohne Foto darunter ist die Kopfzeile von Anfang an die weiße Leiste —
   siehe „Heller Zustand" weiter oben. */

/* Der Seitenkopf einer Unterseite: Titel und ein Satz, mehr nicht. */
.pas-seitenkopf { padding-block: var(--pas-64) var(--pas-32); }
.pas-seitenkopf h1 {
	/* Untergrenze 1,625rem statt 2rem: „Datenschutzerklärung" (329 px) und
	   „Nutzungsbedingungen" (335 px) passten bei 320 px nicht in die 288 px
	   Spalte und schoben die ganze Seite waagerecht (gemessen am 01.10.2026).
	   Bei 320 px ergibt die Formel 25,9 px, ab ca. 1000 px greift die 3rem-Grenze. */
	font-size: clamp(1.625rem, .9rem + 3.6vw, 3rem);
	margin-bottom: var(--pas-16);
}
/* Sicherung fuer jedes noch laengere Wort: trennen statt ueberlaufen. */
:where(h1, h2, h3, h4) { overflow-wrap: break-word; hyphens: auto; }
.pas-seitenkopf p { color: var(--pas-leise); max-width: var(--pas-breite-text); margin: 0; }

/* ---- Fließtext einer Rechtsseite --------------------------------------
   Rechtstexte werden gelesen, nicht überflogen. Deshalb eine ruhige,
   schmale Spalte und großzügige Abstände zwischen den Abschnitten —
   und keine Gestaltung, die vom Inhalt ablenkt. */

.pas-fliesstext {
	max-width: var(--pas-breite-text);
	padding-bottom: var(--pas-96);
}
.pas-fliesstext h2 {
	font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem);
	margin-top: var(--pas-48);
	margin-bottom: var(--pas-12);
}
.pas-fliesstext h3 {
	font-family: var(--pas-serif);
	font-size: 1.1875rem;
	margin-top: var(--pas-32);
	margin-bottom: var(--pas-8);
	color: var(--pas-ink);
}
.pas-fliesstext h2:first-child, .pas-fliesstext h3:first-child { margin-top: 0; }
.pas-fliesstext p { margin-bottom: var(--pas-16); }
.pas-fliesstext ul, .pas-fliesstext ol { margin: 0 0 var(--pas-16); padding-left: var(--pas-24); }
.pas-fliesstext li { margin-bottom: var(--pas-8); }
.pas-fliesstext table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--pas-24);
	font-size: .9375rem;
}
.pas-fliesstext th, .pas-fliesstext td {
	padding: var(--pas-12) var(--pas-16);   /* kein Zeichen klebt an der Kante */
	border-bottom: 1px solid var(--pas-linie);
	text-align: left;
	vertical-align: top;
}
.pas-fliesstext th { font-weight: 600; color: var(--pas-ink); }
.pas-fliesstext a { color: var(--pas-tat); font-weight: 600; }
/* Lange Webadressen (Datenschutz: 608 px bei 390 px Bildschirmbreite) duerfen
   mitten im Wort umbrechen, statt die ganze Seite waagerecht zu schieben. */
.pas-fliesstext { overflow-wrap: anywhere; }

/* Zwei Spalten ab 1024 px (Vorgabe Dimi, 09.10.2026: Impressum, AGB,
   Datenschutz, WLAN). Mobile First: darunter eine Spalte. Der Text fliesst
   ueber die volle Inhaltsbreite statt in der schmalen Lesespalte — jede
   Spalte ist fuer sich wieder lesbar schmal (~540 px bei 1136 px).
   Ueberschriften bleiben bei ihrem Absatz, Tabellen, Listenpunkte und
   Absaetze werden nicht ueber zwei Spalten zerrissen. */
@media (min-width: 1024px) {
	.pas-fliesstext--spalten {
		max-width: none;
		column-count: 2;
		column-gap: var(--pas-64);
	}
	.pas-fliesstext--spalten h2,
	.pas-fliesstext--spalten h3 { break-after: avoid; }
	.pas-fliesstext--spalten p,
	.pas-fliesstext--spalten li,
	.pas-fliesstext--spalten table,
	.pas-fliesstext--spalten address { break-inside: avoid; }
}

/* Ohne Sprungmarken zeigt die Leiste nur die Handlung. */
/* `1fr auto` gab die flexible Spalte dem TELEFON-Knopf (44 px) und die Breite
   der Handlung dem Inhalt: bei 320 px ragte die Leiste 2 px ueber den Rand
   (gemessen auf /wlan-nutzungsbedingungen/). Jetzt: Telefon schmal, die
   Handlung fuellt den Rest und darf nicht breiter werden als er. */
.pas-fliege--nur-tat .pas-fliege__glas { grid-template-columns: auto minmax(0, 1fr); }
@media (min-width: 720px) { .pas-fliege--nur-tat .pas-fliege__glas { grid-template-columns: auto; } }

/* ============================== Hero ==================================== */

.pas-hero {
	position: relative;
	display: flex; flex-direction: column; justify-content: flex-end;
	min-height: min(86vh, 740px);
	padding-top: var(--pas-128);
	padding-bottom: var(--pas-96);
	background: var(--pas-tief);   /* steht sofort, auch bevor das Foto da ist */
	overflow: hidden;
	isolation: isolate;
}
.pas-hero__bild {
	position: absolute; inset: -8% 0;   /* Reserve fuer die Parallaxe */
	z-index: -2;
}
/* Die Fotos liegen uebereinander und werden ueberblendet.
   Das ERSTE traegt die Klasse `ist-da` schon im HTML — ohne JavaScript
   steht es damit einfach da. Kein per Skript versteckter Hero. */
.pas-hero__foto {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; object-position: center 58%;
	display: block;
	opacity: 0;
	transition: opacity 1.1s var(--pas-eas);
}
.pas-hero__foto.ist-da { opacity: 1; }

/* Das Video fuellt denselben Rahmen wie ein Foto — gleiche Regeln, damit
   der Wechsel zwischen beiden nicht springt. */
.pas-hero__video { object-fit: cover; object-position: center 58%; }

@media (prefers-reduced-motion: reduce) {
	.pas-hero__foto { transition: opacity .01ms; }
}

/* ---- Steuerung der Bilderfolge ---------------------------------------- */

/* MOBILE FIRST: oben rechts, dicht unter der Kopfzeile.
   Unten rechts lag sie am Telefon ueber der Zeile "0 € Parkplatz im
   eigenen Innenhof" — gemessen, nicht vermutet. Unten ist dort kein Platz:
   Text, Vertrauenszeile und die hereinragende Suchkarte teilen sich die
   wenigen Pixel bereits. */
.pas-hero__steuerung {
	position: absolute;
	right: var(--pas-16);
	top: 120px;
	bottom: auto;
	z-index: 3;
	display: flex; align-items: center; gap: var(--pas-8);
	padding: var(--pas-4);
	border-radius: var(--pas-r-pille);
	background: rgba(30, 42, 28, .55);
	backdrop-filter: blur(12px) saturate(160%);
	-webkit-backdrop-filter: blur(12px) saturate(160%);
	border: 1px solid rgba(255,255,255,.16);
}
/* Ab Tablet ist unten rechts wieder frei — dort stoert sie den Text nicht
   und liegt naeher an der Bilderfolge, die sie steuert. Die Suchkarte ragt
   64 px in den Hero hinein, also muss sie darueber bleiben. */
@media (min-width: 720px) {
	.pas-hero__steuerung {
		right: var(--pas-32);
		top: auto;
		bottom: calc(var(--pas-64) + var(--pas-24));
	}
}

.pas-hero__punkte {
	display: flex; align-items: center; gap: var(--pas-4);
	list-style: none; margin: 0; padding: 0;
}

/* Sichtbar klein, anfassbar gross: der Knopf misst 36 px, der Punkt darin
   8 px. So bleibt das Ziel auch mit dem Daumen treffbar. */
.pas-hero__punkt {
	display: flex; align-items: center; justify-content: center;
	/* 44 px Tippziel bei 8 px sichtbarem Punkt: anfassbar, ohne klobig
	   zu wirken. */
	width: 44px; height: 44px;
	padding: 0; border: 0; border-radius: 50%;
	background: transparent; cursor: pointer;
}
.pas-hero__punkt span {
	display: block; width: 8px; height: 8px;
	border-radius: 50%;
	background: rgba(255,255,255,.5);
	transition: background-color .3s var(--pas-eas), transform .3s var(--pas-eas);
}
.pas-hero__punkt:hover span { background: rgba(255,255,255,.85); }
.pas-hero__punkt.ist-da span { background: var(--pas-messing); transform: scale(1.45); }
.pas-hero__punkt:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

.pas-hero__pause {
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	padding: 0; border: 0; border-radius: 50%;
	background: transparent; color: #fff;
	font-size: 11px; line-height: 1; cursor: pointer;
}
.pas-hero__pause:hover { background: rgba(255,255,255,.16); }
.pas-hero__pause:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.pas-hero__pause .pas-hero__pause-aus { display: none; }
.pas-hero__pause.ist-pausiert .pas-hero__pause-an { display: none; }
.pas-hero__pause.ist-pausiert .pas-hero__pause-aus { display: inline; }
/* Der Verlauf sichert die Lesbarkeit unabhaengig davon, wie hell das Foto
   an der jeweiligen Stelle ist — 14,97:1 gegen die dunkelste Zone. */
/* Gemessen, nicht geschaetzt: Die erste Fassung war zu schwach — die
   Ueberschrift stand ueber der hellen Schlossfassade und der besonnten
   Wiese. Der Schleier ist jetzt so gesetzt, dass die Textzone unten links
   unabhaengig vom Motiv dunkel bleibt. Nachgemessen am gerenderten Bild. */
.pas-hero__schleier {
	position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(180deg,
			rgba(30,42,28,.72)  0%,
			rgba(30,42,28,.34) 26%,
			rgba(30,42,28,.70) 60%,
			rgba(30,42,28,.90) 100%),
		linear-gradient(105deg,
			rgba(30,42,28,.66)  0%,
			rgba(30,42,28,.40) 44%,
			rgba(30,42,28,.04) 80%);
}

/* Ueberschrift und Unterzeile bilden einen Block mit gemeinsamer linker
   Kante und gestaffelter Zeilenbreite — nicht zwei Bloecke mit
   unterschiedlichem Mass, wie in der ersten Fassung. */
.pas-hero__text { max-width: 44ch; margin-bottom: var(--pas-48); }
.pas-hero h1 {
	color: #fff;
	max-width: 13ch;            /* bricht bewusst nach "Uebernachten" */
	margin-bottom: var(--pas-24);
	text-shadow: 0 1px 24px rgba(15,22,14,.45);   /* Reserve, falls das Motiv wechselt */
}
.pas-hero__unter {
	color: rgba(255,255,255,.94);
	font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
	max-width: 42ch;
	margin-bottom: 0;
}

/* Die drei Zahlen: eine Messingleiste, keine Karten. */
/* MOBILE FIRST: untereinander, linksbuendig, ohne Trennstrich.
   Der Strich gehoert zu einer Reihe — sobald sie umbricht, stand er
   ploetzlich LINKS neben dem zweiten Eintrag und schob ihn um 48 px ein.
   Er kommt deshalb erst zurueck, wenn die Reihe auch wirklich eine ist. */
.pas-vertrauen {
	display: flex; flex-direction: column;
	gap: var(--pas-8);
	list-style: none; margin: 0; padding: 0;
}
.pas-vertrauen li {
	display: flex; align-items: baseline; gap: var(--pas-8);
	color: rgba(255,255,255,.88);
	font-size: .9375rem;
}

@media (min-width: 720px) {
	.pas-vertrauen { flex-direction: row; flex-wrap: wrap; gap: var(--pas-16) var(--pas-48); }
	.pas-vertrauen li + li {
		padding-left: var(--pas-48);
		border-left: 1px solid var(--pas-linie-dkl);
	}
}
.pas-vertrauen strong {
	font-family: var(--pas-serif);
	font-size: 1.5rem; font-weight: 700;
	color: var(--pas-messing);
	line-height: 1;
}

/* ---- Suchfeld: liegt bewusst ueber der Kante des Hero-Fotos ------------ */

.pas-suche {
	position: relative;
	margin-top: calc(var(--pas-64) * -1);
	z-index: 2;
}
.pas-suche__feld {
	background: var(--pas-weiss);
	border: 1px solid var(--pas-linie);
	border-radius: var(--pas-r-gross);
	padding: var(--pas-24);
	box-shadow: 0 18px 50px -16px rgba(30,42,28,.28), 0 2px 8px rgba(30,42,28,.06);
}
.pas-suche__marke {
	display: block;
	font-size: .8125rem; font-weight: 600;
	color: var(--pas-leise);
	margin: 0 0 var(--pas-16);
}

/* ============================ Abschnitte ================================ */
/* Der Rhythmus wechselt bewusst: Preise und Haus stehen enger beieinander
   als Lage und Stimmen. Gleiche Skala, unterschiedliche Stufe. */

.pas-abschnitt { padding-block: var(--pas-96); }
.pas-abschnitt--eng { padding-block: var(--pas-64); }
.pas-abschnitt--dunst { background: var(--pas-dunst); }
.pas-abschnitt--tief { background: var(--pas-tief); color: rgba(255,255,255,.88); }
.pas-abschnitt--tief h2 { color: #fff; }

.pas-kopfzeile { max-width: var(--pas-breite-text); margin-bottom: var(--pas-48); }
.pas-kopfzeile p { color: var(--pas-leise); }
.pas-abschnitt--tief .pas-kopfzeile p { color: rgba(255,255,255,.75); }
.pas-fussnote { color: var(--pas-leise); font-size: .9375rem; margin-top: var(--pas-24); }

/* Ein einziges wiederkehrendes Motiv: die Messing-Haarlinie.
   Sie zeichnet sich beim Erreichen des Abschnitts. */
.pas-linie-mess {
	height: 2px; border: 0; margin: 0 0 var(--pas-32);
	background: linear-gradient(90deg, var(--pas-messing-t), var(--pas-linie) 70%, transparent);
	transform-origin: left center;
}
.pas-abschnitt--tief .pas-linie-mess {
	background: linear-gradient(90deg, var(--pas-messing), rgba(211,181,116,.15) 70%, transparent);
}

/* =========================== Zimmer und Preise ========================== */
/* Bewusst KEIN Kartenraster. Wer Preise vergleicht, liest eine Liste —
   untereinander, gleiche Grundlinie, Betrag rechts in einer Flucht. */

.pas-preisliste { list-style: none; margin: 0; padding: 0; }
.pas-preiszeile {
	display: grid;
	grid-template-columns: 112px 1fr auto auto;
	align-items: center;
	gap: var(--pas-24);
	padding: var(--pas-24) var(--pas-16);
	border-radius: var(--pas-r);
	border-top: 1px solid var(--pas-linie);
	transition: background-color .25s var(--pas-eas);
}
.pas-preisliste li:last-child .pas-preiszeile { border-bottom: 1px solid var(--pas-linie); }
/* Die Hervorhebung ist eingerueckt und rund, nie randlos ueber die Breite */
.pas-preiszeile:hover { background: var(--pas-dunst); }

.pas-preiszeile__bild {
	width: 112px; height: 84px;
	border-radius: var(--pas-r-klein);
	overflow: hidden;
	background: var(--pas-dunst);
}
.pas-preiszeile__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pas-preiszeile__ohnebild {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%;
	font-family: var(--pas-serif); font-size: 1.5rem;
	color: var(--pas-messing-t);
	background: var(--pas-dunst);
}

.pas-preiszeile__name { margin: 0; font-family: var(--pas-serif); font-size: 1.25rem; font-weight: 700; color: var(--pas-ink); }
.pas-preiszeile__zu { margin: var(--pas-4) 0 0; font-size: .875rem; color: var(--pas-leise); }

.pas-preiszeile__preis { text-align: right; white-space: nowrap; }
.pas-preiszeile__ab { display: block; font-size: .8125rem; color: var(--pas-leise); }
.pas-preiszeile__betrag {
	font-family: var(--pas-serif);
	font-size: clamp(1.75rem, 1.5rem + .8vw, 2.25rem);
	font-weight: 700; color: var(--pas-ink);
	line-height: 1;
}
.pas-preiszeile__je { display: block; font-size: .8125rem; color: var(--pas-leise); }

@media (max-width: 360px) {
	.pas-preiszeile__betrag { font-size: 1.5rem; }
	.pas-preiszeile__name { font-size: 1.0625rem; }
}

@media (max-width: 760px) {
	.pas-preiszeile {
		grid-template-columns: 88px 1fr;
		grid-template-areas: "bild name" "bild preis" "knopf knopf";
		gap: var(--pas-12) var(--pas-16);
		padding-inline: var(--pas-12);
	}
	.pas-preiszeile__bild  { grid-area: bild; width: 88px; height: 88px; align-self: start; }
	.pas-preiszeile__haupt { grid-area: name; min-width: 0; }
	.pas-preiszeile__preis {
		grid-area: preis; text-align: left;
		min-width: 0;
		/* Auf dem Telefon steht hier "ab 100,00 € pro Nacht" in einer Zeile.
		   Mit nowrap ragte das bei 320 px um gemessene 23 px aus der Seite
		   heraus und erzeugte einen Querbalken fuer das ganze Dokument. */
		white-space: normal;
	}
	.pas-preiszeile__ab, .pas-preiszeile__je { display: inline; }
	.pas-preiszeile__betrag { white-space: nowrap; }   /* der Betrag selbst bleibt zusammen */
	.pas-preiszeile .pas-knopf { grid-area: knopf; width: 100%; }
}

/* ============================== Knoepfe ================================= */
/* Inhalt immer vertikal mittig. Touch-Ziel nie unter 44 px. */

.pas-knopf {
	display: inline-flex; align-items: center; justify-content: center;
	gap: var(--pas-8);
	min-height: 48px;
	padding: var(--pas-12) var(--pas-24);
	background: var(--pas-tat); color: #fff;
	border: 1px solid transparent; border-radius: var(--pas-r-pille);
	font: inherit; font-weight: 600; line-height: 1.2;
	text-decoration: none; text-align: center;
	cursor: pointer;
	transition: background-color .2s var(--pas-eas), transform .2s var(--pas-eas);
}
.pas-knopf:hover { background: var(--pas-tat-hover); color: #fff; transform: translateY(-1px); }
.pas-knopf:active { transform: translateY(0); }

/* Zweitrangig: gleiche Form, gleiche Hoehe, nur andere Fuellung.
   Keine zweite Formensprache. */
/* Absendeknopf EINES FORMULARS ist ein Formularknopf (12 px), kein Inhaltsknopf
   (Pille) — Regel Dimi vom 22.09.2026, geprueft vom Kommissar. Gleiche Hoehe
   wie die Felder (52 px). */
.pas-knopf--form { border-radius: var(--pas-r); }

.pas-knopf--leise {
	background: transparent;
	color: var(--pas-tat);
	border-color: var(--pas-linie);
}
.pas-knopf--leise:hover { background: var(--pas-dunst); color: var(--pas-tat-hover); border-color: var(--pas-tat); }

/* Auf dunklem Grund: gefuellt weiss, Schrift dunkelgruen — 14,97:1. */
.pas-knopf--hell { background: #fff; color: var(--pas-tief); }
.pas-knopf--hell:hover { background: var(--pas-messing); color: var(--pas-tief); }

/* Auf dunklem Grund, zweitrangig: nur Umriss, weisse Schrift — 14,97:1,
   Rahmen 4,63:1 gegen den Grund und damit als Form erkennbar. */
.pas-knopf--rand {
	background: transparent;
	color: #fff;
	border-color: rgba(255,255,255,.45);
}
.pas-knopf--rand:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

/* Kleiner Knopf fuer nachgeordnete Wege — gleiche Form, gleiche Regeln,
   nur ein Maß kleiner. Keine zweite Formensprache. */
.pas-knopf--klein {
	min-height: 40px;
	padding: var(--pas-8) var(--pas-16);
	font-size: .9375rem;
}

@media (prefers-reduced-motion: reduce) {
	.pas-knopf:hover { transform: none; }
}

/* ======================== Vollbild-Band (Parallax) ====================== */
/* Ein Satz, ein Knopf, sonst nichts. Das Band unterbricht die Lesefolge
   bewusst — es ist die Stelle, an der jemand aufhoert zu lesen und bucht.
   ---------------------------------------------------------------------
   KEIN `background-attachment: fixed`. Das ist der ueblich empfohlene Weg
   und der falsche: iOS ignoriert ihn, und auf dem Desktop erzwingt er bei
   jedem Scrollbild ein Neuzeichnen der ganzen Flaeche. Stattdessen ein
   eigenes Bild mit Reserve, das GSAP ueber `transform` verschiebt — das
   laeuft auf der Grafikkarte.
   ---------------------------------------------------------------------
   Schleier bei 68 % gemessen: 6,02:1 an der hellsten Stelle des Fotos,
   9,65:1 im Mittel. Messing faellt hier mit 3,05:1 durch — die Schrift im
   Band ist deshalb weiss, nicht golden. */

.pas-band {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	min-height: min(70vh, 560px);
	padding-block: var(--pas-96);
	overflow: hidden;
	isolation: isolate;
	background: var(--pas-tief);   /* steht sofort, auch ohne Foto */
	text-align: center;
}
.pas-band__bild { position: absolute; inset: -10% 0; z-index: -2; }
.pas-band__bild img {
	width: 100%; height: 100%;
	object-fit: cover; object-position: center 55%;
	display: block;
}
.pas-band__schleier {
	position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(180deg, rgba(30,42,28,.70) 0%, rgba(30,42,28,.80) 50%, rgba(30,42,28,.70) 100%),
		rgba(30,42,28,.12);
}

.pas-band__text { max-width: 44rem; }

.pas-band__spruch {
	color: #fff;
	font-size: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
	line-height: 1.02;
	letter-spacing: -.025em;
	margin: 0 0 var(--pas-24);
	text-wrap: balance;
	text-shadow: 0 2px 28px rgba(15,22,14,.4);
}
.pas-band__unter {
	color: rgba(255,255,255,.94);
	font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
	max-width: 38rem;
	margin: 0 auto var(--pas-32);
}

@media (max-width: 640px) {
	.pas-band { min-height: min(62vh, 460px); padding-block: var(--pas-64); }
}

/* ========================= Im Preis enthalten =========================== */
/* Stand vorher als Fliesstext weit unter den Preisen. Wer vergleicht, will
   es genau hier wissen. */

.pas-enthalten {
	margin-top: var(--pas-32);
	padding: var(--pas-24);
	background: var(--pas-dunst);
	border-radius: var(--pas-r-gross);
}
.pas-abschnitt--dunst .pas-enthalten { background: var(--pas-weiss); }

.pas-enthalten__titel {
	margin: 0 0 var(--pas-16);
	font-family: var(--pas-sans);
	font-size: 1rem; font-weight: 600;
	color: var(--pas-ink);
}
.pas-enthalten__liste {
	display: flex; flex-wrap: wrap;
	gap: var(--pas-8) var(--pas-24);
	list-style: none; margin: 0; padding: 0;
}
.pas-enthalten__liste li {
	display: flex; align-items: baseline; gap: var(--pas-8);
	color: var(--pas-text);
}
.pas-enthalten__liste li::before {
	content: "";
	/* Dasselbe Zeichen wie `pas_proto_icon('haken')`, hier als eingebettete
	   Grafik. Ein `content: "✓"` waere wieder ein Schriftzeichen — auf jedem
	   System anders breit und anders schwer. */
	width: 1em; height: 1em;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: var(--pas-haken) center / contain no-repeat;
	        mask: var(--pas-haken) center / contain no-repeat;
	color: var(--pas-tat);          /* 6,40:1 auf Weiss, 5,78:1 auf Dunst */
	font-weight: 700;
	flex: 0 0 auto;
}
.pas-enthalten .pas-fussnote { margin-top: var(--pas-16); }

/* ---------------------------- Hakenliste -------------------------------- */

.pas-liste-haken {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: var(--pas-8) var(--pas-24);
	list-style: none; margin: 0 0 var(--pas-32); padding: 0;
}
.pas-liste-haken li {
	display: flex; align-items: baseline; gap: var(--pas-12);
	color: var(--pas-text);
}
.pas-liste-haken li::before {
	content: "";
	/* Dasselbe Zeichen wie `pas_proto_icon('haken')`, hier als eingebettete
	   Grafik. Ein `content: "✓"` waere wieder ein Schriftzeichen — auf jedem
	   System anders breit und anders schwer. */
	width: 1em; height: 1em;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: var(--pas-haken) center / contain no-repeat;
	        mask: var(--pas-haken) center / contain no-repeat; color: var(--pas-tat); font-weight: 700; flex: 0 0 auto;
}

/* --------------------------- Anlauf-Absatz ------------------------------ */
/* Der erste Satz eines Abschnitts traegt ihn. Er darf groesser sein. */

.pas-anlauf {
	font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
	line-height: 1.55;
	color: var(--pas-ink);
}
.pas-abschnitt--tief .pas-anlauf { color: rgba(255,255,255,.94); }

/* --------------------------- Entfernungen ------------------------------- */
/* Der eigentliche Grund, hier zu buchen statt in Berlin: Zahlen, keine
   Prosa. Kein Kartenraster — eine Reihe mit Haarlinien. */

.pas-entfernungen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 0 var(--pas-32);
	list-style: none; margin: 0 0 var(--pas-48); padding: 0;
}
.pas-entfernungen li {
	display: flex; align-items: baseline; gap: var(--pas-12);
	padding-block: var(--pas-16);
	border-top: 1px solid var(--pas-linie);
}
.pas-entfernungen__wert {
	flex: 0 0 auto;
	min-width: 4.5rem;
	font-family: var(--pas-serif);
	font-size: 1.375rem; font-weight: 700;
	color: var(--pas-messing-t);    /* 6,07:1 auf Weiss */
	line-height: 1.1;
}
.pas-entfernungen__ziel { color: var(--pas-text); font-size: .9375rem; }

/* ----------------------------- Umgebung --------------------------------- */

.pas-umgebung {
	margin-top: var(--pas-48);
	padding-top: var(--pas-32);
	border-top: 1px solid var(--pas-linie);
	max-width: var(--pas-breite-text);
}
.pas-umgebung h3 {
	font-family: var(--pas-serif);
	font-size: 1.375rem;
	margin-bottom: var(--pas-12);
}
.pas-umgebung p { color: var(--pas-leise); }

/* ---- Preisstaffel: eine Nacht gegen mehrere --------------------------- */
/* Zwei Zeilen, kein Kartenraster. Der Gast soll die beiden Beträge
   nebeneinander sehen und nicht rechnen müssen. */

.pas-preisstaffel {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 var(--pas-16);
	text-align: left;
}
.pas-preisstaffel caption {
	text-align: left;
	padding-bottom: var(--pas-8);
	font-size: .8125rem; font-weight: 600;
	color: var(--pas-leise);
}
.pas-preisstaffel th,
.pas-preisstaffel td {
	padding: var(--pas-12) 0;               /* kein Zeichen klebt an der Kante */
	border-bottom: 1px solid var(--pas-linie);
	vertical-align: baseline;
}
.pas-preisstaffel th {
	font-weight: 400;
	color: var(--pas-text);
	padding-right: var(--pas-24);
}
.pas-preisstaffel td { color: var(--pas-text); text-align: right; }
.pas-preisstaffel strong { color: var(--pas-ink); font-weight: 600; }
.pas-preisstaffel__beispiel { color: var(--pas-leise); font-size: .875rem; white-space: nowrap; }

@media (max-width: 420px) {
	.pas-preisstaffel__beispiel { display: block; }
}

/* In der Zimmerliste die einzelne Nacht als zweite Zeile unter dem Betrag. */
.pas-preiszeile__eine {
	display: block;
	margin-top: var(--pas-4);
	font-size: .8125rem;
	color: var(--pas-leise);
}

/* ============================ Eine Zimmerseite ========================== */

.pas-brotkrumen {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: var(--pas-8);
	padding-block: var(--pas-24) 0;
	font-size: .875rem;
	color: var(--pas-leise);
}
.pas-brotkrumen a { color: var(--pas-tat); font-weight: 600; }
.pas-brotkrumen [aria-hidden] { opacity: .5; }
.pas-brotkrumen [aria-current] { color: var(--pas-ink); font-weight: 600; }

/* MOBILE FIRST: untereinander. Ab 900 px Bild und Text nebeneinander. */
.pas-zimmer {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pas-32);
	padding-block: var(--pas-32) var(--pas-64);
	align-items: start;
}
@media (min-width: 900px) {
	.pas-zimmer { grid-template-columns: 1fr 1fr; gap: var(--pas-64); }
}

.pas-zimmer__bild img {
	display: block; width: 100%; height: auto;
	border-radius: var(--pas-r-gross);
}
.pas-zimmer__ohnebild {
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 3 / 2;
	margin: 0;
	border-radius: var(--pas-r-gross);
	background: var(--pas-dunst);
	font-family: var(--pas-serif); font-size: 1.5rem;
	color: var(--pas-messing-t);
}
.pas-bildhinweis {
	margin: var(--pas-8) 0 0;
	font-size: .8125rem;
	color: var(--pas-leise);
}

.pas-zimmer__text h1 { margin-bottom: var(--pas-12); }

/* Der Preis ist die Angabe, wegen der die Seite aufgerufen wurde —
   er bekommt entsprechend Gewicht. */
.pas-zimmer__preis {
	display: flex; flex-wrap: wrap; align-items: baseline;
	gap: var(--pas-8);
	margin: var(--pas-24) 0;
	padding-block: var(--pas-16);
	border-top: 1px solid var(--pas-linie);
	border-bottom: 1px solid var(--pas-linie);
}
.pas-zimmer__ab { font-size: .9375rem; color: var(--pas-leise); }
.pas-zimmer__betrag {
	font-family: var(--pas-serif);
	font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
	font-weight: 700;
	color: var(--pas-ink);
	line-height: 1;
}
.pas-zimmer__je { font-size: .9375rem; color: var(--pas-leise); }

/* ============================= Unser Haus =============================== */

.pas-haus {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--pas-64);
	align-items: stretch;   /* das Foto fuellt die Spaltenhoehe, statt mit
	                           leerem Raum darunter mittig zu schweben */
}
.pas-haus__bild {
	position: relative;
	border-radius: var(--pas-r-gross);
	overflow: hidden;
	min-height: 440px;
	background: var(--pas-dunst);
}
.pas-haus__bild img {
	width: 100%; height: 112%;   /* Reserve fuer den Gegenlauf beim Scrollen */
	object-fit: cover; display: block;
}

/* Die Eckdaten: Messing-Haarlinien statt eines Kastens im Kasten.
   Ein Rahmen um einen Rahmen ist immer falsch. */
.pas-haus--gedreht .pas-haus__bild { order: 2; }
@media (max-width: 900px) { .pas-haus--gedreht .pas-haus__bild { order: 0; } }

.pas-fakten { margin: var(--pas-32) 0 0; }
.pas-fakten--eng { margin-top: 0; }
.pas-fakten--eng div { padding-block: var(--pas-8); }
.pas-fakten--eng dt { flex-basis: 8rem; }
.pas-fakten div {
	display: flex; flex-wrap: wrap; align-items: baseline;
	gap: var(--pas-8) var(--pas-16);
	padding-block: var(--pas-12);
	border-top: 1px solid var(--pas-linie);
}
.pas-fakten div:last-child { border-bottom: 1px solid var(--pas-linie); }
.pas-fakten dt { flex: 0 0 8.5rem; font-weight: 600; color: var(--pas-ink); }
.pas-fakten dd { flex: 1 1 14rem; margin: 0; color: var(--pas-leise); }

@media (max-width: 900px) {
	.pas-haus { grid-template-columns: 1fr; gap: var(--pas-32); }
	.pas-haus__bild { min-height: 0; aspect-ratio: 16 / 10; }
}

/* ================================ Lage ================================== */
/* Zwei Spalten fliessender Text mit Haarlinie — keine Kacheln, keine
   Seitenstreifen, keine Icons in runden Kaesten. */

.pas-lage {
	display: grid;
	/* Vier Punkte in DREI Spalten ergeben 3 + 1 — der vierte steht allein
	   und bricht in schmale Zeilen um. Zwei Spalten ergeben 2 + 2.
	   `min(420px, 100%)` ist dabei nicht schmueckendes Beiwerk: Ein blankes
	   `minmax(420px, 1fr)` erzwingt die 420 px auch dann, wenn der Container
	   nur 358 px breit ist — am Telefon waren das gemessene 46 px
	   Querueberlauf fuer die ganze Seite. */
	grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
	gap: 0 var(--pas-64);
	list-style: none; margin: 0; padding: 0;
}
.pas-lage li {
	padding-block: var(--pas-32);
	border-top: 1px solid var(--pas-linie);
}
.pas-lage h3 { color: var(--pas-ink); font-size: 1.1875rem; }
.pas-lage p { color: var(--pas-leise); margin: 0; }

/* ============================== Stimmen ================================= */
/* Auf dunklem Grund, ohne Kaesten: die Zitate stehen selbst.
   Bewusst OHNE Einblend-Animation — Belege sollen sofort da sein. */

.pas-stimmen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: var(--pas-48);
	list-style: none; margin: 0; padding: 0;
}
.pas-stimme { display: flex; flex-direction: column; gap: var(--pas-12); }
.pas-stimme__sterne {
	margin: 0;
	color: var(--pas-messing);
	font-size: 1rem; letter-spacing: .15em;
}
.pas-stimme blockquote {
	margin: 0;
	font-family: var(--pas-serif);
	font-size: 1.0625rem; line-height: 1.6;
	color: rgba(255,255,255,.92);
}
.pas-stimme blockquote::before { content: "„"; }
.pas-stimme blockquote::after  { content: "“"; }
.pas-stimme__name {
	margin: 0; font-size: .875rem; font-weight: 600;
	color: var(--pas-messing);
	padding-top: var(--pas-12);
	border-top: 1px solid var(--pas-linie-dkl);
}

/* Auf hellem Grund (falls der Abschnitt je umzieht) bleiben die Sterne lesbar */
.pas-abschnitt:not(.pas-abschnitt--tief) .pas-stimme__sterne { color: var(--pas-messing-t); }

/* ============================ Häufige Fragen ============================ */
/* Aufklappen über <details>/<summary> — der Browser kann das selbst.
   Kein JavaScript, keine ARIA-Bastelei, und die Antworten stehen auch
   ohne Skript im Dokument.
   Keine Kacheln: Haarlinien wie bei "Die Lage", damit die Seite ihre
   Formensprache behält. */

.pas-faq { max-width: var(--pas-breite-text); }

.pas-faq__punkt { border-top: 1px solid var(--pas-linie); }
.pas-faq__punkt:last-child { border-bottom: 1px solid var(--pas-linie); }

.pas-faq__frage {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--pas-24);
	min-height: 44px;                    /* Tippziel */
	padding: var(--pas-16) var(--pas-12);
	margin-inline: calc(var(--pas-12) * -1);
	border-radius: var(--pas-r);
	font-weight: 600;
	font-size: 1.0625rem;
	color: var(--pas-ink);
	cursor: pointer;
	list-style: none;                    /* der Standardpfeil verschwindet */
	transition: background-color .2s var(--pas-eas);
}
.pas-faq__frage::-webkit-details-marker { display: none; }

/* Die Markierung ist eingerückt und rund — sie klebt nie an der Kante. */
.pas-faq__frage:hover { background: rgba(28, 33, 24, .05); }
.pas-abschnitt--dunst .pas-faq__frage:hover { background: rgba(28, 33, 24, .045); }
.pas-faq__frage:focus-visible { outline: 3px solid var(--pas-tat); outline-offset: 0; }

/* Eigener Winkel statt Browser-Dreieck — dreht beim Aufklappen. */
.pas-faq__frage::after {
	content: "";
	flex: 0 0 auto;
	width: 9px; height: 9px;
	margin-right: var(--pas-4);
	border-right: 2px solid var(--pas-tat);
	border-bottom: 2px solid var(--pas-tat);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .25s var(--pas-eas);
}
.pas-faq__punkt[open] > .pas-faq__frage::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.pas-faq__antwort {
	padding: 0 var(--pas-12) var(--pas-24);
	color: var(--pas-text);
	max-width: 68ch;
}
.pas-faq__antwort p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
	.pas-faq__frage::after { transition: none; }
}

/* Knoepfe nebeneinander (404-Seite des Themes). Umbruch statt Quetschen. */
.pas-knopfreihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pas-12); margin-block: var(--pas-24); }

/* =============================== Galerie ================================ */
/* Die Galerie der alten Zimmerseite (seit 0.8.1). Vorschau 4:3, damit das
   Raster ruhig bleibt; die Grossansicht zeigt das ganze Bild.
   `min(…, 100%)` im minmax: sonst erzwingt die Spalte ihre Mindestbreite
   auch in einem schmaleren Container (Querueberlauf mit Ansage). */
.pas-galerie {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
	gap: var(--pas-12);
}
@media (min-width: 600px) {
	.pas-galerie { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: var(--pas-16); }
}

.pas-galerie__knopf {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: var(--pas-r);
	overflow: hidden;
	background: var(--pas-dunst);
	cursor: zoom-in;
}
.pas-galerie__bild {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .4s var(--pas-eas);
}
.pas-galerie__knopf:hover .pas-galerie__bild { transform: scale(1.03); }
.pas-galerie__knopf:focus-visible { outline: 3px solid var(--pas-tat); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
	.pas-galerie__bild { transition: none; }
	.pas-galerie__knopf:hover .pas-galerie__bild { transform: none; }
}

/* Grossansicht: das native <dialog>, bildschirmfuellend. */
.pas-galerie__dialog {
	width: 100vw; max-width: 100vw;
	height: 100dvh; max-height: 100dvh;
	margin: 0; padding: var(--pas-16);
	border: 0;
	background: rgba(20, 24, 18, .94);
	color: #fff;
}
.pas-galerie__dialog[open] {
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: var(--pas-12);
}
.pas-galerie__dialog::backdrop { background: rgba(20, 24, 18, .94); }

.pas-galerie__figur {
	margin: 0;
	flex: 1 1 auto; min-height: 0;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: var(--pas-12);
	width: 100%;
}
.pas-galerie__gross {
	max-width: 100%;
	max-height: calc(100dvh - 160px);
	width: auto; height: auto;
	object-fit: contain;
	border-radius: var(--pas-r);
}
.pas-galerie__text {
	max-width: 62ch;
	padding-inline: var(--pas-8);
	text-align: center;
	font-size: .9375rem;
	line-height: 1.5;
	color: rgba(255,255,255,.88);
}

.pas-galerie__leiste {
	display: flex; align-items: center; justify-content: center;
	gap: var(--pas-12);
}
.pas-galerie__zaehler { min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }

/* Formularknopf-Klasse: 12 px, Inhalt mittig, kein Zustand aendert die Form. */
.pas-galerie__steuer {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--pas-r-pille);   /* 44 x 44 + Pille = Kreis, wie die Bilderfolge */
	background: #fff;
	color: var(--pas-ink);               /* 16,4:1 */
	cursor: pointer;
	transition: background-color .15s ease;
}
.pas-galerie__steuer:hover { background: var(--pas-dunst); }
.pas-galerie__steuer:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.pas-galerie__zu { margin-left: var(--pas-12); }

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

.pas-fuss {
	background: var(--pas-tief);
	color: rgba(255,255,255,.8);
	padding-block: var(--pas-64) var(--pas-32);
}
.pas-fuss__reihe {
	display: flex; flex-wrap: wrap;
	gap: var(--pas-48);
	justify-content: space-between;
}
.pas-fuss__name {
	font-family: var(--pas-serif);
	font-weight: 700; color: #fff;
	font-size: 1.375rem;
	margin-bottom: var(--pas-12);
}
/* Nur klassenlose Links im Fussbereich werden weiss. `.pas-fuss a` hatte
   Spezifitaet (0,1,1) und schlug damit `.pas-knopf--hell` (0,1,0): weisse
   Schrift auf weissem Knopf, 1,00:1 — der Telefonknopf war leer.
   Das war derselbe Fehler zum vierten Mal. `:where()` beendet ihn. */
.pas-fuss :where(a:not([class])) { color: #fff; }
.pas-fuss .pas-menue { flex-direction: column; align-items: flex-start; gap: var(--pas-4); overflow: visible; margin-inline: 0; padding-inline: 0; }
.pas-fuss .pas-menue a { justify-content: flex-start; color: rgba(255,255,255,.86); padding-inline: var(--pas-12); }
.pas-fuss .pas-menue a:hover { background: rgba(255,255,255,.1); color: #fff; }

.pas-fuss__adresse { max-width: 34rem; }

/* Telefon und Nachricht als Knoepfe — gleiche Hoehe, gleiche Form,
   nebeneinander in Breite UND Hoehe zentriert. */
.pas-fuss__kontakt {
	display: flex; flex-wrap: wrap;
	gap: var(--pas-12);
	margin-top: var(--pas-24);
}
.pas-fuss__kontakt .pas-knopf { flex: 0 1 auto; }
@media (max-width: 480px) {
	.pas-fuss__kontakt { flex-direction: column; align-items: stretch; }
}

/* Die Schlusszeile liegt im SELBEN Raster wie alles darueber: Sie sitzt
   in `.pas-breite` und traegt die Linie selbst. Vorher baute sie die Maße
   von `.pas-breite` nach — Linie bei x240, Text darueber bei x272. */
.pas-fuss__zeile {
	margin: var(--pas-48) 0 0;
	padding: var(--pas-24) 0 0;
	border-top: 1px solid var(--pas-linie-dkl);
	font-size: .875rem;
	color: rgba(255,255,255,.72);
}

/* ========================= Schwebende Leiste ============================ */
/* Milchglas, nicht dunkles Glas: die Leiste soll sich ueber den Inhalt
   legen, ohne ihn zuzudecken.
   ---------------------------------------------------------------------
   GEMESSEN, WEIL HELLES GLAS DIE HEIKLERE WAHL IST
   Die Leiste schwebt mal ueber Weiss, mal ueber dem dunkelgruenen
   Abschnitt. Bei 76 % Weissdeckung ergibt sich fuer die schwarze Schrift:
     ueber Weiss             16,40:1
     ueber Dunst             15,98:1
     ueber Dunkelgruen       10,13:1
     ueber dunklem Foto      10,64:1
   Eine GEDAEMPFTE Schriftfarbe waere hier der Fehler: dieselbe Rechnung
   ergibt ueber Dunkelgruen nur 3,88:1. Inaktive Punkte werden deshalb
   ueber Gewicht und Flaeche unterschieden, nicht ueber eine hellere
   Schrift.
   ---------------------------------------------------------------------
   MOBILE FIRST: Die Grundregeln unten gelten fuer das Telefon. Die
   Leiste liegt dort ueber die volle Breite, die Sprungmarken lassen sich
   seitlich schieben, und die Handlung bleibt immer sichtbar daneben
   stehen. Erst ab 720 px wird daraus die zentrierte Pille. */

.pas-fliege {
	position: fixed;
	left: var(--pas-12); right: var(--pas-12); bottom: var(--pas-12);
	z-index: var(--pas-z-fliege);
	transform: translateY(150%);
	opacity: 0;
	visibility: hidden;
	transition: transform .55s var(--pas-eas), opacity .4s var(--pas-eas), visibility .4s;
}
.pas-fliege.ist-da { transform: translateY(0); opacity: 1; visibility: visible; }

.pas-fliege__glas {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: var(--pas-4);
	padding: var(--pas-4);
	border-radius: var(--pas-r-pille);
	background: rgba(255, 255, 255, .76);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, .7);
	box-shadow:
		0 1px 0 0 rgba(255,255,255,.9) inset,
		0 8px 32px -6px rgba(15, 22, 14, .22),
		0 2px 8px rgba(15, 22, 14, .08);
}
/* Kein Backdrop-Filter im Browser: dann volldeckend. Halbdurchsichtig ohne
   Unschaerfe ergibt fleckigen, schlecht lesbaren Untergrund. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.pas-fliege__glas { background: rgba(255, 255, 255, .97); }
}

/* Die Sprungmarken lassen sich am Telefon seitlich schieben. */
.pas-fliege__liste {
	display: flex; align-items: center; gap: var(--pas-4);
	list-style: none; margin: 0; padding: 0;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
}
.pas-fliege__liste::-webkit-scrollbar { display: none; }
.pas-fliege__liste li { flex: 0 0 auto; scroll-snap-align: start; }

/* Waagerechtes Menue: Inhalt in Breite UND Hoehe zentriert. */
.pas-fliege__liste a {
	display: flex; align-items: center; justify-content: center;
	min-height: 44px;   /* volles Tippmass — die Leiste wird dadurch 52 px hoch */
	padding: 0 var(--pas-16);
	border-radius: var(--pas-r-pille);
	color: var(--pas-ink);
	font-size: .9375rem; font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s var(--pas-eas), font-weight .2s var(--pas-eas);
}
.pas-fliege__liste a:hover { background: rgba(28, 33, 24, .07); }
/* Der aktive Punkt ist eingerueckt und rund — er klebt nie an der Kante. */
.pas-fliege__liste a[aria-current="true"] {
	background: rgba(28, 33, 24, .1);
	font-weight: 700;
}
.pas-fliege__liste a:focus-visible { outline: 2px solid var(--pas-tat); outline-offset: -2px; }

.pas-fliege__tel {
	display: flex; align-items: center; justify-content: center;
	width: 44px; min-height: 44px;
	border-radius: var(--pas-r-pille);
	color: var(--pas-ink); text-decoration: none; font-size: 1.0625rem;
	transition: background-color .2s var(--pas-eas);
}
.pas-fliege__tel:hover { background: rgba(28, 33, 24, .07); }
.pas-fliege__tel:focus-visible { outline: 2px solid var(--pas-tat); outline-offset: -2px; }

/* Die Handlung: gefuellt, weisse Schrift — 6,40:1. Sie ist das einzige
   farbige Element der Leiste und damit unuebersehbar. */
.pas-fliege__tat {
	display: flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 0 var(--pas-16);
	border-radius: var(--pas-r-pille);
	background: var(--pas-tat);
	color: #fff;
	font-size: .9375rem; font-weight: 600;
	text-decoration: none; white-space: nowrap;
	transition: background-color .2s var(--pas-eas);
}
.pas-fliege__tat:hover { background: var(--pas-tat-hover); color: #fff; }
.pas-fliege__tat:focus-visible { outline: 2px solid var(--pas-ink); outline-offset: 2px; }

/* Sehr schmal (unter 380 px): die Beschriftung der Handlung wird kuerzer,
   damit die Sprungmarken nicht auf wenige Pixel zusammenschrumpfen. */
@media (max-width: 379px) {
	.pas-fliege__tat { padding: 0 var(--pas-12); }
	.pas-fliege__tat .pas-fliege__tat-lang { display: none; }
}
@media (min-width: 380px) {
	.pas-fliege__tat .pas-fliege__tat-kurz { display: none; }
}

/* Ab hier wird aus der Leiste die zentrierte Pille, 50 px ueber der Kante. */
@media (min-width: 720px) {
	.pas-fliege {
		left: 50%; right: auto; bottom: 50px;
		transform: translate(-50%, 150%);
		max-width: calc(100vw - var(--pas-48));
	}
	.pas-fliege.ist-da { transform: translate(-50%, 0); }
	/* BREITE = INHALT. Ein fixiertes Element mit `left: 50%` rechnet seine Breite
	   aus dem Platz RECHTS der Mitte (bei 1252 px: 626 px); der Inhalt lief darueber
	   hinaus und verschwand unter dem Knopf („Anfahrt" war abgeschnitten, gemeldet
	   von Dimi 01.10.2026). `max-width` oben deckelt sie auf die Bildschirmbreite. */
	.pas-fliege { width: max-content; }
	.pas-fliege__glas { grid-template-columns: minmax(0, auto) auto; padding: var(--pas-8); gap: var(--pas-8); }
	/* Wird es auf schmalen Laptops doch enger als die Liste, schiebt sie sich
	   seitlich (mit Einrasten) statt unter den Knopf zu laufen. */
	.pas-fliege__liste { overflow-x: auto; }
	.pas-fliege__liste a { font-size: .875rem; padding-inline: var(--pas-12); }
	.pas-fliege__tel { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.pas-fliege { transition: opacity .01ms, visibility .01ms; }
}

/* ======================== HBook im neuen Kleid ========================== */
/* AUSSCHLIESSLICH innerhalb von .pas-suche. HBook selbst bleibt unangetastet —
   keine Plugin-Datei, keine Einstellung, keine Tabelle wird veraendert.
   HBook legt seine Felder mit float und Prozentbreiten nebeneinander; das
   wird hier auf ein Raster umgestellt, damit nichts umbricht oder klebt. */

.pas-suche .hbook-wrapper { font-family: var(--pas-sans); color: var(--pas-text); }

/* Der Feldcontainer heisst in HBook 2.2 `.hb-search-fields` — NICHT
   `.hb-search-form-fields-wrapper`, wie hier zuerst stand. Die Regeln
   liefen deshalb ins Leere und die Felder standen weiter auf HBooks
   float-Layout mit Prozentbreiten. Am DOM nachgesehen, nicht geraten. */
.pas-suche .hb-search-fields {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
	gap: var(--pas-16);
	align-items: end;
}

/* Ab Tablettbreite feste Verhaeltnisse statt gleich breiter Spalten:
   Ankunft 30 % · Abreise 30 % · Gaeste 20 % · Suche 20 %. Ein Datum braucht
   mehr Platz als eine Zahl, und die beiden Datumsfelder gehoeren sichtbar
   zusammen. Vorgabe vom 22.09.2026: 60 % fuer die Daten, 40 % fuer den Rest.
   Gilt fuer die vier sichtbaren Felder — blendet HBook ein weiteres ein
   (mehrere Unterkuenfte), greift wieder die Aufteilung darueber. */
@media (min-width: 861px) {
	.pas-suche .hb-search-fields { grid-template-columns: 3fr 3fr 2fr 2fr; }
}
.pas-suche .hb-search-fields::before,
.pas-suche .hb-search-fields::after { content: none !important; }   /* Clearfix im Raster unnoetig */

.pas-suche .hb-search-fields > p,
.pas-suche .hb-search-fields > div {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

/* Die Suche ist die wichtigste Handlung der Seite: eigene Zeile, volle
   Breite, damit sie auf jedem Geraet dasselbe Gewicht hat. */
.pas-suche .hb-search-submit-wrapper,
.pas-suche p.hb-search-button-wrapper {
	float: none !important;
	width: auto !important;
	margin: var(--pas-16) 0 0 !important;
}

/* In der Zeile (ab 861 px) braucht der Suchknopf keinen Abstand nach oben —
   der stammt aus der Zeit, als er auf einer eigenen Zeile stand.
   Die Regel MUSS nach der obigen stehen: Gleiche Spezifitaet, beide
   !important, es gewinnt die spaetere. Sie stand bis 01.10.2026 davor und
   verlor still — die Zeile war dadurch 16 px hoeher, und beim Aufbau
   sprang die Seite (Lighthouse Desktop: CLS 0,103). */
@media (min-width: 861px) {
	.pas-suche .hb-search-submit-wrapper,
	.pas-suche p.hb-search-button-wrapper { margin: 0 !important; }
}

/* Kinderfeld vor dem Umbau ausblenden: steht seit 01.10.2026 fuer ALLE
   Suchformulare in pas-hbook.css (auf /buchungsformular/ sprang die Seite
   sonst ebenso, CLS 0,58 am Desktop). */

/* Der Reisebett-Schalter im Gaeste-Panel ist ein <label>, aber eine Zeile
   aus Schalter, Text und Altersangabe (pas-hbook.css, display: flex). Diese
   Regel (0,2,1) schlug dessen Regel (0,2,0) — auf der Startseite, wo das
   Formular in .pas-suche steht. Dieselbe Falle steckte ein zweites Mal in
   pas-hbook.css selbst (gemeldet 01.10.2026). :where() nimmt den Schalter
   aus, ohne die Spezifitaet fuer alle anderen Labels zu aendern. */
.pas-suche .hbook-wrapper label:where(:not(.pas-gaeste__schieber)) {
	display: block;
	margin-bottom: var(--pas-8);
	font-size: .8125rem; font-weight: 600;
	color: var(--pas-leise);
}
.pas-suche .hbook-wrapper input[type="text"],
.pas-suche .hbook-wrapper select,
.pas-suche .hbook-wrapper .selectize-input {
	width: 100%;
	min-height: 48px;
	padding: var(--pas-12) var(--pas-16) !important;   /* kein Zeichen klebt an der Kante */
	border: 1px solid var(--pas-linie) !important;
	border-radius: var(--pas-r) !important;
	background: var(--pas-weiss) !important;
	box-shadow: none !important;
	font: inherit !important;
	color: var(--pas-ink) !important;
	line-height: 1.4 !important;
}
.pas-suche .hbook-wrapper input[type="text"]:focus,
.pas-suche .hbook-wrapper select:focus,
.pas-suche .hbook-wrapper .selectize-input.focus {
	border-color: var(--pas-tat) !important;
	outline: 2px solid rgba(23,109,57,.22) !important;
	outline-offset: 0 !important;
}
.pas-suche .hbook-wrapper ::placeholder { color: var(--pas-leise); opacity: 1; }

/* Der Suchknopf bekommt exakt dieselbe Form und Farbe wie jeder andere
   Hauptknopf der Seite — eine Formensprache, kein Sonderfall. */
.pas-suche .hbook-wrapper input[type="submit"],
.pas-suche .hbook-wrapper button[type="submit"],
.pas-suche .hb-search-button-wrapper input,
.pas-suche .hb-search-button-wrapper button {
	display: inline-flex; align-items: center; justify-content: center;
	width: 100%;
	min-height: 48px;
	padding: var(--pas-12) var(--pas-24) !important;
	background: var(--pas-tat) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--pas-r-pille) !important;
	font: inherit !important;
	font-weight: 600 !important;
	text-transform: none !important;
	cursor: pointer;
	transition: background-color .2s var(--pas-eas);
}
.pas-suche .hbook-wrapper input[type="submit"]:hover,
.pas-suche .hbook-wrapper button[type="submit"]:hover,
.pas-suche .hb-search-button-wrapper input:hover,
.pas-suche .hb-search-button-wrapper button:hover {
	background: var(--pas-tat-hover) !important;
}

/* =============================== Bewegung =============================== */
/* GRUNDREGEL, teuer erkauft: Der Ausgangszustand ist SICHTBAR. Die Startwerte
   setzt erst das Skript, nachdem GSAP nachweislich geladen ist. Bleibt das
   Skript haengen, steht der Inhalt trotzdem da — nur ohne Animation. */

@media (prefers-reduced-motion: reduce) {
	.pas-proto *, .pas-proto *::before, .pas-proto *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	/* Die schwebende Leiste bleibt benutzbar, nur ohne Fahrt */
	.pas-fliege { transition: opacity .01ms; }
}

/* Masken fuer den Zeilenaufbau der Ueberschriften. Sie entstehen erst,
   wenn SplitText gelaufen ist — vorher gibt es diese Elemente nicht. */
.pas-zeile-maske  { display: block; overflow: hidden; padding-block: .06em; }
.pas-zeile-inhalt { display: block; will-change: transform; }

/* ==========================================================================
   Kontaktseite: Karte „Direkt erreichbar" und das Formular
   --------------------------------------------------------------------------
   ABSTAENDE aus derselben Skala wie der Rest (4/8/12/16/24/32/48/64/96).
   Keine krummen Zwischenwerte, gleiche Ebene = gleicher Abstand.

   TIPPZIELE: Jedes Eingabefeld, jeder Schalter und jeder Knopf ist
   mindestens 48 px hoch — WCAG 2.2 SC 2.5.8 verlangt 44, die Suchleiste
   der Buchungsstrecke arbeitet mit 52. 48 liegt dazwischen und passt zu
   beidem.

   FOKUS: Sichtbar und mit Abstand zum Feldrand, nie nur ueber die Farbe.
   Ein Fokusring, der die Kante beruehrt, verschwindet auf dunklem Grund.
   ========================================================================== */

/* ---- Karte „Direkt erreichbar" ---------------------------------------- */

.pas-kontaktkarte {
	background: var(--pas-dunst);
	border: 1px solid var(--pas-linie);
	border-radius: var(--pas-r-gross);
	padding: var(--pas-32);
	margin-bottom: var(--pas-48);
}

.pas-kontaktkarte__titel {
	font-size: 1.125rem;
	margin: 0 0 var(--pas-24);
	color: var(--pas-ink);
}

.pas-kontaktkarte__reihe {
	display: grid;
	/* min() statt des blossen Mindestmasses: `minmax(260px, 1fr)` erzwingt
	   seine Breite auch in einem schmaleren Container — ein Querueberlauf
	   mit Ansage. */
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: var(--pas-24);
}

.pas-kontaktkarte__block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pas-8);
}

.pas-kontaktkarte__was {
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--pas-leise);
}

.pas-kontaktkarte__adresse {
	font-style: normal;
	line-height: 1.6;
	color: var(--pas-text);
	margin: 0;
}

.pas-kontaktkarte__dazu {
	font-size: .875rem;
	color: var(--pas-leise);
}

/* Beide Knoepfe der Karte auf eine Hoehe — sonst steht der eine 4 px
   hoeher als der andere, und man sieht es, ohne es benennen zu koennen. */
.pas-kontaktkarte .pas-knopf {
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ---- Kontaktseite: zwei Spalten 60/40 --------------------------------- */
/* Vorgabe Dimi, 01.10.2026. Mobile First: untereinander, Infokarte zuerst
   (Quelltext-Reihenfolge). Ab 1024 px Formular links (3fr), Infokarte rechts
   (2fr) — darunter reichen 40 % nicht fuer Telefonknopf und Anschrift.
   minmax(0, …), damit kein Feld die Spalte ueber ihren Anteil drueckt. */
.pas-kontakt-raster {
	display: grid;
	gap: var(--pas-48);
}
.pas-kontakt-raster > .pas-kontaktkarte { margin-bottom: 0; }
/* Den Abstand zur Karte darunter traegt deren Abschnitt. */
.pas-kontakt-raster > .pas-formularteil { padding-bottom: 0; }

@media (min-width: 1024px) {
	.pas-kontakt-raster {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		align-items: start;
	}
	.pas-kontakt-raster > .pas-formularteil { grid-column: 1; grid-row: 1; max-width: none; }
	/* Die Infokarte bleibt neben dem langen Formular im Blick. 96 px =
	   Hoehe der Kopfleiste (wie scroll-padding-top), plus Luft. */
	.pas-kontakt-raster > .pas-kontaktkarte {
		grid-column: 2; grid-row: 1;
		position: sticky;
		top: calc(96px + var(--pas-24));
	}
	.pas-kontakt-raster .pas-kontaktkarte__reihe { grid-template-columns: 1fr; }
}

/* ---- Formular: Grundraster -------------------------------------------- */

.pas-formularteil {
	padding-bottom: var(--pas-96);
	max-width: 760px;
}

.pas-formularteil h2 {
	margin-bottom: var(--pas-24);
}

.pas-formular {
	display: flex;
	flex-direction: column;
	gap: var(--pas-24);
}

.pas-feldreihe {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: var(--pas-16) var(--pas-24);
}

/* Anrede braucht weniger Platz als die beiden Namen daneben. */
@media (min-width: 720px) {
	.pas-feldreihe--drei { grid-template-columns: 150px 1fr 1fr; }
}

.pas-feld {
	display: flex;
	flex-direction: column;
	gap: var(--pas-8);
	min-width: 0;   /* sonst sprengt ein langer Wert das Rasterfeld */
}

.pas-feld__label {
	font-weight: 600;
	color: var(--pas-ink);
	font-size: .9375rem;
}

.pas-feld__frei {
	font-weight: 400;
	color: var(--pas-leise);
	font-size: .875rem;
}

/* Steht unter dem Feld (siehe Vorlage), deshalb der Abstand nach oben
   statt nach unten — sonst klebt er am Feldrand. */
.pas-feld__hinweis {
	font-size: .875rem;
	color: var(--pas-leise);
	margin-top: calc(var(--pas-4) * -1);
	line-height: 1.5;
}

/* Die Felder einer Reihe fluchten oben, auch wenn eines einen Hinweis
   traegt und dadurch hoeher wird. */
.pas-feldreihe > .pas-feld { align-content: start; }

/* ---- Eingabefelder ----------------------------------------------------- */

.pas-feld__eingabe {
	width: 100%;
	min-height: 48px;
	padding: var(--pas-12) var(--pas-16);   /* kein Zeichen klebt an der Kante */
	font-family: var(--pas-sans);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--pas-ink);
	background: var(--pas-weiss);
	border: 1px solid var(--pas-linie);
	border-radius: var(--pas-r);
	transition: border-color .15s var(--pas-eas-k), box-shadow .15s var(--pas-eas-k);
	-webkit-appearance: none;
	appearance: none;
}

/* Die Auswahlliste braucht Platz fuer das eigene Pfeilsymbol, sonst
   ueberdeckt es den letzten Buchstaben eines langen Eintrags. */
select.pas-feld__eingabe {
	padding-right: var(--pas-48);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235a6353' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--pas-16) center;
	background-size: 12px 8px;
}

.pas-feld__eingabe--lang {
	min-height: 150px;
	resize: vertical;
	line-height: 1.6;
}

.pas-feld__eingabe:hover { border-color: var(--pas-leise); }

.pas-feld__eingabe:focus-visible,
.pas-feld__eingabe:focus {
	outline: none;
	border-color: var(--pas-tat);
	box-shadow: 0 0 0 3px rgba(23, 109, 57, .18);
}

.pas-feld__eingabe::placeholder { color: var(--pas-leise); }

/* ---- Fehler ------------------------------------------------------------ */

.pas-feld--fehler .pas-feld__eingabe { border-color: #a4281f; }

.pas-feld--fehler .pas-feld__eingabe:focus,
.pas-feld--fehler .pas-feld__eingabe:focus-visible {
	box-shadow: 0 0 0 3px rgba(164, 40, 31, .18);
}

/* #a4281f auf Weiss = 6,74:1. Der uebliche Fehlerton #d32f2f liegt bei
   4,07:1 und faellt damit fuer normalen Text durch. */
.pas-feld__fehler {
	font-size: .875rem;
	font-weight: 600;
	color: #a4281f;
}

/* ---- Auswahl „Ich schreibe als" --------------------------------------- */

.pas-feldgruppe {
	border: 0;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--pas-8);
}

.pas-feldgruppe__titel {
	padding: 0;
	font-weight: 600;
	color: var(--pas-ink);
	font-size: .9375rem;
}

.pas-wahl {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pas-12);
}

/* Die Auswahlflaeche klebt NIE an der Kante: eigener Rahmen, eigener
   Radius, Inhalt mit Innenabstand — wie ein Knopf, nicht wie eine Zeile. */
.pas-wahl__punkt {
	display: inline-flex;
	align-items: center;
	gap: var(--pas-12);
	min-height: 48px;
	padding: var(--pas-8) var(--pas-16);
	border: 1px solid var(--pas-linie);
	border-radius: var(--pas-r);
	background: var(--pas-weiss);
	cursor: pointer;
	transition: border-color .15s var(--pas-eas-k), background .15s var(--pas-eas-k);
}

.pas-wahl__punkt:hover { border-color: var(--pas-tat); background: var(--pas-dunst); }

.pas-wahl__punkt:has(input:checked) {
	border-color: var(--pas-tat);
	background: var(--pas-dunst);
	box-shadow: inset 0 0 0 1px var(--pas-tat);
}

.pas-wahl__punkt:has(input:focus-visible) {
	box-shadow: 0 0 0 3px rgba(23, 109, 57, .18);
}

.pas-wahl__punkt input { width: 20px; height: 20px; accent-color: var(--pas-tat); margin: 0; }

.pas-wahl--fehler .pas-wahl__punkt { border-color: #a4281f; }

/* ---- Einwilligung ------------------------------------------------------ */

.pas-zustimmung {
	display: flex;
	align-items: flex-start;
	gap: var(--pas-12);
	padding: var(--pas-16);
	border: 1px solid var(--pas-linie);
	border-radius: var(--pas-r);
	background: var(--pas-dunst);
	cursor: pointer;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--pas-text);
}

.pas-zustimmung input {
	width: 20px;
	height: 20px;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--pas-tat);
	/* Auf die Grundlinie der ersten Zeile heben, statt an die Oberkante
	   zu kleben: (Zeilenhoehe 1.6 × 15px − 20px) / 2 */
	margin-top: 2px;
}

.pas-zustimmung:hover { border-color: var(--pas-tat); }
.pas-zustimmung:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(23, 109, 57, .18); }

.pas-feld--zustimmung.pas-feld--fehler .pas-zustimmung { border-color: #a4281f; }

/* ---- Meldungen --------------------------------------------------------- */

.pas-meldung {
	border-radius: var(--pas-r);
	padding: var(--pas-24);
	margin-bottom: var(--pas-24);
	line-height: 1.6;
}

.pas-meldung p { margin: 0 0 var(--pas-8); }
.pas-meldung p:last-child { margin-bottom: 0; }

.pas-meldung--gut {
	background: var(--pas-dunst);
	border: 1px solid var(--pas-tat);
	color: var(--pas-ink);
}

/* Neutraler Hinweis: gleiche Form wie die Meldungen, aber ohne Signalfarbe —
   er ist keine Rueckmeldung auf etwas, das der Gast getan hat. */
.pas-meldung--hinweis {
	background: var(--pas-dunst);
	border: 1px solid var(--pas-linie);
	color: var(--pas-text);
}
.pas-meldung--hinweis a { color: var(--pas-tat); font-weight: 600; text-decoration: none; }

.pas-meldung--schlecht {
	background: #fdf3f2;
	border: 1px solid #a4281f;
	color: #6d1a14;   /* auf #fdf3f2 = 9,13:1 */
}

.pas-meldung--schlecht ul { margin: var(--pas-8) 0 0; padding-left: var(--pas-24); }
.pas-meldung--schlecht li { margin-bottom: var(--pas-4); }
.pas-meldung--schlecht a { color: #6d1a14; font-weight: 600; }
.pas-meldung--schlecht:focus-visible { outline: 3px solid #a4281f; outline-offset: 3px; }

.pas-meldung__tel { color: var(--pas-tat); font-weight: 600; }

/* ---- Fuss des Formulars ------------------------------------------------ */

.pas-formular__pflicht {
	font-size: .875rem;
	color: var(--pas-leise);
	margin: 0;
}

.pas-formular__fuss { display: flex; }

.pas-knopf--gross {
	min-height: 52px;
	padding-inline: var(--pas-32);
	font-size: 1rem;
}

.pas-knopf--gross:disabled { opacity: .6; cursor: progress; }

/* Am Telefon ueber die volle Breite — ein 180 px breiter Knopf in einer
   390 px breiten Spalte sieht aus wie ein Versehen. */
@media (max-width: 560px) {
	.pas-formular__fuss { display: block; }
	.pas-knopf--gross { width: 100%; }
	.pas-kontaktkarte { padding: var(--pas-24); }
}

/* ---- Bedingte Felder und Honigtopf ------------------------------------- */

/* Der Ausgangszustand ist SICHTBAR — versteckt wird erst per Skript.
   Bricht das Skript, sieht der Gast zwei Felder zu viel und kann trotzdem
   absenden. Andersherum waere ein Feld unerreichbar, ohne dass eine
   Meldung es verriete. */
.pas-bedingt--aus { display: none; }

/* Der Honigtopf darf NICHT `display: none` sein: Manche Bots werten genau
   das aus und lassen das Feld dann in Ruhe. Er wird stattdessen aus dem
   sichtbaren Bereich geschoben. */
.pas-honig {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- Buchungsstrecke: Rahmen um das HBook-Formular --------------------- */

/* Das Formular selbst gestaltet `pas-hbook-anpassungen`. Hier steht nur,
   wie es auf der Seite sitzt — die beiden Plugins fassen sich nicht
   gegenseitig an. */
.pas-buchung { margin-bottom: var(--pas-48); }

.pas-buchung__zusagen {
	list-style: none;
	margin: 0 0 var(--pas-96);
	padding: var(--pas-24);
	background: var(--pas-dunst);
	border: 1px solid var(--pas-linie);
	border-radius: var(--pas-r-gross);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: var(--pas-12) var(--pas-24);
	color: var(--pas-text);
	font-size: .9375rem;
}

/* Das Häkchen ist Schmuck und wird vom Vorleseprogramm übersprungen —
   deshalb ::before und nicht ein Zeichen im Text. */
.pas-buchung__zusagen li {
	display: flex;
	align-items: flex-start;
	gap: var(--pas-8);
	line-height: 1.5;
}

.pas-buchung__zusagen li::before {
	content: "";
	/* Dasselbe Zeichen wie `pas_proto_icon('haken')`, hier als eingebettete
	   Grafik. Ein `content: "✓"` waere wieder ein Schriftzeichen — auf jedem
	   System anders breit und anders schwer. */
	width: 1em; height: 1em;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: var(--pas-haken) center / contain no-repeat;
	        mask: var(--pas-haken) center / contain no-repeat;
	color: var(--pas-tat);
	font-weight: 700;
	flex: 0 0 auto;
}

/* Die Rufnummer bricht NIE mitten durch — eine halbe Telefonnummer am
   Zeilenende ist keine Telefonnummer. */
.pas-buchung__zusagen a { color: var(--pas-tat); font-weight: 600; white-space: nowrap; }

/* Die Öffnungszeit ist ein Zusatz, kein Teil des Satzes — deshalb eigene
   Zeile statt eines Kommas, das nach einem Umbruch allein dasteht. */
.pas-buchung__dazu { display: block; color: var(--pas-leise); font-size: .875rem; }

.pas-buchung__zurueck { margin: 0 0 var(--pas-96); }

.pas-buchung__zurueck .pas-knopf {
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}


/* ==========================================================================
   ICONS — eingebettet, ein Raster, eine Strichstaerke
   --------------------------------------------------------------------------
   Vorher waren es Schriftzeichen (☎ ✉ ★). Die haben keine feste Groesse:
   Jedes System holt sie aus einer anderen Schrift, macOS sogar als farbiges
   Emoji, das `color` ignoriert. Deshalb standen sie ungleich gross
   nebeneinander — mit CSS nicht zu heilen, denn `font-size` trifft die
   Schrift, nicht das Bild darin.

   Jetzt: eigene SVG auf einem 24er-Raster, Groesse in Pixeln gesetzt,
   Farbe ueber `currentColor`. Was fuer die Schriften gilt, gilt auch hier —
   was zum Erscheinungsbild gehoert, gehoert ins Projekt.
   ========================================================================== */

.pas-icon {
	flex: 0 0 auto;              /* schrumpft nie, auch nicht in engen Zeilen */
	vertical-align: -0.15em;     /* sitzt auf der Grundlinie des Textes */
}

/* In einem Knopf ist das Icon Teil der mittig zentrierten Gruppe. */
.pas-knopf .pas-icon { margin-right: var(--pas-4); }

/* Sternreihe: fuenf gleiche Icons, der leere ist derselbe Pfad in Blass. */
.pas-sterne { display: inline-flex; gap: 2px; align-items: center; }
.pas-stern  { display: inline-flex; color: #8a6d1f; }   /* 6,07:1 auf Weiss */
.pas-stern--leer { color: var(--pas-linie); }

/* ---- Hinweisfenster (natives <dialog>) ---------------------------------
   Kontaktseite, Vorgabe Dimi 01.10.2026: Fenster mit unscharfem
   Hintergrund und EINEM Knopf „Ok, verstanden". */
.pas-fenster {
	width: min(480px, calc(100% - 2 * var(--pas-16)));
	max-height: calc(100dvh - 2 * var(--pas-16));
	margin: auto;
	padding: var(--pas-32) var(--pas-24) var(--pas-24);
	border: 0;
	border-radius: var(--pas-r);
	background: var(--pas-weiss);
	color: var(--pas-text);
	box-shadow: 0 24px 64px rgb(0 0 0 / .22);
	overflow: auto;
}
.pas-fenster::backdrop {
	background: rgb(22 28 20 / .35);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.pas-fenster .pas-fenster__titel {
	margin: 0 0 var(--pas-12);
	font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem);
	line-height: 1.2;
	color: var(--pas-ink);
}
.pas-fenster .pas-fenster__text { margin: 0 0 var(--pas-24); line-height: 1.6; }
/* Volle Fensterbreite nutzen — die Grundregeln fuer Ueberschrift und Absatz
   (Ausgleich, Lesebreite) brachen den kurzen Text sonst schmal um. */
.pas-fenster .pas-fenster__titel,
.pas-fenster .pas-fenster__text { max-width: none; text-wrap: wrap; }
.pas-fenster .pas-fenster__text a { color: var(--pas-tat); font-weight: 600; text-decoration: none; }
.pas-fenster .pas-fenster__fuss { display: flex; justify-content: center; margin: 0; }
.pas-fenster .pas-fenster__fuss .pas-knopf { min-width: 200px; }

@media (prefers-reduced-motion: no-preference) {
	.pas-fenster[open] { animation: pas-fenster-auf .25s var(--pas-eas, ease-out); }
	.pas-fenster[open]::backdrop { animation: pas-fenster-hg .25s ease-out; }
}
@keyframes pas-fenster-auf { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes pas-fenster-hg  { from { opacity: 0; } }