/* Entwurf A2, Lichtung überarbeitet. Grundlage ist A (Cremeweiß, Olivgrün, zarte Serifen). Dazu kommen der Foto-Hero aus C, die runden
   Kacheln aus B, überblendete Raumbilder hinter den Textkacheln und auf der Seite Impressionen ein Fotokranz je Zimmer. */
h1, h2, h3 { font-family: var(--titel-schrift); font-weight: var(--titel-gewicht); font-variant-numeric: lining-nums; line-height: 1.08; letter-spacing: -0.005em; color: var(--text); }
h1 { font-size: clamp(2.7rem, 7vw, 4.6rem); margin-bottom: 0.4em; }
h2 { font-size: clamp(2.1rem, 4.5vw, 3rem); margin-bottom: 0.5em; }
h3 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: 0.4em; }
p { margin-bottom: 1em; }
.lead { font-size: 1.15rem; color: var(--gedaempft); max-width: 34rem; }
.eyebrow { margin-bottom: 1.2rem; font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gedaempft); }
.abschnitt { padding: 3.5rem 0; }
.nachsatz { margin: 1.5rem 0 0; font-size: 0.95rem; color: var(--gedaempft); }

.hinweisband { margin: 0; padding: 0.45rem 24px; background: var(--text); color: var(--grund); font-size: 0.82rem; text-align: center; }

/* Kopf: bleibt beim Scrollen oben stehen, damit der Knopf "Verfügbarkeit prüfen" immer zu sehen ist (Wunsch Benjamin, 2026-10-05).
   Unter 1180 px zwei Zeilen: oben Marke und Knopf, darunter das Menü in einer Zeile (auf dem Handy zum Wischen). Ab 1180 passt alles in eine Zeile.
   --kopf-hoehe ist die Höhe des Kopfes je Breite (knapp unter dem gemessenen Wert, damit keine Lücke entsteht). Sie hält Sprungziele und die
   anderen festen Elemente (Zimmerleiste, Bild neben dem Text) unter dem Kopf. Den Abstand zur Leiste von WordPress setzt theme.css (--admin-hoehe). */
:root { --kopf-hoehe: 5.95rem; }
html { scroll-padding-top: calc(var(--admin-hoehe, 0px) + var(--kopf-hoehe) + 0.5rem); }
.kopf { --navi-hoehe: 2.5rem; position: sticky; top: var(--admin-hoehe, 0px); z-index: 50; border-bottom: 1px solid var(--linie); background: var(--grund); }
.kopf-innen { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 1rem; padding-top: 0.6rem; padding-bottom: 0; }
.marke { grid-column: 1; grid-row: 1; min-width: 0; display: inline-flex; align-items: center; justify-self: start; gap: 0.6rem; font-family: var(--titel-schrift); font-size: 1.45rem; font-weight: 500; text-decoration: none; color: var(--akzent); }
.kopf nav { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
.navi { display: flex; flex-wrap: nowrap; align-items: center; gap: 0 1.15rem; height: var(--navi-hoehe); margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.navi::-webkit-scrollbar { display: none; }
.navi a { display: inline-block; padding: 0.55rem 0; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid transparent; }
.navi a:hover, .navi a[aria-current="page"] { border-bottom-color: var(--akzent); color: var(--akzent); }
.navi a:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
.kopf .knopf--klein { grid-column: 2; grid-row: 1; white-space: nowrap; }

/* Knöpfe */
.knopf { display: inline-block; padding: 1rem 1.9rem; border: 1px solid var(--akzent); border-radius: 2px; background: var(--akzent); color: var(--akzent-text); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; text-align: center; cursor: pointer; }
.knopf:hover { filter: brightness(1.12); }
.knopf--klein { padding: 0.7rem 1.2rem; }
.knopf--zweit { background: transparent; color: var(--akzent); }
.knopf--zweit:hover { background: var(--hell); filter: none; }
.textlink { color: var(--akzent); text-underline-offset: 0.25em; font-weight: 600; }

/* Hero aus Birke: Foto über die ganze Breite, die Textkarte ragt von unten hinein */
.hero { position: relative; padding: 0 0 2.5rem; }
.hero-bild img { width: 100%; height: 52vh; min-height: 340px; max-height: 760px; object-fit: cover; object-position: 50% 42%; }
.hero-karte-huelle { position: relative; margin-top: -4.5rem; }
.hero-text { max-width: 36rem; padding: 2rem 1.6rem; background: var(--grund); border: 1px solid var(--linie); border-top: 3px solid var(--akzent); }
.hero-text h1 { font-size: clamp(2.3rem, 5.2vw, 3.5rem); margin-bottom: 0.4em; }
.hero-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.8rem; margin-top: 1.6rem; }

/* Fakten */
.fakten { padding: 0; }
.fakten .huelle { padding-top: 2.2rem; padding-bottom: 2.2rem; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.fakten-liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.8rem 1rem; }
.fakten-liste li { display: flex; flex-direction: column; align-items: center; text-align: center; }
.fakten-liste strong { font-variant-numeric: lining-nums; font-family: var(--titel-schrift); font-size: 3.4rem; font-weight: 500; line-height: 1; color: var(--akzent); }
.fakten-liste span { margin-top: 0.4rem; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gedaempft); }
.fakten .nachsatz { text-align: center; margin-top: 1.4rem; }

