/* =========================================================
   Mobile Overrides
   Ausnahmen & Anpassungen ausschließlich für Mobile.
   Wird im Footer eingebunden, damit sie die Hauptstyles
   sicher überschreiben.
   ========================================================= */

@media (max-width: 991.98px) {

	/* Diese Regel-Sammlung deckt Mobile (xs/sm, < 768px) UND iPad Portrait
	   (md-Range, 768-991px) ab. Original-Design war erst ab 1280 px gedacht,
	   alles darunter bekommt das Mobile-First-Layout. */

	/* Horizontalen Scroll verhindern: einzelne Drittanbieter-Widgets (z.B. Jameda)
	   haben hardcoded Pixelbreiten (272px) und überlaufen mobile Spalten. */
	html, body {
		overflow-x: hidden;
	}

	/* Jameda-Widgets: kleiner skalieren und am Anker links oben ausrichten,
	   damit sie nicht mehr als die ganze Seitenbreite einnehmen. */
	[id^="jameda-widget-container"] {
		transform: scale(0.55);
		transform-origin: top left;
	}


	/* ---- Footer-Wehner Mobile-Layout ---------------------------------
	   Markup-Hooks: .footer-wehner__logo-row, .footer-wehner__logo-img,
	   .footer-wehner__social, .footer-wehner__legal.
	   Ziel: Logo groß + linksbündig, Reihenfolge Social → Privacy,
	   Privacy als dezenter Inline-Text. */

	/* Footer-Wrapper hat über die .wrapper-Klasse 30px padding-top — auf Mobile
	   doppelt zum Footer-Col-Padding (40px), wirkt zu luftig. Nullen. */
	#wrapper-footer {
		padding-top: 0 !important;
	}

	/* Footer-Layout-Fix für Mobile:
	   1. Die innere Row ist position:absolute (für Desktop-Map-Overlay) — die
	      Karte daneben ist auf Mobile ausgeblendet, dadurch trägt der Footer-
	      Inhalt nicht zur Document-Höhe bei und der graue Hintergrund wirkt
	      abgeschnitten. Auf Mobile zurück in den Document-Flow.
	   2. footer-col hat inline height:calc(70vh+3rem) + min-height:730px →
	      enorme Leerfläche. Auf auto reduzieren, 40px Padding oben/unten. */
	#wrapper-footer .row.position-absolute {
		position: static !important;
	}
	#wrapper-footer .footer-col {
		height: auto !important;
		min-height: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 40px !important;
	}

	/* Logo: full-width, linksbündig, Größe angeglichen an Hauptseite (~170px).
	   Eigenes margin-top entfernen, damit der 40px Footer-Col-Top-Padding allein wirkt. */
	#wrapper-footer .footer-wehner__logo-row > [class*="col-"] {
		margin-left: 0 !important;
		margin-top: 0 !important; /* überschreibt Bootstrap mt-5 */
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* Bootstrap mt-5 (3rem/48px) auf Mobile zu groß zwischen Logo & nächster Sektion.
	   Auf 1rem (16px) reduzieren — passt zum Rhythmus der anderen mt-3-Rows. */
	#wrapper-footer .footer-col > .row.mt-5 {
		margin-top: 1rem !important;
	}
	#wrapper-footer .footer-wehner__logo-img {
		width: 35% !important;
		max-width: 170px;
	}

	/* Adress/Sprechzeiten-Spalten: offset-lg-4 darf auf Mobile nicht greifen. */
	#wrapper-footer .col-12.col-lg-8.offset-lg-4,
	#wrapper-footer .col-12.col-lg-4.offset-lg-4 {
		margin-left: 0 !important;
	}

	/* Social-Icons-Block linksbündig, full-width, ein wenig Abstand nach oben */
	#wrapper-footer .footer-wehner__social {
		flex: 0 0 100%;
		max-width: 100%;
		margin-top: 1.25rem;
	}
	/* G+-Icon: legacy inline-styles neutralisieren + auf ~24px Höhe schrumpfen
	   (angeglichen an Social-Icons der Hauptseite) */
	#wrapper-footer .footer-wehner__social .fa-google-plus {
		margin-top: 0 !important;
		font-size: 1.5rem !important; /* ~24px */
	}
	/* Jameda-SVG ebenfalls auf 24px */
	#wrapper-footer .footer-wehner__social svg {
		width: 24px !important;
		height: 24px !important;
	}
	/* Inline-Style ml-3 (1rem ≈ 16px) zu eng → etwas mehr Luft zwischen Icons */
	#wrapper-footer .footer-wehner__social a + a {
		margin-left: 0.75rem !important;
	}

	/* Privacy-Links: inline + dezent (statt UPPERCASE col-spread).
	   width:auto + max-width:none nötig, da .col-4 sonst über Bootstrap-Basis
	   (width:100%) volle Breite einnimmt.
	   Bootstrap-col-Padding (15px) bleibt erhalten am ERSTEN Col, damit die Links
	   bündig zum Adressblock starten; folgende Cols haben kein left-Padding,
	   um den Abstand zueinander dezent zu halten. */
	#wrapper-footer .footer-wehner__legal {
		flex: 0 0 auto;
		width: auto;
		max-width: none;
		padding-right: 0.75rem;
		margin-top: 0.5rem;
	}
	#wrapper-footer .footer-wehner__legal + .footer-wehner__legal {
		padding-left: 0;
	}
	#wrapper-footer .footer-wehner__legal a.brand,
	#wrapper-footer .footer-wehner__legal .brand {
		font-weight: 400;
		font-size: 0.85rem;
		letter-spacing: 0;
	}

	/* Telefonzeiten-kompakt-Tabelle */
	#wrapper-footer .opening-hours--compact td:first-child {
		padding-right: 1rem;
		white-space: nowrap;
	}

}

