/* Favorent Themen-Hintergrund für Service-Widgets.
   Vollbreiter Hintergrund hinter einem Widget, der oben/unten weich ausblendet,
   damit aufeinanderfolgende Bereiche optisch ineinander übergehen. */

/* Der Hintergrund tritt aus dem Inhaltscontainer heraus (100vw) – Seite darf dabei
   nicht horizontal scrollen. clip statt hidden, damit sticky/fixed intakt bleiben. */
html:has(.favbd) { overflow-x: clip; }

.favbd {
	position: relative;
	padding: clamp(26px, 4.5vw, 64px) 0;

	/* Beide Werte kommen aus den Plugin-Einstellungen (PHP setzt sie inline):
	   --favbd-gap      = Höhe des bildfreien (weißen) Streifens an der Kante
	   --favbd-fade-len = Strecke, über die das Bild auf volle Deckkraft hochblendet
	   Der Anstieg ist bewusst nicht linear, sondern vorne steil – so wirkt der
	   Übergang weich, ohne einen breiten hellen Saum zu hinterlassen. */
	--favbd-gap: 0px;
	--favbd-fade-len: 28px;
	--favbd-fade: linear-gradient(to bottom,
		rgba(0,0,0,0) 0,
		rgba(0,0,0,0) var(--favbd-gap),
		rgba(0,0,0,.45) calc(var(--favbd-gap) + var(--favbd-fade-len) * .12),
		rgba(0,0,0,.78) calc(var(--favbd-gap) + var(--favbd-fade-len) * .34),
		rgba(0,0,0,.94) calc(var(--favbd-gap) + var(--favbd-fade-len) * .64),
		#000 calc(var(--favbd-gap) + var(--favbd-fade-len)),
		#000 calc(100% - var(--favbd-gap) - var(--favbd-fade-len)),
		rgba(0,0,0,.94) calc(100% - var(--favbd-gap) - var(--favbd-fade-len) * .64),
		rgba(0,0,0,.78) calc(100% - var(--favbd-gap) - var(--favbd-fade-len) * .34),
		rgba(0,0,0,.45) calc(100% - var(--favbd-gap) - var(--favbd-fade-len) * .12),
		rgba(0,0,0,0) calc(100% - var(--favbd-gap)),
		rgba(0,0,0,0) 100%);
}

/* Widgets, die sich selbst erst per JS einblenden (Bewertungen), starten samt Hintergrund verborgen. */
.favbd--start-hidden { display: none; }

.favbd-bg {
	position: absolute;
	top: 0; bottom: 0;
	/* WICHTIG: kein transform! Ein transformierter Vorfahre setzt
	   background-attachment:fixed außer Kraft – der Hintergrund würde mitscrollen. */
	left: calc(50% - 50vw);
	width: 100vw;
	z-index: 0;
	pointer-events: none;
}
/* Weiche Übergänge nach oben/unten → Nachbarbereiche fließen ineinander. */
.favbd--blend .favbd-bg {
	-webkit-mask-image: var(--favbd-fade);
	        mask-image: var(--favbd-fade);
}

.favbd-img {
	position: absolute; inset: 0; display: block;
	background-image: var(--favbd-img, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.favbd--parallax .favbd-img { background-attachment: fixed; }

/* Farbschleier in Hausfarbe – ruhiger Look + Lesbarkeit über dem Foto. */
.favbd-ov {
	position: absolute; inset: 0; display: block;
	background: linear-gradient(180deg, rgba(68, 144, 156, .85) 0%, rgba(31, 63, 70, .92) 100%);
	opacity: var(--favbd-ov, .55);
}

/* Dezenter Modus: kein Foto, sondern Verlauf in Hausfarben + feines Wellenmuster. */
.favbd--soft .favbd-img { background-image: var(--favbd-soft, linear-gradient(160deg, #cfe6ee, #f4f8f9)); }
.favbd--soft .favbd-ov {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cpath d='M0 20c15-12 30-12 45 0s30 12 45 0 30-12 45 0' fill='none' stroke='%2344909C' stroke-width='1.4' opacity='.35'/%3E%3C/svg%3E");
	background-size: 120px 40px;
	opacity: .5;
}

.favbd-inner { position: relative; z-index: 1; }

/* Inhalt auf heller Karte – hält Texte/Karten über dem Bild lesbar. */
.favbd--card .favbd-inner {
	background: rgba(255, 255, 255, .93);
	border-radius: 18px;
	padding: clamp(5px, 0.8vw, 9px);
	box-shadow: 0 12px 44px rgba(16, 23, 27, .20);
}
@supports (backdrop-filter: blur(6px)) {
	.favbd--card .favbd-inner { background: rgba(255, 255, 255, .86); backdrop-filter: blur(7px); }
}

/* Durchgehender Hintergrund: kein Ausblenden, immer feststehend – aufeinanderfolgende
   Widgets bilden dadurch EIN zusammenhängendes Bild, vor dem der Inhalt scrollt. */
.favbd--full .favbd-bg { -webkit-mask-image: none; mask-image: none; }
.favbd--full .favbd-img { background-attachment: fixed; }
.favbd--full { padding: clamp(20px, 3vw, 40px) 0; }

/* Mobil: „fixed" rendert auf iOS fehlerhaft → normaler Bildlauf. */
@media (max-width: 1024px) {
	.favbd--parallax .favbd-img,
	.favbd--full .favbd-img { background-attachment: scroll; }
}
@media (max-width: 520px) {
	.favbd { padding: 20px 0; }
	.favbd--card .favbd-inner { border-radius: 14px; }
}

/* Im Elementor-Editor die Ausmaße sichtbar halten (dort ist die Bühne schmaler). */
.elementor-editor-active .favbd-bg { width: 100%; left: 0; }

/* Nahtloser Anschluss: Elementor-Sektionen bringen einen eigenen (weißen) Hintergrund und
   ~50–60 px Innenabstand mit – der liegt AUSSERHALB des Widgets und erzeugt sonst breite
   helle Streifen zwischen zwei Hintergrundbereichen. Für Sektionen mit Themen-Hintergrund
   nehmen wir beides zurück, damit die Bereiche direkt aneinander stoßen.
   (Abschaltbar über die Einstellung „Sektionsabstand zurücknehmen".) */
.elementor-section:has(.favbd--seam),
.e-con:has(.favbd--seam) {
	background-color: transparent !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.elementor-widget:has(.favbd--seam),
.elementor-widget-container:has(.favbd--seam),
.elementor-column:has(.favbd--seam) > .elementor-widget-wrap {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
	.favbd--parallax .favbd-img,
	.favbd--full .favbd-img { background-attachment: scroll; }
}