/* ==========================================================================
   BoxKIx Mobil (iPhone und Android), v2.482
   Wird nach boxkix.css geladen und ändert nur, was am Handy stört:
   Zoom beim Antippen von Feldern (iOS), zu kleine Tippflächen, überbreite
   Tabellen, hohe Kopfleiste, Menü über den ganzen Bildschirm, Notch und
   Home-Balken. Desktop bleibt unverändert (alles in Medienabfragen oder
   ohne sichtbare Wirkung).
   ========================================================================== */

/* Alle Geräte, ohne sichtbare Änderung am Desktop */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 1rem;
}

body {
	-webkit-tap-highlight-color: transparent;
	overflow-wrap: break-word;
}

a, button, summary, label, select, .knopf, input[type="checkbox"], input[type="radio"] {
	touch-action: manipulation;
}

/* iOS zoomt in jedes Feld unter 16px hinein. Gilt für alle Feldtypen, auch Zahl, Uhrzeit, Telefon, Adresse. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
select,
textarea {
	font-size: max(16px, 1rem);
}

/* Feldtypen, die das Grunddesign nicht kennt (Zahl, Telefon, Adresse, Uhrzeit, Monat), sahen am Handy weiß und winzig aus */
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
	width: 100%;
	min-height: var(--ziel);
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--rahmen-hell);
	border-radius: var(--radius);
	background: var(--flaeche);
	color: var(--text);
	font-family: inherit;
}

/* iOS: Felder ohne eigenes Aussehen (Schatten, runde Ecken) vereinheitlichen */
input[type="text"], input[type="email"], input[type="search"], input[type="password"],
input[type="number"], input[type="tel"], input[type="url"], input[type="date"], input[type="time"], textarea, select {
	-webkit-appearance: none;
	appearance: none;
}
select {
	background-image: linear-gradient(45deg, transparent 50%, var(--text-still) 50%), linear-gradient(135deg, var(--text-still) 50%, transparent 50%);
	background-position: calc(100% - 1.1rem) 50%, calc(100% - 0.8rem) 50%;
	background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
	background-repeat: no-repeat;
	padding-right: 2.2rem;
}

/* Notch und Home-Balken (Seite ist mit viewport-fit=cover eingebunden) */
.huelle {
	padding-left: max(var(--rand), env(safe-area-inset-left));
	padding-right: max(var(--rand), env(safe-area-inset-right));
}

body {
	padding-bottom: env(safe-area-inset-bottom);
}

pre, code { overflow-wrap: anywhere; }
pre { max-width: 100%; overflow-x: auto; }
img, video, canvas, svg { max-width: 100%; height: auto; }

/* Handy */
@media (max-width: 720px) {
	:root { --rand: 1rem; }

	h1 { font-size: 1.6rem; line-height: 1.2; }
	h2 { font-size: 1.3rem; }

	/* Kopfleiste: Marke, Hilfe und Menü in einer Zeile, Rest darunter */
	.kopfleiste .huelle { gap: 0.5rem 0.75rem; min-height: 3.5rem; padding-block: 0.5rem; }
	.marke { font-size: 1.1rem; }
	.nav-umschalter { margin-inline-start: auto; min-height: 2.75rem; }
	.hilfe-umschalter { min-height: 2.75rem; }
	.kopfleiste__nav-bereich { flex: 1 1 100%; }

	/* Menü: lange Namen umbrechen, Zeilen bequem antippbar */
	.hauptnavigation { margin-inline-start: 0; width: 100%; }
	.hauptnavigation ul { flex-direction: column; flex-wrap: nowrap; gap: 0.15rem; }
	.nav-gruppe { border-inline-end: 0 !important; padding-inline-end: 0 !important; margin-inline-end: 0 !important; }
	.nav-gruppe summary { min-height: 3rem; }
	.nav-gruppe__liste { width: 100%; min-width: 0; }
	.nav-gruppe__liste a,
	.nav-abschnitt li a,
	.hauptnavigation a {
		white-space: normal;
		min-height: 2.75rem;
		display: flex;
		align-items: center;
		overflow-wrap: anywhere;
	}
	.nav-abschnitt__titel { min-height: 2.75rem; }
	.nav-pin { min-width: 2.75rem; min-height: 2.75rem; }
	.nav-suche input[type="search"] { min-height: 3rem; }

	/* Familien-Reiter und Filmnavigation: waagerecht wischen statt umbrechen */
	.familie-tabs,
	.film-nav {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 0.4rem;
	}
	.familie-tabs::-webkit-scrollbar,
	.film-nav::-webkit-scrollbar { display: none; }
	.familie-tabs > *, .film-nav > * { flex: 0 0 auto; white-space: nowrap; }

	/* Knöpfe und Felder */
	.knopf { min-height: 3rem; }
	.feldgruppe label { font-size: 1rem; }
	.filterleiste { flex-direction: column; align-items: stretch; gap: 0.75rem; }
	.filterleiste { padding: 1rem; }
	.filterleiste .feldgruppe { flex: 0 0 auto; margin-bottom: 0; width: 100%; }
	.feldgruppe--knoepfe { display: flex; flex-direction: column; gap: 0.5rem; }
	.feldgruppe--knoepfe .knopf { width: 100%; }
	form[style*="display:flex"] { flex-wrap: wrap; }

	/* Kacheln und Karten */
	.kacheln { gap: 0.75rem; margin: 1.25rem 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kachel { padding: 1rem; }
	.kachel__zahl { font-size: 1.6rem; }
	.karte { padding: 1rem; }

	/* Tabellen: in der Hülle seitlich wischen, kompakter Abstand, Spalten behalten ihre Breite */
	.tabellenhuelle { margin: 1rem calc(var(--rand) * -1); border-radius: 0; border-left: 0; border-right: 0; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
	th, td { padding: 0.6rem 0.7rem; }
	table { font-size: 0.9rem; }

	/* Feste Schaltflächen nicht unter dem Home-Balken */
	.hilfe-umschalter { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}

/* Sehr schmale Geräte */
@media (max-width: 380px) {
	.kacheln { grid-template-columns: minmax(0, 1fr); }
}

/* Querformat am Handy: Kopf niedrig halten */
@media (max-height: 480px) and (orientation: landscape) {
	.kopfleiste .huelle { min-height: 3rem; padding-block: 0.25rem; }
}