/* tagtt.de Mobile-Responsive Layer
 * Erstellt 2026-06-13 — modernisiert das Legacy-Layout ohne Stil-Bruch.
 * Bewahrt Farbpalette: #283E64 (BG), #3B5990 (Link), #FF6600 (Hover), #f7f7f7, #EDEFF4
 *
 * Strategie: dieser Layer kommt NACH layout.css und überschreibt die fixed-width
 * sowie die zu kleinen Schriften. Original-Klassen bleiben unangetastet.
 */

/* ===== Basis-Schriftgrößen anheben ===== */
html { font-size: 16px; }

body {
	font-size: 1rem !important;       /* war 11px, jetzt 16px */
	line-height: 1.5;
}

/* Layout-Klassen aus altem Code skalieren wir hoch */
.font_10 { font-size: 0.8125rem !important; }   /* 13px */
.font_12 { font-size: 0.875rem !important; }    /* 14px */
.text, .text2 { font-size: 1rem; line-height: 1.5; }
.text_big { font-size: 1.125rem !important; line-height: 1.55; }

p, li, td { line-height: 1.55; }

/* Überschriften */
h1, .h1 { font-size: 1.75rem; line-height: 1.25; margin: 0.5em 0; }
h2 { font-size: 1.375rem; line-height: 1.3; }
h3 { font-size: 1.125rem; }

/* Touch-Targets: Links und Buttons mindestens 44 × 44 CSS-Pixel */
a, button, input[type="submit"], input[type="button"], select {
	min-height: 22px;
}
.areas2 > div, nav a, .nav a, .topnav a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 0.75rem;
}

/* ===== Container max-width statt fixed width ===== */
#main, #container, .tab_haupt {
	max-width: 1100px !important;
	width: 100% !important;
	margin: 0 auto !important;
	box-sizing: border-box;
}

#main { padding: 0 1rem; }

/* tab_haupt war früher table-based — wir machen es CSS-Grid-kompatibel */
.tab_haupt {
	border-collapse: separate !important;
	border-spacing: 0 !important;
}
.tab_haupt > tbody > tr > td {
	vertical-align: top;
	padding: 0.5rem;
}

/* ===== Forms ===== */
input[type="text"], input[type="password"], input[type="email"], input[type="search"],
input[type="number"], input[type="url"], textarea, select {
	font-size: 1rem;
	padding: 0.5rem 0.75rem;
	min-height: 44px;
	box-sizing: border-box;
	border-radius: 4px;
	border: 1px solid #ccc;
}

input[type="submit"], input[type="button"], button {
	font-size: 1rem;
	padding: 0.625rem 1.25rem;
	min-height: 44px;
	cursor: pointer;
	border-radius: 4px;
}

/* ===== Bilder & Galerien ===== */
img { max-width: 100%; height: auto; }
.prev_imgth, .prev_imgth2 { max-width: 100%; height: auto; }

/* ===== Tablet (768–1023) ===== */
@media (max-width: 1023px) {
	#main, #container { padding: 0 1rem; }
	body { font-size: 1rem !important; }
}

/* ===== Mobile (<768) ===== */
@media (max-width: 767px) {
	body {
		background-image: none !important;     /* großes hg_world.gif weg auf Mobile */
		background: #283E64;
	}
	#main, #container {
		padding: 0 0.75rem;
	}
	/* Layout-Tables auf Mobile: alle Zellen untereinander */
	.tab_haupt, .tab_haupt > tbody, .tab_haupt > tbody > tr,
	.tab_haupt > tbody > tr > td {
		display: block;
		width: 100% !important;
		max-width: 100% !important;
	}
	.tab_haupt > tbody > tr > td {
		padding: 0.5rem 0 !important;
	}
	.td_left, .td_center, .td_right { width: 100% !important; }
	.left_col, .center_col, .right_col { width: 100%; float: none; }

	/* Größere Schrift für Lesefluss auf Mobile */
	body, .text, .entry, .comment_text { font-size: 1.0625rem !important; }

	/* Titel etwas kleiner */
	h1, .h1 { font-size: 1.5rem; }

	/* Eintrag-Boxen auf Mobile responsive */
	div[style*="width: 370px"], div[style*="width:370px"] {
		width: 100% !important;
		float: none !important;
		margin: 0 0 1rem 0 !important;
		box-sizing: border-box;
		height: auto !important;
	}
	div[style*="width: 420"], div[style*="width:420"],
	div[style*="width: 220"] {
		max-width: 100% !important;
		box-sizing: border-box;
	}

	/* Login-Form auf Mobile breit */
	form[name="login"] input { width: 100% !important; max-width: 100%; }

	/* Galerie-Thumbs flexen */
	.prev_imgth { display: inline-block; margin: 4px; }

	/* Footer */
	#footer { padding: 0.5rem; font-size: 0.875rem; }
}

/* ===== Sehr klein (<480) ===== */
@media (max-width: 479px) {
	body, .text { font-size: 1rem !important; }
	h1, .h1 { font-size: 1.375rem; }
	#main { padding: 0 0.5rem; }
}

/* ===== Print ===== */
@media print {
	#footer, .topnav, .nav, form, .areas2 { display: none; }
	body { background: white; color: black; }
	a { color: black; text-decoration: underline; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}