/* =============================================================
   Responsive CSS – Astra + Elementor
   Geladen nach allen Astra-Stilen (Prioritaet 20)
   ============================================================= */

/* -------------------------------------------------------------
   1. GLOBALE GRUNDREGELN – greifen ueberall
   ------------------------------------------------------------- */

img,
video,
audio,
iframe,
embed,
object {
	max-width: 100%;
	height: auto;
}

/* Verhindert horizontalen Scroll durch breite Elemente */
body,
.site,
.ast-container {
	overflow-x: hidden;
}

/* Lange URLs und Woerter umbrechen statt ueberlaufen */
p,
li,
td,
th,
.elementor-widget-text-editor,
.elementor-widget-heading .elementor-heading-title {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* -------------------------------------------------------------
   2. NAVIGATION – Mobile Fixes
   ------------------------------------------------------------- */

/* Sub-Menu: fluid statt hartkodierter 150px */
.ast-nav-menu .sub-menu,
.main-navigation .sub-menu {
	min-width: 200px;
	max-width: 90vw;
	width: auto;
}

/* Mobiles Menue: max-height + scrollbar bei langen Menues */
@media (max-width: 921px) {
	#ast-mobile-popup,
	.ast-mobile-header-wrap .main-header-menu {
		max-height: 80dvh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Touch-Ziele: mindestens 44px hoch (WCAG) */
	.ast-nav-menu > li > a,
	.ast-nav-menu .sub-menu li > a,
	.ast-header-navigation .menu-item > a {
		min-height: 44px;
		display: flex;
		align-items: center;
	}
}

/* -------------------------------------------------------------
   3. CONTAINER / LAYOUT
   ------------------------------------------------------------- */

@media (max-width: 767px) {
	/* Seitenraender auf kleinen Screens */
	.ast-container,
	.elementor-section-boxed > .elementor-container {
		padding-left: clamp(16px, 4vw, 32px);
		padding-right: clamp(16px, 4vw, 32px);
		box-sizing: border-box;
	}

	/* Elementor Sections: kein horizontaler Ueberlauf */
	.elementor-section,
	.elementor-section > .elementor-container {
		max-width: 100%;
	}
}

/* -------------------------------------------------------------
   4. TYPOGRAFIE – fluid scaling
   ------------------------------------------------------------- */

@media (max-width: 544px) {
	h1,
	.entry-title,
	.ast-blog-single-element.ast-page-title h1 {
		font-size: clamp(1.5rem, 6vw, 2.5rem);
	}

	h2 {
		font-size: clamp(1.25rem, 5vw, 2rem);
	}

	h3 {
		font-size: clamp(1.1rem, 4vw, 1.75rem);
	}
}

/* -------------------------------------------------------------
   5. ELEMENTOR – haeufige Widget-Fixes
   ------------------------------------------------------------- */

/* Schaltflaechen umbrechen statt ueberlaufen */
.elementor-button {
	white-space: normal;
	word-break: break-word;
}

/* Google Maps: Aspekt-Verhaeltnis beibehalten */
.elementor-widget-google_maps .elementor-widget-container {
	position: relative;
	overflow: hidden;
}

.elementor-widget-google_maps iframe {
	width: 100%;
}

/* Video: Aspekt-Verhaeltnis 16:9 */
.elementor-widget-video .elementor-wrapper,
.elementor-fit-aspect-ratio {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.elementor-widget-video .elementor-wrapper iframe,
.elementor-widget-video .elementor-wrapper video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Bilder immer fluid */
.elementor-widget-image img,
.elementor-widget-image-box img {
	max-width: 100%;
	height: auto;
}

/* -------------------------------------------------------------
   6. CONTACT FORM 7 – vollstaendig responsive
   ------------------------------------------------------------- */

@media (max-width: 767px) {
	.wpcf7 input[type="text"],
	.wpcf7 input[type="email"],
	.wpcf7 input[type="tel"],
	.wpcf7 input[type="url"],
	.wpcf7 input[type="number"],
	.wpcf7 input[type="date"],
	.wpcf7 textarea,
	.wpcf7 select {
		width: 100%;
		box-sizing: border-box;
	}

	.wpcf7 input[type="submit"],
	.wpcf7 .wpcf7-submit {
		width: 100%;
	}
}

/* -------------------------------------------------------------
   7. FOOTER – Mobile Stack
   ------------------------------------------------------------- */

@media (max-width: 544px) {
	/* Footer-Widget-Bereiche zentrieren */
	.footer-widget-area.widget-area,
	.ast-footer-overlay .footer-widget-area {
		text-align: center;
	}

	/* Kein horizontaler Ueberlauf im Footer */
	.ast-footer-overlay,
	.site-below-footer-wrap,
	.site-footer {
		overflow-x: hidden;
	}

	/* Footer-Links mobil: genug Abstand */
	.ast-small-footer-section a {
		margin: 0 4px;
	}
}

/* -------------------------------------------------------------
   8. TABELLEN – horizontal scrollbar statt brechen
   ------------------------------------------------------------- */

.entry-content table,
.elementor-widget-text-editor table {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
}

/* -------------------------------------------------------------
   9. PRINT – saubere Druckansicht
   ------------------------------------------------------------- */

@media print {
	.ast-mobile-header-wrap,
	.ast-desktop-header-wrap .main-header-bar-navigation,
	.elementor-widget-video,
	#ast-mobile-popup {
		display: none !important;
	}

	body {
		font-size: 12pt;
		color: #000;
		background: #fff;
	}

	a {
		text-decoration: underline;
		color: #000;
	}

	img {
		max-width: 100%;
		page-break-inside: avoid;
	}
}