/* Räume: Bild und Karte im Wechsel, die Karte ragt ins Bild. Hinter der Karte blenden die Fotos des Zimmers ineinander über. */
.raeume-liste { display: grid; gap: 3.5rem; margin-top: 2rem; }
.raum { display: grid; gap: 0; }
.raum-bild { position: relative; overflow: hidden; background: var(--hell); aspect-ratio: 4 / 5; }
.raum-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease-in-out; }
.raum-bild img.aktiv { opacity: 1; }
.raum-text { position: relative; margin: -3rem 1rem 0; padding: 1.8rem; background: var(--flaeche); border: 1px solid var(--linie); }
.raum-text p:last-of-type { margin-bottom: 0.6rem; }
.raum-text .textlink { display: inline-block; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--akzent); }

/* Ausstattung: runde Kacheln aus Fjord */
.ausstattung-liste li { padding: 1.5rem 1.3rem; border: 1.5px solid var(--linie); border-radius: 1.4rem; background: var(--flaeche); }
.ausstattung-liste strong { font-weight: 500; font-size: 1.45rem; }

/* Vorschau */
.vorschau-kopf { max-width: 36rem; margin-bottom: 2rem; }
.vorschau-liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
.vorschau-liste img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }

/* Einstiege */
.einstiege { background: var(--flaeche); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.einstiege-liste { display: grid; gap: 1.5rem; margin-top: 2rem; }
.einstieg { background: var(--grund); border: 1px solid var(--linie); }
.einstieg-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.einstieg-text { padding: 1.6rem; }

/* Umgebung (Teaser auf der Startseite): dieselben runden Kacheln */
.umgebung-liste li { padding: 1.6rem; border: 1.5px solid var(--linie); border-radius: 1.4rem; background: var(--flaeche); }
.umgebung .lead { max-width: 42rem; }

/* Verfügbarkeit */
.verfuegbarkeit { background: var(--akzent); color: var(--akzent-text); }
.verfuegbarkeit h2 { color: var(--akzent-text); }
.verf-innen { display: grid; gap: 1.5rem; align-items: center; }
.verfuegbarkeit .offen { background: rgba(255, 255, 255, 0.22); }
.verfuegbarkeit .knopf { background: var(--flaeche); border-color: var(--flaeche); color: var(--akzent); justify-self: start; }

.lage-raster { display: grid; gap: 2.5rem; }

/* Lage und Anfahrt: zwei Karten als Bilder (eigene Zeichnungen aus OpenStreetMap-Daten, werkzeuge/karte/), darunter die Anfahrtswege als nummerierte Liste */
.lage-kontakt--karten .adresse { margin-bottom: 0.4rem; }
.karten-raster { display: grid; gap: 2.2rem; margin-top: 1.8rem; }
.karte { margin: 0; }
.karte img { display: block; width: 100%; height: auto; background: var(--grund); border: 1px solid var(--linie); border-radius: 2px; box-shadow: 0 1px 10px rgba(46, 42, 36, 0.12); }
.karte figcaption { margin-top: 0.9rem; font-size: 0.95rem; line-height: 1.5; color: var(--gedaempft); }
.anfahrt { margin-top: 3rem; }
.anfahrt h3 { margin-bottom: 0.6em; }
.anfahrt-liste { display: grid; gap: 1.6rem; margin: 0 0 1.4rem; padding: 0; list-style: none; counter-reset: weg; }
.anfahrt-liste li { display: grid; grid-template-columns: 2.4rem 1fr; gap: 0 0.9rem; counter-increment: weg; }
.anfahrt-liste li::before { content: counter(weg); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--akzent); color: var(--akzent-text); font-size: 1rem; font-weight: 700; }
.anfahrt-liste strong { font-size: 1.05rem; color: var(--text); }
.anfahrt-liste p { margin: 0.35em 0 0; }
.anfahrt-liste .anfahrt-mass { font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em; color: var(--akzent); }
.karte-hinweis { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--gedaempft); }
.karte-hinweis a { color: var(--akzent); }
.fuss { padding: 1.6rem 0; border-top: 1px solid var(--linie); font-size: 0.9rem; color: var(--gedaempft); }

