/* --------------------------------------------------------------------------
   Styles der dynamischen Blöcke und der Patterns.

   Getrennt von style.css, damit die Basis lesbar bleibt. Farben, Abstände und
   Schriften kommen ausschließlich aus den theme.json-Variablen – hier steht
   kein einziger Hexwert.
   -------------------------------------------------------------------------- */

/* 0. Gemeinsames --------------------------------------------------------- */

/* Für Screenreader sichtbar, für Augen nicht. Block-Themes bringen das nicht
   mit, wir benutzen es an vielen Stellen. */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Hinweis, wenn ein Block im Editor keine Daten hat. Im Frontend erscheint er
   nie – dort bleibt der Block einfach leer. */
.ssl-block-leer {
	border: 1px dashed var(--wp--custom--ssl--hairline);
	padding: var(--wp--preset--spacing--50);
}

.ssl-block-hinweis {
	color: var(--wp--custom--ssl--sekundaertext);
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

.ssl-rechts {
	text-align: right;
}

/* Tabellen im Haus-Stil: Haarlinien, keine Rahmen, Zahlen rechts. */
.ssl-faktenbox__tabelle,
.ssl-preise__tabelle,
.ssl-preise__nebenkosten {
	border-collapse: collapse;
	width: 100%;
}

.ssl-faktenbox__tabelle th,
.ssl-faktenbox__tabelle td,
.ssl-preise__tabelle th,
.ssl-preise__tabelle td,
.ssl-preise__nebenkosten th,
.ssl-preise__nebenkosten td {
	border-bottom: 1px solid var(--wp--custom--ssl--hairline);
	padding: 0.7em 0.9em 0.7em 0;
	text-align: left;
	vertical-align: top;
}

.ssl-faktenbox__tabelle th[scope="row"],
.ssl-preise__nebenkosten th[scope="row"] {
	color: var(--wp--custom--ssl--sekundaertext);
	font-weight: 400;
	white-space: nowrap;
	width: 34%;
}

/* Breite Tabellen dürfen scrollen, aber niemals die Seite schieben. */
.ssl-preise__tabelle,
.ssl-faktenbox__tabelle {
	display: block;
	overflow-x: auto;
}

@media (min-width: 40em) {
	.ssl-preise__tabelle,
	.ssl-faktenbox__tabelle {
		display: table;
	}
}

/* 1. Faktenbox ------------------------------------------------------------ */

.ssl-faktenbox__titel {
	margin-bottom: 0.6em;
}

.ssl-faktenbox__tabelle td {
	font-family: var(--wp--preset--font-family--grotesk);
}

/* 2. Preistabelle --------------------------------------------------------- */

.ssl-preise__tabelle thead th {
	border-bottom-width: 1px;
	color: var(--wp--custom--ssl--sekundaertext);
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.ssl-preise__tabelle tbody th[scope="row"] {
	color: inherit;
	font-weight: 500;
	white-space: normal;
}

.ssl-preise__hinweis,
.ssl-preise__kurtaxe {
	color: var(--wp--custom--ssl--sekundaertext);
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
	max-width: var(--wp--custom--ssl--lesbreite);
}

/* Der Wäschehinweis ist der wichtigste Satz auf der Preisseite. */
.ssl-preise__waesche {
	background: var(--wp--preset--color--duene);
	border-left: 2px solid var(--wp--preset--color--sonne);
	margin-block: var(--wp--preset--spacing--50);
	max-width: var(--wp--custom--ssl--lesbreite);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

/* 3. Bewertungen ---------------------------------------------------------- */

.ssl-bewertungen__schnitt {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	margin-bottom: 0.8em;
}

.ssl-bewertungen__zahl {
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: clamp(2.2rem, 1.6rem + 2.5vw, 3.4rem);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1;
}

.ssl-bewertungen__liste {
	list-style: none;
	margin: 0;
	max-width: 34rem;
	padding: 0;
}

.ssl-bewertungen__liste li {
	align-items: baseline;
	border-bottom: 1px solid var(--wp--custom--ssl--hairline);
	display: flex;
	flex-wrap: wrap;
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
	gap: 0.4em 1em;
	justify-content: space-between;
	padding: 0.6em 0;
}

.ssl-bewertungen__quelle {
	color: var(--wp--custom--ssl--sekundaertext);
}

/* 4. Gästestimmen --------------------------------------------------------- */

.ssl-stimmen {
	position: relative;
}

.ssl-stimmen__spur {
	display: grid;
	gap: 24px;
	grid-auto-columns: minmax(min(84vw, 26rem), 1fr);
	grid-auto-flow: column;
	list-style: none;
	margin: 0;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 0 0 12px;
	scroll-snap-type: x mandatory;

	/* Ohne Balken. Der Zitatestreifen hat zwei Pfeilknoepfe darunter, die
	   sagen deutlicher als ein Balken, dass es weitergeht - und der Balken
	   sass mitten im Sandfeld.
	   overflow-y: hidden gehoert dazu: Sobald eine Achse rollt, macht CSS
	   aus der anderen automatisch auto, und dann erzeugte schon der
	   waagerechte Balken durch seine eigene Hoehe einen senkrechten. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.ssl-stimmen__spur::-webkit-scrollbar {
	display: none;
}

.ssl-stimmen__eintrag {
	scroll-snap-align: start;
}

.ssl-stimmen__eintrag figure {
	border-left: 2px solid var(--wp--preset--color--treibholz);
	height: 100%;
	margin: 0;
	padding-left: 1.4rem;
}

.ssl-stimmen__eintrag blockquote {
	border: 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.45;
	margin: 0 0 0.9em;
	padding: 0;
}

.ssl-stimmen__eintrag figcaption {
	display: flex;
	flex-wrap: wrap;
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
	gap: 0.25em 0.9em;
}

.ssl-stimmen__name {
	font-weight: 500;
}

.ssl-stimmen__herkunft {
	color: var(--wp--custom--ssl--sekundaertext);
}

.ssl-stimmen__steuerung,
.ssl-kalender__steuerung {
	align-items: center;
	display: flex;
	gap: 8px;
	margin-top: 1rem;
}

.ssl-stimmen__knopf,
.ssl-kalender__knopf {
	background: transparent;
	border: 1px solid var(--wp--preset--color--tiefsee);
	border-radius: var(--wp--custom--ssl--radiusbutton);
	color: var(--wp--preset--color--tiefsee);
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	min-height: 44px;
	min-width: 44px;
}

.ssl-stimmen__knopf:hover:not(:disabled),
.ssl-kalender__knopf:hover:not(:disabled) {
	background: var(--wp--preset--color--tiefsee);
	color: var(--wp--preset--color--muschel);
}

.ssl-stimmen__knopf:disabled,
.ssl-kalender__knopf:disabled {
	cursor: default;
	opacity: 0.35;
}

/* 6. Karte ---------------------------------------------------------------- */

.ssl-karte__platzhalter {
	background: var(--wp--preset--color--duene);
	display: grid;
	place-items: center;
	position: relative;
}
/* Der Rahmen, in dem Zeichnung und Einwilligung stehen. Beim Laden wird er
   komplett durch das iframe ersetzt - deshalb sitzt der Knopf darin. */
.ssl-karte__einwilligung {
	padding: 0.9rem 1rem 1rem;
	background: var(--wp--preset--color--muschel);
	border-top: 1px solid var(--wp--custom--ssl--hairline);
}

.ssl-karte__hinweis {
	margin-block: 0 0.7rem;
	max-width: var(--wp--custom--ssl--lesbreite);
	color: var(--wp--custom--ssl--sekundaertext);
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
}

/* Wenn OpenStreetMap sperrt: derselbe Platz, deutlichere Farbe. */
.ssl-karte__hinweis--fehler {
	color: var(--wp--preset--color--treibholz);
}

.ssl-karte__iframe {
	display: block;
	width: 100%;
	aspect-ratio: 800 / 460;
	border: 0;
	border-radius: var(--wp--custom--ssl--radiusbild);
}

/* Kartenbild oder Zeichnung. Dasselbe Seitenverhaeltnis wie vorher der
   Platzhalter, damit beim Wechsel nichts springt. */
.ssl-karte__foto {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--ssl--radiusbild);
}

/* Die Verweise nach draussen. Erst ein Klick fuehrt irgendwohin - auf dieser
   Seite entsteht kein Request an Dritte. */
.ssl-karte__dienste {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	margin-block: 0.75rem 0;
}

.ssl-karte__dienst {
	display: inline-block;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--wp--custom--ssl--hairline);
	border-radius: var(--wp--custom--ssl--radiusbutton);
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--tiefsee);
	text-decoration: none;
}

.ssl-karte__dienst:hover,
.ssl-karte__dienst:focus-visible {
	border-color: var(--wp--preset--color--ostsee);
	color: var(--wp--preset--color--ostsee);
}

.ssl-karte__quelle {
	margin-block: 0.6rem 0;
	color: var(--wp--custom--ssl--sekundaertext);
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: 0.75rem;
}

.ssl-karte__lage {
	color: var(--wp--custom--ssl--sekundaertext);
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
	margin-top: 0.8em;
	max-width: var(--wp--custom--ssl--lesbreite);
}

/* 7. Anfrageformular ------------------------------------------------------ */

.ssl-anfrage__form {
	max-width: 40rem;
}

.ssl-anfrage__block {
	border: 0;
	border-top: 1px solid var(--wp--custom--ssl--hairline);
	margin: 0 0 var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--50) 0 0;
}

