/* EU-Insekten - gemeinsame Gestaltung aller Seiten (frueher als <style> in header.php). Stand 25.10.2026.
   Wird von header.php mit ?v=Dateidatum eingebunden: nach jedem Upload laden die Browser die neue Fassung sofort. */
/* ===== Kopf (Stand 10.10.2026) ===== */
#box > #head { width: 1280px; height: 78px; margin: 0px; padding: 0px; background: none; position: relative; z-index: 1000; }
#box > #navi { display: none; }
/* Brotkrumen-Zeile unter dem Kopf: Text vertikal mittig, Kante wie Menue und Mitte */
#box > #subnavi { box-sizing: border-box; width: 1280px; height: 26px; margin: 0px 0px 1px 0px; padding: 0px 0px 0px 247px; display: flex; align-items: center; } /* 11.10.2026: Brotkrumen buendig mit Menuetext "Home" (x = 247) */
.kz, .kz * { box-sizing: border-box; }
.kz { position: relative; display: flex; align-items: center; width: 1280px; height: 78px; padding: 0px 10px 0px 0px; text-align: left;
	font-family: arial, verdana, sans-serif; color: #e8ebe9;
	background: linear-gradient(90deg, rgba(10,16,10,0.90) 0%, rgba(16,24,15,0.80) 45%, rgba(10,14,10,0.92) 100%), url("head.jpg") center 40% / cover no-repeat #141a14; }
.kz::after { content: ""; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 1px; background: linear-gradient(90deg, rgba(96,195,74,0) 0%, rgba(96,195,74,0.75) 18%, rgba(143,212,111,0.55) 70%, rgba(96,195,74,0) 100%); pointer-events: none; }
.kz a { text-decoration: none; background: none; border: 0px; }
/* gleiche Verlaufslinie als Trenner zwischen Inhalt und Fusszeile */
/* Stand 10.10.2026: PayPal-Spendenknopf vorerst ausgeblendet (PayPal meldet "nicht berechtigt") - zum Reaktivieren diese 2 Zeilen loeschen */
#right_buch:has(form[action*="paypal.com"]) { visibility: hidden; }
form[action*="paypal.com"] { display: none !important; }
#box > #footer { position: relative; }
/* Stand 12.10.2026: Kopf der Listen links (Steckbrief, Familie, Ordnung, Suche) als Kachel im Stil der uebrigen Karten statt gruenem Balken.
   Die Kachel wird per ::before gezeichnet; der Streifen darunter in Listenfarbe verdeckt die vorbeiscrollenden Zeilen. */
#dl_kopf, #ol_kopf, #sm_kopf { margin-bottom: 4px !important; padding: 10px 10px 16px 10px !important; background: #3d3d3d !important; isolation: isolate; }
#dl_kopf::before, #ol_kopf::before, #sm_kopf::before { content: ""; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 6px; z-index: -1; border-radius: 10px; background: #262626;
	box-shadow: 0 6px 16px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.35); }
/* Desktop: Kachel 14 px unter der Oberkante der Spalte - wie "Meistbesucht" rechts; der Abstand liegt im festen Kopf, damit beim Scrollen nichts durchscheint */
@media (min-width: 1025px) {
	#dl_kopf, #ol_kopf, #sm_kopf { top: -2px !important; margin-top: -2px !important; padding-top: 24px !important; }   /* top -2: deckt auch den 2-px-Innenrand oben ab (sonst blitzten dort die Zeilen beim Scrollen durch) */
	#dl_kopf::before, #ol_kopf::before, #sm_kopf::before { top: 14px; }
}
#dl_kopf > div:first-child, #ol_kopf > div:first-child, #sm_kopf > div:first-child { padding: 0px !important; border: 0px !important; border-radius: 0px !important; background: none !important;
	font: bold 10.5px/13px arial, verdana, sans-serif !important; letter-spacing: 0.08em; text-transform: uppercase; color: #60c34a !important; }
#ol_kopf > div:first-child span:last-child { padding-right: 0px !important; color: #8f9792; }
#dl_kopf > div:nth-child(2), #ol_kopf > div:nth-child(2), #sm_kopf > div:nth-child(2) { padding-top: 8px !important; }
#dl_filter, #ol_filter, #sm_filter { height: 26px !important; padding: 0px 11px !important; border: 1px solid rgba(255,255,255,0.14) !important; border-radius: 13px !important; background: rgba(0,0,0,0.35) !important;
	font: 12px arial, verdana, sans-serif !important; color: #ffffff !important; transition: border-color .2s ease, box-shadow .2s ease; }
