/* =========================================================================
   feierlicht 2026 - Hauptstylesheet
   =========================================================================

   Gliederung
   ----------
    1. Lokale Variablen
    2. Basis & Zugaenglichkeit
    3. Kopfbereich (sticky, transparent auf der Startseite)
    4. Navigation
    5. Hero (Startseite + Unterseiten)
    6. Sektionsrhythmus
    7. Typografie im Fliesstext
    8. Buttons & Links
    9. Startseite: Kennzahlen, Leistungen, Ueber-uns, CTA
   10. Karten: Effekte- & Sets-Raster  (Overrides der Snippet-Styles)
   11. Filter & Sortierung
   12. Detailseiten
   13. Fussbereich
   14. Bewegung (Scroll-Reveal)
   15. Alt-Inline-Farben einfangen

   Wichtig zu den Overrides in Abschnitt 10/11/12:
   Die Raster und Detailseiten werden von Code-Snippets erzeugt, die ihr
   CSS inline im Body ausgeben. Inline im Body steht im Dokument NACH
   diesem Stylesheet - bei gleicher Spezifitaet gewinnt also das Snippet.
   Deshalb sind diese Regeln bewusst mit "body.fl26 ..." qualifiziert:
   hoehere Spezifitaet schlaegt Reihenfolge. Die Snippets selbst bleiben
   unveraendert, damit das alte Theme unberuehrt weiterlaeuft.
   ========================================================================= */


/* =========================================================================
   1. Lokale Variablen
   Farben/Schriften/Abstaende kommen aus theme.json. Hier stehen nur Werte,
   die dort keinen Platz haben (Zeiten, Radien, Schatten, Layoutmasse).
   ========================================================================= */

:root {
	--fl-dur-fast:   150ms;
	--fl-dur:        220ms;
	--fl-dur-slow:   300ms;
	--fl-ease:       cubic-bezier(0.22, 0.61, 0.36, 1);

	--fl-radius-s:   8px;
	--fl-radius:     14px;
	--fl-radius-l:   20px;

	--fl-shadow:      0 2px 10px rgba(0, 0, 0, 0.35);
	--fl-shadow-lift: 0 14px 34px rgba(0, 0, 0, 0.5);

	--fl-header-h:   72px;

	/* Zeilenlaenge Fliesstext, rund 68 Zeichen bei 17px IBM Plex Sans.

	   Bewusst in rem und NICHT in ch: die ch-Einheit bezieht sich auf die
	   Schriftgroesse des jeweiligen Elements. Bei einer 2,6rem grossen
	   Ueberschrift waeren 68ch fast 2000px - die Ueberschrift bekaeme also
	   faktisch keine Begrenzung und stuende breiter als der Text darunter.
	   Mit einem festen Mass sind beide gleich breit und stehen buendig. */
	--fl-measure:    36rem;

	--fl-line:       rgba(255, 255, 255, 0.09);
	--fl-line-strong:rgba(255, 255, 255, 0.16);

	/* Zwischenband - liegt zwischen base-deep und card, damit
	   aufeinanderfolgende Abschnitte sich sichtbar unterscheiden. */
	--fl-band:       #26262b;
}


/* =========================================================================
   2. Basis & Zugaenglichkeit
   ========================================================================= */

html {
	scroll-behavior: smooth;
	/* Sprungziele nicht unter den sticky Header laufen lassen */
	scroll-padding-top: calc(var(--fl-header-h) + 1rem);
}

body.fl26 {
	background-color: var(--wp--preset--color--base-deep);
	color: var(--wp--preset--color--ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* Sichtbarer Fokus auf allen bedienbaren Elementen (Pflicht, 2.2) */
body.fl26 a:focus-visible,
body.fl26 button:focus-visible,
body.fl26 input:focus-visible,
body.fl26 select:focus-visible,
body.fl26 textarea:focus-visible,
body.fl26 summary:focus-visible,
body.fl26 [tabindex]:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 3px;
}

/* Kein doppelter Ring bei Maus-Klick */
body.fl26 :focus:not(:focus-visible) {
	outline: none;
}

/* Sprunglink */
.fl26-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
}
.fl26-skip-link:focus {
	left: 1rem;
	top: 1rem;
	width: auto;
	height: auto;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--accent);
	color: #141414;
	font-weight: 700;
	border-radius: 999px;
	clip: auto;
	clip-path: none;
}

/* Bilder nie ueber die Breite hinaus, nie springend */
body.fl26 img,
body.fl26 video {
	max-width: 100%;
	height: auto;
}


/* =========================================================================
   3. Kopfbereich
   ========================================================================= */

body.fl26 header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

.fl26-header {
	background-color: rgba(26, 26, 26, 0.82);
	-webkit-backdrop-filter: blur(10px) saturate(130%);
	backdrop-filter: blur(10px) saturate(130%);
	border-bottom: 1px solid var(--fl-line);
	transition:
		background-color var(--fl-dur-slow) var(--fl-ease),
		border-color     var(--fl-dur-slow) var(--fl-ease),
		backdrop-filter  var(--fl-dur-slow) var(--fl-ease);
}

.fl26-header-inner {
	min-height: var(--fl-header-h);
}

.fl26-logo img {
	display: block;
	height: auto;
	transition: opacity var(--fl-dur) var(--fl-ease);
}
.fl26-logo a:hover img {
	opacity: 0.82;
}

/* --- Startseite: bei scrollY <= 10 vollstaendig transparent ------------- */
body.fl26-front .fl26-header {
	background-color: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-bottom-color: transparent;
}

/* Sobald gescrollt wird (Klasse kommt aus main.js) */
body.fl26-front.fl26-scrolled .fl26-header {
	background-color: rgba(26, 26, 26, 0.82);
	-webkit-backdrop-filter: blur(10px) saturate(130%);
	backdrop-filter: blur(10px) saturate(130%);
	border-bottom-color: var(--fl-line);
}