.ssl-anfrage__block legend {
	color: var(--wp--custom--ssl--sekundaertext);
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	padding: 0;
}

.ssl-feld {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	margin: 0 0 var(--wp--preset--spacing--40);
}

.ssl-feld label {
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.ssl-feld__optional {
	color: var(--wp--custom--ssl--sekundaertext);
	font-weight: 400;
}

.ssl-feld__hilfe {
	color: var(--wp--custom--ssl--sekundaertext);
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
}

.ssl-feld input[type="text"],
.ssl-feld input[type="email"],
.ssl-feld input[type="tel"],
.ssl-feld input[type="date"],
.ssl-feld input[type="number"],
.ssl-feld select,
.ssl-feld textarea {
	background: var(--wp--preset--color--muschel);
	border: 1px solid var(--wp--custom--ssl--hairline);
	border-radius: 2px;
	/* Nicht erben: In einem dunklen Abschnitt wäre die Schrift sonst hell auf
	   hellem Feld – ein Auswahlfeld, das man nicht lesen kann. */
	color: var(--wp--preset--color--tiefsee);
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: 1rem;
	min-height: 44px;
	padding: 0.6em 0.7em;
	width: 100%;
}

.ssl-feld textarea {
	line-height: 1.5;
	resize: vertical;
}

/* Manche Browser färben die Klappliste selbst – hier steht, was gelten soll. */
.ssl-feld select option {
	background: var(--wp--preset--color--muschel);
	color: var(--wp--preset--color--tiefsee);
}

.ssl-feld input:focus-visible,
.ssl-feld select:focus-visible,
.ssl-feld textarea:focus-visible {
	border-color: var(--wp--preset--color--tiefsee);
}

.ssl-anfrage__paar {
	display: grid;
	gap: 0 var(--wp--preset--spacing--40);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.ssl-feld--kasten {
	background: var(--wp--preset--color--duene);
	padding: var(--wp--preset--spacing--40);
}

.ssl-feld__zustimmung {
	align-items: flex-start;
	display: flex;
	font-weight: 400;
	gap: 0.7em;
	line-height: 1.5;
}

.ssl-feld__zustimmung input {
	flex: 0 0 auto;
	height: 1.15em;
	margin-top: 0.15em;
	width: 1.15em;
}

.ssl-anfrage__aktionen {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem var(--wp--preset--spacing--40);
}

.ssl-anfrage__meldung {
	border-left: 2px solid var(--wp--preset--color--sonne);
	margin-bottom: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
}

/* Honigtopf: aus dem Blick, aber im Formular. Kein display:none – manche Bots
   überspringen versteckte Felder, dieses sollen sie ausfüllen. */
.ssl-honigtopf {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	top: -9999px;
	width: 1px;
}

/* Rückmeldung des Formulars */

.ssl-anfrage__erfolg {
	background: var(--wp--preset--color--duene);
	border-left: 2px solid var(--wp--preset--color--sonne);
	margin-bottom: var(--wp--preset--spacing--60);
	max-width: var(--wp--custom--ssl--lesbreite);
	padding: var(--wp--preset--spacing--50);
}

.ssl-anfrage__erfolg p:last-child {
	margin-bottom: 0;
}

.ssl-anfrage__meldung {
	background: var(--wp--preset--color--duene);
}

.ssl-anfrage__meldung p {
	margin: 0;
}

.ssl-feld__fehler {
	color: #A33A1F;
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

/* Ein Rahmen allein reicht nicht – Farbe ist nie das einzige Signal, deshalb
   steht die Meldung immer als Text darunter. */
.ssl-feld [aria-invalid="true"] {
	border-color: #A33A1F;
	border-width: 2px;
}

/* ==========================================================================
   Patterns und Seitenlayout
   ========================================================================== */

.ssl-abschnitt > :first-child {
	margin-top: 0;
}

.ssl-abschnitt > :last-child {
	margin-bottom: 0;
}

/* Hero -------------------------------------------------------------------- */

.ssl-hero {
	align-items: flex-end;
}

@media (max-width: 781px) {
	.ssl-hero {
		min-height: 75vh !important;
	}
}

.ssl-hero__text {
	padding-block: var(--wp--preset--spacing--70);
}

.ssl-hero__text > :first-child {
	margin-top: 0;
}

.ssl-hero__aktionen {
	margin-top: var(--wp--preset--spacing--50);
}

/* Die Höhe des Titelbilds.
   Vorher stand hier 85vh - also 85 Prozent der Fensterhöhe, egal wie hoch
   das Fenster ist. Auf einem hohen Bildschirm oder beim Herauszoomen wurde
   daraus ein Bild, das die halbe Startseite auffrisst, und der Text darunter
   war erst nach dem Scrollen zu sehen.
   Jetzt: mindestens 22rem, damit auch auf dem Handy Platz fuer die
   Ueberschrift bleibt; im Normalfall 62 Prozent der Fensterhoehe; hoechstens
   38rem, damit es nie mehr die ganze Ansicht belegt. Weil die Grenzen in rem
   stehen, wachsen sie beim Zoomen mit der Schrift mit - anders als vh.
   Zwei Klassen, damit die Regel die Standardhoehe des Cover-Blocks schlaegt. */
.ssl-hero.wp-block-cover {
	min-height: clamp(22rem, 62vh, 38rem);
}

/* Der zweite Knopf steht auf dem Foto. Ein heller Umriss verschwand dort
   je nach Bildstelle - deshalb eine gefuellte Sandflaeche mit dunklem Rand.
   Tiefsee auf Duene ergibt 10,8:1, also weit ueber AAA, und zwar
   unabhaengig davon, was auf dem Foto hinter dem Knopf liegt. */
.ssl-hero__zweit .wp-block-button__link {
	background: var(--wp--preset--color--duene);
	border: 1px solid var(--wp--preset--color--tiefsee);
	color: var(--wp--preset--color--tiefsee);
}

.ssl-hero__zweit .wp-block-button__link:hover,
.ssl-hero__zweit .wp-block-button__link:focus {
	background: var(--wp--preset--color--muschel);
	color: var(--wp--preset--color--tiefsee);
}

/* Vertrauensleiste -------------------------------------------------------- */

/* Fuenf Belege in einer Zeile, mit Punkt davor. Der Punkt in Sonne ist das
   einzige Ornament der Leiste - er trennt, ohne einen Strich zu ziehen, und
   macht aus fuenf Halbsaetzen eine Aufzaehlung. Bei schmalem Fenster bricht
   die Zeile um; jeder Beleg behaelt dann seinen eigenen Punkt. */
.ssl-vertrauen__reihe {
	gap: 0.5rem var(--wp--preset--spacing--50);
	align-items: baseline;
}

.ssl-vertrauen__punkt {
	display: flex;
	gap: 0.55em;
	align-items: baseline;
	font-family: var(--wp--preset--font-family--grotesk);
	margin: 0;
	max-width: none;
	white-space: nowrap;
}

.ssl-vertrauen__punkt::before {
	content: "";
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wp--preset--color--sonne);
	transform: translateY(-0.15em);
}

/* Auf dem Handy passt kein Umbruchverbot - dort zaehlt Lesbarkeit. */
@media (max-width: 600px) {
	.ssl-vertrauen__punkt {
		white-space: normal;
	}
}

/* Leitbild der Wohnungsseite ----------------------------------------------- */

/* Es soll die Breite seines Rahmens ausfuellen, nicht seine eigene.
   Ohne diese Zeile bleibt ein 1024 Pixel breites Foto in einem 1180 Pixel
   breiten Rahmen stehen und sitzt schmaler da als das Foto der
   Gastgeberseite - der Unterschied, den man dann sieht, ohne ihn erklaeren
   zu koennen. Das srcset sorgt dafuer, dass dabei die groessere Datei
   geladen wird, statt eine kleine hochzurechnen. */
.ssl-galerie__leitbild img {
	width: 100%;
}

/* Merkmale als Pillen ------------------------------------------------------ */

/* Vier kurze Woerter, die den Unterschied zwischen den Wohnungen tragen.
   Helle Flaeche mit Haarlinie statt gefuellter Farbe: Sie sollen sich vom
   Flaechenwechsel Muschel/Duene absetzen, ohne mit den Knoepfen um
   Aufmerksamkeit zu streiten. Keine Links - es sind Angaben, keine Wege. */
.ssl-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	list-style: none;
}

.ssl-badge {
	padding: 0.35em 0.95em;
	background: var(--wp--preset--color--muschel);
	border: 1px solid var(--wp--custom--ssl--hairline);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
	color: var(--wp--preset--color--tiefsee);
}

/* Auf der Sandflaeche kehrt sich der Grund um, sonst verschwindet die Pille. */
.has-duene-background-color .ssl-badge {
	background: var(--wp--preset--color--muschel);
}

.ssl-dunkel .ssl-badge {
	background: transparent;
	border-color: rgb(250 247 240 / 35%);
	color: var(--wp--preset--color--muschel);
}

/* Wohnungskarten ---------------------------------------------------------- */

/* Der eine bewusste Bruch im sonst strengen Raster: Die rechte Karte sitzt
   40 px tiefer. Nur ab Tablet - auf dem Handy stehen sie untereinander, da
   waere der Versatz nur ein Fehler. */
@media (min-width: 782px) {
	.ssl-karte--versetzt {
		margin-top: 40px;
	}
}

.ssl-karte .wp-block-image {
	margin-bottom: var(--wp--preset--spacing--40);
}

.ssl-karte h3 {
	margin-bottom: 0.3em;
}

.ssl-karte__preis {
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	margin-bottom: var(--wp--preset--spacing--40);
}

/* Jacobsen-Details -------------------------------------------------------- */

.ssl-details .wp-block-image {
	margin-bottom: 0;
}

.ssl-details figcaption {
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
}

/* Vergleichstabelle ------------------------------------------------------- */

.ssl-vergleich__tabelle {
	margin-block: var(--wp--preset--spacing--60);
	overflow-x: auto;
}

.ssl-vergleich__tabelle table {
	border-collapse: collapse;
	min-width: 34rem;
	width: 100%;
}

.ssl-vergleich__tabelle th,
.ssl-vergleich__tabelle td {
	border-bottom: 1px solid var(--wp--custom--ssl--hairline);
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
	padding: 0.8em 1em 0.8em 0;
	text-align: left;
	vertical-align: top;
}

.ssl-vergleich__tabelle thead th {
	font-weight: 500;
}

.ssl-vergleich__tabelle tbody th[scope="row"] {
	color: var(--wp--custom--ssl--sekundaertext);
	font-weight: 400;
	white-space: nowrap;
}

/* Die Entscheidungshilfe ist der Satz, fuer den die Tabelle da ist. */
.ssl-vergleich__hilfe {
	border-left: 2px solid var(--wp--preset--color--sonne);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.45;
	max-width: var(--wp--custom--ssl--lesbreite);
	padding-left: 1.4rem;
}

/* Haeufige Fragen --------------------------------------------------------- */

.ssl-faq .wp-block-details {
	border-bottom: 1px solid var(--wp--custom--ssl--hairline);
	max-width: var(--wp--custom--ssl--lesbreite);
	padding: 0;
}

.ssl-faq .wp-block-details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	list-style: none;
	padding: 0.9em 2em 0.9em 0;
	position: relative;
}

