/* =====================================================================
   eu-insekten.de - Mobile Ansicht (Stand 10.10.2026)
   Gilt nur bis 1024 px Breite (Handy, Tablet). Wird von header.php eingebunden,
   damit jede Seite mit dem neuen Kopf sie automatisch bekommt. Desktop bleibt unveraendert.
   Prinzip: die festen Desktop-Spalten (200 | 898 | 180 px) werden untereinander gestellt,
   feste Hoehen/Breiten aufgehoben; Reihenfolge: Kopf, Brotkrumen, (Filterliste), Inhalt, Liste, rechte Spalte, Fusszeile.
   ===================================================================== */

@media (max-width: 1024px) {

	html, body { margin: 0px; padding: 0px; overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
	body { background: #1d1f1e; }

	/* ---------- Rahmen: Spalten untereinander ---------- */
	#box { width: auto !important; height: auto !important; display: flex; flex-direction: column; }
	#box > #head { order: 1; width: auto !important; height: auto !important; position: relative; z-index: 1000; }
	#box > #subnavi:not(:has(*)) { display: none !important; }   /* Startseite: leere Brotkrumen-Zeile weg */
	#box > #subnavi { order: 2; width: auto !important; height: auto !important; min-height: 32px; padding: 6px 14px !important; margin: 0px !important; }
	/* Brotkrumen immer einzeilig: 12 px, lange Namen werden mit ... gekuerzt (Ordnung/Familie zuerst, Art zuletzt) */
	#box > #subnavi > div { height: auto !important; min-width: 0px; white-space: nowrap !important; flex-wrap: nowrap !important; font-size: 12px !important; line-height: 18px !important; }
	#box > #subnavi > div > * { flex: 0 3 auto; min-width: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px !important; line-height: 18px !important; }
	#box > #subnavi > div > a:first-child { flex: 0 0 auto; }
	#box > #subnavi > div > span[style*="margin"] { flex: 0 0 auto; margin: 0px 5px !important; overflow: visible; }
	#box > #subnavi > div > :last-child { flex: 0 0 auto; max-width: 58%; }
	#box > #mainpart0, #box > #mainpart0_scroll, #box > #mainpart_impressum, #box > #mainblack { order: 4; }
	#box > #list { order: 5; }
	#box > #right { order: 6; }
	#box > #footer { order: 9; }
	/* Seiten mit Filterliste (Ordnung, Familie, Suche): Filter vor den Bildern, als kompakter, scrollbarer Block */
	#box:has(.dl_kachel) > #list, #box:has(.sm_k) > #list { order: 3; max-height: 260px; overflow-y: auto !important; margin: 10px 12px 10px 12px !important; border: 1px solid rgba(96,195,74,0.35); border-radius: 10px; }

	#list, #right, #mainpart0, #mainpart0_scroll, #mainpart_impressum, #mainblack {
		float: none !important; width: auto !important; height: auto !important; margin: 0px !important; overflow: visible !important; box-sizing: border-box; }
	#list { padding: 10px 12px !important; }
	#right { padding: 12px !important; }
	#mainpart0_scroll, #mainpart_impressum { padding: 12px !important; }

	/* ---------- Kopf ---------- */
	.kz { width: auto !important; height: auto !important; flex-wrap: wrap; gap: 10px 10px; padding: 9px 12px 11px 12px !important; }
	.kz-logo, .kz-logo:hover { flex: 1 1 auto !important; height: auto !important; padding: 0px !important; gap: 10px !important; min-width: 0px; }
	.kz-logo img { width: 40px !important; height: 40px !important; }
	.kz-logo b { font-size: 19px !important; line-height: 22px !important; }
	.kz-burger { display: flex !important; }
	.kz-suche { order: 3; flex: 1 1 100%; width: auto !important; margin: 0px !important; }
	.kz-nav { order: 4; flex: 1 1 100%; flex-direction: column; align-items: stretch; height: auto !important; margin: 0px !important;
		max-height: 0px; overflow: hidden; opacity: 0; transition: max-height .4s cubic-bezier(.22,.61,.36,1), opacity .3s ease; }
	.kz.kz-menu-auf .kz-nav { max-height: 1400px; opacity: 1; }
	.kz-nav > .kz-tinte, .kz-nav > .kz-strich { display: none !important; }
	.kz-nav > li { width: 100%; text-align: left; border-top: 1px solid rgba(255,255,255,0.07); }
	.kz-top { height: 46px !important; padding: 0px 8px !important; border-radius: 8px !important; justify-content: space-between; font-size: 15px !important; }
	.kz-nav > li.kz-aktiv > .kz-top { color: #8fd46f; }
	.kz-nav .kz-drop { position: static !important; display: none; opacity: 1 !important; visibility: visible !important; transform: none !important; transition: none !important;
		width: auto !important; min-width: 0px !important; margin: 0px 0px 10px 0px; padding: 6px !important; border-radius: 10px; background: rgba(255,255,255,0.04) !important; box-shadow: none !important; }
	.kz-nav .kz-drop::before { display: none; }
	.kz-nav li.kz-offen > .kz-drop { display: block; }
	.kz-nav .kz-mega.kz-drop { grid-template-columns: 1fr 1fr; }
	.kz-nav li.kz-offen > .kz-mega { display: grid; }
	.kz-nav .kz-drop li a { padding: 8px 10px !important; font-size: 14px !important; }
	/* Werteliste und Kategorie-Auswahl der Suche: ueber die volle Breite */
	.kz-liste ul { max-height: 50vh !important; }
	.kz-liste .kz-info span + span { display: none; }

	/* ---------- Startseite ---------- */
	#mainpart0 { background-size: cover !important; background-position: 0% 0px !important; }   /* linker, ruhiger Bildteil (Wald) hinter den Karten, Kaefer rechts ausserhalb */
	/* Neu und aktualisiert: kleinere Schrift, damit die Eintraege einzeilig bleiben */
	.rt .rt-karte.rt-neu { padding-left: 12px !important; padding-right: 10px !important; }
	.rt-news { font-size: 10.5px !important; line-height: 1.8 !important; white-space: normal; }
	.rt-news a { font-size: 10.5px !important; }
	.rt-news img { width: 11px; height: 11px; margin: 0px 1px !important; }
	#mainpart1_TEXT_BOX { float: none !important; width: auto !important; height: auto !important; padding: 14px 12px 4px 12px !important; }
	#mainpart1_BILD { display: none !important; }
	#mainpart1_TEXT_BOX .rt { width: auto !important; }
	#mainpart1_TEXT_BOX .rt > div[style*="absolute"] { position: static !important; width: auto !important; }
	#list.lk { height: auto !important; padding: 12px !important; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
	#list.lk > #list_top { grid-column: 1 / -1; }
	#list.lk > #list_top ul { columns: 2; column-gap: 18px; }
	#list.lk > #list_top li { break-inside: avoid; }
	#list.lk .lk-karte { margin: 0px !important; }
	#list.lk > #list_summary { display: none; }
	#list.lk .lk-tag img { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; object-fit: cover; }

	/* ---------- rechte Spalte (Meistbesucht + Buch) ---------- */
	#right.rk { height: auto !important; padding: 12px !important; display: grid; grid-template-columns: 1fr; gap: 10px; }
	#right.rk .rk-karte { margin: 0px !important; }
	#right.rk .rk-top { height: auto !important; }
	#right.rk .rk-liste { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
	#right.rk .rk-top img, #right.rk .rk-top a:hover img { width: 100% !important; height: auto !important; aspect-ratio: 148 / 94; }
	#right.rk .rk-buch { height: auto !important; display: grid; grid-template-columns: 96px 1fr; column-gap: 14px; align-items: center; text-align: left !important; }
	#right.rk .rk-buch h2 { grid-column: 1 / -1; }
	#right.rk .rk-buch .rk-cover { grid-row: span 5; width: 96px !important; height: 128px !important; margin: 0px !important; }
	#right.rk .rk-buch .rk-cover img { width: 96px !important; height: 128px !important; }
	#right.rk .rk-blick { font-size: 9.5px !important; padding: 2px 6px !important; bottom: 6px !important; }
	#right.rk .rk-buch p { text-align: left !important; }
	#right.rk .rk-buch .rk-pille { justify-self: start; }

	/* ---------- Ordnung, Familie, Suche: Bilderraster ---------- */
	#mainpart0_scroll.om { padding: 12px 10px !important; }
	.om .om-titel b { font-size: 22px !important; }
	.om .om-karte { padding: 10px 8px 2px 8px !important; }
	.om .om-kopf { flex-wrap: wrap; padding: 0px 4px; }
	.dl_kachel, .sm_el.sm_k { width: 25% !important; }
	.om .dl_kachel .om-bild, .om .dl_kachel img, .om .dl_kachel a:hover img { width: 100% !important; max-width: 140px; height: auto !important; aspect-ratio: 102 / 71; }
	.om .dl_kachel .om-bild { margin: 0px auto !important; }
	.om .dl_kachel { padding: 0px 4px 12px 4px !important; }
	#ol_kopf, #dl_kopf, #sm_kopf { top: -10px !important; }

	/* ---------- Steckbrief ---------- */
	/* Reihenfolge: Kopfkarte, Foto 1 + Bildunterschrift, Infokarten (Groesse, Lebensraum), weitere Fotos mit Unterschrift */
	#mainblack { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 14px 12px !important; }
	#mainblack > div, #mainblack #text > div { float: none !important; width: auto !important; height: auto !important; }
	#mainblack #cn1, #mainblack #cn2 { display: contents; }
	#mainblack [id^="com"] { float: none !important; width: auto !important; height: auto !important; padding: 0px 2px 6px 2px !important; margin: -4px 0px 0px 0px !important; background: none !important; }
	#mainblack #info { order: 1; padding: 0px !important; border-radius: 10px; overflow: hidden; }
	#mainblack #shot1 { order: 2; } #mainblack #com1 { order: 3; }
	#mainblack #text { order: 4; padding: 0px !important; background: none !important; }   /* kein grauer #303030-Grund (Desktop) hinter Karten und Last update */
	#mainblack #shot2 { order: 5; } #mainblack #com2 { order: 6; }
	#mainblack #shot3 { order: 7; } #mainblack #com3 { order: 8; }
	#mainblack #shot4 { order: 9; } #mainblack #com4 { order: 10; }
	#mainblack #shot5 { order: 11; } #mainblack #com5 { order: 12; }
	#mainblack #shot6 { order: 13; } #mainblack #com6 { order: 14; }
	#mainblack #text > div[style*="height:44px"], #mainblack #text > div[style*="height:48px"] { display: none !important; }
	#mainblack #text > div + div { margin-top: 8px; }
	#mainblack #text > div:nth-last-child(2):not([style]) { display: none !important; }   /* leere  -Zeile */
	/* Last update: eigene 44-px-Zeile bis zur Unterkante, Text per Flex mittig (+1 px, weil Ziffern/Grossbuchstaben keine Unterlaengen haben) */
	#mainblack:has(#text > div:last-child) { padding-bottom: 0px !important; }
	#mainblack #text > div:last-child { display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: 44px !important; margin: 0px !important; padding: 1px 0px 0px 0px !important; font-size: 11px !important; line-height: 1 !important; color: #8b938e; text-align: center !important; white-space: nowrap; }
	#mainblack #text > div > div[style*="width:288px"] { width: auto !important; height: auto !important; min-height: 0px; overflow: visible !important; }
	#mainblack [id^="shot"] { position: relative !important; background: none !important; }
	#mainblack [id^="shot"]:empty { display: none !important; }
	#mainblack:has(#shot1:empty) #com1, #mainblack:has(#shot2:empty) #com2, #mainblack:has(#shot3:empty) #com3,
	#mainblack:has(#shot4:empty) #com4, #mainblack:has(#shot5:empty) #com5, #mainblack:has(#shot6:empty) #com6 { display: none !important; }
	#mainblack [id^="shot"] img[width="300"] { position: static !important; display: block; width: 100% !important; height: auto !important; border-radius: 8px; }
	#mainblack [id^="shot"] > span { position: absolute !important; top: 0px; left: 0px; }

	/* ---------- Impressum, Datenschutz ---------- */
	#list.si { display: none !important; }
	.rt[style] { width: auto !important; max-width: none !important; padding: 2px 0px 10px 0px !important; }
	.rt h1 { font-size: 22px !important; }
	.rt dl { grid-template-columns: 1fr !important; row-gap: 0px !important; }
	.rt dd { margin-bottom: 6px !important; }

	/* ---------- Fusszeile ---------- */
	#box > #footer { width: auto !important; height: auto !important; min-height: 0px; padding: 14px 16px 16px 16px !important; background: #1b1d1c !important; font-size: 11px !important; line-height: 16px !important; color: #8b938e; text-align: center !important; white-space: normal; }
}

@media (max-width: 560px) {
	.dl_kachel, .sm_el.sm_k { width: 33.333% !important; }
	#list.lk { grid-template-columns: 1fr; }
	#list.lk > #list_top ul { columns: 2; }
	.kz-nav .kz-mega.kz-drop { grid-template-columns: 1fr; }
	#right.rk .rk-liste { gap: 8px; }
	#right.rk .rk-top b { font-size: 11px !important; }
}

@media (min-width: 761px) and (max-width: 1024px) {
	.dl_kachel, .sm_el.sm_k { width: 16.666% !important; }
	#right.rk { grid-template-columns: 2fr 1fr; align-items: start; }
}