/* Seite Impressionen: Zimmerwahl oben, darunter jedes Zimmer als Fotokranz um eine Textkachel */
.seitenkopf { padding-bottom: 1.5rem; }
.raumwahl { position: sticky; top: calc(var(--admin-hoehe, 0px) + var(--kopf-hoehe)); z-index: 10; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); background: rgba(246, 241, 232, 0.95); backdrop-filter: blur(6px); }
.raumwahl ul { display: flex; gap: 0 1.6rem; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.raumwahl ul::-webkit-scrollbar { display: none; }
.raumwahl a { display: block; padding: 0.95rem 0; border-bottom: 2px solid transparent; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: var(--gedaempft); }
.raumwahl a:hover, .raumwahl a[aria-current="true"] { border-bottom-color: var(--akzent); color: var(--akzent); }

.raum-kranz { padding: 1.6rem 0 2.4rem; scroll-margin-top: 3.4rem; }
.kranz-huelle { container-type: inline-size; }
.kranz-titel { position: relative; z-index: 3; margin: 0 0 1.2rem; padding: 1.3rem 1.4rem; background: var(--flaeche); border: 1px solid var(--linie); text-align: center; }
.kranz-titel h2 { margin-bottom: 0.15em; font-size: clamp(2rem, 3.4vw, 2.6rem); }
.kranz-titel p { margin: 0; font-size: 0.95rem; line-height: 1.45; color: var(--gedaempft); }
.kranz-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; margin: 0; padding: 0; list-style: none; }
.kranz-fotos a { display: block; }
.kranz-fotos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: 0 1px 10px rgba(46, 42, 36, 0.12); }
.raum-kranz[data-n="1"] .kranz-fotos { grid-template-columns: minmax(0, 1fr); width: 64%; margin-inline: auto; }

/* Auf dem Handy: zwei Spalten ohne Überlappung und ohne Drehung. Bleibt ein Foto übrig, steht es in der Mitte. */
@media (max-width: 799px) {
	.kranz-fotos li:last-child:nth-child(odd):not(:only-child) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 0.4rem); }
}

/* Ab Tablet: Fotos gleichmäßig um die Textkachel, symmetrisch zur senkrechten Achse, ohne Überlappung und ungedreht. Winkel = Start + Nummer * 360° / Zahl der Fotos.
   Maße in cqw (Hundertstel der Kranzbreite): --rx und --ry sind die Halbachsen der Ellipse, --b die Fotobreite (Höhe = 1,25 b), --h die Höhe des Kranzes, --py die
   senkrechte Verschiebung des Ganzen, --dy und --ty für ein einzelnes Foto über der Kachel. Die Zahlen sind in kranz.mjs berechnet und in pruefen.test.mjs
   geprüft (kein Überlappen, auch nicht mit der größten Textkachel, spiegelsymmetrisch, innerhalb der Breite). Wer sie ändert, lässt die Tests laufen. */