/* Der Header liegt auf der Startseite ueber dem Video-Hero */
body.fl26-front header.wp-block-template-part {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
}


/* =========================================================================
   4. Navigation
   ========================================================================= */

body.fl26 .fl26-nav {
	gap: clamp(1rem, 2vw, 1.9rem);
}

body.fl26 .fl26-nav .wp-block-navigation-item__content {
	padding: 0.4rem 0;
	position: relative;
	transition: color var(--fl-dur) var(--fl-ease);
}

/* Feine Akzentlinie beim Hover statt Unterstreichung */
body.fl26 .fl26-nav .wp-block-navigation-item:not(.cta-nav-button) > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent), var(--wp--preset--color--accent-2));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--fl-dur) var(--fl-ease);
}
body.fl26 .fl26-nav .wp-block-navigation-item:not(.cta-nav-button):hover > .wp-block-navigation-item__content::after,
body.fl26 .fl26-nav .wp-block-navigation-item:not(.cta-nav-button):focus-within > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

body.fl26 .fl26-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--heading);
}

/* Der Kontakt-Eintrag ist im Menue als CTA markiert */
body.fl26 .fl26-nav .cta-nav-button > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--accent);
	color: #141414;
	padding: 0.55rem 1.35rem;
	border-radius: 999px;
	font-weight: 700;
	transition:
		background-color var(--fl-dur) var(--fl-ease),
		transform        var(--fl-dur) var(--fl-ease);
}
body.fl26 .fl26-nav .cta-nav-button > .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--accent-2);
	color: #141414;
	transform: translateY(-1px);
}

/* --- Untermenues --- */
body.fl26 .fl26-nav .wp-block-navigation__submenu-container {
	background-color: rgba(24, 24, 24, 0.97);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid var(--fl-line-strong);
	border-radius: var(--fl-radius-s);
	padding: 0.4rem;
	box-shadow: var(--fl-shadow-lift);
	min-width: 13rem;
}
body.fl26 .fl26-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.55rem 0.85rem;
	border-radius: 6px;
	width: 100%;
	transition: background-color var(--fl-dur-fast) var(--fl-ease);
}
body.fl26 .fl26-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: rgba(255, 255, 255, 0.07);
}
/* Im Untermenue keine Akzentlinie */
body.fl26 .fl26-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none;
}

/* --- Mobil-Overlay --- */
body.fl26 .wp-block-navigation__responsive-container.is-menu-open {
	background-color: rgba(18, 18, 18, 0.985);
	padding: 1.25rem;
}
body.fl26 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 2rem;
}
body.fl26 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.3rem;
	padding: 0.6rem 0;
}
body.fl26 .wp-block-navigation__responsive-container.is-menu-open .cta-nav-button > .wp-block-navigation-item__content {
	display: inline-block;
	margin-top: 0.75rem;
}


/* =========================================================================
   5. Hero
   ========================================================================= */

/* --- Startseite: Video-Hero ------------------------------------------- */
/* Nicht volle 100vh: ein Streifen des naechsten Abschnitts bleibt sichtbar
   und signalisiert, dass es weitergeht. */
body.fl26-front .fl26-main-front > .wp-block-cover.fixed-bg,
body.fl26-front .fl26-main-front > .entry-content > .wp-block-cover.fixed-bg {
	min-height: 86vh !important;

	/* Buehne hinter dem Video.

	   Das Hero-Video im Seiteninhalt ist 24,5 MB gross und braucht auch
	   auf schnellen Leitungen mehrere Sekunden. Ohne Unterlage waere der
	   Hero solange schwarz. Dieser Verlauf steht deshalb darunter - er
	   kostet nichts, traegt die Schrift sofort und bleibt auf Mobil
	   dauerhaft stehen (siehe main.js: dort wird das Video auf schmalen
	   Viewports gar nicht erst geladen). */
	background-color: #141414;
	background-image:
		radial-gradient(68% 55% at 22% 16%, rgba(224, 247, 255, 0.17) 0%, rgba(224, 247, 255, 0) 60%),
		radial-gradient(58% 50% at 79% 30%, rgba(224, 112, 208, 0.15) 0%, rgba(224, 112, 208, 0) 62%),
		linear-gradient(180deg, #202024 0%, #141414 72%, var(--wp--preset--color--base-deep) 100%);
}

body.fl26-front .wp-block-cover.fixed-bg .wp-block-cover__video-background {
	filter: saturate(112%) contrast(104%);
}

/* Farbverlauf statt flacher Abdunklung: unten dunkler, damit der
   Uebergang in den naechsten Abschnitt weich ist und Text traegt. */
body.fl26-front .wp-block-cover.fixed-bg > .wp-block-cover__background {
	background: linear-gradient(
		180deg,
		rgba(16, 16, 16, 0.62) 0%,
		rgba(16, 16, 16, 0.42) 38%,
		rgba(20, 20, 20, 0.80) 78%,
		var(--wp--preset--color--base-deep) 100%
	) !important;
	opacity: 1 !important;
}

body.fl26-front .wp-block-cover.fixed-bg h1 {
	font-size: var(--wp--preset--font-size--display);
	text-wrap: balance;
	text-shadow: 0 2px 26px rgba(0, 0, 0, 0.5);
}

body.fl26-front .wp-block-cover.fixed-bg p {
	max-width: 46ch;
	text-wrap: pretty;
}

/* --- Unterseiten & Archive: Kopfband ----------------------------------- */
body.fl26 .fl26-hero {
	min-height: 36vh;
	position: relative;
	border-bottom: 1px solid var(--fl-line);
}

body.fl26 .fl26-hero > .wp-block-cover__background {
	background: linear-gradient(
		180deg,
		rgba(14, 14, 14, 0.70) 0%,
		rgba(14, 14, 14, 0.55) 45%,
		rgba(26, 26, 26, 0.94) 100%
	) !important;
	opacity: 1 !important;
}

body.fl26 .fl26-hero-title {
	margin: 0;
	text-wrap: balance;
}

/* Bestehende Seiten bringen ihren Kopf als .fl-page-header mit.
   Gleiche Behandlung, damit alles einheitlich wirkt. */
body.fl26 .fl-page-header {
	border-bottom: 1px solid var(--fl-line);
}
body.fl26 .fl-page-header > .wp-block-cover__background {
	background: linear-gradient(
		180deg,
		rgba(14, 14, 14, 0.68) 0%,
		rgba(14, 14, 14, 0.52) 45%,
		rgba(26, 26, 26, 0.94) 100%
	) !important;
	opacity: 1 !important;
}
body.fl26 .fl-page-header h1,
body.fl26 .fl-page-header h2 {
	font-family: var(--wp--preset--font-family--display) !important;
	font-weight: 400 !important;
	font-size: var(--wp--preset--font-size--display) !important;
	text-transform: none !important;
	letter-spacing: -0.015em !important;
	line-height: 1.1 !important;
	text-wrap: balance;
}

/* Augenbraue ueber der Ueberschrift */
body.fl26 .fl26-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 700;
	margin: 0 0 0.65rem;
	color: var(--wp--preset--color--accent-2);
}
body.fl26 .fl26-eyebrow a {
	color: inherit;
	text-decoration: none;
}

