/*
 * Filet & Freunde – Basis für alle Seiten mit „Neues Designsystem“
 *
 * Globale Element-Standards: Eine Überschrift H1–H6, ein Absatz oder eine
 * Liste ist ohne weitere Einstellung richtig formatiert, egal ob im
 * Elementor-Widget „Überschrift“, im Text-Editor oder im HTML-Widget.
 * Die Werte kommen aus Elementor > Website-Einstellungen > Globale
 * Schriftarten (Präfix „FF“). Größen pro Gerät stellt Elementor ein.
 *
 * Hierarchie:
 *   h1      → FF H1 Display   (einmal pro Seite, Seitenkopf)
 *   h2      → FF H2 Abschnittstitel
 *   h3      → FF H3 Untertitel
 *   h4      → FF H4
 *   h5, h6  → FF Label / Kleintext
 *   p, li   → FF Fließtext
 *
 * Selektor „.ff-designsystem :where(.elementor) h3“: gleiche Spezifität wie
 * die alten Element-Standards des Elementor-Kits (.elementor-kit-6 h3), die
 * Plugin-Datei lädt danach und gewinnt ohne !important. Jede Klasse mit
 * .ff-designsystem davor (Rollen-Klassen .ff-t-*, Abschnitts-Klassen) und
 * die Typografie-Einstellung eines Widgets gehen vor. :where(.elementor)
 * beschränkt die Regeln auf den Seiteninhalt (Header und Footer des Themes
 * bleiben unberührt).
 *
 * Die Widgets „Überschrift“ und „Text-Editor“ bekommen von Elementor
 * Standardwerte aus den System-Schriften/-Farben (im Seiten-CSS
 * „.elementor-widget-heading .elementor-heading-title“). Die Selektoren
 * „h3.elementor-heading-title“ und „.elementor-widget-text-editor“ hier
 * sind eine Stufe stärker. Eigene Einstellungen im Widget gehen weiter vor.
 *
 * Abstände zwischen Abschnitten und Widgets regeln die Elementor-Container
 * (Innenabstand, Lücke). Für den Standard-Abschnitt gibt es die Klasse
 * „ff-abschnitt“ (Container > Erweitert > CSS-Klassen).
 */

/* =================================================================
 * Raster und Abstände (8-px-Raster, gleiche Werte wie Startseite)
 * ============================================================== */
:root {
	--ff-rand: 8.33vw;              /* Seitenrand der Gestaltung (144 px bei 1728 px) */
	--ff-inhalt: 1200px;            /* Lesebreite für Textseiten */
	--ff-abschnitt: clamp(80px, 7vw, 120px);
	--ff-abstand-titel: 24px;       /* Überschrift → Text */
	--ff-abstand-untertitel: 16px;  /* H3/H4 → Text */
	--ff-abstand-button: 32px;      /* Text → Button */
	--ff-schwarz: #0a0a0a;
	--ff-creme: #fcfaf3;
	--ff-braun: #a57865;
	--ff-mokka: #a59277;
	--ff-hellgrau: #d9d9d9;
	--ff-text: #222222;
}

@media (max-width: 1024px) {
	:root {
		--ff-rand: 32px;
		--ff-abschnitt: 80px;
	}
}

@media (max-width: 767px) {
	:root {
		--ff-rand: 24px;
		--ff-abschnitt: 64px;
	}
}

/* =================================================================
 * Element-Standards
 * ============================================================== */
.ff-designsystem :where(.elementor) h1,
.ff-designsystem :where(.elementor) h2,
.ff-designsystem :where(.elementor) h3,
.ff-designsystem :where(.elementor) h4,
.ff-designsystem :where(.elementor) h5,
.ff-designsystem :where(.elementor) h6,
.ff-designsystem :is(h1, h2, h3, h4, h5, h6, p, div, span).elementor-heading-title {
	margin: 0;
	color: inherit;
}

.ff-designsystem :where(.elementor) h1,
.ff-designsystem h1.elementor-heading-title {
	font-family: var(--e-global-typography-ffh1-font-family), Georgia, serif;
	font-size: var(--e-global-typography-ffh1-font-size);
	font-weight: var(--e-global-typography-ffh1-font-weight);
	line-height: var(--e-global-typography-ffh1-line-height);
	letter-spacing: var(--e-global-typography-ffh1-letter-spacing);
	text-transform: var(--e-global-typography-ffh1-text-transform);
}