/* Desktop (≥ 992px / lg+):
   1. Privacy-Links wieder in UPPERCASE (Source-Text ist mixed-case für Mobile/Tablet).
   2. Footer-Col-Höhe wiederherstellen, damit Map-Overlay-Layout (footer-col + map
      side-by-side via col-lg-6) korrekt funktioniert. Werte = original: 70vh + 3rem,
      min-height 730px. Greift erst ab lg, weil col-lg-6 erst ab lg aktiv ist. */
@media (min-width: 992px) {
	#wrapper-footer .footer-wehner__legal a.brand,
	#wrapper-footer .footer-wehner__legal .brand {
		text-transform: uppercase;
	}
	#wrapper-footer .footer-col {
		height: calc(70vh + 3rem) !important;
		min-height: 730px;
	}
}

/* iPad landscape (Bootstrap lg-Range: 992-1199px).
   Layout ist hier eng — Original-Design war auf ≥1280/1687px ausgelegt. */
@media (min-width: 992px) and (max-width: 1199.98px) {

	/* Horizontalen Scroll auf iPad landscape verhindern */
	html, body {
		overflow-x: hidden;
	}

	/* Telefonnummer im Header nicht umbrechen + kompakter */
	.tel-head {
		white-space: nowrap;
		letter-spacing: 1px !important;
		margin-right: 1rem !important;
	}

	/* "Zurück zur Zahnmedizin" und "Öffnungszeiten" weniger Abstand,
	   damit alles in der Header-Zeile bleibt */
	.comfort-contact {
		margin-right: 0.75rem !important;
		letter-spacing: 1px !important;
	}
	.comfort-contact.ml-5 {
		margin-left: 1.5rem !important;
	}

	/* Content-Boxen: max-width auf 100% des Containers begrenzen,
	   damit sie nicht über die Spalte hinausragen */
	.content-box-gr,
	[class*="content-box-gr"] {
		max-width: 100% !important;
	}

	/* Popover: gleiche Korrektur wie für Mobile/Tablet, da die Legacy-Regel
	   "left: calc(-0.5*(100vw - 1410px))" auch bei 1024px (=ergibt +193px)
	   das Popup nach rechts aus dem Viewport schiebt. */
	.popover {
		left: 0 !important;
		top: 0 !important;
		max-width: calc(100vw - 30px) !important;
	}
	.popover .popover-header:empty {
		display: none;
	}

	/* Adresse darf nicht umbrechen — "65779 Kelkheim (Taunus)" überschreitet
	   sonst die schmale col-lg-4 Spalte und rutscht in 2 Zeilen.
	   Im footer-col gibt es nur das eine <p> (Adresse, Z. 38 in footer-wehner.php). */
	#wrapper-footer .footer-col p {
		white-space: nowrap;
	}

	/* Social-Icons (G+ / Jameda) auf eigene Zeile ÜBER die Privacy-Links —
	   analog zum Mobile-Layout. Ausgerichtet mit offset-lg-4 der Privacy-Spalten,
	   damit alle Footer-Inhalte unterhalb der Adresse die gleiche linke Kante haben.
	   `order: 0` überschreibt das `.order-lg-3` aus dem Markup. */
	#wrapper-footer .footer-wehner__social {
		flex: 0 0 66.6667% !important;
		max-width: 66.6667% !important;
		margin-left: 33.3333% !important;
		order: 0 !important;
		margin-bottom: 0.5rem;
	}

	/* Telefonzeiten + Sprechzeiten untereinander stapeln (nicht side-by-side),
	   weil bei iPad-Landscape die col-lg-4 zu schmal für lesbare Zeit-Strings ist.
	   Hook `.footer-wehner__hours-row` betrifft nur den Telefonzeiten-Row,
	   NICHT den Adress-Row (gleiche Struktur, aber bewusst beibehalten). */
	#wrapper-footer .footer-wehner__hours-row > .col-12.col-lg-4.offset-lg-4 {
		flex: 0 0 66.6667%;
		max-width: 66.6667%;
	}
	#wrapper-footer .footer-wehner__hours-row > .col-lg-4:not(.col-12):not(.offset-lg-4) {
		flex: 0 0 66.6667%;
		max-width: 66.6667%;
		margin-left: 33.3333%;
	}

}