.ssl-faq .wp-block-details summary::-webkit-details-marker {
	display: none;
}

/* Ein Pluszeichen aus zwei Strichen - kein Icon-Font, keine Grafik. */
.ssl-faq .wp-block-details summary::before,
.ssl-faq .wp-block-details summary::after {
	background: var(--wp--preset--color--sonne);
	content: "";
	position: absolute;
	top: 50%;
	transition: transform 0.2s ease;
}

.ssl-faq .wp-block-details summary::before {
	height: 1px;
	right: 0;
	transform: translateY(-50%);
	width: 14px;
}

.ssl-faq .wp-block-details summary::after {
	height: 14px;
	right: 6.5px;
	transform: translateY(-50%) rotate(0deg);
	width: 1px;
}

.ssl-faq .wp-block-details[open] summary::after {
	transform: translateY(-50%) rotate(90deg);
}

.ssl-faq .wp-block-details p {
	margin-top: 0;
	padding-bottom: 1.2em;
}

@media (prefers-reduced-motion: reduce) {
	.ssl-faq .wp-block-details summary::before,
	.ssl-faq .wp-block-details summary::after {
		transition: none;
	}
}

/* Raeume ------------------------------------------------------------------ */

.ssl-raum {
	margin-block: var(--wp--preset--spacing--70);
}