.ff-designsystem :where(.elementor) h2,
.ff-designsystem h2.elementor-heading-title {
	font-family: var(--e-global-typography-ffh2-font-family), sans-serif;
	font-size: var(--e-global-typography-ffh2-font-size);
	font-weight: var(--e-global-typography-ffh2-font-weight);
	line-height: var(--e-global-typography-ffh2-line-height);
	letter-spacing: var(--e-global-typography-ffh2-letter-spacing);
	text-transform: var(--e-global-typography-ffh2-text-transform);
}

.ff-designsystem :where(.elementor) h3,
.ff-designsystem h3.elementor-heading-title {
	font-family: var(--e-global-typography-ffh3-font-family), sans-serif;
	font-size: var(--e-global-typography-ffh3-font-size);
	font-weight: var(--e-global-typography-ffh3-font-weight);
	line-height: var(--e-global-typography-ffh3-line-height);
	letter-spacing: var(--e-global-typography-ffh3-letter-spacing);
	text-transform: var(--e-global-typography-ffh3-text-transform);
}

.ff-designsystem :where(.elementor) h4,
.ff-designsystem h4.elementor-heading-title {
	font-family: var(--e-global-typography-ffh4-font-family), sans-serif;
	font-size: var(--e-global-typography-ffh4-font-size);
	font-weight: var(--e-global-typography-ffh4-font-weight);
	line-height: var(--e-global-typography-ffh4-line-height);
	letter-spacing: var(--e-global-typography-ffh4-letter-spacing);
	text-transform: var(--e-global-typography-ffh4-text-transform);
}

.ff-designsystem :where(.elementor) h5,
.ff-designsystem :where(.elementor) h6,
.ff-designsystem :is(h5, h6).elementor-heading-title {
	font-family: var(--e-global-typography-fflab-font-family), sans-serif;
	font-size: var(--e-global-typography-fflab-font-size);
	font-weight: var(--e-global-typography-fflab-font-weight);
	line-height: var(--e-global-typography-fflab-line-height);
	letter-spacing: var(--e-global-typography-fflab-letter-spacing);
	text-transform: var(--e-global-typography-fflab-text-transform);
}

.ff-designsystem :where(.elementor) p,
.ff-designsystem :where(.elementor) li,
.ff-designsystem :is(p, div, span).elementor-heading-title,
.ff-designsystem .elementor-widget-text-editor {
	font-family: var(--e-global-typography-fftxt-font-family), sans-serif;
	font-size: var(--e-global-typography-fftxt-font-size);
	font-weight: var(--e-global-typography-fftxt-font-weight);
	line-height: var(--e-global-typography-fftxt-line-height);
}

.ff-designsystem .elementor-widget-text-editor {
	color: inherit;
}

.ff-designsystem :where(.elementor) p {
	margin: 0;
}

.ff-designsystem :where(.elementor) p + p,
.ff-designsystem :where(.elementor) p + ul,
.ff-designsystem :where(.elementor) p + ol,
.ff-designsystem :where(.elementor) ul + p,
.ff-designsystem :where(.elementor) ol + p {
	margin-top: 1em;
}

.ff-designsystem :where(.elementor) ul,
.ff-designsystem :where(.elementor) ol {
	margin: 0;
	padding-left: 1.25em;
}

.ff-designsystem :where(.elementor) strong,
.ff-designsystem :where(.elementor) b {
	font-weight: 700;
}

/* Textlinks im Fließtext: Farbe des Textes, unterstrichen */
.ff-designsystem :where(.elementor) :is(p, li) a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.ff-designsystem :where(.elementor) :is(p, li) a:hover,
.ff-designsystem :where(.elementor) :is(p, li) a:focus-visible {
	color: var(--ff-braun);
}

/* Fließender Text (Text-Editor, Rechtstexte): Abstände der Hierarchie */
.ff-designsystem :where(.elementor) .elementor-widget-text-editor :is(h2, h3, h4) + :is(p, ul, ol) {
	margin-top: var(--ff-abstand-titel);
}

.ff-designsystem :where(.elementor) .elementor-widget-text-editor :is(h3, h4) + :is(p, ul, ol) {
	margin-top: var(--ff-abstand-untertitel);
}

.ff-designsystem :where(.elementor) .elementor-widget-text-editor :is(p, ul, ol) + h2 {
	margin-top: 64px;
}

.ff-designsystem :where(.elementor) .elementor-widget-text-editor :is(p, ul, ol, h2) + :is(h3, h4) {
	margin-top: 40px;
}