#dl_filter::placeholder, #ol_filter::placeholder, #sm_filter::placeholder { color: #8b938e; }
#dl_filter:focus, #ol_filter:focus, #sm_filter:focus { outline: none; border-color: #60c34a !important; box-shadow: 0 0 0 3px rgba(96,195,74,0.18); }
#dl_rlf, #ol_rlf, #sm_rlf { padding-top: 8px !important; flex-wrap: nowrap !important; gap: 3px !important; }
/* Stand 12.10.2026: Rote-Liste-Kreise im Kopf etwas kleiner (13 statt 14 px, Abstand 3 statt 4 px), damit alle 9 in eine Zeile passen - auch mit Scrollbalken */
#dl_rlf span[data-k], #ol_rlf span[data-k], #sm_rlf span[data-k] { flex: 0 0 13px !important; width: 13px !important; height: 13px !important; font-size: 8.5px !important; }
#dl_rlf span[data-k] svg, #ol_rlf span[data-k] svg, #sm_rlf span[data-k] svg { width: 7px; height: 7px; }
#dl_kopf label[for="dl_sf"], #ol_kopf label[for="ol_sf"], #sm_grp { padding-top: 8px !important; color: #cfd5d1 !important; }
#dl_kopf label[for="dl_sf"], #ol_kopf label[for="ol_sf"] { font-size: 10.5px !important; white-space: nowrap; }   /* "nach Unterfamilien gruppieren" in einer Zeile */
/* Stand 12.10.2026: ist die Liste gruppiert (Unterfamilie bzw. Klasse/Ordnung/Familie in der Suche), ruecken die Artnamen unter den Gruppenkoepfen etwas ein */
#dl_tab:has(tr.dl_grp) tr.dl_art > td > div, #sm_tab:has(tr.sm_grp) tr.sm_el > td > div { padding-left: 9px; }
#dl_tab:has(tr.dl_grp) tr.dl_grp > td { padding-left: 2px !important; }
/* Stand 12.10.2026: Handy/Tablet - Ordnung, Familie, Steckbrief ohne Listen. Es bleibt nur die Filterkachel (Textfilter, Rote Liste, Gruppierung),
   sie steht ueber der Bildergalerie; im Steckbrief folgt darunter die Galerie der Familie (details_list.php) statt der Liste. */