@media (min-width: 800px) {
	.kranz { position: relative; height: calc(var(--h, 86) * 1cqw); }
	.kranz-titel { position: absolute; left: 50%; top: calc(50% + (var(--py, 0) + var(--ty, 0)) * 1cqw); transform: translate(-50%, -50%); width: clamp(16rem, 31cqw, 27rem); margin: 0; padding: 1.5rem 1.6rem; }
	.kranz-fotos { display: block; }
	.kranz-fotos li { position: absolute; z-index: 1; width: calc(var(--b) * 1cqw); margin: 0; --w: calc(var(--s) + var(--i) * 360deg / var(--n));
		left: calc(50% + cos(var(--w)) * var(--rx) * 1cqw);
		top: calc(50% + sin(var(--w)) * var(--ry) * 1cqw + var(--py, 0) * 1cqw + var(--dy, 0) * 1cqw);
		transform: translate(-50%, -50%) rotate(0deg) scale(1); }
	.kranz-fotos li:focus-within { z-index: 2; }
	.raum-kranz[data-n="1"] .kranz-fotos { width: auto; margin: 0; }

	.raum-kranz[data-n="8"] { --h: 94; --rx: 41; --ry: 35.5; --b: 19.5; --s: -67.5deg; }
	.raum-kranz[data-n="7"] { --h: 88; --rx: 40; --ry: 31.5; --b: 19; --s: -90deg; --py: 1.6; }
	.raum-kranz[data-n="6"] { --h: 94; --rx: 31.5; --ry: 35.5; --b: 22.5; --s: -60deg; }
	.raum-kranz[data-n="5"] { --h: 94; --rx: 33; --ry: 34; --b: 22.5; --s: -90deg; --py: 3.2; }
	.raum-kranz[data-n="4"] { --h: 78; --rx: 48; --ry: 27; --b: 28; --s: -45deg; }
	.raum-kranz[data-n="3"] { --h: 87; --rx: 39.5; --ry: 31; --b: 28.5; --s: -90deg; --py: 7.8; }
	.raum-kranz[data-n="2"] { --h: 42; --rx: 34.5; --ry: 0; --b: 29; --s: 0deg; }
	.raum-kranz[data-n="1"] { --h: 65; --rx: 0; --ry: 0; --b: 30; --s: 0deg; --dy: -11.9; --ty: 20; }
}

/* Nur mit Maus und breitem Fenster: Das Foto unter dem Zeiger richtet sich gerade, wächst und kommt vor alle anderen. Beim Weggehen geht es zurück.
   Der Klick öffnet weiter die Vergrößerung. Auf Telefon und Tablet ohne Maus gibt es das nicht. --hov ist der Vergrößerungsfaktor, kleine Fotos wachsen stärker. */
@media (min-width: 800px) and (hover: hover) and (pointer: fine) {
	.raum-kranz { --hov: 1.6; overflow-x: clip; }
	.raum-kranz[data-n="8"], .raum-kranz[data-n="7"] { --hov: 1.7; }
	.raum-kranz[data-n="4"] { --hov: 1.4; }
	.raum-kranz[data-n="3"] { --hov: 1.4; }
	.raum-kranz[data-n="2"] { --hov: 1.3; }
	.raum-kranz[data-n="1"] { --hov: 1.25; }
	.kranz-fotos li { transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), z-index 0s linear 0.45s; }
	.kranz-fotos img { transition: box-shadow 0.45s ease; }
	.raum-kranz[data-n] .kranz-fotos li:nth-child(n):hover { z-index: 20; transform: translate(-50%, -50%) rotate(0deg) scale(var(--hov)); transition-delay: 0s, 0s; }
	.kranz-fotos li:hover img { box-shadow: 0 16px 40px rgba(46, 42, 36, 0.3); }
}