/* =================================================================
 * Typografie-Rollen (Abweichung vom Element-Standard)
 * ============================================================== */
.ff-designsystem .ff-t-h1,
.ff-designsystem .ff-t-display,
.ff-designsystem .ff-t-h2,
.ff-designsystem .ff-t-h3,
.ff-designsystem .ff-t-lead,
.ff-designsystem .ff-t-text,
.ff-designsystem .ff-t-label {
	margin: 0;
	color: inherit;
}

.ff-designsystem .ff-t-h1 {
	font-family: var(--e-global-typography-ffh1-font-family), Georgia, serif;
	font-size: var(--e-global-typography-ffh1-font-size);
	font-weight: var(--e-global-typography-ffh1-font-weight);
	line-height: var(--e-global-typography-ffh1-line-height);
	letter-spacing: var(--e-global-typography-ffh1-letter-spacing);
	text-transform: var(--e-global-typography-ffh1-text-transform);
}

.ff-designsystem .ff-t-display {
	font-family: var(--e-global-typography-ffdisp-font-family), Georgia, serif;
	font-size: var(--e-global-typography-ffdisp-font-size);
	font-weight: var(--e-global-typography-ffdisp-font-weight);
	line-height: var(--e-global-typography-ffdisp-line-height);
	letter-spacing: var(--e-global-typography-ffdisp-letter-spacing);
	text-transform: var(--e-global-typography-ffdisp-text-transform);
}

.ff-designsystem .ff-t-h2 {
	font-family: var(--e-global-typography-ffh2-font-family), sans-serif;
	font-size: var(--e-global-typography-ffh2-font-size);
	font-weight: var(--e-global-typography-ffh2-font-weight);
	line-height: var(--e-global-typography-ffh2-line-height);
	letter-spacing: var(--e-global-typography-ffh2-letter-spacing);
	text-transform: var(--e-global-typography-ffh2-text-transform);
}

.ff-designsystem .ff-t-h3 {
	font-family: var(--e-global-typography-ffh3-font-family), sans-serif;
	font-size: var(--e-global-typography-ffh3-font-size);
	font-weight: var(--e-global-typography-ffh3-font-weight);
	line-height: var(--e-global-typography-ffh3-line-height);
	letter-spacing: var(--e-global-typography-ffh3-letter-spacing);
	text-transform: var(--e-global-typography-ffh3-text-transform);
}

.ff-designsystem .ff-t-lead {
	font-family: var(--e-global-typography-fflead-font-family), sans-serif;
	font-size: var(--e-global-typography-fflead-font-size);
	font-weight: var(--e-global-typography-fflead-font-weight);
	line-height: var(--e-global-typography-fflead-line-height);
}

.ff-designsystem .ff-t-text {
	font-family: var(--e-global-typography-fftxt-font-family), sans-serif;
	font-size: var(--e-global-typography-fftxt-font-size);
	font-weight: var(--e-global-typography-fftxt-font-weight);
	line-height: var(--e-global-typography-fftxt-line-height);
}

.ff-designsystem .ff-t-text + .ff-t-text {
	margin-top: 1em;
}

.ff-designsystem .ff-t-label {
	font-family: var(--e-global-typography-fflab-font-family), sans-serif;
	font-size: var(--e-global-typography-fflab-font-size);
	font-weight: var(--e-global-typography-fflab-font-weight);
	line-height: var(--e-global-typography-fflab-line-height);
	letter-spacing: var(--e-global-typography-fflab-letter-spacing);
	text-transform: var(--e-global-typography-fflab-text-transform);
}

/* =================================================================
 * Widget-Klassen (Elementor > Widget > Erweitert > CSS-Klassen)
 * Für Texte, die keine Überschrift im Sinne der Hierarchie sind.
 * Wirken im Widget „Überschrift“ (beliebiges HTML-Tag) und im Text-Editor.
 * ============================================================== */

/* Kleine Zeile über einer Überschrift, z. B. „Hotel Filet & Freunde“ */
/* Gleiche Gestalt wie die Überzeile (.ff-ueberzeile): Apercu-Versalien,
   weite Laufweite, 70 % der Textfarbe */
