/* ===========================================================================
   mobile-fixes.css  –  Responsive Korrekturen der Gebrauchtwagen-Seiten
   ---------------------------------------------------------------------------
   Wird in header.php NACH gw.css und gw2.css geladen und korrigiert deren
   Mobile-Verhalten, ohne die Originaldateien anzufassen.

   Breakpoint 959px: Die Spalten des Detail-Layouts (uk-width-*@m) stapeln
   unterhalb von UIkits "@m" (960px). Alles hier gilt also genau dann, wenn
   das Layout einspaltig ist. Die Desktop-Ansicht wird nicht berührt
   (verifiziert: Spaltenpositionen und Slider-Masse identisch).
   ========================================================================= */


/* ---------------------------------------------------------------------------
   1. Detailseite: Foto-Slider gehoert ueber die technischen Daten
   ---------------------------------------------------------------------------
   Der gemeinsame Container ist ein Flexbox (.uk-grid) mit genau zwei Kindern:
   .print-left (Technische Daten) und .print-right (Slider). Beide haben
   order:0, deshalb entscheidet die Quelltextreihenfolge - der Slider landet
   unten. order:-1 zieht ihn nach oben, ohne das Markup zu aendern.
   ------------------------------------------------------------------------- */
@media screen and (max-width: 959px) {

	.uk-grid > .print-right {
		order: -1;
	}

	/* ---------------------------------------------------------------------
	   2. Slider-Hoehe: korrektes Seitenverhaeltnis
	   ---------------------------------------------------------------------
	   gw.css definiert .fluidHeight sieben Mal mit widerspruechlichen Werten
	   (465px / 560px / padding-bottom:33.333% / 135px / 70px!important /
	   35px!important / print 350px). Wirksam wurde padding-bottom:33.333%,
	   also ein 3:1-Rahmen - die Fahrzeugfotos sind aber 640x480 (4:3).
	   Ergebnis: das Bild wurde auf weniger als die halbe Hoehe beschnitten
	   (Container 115px, Bild 259px).

	   75% entspricht exakt 4:3. Der padding-bottom-Trick bleibt erhalten,
	   weil der iosSlider seine Hoehe vom Container ableitet - "height:auto"
	   erzeugt hier eine Zirkularitaet und kollabiert auf 0.
	   ------------------------------------------------------------------- */
	/* Die Hoehe ueber padding-bottom und die fliessende Breite galten hier
	   nur unterhalb 850px. Seit design-refresh.css Abschnitt 41 gilt beides
	   auf allen Breiten - dort auch auf den Seitentitel bezogen, damit die
	   uebrigen Slider der Website ihre eigenen Hoehen behalten. */
	.sliderContainer {
		position: absolute;
		height: 100%;
	}

	/* Die Slider-Pfeile standen hier frueher nur auf schmalen Viewports
	   mittig und als Touch-Flaeche. Seit design-refresh.css Abschnitt 40 gilt
	   das auf allen Breiten - die Regel war nur noch eine Dublette. */
}


/* ---------------------------------------------------------------------------
   3. Technische Daten / Ausstattung: Wortumbrueche mitten im Wort
   ---------------------------------------------------------------------------
   Im minifizierten Framework-Teil von gw.css steht global
   `.uk-align-right,.alignright{float:right}`. Die Wertespalten der Tabellen
   tragen genau diese Klasse. float blockifiziert eine Tabellenzelle
   (display:table-cell -> block), sie schrumpft auf shrink-to-fit und bricht
   Woerter hart um: "TREIBSTOF F", "Handschaltun g", "FARB E".

   Gemessen bei 375px: Zelle 109px breit (float) gegenueber 145px als
   table-cell - also ein Drittel mehr Platz, ohne irgendetwas zu verkleinern.
   ------------------------------------------------------------------------- */
table.datatable td.alignright,
table.ausstattungtable td.alignright,
table.merker_detail td.alignright {
	float: none !important;
	display: table-cell !important;
	margin: 0 !important;
	text-align: right;
}