@media (max-width: 1024px) {
	/* grauer Hintergrund wie der Inhalt (eu_back.jpg), ohne schwarze Raender */
	#box > #list:has(#dl_kopf), #box > #list:has(#ol_kopf) { max-height: none !important; overflow: visible !important; margin: 0px !important; padding: 12px 12px 0px 12px !important; border: 0px !important; border-radius: 0px !important;
		background: url("eu_back.jpg") !important; }
	#box:has(#mainblack) > #list:has(#dl_kopf) { order: 5 !important; padding: 0px 12px 14px 12px !important; }   /* Steckbrief: nach dem Inhalt */
	#box:has(#dl_galerie_m) > #mainblack { background: url("eu_back.jpg") !important; }   /* Steckbrief-Inhalt ebenfalls grau statt schwarz */
	#dl_tab, #ol_tab, #sm_tab { display: none !important; }
	#box:has(#sm_raster) > #list { display: none !important; }   /* Stand 12.10.2026: Suche - keine Trefferliste, nur Infotext, Filterkachel und Galerie */
	#dl_kopf, #ol_kopf, #sm_kopf { position: relative !important; top: auto !important; margin: 0px !important; padding: 12px 12px 12px 12px !important; background: none !important; }
	#dl_kopf::before, #ol_kopf::before, #sm_kopf::before { top: 0px !important; bottom: 0px !important; }
	#ol_kopf > div:first-child span { display: none; }
	#ol_kopf > div:first-child::before { content: "Filter"; }
	#sm_kopf > div:first-child { font-size: 0px !important; }   /* "123 Treffer" steht schon im Infotext */
	#sm_kopf > div:first-child::before { content: "Filter"; font-size: 10.5px; }
	#dl_galerie_m { display: block !important; margin-top: 12px; box-sizing: border-box; padding: 12px 10px 2px 10px; border-radius: 10px; background: #262626; box-shadow: 0 10px 24px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.35); }   /* Galerie unter dem Steckbrief als Kachel */
	/* Stand 12.10.2026: Schatten auch mobil auf allen Kacheln - Steckbrief-Karten, Fotofenster, rechte Spalte (wie am Desktop) */
	#mainblack #info, #mainblack #text > div:nth-child(2) > div, #mainblack #text > div:nth-child(4) > div, #mainblack .sbg-fenster, #box > #right .rk-karte {
		box-shadow: 0 10px 24px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.35) !important; }
	#box > #right .rk-top img { box-shadow: 0 6px 14px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.35); }
	/* Reihenfolge: erst Infotext (Titel), dann Filterkachel, dann Galerie. Ordnung/Familie: die Kachel wird per Skript (unten) hinter den Titel verschoben. */
	html.kopf-mitte #box > #list { display: none !important; }
	/* Kachel ohne Inhalt (kein Textfilter, keine Rote-Liste-Kreise, keine Gruppierung - nur die Ueberschrift) gar nicht zeigen */
	#dl_kopf:not(:has(#dl_filter, #dl_rlf, #dl_sf)), #ol_kopf:not(:has(#ol_filter, #ol_rlf, #ol_sf)), #sm_kopf:not(:has(#sm_filter, #sm_rlf, #sm_grp)) { display: none !important; }
	#mainpart0_scroll > #ol_kopf, #mainpart0_scroll > #dl_kopf, #mainpart0_scroll > #sm_kopf { margin: 0px 0px 14px 0px !important; }
	#dl_info_m { display: block !important; margin: 4px 2px 12px 2px; text-align: left; font-family: arial, verdana, sans-serif; }
	#dl_info_m b { display: block; font-size: 22px; line-height: 28px; color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
	#dl_info_m b a, #dl_info_m b a:hover { font: bold 22px/28px arial, verdana, sans-serif !important; color: #ffffff !important; text-decoration: none !important; background: none !important; }
	#dl_info_m span { display: block; font-size: 12px; line-height: 16px; color: #a9b1ac; }
	#dl_info_m span em { font-style: normal; color: #ffffff; }
	#box:has(#mainblack) > #list:has(#dl_kopf) { padding-top: 6px !important; }
	#dl_info_m + #dl_kopf:not(:has(#dl_filter, #dl_rlf, #dl_sf)) ~ #dl_galerie_m { margin-top: 0px; }
	/* Stand 12.10.2026: Kopf mobil - Kategorie-Knopf mit fester Breite (gerade so breit wie der laengste Eintrag, per Skript gemessen: --kz-katw),
	   Logo waagrecht mittig ueber dem Knopf, Text neben dem Logo beginnt genau dort, wo darunter das Suchfeld beginnt */
	#kz-katname { display: inline-block; width: var(--kz-katname, auto); white-space: nowrap; }
	.kz-logo, .kz-logo:hover { gap: 0px !important; }
	.kz-logo img { margin-left: calc(var(--kz-katw, 100px) / 2 - 20px) !important; }
	.kz-logo > span { margin-left: calc(var(--kz-katw, 100px) / 2 - 20px) !important; }
	/* Stand 12.10.2026: Infotext - "alle selbst beobachtet und fotografiert" in eigener Zeile, ohne Gedankenstrich */
	.om .om-titel span.om-strich, #dl_info_m span.om-strich { display: none !important; }
	.om .om-titel span.om-zusatz, #dl_info_m span.om-zusatz { display: block !important; }
	/* Rote-Liste-Kreise mobil groesser (20 px); Gruppierung steht in derselben Zeile, wenn der Platz reicht, sonst darunter */
	#dl_kopf, #ol_kopf, #sm_kopf { display: flex !important; flex-wrap: wrap; align-items: center; column-gap: 16px; }
	#dl_kopf > div:first-child, #ol_kopf > div:first-child, #sm_kopf > div:first-child, #dl_kopf > div:has(input), #ol_kopf > div:has(input), #sm_kopf > div:has(input), #sm_grp { flex: 1 1 100%; }
	#dl_rlf, #ol_rlf, #sm_rlf { gap: 6px !important; padding-top: 10px !important; }
	#dl_rlf span[data-k], #ol_rlf span[data-k], #sm_rlf span[data-k] { flex: 0 0 20px !important; width: 20px !important; height: 20px !important; font-size: 11px !important; }
	#dl_rlf span[data-k] svg, #ol_rlf span[data-k] svg, #sm_rlf span[data-k] svg { width: 11px; height: 11px; }
	#sm_grp { padding-top: 10px !important; font-size: 12px !important; }
	#sm_grp label { gap: 6px !important; }
	#dl_kopf label[for="dl_sf"], #ol_kopf label[for="ol_sf"] { padding-top: 10px !important; font-size: 12px !important; }
	#dl_galerie .dl_grp { margin: 2px 4px 10px 4px !important; padding: 0px 2px 3px 2px !important; font-size: 11px !important; }
}
/* Stand 12.10.2026: Fusszeile am Desktop auf allen Seiten gleich - 21 px hoch, Copyright mittig unter dem mittleren Bereich
   (Mitte im 1280er-Kasten von x = 201 bis 1099: links 201 px, rechts 181 px Innenabstand). Mobil regelt mobil.css. */