.ff-designsystem .ff-label :is(.elementor-heading-title, p) {
	color: color-mix(in srgb, currentColor 70%, transparent);
	font-family: var(--e-global-typography-fflab-font-family), sans-serif;
	font-size: var(--e-global-typography-fflab-font-size);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

/* Label → Überschrift 16 px, egal welche Lücke der Container hat
   (Elementor vererbt --row-gap an die Widgets) */
.ff-designsystem .elementor-element.ff-label:has(+ .elementor-widget-heading) {
	margin-block-end: calc(16px - var(--row-gap, 0px));
}

/* Einleitungstext unter der H1 */
.ff-designsystem .ff-einleitung :is(.elementor-heading-title, p) {
	max-width: 640px;
	font-family: var(--e-global-typography-fflead-font-family), sans-serif;
	font-size: var(--e-global-typography-fflead-font-size);
	font-weight: var(--e-global-typography-fflead-font-weight);
	line-height: var(--e-global-typography-fflead-line-height);
}

/* Große Zahl (Kennzahlen wie „21 Zimmer“) */
.ff-designsystem .ff-zahl .elementor-heading-title {
	font-family: var(--e-global-typography-ffdisp-font-family), Georgia, serif;
	font-size: var(--e-global-typography-ffdisp-font-size);
	font-weight: var(--e-global-typography-ffdisp-font-weight);
	line-height: 1;
	letter-spacing: var(--e-global-typography-ffdisp-letter-spacing);
}

/* Preis (z. B. „82 € / Nacht“) */
.ff-designsystem .ff-preis .elementor-heading-title {
	color: var(--ff-braun);
	font-family: var(--e-global-typography-ffh3-font-family), sans-serif;
	font-size: var(--e-global-typography-ffh3-font-size);
	font-weight: var(--e-global-typography-ffh3-font-weight);
	line-height: var(--e-global-typography-ffh3-line-height);
}

/* Bild-Widget im Seitenverhältnis 4:3 (Zimmerkarten) */
.ff-designsystem .ff-bild-4-3 img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Bild-Widget füllt seine Spalte (Bild neben Text) */
.ff-designsystem .ff-bild-fuellen,
.ff-designsystem .ff-bild-fuellen > .elementor-widget-container {
	height: 100%;
}

.ff-designsystem .ff-bild-fuellen img {
	width: 100%;
	height: 100%;
	min-height: 360px;
	object-fit: cover;
}

/* Bild bleibt beim Scrollen stehen, bis der Text daneben zu Ende ist
   (Bild-Widget, Klasse zusätzlich zu „ff-bild-fuellen“; die Spalte muss
   so hoch sein wie der Text). Nur Desktop, darunter stehen die Spalten
   untereinander. --ff-kopf = Höhe der Navigation (global.js). */
@media (min-width: 1025px) {
	.ff-designsystem .ff-bild-mitlaufend {
		position: sticky;
		top: var(--ff-kopf, 0px);
		height: calc(100vh - var(--ff-kopf, 0px));
	}

	/* Eingeloggt: unter der WordPress-Admin-Leiste */
	.ff-designsystem.admin-bar .ff-bild-mitlaufend {
		top: calc(var(--ff-kopf, 0px) + 32px);
		height: calc(100vh - var(--ff-kopf, 0px) - 32px);
	}
}

/* =================================================================
 * Layout-Klassen
 * ============================================================== */

/* Standard-Abschnitt: Container > Erweitert > CSS-Klassen „ff-abschnitt“ */
.ff-designsystem .ff-abschnitt {
	padding: var(--ff-abschnitt) var(--ff-rand);
}

/* Feine Trennlinie über einem Abschnitt */
.ff-designsystem .ff-linie-oben {
	border-top: 1px solid rgba(252, 250, 243, 0.1);
}

/* Karte (Container-Klasse), z. B. Zimmer: Bild oben, Text darunter */
.ff-designsystem .ff-karte {
	overflow: hidden;
	border: 1px solid rgba(252, 250, 243, 0.1);
	background-color: rgba(252, 250, 243, 0.03);
}

/* Textteil füllt die Karte, Button steht unten bündig mit den Nachbarkarten */
.ff-designsystem .ff-karte > .e-con:last-child {
	flex-grow: 1;
}

.ff-designsystem .ff-karte .elementor-widget-button {
	margin-top: auto;
}

/* Zimmerkarte: Name und Preis links (Container „ff-karte-text“), Button
   rechts. Ist die Karte zu schmal (unter ca. 460 px Inhalt), rutscht der
   Button unter den Text (Container mit Umbruch). Button hier ohne
   Mindestbreite, damit er neben den Text passt. */
.ff-designsystem .ff-karte .ff-karte-text {
	flex: 1 1 220px;
}

.ff-designsystem .ff-karte .elementor-widget-button .elementor-button {
	min-width: 0;
}

/* Fläche in Mokka mit heller Schrift */
.ff-designsystem .ff-flaeche-mokka {
	background-color: var(--ff-mokka);
	color: var(--ff-creme);
}

.ff-designsystem .ff-flaeche-mokka .ff-label :is(.elementor-heading-title, p) {
	color: var(--ff-creme);
	opacity: 0.8;
}

/* Bildfläche (Container-Klasse) mit Hintergrundbild aus Elementor, z. B.
   Zimmerbild mit Merkmalen darauf. Seitenverhältnis 16:10, Inhalt unten. */
.ff-designsystem .ff-bildflaeche {
	aspect-ratio: 16 / 10;
	justify-content: flex-end;
}

/* Merkmale als kleine Boxen (Text-Editor mit Liste, Widget-Klasse) */
.ff-designsystem .ff-merkmale ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ff-designsystem .ff-merkmale li {
	padding: 5px 9px;
	border: 1px solid rgba(252, 250, 243, 0.35);
	background-color: rgba(10, 10, 10, 0.35);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: var(--ff-creme);
	font-family: var(--e-global-typography-fflab-font-family), sans-serif;
	font-size: 11px;
	font-weight: var(--e-global-typography-fflab-font-weight);
	line-height: 1.3;
	letter-spacing: var(--e-global-typography-fflab-letter-spacing);
	text-transform: var(--e-global-typography-fflab-text-transform);
}

/* Ausstattung als Kachel-Raster (Widget „Icon-Liste“, Widget-Klasse
   „ff-ausstattung“): Icon oben, Text darunter, 3 Spalten, mobil 2 */
.ff-designsystem .ff-ausstattung .elementor-icon-list-items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
}