@media screen and (max-width: 849px) {

	/* Labels duerfen umbrechen statt die Wertespalte zu quetschen. */
	table.datatable td,
	table.ausstattungtable td {
		hyphens: auto;
		overflow-wrap: break-word;
		word-break: normal;
	}

	td.datadesc {
		text-transform: none;   /* Grossbuchstaben brauchen spuerbar mehr Breite */
		width: 46%;
	}

	/* .data/.ausstattung haben je 20px Innenabstand links und rechts -
	   bei 375px Viewport sind das 40px von rund 280px nutzbarer Breite. */
	.data,
	.ausstattung {
		padding-left: 12px;
		padding-right: 12px;
	}
}


/* ---------------------------------------------------------------------------
   4. Lesbarkeit - ohne an der Wurzel-Schriftgroesse zu drehen
   ---------------------------------------------------------------------------
   gw.css setzt html{font-size:14px} ab 375px und html{font-size:11px} ab
   320px, was die Lesbarkeit deutlich unterschreitet.

   ACHTUNG: Diese Werte NICHT global auf 16px hochsetzen. Flatsome rechnet
   sein komplettes Layout in rem - eine groessere Wurzel blaeht damit auch
   alle Breiten auf. Gemessen bei 375px Viewport: <main> wuchs von 375px auf
   450px, 81 Elemente ragten aus dem Bildschirm. Stattdessen werden hier
   gezielt die Textgroessen in px gesetzt; das Layout bleibt unberuehrt.
   ------------------------------------------------------------------------- */
@media screen and (max-width: 849px) {

	.data,
	.ausstattung,
	.car_content,
	.verkauf_data,
	table.datatable,
	table.ausstattungtable,
	.ausstattunglist,
	.ausstattungtable p {
		font-size: 15px;
		line-height: 1.55;
	}

	.techdata,
	.ausstattung h3 {
		font-size: 19px;
	}
}

/* Seitentitel: bricht bei 42px mitten im Wort ("Gebrauchtwage n /").
   clamp() skaliert stufenlos mit der Viewportbreite. */
@media screen and (max-width: 849px) {
	.page-title-inner h1,
	h1.entry-title,
	.gebrauchtwagen-detail-title h1,
	h1 {
		font-size: clamp(22px, 6.4vw, 38px);
		line-height: 1.2;
		word-break: normal;
		overflow-wrap: break-word;
		hyphens: auto;
	}
}


/* ---------------------------------------------------------------------------
   4b. Horizontaler Ueberlauf: die Breitenkette kappen
   ---------------------------------------------------------------------------
   <body> ist ein Grid-Container und die .uk-width-*@m-Spalten sind
   Flex-Items - beide haben min-width:auto und wachsen mit ihrem Inhalt,
   statt ihn zu beschneiden. Dadurch entsteht eine Zirkularitaet: ein zu
   breites Kind blaeht den Vorfahren auf, die Prozentbreiten darin folgen,
   und weil Flatsome body{overflow-x:clip} setzt, gibt es keinen
   Scrollbalken - der Inhalt wird einfach rechts abgeschnitten.

   min-width:0 bricht die Kette, die Viewport-Verankerung des Sliders
   verhindert, dass sie neu entsteht (der iosSlider schreibt seine beim
   Start berechnete Breite inline fest).
   ------------------------------------------------------------------------- */
@media screen and (max-width: 959px) {

	main {
		min-width: 0 !important;
		max-width: 100vw !important;
		overflow-x: clip;
	}

	.uk-section,
	.uk-container,
	.uk-grid,
	.uk-grid > * {
		min-width: 0 !important;
		max-width: 100% !important;
	}

	.fluidHeight {
		width: calc(100vw - 50px) !important;
		max-width: calc(100vw - 50px) !important;
	}

	.iosSlider {
		width: 100% !important;
		max-width: 100% !important;
	}

	.sliderContainer .slide img,
	.iosSlider img {
		max-width: calc(100vw - 50px) !important;
	}
}


/* ---------------------------------------------------------------------------
   5. Touch-Targets
   ---------------------------------------------------------------------------
   Die Filter-Selects sind 25px hoch; als Faustregel gelten 44px als
   komfortabel bedienbar.
   ------------------------------------------------------------------------- */