@media (min-width: 1025px) {
	#box > #footer { box-sizing: border-box !important; width: 1280px !important; height: 21px !important; margin: 0px !important; padding: 0px 181px 0px 201px !important;
		line-height: 21px !important; font: 10px/21px arial, verdana, sans-serif !important; color: #bbbbbb !important; text-align: center !important; white-space: nowrap; overflow: hidden; }
}
#box > #footer::before { content: ""; position: absolute; left: 0px; right: 0px; top: 0px; height: 1px; background: linear-gradient(90deg, rgba(96,195,74,0) 0%, rgba(96,195,74,0.75) 18%, rgba(143,212,111,0.55) 70%, rgba(96,195,74,0) 100%); pointer-events: none; }
/* Stand 24.10.2026: kleines Kaefer-Logo vor dem Copyright (::after mit order -1 steht vor dem Text) */
#box > #footer { display: flex !important; align-items: center; justify-content: center; }
#box > #footer::after { content: ""; order: -1; flex: none; width: 14px; height: 14px; margin-right: 6px; background: url("logo_mark.png") center / contain no-repeat; opacity: 0.85; }
/* Stand 25.10.2026: linke Listen (Ordnung, Familie, Steckbrief, Suche) einheitlich als Karte im Stil der Startseite.
   Filterkopf steht fest, nur die Karte scrollt; Zahlen buendig mit dem Filterfeld; Zeile unter der Maus rueckt ein mit gruenem Pfeil */