/* Kacheln → Button 32 px (16 px Container-Lücke + 16 px). Spezifität über
   Elementors „.e-con .elementor-widget.elementor-widget { margin: 0 }“ */
.ff-designsystem .e-con .elementor-widget.ff-ausstattung {
	margin-bottom: calc(var(--ff-abstand-button) - 16px);
}

.ff-designsystem .ff-ausstattung .elementor-icon-list-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin: 0 !important; /* Elementor setzt Listenabstände per Inline-Variable */
	padding: 16px;
	border: 1px solid rgba(252, 250, 243, 0.12);
	background-color: rgba(252, 250, 243, 0.03);
}

.ff-designsystem .ff-ausstattung .elementor-icon-list-item::after {
	display: none; /* Trennlinie der Icon-Liste */
}

.ff-designsystem .ff-ausstattung .elementor-icon-list-icon {
	width: auto;
	padding: 0;
	color: var(--ff-braun);
}

.ff-designsystem .ff-ausstattung .elementor-icon-list-icon i {
	width: 1em; /* Elementor setzt bei Icon-Listen 1,25em */
	height: 1em;
	font-size: 24px; /* Linien-Icons „FF Linien“ (icons.css) */
	color: inherit;
}

.ff-designsystem .ff-ausstattung .elementor-icon-list-icon svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

/* Selektor wie Elementors „.elementor-widget .elementor-icon-list-icon +
   .elementor-icon-list-text { align-self: center }“, eine Klasse stärker */
.ff-designsystem .ff-ausstattung .elementor-icon-list-icon + .elementor-icon-list-text,
.ff-designsystem .ff-ausstattung .elementor-icon-list-text {
	align-self: flex-start;
	padding: 0;
	color: var(--ff-creme);
	font-family: var(--e-global-typography-fftxt-font-family), sans-serif;
	font-size: 14px;
	line-height: 1.4;
}

@media (max-width: 767px) {
	.ff-designsystem .ff-ausstattung .elementor-icon-list-items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ff-designsystem .ff-ausstattung .elementor-icon-list-item {
		padding: 12px;
	}
}

/* Merkmale auf dem Zimmerbild (Widget „Icon-Liste“, Klasse „ff-bild-merkmale“,
   in einem Container „ff-bildflaeche“ mit Hintergrundbild). Max. 4 Einträge,
   damit es auch mobil bei zwei Reihen bleibt. */