@media (max-width: 781px) {
	body.fl26 .fl26-hero {
		min-height: 27vh;
	}
	body.fl26-front .fl26-main-front > .wp-block-cover.fixed-bg {
		min-height: 78vh !important;
	}
	body.fl26 .fl26-eyebrow {
		letter-spacing: 0.13em;
		font-size: 0.78rem;
	}
}


/* =========================================================================
   6. Sektionsrhythmus
   Benachbarte Sektionen bekommen nie denselben Hintergrund (1.5).
   Die bestehenden Seiten setzen ihre Hintergruende inline - die
   Abwechslung wird deshalb in Abschnitt 15 zusaetzlich abgesichert.
   ========================================================================= */

body.fl26 .fl26-section {
	position: relative;
}

/* Sehr dezenter Verlauf, damit grosse dunkle Flaechen nicht flach wirken */
body.fl26 .fl26-section-grid,
body.fl26 .fl26-section-detail {
	background-image: radial-gradient(
		120% 80% at 50% 0%,
		rgba(224, 247, 255, 0.045) 0%,
		rgba(224, 247, 255, 0) 62%
	);
}

/* Haarlinie zwischen aufeinanderfolgenden Sektionen */
body.fl26 .fl26-main > section + section {
	border-top: 1px solid var(--fl-line);
}


/* =========================================================================
   7. Typografie im Fliesstext
   ========================================================================= */

/* Zeilenlaenge begrenzen (1.3).

   Der Haken dabei: WordPress zentriert in "constrained"-Containern jedes
   Kind EINZELN (margin-inline:auto). Bekommt nur der Absatz eine
   schmalere Breite, rutscht er gegenueber der Ueberschrift nach innen -
   die linke Kante laeuft dann nicht mehr durch, was auf Textseiten sofort
   auffaellt. Deshalb gilt dieselbe Breite fuer Text UND Ueberschriften;
   damit sind beide gleich breit zentriert und stehen buendig.

   Bewusst nur auf Textseiten und Detailseiten - nicht auf der Startseite,
   wo die grosse Hero-Zeile ihre volle Breite behalten soll. */
body.fl26 .fl26-main-page .wp-block-post-content .is-layout-constrained > :is(p, ul, ol, dl, blockquote, h1, h2, h3, h4, h5, h6),
body.fl26 .fl26-prose .is-layout-constrained > :is(p, ul, ol, dl, blockquote, h1, h2, h3, h4, h5, h6),
body.fl26 .fl26-prose > :is(p, ul, ol, dl, blockquote) {
	max-width: var(--fl-measure);
}

/* Nur wirklich zentrierte Absaetze mittig begrenzen.

   ACHTUNG: Hier stand urspruenglich zusaetzlich ".has-text-align-center p".
   Das trifft aber JEDEN Absatz unterhalb eines zentrierten Elements - auf
   den Textseiten wurden dadurch alle Absaetze eingerueckt, waehrend die
   Ueberschriften linksbuendig blieben. Die Kante lief nicht mehr durch. */
body.fl26 p.has-text-align-center {
	margin-left: auto;
	margin-right: auto;
}

body.fl26 p {
	text-wrap: pretty;
}

body.fl26 h1,
body.fl26 h2,
body.fl26 h3 {
	text-wrap: balance;
}

/* Mehr Luft ueber Ueberschriften, weniger darunter - bindet die
   Ueberschrift optisch an ihren Text. */
body.fl26 .fl26-main h2:not(.fl26-hero-title):not(.fl26-footer-head) {
	margin-top: 2.4em;
	margin-bottom: 0.55em;
}
body.fl26 .fl26-main h3 {
	margin-top: 1.9em;
	margin-bottom: 0.45em;
}
body.fl26 .fl26-main h4,
body.fl26 .fl26-main h5 {
	margin-top: 1.6em;
	margin-bottom: 0.4em;
}
body.fl26 .fl26-main :is(h2, h3, h4, h5):first-child {
	margin-top: 0;
}

/* Listen etwas luftiger */
body.fl26 .fl26-main li + li {
	margin-top: 0.4em;
}