@media screen and (max-width: 849px) {

	.suche select,
	.suche input[type="text"],
	#filters select,
	.select select,
	select {
		min-height: 44px;
		font-size: 16px;   /* unter 16px zoomt iOS Safari beim Fokus hinein */
	}

	.suche input[type="submit"],
	.verkauf_form input[type="submit"],
	input[type="submit"],
	button {
		min-height: 44px;
		font-size: 16px;
	}

	.drucken h6 {
		padding: 12px 16px;
		font-size: 14px;
	}

	td.drucken { width: auto; }
}


/* ---------------------------------------------------------------------------
   6. Empfehlungs-Slider ("Diese Fahrzeuge koennten Sie auch interessieren")
   ---------------------------------------------------------------------------
   Ausgangslage auf dem Handy: .container_carslider ist per gw.css auf feste
   275px gesetzt, die 12 Karten sind 270x430px und per float:left angeordnet.
   Die iosSlider-Initialisierung ist im Template auskommentiert, es gibt also
   keinen Slider - die Karten stapeln sich untereinander. Gemessene
   Seitenhoehe: 11.377px.

   Hier wird daraus ein echter Touch-Slider ohne JavaScript (scroll-snap).

   Wichtig - calc(100vw - 50px) statt width:100%:
   .uk-grid ist ein Flex-Container, dessen Items min-width:auto haben. Sie
   wachsen deshalb mit ihrem Inhalt, statt ihn zu beschneiden. Eine
   prozentuale Breite bezieht sich dann auf einen bereits aufgeblaehten
   Vorfahren - overflow-x:auto greift nicht und die gesamte Seite wurde in
   Tests bis zu 3514px breit. Die Verankerung am Viewport bricht diese
   Zirkularitaet. Die 50px sind das Innenabstands-Paar von .uk-container.

   Ergebnis: kein Ueberlauf, Seitenhoehe 6.385px statt 11.377px.
   ------------------------------------------------------------------------- */