.ff-designsystem .ff-bild-merkmale .elementor-icon-list-items {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.ff-designsystem .ff-bild-merkmale .elementor-icon-list-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 !important; /* Elementor setzt Listenabstände per Inline-Variable */
	padding: 8px 12px;
	border: 1px solid rgba(252, 250, 243, 0.28);
	background-color: rgba(10, 10, 10, 0.35);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.ff-designsystem .ff-bild-merkmale .elementor-icon-list-item::after {
	display: none;
}

.ff-designsystem .ff-bild-merkmale .elementor-icon-list-icon {
	width: auto;
	padding: 0;
	color: var(--ff-creme);
}

.ff-designsystem .ff-bild-merkmale .elementor-icon-list-icon i {
	width: 1em;
	height: 1em;
	font-size: 18px;
	color: inherit;
}

.ff-designsystem .ff-bild-merkmale .elementor-icon-list-icon + .elementor-icon-list-text,
.ff-designsystem .ff-bild-merkmale .elementor-icon-list-text {
	align-self: center;
	padding: 0;
	color: var(--ff-creme);
	font-family: var(--e-global-typography-fftxt-font-family), sans-serif;
	font-size: 13px;
	line-height: 1;
}

/* Icon-Widget (Klasse „ff-icon“): Linien-Icon in Creme, 28 px. Selektor stärker
   als Elementors „.elementor-widget-icon.elementor-view-default .elementor-icon“
   (Primärfarbe Schwarz) */
.ff-designsystem .elementor-widget-icon.ff-icon .elementor-icon {
	font-size: 28px;
	color: var(--ff-creme);
}

.ff-designsystem .ff-icon .elementor-icon i {
	width: 1em;
	height: 1em;
}

/* Zeit-Kachel (Container-Klasse „ff-zeit“): Icon, Label, Uhrzeit groß, Hinweis */
.ff-designsystem .ff-zeit {
	padding: 24px;
	border: 1px solid rgba(252, 250, 243, 0.3);
}

.ff-designsystem .ff-zeit .ff-zahl .elementor-heading-title {
	font-size: clamp(36px, 3.2vw, 48px); /* passt in die halbe Spalte */
}

/* Liste mit Icons in zwei Spalten (Icon-Liste, Klasse „ff-liste-2“) */
.ff-designsystem .ff-liste-2 .elementor-icon-list-items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 24px;
	margin: 0;
	padding: 0;
}

.ff-designsystem .ff-liste-2 .elementor-icon-list-item {
	align-items: center;
	gap: 12px;
	margin: 0 !important;
}

.ff-designsystem .ff-liste-2 .elementor-icon-list-item::after {
	display: none;
}

.ff-designsystem .ff-liste-2 .elementor-icon-list-icon {
	width: auto;
	padding: 0;
	color: var(--ff-creme);
}

.ff-designsystem .ff-liste-2 .elementor-icon-list-icon i {
	width: 1em;
	height: 1em;
	font-size: 20px;
	color: inherit;
}

.ff-designsystem .ff-liste-2 .elementor-icon-list-icon + .elementor-icon-list-text,
.ff-designsystem .ff-liste-2 .elementor-icon-list-text {
	align-self: center;
	padding: 0;
	color: inherit;
	font-family: var(--e-global-typography-fftxt-font-family), sans-serif;
	font-size: 15px;
	line-height: 1.4;
}

/* Ein einzelner Eintrag (z. B. Frühstückszeit) braucht die volle Breite */
.ff-designsystem .ff-liste-2 .elementor-icon-list-items:has(> :only-child) {
	grid-template-columns: minmax(0, 1fr);
}

/* Preiszeile (Container-Klasse „ff-preiszeile“): Icon, Leistung, Preis rechts */
.ff-designsystem .ff-preiszeile {
	padding-top: 16px;
	padding-bottom: 16px;
	border-top: 1px solid rgba(252, 250, 243, 0.3);
}

.ff-designsystem .ff-preiszeile:last-child {
	border-bottom: 1px solid rgba(252, 250, 243, 0.3);
}

.ff-designsystem .ff-preiszeile .ff-preis .elementor-heading-title {
	font-size: 18px;
	white-space: nowrap;
}

/* Auf Mokka ist Braun zu schwach, Preise dort in Creme */
.ff-designsystem .ff-flaeche-mokka .ff-preis .elementor-heading-title,
.ff-designsystem .ff-flaeche-mokka .ff-zahl .elementor-heading-title {
	color: var(--ff-creme);
}