/* Tabellen lesbar auf Dunkel */
body.fl26 .wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}
body.fl26 .wp-block-table :is(td, th) {
	border: 1px solid var(--fl-line-strong);
	padding: 0.65rem 0.85rem;
}
body.fl26 .wp-block-table th {
	background: rgba(255, 255, 255, 0.045);
	color: var(--wp--preset--color--heading);
	font-weight: 700;
	text-align: left;
}
/* Breite Tabellen scrollen im eigenen Container statt die Seite zu sprengen */
body.fl26 .wp-block-table {
	overflow-x: auto;
}


/* =========================================================================
   8. Buttons & Links
   ========================================================================= */

body.fl26 .wp-element-button,
body.fl26 .wp-block-button__link {
	transition:
		background-color var(--fl-dur) var(--fl-ease),
		color            var(--fl-dur) var(--fl-ease),
		transform        var(--fl-dur) var(--fl-ease),
		box-shadow       var(--fl-dur) var(--fl-ease);
	will-change: transform;
}

body.fl26 .wp-element-button:hover,
body.fl26 .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(224, 112, 208, 0.22);
}

/* Spuerbarer, ruhiger Aktiv-Zustand */
body.fl26 .wp-element-button:active,
body.fl26 .wp-block-button__link:active {
	transform: translateY(0);
	box-shadow: none;
}

/* Umriss-Variante */
body.fl26 .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--accent);
	border: 1px solid var(--wp--preset--color--accent);
}
body.fl26 .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent);
	color: #141414;
	border-color: var(--wp--preset--color--accent);
}

/* Pfeil-Links ("Zum Lichtguide →") bekommen eine leichte Bewegung */
body.fl26 .fl26-main a {
	transition: color var(--fl-dur-fast) var(--fl-ease);
}


/* =========================================================================
   9. Startseite
   Die Startseite bringt ihre Struktur aus dem Seiteninhalt mit. Es gibt
   dort kaum eigene Klassen, deshalb wird hier bewusst strukturell
   gearbeitet - jeweils so eng wie moeglich gefasst.
   ========================================================================= */

/* Alle Sektionen der Startseite bekommen grosszuegigen Innenabstand */
body.fl26-front .fl26-main-front > .wp-block-group,
body.fl26-front .fl26-main-front > section {
	padding-top: var(--wp--preset--spacing--80);
	padding-bottom: var(--wp--preset--spacing--80);
}

/* --- Kennzahlenband (30+ / 20 / 500) ----------------------------------- */
/* H6 traegt die Zahl, der Absatz darunter die Erlaeuterung. */
body.fl26-front .fl26-main-front h6 {
	font-family: var(--wp--preset--font-family--display) !important;
	font-size: clamp(2.4rem, 5.5vw, 3.4rem) !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: -0.02em !important;
	text-transform: none !important;
	margin: 0 0 0.4rem !important;
	background: linear-gradient(135deg, var(--wp--preset--color--accent) 10%, var(--wp--preset--color--accent-2) 90%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	-webkit-text-fill-color: transparent;
}

/* --- Leistungs-Karten (Lichtguide / Licht-Sets / Beratung) -------------

   Abgrenzung: Die drei Leistungsspalten enthalten Bild UND eine H5-
   Ueberschrift. Der Ueber-uns-Abschnitt weiter unten hat ebenfalls eine
   Spalte mit Bild, aber ohne H5 - der soll KEINE Karte werden, sondern
   Text neben Bild bleiben. Deshalb das zusaetzliche :has(h5).            */

.fl26-front .fl26-main-front .wp-block-column:has(figure.wp-block-image):has(h5) {
	background: linear-gradient(180deg, rgba(58, 58, 58, 0.55) 0%, rgba(41, 41, 41, 0.55) 100%);
	border: 1px solid var(--fl-line);
	border-radius: var(--fl-radius);
	overflow: hidden;
	padding: 0 0 1.9rem;
	transition:
		transform    var(--fl-dur) var(--fl-ease),
		border-color var(--fl-dur) var(--fl-ease),
		box-shadow   var(--fl-dur) var(--fl-ease);
}

.fl26-front .fl26-main-front .wp-block-column:has(figure.wp-block-image):has(h5):hover {
	transform: translateY(-5px);
	border-color: rgba(224, 247, 255, 0.4);
	box-shadow: var(--fl-shadow-lift);
}

/* Bild oben buendig ueber die volle Kartenbreite.

   Die Bilder tragen im Seiteninhalt inline width:290px und einen
   10px-Radius. Beides passt hier nicht: die Karte bringt ihren eigenen
   Radius mit und das Bild soll die Karte oben abschliessen. Da es
   Inline-Styles sind, geht das nur mit !important. Der Inhalt selbst
   bleibt unveraendert. */
.fl26-front .fl26-main-front .wp-block-column:has(h5) figure.wp-block-image {
	margin: 0 0 1.5rem !important;
	width: 100%;
	max-width: none;
	overflow: hidden;
}
.fl26-front .fl26-main-front .wp-block-column:has(h5) figure.wp-block-image img {
	width: 100% !important;
	max-width: none;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
	border-radius: 0 !important;
	transition: transform var(--fl-dur-slow) var(--fl-ease);
}
.fl26-front .fl26-main-front .wp-block-column:has(h5):hover figure.wp-block-image img {
	transform: scale(1.04);
}

/* Innerhalb der Spalte sitzt der Inhalt nochmal in einer eigenen Gruppe,
   die im Seiteninhalt auf 300px begrenzt ist und zusaetzlich globalen
   Innenabstand hat. Dadurch war das Bild schmaler als die Karte und
   schwamm mittig darin. Fuer die Karten wird diese Begrenzung
   aufgehoben - das Bild schliesst die Karte oben buendig ab, der
   Innenabstand wandert auf die Textelemente. */
.fl26-front .fl26-main-front .wp-block-column:has(h5) > .wp-block-group {
	max-width: none !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Text der Karten bekommt seitlichen Innenabstand */
.fl26-front .fl26-main-front .wp-block-column:has(h5) > .wp-block-group > :not(figure) {
	padding-left: 1.7rem;
	padding-right: 1.7rem;
}

body.fl26-front .fl26-main-front .wp-block-column h5 {
	margin-top: 0;
	margin-bottom: 0.5rem;
}

/* --- Ueber-uns: Bild neben Text, bewusst KEINE Karte ------------------- */
.fl26-front .fl26-main-front .wp-block-column:has(figure.wp-block-image):not(:has(h5)) figure.wp-block-image img {
	width: 100% !important;
	max-width: none;
	border-radius: var(--fl-radius) !important;
	box-shadow: var(--fl-shadow-lift);
	display: block;
}

/* --- CTA-Abschnitt am Seitenende -------------------------------------- */
/* Das Hintergrundbild wird stark zurueckgenommen, damit der Abschnitt als
   ruhiges dunkles Band liest und nicht als zweiter Seitenkopf (1.5). */
body.fl26 .fl26-main .wp-block-cover:not(.fixed-bg):not(.fl26-hero):not(.fl-page-header) > .wp-block-cover__background {
	background: linear-gradient(
		135deg,
		rgba(20, 20, 20, 0.93) 0%,
		rgba(31, 31, 31, 0.90) 55%,
		rgba(20, 20, 20, 0.95) 100%
	) !important;
	opacity: 1 !important;
}
body.fl26 .fl26-main .wp-block-cover:not(.fixed-bg):not(.fl26-hero):not(.fl-page-header) img.wp-block-cover__image-background {
	filter: grayscale(35%) brightness(0.75);
}


/* =========================================================================
   10. Karten: Effekte- & Sets-Raster
   Overrides gegen die inline ausgegebenen Snippet-Styles.
   ========================================================================= */

/* --- gemeinsame Kartenbasis --- */
body.fl26 .fl-card,
body.fl26 .fl-set-card {
	background: linear-gradient(180deg, rgba(58, 58, 58, 0.6) 0%, rgba(38, 38, 38, 0.6) 100%);
	border: 1px solid var(--fl-line);
	border-radius: var(--fl-radius);
	overflow: hidden;
	box-shadow: var(--fl-shadow);
	transition:
		transform    var(--fl-dur) var(--fl-ease),
		border-color var(--fl-dur) var(--fl-ease),
		box-shadow   var(--fl-dur) var(--fl-ease);
}

body.fl26 .fl-card:hover,
body.fl26 .fl-set-card:hover {
	transform: translateY(-5px);
	border-color: rgba(224, 247, 255, 0.42);
	box-shadow: var(--fl-shadow-lift);
}

/* --- Bild: einheitliches Seitenverhaeltnis, kein Sprung beim Laden ---

   Das Foto kommt als <img loading="lazy"> in den Bildcontainer (siehe
   functions.php). Der Container haelt das Seitenverhaeltnis 4:3 frei,
   bevor das Bild da ist - dadurch springt beim Laden nichts.           */
body.fl26 .fl-card-img {
	width: 100%;
	aspect-ratio: 4 / 3;
	display: flex;
	overflow: hidden;
	position: relative;
}

body.fl26 .fl26-card-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--fl-dur-slow) var(--fl-ease);
}

