/* ===========================================================================
   MM-Offshore — Angebots-Fenster: Schliessen + kompakte Leiste auf Mobil
   ---------------------------------------------------------------------------
   Betrifft ausschliesslich das dauerhaft eingeblendete Angebots-Fenster aus
   der Kopfzeilen-Vorlage 450 (Element 7c0592e). Die Vorlage selbst bleibt
   unangetastet, das hier ist reine Darstellung.

   Ausgangslage (gemessen 02.08.2026, Seite /imprint/):
     1440 px  Fenster 305x150, belegt  3,5 % der Bildschirmflaeche
      430 px  Fenster 305x139, belegt 10,6 %
      375 px  Fenster 305x139, belegt 13,9 %  <- verdeckt Fliesstext
   Auf schmalen Bildschirmen steht es ausserdem nicht am Rand, sondern wird vom
   Einwilligungs-Banner nach oben in den Inhalt geschoben (gemessen 290 px).

   Loesung:
     ab 993 px  Fenster bleibt wie es ist, bekommt nur ein Schliessen-Kreuz.
     bis 992 px Fenster wird zur flachen Leiste am unteren Rand: zwei Schalt-
                flaechen nebeneinander (Anrufen + Angebot) und das Kreuz.
                Die Zeile "Capacity available" entfaellt dort; der pulsierende
                Punkt wandert in die Angebots-Schaltflaeche und traegt das
                Verfuegbarkeits-Signal weiter.

   Das Ausweichen vor dem Einwilligungs-Banner bleibt unveraendert: die Regel
   in mmo-privacy/assets/mmo-consent.css hat vier Klassen und !important und
   gewinnt damit bewusst gegen die Positionsangaben hier.
   =========================================================================== */

/* ------------------------------------------------------------ geschlossen */

.elementor-element.elementor-element-7c0592e.mmo-qcta-hidden {
	display: none !important;
}

/* --------------------------------------------------------- Schliess-Kreuz */

/* Zwei Klassen und !important sind hier noetig: das Design-Kit setzt
   .elementor-kit-6 button {padding:15px 30px} und liegt damit ueber einer
   einfachen Klasse — ohne Gegenwehr wird aus dem 28-px-Kreis eine
   64x34-Schaltflaeche (gemessen). */
.mmo-qcta .mmo-qcta__close {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box !important;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	cursor: pointer;
	background: #FFFFFF;
	color: #133D67;
	border: 2px solid #DFE4E8;
	border-radius: 50%;
	line-height: 0;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.mmo-qcta__close svg {
	width: 11px;
	height: 11px;
	display: block;
	pointer-events: none;
}

.mmo-qcta__close:hover,
.mmo-qcta__close:focus-visible {
	background: #4FA747;
	border-color: #4FA747;
	color: #FFFFFF;
}

.mmo-qcta__close:focus-visible {
	outline: 3px solid rgba(79, 167, 71, .35);
	outline-offset: 2px;
}

.mmo-qcta__close:active {
	transform: scale(.92);
}

/* =========================================================================
   ANGEBOTS-SCHALTFLAECHE — Tiefe und Glanz ohne Zeigegeraet
   -------------------------------------------------------------------------
   Der vorhandene Specular-Effekt (mm-rb.css, .mmrb-specbtn) haengt komplett
   an :hover und an der Cursor-Naehe (--edge-proximity) — auf einem
   Touchscreen ist er also NIE zu sehen. Genau deshalb wirkte die
   Schaltflaeche mobil flach. Hier kommen zwei Dinge dazu, die ohne Cursor
   laufen:

     1. ein senkrechter Verlauf statt einer flachen Farbe (Tiefe)
     2. ein Glanzstreifen, der alle 6,5 s einmal durchlaeuft (rund 1,3 s
        Bewegung, danach Ruhe — dauerhaftes Glitzern waere unruhig, das
        Fenster steht ja staendig im Bild)

   Beides laeuft ueber background-image, weil beide Pseudo-Elemente der
   Schaltflaeche vom Specular-Effekt belegt sind (::before Rand-Shine,
   ::after Cursor-Licht). Der Glanz bleibt im Rahmen, weil .mmrb-specbtn
   schon overflow:hidden mitbringt. Bei Beruehrung mit dem Zeiger haelt der
   Streifen an, damit er sich nicht mit dem Cursor-Licht ueberlagert.
   ========================================================================= */

.mmo-qcta .elementor-element-845df4d .elementor-button {
	background-image:
		linear-gradient(100deg, transparent 32%, rgba(255, 255, 255, .46) 42%, rgba(255, 255, 255, .10) 50%, rgba(255, 255, 255, .26) 56%, transparent 66%),
		linear-gradient(180deg, #5CB453 0%, #4FA747 55%, #479C3F 100%) !important;
	background-repeat: no-repeat, no-repeat !important;
	background-size: 300% 100%, 100% 100% !important;
	background-position: 118% 0, 0 0;
	animation: mmo-qcta-sweep 6.5s ease-in-out infinite;
}

.mmo-qcta .elementor-element-845df4d .elementor-button:hover,
.mmo-qcta .elementor-element-845df4d .elementor-button:focus-visible {
	background-image:
		linear-gradient(100deg, transparent 32%, rgba(255, 255, 255, .46) 42%, rgba(255, 255, 255, .10) 50%, rgba(255, 255, 255, .26) 56%, transparent 66%),
		linear-gradient(180deg, #3E9636 0%, #328C2A 55%, #2C7D25 100%) !important;
	animation-play-state: paused;
}

@keyframes mmo-qcta-sweep {
	0%, 68%   { background-position: 118% 0, 0 0; }
	92%, 100% { background-position: -18% 0, 0 0; }
}

/* =========================================================================
   AB 993 PX — Fenster unveraendert, Kreuz sitzt aussen an der oberen Ecke
   -------------------------------------------------------------------------
   Bewusst halb ueberlappend statt innen: innen begaenne es auf der gruenen
   Schaltflaeche, die direkt an der oberen Innenkante anliegt (Innenabstand
   der Karte 12 px, Schaltflaechenhoehe 60 px). Ein Kreuz innen haette also
   zusaetzliche Hoehe gekostet.
   ========================================================================= */

@media (min-width: 993px) {

	.elementor-element.elementor-element-7c0592e.mmo-qcta {
		overflow: visible;
	}

	.mmo-qcta > .mmo-qcta__close {
		position: absolute;
		top: -11px;
		inset-inline-end: -11px;
		width: 28px !important;
		height: 28px !important;
		box-shadow: 0 4px 12px rgba(14, 33, 53, .18);
		z-index: 2;
	}
}

/* =========================================================================
   BIS 992 PX — flache Leiste, buendig am unteren Bildschirmrand
   -------------------------------------------------------------------------
   Sie sitzt auf der Kante auf (Lars 02.08.: "kann wirklich am unteren
   Bildschirmrand ansetzen"): keine Abstaende links, rechts und unten, nur
   oben abgerundet. Das ist die flachste Bauform, sie verdeckt am wenigsten.

   Rahmen und Schatten kommen hier bewusst neu: die Vorgabe aus mmo-base.css
   (2 px #4FA747 plus gruener 4-px-Schein) war auf die schwebende Karte
   gemuenzt und wirkt ueber die volle Breite zu laut (Lars 02.08.). Statt
   dessen eine graue Haarlinie oben in der Rahmenfarbe der Website (#DFE4E8,
   dieselbe wie an der Anruf-Schaltflaeche) und ein weicher Schatten nach oben.
   ========================================================================= */

@media (max-width: 992px) {

	.elementor-element.elementor-element-7c0592e.mmo-qcta {
		/* Breite: ueber den Bildschirm statt 305 px feste Karte */
		max-width: none !important;
		width: auto !important;
		inset-inline-start: 0 !important;
		inset-inline-end: 0 !important;
		inset-block-end: 0 !important;

		border: 0 !important;
		border-top: 1px solid #DFE4E8 !important;
		border-radius: 14px 14px 0 0 !important;
		box-shadow: 0 -4px 20px rgba(14, 33, 53, .10) !important;

		/* Zeile statt Stapel. Mittig, damit die Leiste auf breiteren Geraeten
		   (Tablet) nicht zu einer ueber 900 px langen Schaltflaeche wird. */
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 8px !important;

		/* Der Sicherheitsbereich ist Pflicht: die Seite setzt
		   viewport-fit=cover, ohne den Zuschlag laege die Leiste auf iPhones
		   unter dem Home-Indikator und die Schaltflaechen waeren kaum
		   treffbar. Ohne Indikator meldet env() 0 und es bleibt bei 8 px. */
		padding: 8px 12px !important;
		padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
	}

	/* Der Rand-Schein der Glow-Karte traegt bei einer randlosen Leiste nichts
	   bei und ragt seitlich aus dem Bild. Auf Zeigegeraeten ohne Hover ist er
	   ohnehin abgeschaltet, hier zaehlt der verkleinerte Desktop-Browser. */
	.mmo-qcta > .mmrb-glowcard__edge,
	.mmo-qcta > .mmrb-glowcard__fill {
		display: none !important;
	}

	/* Solange das Einwilligungs-Banner steht, wird die Leiste von
	   mmo-consent.css eine Bannerhoehe nach oben gesetzt. Dort schwebt sie,
	   also bekommt sie fuer diesen Zustand ihre Abstaende und die volle
	   Rundung zurueck — eine unten eckige Leiste mitten im Bild saehe
	   abgeschnitten aus. Nach der Cookie-Entscheidung nimmt das Banner-Plugin
	   die Klasse vom body und die Leiste sitzt wieder auf der Kante. */
	body.gdpr-infobar-visible .elementor-element.elementor-element-7c0592e.mmo-qcta {
		inset-inline-start: 12px !important;
		inset-inline-end: 12px !important;
		border: 1px solid #DFE4E8 !important;
		border-radius: 14px !important;
		box-shadow: 0 10px 30px rgba(14, 33, 53, .14) !important;
		padding-bottom: 8px !important;
	}

	/* Zeile "Capacity available" entfaellt — der Punkt sitzt jetzt in der
	   Angebots-Schaltflaeche (Regel weiter unten). */
	.mmo-qcta > .elementor-element-7b0261a {
		display: none !important;
	}

	/* ---------------------------------------------------- Angebot (gruen) */

	/* Grundbreite 340 px, darf schrumpfen: auf 375 px Bildschirm bleiben nach
	   Anruf-Schaltflaeche, Kreuz und Abstaenden rund 185 px uebrig. */
	.mmo-qcta > .elementor-element-845df4d {
		flex: 0 1 340px !important;
		min-width: 0 !important;
		width: auto !important;

		/* Ruhiger Atem-Schein. Er sitzt auf dem umgebenden Feld und nicht auf
		   der Schaltflaeche selbst: deren box-shadow gehoert dem
		   Specular-Effekt (Rand-Shine), den wollen wir nicht ueberschreiben.
		   Radius und Zeilenhoehe sorgen dafuer, dass Feld und Schaltflaeche
		   deckungsgleich sind, sonst saesse der Schein versetzt. */
		border-radius: 8px;
		line-height: 0;
		animation: mmo-qcta-breathe 3.4s ease-in-out infinite;
	}

	@keyframes mmo-qcta-breathe {
		0%, 100% { box-shadow: 0 2px 10px rgba(79, 167, 71, .28); }
		50%      { box-shadow: 0 5px 20px rgba(79, 167, 71, .55); }
	}

	.mmo-qcta .elementor-element-845df4d .elementor-button {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100%;
		height: 48px;
		padding: 0 14px !important;
		font-size: 13px !important;
		line-height: 1.15 !important;
		letter-spacing: .01em;
		white-space: nowrap;
	}

	/* Verfuegbarkeits-Punkt: wandert in die Schaltflaeche. Weiss statt gruen,
	   weil die Flaeche selbst gruen ist. Der Wrapper ist bereits ein
	   Flex-Container (gemessen), das Pseudo-Element reiht sich also ein. */
	.mmo-qcta .elementor-element-845df4d .elementor-button-content-wrapper {
		align-items: center !important;
		justify-content: center;
	}

	.mmo-qcta .elementor-element-845df4d .elementor-button-content-wrapper::before {
		content: "";
		flex: 0 0 auto;
		width: 8px;
		height: 8px;
		margin-inline-end: 4px;
		border-radius: 50%;
		background: #FFFFFF;
		animation: mmo-qcta-dot 2.2s ease-out infinite;
	}

	/* ---------------------------------------------------- Anrufen (Umriss) */

	/* width:auto ist Pflicht: Elementor gibt jedem .e-con ein
	   width:var(--width) mit, hier 100% — der Block naehme sonst die ganze
	   Zeile ein und drueckte Angebots-Schaltflaeche und Kreuz heraus
	   (gemessen: 948 px von 968 px). */
	.mmo-qcta > .elementor-element-670e092 {
		position: relative;
		flex: 0 0 auto !important;
		width: auto !important;
		--width: auto;
		height: 48px;
		padding: 0 14px !important;
		gap: 7px !important;
		border: 2px solid #DFE4E8;
		border-radius: 8px;
		background: #FFFFFF;
		transition: border-color .18s ease, background-color .18s ease;
	}

	.mmo-qcta > .elementor-element-670e092:hover,
	.mmo-qcta > .elementor-element-670e092:focus-within {
		border-color: #4FA747;
		background: #F4FAF3;
	}

	/* Die Rufnummer ist fuer eine Leiste zu lang. Sichtbar wird "Call us",
	   die Nummer bleibt im Verweis und damit fuer Vorleseprogramme erhalten. */
	.mmo-qcta > .elementor-element-670e092 .elementor-heading-title {
		font-size: 0 !important;
		line-height: 48px !important;
		white-space: nowrap;
	}

	.mmo-qcta > .elementor-element-670e092 .elementor-heading-title a {
		color: #133D67 !important;
		text-decoration: none !important;
	}

	.mmo-qcta > .elementor-element-670e092 .elementor-heading-title a::before {
		content: "Call us";
		font-size: 14px;
		font-weight: 600;
		letter-spacing: .01em;
	}

	/* Ganze Flaeche anwaehlbar, nicht nur die Beschriftung. */
	.mmo-qcta > .elementor-element-670e092 .elementor-heading-title a::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 8px;
	}

	.mmo-qcta > .elementor-element-670e092 .elementor-widget-image img {
		width: 17px !important;
		height: 17px !important;
	}

	/* ------------------------------------------------------------- Kreuz */

	.mmo-qcta > .mmo-qcta__close {
		position: static;
		width: 30px !important;
		height: 30px !important;
		align-self: center;
	}
}

/* Sehr schmale Geraete: Beschriftung der Anruf-Schaltflaeche entfaellt,
   das Hoerer-Symbol allein traegt die Bedeutung. Ohne das bricht die
   Angebots-Beschriftung um (gerechnet: 320 px Bildschirm lassen innen
   280 px, davon braucht die Zeile mit Beschriftung rund 250 px). */
@media (max-width: 360px) {

	.mmo-qcta > .elementor-element-670e092 {
		padding: 0 12px !important;
		gap: 0 !important;
	}

	.mmo-qcta > .elementor-element-670e092 .elementor-heading-title a::before {
		content: none;
	}
}

@keyframes mmo-qcta-dot {
	0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); }
	55%  { transform: scale(1.22); box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
	100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {

	.mmo-qcta .elementor-element-845df4d .elementor-button-content-wrapper::before,
	.mmo-qcta > .elementor-element-845df4d,
	.mmo-qcta .elementor-element-845df4d .elementor-button {
		animation: none !important;
	}

	/* Der Verlauf bleibt (er bewegt sich nicht), nur der Glanzstreifen wird
	   an den Rand geparkt, damit er nicht mitten auf der Flaeche steht. */
	.mmo-qcta .elementor-element-845df4d .elementor-button {
		background-position: 118% 0, 0 0 !important;
	}

	.mmo-qcta > .elementor-element-845df4d {
		box-shadow: 0 2px 10px rgba(79, 167, 71, .28);
	}

	.mmo-qcta__close {
		transition: none;
	}
}

/* Scroll-Hero-Seiten (Startseite): Leiste erst unterhalb der Hero-Sektion.
 * Nur die schmale Leisten-Variante (<=992px) — das Desktop-Fenster bleibt
 * dauerhaft sichtbar. Die Klassen setzt mmo-quote-cta.js. */
@media (max-width: 992px) {
	body.mmo-has-scrollhero .mmo-qcta {
		transition: transform .45s ease, opacity .45s ease;
	}
	body.mmo-has-scrollhero:not(.mmo-below-hero) .mmo-qcta {
		transform: translateY(140%);
		opacity: 0;
		pointer-events: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	body.mmo-has-scrollhero .mmo-qcta {
		transition: none;
	}
}