@media (max-width: 767px) {
	.ff-designsystem .ff-bild-merkmale .elementor-icon-list-item {
		gap: 6px;
		padding: 6px 10px;
	}

	.ff-designsystem .ff-bild-merkmale .elementor-icon-list-icon i {
		font-size: 16px;
	}

	.ff-designsystem .ff-bild-merkmale .elementor-icon-list-icon + .elementor-icon-list-text,
	.ff-designsystem .ff-bild-merkmale .elementor-icon-list-text {
		font-size: 12px;
	}

	.ff-designsystem .ff-liste-2 .elementor-icon-list-items {
		gap: 12px 16px;
	}
}

/* Schritte mit Nummer und Verbindungslinie (Container-Klasse am äußeren
   Container, jeder Schritt ist ein eigener Container darin) */
.ff-designsystem .ff-schritte {
	--ff-schritt-luecke: 40px; /* = Lücke des Containers in Elementor */
	counter-reset: ff-schritt;
}

.ff-designsystem .ff-schritte > .e-con {
	position: relative;
	padding-left: 56px;
	counter-increment: ff-schritt;
}

.ff-designsystem .ff-schritte > .e-con::before {
	content: counter(ff-schritt);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--ff-braun);
	border-radius: 50%;
	background-color: var(--ff-schwarz);
	color: var(--ff-braun);
	font-family: var(--e-global-typography-ffbtn-font-family), sans-serif;
	font-size: 14px;
	font-weight: 700;
}

.ff-designsystem .ff-schritte > .e-con:first-child::before {
	background-color: var(--ff-braun);
	color: var(--ff-schwarz);
}

/* Linie zum nächsten Schritt */
.ff-designsystem .ff-schritte > .e-con:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 44px;
	bottom: calc(8px - var(--ff-schritt-luecke)); /* endet 8 px vor dem nächsten Kreis */
	left: 18px;
	width: 1px;
	background-color: rgba(165, 120, 101, 0.4);
}

/* Hinweiskasten (Container-Klasse), z. B. „Unverbindliche Anfrage“ */
.ff-designsystem .ff-hinweis {
	padding: 24px;
	border: 1px solid rgba(165, 120, 101, 0.4);
	background-color: rgba(252, 250, 243, 0.04);
}

/* Textseite (Impressum, Datenschutz): H1 als Seitentitel, darunter der
   Text in Lesebreite. Container > CSS-Klassen „ff-abschnitt ff-textseite“. */
.ff-designsystem .ff-textseite {
	gap: calc(var(--ff-abschnitt) / 1.5);
}

/* Auf den Inhalt, weil Elementor die Widget-Breite selbst auf 100 % setzt */
.ff-designsystem .ff-textseite .elementor-widget-text-editor > * {
	max-width: 760px; /* ca. 75 Zeichen pro Zeile */
}

/* Lange Wörter (z. B. „Datenschutzerklärung“) brechen mobil um */
.ff-designsystem :where(.elementor) h1 {
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Inhaltsgruppe: Überschrift, Text, Button untereinander */
.ff-gruppe {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ff-abstand-titel);
}

.ff-gruppe > .ff-btn {
	margin-top: calc(var(--ff-abstand-button) - var(--ff-abstand-titel));
}

/* =================================================================
 * Button (Marke): weiß, Ecken oben links / unten rechts, Pfeil
 * Gilt für .ff-btn im Markup und für das Elementor-Widget „Button“.
 * ============================================================== */
.ff-designsystem .ff-btn,
.ff-designsystem .elementor-widget-button .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-width: 240px;
	padding: 18px 24px 18px 28px;
	border-radius: 15px 0 15px 0;
	background-color: #ffffff;
	color: var(--ff-schwarz);
	font-family: var(--e-global-typography-ffbtn-font-family), sans-serif;
	font-size: var(--e-global-typography-ffbtn-font-size);
	font-weight: var(--e-global-typography-ffbtn-font-weight);
	line-height: var(--e-global-typography-ffbtn-line-height);
	letter-spacing: var(--e-global-typography-ffbtn-letter-spacing);
	text-transform: var(--e-global-typography-ffbtn-text-transform);
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.ff-designsystem .ff-btn:hover,
.ff-designsystem .ff-btn:focus-visible,
.ff-designsystem .elementor-widget-button .elementor-button:hover,
.ff-designsystem .elementor-widget-button .elementor-button:focus-visible {
	background-color: var(--ff-braun);
	color: var(--ff-creme);
}