body.fl26 .fl-card:hover .fl26-card-photo {
	transform: scale(1.045);
}

/* Das Badge liegt absolut darueber und muss ueber dem Foto bleiben. */
body.fl26 .fl-card-img .fl-badge {
	z-index: 2;
}

body.fl26 .fl-card-noimg {
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(
		45deg,
		rgba(255, 255, 255, 0.03) 0 10px,
		rgba(255, 255, 255, 0.06) 10px 20px
	);
	color: var(--wp--preset--color--muted);
}

/* --- Badge: dezent, nicht dominant (1.6) --- */
body.fl26 .fl-badge,
body.fl26 .fl-set-badge {
	background: rgba(18, 18, 18, 0.72) !important;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(224, 247, 255, 0.28) !important;
	color: var(--wp--preset--color--accent) !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	padding: 0.28rem 0.6rem !important;
	border-radius: 999px !important;
}

/* --- Titel & Preis --- */
body.fl26 .fl-card-title,
body.fl26 .fl-set-title {
	font-family: var(--wp--preset--font-family--display) !important;
	font-weight: 400 !important;
	color: var(--wp--preset--color--heading) !important;
	letter-spacing: -0.01em !important;
	line-height: 1.2 !important;
}

/* Preis deutlich sichtbar (1.6) */
body.fl26 .fl-price,
body.fl26 .fl-set-price {
	color: var(--wp--preset--color--accent) !important;
	font-weight: 700 !important;
	font-size: 1.12rem !important;
	letter-spacing: 0.005em;
}

body.fl26 .fl-set-watt,
body.fl26 .fl-set-meta-line {
	color: var(--wp--preset--color--muted) !important;
}

/* --- Rasterbreiten: Desktop 3-4 / Tablet 2 / Mobil 1 (1.6) --- */
body.fl26 .fl-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)) !important;
	gap: 1.6rem !important;
}
body.fl26 .fl-sets-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)) !important;
	gap: 1.7rem !important;
}
@media (max-width: 600px) {
	body.fl26 .fl-grid,
	body.fl26 .fl-sets-grid {
		grid-template-columns: 1fr !important;
		gap: 1.15rem !important;
	}
}


/* =========================================================================
   11. Filter & Sortierung
   ========================================================================= */