/* Seite Umgebung */
.anker a { border: 0; border-bottom: 1px solid var(--linie); padding: 0.3rem 0; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; }
.anker { gap: 0.4rem 1.6rem; }
.blick { padding: 0; }
.blick .huelle { padding-top: 2.6rem; padding-bottom: 2.6rem; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.blick h2 { font-size: 1.1rem; font-family: var(--text-schrift); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gedaempft); }
.ziele-liste li { padding: 1.3rem 1.2rem; border: 1.5px solid var(--linie); border-radius: 1.4rem; background: var(--flaeche); }
.thema { border-bottom: 1px solid var(--linie); }
.thema:last-of-type { border-bottom: 0; }
.thema .eyebrow { color: var(--akzent); }
.punkte li { padding-top: 1rem; border-top: 1px solid var(--linie); }
.punkte h3 { font-size: 1.5rem; }
.punkte p { color: var(--gedaempft); }
.thema-bild .platzhalter { border: 1px solid var(--linie); background: var(--hell); border-radius: 2px; font-weight: 400; font-family: var(--titel-schrift); font-size: 1.4rem; color: var(--gedaempft); }
.thema-bild img { border-radius: 2px; box-shadow: 0 1px 10px rgba(46, 42, 36, 0.12); }
.thema--monteure { background: var(--flaeche); }

@media (max-width: 719px) {
	:root { --kopf-hoehe: 5.35rem; }
	.kopf-innen { gap: 0 0.7rem; padding-top: 0.45rem; }
	.marke { gap: 0.45rem; font-size: 1.05rem; line-height: 1.05; }
	.marke span { max-width: 6.6rem; }
	.kopf .knopf--klein { padding: 0.55rem 0.9rem; font-size: 0.7rem; letter-spacing: 0.08em; }
	.navi { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.6rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 1.6rem), transparent); }
}

@media (max-width: 359px) {
	.marke span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.kopf .knopf--klein { padding: 0.55rem 0.7rem; letter-spacing: 0.04em; }
}

@media (min-width: 1180px) {
	:root { --kopf-hoehe: 4.55rem; }
	.kopf-innen { display: flex; justify-content: space-between; gap: 0 1.4rem; padding-top: 0.85rem; padding-bottom: 0.85rem; }
	.navi { height: auto; overflow: visible; flex-wrap: wrap; gap: 0.25rem 1.15rem; }
	.navi a { padding: 0.3rem 0; }
}

@media (min-width: 720px) {
	.fakten-liste { grid-template-columns: repeat(4, 1fr); }
	.vorschau-liste { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
	.einstiege-liste { grid-template-columns: repeat(2, 1fr); }
	.verf-innen { grid-template-columns: 1fr auto; }
	.lage-raster { grid-template-columns: 1.4fr 1fr; }
	.lage-kontakt--karten .lage-raster { grid-template-columns: 1fr; }
}

@media (min-width: 900px) {
	.karten-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.6rem; align-items: start; }
	.anfahrt-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
}

@media (min-width: 960px) {
	.abschnitt { padding: 5.5rem 0; }
	.hero { padding: 0 0 4rem; }
	.hero-bild img { height: 70vh; }
	.hero-karte-huelle { margin-top: -9rem; }
	.hero-text { padding: 3rem; }
	.raeume-liste { gap: 5.5rem; }
	.raum { grid-template-columns: repeat(12, 1fr); align-items: center; }
	.raum-bild { grid-column: 1 / 8; grid-row: 1; }
	.raum-text { grid-column: 7 / 13; grid-row: 1; margin: 0; padding: 2.8rem; }
	.raum:nth-child(even) .raum-bild { grid-column: 6 / 13; }
	.raum:nth-child(even) .raum-text { grid-column: 1 / 7; }
	.vorschau-liste li:nth-child(3n + 2) { margin-top: 2.4rem; }
	.raum-kranz { padding: 2rem 0 3rem; }
}

@media (prefers-reduced-motion: reduce) {
	.raum-bild img, .kranz-fotos li, .kranz-fotos img { transition: none; }
}
@media (max-width: 359px) {
	.ziele-liste { grid-template-columns: 1fr; }
}