/* Pfeil im Elementor-Button wie beim .ff-btn */
.ff-designsystem .elementor-widget-button .elementor-button::after {
	content: "";
	flex: none;
	width: 1.3em;
	height: 1.3em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Cpath d='M6 18L18 6M18 6H9M18 6v9'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Cpath d='M6 18L18 6M18 6H9M18 6v9'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ff-designsystem .ff-btn svg {
	flex: none;
	width: 1.3em;
	height: 1.3em;
	stroke: currentColor;
}

/* =================================================================
 * Überzeile über einer Abschnittsüberschrift (Klasse „ff-ueberzeile“)
 * Wie bei der Nacht der Sterne: Apercu in Versalien mit weiter Laufweite,
 * leicht transparent (70 % der Textfarbe). Darunter die H2 in Ivar
 * Headline, betonter Teil kursiv: <h2>Unser <em>Restaurant</em></h2>.
 * Im Markup als <p> direkt vor der H2, im Elementor-Widget „Überschrift“
 * (Tag p) als Widget-Klasse.
 * ============================================================== */
.ff-designsystem .ff-ueberzeile,
.ff-designsystem .ff-ueberzeile .elementor-heading-title {
	margin: 0;
	color: color-mix(in srgb, currentColor 70%, transparent);
	font-family: var(--e-global-typography-fflab-font-family), sans-serif;
	font-size: var(--e-global-typography-fflab-font-size);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

/* Überzeile → Überschrift 16 px statt 24 px (Gruppe mit 24 px Lücke) */
.ff-gruppe > .ff-ueberzeile {
	margin-bottom: calc(16px - var(--ff-abstand-titel));
}

/* Überzeile → H3 in einem Punkt (.ff-punkte, Lücke 16 px): 10 px */
.ff-punkte .ff-ueberzeile {
	margin-bottom: -6px;
}

/* Betonter Teil einer Überschrift: Ivar Headline kursiv. Auch in der H1
   (Ivar Display hat keinen kursiven Schnitt, Ivar Headline passt dazu). */
.ff-designsystem :is(h1, h2, h3, .ff-t-h1, .ff-t-h2, .ff-t-h3) em {
	font-family: "Ivar Headline", Georgia, serif;
	font-style: italic;
	font-weight: 400;
}

/* =================================================================
 * Zimmername (Widget „Überschrift“, Klasse „ff-zimmername“)
 * Ivar Display wie die Zimmernamen im Karussell der Startseite, etwas
 * kleiner, damit „Doppelzimmer zur Einzelnutzung“ in die Karte passt.
 * ============================================================== */
.ff-designsystem .ff-zimmername .elementor-heading-title {
	font-family: var(--e-global-typography-ffdisp-font-family), Georgia, serif;
	font-size: clamp(26px, 2.2vw, 32px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: lowercase;
}

/* =================================================================
 * Punkte mit Icon und Trennlinien (Liste „ff-punkte“)
 * <ul class="ff-punkte"><li><span class="ffi ffi-…"></span>
 * <div><h3>…</h3><p>…</p></div></li></ul>
 * Für dunkle Abschnitte (Linien und Icons in Creme).
 * ============================================================== */
.ff-designsystem .ff-punkte {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ff-designsystem .ff-punkte > li {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	column-gap: 24px;
	margin: 0;
	padding: 32px 0;
	border-top: 1px solid rgba(252, 250, 243, 0.2);
}

.ff-designsystem .ff-punkte > li:last-child {
	border-bottom: 1px solid rgba(252, 250, 243, 0.2);
}

.ff-designsystem .ff-punkte > li > .ffi {
	margin-top: 0.1em;
	font-size: 28px;
	color: var(--ff-creme);
}

.ff-designsystem .ff-punkte > li > div {
	display: flex;
	flex-direction: column;
	gap: var(--ff-abstand-untertitel);
}

/* Drei Punkte nebeneinander (Liste „ff-punkte ff-punkte--spalten“),
   ab Tablet untereinander */
.ff-designsystem .ff-punkte--spalten {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(24px, 3vw, 56px);
}

.ff-designsystem .ff-punkte--spalten > li:last-child {
	border-bottom: 0;
}

@media (max-width: 1024px) {
	.ff-designsystem .ff-punkte--spalten {
		grid-template-columns: minmax(0, 1fr);
	}

	.ff-designsystem .ff-punkte--spalten > li:last-child {
		border-bottom: 1px solid rgba(252, 250, 243, 0.2);
	}
}

@media (max-width: 767px) {
	.ff-designsystem .ff-punkte > li {
		column-gap: 16px;
		padding: 24px 0;
	}
}