/* Header: Kompakt-Layout unterhalb des lg-Breakpoints
   (passt zu Bootstrap d-lg-block: 992px) */
@media (max-width: 991.98px) {

	/* Menü-Überschrift im Header auf Mobile + Tablet (iPad hoch) ausblenden */
	.menu-head {
		display: none !important;
	}

	/* Öffnungszeiten-Popover: Legacy-Regel in _child_theme.scss positioniert .popover
	   mit "left: calc(-0.5*(100vw - 1410px))" — das wirft das Popup unterhalb 1410px
	   nach rechts aus dem Viewport. Auf Mobile/Tablet: Popper.js die Positionierung
	   überlassen (left/top auf auto). Plus Breite begrenzen und leeren Title ausblenden. */
	.popover {
		left: 0 !important;
		top: 0 !important;
		max-width: calc(100vw - 30px) !important;
		/* Etwas Abstand zum rechten Viewport-Rand */
		margin-right: 20px;
	}
	.popover .popover-header:empty {
		display: none;
	}

	/* "Zurück zur Zahnmedizin"-Button kompakter, damit Logo + Burger Platz haben */
	.comfort-contact {
		font-size: 0.7rem !important;
		padding: 0.4rem 0.7rem !important;
		letter-spacing: 1px !important;
		line-height: 1.2 !important;
	}

	/* .nav-right hat im Desktop-CSS width:100% + justify-content:flex-end,
	   das frisst auf Mobile den freien Raum auf. Auf Mobile auf Content-Breite
	   schrumpfen, damit der Button per ml-auto wirklich nach rechts wandert. */
	.nav-right {
		width: auto !important;
		flex: 0 0 auto !important;
	}

	/* Das wp_nav_menu (#navbarNavDropdown) wird durch .navbar-expand global zu
	   display:flex !important gezwungen und sitzt dann sichtbar in der Flex-Zeile.
	   Auf Mobile: nur sichtbar, wenn Burger getoggled hat (.show). */
	.navbar-expand .navbar-collapse#navbarNavDropdown:not(.show) {
		display: none !important;
	}

	/* "Zurück zur Zahnmedizin"-Button nach rechts neben den Burger schieben,
	   damit das Logo links Luft hat und nicht überlappt wird. */
	.comfort-contact.ml-5 {
		margin-left: auto !important;
		margin-right: 0.5rem !important;
	}

}

/* iPad portrait (Bootstrap md-Range: 768-991px):
   Tel-Nummer im Header ausblenden — bei dieser Breite reicht der Platz
   nicht für Logo + Tel + zwei Buttons + Burger gleichzeitig.
   Der Mobile-Fall (<768px) ist bereits über d-none d-md-block am Parent
   abgedeckt; iPad-Landscape (992-1199) zeigt die Tel wieder. */
@media (min-width: 768px) and (max-width: 991.98px) {
	.tel-head {
		display: none !important;
	}
}