body.fl26 .fl-tab {
	background: rgba(255, 255, 255, 0.05) !important;
	border: 1px solid var(--fl-line) !important;
	color: var(--wp--preset--color--ink) !important;
	border-radius: 999px !important;
	padding: 0.5rem 1.1rem !important;
	font-size: 0.9rem !important;
	transition:
		background-color var(--fl-dur-fast) var(--fl-ease),
		border-color     var(--fl-dur-fast) var(--fl-ease),
		color            var(--fl-dur-fast) var(--fl-ease);
}
body.fl26 .fl-tab:hover {
	background: rgba(255, 255, 255, 0.1) !important;
	border-color: var(--fl-line-strong) !important;
	color: var(--wp--preset--color--heading) !important;
}
body.fl26 .fl-tab.is-active {
	background: var(--wp--preset--color--accent) !important;
	border-color: var(--wp--preset--color--accent) !important;
	color: #141414 !important;
	font-weight: 700 !important;
}

body.fl26 .fl-filter-panel {
	background: rgba(255, 255, 255, 0.032) !important;
	border: 1px solid var(--fl-line) !important;
	border-radius: var(--fl-radius) !important;
	padding: 1.15rem 1.35rem !important;
}

body.fl26 .fl-filter-label {
	color: var(--wp--preset--color--muted) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	font-size: 0.74rem !important;
	font-weight: 700 !important;
}

body.fl26 .fl-check {
	color: var(--wp--preset--color--ink) !important;
}
body.fl26 .fl-check input {
	accent-color: var(--wp--preset--color--accent-2);
}

body.fl26 .fl-sort-group select {
	background-color: #262626 !important;
	color: var(--wp--preset--color--ink) !important;
	border: 1px solid var(--fl-line-strong) !important;
	border-radius: var(--fl-radius-s) !important;
	padding: 0.5rem 0.75rem !important;
}
body.fl26 .fl-sort-group select option {
	background-color: #262626;
	color: var(--wp--preset--color--ink);
}


/* =========================================================================
   12. Detailseiten
   ========================================================================= */

body.fl26 .fl26-detail-image img {
	border-radius: var(--fl-radius);
	box-shadow: var(--fl-shadow);
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

body.fl26 .fl-section {
	margin-top: var(--wp--preset--spacing--70);
}

body.fl26 .fl-h2 {
	font-family: var(--wp--preset--font-family--display) !important;
	font-weight: 400 !important;
	color: var(--wp--preset--color--heading) !important;
	font-size: var(--wp--preset--font-size--h3) !important;
	letter-spacing: -0.01em !important;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--fl-line);
}

body.fl26 .fl-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 0.9rem;
}
body.fl26 .fl-gallery-item {
	display: block;
	overflow: hidden;
	border-radius: var(--fl-radius-s);
	border: 1px solid var(--fl-line);
	transition:
		border-color var(--fl-dur) var(--fl-ease),
		transform    var(--fl-dur) var(--fl-ease);
}
body.fl26 .fl-gallery-item img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	transition: transform var(--fl-dur-slow) var(--fl-ease);
}
body.fl26 .fl-gallery-item:hover {
	border-color: rgba(224, 247, 255, 0.45);
	transform: translateY(-2px);
}
body.fl26 .fl-gallery-item:hover img {
	transform: scale(1.05);
}

body.fl26 .fl-videos video {
	width: 100%;
	border-radius: var(--fl-radius-s);
	display: block;
}


/* =========================================================================
   12b. Formulare (Contact Form 7)
   Das Plugin liefert unformatierte Browser-Felder aus. Auf dunklem Grund
   ist das unbrauchbar, deshalb hier eine eigene Ausgestaltung.
   ========================================================================= */

body.fl26 .wpcf7 {
	max-width: 44rem;
}

/* Beschriftungen */
body.fl26 .wpcf7-form p {
	margin-bottom: 1.35rem;
	max-width: none;
}

body.fl26 .wpcf7-form label {
	display: block;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--wp--preset--color--heading);
	margin-bottom: 0.4rem;
}

/* Eingabefelder */
body.fl26 .wpcf7-form-control:not(.wpcf7-submit):not([type="checkbox"]):not([type="radio"]) {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wp--preset--color--heading);
	background-color: rgba(255, 255, 255, 0.045);
	border: 1px solid var(--fl-line-strong);
	border-radius: var(--fl-radius-s);
	padding: 0.72rem 0.95rem;
	transition:
		border-color     var(--fl-dur) var(--fl-ease),
		background-color var(--fl-dur) var(--fl-ease),
		box-shadow       var(--fl-dur) var(--fl-ease);
}

body.fl26 textarea.wpcf7-form-control {
	min-height: 11rem;
	resize: vertical;
}

body.fl26 .wpcf7-form-control::placeholder {
	color: #8d8d8d;
	opacity: 1;
}

body.fl26 .wpcf7-form-control:not(.wpcf7-submit):hover {
	border-color: rgba(255, 255, 255, 0.26);
}

body.fl26 .wpcf7-form-control:not(.wpcf7-submit):focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	background-color: rgba(255, 255, 255, 0.07);
	box-shadow: 0 0 0 3px rgba(224, 247, 255, 0.16);
}

/* Zahlenfeld: die Spinner-Pfeile sind auf Dunkel kaum sichtbar und
   werden hier nicht gebraucht. */
body.fl26 input[type="number"].wpcf7-form-control {
	-moz-appearance: textfield;
	max-width: 12rem;
}
body.fl26 input[type="number"]::-webkit-outer-spin-button,
body.fl26 input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Absenden */
body.fl26 .wpcf7-submit {
	display: inline-block;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: #141414;
	background-color: var(--wp--preset--color--accent);
	border: 0;
	border-radius: 999px;
	padding: 0.9rem 2.1rem;
	margin-top: 0.5rem;
	transition:
		background-color var(--fl-dur) var(--fl-ease),
		transform        var(--fl-dur) var(--fl-ease),
		box-shadow       var(--fl-dur) var(--fl-ease);
}
body.fl26 .wpcf7-submit:hover {
	background-color: var(--wp--preset--color--accent-2);
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(224, 112, 208, 0.24);
}
body.fl26 .wpcf7-submit:active {
	transform: translateY(0);
	box-shadow: none;
}