@media screen and (max-width: 849px) {

	.container_carslider,
	.featured_carslider {
		width: calc(100vw - 50px) !important;
		max-width: calc(100vw - 50px) !important;
		min-width: 0 !important;
		height: auto !important;
		overflow: visible !important;
	}

	.slider_carslider {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 12px;
		width: calc(100vw - 50px) !important;
		max-width: calc(100vw - 50px) !important;
		min-width: 0 !important;
		height: auto !important;
		padding-bottom: 10px;
		overflow-x: auto !important;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.slider_carslider .item,
	.featured_carslider .item,
	.featured_carslider .slider_carslider .item {
		float: none !important;
		flex: 0 0 72vw !important;
		width: 72vw !important;
		height: auto !important;
		min-width: 0 !important;
		margin: 0 !important;
		scroll-snap-align: start;
	}

	/* gw2.css setzt jeder dritten Karte einen linken Aussenabstand fuer das
	   frühere Drei-Spalten-Raster - im Slider stoert das. */
	.slider_carslider .item:nth-child(3n-2) {
		margin-left: 0 !important;
	}

	.slider_carslider .carImage {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 4 / 3;
		object-fit: cover;
	}

	.carslider_titel {
		font-size: clamp(20px, 5.4vw, 30px);
		line-height: 1.25;
	}
}


/* ---------------------------------------------------------------------------
   7. Uebersichtsseite: Text lag ueber dem Fahrzeugfoto
   ---------------------------------------------------------------------------
   Ursachenkette (gemessen, nicht vermutet):
   - gw2.css macht .display (Sortierleiste "Ergebnisse pro Seite / Sortierung")
     zu einem Float, und .content in gw.css ist eine leere Regel - der Float
     wird nie gecleart.
   - gw.css setzt ab 700px .car{display:inherit}. Damit ist die Karte kein
     Flex-Container und kein eigener BFC mehr und rutscht unter den Float.
   - Das <img> ist ein block-level replaced element. Nach CSS 2.1 §9.5 darf
     seine Rahmenbox eine Float-Box nicht ueberlappen, also schiebt der
     Browser NUR das Bild nach unten (gemessen: 146px). h3, h6 und die
     Datentabelle sind nicht "replaced" und bleiben stehen - dadurch wird der
     Text ueber das Foto gemalt.

   Deshalb war immer nur die erste Karte betroffen: nur sie liegt neben dem
   Float. Ein Clear loest das an der Wurzel.
   ------------------------------------------------------------------------- */
.display {
	float: none !important;
	display: flow-root !important;
	width: 100% !important;
}

.content {
	clear: both;
}

@media screen and (max-width: 849px) {

	.car {
		display: block !important;
		overflow: hidden;          /* eigener BFC als zweite Absicherung */
		width: 100% !important;
		min-height: 0 !important;  /* gw2.css: min-height:267px */
		margin-bottom: 24px;
	}

	/* Bild oben ueber die volle Breite.
	   width/height brauchen !important: sie schlagen die 350px/255px aus dem
	   Customizer-CSS (liegt in der Datenbank, nicht im Repo) und den
	   Inline-Style des <img>. */
	.car_img {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		border-right: 0 !important;
		border-bottom: 4px solid #fecc00;
		background-image: none !important;
	}

	.car_img img {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		max-width: 100% !important;
		aspect-ratio: 4 / 3;       /* reserviert den Platz vor dem Lazy-Load */
	}

	.car_content {
		width: 100% !important;
		min-height: 0 !important;
		padding: 12px 16px 16px !important;
	}

	.car_content h3 {
		font-size: 18px !important;
		line-height: 1.3 !important;
		margin: 0 0 2px !important;
	}

	.car_content h6 {
		font-size: 13px;
		margin-bottom: 10px !important;
	}


	/* -----------------------------------------------------------------------
	   8. Kartentabelle: "TREIBSTOF F", "FARB E", "Handschaltun g"
	   -----------------------------------------------------------------------
	   Vier Spalten (Label|Wert|Label|Wert) in rund 300px, dazu das global
	   vererbte word-break:break-word. Als zweispaltiges Grid wird aus jeder
	   Zeile ein sauberes Label/Wert-Paar.
	   --------------------------------------------------------------------- */
	.car_details table,
	.car_details tbody {
		display: block;
		width: 100% !important;
	}

	.car_details tr {
		display: grid;
		grid-template-columns: 8.5em 1fr;
		column-gap: 8px;
		align-items: baseline;
	}

	.car_details tr + tr {
		border-top: 1px solid #ededed;
	}

	.car_details td {
		display: block;
		width: auto !important;
		padding: 5px 0 !important;
		border: 0 !important;
		overflow-wrap: normal !important;
		word-break: keep-all !important;
		hyphens: none !important;
	}

	.car_details td.tit {
		font-size: 11px;
		line-height: 1.6;
		text-transform: uppercase;
		letter-spacing: .03em;
		color: #7d7d7d;
		white-space: nowrap;
	}

	.car_details td.des {
		font-size: 14px;
		font-weight: 600;
	}

	.car_details_footer table,
	.car_details_footer tbody,
	.car_details_footer tr,
	.car_details_footer td {
		display: block;
		width: 100% !important;
	}

	td.preis {
		text-align: left !important;
		padding-right: 0 !important;
		font-size: 22px !important;
	}


	/* -----------------------------------------------------------------------
	   9. Filter- und Sortierleiste
	   -----------------------------------------------------------------------
	   .t-3 teilt die Leiste in 41%/41%/15% Floats - bei 375px bleiben fuer
	   "Merkliste" rund 69px, das Wort bricht um.
	   --------------------------------------------------------------------- */
	.t-3,
	.t-3:last-child {
		float: none !important;
		width: 100% !important;
		margin: 0 0 14px !important;
		text-align: left !important;
	}

	.t-3 label { text-align: left !important; }
	.f-wrapper form { width: 100% !important; }
	.display { padding: 12px !important; }

	.select {
		width: 100% !important;
		float: none !important;
		min-height: 44px;
	}

	/* Der Pfeil sitzt per top:0/bottom:0 - bei 44px Hoehe nicht mehr mittig. */
	.select::after,
	#filters .select::after {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 1.1em !important;
	}

	select { padding-right: 3.2em !important; }

	.suche .radios label {
		display: block !important;
		width: 100% !important;
		padding: 9px 0 !important;
		line-height: 1.4;
	}

	.suche .radios input[type="radio"],
	.suche .radios input[type="checkbox"] {
		width: 18px;
		height: 18px;
		vertical-align: -3px;
		margin-right: 8px;
	}

	.navigation .left,
	.navigation .right,
	.navigation .count {
		min-height: 44px;
		line-height: 38px;
		text-align: center;
	}
}