/* Seiten Ferienhaus, Monteurwohnung und Kontakt: Seitenkopf mit Foto, Zimmerkarten, Preis und Bedingungen, Entfernungstabelle, Fragen, Schritte der Anfrage */
.abschnitt--flaeche { background: var(--flaeche); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.seitenkopf-raster { display: grid; gap: 2.2rem; }
.seitenkopf .lead { max-width: 38rem; }
.seitenkopf .hero-knoepfe { margin-top: 1.6rem; }
.seitenkopf .anker { margin-top: 2.2rem; }
.seitenkopf-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; box-shadow: 0 1px 10px rgba(46, 42, 36, 0.12); }
.thema-bild--hoch img { aspect-ratio: 4 / 5; }

.zimmer-liste { display: grid; gap: 1.5rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.zimmer-karte { background: var(--flaeche); border: 1px solid var(--linie); }
.zimmer-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.zimmer-text { padding: 1.2rem 1.4rem 1.4rem; }
.zimmer-text h3 { margin-bottom: 0.2em; font-size: 1.7rem; }
.zimmer-text p { margin: 0 0 0.5em; color: var(--gedaempft); }
.zimmer-text .zimmer-betten { margin: 0.8rem 0 0; font-weight: 600; color: var(--text); }
.zimmer-hinweis { max-width: 40rem; margin: 1.4rem 0 0; padding: 0.9rem 1.2rem; border-left: 3px solid var(--akzent); background: var(--flaeche); color: var(--text); }
.gemeinsam { margin-top: 3rem; }
.gemeinsam h3 { font-size: 1.7rem; }
.gemeinsam-liste { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0 1.4rem; padding: 0; list-style: none; }
.gemeinsam-liste li { padding: 0.55rem 1.1rem; border: 1.5px solid var(--linie); border-radius: 999px; background: var(--flaeche); font-size: 0.97rem; }

.konditionen-liste, .kontakt-liste { margin: 2rem 0 0; border-top: 1px solid var(--linie); }
.konditionen-liste > div, .kontakt-liste > div { display: grid; gap: 0.15rem 2rem; padding: 1.1rem 0; border-bottom: 1px solid var(--linie); }
.konditionen-liste dt, .kontakt-liste dt { font-family: var(--titel-schrift); font-size: 1.55rem; line-height: 1.2; color: var(--text); }
.konditionen-liste dd, .kontakt-liste dd { margin: 0; color: var(--gedaempft); }
.kontakt-liste address.adresse { margin: 0; color: var(--text); }

.entfernungen-tabelle { width: 100%; max-width: 52rem; margin-top: 1.8rem; border-collapse: collapse; font-variant-numeric: lining-nums tabular-nums; }
.entfernungen-tabelle th, .entfernungen-tabelle td { padding: 0.85rem 1rem 0.85rem 0; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.entfernungen-tabelle thead th { border-bottom-color: var(--text); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gedaempft); }
.entfernungen-tabelle tbody th { font-weight: 500; color: var(--text); }
.entfernungen-tabelle td { color: var(--gedaempft); }

.anfahrt-abschnitt .karte { margin-top: 2rem; }
.anfahrt-abschnitt .anfahrt { margin-top: 2.6rem; }

.fragen-liste { margin-top: 2rem; border-top: 1px solid var(--linie); }
.fragen-liste details { border-bottom: 1px solid var(--linie); }
.fragen-liste summary { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; cursor: pointer; list-style: none; font-family: var(--titel-schrift); font-size: 1.5rem; line-height: 1.2; color: var(--text); }
.fragen-liste summary::-webkit-details-marker { display: none; }
.fragen-liste summary::after { content: "+"; flex: none; font-family: var(--text-schrift); font-size: 1.6rem; line-height: 1; color: var(--akzent); }
.fragen-liste details[open] summary::after { content: "\2212"; }
.fragen-liste details p { max-width: 42rem; margin: 0 0 1.3rem; color: var(--gedaempft); }

.schritte { display: grid; gap: 1.2rem; margin: 2rem 0 0; padding: 0; list-style: none; counter-reset: schritt; }
.schritte li { counter-increment: schritt; padding: 1.5rem; border: 1.5px solid var(--linie); border-radius: 1.4rem; background: var(--flaeche); }
.schritte li::before { content: counter(schritt); display: grid; place-items: center; width: 2.3rem; height: 2.3rem; margin-bottom: 0.9rem; border-radius: 50%; background: var(--akzent); color: var(--akzent-text); font-weight: 700; }
.schritte h3 { margin-bottom: 0.3em; font-size: 1.6rem; }
.schritte p { margin: 0; color: var(--gedaempft); }

@media (min-width: 560px) {
	.entfernungen-tabelle td { white-space: nowrap; }
}
@media (min-width: 720px) {
	.zimmer-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.konditionen-liste > div, .kontakt-liste > div { grid-template-columns: 17rem 1fr; align-items: baseline; }
	.schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	.seitenkopf--foto .seitenkopf-raster { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 4rem; align-items: center; }
	.seitenkopf-bild img { aspect-ratio: 4 / 5; }
	.schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
	.zimmer-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.zimmer-bild img { aspect-ratio: 4 / 5; }
}

/* Lange Wörter in der Überschrift (Monteurwohnung) dürfen auf schmalen Telefonen nicht über den Rand laufen */
.seitenkopf-text { min-width: 0; }
h1 { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 359px) {
	h1 { font-size: 2.1rem; }
}

/* Entfernungstabelle auf schmalen Telefonen: kleinere Schrift und Kopfzeile, Wörter dürfen im Notfall brechen, damit nichts über den Rand läuft */
@media (max-width: 479px) {
	.entfernungen-tabelle { font-size: 0.92rem; }
	.entfernungen-tabelle th, .entfernungen-tabelle td { padding-right: 0.5rem; overflow-wrap: anywhere; }
	.entfernungen-tabelle thead th { font-size: 0.66rem; letter-spacing: 0.05em; }
	.entfernungen-tabelle td:nth-child(2) { white-space: nowrap; }
}

/* Seite Ferienhaus: Das Jahr am Hünstein (drei Karten) und Ausflüge mit der Fahrzeit als Zahl links */
.jahr-liste { display: grid; gap: 1rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.jahr-karte { padding: 1.6rem; border: 1.5px solid var(--linie); border-radius: 1.4rem; background: var(--grund); }
.jahr-karte h3 { margin-bottom: 0.4em; font-size: 1.9rem; }
.jahr-karte p { margin: 0 0 0.9rem; font-size: 0.97rem; color: var(--gedaempft); }
.jahr-karte p:last-child { margin-bottom: 0; }
.jahr-karte strong { color: var(--text); }
.ausfluege-liste { margin: 2rem 0 1.4rem; padding: 0; list-style: none; border-top: 1px solid var(--linie); }
.ausflug { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 0 1.2rem; align-items: baseline; padding: 1.2rem 0; border-bottom: 1px solid var(--linie); }
.ausflug-zeit { font-family: var(--titel-schrift); font-size: 1.7rem; line-height: 1; font-variant-numeric: lining-nums; color: var(--akzent); }
.ausflug h3 { margin-bottom: 0.15em; font-size: 1.6rem; }
.ausflug p { margin: 0; color: var(--gedaempft); }
@media (min-width: 900px) {
	.jahr-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
	.ausflug { grid-template-columns: 8rem minmax(0, 1fr); }
	.ausflug-zeit { font-size: 2.2rem; }
}

/* Seite Belegung: Im Entwurf steht an der Stelle des Kalenders und des Anfrageformulars (Plugin fh-belegung) eine beschriftete Fläche. Im Theme ersetzt der Shortcode sie. */
.kalender-platzhalter { margin: 0; padding: 3rem 1.5rem; border: 1.5px dashed var(--linie); border-radius: 1.4rem; background: var(--grund); color: var(--gedaempft); text-align: center; }