/* Im Wechsel: mal Bild links, mal rechts. Ab Tablet, darunter immer Bild
   zuerst - auf dem Handy ist eine gedrehte Reihenfolge nur verwirrend. */
@media (min-width: 782px) {
	.ssl-raum--getauscht {
		flex-direction: row-reverse;
	}
}

.ssl-raum .wp-block-image {
	margin: 0;
}

/* Galerie ----------------------------------------------------------------- */

.ssl-galerie__leitbild {
	margin-bottom: 8px;
}

.ssl-galerie__reihe {
	gap: 8px;
}

.ssl-galerie__reihe .wp-block-image {
	margin: 0;
}

.ssl-lightbox__ausloeser {
	cursor: zoom-in;
}

/* Gästebereich: das Tor davor -------------------------------------------- */

.ssl-gasttor {
	background: var(--wp--preset--color--duene);
	margin-block: var(--wp--preset--spacing--70);
	max-width: var(--wp--custom--ssl--lesbreite);
	padding: var(--wp--preset--spacing--60);
}

.ssl-gasttor__form {
	margin-top: var(--wp--preset--spacing--50);
	max-width: 22rem;
}

.ssl-gasttor__aktion {
	margin: var(--wp--preset--spacing--40) 0 0;
}

/* Bildergalerie ------------------------------------------------------------ */

