/* mobile.css - Smartphone-Darstellung (Stufe 1, Okt. 2026)
   Greift nur bei schmalen Bildschirmen; die Desktop-Ansicht bleibt unveraendert.
   Eingebunden in allen Seiten direkt nach styles.css, zusammen mit mobile.js. */

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

	html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
	body { margin: 0; background: #FFFFFF; }

	/* Feste Tabellenbreiten (752, 590, 550 ...) aufheben */
	table { max-width: 100% !important; }
	table[width], td[width], th[width] { width: auto !important; }
	td[height] { height: auto !important; }

	/* Aeusserer Seitenrahmen: Kopf, Menue und Inhalt untereinander */
	body > table { display: block; width: 100% !important; height: auto !important; }
	body > table > tbody,
	body > table > tbody > tr,
	body > table > tbody > tr > td { display: block; width: auto !important; }
	body > table > tbody > tr > td[width="1"] { display: none; }

	/* Breite Inhaltstabellen (350..752 px) auf Bildschirmbreite zwingen; Spalten teilen sich die Breite */
	table[width="350"], table[width="390"], table[width="400"], table[width="500"], table[width="526"],
	table[width="540"], table[width="548"], table[width="550"], table[width="580"], table[width="584"],
	table[width="732"],
	table[width="200"], table[width="203"], table[width="214"], table[width="234"], table[width="240"],
	table[width="250"], table[width="252"], table[width="270"], table[width="275"], table[width="300"]
	{ width: 100% !important; table-layout: fixed; }

	/* Videos / YouTube */
	iframe, video, embed, object { max-width: 100%; }
	iframe[src*="youtube"] { width: 100% !important; height: auto; aspect-ratio: 16 / 9; }

	/* Produktseiten aus Werbung/werkzeuge/webseite.py (z. B. BKM-i40) */
	.bkm { width: auto !important; font-size: 16px !important; }
	.bkm-grid { grid-template-columns: 1fr !important; }
	.bkm table { font-size: 15px !important; }

	/* Formularfelder (z. B. style="width:350px") */
	input, textarea, select { max-width: 100%; box-sizing: border-box; }

	/* Haupt-Inhaltstabelle: Spalten (Bild | Text) untereinander; innere Datentabellen behalten ihre Spalten */
	td[width="590"] > table > tbody > tr > td { display: block; width: auto !important; }
	td[width="590"] > table > tbody > tr > td[align="right"] { text-align: left; }

	/* Inhalt mit Rand */
	body > table > tbody > tr > td[width="590"] { padding: 0 12px 16px 12px; }

	/* Bilder an Bildschirmbreite anpassen (Platzhalter-GIFs ausgenommen) */
	img:not([src*="spacer"]) { max-width: 100%; height: auto; }
	body > table > tbody > tr > td > img[usemap] { max-width: 100vw; }
	/* Platzhalter-GIFs erzwingen sonst die alten Spaltenbreiten (z. B. 275 px); Hoehe bleibt */
	img[src*="spacer"] { width: 1px !important; }
	/* Schwarze Bildrahmen (td bgcolor=#000000 + cellpadding 1) wuerden neben verkleinerten Bildern als Flaeche stehen bleiben */
	td[bgcolor="#000000"]:has(img:not([src*="spacer"])) { background: transparent !important; text-align: center; }
	td[bgcolor="#000000"] img:not([src*="spacer"]) { outline: 1px solid #000000; }
	td { overflow-wrap: break-word; }

	/* Lesbare Schriftgroessen */
	.arial10 { font-size: 13px !important; }
	.arial12, .arial12fett, .arial12kursiv, .arial12rot, .arial12fettblau,
	.arial12fettorg, .arial12fettweiss, .arial14 { font-size: 16px !important; line-height: 1.45; }
	.arial14fett { font-size: 18px !important; line-height: 1.35; }

	/* Menue: groessere Tippflaechen, Hintergrundkacheln (160 px) durch Linien ersetzen */
	td[background*="menuebg"], td[background*="but_bg"] {
		background-image: none !important;
		background-color: #F4F4F4;
	}
	td[background*="menuebg"] td, td[background*="but_bg"] {
		padding: 9px 12px;
		border-bottom: 1px solid #DDDDDD;
	}
	td[background*="menuebg"] > table { width: 100% !important; }
	td[background*="menuebg"] td img[src*="spacer"] { display: none; }
	td[background*="menuebg"] div[align="center"] { text-align: left; }
	td[background*="menuebg"] .menue, td[background*="menuebg"] .menue2, td[background*="menuebg"] .menue3 { font-size: 17px !important; }
	td[background*="menuebg"] .submenue, td[background*="menuebg"] .submenue2 { font-size: 15px !important; padding-left: 14px; }

	/* Menue-Knopf (von mobile.js eingefuegt) */
	.mobil-menueknopf {
		display: block;
		width: 100%;
		padding: 12px;
		border: 0;
		border-top: 1px solid #999999;
		border-bottom: 1px solid #999999;
		background: #EFEFEF;
		font-family: Georgia, "Times New Roman", serif;
		font-size: 18px;
		font-weight: bold;
		text-align: left;
		color: #000000;
		cursor: pointer;
	}
	.mobil-zu { display: none !important; }
}