/* Rueckmeldungen */
body.fl26 .wpcf7-response-output {
	border-radius: var(--fl-radius-s);
	border-width: 1px;
	padding: 0.9rem 1.1rem;
	margin: 1.5rem 0 0;
	font-size: 0.95rem;
}
body.fl26 .wpcf7-not-valid-tip {
	color: #ff9d9d;
	font-size: 0.87rem;
	margin-top: 0.35rem;
}
body.fl26 .wpcf7-form-control.wpcf7-not-valid {
	border-color: #ff9d9d;
}

/* Der Hinweis-Absatz zwischen den Feldern soll sich als Fliesstext
   absetzen, nicht wie eine Beschriftung wirken. */
body.fl26 .wpcf7-form em,
body.fl26 .wpcf7-form i {
	color: var(--wp--preset--color--muted);
}


/* =========================================================================
   13. Fussbereich
   ========================================================================= */

body.fl26 .fl26-footer {
	border-top: 1px solid var(--fl-line);
	background-image: radial-gradient(
		100% 90% at 50% 0%,
		rgba(224, 247, 255, 0.04) 0%,
		rgba(224, 247, 255, 0) 60%
	);
}

body.fl26 .fl26-footer-head {
	font-family: var(--wp--preset--font-family--body) !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	color: var(--wp--preset--color--muted) !important;
	margin: 0 0 0.9rem !important;
	font-size: 0.78rem !important;
}

body.fl26 .fl26-footer-nav {
	gap: 0.5rem !important;
}
body.fl26 .fl26-footer-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
}
body.fl26 .fl26-footer-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent);
}

body.fl26 .fl26-footer-rule {
	border: 0;
	border-top: 1px solid var(--fl-line);
	background: none;
	opacity: 1;
}

body.fl26 .fl26-footer-claim {
	max-width: 34ch;
}

@media (max-width: 781px) {
	body.fl26 .fl26-footer-cols {
		gap: 2.25rem;
	}
}


/* =========================================================================
   14. Bewegung
   Sanftes Einblenden beim Scrollen. Die Klasse .fl26-reveal wird von
   main.js gesetzt - ohne JavaScript bleibt alles normal sichtbar.
   ========================================================================= */

.fl26-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity   var(--fl-dur-slow) var(--fl-ease),
		transform var(--fl-dur-slow) var(--fl-ease);
	will-change: opacity, transform;
}

.fl26-reveal.fl26-in {
	opacity: 1;
	transform: none;
}

/* Pflicht: wer Animationen abgeschaltet hat, bekommt keine (1.4) */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	body.fl26 *,
	body.fl26 *::before,
	body.fl26 *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.fl26-reveal {
		opacity: 1 !important;
		transform: none !important;
	}
	body.fl26 .fl-card:hover,
	body.fl26 .fl-set-card:hover,
	body.fl26 .wp-element-button:hover {
		transform: none !important;
	}
	body.fl26 .fl-card:hover .fl-card-img,
	body.fl26 .fl-gallery-item:hover img,
	body.fl26 .fl26-main-front .wp-block-column:hover figure.wp-block-image img {
		transform: none !important;
	}
	body.fl26-front .wp-block-cover.fixed-bg .wp-block-cover__video-background {
		display: none;
	}
}


/* =========================================================================
   14b. Feinschliff
   ========================================================================= */

/* --- Aktuelle Seite in der Navigation kenntlich machen ----------------- */
body.fl26 .fl26-nav .current-menu-item > .wp-block-navigation-item__content,
body.fl26 .fl26-nav .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--heading);
}
/* Die Akzentlinie bleibt beim aktiven Eintrag dauerhaft stehen */
body.fl26 .fl26-nav .wp-block-navigation-item.current-menu-item:not(.cta-nav-button) > .wp-block-navigation-item__content::after,
body.fl26 .fl26-nav .wp-block-navigation-item.current-menu-ancestor:not(.cta-nav-button) > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}
/* Im Untermenue reicht ein dezenter Farbwechsel */
body.fl26 .fl26-nav .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}

/* --- Ruhige Flaeche, solange ein Kartenbild noch nicht da ist ---------
   Die Bilder laden per loading="lazy" nach (siehe functions.php). Bis
   dahin steht hier ein Verlauf statt eines schwarzen Lochs.            */
body.fl26 .fl-card-img {
	background-image: linear-gradient(135deg, #2f2f34 0%, #26262b 55%, #2a2a30 100%);
}

/* --- Textauswahl ------------------------------------------------------- */
body.fl26 ::selection {
	background: var(--wp--preset--color--accent-2);
	color: #141414;
}

/* --- Bildlaufleiste auf dunklem Grund ---------------------------------- */
body.fl26 {
	scrollbar-color: #4a4a4a transparent;
	scrollbar-width: thin;
}
body.fl26 ::-webkit-scrollbar {
	width: 11px;
	height: 11px;
}
body.fl26 ::-webkit-scrollbar-track {
	background: transparent;
}
body.fl26 ::-webkit-scrollbar-thumb {
	background-color: #4a4a4a;
	border-radius: 999px;
	border: 3px solid var(--wp--preset--color--base-deep);
}
body.fl26 ::-webkit-scrollbar-thumb:hover {
	background-color: #5f5f5f;
}

/* --- Druckausgabe ------------------------------------------------------
   Konditionen und Checklisten werden erfahrungsgemaess ausgedruckt.
   Dunkler Grund waere dafuer eine Zumutung.                              */
@media print {
	body.fl26 {
		background: #ffffff !important;
		color: #111111 !important;
	}
	body.fl26 .fl26-main :is(h1, h2, h3, h4, h5, h6),
	body.fl26 .fl26-main p,
	body.fl26 .fl26-main li,
	body.fl26 .fl26-main td,
	body.fl26 .fl26-main th {
		color: #111111 !important;
	}
	body.fl26 .fl26-main [style*="background-color"],
	body.fl26 .fl26-main [style*="rgb(93,95,117)"],
	body.fl26 .fl26-section {
		background: none !important;
		background-color: #ffffff !important;
	}
	body.fl26 header.wp-block-template-part,
	body.fl26 .fl26-footer,
	body.fl26 .fl26-hero,
	body.fl26 .fl-page-header,
	body.fl26 .wp-block-cover,
	body.fl26 .fl26-filter-panel,
	body.fl26 .fl-filter-panel,
	body.fl26 .fl-filter-tabs,
	body.fl26 #wpadminbar {
		display: none !important;
	}
	body.fl26 .fl-card,
	body.fl26 .fl-set-card {
		content-visibility: visible;
		border: 1px solid #cccccc;
		break-inside: avoid;
	}
	body.fl26 a {
		color: #111111 !important;
		text-decoration: underline;
	}
	/* Zieladresse hinter externen Links mit ausgeben */
	body.fl26 .fl26-main a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
		color: #555555;
	}
}