/* ---------------------------------------------------------------------------
   10. Wortbrueche in den Fahrzeugdaten - auch auf dem Desktop
   ---------------------------------------------------------------------------
   Flatsome vererbt word-break:break-word auf die Tabellenzellen. Dadurch
   werden auch auf breiteren Bildschirmen Woerter mitten im Wort getrennt
   ("TREIBSTOF F", "Handschaltu ng"), sobald die Karte etwas schmaler wird.

   Gemessen bei 1041px Viewport: Zeilenhoehe faellt von 53px auf 34px, die
   Spalte fuer "TREIBSTOFF" waechst von 89px auf 96px - die Tabelle ordnet
   sich also selbst, sobald man ihr das Brechen verbietet. Kein Ueberlauf.
   ------------------------------------------------------------------------- */
.car_details td,
table.datatable td,
table.ausstattungtable td {
	word-break: keep-all;
	overflow-wrap: normal;
	hyphens: none;
}


/* ---------------------------------------------------------------------------
   11. Ausstattung / Weitere Infos: Beschreibungstext unter die Punkte
   ---------------------------------------------------------------------------
   Die Tabelle hat zwei Spalten:
     Zeile 1:  <td>Ausstattung</td>        <td>Weitere Infos</td>
     Zeile 2:  <td><ul>…</ul></td>         <td><ul>…</ul><p>Beschreibung</p></td>

   Auf dem Handy bleiben davon zwei rund 170px schmale Spalten uebrig. Die
   Fahrzeugbeschreibung stand dadurch in einer 164px breiten Saeule und war
   1276px hoch - praktisch unlesbar.

   display:contents auf tbody/tr loest die Tabellenstruktur auf, sodass die
   vier Zellen zu direkten Flex-Kindern werden. Ueber order werden sie so
   sortiert, dass Ueberschrift und zugehoerige Liste beieinander bleiben:

     1. "Ausstattung"     2. Ausstattungsliste
     3. "Weitere Infos"   4. Weitere-Infos-Liste + Beschreibungstext

   Der Absatz sitzt damit ganz unten ueber die volle Breite.
   ------------------------------------------------------------------------- */
@media screen and (max-width: 849px) {

	table.ausstattungtable {
		display: flex !important;
		flex-direction: column;
		width: 100% !important;
	}

	table.ausstattungtable tbody,
	table.ausstattungtable tr {
		display: contents !important;
	}

	table.ausstattungtable td {
		display: block !important;
		width: 100% !important;
		padding: 0 !important;
	}

	table.ausstattungtable tr:nth-child(1) td:nth-child(1) { order: 1; }
	table.ausstattungtable tr:nth-child(2) td:nth-child(1) { order: 2; }
	table.ausstattungtable tr:nth-child(1) td:nth-child(2) { order: 3; }
	table.ausstattungtable tr:nth-child(2) td:nth-child(2) { order: 4; }

	/* Abstand zwischen der Ausstattungsliste und "Weitere Infos" */
	table.ausstattungtable tr:nth-child(1) td:nth-child(2) {
		margin-top: 26px;
	}

	.ausstattunglist {
		margin-bottom: 0 !important;
	}

	/* Der Beschreibungstext selbst */
	table.ausstattungtable p {
		width: 100% !important;
		margin-top: 20px;
		padding-top: 18px;
		border-top: 1px solid #e3e3e3;
		font-size: 15px;
		line-height: 1.6;
		hyphens: auto;
		overflow-wrap: break-word;
	}
}