#ol_kopf .dl-anz, #dl_kopf .dl-anz, #sm_kopf .dl-anz { display: inline-block; margin-left: 6px; padding: 0px 6px; border-radius: 8px; background: rgba(255,255,255,0.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10); color: #cfd6d1; font-size: 9.5px; line-height: 14px; letter-spacing: 0; vertical-align: 1px; }
@media (min-width: 1025px) {
	#list:has(> .lk-liste) { display: flex; flex-direction: column; overflow: hidden !important; }
	#list:has(> .lk-liste) > #ol_kopf, #list:has(> .lk-liste) > #dl_kopf, #list:has(> .lk-liste) > #sm_kopf { flex: none; position: relative !important; }
	#list > .lk-liste { flex: 0 1 auto; min-height: 0px; margin: 6px 0px 4px 0px; padding: 6px 0px 6px 11px; border-radius: 10px; background: rgba(36,36,36,0.92); box-shadow: 0 10px 24px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.35);
		overflow-y: auto; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #4c524e transparent; }
	#list > .lk-liste::-webkit-scrollbar { width: 6px; } #list > .lk-liste::-webkit-scrollbar-thumb { background: #4c524e; border-radius: 3px; }
	#list > .lk-liste table { border-spacing: 0px !important; }
	#list > .lk-liste td { background: none !important; border-bottom: 1px solid rgba(255,255,255,0.06); }
	#list > .lk-liste tr:last-child td { border-bottom: 0px; }
	#list > .lk-liste td > div { position: relative; min-height: 21px !important; padding: 0px 2px 0px 0px !important; transition: padding-left .15s ease; }
	#list > .lk-liste td a { font-size: 12.5px; color: #e8ebe9 !important; text-decoration: none !important; background: none !important; }
	#list > .lk-liste .ol_zahl { font-size: 11.5px !important; color: #a9b1ac !important; }
	#list > .lk-liste tr:hover td a { color: #8fd46f !important; }
	#list > .lk-liste tr.dl_cur td { background: rgba(96,195,74,0.14) !important; box-shadow: inset 3px 0 0 #60c34a; color: #ffffff !important; }   /* aktuelle Art im Steckbrief */
	#list > .lk-liste tr.dl_cur td > div { padding-left: 8px !important; font-size: 12.5px; }
}
@media (min-width: 1025px) and (hover: hover) {
	#list > .lk-liste tr:not(.dl_cur):hover > td > div { padding-left: 10px !important; }
	#list > .lk-liste tr:not(.dl_cur):hover > td > div::before { content: "\203A"; position: absolute; left: 1px; top: 50%; transform: translateY(-52%); font: bold 13px/1 arial, sans-serif; color: #60c34a; }
}
/* Stand 25.10.2026: auch die Karten-Listen der Startseite und der Links-Seite (#list.lk) - Zeile unter der Maus rueckt ein, gruener Pfeil davor */
@media (min-width: 1025px) and (hover: hover) {
	#list.lk li:has(> a) { position: relative; transition: padding-left .15s ease; }
	#list.lk li:has(> a):not(:has(> a.lk-an)):hover { padding-left: 10px; }
	#list.lk li:has(> a):not(:has(> a.lk-an)):hover::before { content: "\203A"; position: absolute; left: 1px; top: 50%; transform: translateY(-52%); font: bold 13px/1 arial, sans-serif; color: #60c34a; }
}
/* Stand 25.10.2026: hinter dem Copyright "Zuletzt aktualisiert am ... - N Arten" (Desktop) */
.kz-stand { display: none; }
@media (min-width: 1025px) { .kz-stand { display: inline; white-space: pre; } .kz-stand b { font-weight: normal; color: #8fd46f; } }

/* Logo: genau ueber der linken Spalte (200 px) */
.kz-logo, .kz-logo:hover { flex: 0 0 202px; display: flex; align-items: center; gap: 10px; height: 78px; padding: 0px 0px 0px 12px; color: #ffffff; }
.kz-logo img { display: block; width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(96,195,74,0.35), 0 3px 10px rgba(0,0,0,0.55); transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease; }
.kz-logo:hover img { transform: rotate(-8deg) scale(1.06); box-shadow: 0 0 0 2px rgba(143,212,111,0.75), 0 3px 12px rgba(0,0,0,0.6); }
.kz-logo b { display: block; font-size: 20px; line-height: 22px; letter-spacing: 0px; color: #ffffff; font-weight: bold; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.kz-logo b span { color: #8fd46f; }
.kz-logo i { display: block; font-style: normal; font-size: 11px; line-height: 13px; color: #cfd5d1; white-space: nowrap; }
.kz-logo small { display: block; margin-top: 1px; font-size: 9px; line-height: 11px; letter-spacing: 0.04em; color: #8b938e; white-space: nowrap; }
.kz-logo > span { min-width: 0px; overflow: hidden; }

/* Menue: erster Menuetext bei x = 247, Brotkrumen fluchten damit */
.kz-nav { position: relative; display: flex; align-items: center; height: 78px; margin: 0px 0px 0px 30px; padding: 0px; list-style: none; }
.kz-nav > li { position: relative; margin: 0px; padding: 0px; }
.kz-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 5px; height: 36px; padding: 0px 15px; border-radius: 18px; font-size: 13.5px; line-height: 16px; font-weight: bold; color: #dfe5e1; white-space: nowrap; cursor: pointer; transition: color .25s ease; }
.kz-top:hover, .kz-nav > li.kz-offen > .kz-top { color: #ffffff; }
.kz-nav > li.kz-aktiv > .kz-top { color: #8fd46f; }
.kz-pfeil { width: 8px; height: 8px; margin-top: 1px; transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.kz-nav > li.kz-offen .kz-pfeil { transform: rotate(180deg); }
/* gleitende Markierung hinter den Menuepunkten */
.kz-nav > .kz-tinte { position: absolute; left: 0px; top: 21px; height: 36px; width: 10px; border-radius: 18px; background: rgba(255,255,255,0.075); box-shadow: inset 0 0 0 1px rgba(143,212,111,0.18); opacity: 0; pointer-events: none;
	transition: transform .38s cubic-bezier(.22,.61,.36,1), width .38s cubic-bezier(.22,.61,.36,1), opacity .25s ease; will-change: transform, width; }
.kz-nav > .kz-strich { position: absolute; left: 0px; top: 61px; height: 2px; width: 10px; border-radius: 1px; background: #60c34a; opacity: 0; pointer-events: none;
	transition: transform .38s cubic-bezier(.22,.61,.36,1), width .38s cubic-bezier(.22,.61,.36,1), opacity .25s ease; }

/* Dropdowns: nur opacity/transform -> butterweich */
.kz-drop { position: absolute; left: 0px; top: 46px; z-index: 20; min-width: 190px; padding: 8px; border-radius: 12px;
	background: rgba(30,32,31,0.97); box-shadow: 0 0 0 1px rgba(255,255,255,0.07), 0 18px 40px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.4);
	opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.985); transform-origin: 30px 0px;
	transition: opacity .2s ease, transform .3s cubic-bezier(.22,.61,.36,1), visibility 0s linear .3s; }
.kz-drop::before { content: ""; position: absolute; left: 0px; right: 0px; top: -12px; height: 12px; }
.kz-offen > .kz-drop, .kz-drop.kz-sicht { opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease, transform .32s cubic-bezier(.22,.61,.36,1), visibility 0s; }
.kz-drop ul { margin: 0px; padding: 0px; list-style: none; }
.kz-drop li a { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 5px 10px; border-radius: 7px; font-size: 13px; line-height: 17px; color: #e8ebe9; white-space: nowrap; transition: background-color .18s ease, color .18s ease; }
.kz-drop li a:hover, .kz-drop li a:focus { background: rgba(96,195,74,0.16); color: #ffffff; outline: none; }
.kz-drop li a em { font-style: normal; font-size: 11.5px; color: #8b938e; }
.kz-drop li a:hover em { color: #b7e8a0; }
.kz-mega { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; width: 430px; }
#dl_info_m { display: none; }
.om .om-titel span.om-strich, .om .om-titel span.om-zusatz, #dl_info_m span.om-strich, #dl_info_m span.om-zusatz { display: inline; }
.kz-klasse { margin: 2px 10px 4px 10px; padding: 0px 0px 4px 0px; font-size: 10.5px; line-height: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: #60c34a; font-weight: bold; border-bottom: 1px solid rgba(96,195,74,0.25); }
.kz-gruppe + .kz-gruppe { margin-top: 10px; }

/* Suche: rechtsbuendig mit der rechten Spalte */
.kz-suche { position: relative; display: flex; align-items: stretch; width: 300px; height: 40px; margin: 0px 0px 0px auto; border-radius: 20px;
	background: rgba(0,0,0,0.45); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.13); transition: box-shadow .25s ease, background-color .25s ease; }
.kz-suche:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22); }
.kz-suche.kz-fokus { background: rgba(0,0,0,0.6); box-shadow: inset 0 0 0 1px #60c34a, 0 0 0 3px rgba(96,195,74,0.18); }
.kz-kat { position: relative; flex: 0 0 auto; }
.kz-katknopf { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0px 12px 0px 16px; border: 0px; border-right: 1px solid rgba(255,255,255,0.12); border-radius: 20px 0px 0px 20px; background: none;
	font: bold 12px arial, verdana, sans-serif; color: #cfe9c4; cursor: pointer; white-space: nowrap; transition: background-color .2s ease, color .2s ease; }
.kz-katknopf:hover, .kz-kat.kz-offen .kz-katknopf { background: rgba(96,195,74,0.12); color: #ffffff; }
.kz-katknopf:focus { outline: none; }
.kz-katknopf:focus-visible { box-shadow: inset 0 0 0 2px rgba(143,212,111,0.6); }
.kz-kat.kz-offen .kz-pfeil { transform: rotate(180deg); }
.kz-kat .kz-drop { top: 46px; min-width: 150px; }
.kz-kat .kz-drop li a { cursor: pointer; }
.kz-kat .kz-drop li a.kz-gewaehlt { color: #8fd46f; }
.kz-kat .kz-drop li a.kz-gewaehlt::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #60c34a; align-self: center; }
.kz-feld { flex: 1 1 auto; min-width: 0px; height: 40px; margin: 0px; padding: 0px 10px 0px 12px; border: 0px; background: none; font: 13px arial, verdana, sans-serif; color: #ffffff; }
.kz-feld::placeholder { color: #8b938e; }
.kz-feld:focus { outline: none; }
.kz-feld::-webkit-search-cancel-button { display: none; }
.kz-lupe { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 4px 4px 4px 0px; padding: 0px; border: 0px; border-radius: 50%; background: #60c34a; color: #0f1a0d; cursor: pointer;
	transition: background-color .2s ease, transform .25s cubic-bezier(.22,.61,.36,1); }
.kz-lupe:hover { background: #7bd665; transform: scale(1.07); }
.kz-lupe:active { transform: scale(.95); }
.kz-lupe:focus { outline: none; }
.kz-lupe:focus-visible { box-shadow: 0 0 0 3px rgba(143,212,111,0.5); }
.kz-lupe svg { display: block; width: 15px; height: 15px; }

/* Werteliste unter dem Suchfeld */
.kz-liste { left: 0px; right: 0px; top: 46px; min-width: 0px; padding: 6px; }
.kz-liste ul { max-height: 318px; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: #4a4f4c transparent; }
.kz-liste li { display: block; padding: 5px 10px; border-radius: 7px; font-size: 13px; line-height: 17px; color: #e8ebe9; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color .15s ease; }
.kz-liste li mark { background: none; color: #8fd46f; font-weight: bold; }
.kz-liste li.kz-an { background: rgba(96,195,74,0.18); color: #ffffff; }
.kz-liste .kz-info { display: flex; justify-content: space-between; margin: 5px 4px 0px 4px; padding: 6px 6px 0px 6px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 11px; line-height: 14px; color: #8b938e; }
.kz-liste .kz-info kbd { padding: 0px 4px; border-radius: 3px; background: rgba(255,255,255,0.08); font: 10.5px arial, verdana, sans-serif; color: #cfd5d1; }
.kz-liste .kz-leer { padding: 8px 10px; font-size: 12.5px; color: #a9b1ac; }
/* Stand 11.10.2026: Desktop - Suche als eine Pille: Kategorie links (ragt ueber die Mitte), Feld + Lupe genau ueber den Karten der rechten Spalte (1105-1275), ohne Abstand dazwischen */
.kz-eingabe { display: contents; }
@media (min-width: 1025px) {
	.kz-suche { width: auto; margin-right: -5px; }
	.kz-eingabe { display: flex; flex: 0 0 176px; width: 176px; height: 40px; box-sizing: border-box; border-left: 1px solid rgba(255,255,255,0.12); }
	.kz-katknopf { border-right: 0px; }   /* Stand 12.10.2026: Kategorie-Knopf endet / Feld beginnt genau auf der Spaltengrenze Mitte | rechte Spalte (schwarze Linie, x = 1099 im 1280er-Kasten);
	                                         Feld 176 px = von dort bis zur rechten Kante der Karten (x = 1275). Trennstrich gehoert zum Feld. */
	.kz-eingabe .kz-feld { padding: 0px 6px 0px 12px; font-size: 12.5px; }
	.kz-eingabe .kz-feld::placeholder { font-size: 12px; }
	/* Stand 11.10.2026: Kopf 78 -> 94 px, nutzt die freien Pixelzeilen bei 1920x1080 (Chrome-Fenster 919 px hoch), Seite bleibt ohne Scrollen */
	#box > #head, .kz, .kz-logo, .kz-logo:hover, .kz-nav { height: 94px; }
	.kz-nav > .kz-tinte { top: 29px; }
	.kz-nav > .kz-strich { top: 69px; }
}

.kz-burger { display: none; flex: 0 0 auto; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 42px; height: 42px; padding: 0px; border: 0px; border-radius: 12px; background: rgba(255,255,255,0.07); cursor: pointer; }
.kz-burger span { display: block; width: 20px; height: 2px; border-radius: 1px; background: #e8ebe9; transition: transform .35s cubic-bezier(.22,.61,.36,1), opacity .2s ease; }
.kz.kz-menu-auf .kz-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kz.kz-menu-auf .kz-burger span:nth-child(2) { opacity: 0; }
.kz.kz-menu-auf .kz-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.kz-burger:focus { outline: none; }
.kz-burger:focus-visible { box-shadow: 0 0 0 3px rgba(143,212,111,0.5); }
@media (prefers-reduced-motion: reduce) { .kz *, .kz *::before { transition-duration: 0s !important; } }

/* ---- ehemals zweiter Block in header.php ---- */
#kz-tt { position: fixed; z-index: 99999; max-width: 280px; padding: 4px 8px; border: 1px solid #60c34a; border-radius: 5px; background: #0f120f; color: #e8ebe9;
	font: normal 11.5px/15px arial, verdana, sans-serif; text-align: left; white-space: pre-line; box-shadow: 0 6px 16px rgba(0,0,0,0.5); pointer-events: none;
	opacity: 0; visibility: hidden; transition: opacity .15s; }
#kz-tt.kz-tt-an { opacity: 1; visibility: visible; }
#WzTtDiV { border-radius: 5px; overflow: hidden; box-shadow: 0 6px 16px rgba(0,0,0,0.5); }   /* Bild-Tooltips (wz_tooltip.js) im selben Stil */
/* Stand 24.10.2026: feine Lichtkante oben an allen Karten der Seite (Steckbrief, Familie, Ordnung, Suche, Startseite, Links, Impressum/Datenschutz, rechte Spalte) */
.om-karte, .om-titel.tk, .rk-karte, .rt-karte, .lk-karte, .si-karte, .lk-link, #mainblack #info, #dl_galerie_m { position: relative; }
@media (max-width: 1024px) { #mainblack .sbk .sbk-in { position: relative !important; } }   /* mobil steht die Kachel statisch - sonst saesse die Lichtkante an falscher Stelle */
.om-karte::before, .om-titel.tk::before, .rk-karte::before, .rt-karte::before, .lk-karte::before, .si-karte::before, .lk-link::before, #mainblack #info::before, #mainblack .sbk-in::before, #dl_galerie_m::before {
	content: ""; position: absolute; left: 0px; right: 0px; top: 0px; height: 46%; max-height: 120px; border-radius: 10px 10px 0px 0px; pointer-events: none; z-index: 0;
	background: linear-gradient(rgba(255,255,255,0.065), rgba(255,255,255,0)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10); }
/* Lichtkante auch an den Filterkacheln links (Artenliste, Familienliste, Suche) - dort traegt ::before schon die Kachel, deshalb ::after */
#dl_kopf::after, #ol_kopf::after, #sm_kopf::after { content: ""; position: absolute; left: 0px; right: 0px; top: 0px; height: 60px; z-index: -1; border-radius: 10px 10px 0px 0px; pointer-events: none;
	background: linear-gradient(rgba(255,255,255,0.065), rgba(255,255,255,0)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10); }
@media (min-width: 1025px) { #dl_kopf::after, #ol_kopf::after, #sm_kopf::after { top: 14px; } }
/* Stand 24.10.2026: Mobil - ein durchgehender, ruhiger Hintergrund statt einzelner Flaechen (Rosalia-Foto, Strukturbild, neu ansetzende Verlaeufe = harte Uebergaenge) */
@media (max-width: 1024px) {
	#box#box { background: #2b2c2b linear-gradient(#373837 0px, #2b2c2b 900px) no-repeat !important; }
	#box#box#box > #subnavi, #box#box#box > #list, #box#box#box > #mainblack, #box#box#box > #mainpart0, #box#box#box > #mainpart0_scroll, #box#box#box > #mainpart_impressum, #box#box#box > #right { background: none !important; }
}
/* Stand 24.10.2026: schlanke, dunkle Scrollbalken in den Spalten (Liste links, Inhaltsbereiche), gruen beim Darueberfahren */
#list, #mainpart0_scroll, #mainpart_impressum, #right { scrollbar-width: thin; scrollbar-color: #4c524e transparent; }
#list::-webkit-scrollbar, #mainpart0_scroll::-webkit-scrollbar, #mainpart_impressum::-webkit-scrollbar, #right::-webkit-scrollbar { width: 8px; }
#list::-webkit-scrollbar-track, #mainpart0_scroll::-webkit-scrollbar-track, #mainpart_impressum::-webkit-scrollbar-track, #right::-webkit-scrollbar-track { background: transparent; }
#list::-webkit-scrollbar-thumb, #mainpart0_scroll::-webkit-scrollbar-thumb, #mainpart_impressum::-webkit-scrollbar-thumb, #right::-webkit-scrollbar-thumb { background: #4c524e; border-radius: 4px; }
#list::-webkit-scrollbar-thumb:hover, #mainpart0_scroll::-webkit-scrollbar-thumb:hover, #mainpart_impressum::-webkit-scrollbar-thumb:hover, #right::-webkit-scrollbar-thumb:hover { background: #60c34a; }
/* Stand 24.10.2026: Buchcover in der rechten Spalte kippt beim Darueberfahren leicht nach hinten (alle Seiten, nur Geraete mit Maus) */
@media (hover: hover) {
	#right .rk-cover { perspective: 600px; }
	#right .rk-cover img { transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease; transform-origin: left center; }
	#right .rk-cover:hover img, #right .rk-cover:focus-visible img { transform: rotateY(-16deg) scale(1.04); box-shadow: 10px 10px 18px rgba(0,0,0,0.55); }
}
/* Stand 24.10.2026: Titelkarte im Steckbrief mit ruhigem Verlauf statt Strukturbild */
#box #mainblack #info { background: linear-gradient(160deg, #383a38 0%, #2b2c2b 70%) !important; }
/* Stand 24.10.2026: Brotkrumen auf allen Seiten einheitlich (wie im Steckbrief) - Pfeile statt "/", unterstrichen erst beim Darueberfahren, letzter Teil als Pille.
   Greift auf die Brotkrumen-Zeilen im neuen Stil (Steckbrief, Familie, Ordnung, Suche, Links, Taxon, Impressum, Datenschutz). */
#subnavi > div[style*="display:flex"] { height: 20px !important; overflow: visible !important; }
#subnavi > div[style*="display:flex"] a { text-decoration: none !important; }
#subnavi > div[style*="display:flex"] > a[href="index.php"]:first-child { font-size: 0px !important; display: inline-flex; align-items: center; }   /* Stand 24.10.2026: Haus-Symbol statt "Home" (Text bleibt fuer Screenreader) */
#subnavi > div[style*="display:flex"] > a[href="index.php"]:first-child::before { content: ""; display: inline-block; width: 15px; height: 15px; background: #8fd46f; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 7.6 8 2.5l6 5.1M3.8 6.3V13.5h3.1V9.6h2.2v3.9h3.1V6.3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 7.6 8 2.5l6 5.1M3.8 6.3V13.5h3.1V9.6h2.2v3.9h3.1V6.3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
#subnavi > div[style*="display:flex"] > a[href="index.php"]:first-child:hover::before { background: #b9e3a6; }
#subnavi > div[style*="display:flex"] a:hover { text-decoration: underline !important; text-underline-offset: 2px; }
#subnavi > div[style*="display:flex"] > span[style*="margin:0px 7px"] { font-size: 0px !important; margin: 0px 8px !important; }
#subnavi > div[style*="display:flex"] > span[style*="margin:0px 7px"]::after { content: "\203A"; font-size: 15px; color: #7f8682; }
#subnavi > div[style*="display:flex"] > span:last-child:not([style*="margin:0px 7px"]), #subnavi > div[style*="display:flex"] > h1:last-child { padding: 1px 9px !important; border-radius: 9px; background: rgba(255,255,255,0.08) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }