/* ------------------------------------------------------------------
   mediaquotes.ch Mobile-Fixes (2026-08-24)
   Behebt die von Boris gemessenen Defekte der Mobile-Ansicht.
   Nur Mobile/Tablet, Desktop bleibt unangetastet.
   ------------------------------------------------------------------ */

/* [P1] Horizontaler Overflow: Elementor "Horizontal Scroll"-Motion-Effect
   schob ein Widget per inline transform:translateX() bis 90px ueber den
   rechten Rand. Das blaehte den Layout-Viewport auf (innerWidth 481 statt
   390) und schnitt die ganze Seite links an. Auf Touch-Viewports abschalten.
   !important schlaegt Elementors inline-Style (author-important > inline). */
@media (max-width: 1024px) {
	.elementor-motion-effects-element,
	.elementor-widget-container.elementor-motion-effects-element {
		transform: none !important;
	}
	/* Sicherheitsnetz gegen weitere Ausreisser: NICHT auf html/body, das
	   wuerde den sticky Header (uk-sticky) brechen. Nur auf Sektionen. */
	.elementor-section,
	.elementor-container {
		max-width: 100%;
		overflow-x: clip;
	}
}

/* [P2] Touch-Targets: Apple/Google-Richtwert min. 44px.
   Gemessen waren 18-20px (Header-Toggle), 33px (Footer-Menue-Toggle),
   14px (Complianz-Links). Optisch bleibt alles gleich gross, die
   Trefferflaeche waechst ueber Padding. */
@media (max-width: 1024px) {
	.toggle-icon {
		min-width: 44px;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.elementor-menu-toggle {
		min-width: 44px;
		min-height: 44px;
	}
	.cmplz-links a.cmplz-link,
	a.cmplz-link {
		font-size: 14px !important;
		line-height: 1.5;
		display: inline-block;
		padding: 8px 4px;
	}
}

/* [P3] Schriftgroessen unter 14px in den beiden Custom-Sektionen.
   Auf Mobile auf mind. 14px anheben (Lesbarkeit), Desktop unveraendert. */
@media (max-width: 640px) {
	#mq-services .mq-s-eyebrow,
	#mq-gpu-stack .mq-g-eyebrow { font-size: 14px !important; }
	#mq-gpu-stack .mq-g-tag,
	#mq-services .mq-s-pill { font-size: 14px !important; }
	#mq-services .mq-s-cat-count { font-size: 14px !important; }
	#mq-services .mq-s-cta,
	#mq-gpu-stack .mq-g-cta { font-size: 14px !important; }
	#mq-services .mq-s-desc,
	#mq-gpu-stack .mq-g-desc { font-size: 14.5px !important; }
	#mq-gpu-stack .mq-g-foot { font-size: 14px !important; }
	/* CTA-Zeilen als vollwertige Touch-Targets */
	#mq-services .mq-s-cta,
	#mq-gpu-stack .mq-g-cta { min-height: 44px !important; align-items: center; }
}

/* [P2] Hero auf Tablet (641-1024px): Das Hintergrundbild der Section
   #pr_hero wird ab ca. x294 sichtbar, die Textspalte ist aber 482px breit.
   Dadurch lag der Zeilenteil "us dae" auf dem Bergbild und war unlesbar.
   Kleinere Schrift => kuerzere Zeilen => Text bleibt links vom Bild. */
@media (min-width: 641px) and (max-width: 1024px) {
	#pr_hero .elementor-element-8f8833e h2.elementor-heading-title,
	#pr_hero h2.elementor-heading-title {
		font-size: 34px !important;
		line-height: 1.15 !important;
	}
}

/* [P3] CTA-Balken "Jetzt kostenlose SEO-Analyse beantragen!":
   a.pr-button ist inline-block (shrink-to-fit, 384px) und der Container
   hat text-align:left ohne Seitenpadding -> Balken klebte am linken Rand.
   Zentrieren und Luft zum Rand geben. */
@media (max-width: 1024px) {
	#pr_hero .pr-button-container,
	.pr-button-container {
		text-align: center !important;
		padding-left: 20px;
		padding-right: 20px;
		box-sizing: border-box;
	}
}

/* [P2 Nachbesserung] 34px allein genuegten nicht: Zeile 1 war 431px breit,
   frei sind nur 254px bis zum sichtbaren Bildbereich (ab x294).
   max-width erzwingt den Umbruch nach "Werkstatt", damit kein Textteil
   mehr auf dem Bergbild liegt. */
@media (min-width: 641px) and (max-width: 1024px) {
	#pr_hero .elementor-element-8f8833e h2.elementor-heading-title,
	#pr_hero h2.elementor-heading-title {
		max-width: 250px;
	}
}

/* [Minor] "Kreativagentur." endete bei 390px exakt auf der Viewportkante.
   Symmetrisches Padding gibt Luft und erhaelt zentrierte Headings. */
@media (max-width: 640px) {
	.elementor-widget-heading .elementor-widget-container {
		padding-left: 10px;
		padding-right: 10px;
		box-sizing: border-box;
	}
}