/* =========================================================================
   15. Alt-Inline-Farben einfangen
   Die bestehenden Seiten tragen ihre Farben als Inline-Styles im Inhalt.
   Sie werden hier NICHT im Inhalt geaendert (der bleibt unangetastet),
   sondern nur optisch an die neue, tiefere Palette angeglichen.
   Inline-Styles lassen sich ausschliesslich mit !important ueberschreiben.
   ========================================================================= */

/* Grossflaechige Sektionshintergruende auf die tiefere Basis ziehen */
body.fl26 .fl26-main [style*="background-color:#2e2e2e"] {
	background-color: var(--wp--preset--color--base-deep) !important;
	background-image: radial-gradient(
		130% 85% at 50% 0%,
		rgba(224, 247, 255, 0.04) 0%,
		rgba(224, 247, 255, 0) 62%
	);
}

body.fl26 .fl26-main [style*="background-color:#1f1f1f"] {
	background-color: var(--wp--preset--color--section) !important;
}

/* Die alte Mauve-Overlayfarbe der Kopfbilder neutralisieren */
body.fl26 [style*="background-color:#6f5463"] {
	background-color: transparent !important;
}

/* Die beiden Zwischenbaender (Kennzahlen, Ueber-uns) tragen im Inhalt
   einen graublauen Verlauf aus dem alten Theme:
   linear-gradient(94deg, rgb(80,80,99) -> rgb(93,95,117) ...).
   Der bricht die dunkle Buehne komplett auf. Ersetzt wird er hier durch
   die Sektionsfarbe mit einem sehr dezenten Lichtschimmer nach oben -
   der Inhalt bleibt unangetastet. */
body.fl26 .fl26-main [style*="rgb(93,95,117)"] {
	/* Bewusst etwas heller als base-deep (#1a1a1a) und section (#1f1f1f):
	   diese Baender liegen zwischen zwei dunklen Abschnitten und muessen
	   sich davon absetzen (1.5 - benachbarte Sektionen nie gleich). */
	background-color: var(--fl-band) !important;
	background-image: radial-gradient(
		120% 90% at 50% 0%,
		rgba(224, 247, 255, 0.07) 0%,
		rgba(224, 247, 255, 0) 62%
	) !important;
	border-top: 1px solid var(--fl-line);
	border-bottom: 1px solid var(--fl-line);
}

/* In diesen Baendern steht die Schrift im Inhalt auf #03081e bzw.
   #ffffff. Das dunkle Blau waere auf dunklem Grund unlesbar. */
body.fl26 .fl26-main [style*="color:#03081e"]:not([style*="background-color:#03081e"]) {
	color: var(--wp--preset--color--ink) !important;
}

/* Sehr dunkle Textfarben aus dem alten Theme waeren auf Dunkel unlesbar.

   ACHTUNG bei diesen Attributselektoren: "color:#252525" steckt als
   Teilstring auch in "background-color:#252525". Ohne das :not() wuerde
   hier also auch Elementen die TEXTfarbe gesetzt, die den Wert nur als
   HINTERGRUND tragen - Text und Flaeche waeren dann gleichfarbig und der
   Text unsichtbar. Deshalb wird der Hintergrundfall ausdruecklich
   ausgenommen. */
body.fl26 .fl26-main [style*="color:#252525"]:not([style*="background-color:#252525"]),
body.fl26 .fl26-main [style*="color:#242925"]:not([style*="background-color:#242925"]) {
	color: var(--wp--preset--color--ink) !important;
}

/* Inline-Links auf den Akzent ziehen - Buttons ausgenommen, die tragen
   #e0f7ff als Hintergrund und brauchen ihre eigene dunkle Schriftfarbe. */
body.fl26 .fl26-main a[style*="color:#e0f7ff"]:not(.wp-element-button):not([style*="background-color:#e0f7ff"]) {
	color: var(--wp--preset--color--accent) !important;
}
body.fl26 .fl26-main a[style*="color:#e0f7ff"]:not(.wp-element-button):not([style*="background-color:#e0f7ff"]):hover {
	color: var(--wp--preset--color--accent-2) !important;
}

/* Ueberschriften aus dem Inhalt auf die Display-Schrift ziehen.
   Die Seiten setzen dort teils font-weight/letter-spacing/uppercase
   inline - das wird hier vereinheitlicht. */
body.fl26 .fl26-main :is(h1, h2, h3)[style] {
	font-family: var(--wp--preset--font-family--display) !important;
	font-weight: 400 !important;
	letter-spacing: -0.015em !important;
	text-transform: none !important;
}
body.fl26 .fl26-main :is(h4, h5, h6)[style] {
	font-family: var(--wp--preset--font-family--body) !important;
}