/* Gleich hohe Kacheln, unabhängig davon, ob ein Foto hoch oder quer ist.
   Ein Raster mit gemischten Formaten sieht nach Versehen aus. */
/* Kontaktbogen statt Schaufenster: viele kleine Quadrate, aus denen man
   sich eins herausgreift. Gross wird es in der Lightbox.
   Feste Spaltenzahlen statt auto-fill: Bei auto-fill haengt die Zahl an
   Breite und Abstand und springt beim geringsten Anlass um eins - hier soll
   es auf dem Schreibtisch verlaesslich fuenf sein. */
.ssl-bildergalerie__raster {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	grid-template-columns: repeat(2, 1fr);
	margin-top: var(--wp--preset--spacing--50);
}

@media (min-width: 480px) {
	.ssl-bildergalerie__raster {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 700px) {
	.ssl-bildergalerie__raster {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 900px) {
	.ssl-bildergalerie__raster {
		grid-template-columns: repeat(5, 1fr);
	}
}

.ssl-bildergalerie__bild {
	margin: 0;
}

/* aspect-ratio bleibt, obwohl die Datei schon quadratisch beschnitten ist:
   Fuer Fotos, die vor dieser Bildgroesse hochgeladen wurden, liefert
   WordPress die volle Datei - die wird hier zurechtgeschnitten. */
.ssl-bildergalerie__bild img {
	aspect-ratio: 1 / 1;
	border-radius: var(--wp--custom--ssl--radiusbild);
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.ssl-bildergalerie__hinweis {
	margin-top: var(--wp--preset--spacing--30);
}

/* Gastgeber und Querverweis ----------------------------------------------- */

.ssl-gastgeber figcaption {
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
}

.ssl-querverweis .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--40);
}

/* Navigation -------------------------------------------------------------- */

/* Der Anfragen-Eintrag ist der einzige Knopf in der Navigation. */
.wp-block-navigation .ssl-nav-cta > a {
	background: var(--wp--preset--color--sonne);
	border-radius: var(--wp--custom--ssl--radiusbutton);
	color: var(--wp--preset--color--tiefsee);
	padding: 0.6em 1.1em;
}

.wp-block-navigation .ssl-nav-cta > a:hover {
	background: var(--wp--preset--color--tiefsee);
	color: var(--wp--preset--color--muschel);
}

.ssl-telefon__link {
	white-space: nowrap;
}

/* Mobile CTA-Leiste ------------------------------------------------------- */

.ssl-sticky-cta {
	align-items: center;
	background: var(--wp--preset--color--muschel);
	border-top: 1px solid var(--wp--custom--ssl--hairline);
	bottom: 0;
	display: flex;
	gap: 12px;
	inset-inline: 0;
	justify-content: center;
	min-height: 64px;
	padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
	position: fixed;
	z-index: 90;
}

@media (min-width: 782px) {
	.ssl-sticky-cta {
		display: none;
	}
}

.ssl-sticky-cta__knopf {
	background: var(--wp--preset--color--sonne);
	border-radius: var(--wp--custom--ssl--radiusbutton);
	color: var(--wp--preset--color--tiefsee);
	flex: 1 1 auto;
	font-family: var(--wp--preset--font-family--grotesk);
	font-weight: 500;
	max-width: 22rem;
	padding: 0.85em 1.2em;
	text-align: center;
	text-decoration: none;
}

.ssl-sticky-cta__telefon .ssl-telefon__link {
	align-items: center;
	border: 1px solid var(--wp--preset--color--tiefsee);
	border-radius: var(--wp--custom--ssl--radiusbutton);
	color: var(--wp--preset--color--tiefsee);
	display: flex;
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
	min-height: 44px;
	padding: 0 0.9em;
	text-decoration: none;
}

/* Lightbox ---------------------------------------------------------------- */

.ssl-lightbox__dialog {
	background: var(--wp--preset--color--tiefsee);
	border: 0;
	color: var(--wp--preset--color--muschel);
	height: 100%;
	max-height: 100%;
	max-width: 100%;
	padding: 0;
	width: 100%;
}

.ssl-lightbox__dialog::backdrop {
	background: rgb(20 52 60 / 92%);
}

.ssl-lightbox__dialog figure {
	align-items: center;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	margin: 0;
	padding: 64px 16px 88px;
}

.ssl-lightbox__dialog img {
	max-height: calc(100vh - 170px);
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

.ssl-lightbox__dialog figcaption {
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
	margin-top: 12px;
	max-width: 42em;
	text-align: center;
}

.ssl-lightbox__leiste {
	align-items: center;
	bottom: 16px;
	display: flex;
	gap: 12px;
	inset-inline: 0;
	justify-content: center;
	position: absolute;
}

.ssl-lightbox__zaehler {
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
	min-width: 8em;
	text-align: center;
}

.ssl-lightbox__knopf {
	background: transparent;
	border: 1px solid var(--wp--preset--color--muschel);
	border-radius: var(--wp--custom--ssl--radiusbutton);
	color: var(--wp--preset--color--muschel);
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
	min-height: 44px;
	min-width: 44px;
}

.ssl-lightbox__knopf:hover {
	background: var(--wp--preset--color--muschel);
	color: var(--wp--preset--color--tiefsee);
}

.ssl-lightbox__zu {
	position: absolute;
	right: 16px;
	top: 16px;
}

.ssl-lightbox__dialog :focus-visible {
	outline-color: var(--wp--preset--color--muschel);
}

/* Ausstattungsliste ------------------------------------------------------- */

.ssl-ausstattung__gruppen {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.ssl-ausstattung__titel {
	border-bottom: 1px solid var(--wp--custom--ssl--hairline);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0;
	margin: 0 0 0.7em;
	padding-bottom: 0.4em;
	text-transform: none;
}

.ssl-ausstattung__liste {
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Offene Stellen ---------------------------------------------------------- */

/* Sichtbar nur fuer angemeldete Redakteure - im Frontend wird der Block
   serverseitig entfernt, nicht bloss versteckt. */
.ssl-todo {
	background: #FCF4E4;
	border-left: 3px solid #A33A1F;
	color: #6B3A22;
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
	max-width: var(--wp--custom--ssl--lesbreite);
	padding: 0.9em 1.1em;
}

/* Was das kostet ----------------------------------------------------------- */

.ssl-rechnung {
	background: var(--wp--preset--color--muschel);
	border: 1px solid var(--wp--custom--ssl--hairline);
	margin-bottom: var(--wp--preset--spacing--40);
	max-width: var(--wp--custom--ssl--lesbreite);
	padding: var(--wp--preset--spacing--40);
}

.ssl-rechnung__titel {
	font-size: var(--wp--preset--font-size--large);
	margin: 0 0 var(--wp--preset--spacing--30);
}

.ssl-rechnung__liste {
	font-family: var(--wp--preset--font-family--grotesk);
	margin: 0;
}

.ssl-rechnung__zeile {
	border-bottom: 1px solid var(--wp--custom--ssl--hairline);
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	padding: 0.5em 0;
}

.ssl-rechnung__zeile dt,
.ssl-rechnung__zeile dd {
	margin: 0;
}

.ssl-rechnung__zeile dd {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ssl-rechnung__zeile--summe {
	border-bottom: 0;
	font-size: 1.05rem;
	font-weight: 500;
}

.ssl-rechnung__fuss {
	color: var(--wp--custom--ssl--sekundaertext);
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
	margin: var(--wp--preset--spacing--30) 0 0;
}

/* Rückmeldung zum gewählten Zeitraum */

.ssl-anfrage__frei {
	border-left: 3px solid var(--wp--custom--ssl--hairline);
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	margin: 0 0 var(--wp--preset--spacing--40);
	max-width: var(--wp--custom--ssl--lesbreite);
	padding: 0.6em 0 0.6em 0.9em;
}

.ssl-anfrage__frei.is-frei {
	border-left-color: #2C6B4F;
	color: #2C6B4F;
}

.ssl-anfrage__frei.is-belegt {
	border-left-color: #A33A1F;
	color: #A33A1F;
}