/**
 * Imkerei Doku – Optik der gartenglück-Etiketten, gebaut fürs Handy am Bienenstand.
 *
 * Grundhaltung: mobile-first. Die Basis-Regeln gelten fürs Handy (der Normalfall –
 * dokumentiert wird am Stand), erst ab 640px kommt per Media-Query das Breitere dazu.
 * Alles Antippbare ist mindestens 48px hoch, damit es auch mit Handschuh oder klebrigen
 * Fingern trifft. Keine Frameworks, kein Build-Schritt.
 *
 * Farbpalette: gartenglück-CI (warmes Gold statt grelles Orange), Bioland-Grün #278749,
 * EU-Bio-Grün #AFD036, Fast-Schwarz #231F20.
 */

/*
 * Untergrund und Karte trennen sich jetzt deutlich. Vorher lag #F4F1EC unter
 * #FFFCF7 - ein Unterschied, den man am Handy in der Sonne nicht sieht, weshalb
 * die ganze Oberflaeche flau wirkte. Draussen zaehlt Kontrast mehr als
 * Gemuetlichkeit.
 *
 * Steht auf :root und nicht in .imk-wrap, weil der eigenstaendige Betrieb damit
 * den body faerbt - und der liegt ausserhalb. .imk-wrap erbt sie von hier. Unter
 * WordPress bleibt sie folgenlos: Dort faerbt niemand den body damit, und eine
 * Variable allein aendert nichts am Theme.
 */
:root {
	--imk-grund: #E9E1D3;
}

.imk-wrap {
	/*
	 * Tabellenziffern: Georgia setzt von Haus aus Mediaevalziffern, die in der
	 * Hoehe tanzen. In Fliesstext ist das schoen, in Spalten aus Volk-Nummern
	 * und Milbenzahlen stehen sie dann nicht untereinander.
	 */
	font-variant-numeric: tabular-nums;

	/* gartenglück-CI-Palette */
	--imk-honig:        #b58c42;
	--imk-honig-dunkel: #96722e;
	--imk-honig-hell:   #f5ead4;
	--imk-gruen:        #278749;
	--imk-gruen-hell:   #E8F3EA;
	--imk-bio-gruen:    #AFD036;
	--imk-tinte:        #231F20;
	--imk-grau:         #6B6560;
	--imk-grau-hell:    #EDE7DE;
	--imk-papier:       #FFFFFF;
	--imk-papier-warm:  #fdf5e6;

	/*
	 * Zwei Linientoene statt acht. Verstreut lagen #dcd5ca, #d8d0c4, #d8d0c1,
	 * #e3dcd0, #e3d8c2, #ded6c6, #d5cec4 und #a79c8c in der Datei - Unterschiede,
	 * die kein Auge trennt. Das war keine Entscheidung, sondern Ablagerung aus
	 * vielen Umbauten.
	 */
	--imk-linie:        #D8D0C4;
	--imk-linie-stark:  #A79C8C;

	/* Warngelb der Ampel: eigenes dunkles Gold statt Material-#FFC107, das als
	   Fremdkoerper neben der CI stand und auf Weiss ohnehin kaum trug. */
	--imk-warn-gelb:    #B07711;
	--imk-rot:          var(--imk-rot);
	--imk-rot-hell:     var(--imk-rot-hell);

	--imk-braun:        #4E3A1E;

	--imk-radius:       14px;
	--imk-radius-klein: 10px;
	--imk-schatten:     0 1px 2px rgba(35, 31, 32, .06), 0 4px 14px rgba(35, 31, 32, .05);
	/*
	 * Am Stand wird die App mit Imkerhut vor dem Gesicht und Handschuhen an den Haenden
	 * bedient - da ist alles, was am Schreibtisch "normal gross" wirkt, zu klein.
	 * Grundschrift und Tippziel sind deshalb bewusst grosszuegiger als ueblich
	 * (Rueckmeldung 06.09.2026: "am besten alles in groesserer Schrift ... wie fuer
	 * einen Senioren"). Alle uebrigen Groessen haengen ueber em daran und wachsen mit.
	 */
	--imk-tippziel:     52px;

	max-width: 720px;
	margin: 0 auto;
	padding: 0 2px;
	font-size: 19px;
	line-height: 1.6;
	color: var(--imk-tinte);
	-webkit-text-size-adjust: 100%;
}

.imk-wrap *,
.imk-wrap *::before,
.imk-wrap *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- Kopfbereich
   Die Biene stammt aus dem Frühlingshonig-Etikett (freigestellt). Der orange Balken
   darunter zitiert die Balken am oberen und unteren Etikettenrand. */
/* Der Kopf steht auf jedem Bildschirm und traegt nur den Namen der App - er darf
   deshalb wenig Hoehe kosten. Was darunter kommt, ist die Arbeit. */
.imk-kopf {
	display: flex;
	align-items: center;
	gap: .55em;
	padding: .25em 0 .35em;
	border-bottom: 3px solid var(--imk-honig);
	margin-bottom: .8em;
}
.imk-kopf-biene {
	width: 36px;
	height: auto;
	flex: none;
	/* leicht aufgerichtet – auf dem Etikett fliegt sie schräg ins Wort hinein */
	transform: rotate(-12deg);
}
.imk-kopf-text {
	display: flex;
	flex-direction: column;
	gap: .1em;
	min-width: 0;
}
.imk-kopf-titel {
	font-size: 1.3em;
	font-weight: 400;
	letter-spacing: .01em;
	color: var(--imk-honig);
	line-height: 1.1;
}
.imk-kopf-marke {
	font-size: .8em;
	color: var(--imk-grau);
	letter-spacing: .02em;
}

/* ------------------------------------------------------------- Überschriften
   Vorher: weit gesperrte Versalien in Honig, als Anleihe beim Etikett. Auf dem
   Etikett steht ein Wort - hier stehen Saetze wie "Export fuer die
   Oekokontrolle", und die zerfallen in Versalien in einzelne Buchstaben. Dazu
   war Gold gleichzeitig Marke, Ueberschrift, Zahl, Link und Knopf: Wenn alles
   hervorgehoben ist, hebt sich nichts mehr ab.

   Jetzt tragen die Ueberschriften in Tinte, und Gold bleibt der Marke und der
   einen wichtigen Aktion. Lesegroesse statt Display-Groesse - gearbeitet wird
   am Stand, nicht in einer Galerie. */
.imk-wrap h2 {
	margin: 2.2em 0 .7em;
	font-size: 1.35em;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--imk-tinte);
	border: 0;
	padding: 0 0 .35em;
	border-bottom: 1px solid var(--imk-linie);
	line-height: 1.25;
}
.imk-wrap h3 {
	margin: 1.6em 0 .6em;
	font-size: 1em;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--imk-tinte);
}
.imk-wrap h2:first-child {
	margin-top: .4em;
}

/* ------------------------------------------------------------------ Meldungen */
.imk-meldung {
	padding: .85em 1em;
	border-radius: var(--imk-radius-klein);
	margin: 1em 0;
	font-weight: 600;
	border-left: 5px solid;
}
.imk-ok {
	background: var(--imk-gruen-hell);
	color: #1B5C32;
	border-left-color: var(--imk-gruen);
}
.imk-fehler {
	background: var(--imk-rot-hell);
	color: var(--imk-rot);
	border-left-color: var(--imk-rot);
}

.imk-hinweis {
	font-size: .84em;
	color: var(--imk-grau);
	margin-top: .5em;
	line-height: 1.45;
}

/* -------------------------------------------------------------- Zurück-Link */
.imk-zurueck {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	min-height: var(--imk-tippziel);
	color: var(--imk-grau);
	text-decoration: none;
	font-size: .95em;
	font-weight: 600;
}
.imk-zurueck:hover,
.imk-zurueck:focus {
	color: var(--imk-honig-dunkel);
}

/* ------------------------------------------------- Startbildschirm: Stände */
.imk-standort-kacheln {
	display: grid;
	grid-template-columns: 1fr;
	gap: .7em;
	margin: 1em 0;
}
.imk-standort-kachel {
	display: flex;
	flex-direction: column;
	gap: .15em;
	padding: 1.05em 1.15em;
	border: 1px solid var(--imk-grau-hell);
	border-left: 5px solid var(--imk-honig);
	border-radius: var(--imk-radius);
	background: var(--imk-papier);
	box-shadow: var(--imk-schatten);
	text-decoration: none;
	color: var(--imk-tinte);
	min-height: var(--imk-tippziel);
}
.imk-standort-kachel:hover,
.imk-standort-kachel:focus {
	border-color: var(--imk-honig);
	border-left-color: var(--imk-honig-dunkel);
	background: var(--imk-papier-warm);
}
.imk-standort-kachel-name {
	font-weight: 700;
	font-size: 1.18em;
	letter-spacing: .01em;
}
.imk-standort-kachel-anzahl {
	color: var(--imk-honig-dunkel);
	font-weight: 600;
	font-size: .95em;
}
.imk-standort-kachel-adresse {
	font-size: .84em;
	color: var(--imk-grau);
}

/* --------------------------------------------------------- Standort-Reiter */
.imk-standort-tabs {
	display: flex;
	flex-wrap: nowrap;
	gap: .45em;
	margin: 0 0 1.2em;
	padding-bottom: .4em;
	/* Am Handy lieber seitlich wischen als die Reiter umbrechen lassen */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.imk-standort-tabs::-webkit-scrollbar {
	display: none;
}
.imk-standort-tab {
	display: inline-flex;
	align-items: center;
	flex: none;
	min-height: 42px;
	padding: 0 1.05em;
	border-radius: 999px;
	border: 1px solid var(--imk-grau-hell);
	background: var(--imk-papier);
	color: var(--imk-grau);
	text-decoration: none;
	font-size: .92em;
	font-weight: 600;
	white-space: nowrap;
}
.imk-standort-tab:hover,
.imk-standort-tab:focus {
	border-color: var(--imk-honig);
	color: var(--imk-tinte);
}
.imk-standort-tab.ist-aktiv {
	background: var(--imk-honig);
	border-color: var(--imk-honig);
	color: #fff;
}

/* ------------------------------------------------------------ Stand-Layout
   Bildet die reale Aufstellung ab: je zwei Beuten stehen zusammen auf einem
   Bock. Das Paar ist deshalb die Kachel - eine gemeinsame Karte mit beiden
   Nummern und einem Trennstrich dazwischen. Der Abstand zwischen den Paaren
   ist grösser als der innerhalb, sonst zerfällt das Raster optisch in acht
   Einzelkästchen und man sieht nicht mehr, was zusammensteht. */
/* ================================================== Standplan: wie sie stehen
   Grundriss von oben. Die Beuten stehen hintereinander in einer Linie, Schulter an
   Schulter, je zwei dicht zusammen auf einem Bock, dann eine groessere Luecke - so
   wie auf dem Foto vom Stand. Eine Beute ist deshalb ein LIEGENDES Rechteck und die
   Linie laeuft senkrecht ueber den Schirm, so wie die Imkerin davorsteht.

   Bis v1.26 lag hier das Gegenteil: Reihen mit zwei Plaetzen nebeneinander,
   untereinander gestapelt. Das war ein Missverstaendnis der Aufstellung. */

.imk-stand-raster {
	/*
	 * Kantenlaenge einer Beute. Bewusst gross: am Stand wird mit Handschuh getippt, und
	 * die Nummer muss durch den Schleier des Imkerhuts lesbar sein. Alles andere im
	 * Raster richtet sich nach diesem einen Wert.
	 */
	--imk-beute-gross: 92px;

	display: flex;
	flex-direction: column;
	gap: .85em;
	margin: .8em 0 1em;
	max-width: 460px;
}

/* Ein Bock: zwei Beuten dicht zusammen. Die Luecke zum naechsten Bock macht der
   gap des Rasters - so sind die Paare ohne Rahmen oder Linie ablesbar. */
.imk-bock {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

/* Zeile mit Notizspalte: links die Notiz der Beute, rechts die Beute als Quadrat.
   Weil die Beute nur noch so breit ist wie sie hoch ist, bleibt links deutlich mehr
   Raum fuer die Notiz als vorher - sie bekommt jetzt den ganzen Rest der Zeile.
   Text steht dort nur, wo auch eine Notiz ist: am Stand werden fast nie welche
   geschrieben, und ein leeres Kaestchen wuerde zwanzigmal umsonst Platz belegen. */
.imk-platz-zeile {
	display: grid;
	grid-template-columns: 1fr var(--imk-beute-gross, 92px);
	gap: .7em;
	align-items: center;
}
.imk-beute-notiz {
	font-size: .8em;
	line-height: 1.4;
	color: var(--imk-grau);
	text-align: right;
	/* Lange Notizen abschneiden statt das Raster auseinanderziehen. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ------------------------------------------------------------- eine Beute */
/*
 * Die Schriftgroessen stehen hier absichtlich klein: die .imk-wrap rechnet mit 17px
 * Grundschrift, und eine Kachel, die alles darauf hochskaliert, wirkt gedrungen
 * (Rueckmeldung 05.09.2026: "sah vorher smoother aus"). Die Trefflaeche bleibt
 * trotzdem gross - sie ist ueber die ganze Zeilenbreite gezogen, nicht nur ueber
 * die Ziffer.
 */
/*
 * Eine Beute ist im Grundriss von oben ein Quadrat - so steht sie auch am Stand.
 * Das spart gegenueber dem fruehreren breiten Balken den halben Bildschirm und gibt
 * ihn der Notizspalte (Rueckmeldung 06.09.2026).
 */
.imk-beute {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	width: var(--imk-beute-gross, 92px);
	height: var(--imk-beute-gross, 92px);
	padding: .3em;
	gap: 2px;
	border: 1px solid var(--imk-grau-hell);
	border-radius: 9px;
	background: var(--imk-papier);
	box-shadow: 0 1px 1px rgba(35, 31, 32, .04);
	color: var(--imk-tinte);
	text-decoration: none;
	text-align: center;
	transition: background .14s ease, border-color .14s ease;
}
/*
 * Hervorheben nur auf Geraeten mit echtem Zeiger. Am Handy bleibt ein :hover nach
 * dem Antippen sonst kleben - dann sieht die zuletzt beruehrte Beute dauerhaft
 * ausgewaehlt aus, obwohl sie es nicht ist.
 */
@media (hover: hover) {
	a.imk-beute:hover,
	label.imk-beute:hover {
		background: var(--imk-papier-warm);
		border-color: var(--imk-honig);
	}
}
a.imk-beute:focus-visible,
label.imk-beute:focus-within {
	background: var(--imk-papier-warm);
	border-color: var(--imk-honig);
	outline: 2px solid var(--imk-honig);
	outline-offset: 1px;
}
.imk-beute-nr {
	font-weight: 700;
	font-size: 1.5em;
	line-height: 1.05;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}
.imk-beute-id {
	font-size: .68em;
	color: var(--imk-grau);
}
/* Im Raster kommt keine Sterne-Bewertung mehr vor - die Regel bleibt fuer die
   zwei Linien und den Kreis, falls dort je wieder eine gezeigt werden soll. */
.imk-beute-sterne {
	font-size: .58em;
	color: var(--imk-honig-dunkel);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/*
 * Der Zustand steckt jetzt in der Farbe der Beuten-Nr, nicht mehr in einem eigenen
 * Punkt daneben. Eigene, dunklere Toene als die Ampelflaechen: Was als Flaeche
 * gut sichtbar ist, ist als Schrift auf hellem Papier noch lange nicht lesbar.
 */
.imk-zustand-gruen { color: #1F7A40; }
.imk-zustand-gelb  { color: #96702A; }
.imk-zustand-rot   { color: #B3261E; }
.imk-zustand-grau  { color: var(--imk-grau); }
/* Punkt = zu dieser Beute steht eine Notiz. Sitzt in der oberen Ecke des Quadrats,
   damit er die Nummer nicht von der Mitte draengt. In den Aufstellungen ohne
   Notizspalte ist er das einzige Zeichen dafuer. */
.imk-notizmarke {
	position: absolute;
	top: 5px;
	left: 6px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--imk-honig-dunkel);
}

/* Flugloch: der Schlitz in der Beutenwand, auf der Seite, zu der geflogen wird.
   Das Brett davor ist das schraege Anflugbrett - zusammen zeigen sie auf einen
   Blick, von welcher Seite man an die Beute herangeht und von welcher besser nicht. */
.imk-flug {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 5px;
	height: 34px;
	border-radius: 3px;
	background: var(--imk-honig);
}
.imk-flug-r { right: 3px; }
.imk-flug-l { left: 3px; }
.imk-brett {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 12px;
	height: 34px;
	background: var(--imk-linie);
}
.imk-brett-r { right: -12px; clip-path: polygon(0 0, 100% 20%, 100% 80%, 0 100%); }
.imk-brett-l { left: -12px;  clip-path: polygon(100% 0, 0 20%, 0 80%, 100% 100%); }
/* Damit die Bretter nicht am Rand abgeschnitten werden. */
.imk-stand-raster.ist-linie { padding-right: 13px; }

/* Freier Platz: bleibt ausdruecklich sichtbar (man muss sehen, wo noch etwas
   hinkann), kostet aber wenig Hoehe - sonst waeren zwanzig Beuten plus Luecken
   eine sehr lange Rutschbahn. */
.imk-beute-leer {
	width: var(--imk-beute-gross, 92px);
	height: 34px;
	min-height: 0;
	padding: 0;
	border-style: dashed;
	border-color: var(--imk-linie);
	box-shadow: none;
	background: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 6px,
		rgba(35, 31, 32, .045) 6px,
		rgba(35, 31, 32, .045) 12px
	);
	color: #9C9186;
	font-size: .72em;
	letter-spacing: .02em;
}

/* --------------------------------------------------------- Umsortieren */
/* Umsortieren braucht mehr Platz als das reine Anschauen: die zwei Pfeile stehen
   rechts neben der Nummer, die Kachel wird dafuer zur breiten Zeile. */
.imk-beute-sortier {
	flex-direction: row;
	justify-content: flex-start;
	gap: .6em;
	width: 100%;
	height: auto;
	min-height: 52px;
	padding: .3em .8em .3em .6em;
	text-align: left;
}
.imk-beute-sortier .imk-pfeile {
	display: flex;
	gap: 4px;
	margin-left: auto;
}
.imk-pfeil {
	flex: none;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 1px solid var(--imk-grau-hell);
	border-radius: 7px;
	background: var(--imk-papier);
	color: var(--imk-honig-dunkel);
	font-size: 1em;
	line-height: 1;
	cursor: pointer;
}
.imk-pfeil:hover:not(:disabled) {
	background: var(--imk-honig-hell);
	border-color: var(--imk-honig);
}
.imk-pfeil:disabled { opacity: .3; cursor: default; }

/* ------------------------------------------------- zwei Linien mit Gasse */
.imk-stand-raster.ist-zwei .imk-zwei-zeile {
	display: grid;
	grid-template-columns: 1fr 1.4em 1fr;
	gap: .4em;
	align-items: stretch;
}
.imk-stand-raster.ist-zwei .imk-bock { justify-content: center; align-items: center; }
.imk-stand-raster.ist-zwei { --imk-beute-gross: 62px; }
.imk-stand-raster.ist-zwei .imk-beute-sterne { display: none; }
/* Die linke Linie schiebt ihre Quadrate an die Gasse, die rechte ebenso -
   so bleibt der Weg in der Mitte auch optisch der Weg. */
.imk-stand-raster.ist-zwei .imk-zwei-zeile > .imk-bock:first-child { align-items: flex-end; }
.imk-stand-raster.ist-zwei .imk-zwei-zeile > .imk-bock:last-child { align-items: flex-start; }
.imk-gasse {
	border-left: 1px dashed var(--imk-linie);
	border-right: 1px dashed var(--imk-linie);
}
.imk-gassen-schild {
	margin: 0 0 .2em;
	text-align: center;
	font-size: .68em;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--imk-linie-stark);
}

/* ------------------------------------------------------------------ Kreis
   Jede Beute liegt radial, das Flugloch sitzt auf der Aussenkante. Die Nummer
   wird per --imk-gegen um denselben Betrag zurueckgedreht und bleibt dadurch
   waagerecht lesbar, egal an welcher Stelle des Kreises sie steht. */
.imk-stand-raster.ist-kreis { max-width: none; align-items: center; }
.imk-kreis-buehne {
	position: relative;
	width: 340px;
	max-width: 100%;
	height: 340px;
	margin: .3em auto 0;
}
.imk-kreis-bahn {
	position: absolute;
	inset: 48px;
	border: 1px dashed var(--imk-linie);
	border-radius: 50%;
}
.imk-kreis-platz {
	position: absolute;
	left: 50%;
	top: 50%;
	transform-origin: 0 0;
	width: 40px;
	height: 26px;
}
.imk-kreis-platz .imk-beute {
	width: 100%;
	height: 100%;
	min-height: 0;
	padding: 0;
	justify-content: center;
	gap: 0;
	border-radius: 6px;
}
.imk-kreis-platz .imk-beute-nr {
	font-size: .68em;
	/* Gegendrehung: die Kachel ist gedreht, die Nummer dreht sich zurueck. */
	transform: rotate(var(--imk-gegen, 0deg));
}
.imk-kreis-platz .imk-ampel,
.imk-kreis-platz .imk-beute-sterne,
.imk-kreis-platz .imk-notizmarke { display: none; }
.imk-kreis-platz .imk-flug { height: 15px; }
.imk-kreis-mitte {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 150px;
	height: 150px;
	border-radius: 50%;
	border: 1px dashed var(--imk-grau-hell);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	text-align: center;
	color: var(--imk-grau);
}
.imk-kreis-zahl {
	font-size: 1.9em;
	font-weight: 700;
	line-height: 1;
	color: var(--imk-tinte);
}
.imk-kreis-was { font-size: .72em; }

/* ------------------------------------------------ Kopfzeilen ueber dem Raster */
/* Die Knoepfe stehen UEBER dem Raster: bei zwanzig Beuten ist das Ende der Linie
   zwei Bildschirme entfernt, unten hat sie niemand gefunden. */
/*
 * Die beiden Knoepfe ueber dem Raster sind Nebenarbeiten - einmal im Jahr umsortieren,
 * einmal die Aufstellung einstellen. Sie stehen deshalb kompakter als die normalen
 * Knoepfe: in voller Groesse brechen sie am Handy um und schieben die erste Beute
 * zwei Zeilen nach unten, obwohl das Raster die Hauptsache ist.
 */
.imk-rasterknoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: .4em;
	margin: .2em 0 .9em;
}
.imk-rasterknoepfe .imk-button {
	/* Teilen sich die Zeile, solange beide hineinpassen - sonst nimmt jeder die volle
	   Breite. Zwei verschieden breite Knoepfe untereinander sehen aus wie ein Versehen. */
	flex: 1 1 9em;
	min-height: 46px;
	padding: .5em .7em;
	font-size: .82em;
	font-weight: 600;
	letter-spacing: 0;
	box-shadow: none;
}
.imk-legende {
	display: flex;
	align-items: center;
	gap: .4em;
	margin: 0 0 .55em;
	font-size: .72em;
	color: var(--imk-grau);
}
.imk-legende-flug {
	display: inline-block;
	width: 4px;
	height: 13px;
	border-radius: 2px;
	background: var(--imk-honig);
	flex: none;
}
/* Notiz zum ganzen Stand - was fuer alle Beuten hier gilt. */
.imk-stand-notiz {
	margin: .2em 0 .7em;
	padding: .45em .75em;
	border-left: 3px solid var(--imk-honig);
	background: var(--imk-papier-warm);
	border-radius: 0 var(--imk-radius-klein) var(--imk-radius-klein) 0;
	font-size: .8em;
	line-height: 1.45;
	color: var(--imk-grau);
}

/* ================================================== Erklaerung hinter dem i
   Die Hinweistexte sind beim ersten Mal nuetzlich und danach im Weg - drei Zeilen
   Erklaerung ueber dem Raster schieben die erste Beute nach unten, obwohl das
   Raster die Hauptsache ist. Sie stecken deshalb hinter einem kleinen runden i.

   Gebaut mit <details>/<summary>: kein JavaScript noetig, und der Text blitzt
   beim Laden nicht kurz auf, wie er es bei einer Loesung per Skript taete. */
.imk-info {
	margin: 0 0 .6em;
}
.imk-info > summary {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	/* Polsterung macht die Trefflaeche gross, der Kreis bleibt klein. */
	padding: .45em .1em;
	list-style: none;
	cursor: pointer;
	color: var(--imk-grau);
	font-size: .72em;
	line-height: 1.35;
}
.imk-info > summary::-webkit-details-marker { display: none; }
.imk-info > summary::marker { content: ""; }

.imk-info-i {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid var(--imk-honig);
	color: var(--imk-honig-dunkel);
	background: transparent;
	font-size: 12px;
	font-weight: 700;
	font-style: italic;
	line-height: 1;
	/* Das i sitzt in der Rundung sonst minimal zu tief. */
	padding-bottom: 1px;
	transition: background .14s ease, color .14s ease;
}
@media (hover: hover) {
	.imk-info > summary:hover .imk-info-i {
		background: var(--imk-honig);
		color: #fff;
	}
}
.imk-info > summary:focus-visible {
	outline: 2px solid var(--imk-honig);
	outline-offset: 2px;
	border-radius: var(--imk-radius-klein);
}
/* Aufgeklappt: gefuellter Kreis, damit sichtbar ist, wo der Text herkommt. */
.imk-info[open] > summary .imk-info-i {
	background: var(--imk-honig);
	color: #fff;
}
/* Der Text selbst - eingerueckt auf Hoehe des Kreises. */
.imk-info > .imk-hinweis {
	margin: .1em 0 .5em;
	padding-left: calc(20px + .4em);
}

/* Sonderfall Raster: die Legende steht ohnehin da, das i haengt sich rechts an
   sie an. So kostet die Erklaerung dort gar keine eigene Zeile. */
.imk-info-legende > summary {
	display: flex;
	width: 100%;
	max-width: 460px;
}
.imk-info-legende > summary .imk-info-i {
	margin-left: auto;
}

/* ================================================= Karte auf dem ganzen Schirm
   Eine Landkarte braucht auf einem Handy jeden Quadratzentimeter. In der
   Kartenansicht faellt deshalb alles weg, was sonst um den Inhalt herum steht -
   nur die Bereichsleiste unten bleibt, denn ueber sie kommt man zurueck. */
.imk-wrap.ist-kartenschirm .imk-kopf,
.imk-wrap.ist-kartenschirm .imk-untertabs,
.imk-wrap.ist-kartenschirm .imk-meldung {
	display: none;
}
.imk-wrap.ist-kartenschirm {
	padding: 0;
}

.imk-kartenschirm {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	/* Endet ueber der Bereichsleiste: deren Hoehe plus die Wischgeste-Zone am iPhone. */
	bottom: calc(58px + env(safe-area-inset-bottom, 0px));
	z-index: 500;
	display: flex;
	flex-direction: column;
	background: var(--imk-papier);
}
.imk-kartenkopf {
	flex: none;
	padding: .7em .8em .5em;
	border-bottom: 1px solid var(--imk-grau-hell);
}
.imk-kartenkopf h2 {
	margin: 0 0 .35em;
	padding: 0;
	border: 0;
	font-size: 1.15em;
}
.imk-kartenkopf .imk-radiuswahl {
	margin: 0;
	overflow-x: auto;
}
/* Die Karte nimmt den ganzen Rest - eine feste Hoehe waere auf jedem Geraet falsch. */
.imk-wrap.ist-kartenschirm .imk-karte {
	flex: 1 1 auto;
	height: auto;
	min-height: 0;
	/* Die Normalansicht deckelt die Hoehe auf 560px - hier soll sie den Rest fuellen. */
	max-height: none;
	margin: 0;
	border-radius: 0;
	border-left: 0;
	border-right: 0;
}
.imk-kartenfuss {
	flex: none;
	margin: 0;
	padding: .5em .8em;
	border-top: 1px solid var(--imk-grau-hell);
	font-size: .78em;
	color: var(--imk-grau);
}
/* Beschriftung an den Standen: man soll sehen, was man antippt, bevor man tippt. */
.imk-karte-name {
	background: var(--imk-papier);
	border: 1px solid var(--imk-honig);
	border-radius: 7px;
	padding: 2px 7px;
	font-size: 13px;
	font-weight: 700;
	color: var(--imk-tinte);
	box-shadow: 0 1px 3px rgba(35, 31, 32, .18);
	white-space: nowrap;
}
.imk-karte-name::before { display: none; }

/* ====================================== Fenster zu einer Beute (Notiz)
   Faehrt von OBEN herein, nicht von unten: am Handy schiebt sich beim Tippen die
   Tastatur ueber die untere Haelfte und wuerde genau das Notizfeld verdecken. */
.imk-beutenfenster {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(35, 31, 32, .45);
	display: flex;
	flex-direction: column;
	align-items: center;
	/*
	 * Unten derselbe Abstand wie bei .imk-wrap: Die feste Bereichsleiste liegt mit
	 * z-index 9999 ueber dem Fenster und verdeckte sonst dessen letzte Zeilen - beim
	 * langen Fenster einer Beute war das der Plus-Knopf, der halb hinter der Leiste
	 * hervorschaute (Rueckmeldung 06.09.2026).
	 *
	 * Das Fenster ist position:fixed und steht damit ausserhalb des Flusses, in dem
	 * .imk-wrap seinen eigenen Abstand haelt - es braucht ihn deshalb selbst.
	 */
	padding: 0 .5em calc(74px + env(safe-area-inset-bottom, 0px));
	overflow-y: auto;
}
.imk-beutenfenster[hidden] { display: none !important; }
.imk-beutenfenster-kasten {
	width: 100%;
	max-width: 520px;
	background: var(--imk-papier);
	border-radius: 0 0 var(--imk-radius) var(--imk-radius);
	box-shadow: 0 8px 26px rgba(35, 31, 32, .25);
	padding: 1em 1em 1.1em;
	flex: none;
}
.imk-beutenfenster-kasten form { display: flex; flex-direction: column; gap: .6em; }
.imk-bf-kopf {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .5em;
	margin: 0;
}
.imk-bf-kopf strong { font-size: 1.15em; color: var(--imk-honig-dunkel); }
.imk-bf-wo { font-size: .8em; color: var(--imk-grau); }
.imk-beutenfenster-kasten label {
	font-size: .68em;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--imk-grau);
	margin-bottom: -.35em;
}
.imk-beutenfenster-kasten textarea {
	width: 100%;
	min-height: 6em;
	padding: .6em .7em;
	border: 1px solid var(--imk-grau-hell);
	border-radius: var(--imk-radius-klein);
	background: #fff;
	color: var(--imk-tinte);
	font: inherit;
	font-size: .95em;
	line-height: 1.45;
	resize: vertical;
}
.imk-beutenfenster-kasten textarea:focus {
	outline: 2px solid var(--imk-honig);
	outline-offset: 1px;
	border-color: var(--imk-honig);
}
.imk-bf-knoepfe { display: flex; gap: .5em; margin: 0; flex-wrap: wrap; }
.imk-bf-knoepfe .imk-button { flex: 1 1 auto; }
.imk-bf-knoepfe .imk-button-zweit { flex: 0 1 auto; }
/* Erledigte Notiz: zwei Wege, abgesetzt vom Sichern-Knopf darueber, damit
   niemand aus Versehen loescht, wo er speichern wollte. */
.imk-bf-erledigt {
	margin-top: .3em;
	padding-top: .7em;
	border-top: 1px solid var(--imk-grau-hell);
}
.imk-bf-erledigt[hidden] { display: none !important; }
.imk-bf-erledigt-titel {
	margin: 0 0 .5em;
	font-size: .78em;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--imk-grau);
}
.imk-bf-erledigt .imk-button { font-size: .88em; }
/* Der Loesch-Weg ist der letzte Ausweg, nicht der naheliegende. */
.imk-wrap .imk-bf-loeschen {
	border-color: var(--imk-grau-hell);
	color: var(--imk-grau);
}
.imk-wrap .imk-bf-loeschen:hover {
	border-color: var(--imk-rot);
	color: var(--imk-rot);
	background: var(--imk-rot-hell);
}

.imk-bf-chronik {
	display: block;
	min-height: var(--imk-tippziel);
	padding: .75em .8em;
	border: 1px solid var(--imk-grau-hell);
	border-radius: var(--imk-radius-klein);
	color: var(--imk-honig-dunkel);
	text-decoration: none;
	font-weight: 600;
	font-size: .92em;
}
.imk-bf-chronik:hover {
	background: var(--imk-papier-warm);
	border-color: var(--imk-honig);
}

/* Chronik-Karte, die vom ganzen Stand stammt: dieselbe Form wie ein eigener
   Eintrag, aber zurueckgenommen - sie gilt nicht nur diesem Volk. */
.imk-chronik-vomstand {
	border-left-color: var(--imk-grau-hell);
	background: transparent;
}
.imk-chronik-herkunft {
	margin: .3em 0 0;
	font-size: .72em;
	color: var(--imk-grau);
	font-style: italic;
}

/* Auswahl der Kategorien fuer den Ausdruck. */
.imk-kategoriewahl {
	display: flex;
	align-items: center;
	gap: .6em;
	min-height: var(--imk-tippziel);
	padding: .3em 0;
	cursor: pointer;
}
.imk-wrap .imk-kategoriewahl input[type="checkbox"] {
	width: 24px;
	height: 24px;
	flex: none;
	accent-color: var(--imk-honig);
}

/* --------------------------------------------------------- Lager-Kategorien
   Das Lager beginnt mit den Kategorien, nicht mit einer langen Tabelle. Erst
   ein Tipp faehrt die Historie einer Kategorie aus - so passt der Einstieg auf
   einen Bildschirm, auch wenn irgendwann zwanzig Posten in fuenf Kategorien
   stehen. */
.imk-lagerkategorien {
	display: flex;
	flex-direction: column;
	gap: .5em;
	margin: .6em 0 1em;
}
.imk-lagerkategorie {
	border: 1px solid var(--imk-grau-hell);
	border-radius: var(--imk-radius);
	background: var(--imk-papier);
	overflow: hidden;
}
.imk-lagerkopf {
	display: flex;
	align-items: center;
	gap: .6em;
	width: 100%;
	min-height: var(--imk-tippziel);
	padding: .7em .9em;
	border: 0;
	background: transparent;
	font: inherit;
	font-weight: 700;
	color: var(--imk-tinte);
	cursor: pointer;
	text-align: left;
}
@media (hover: hover) {
	.imk-lagerkopf:hover { background: var(--imk-papier-warm); }
}
.imk-lagerkopf-name { flex: 1 1 auto; }
.imk-lagerkopf-anzahl {
	font-size: .74em;
	font-weight: 400;
	color: var(--imk-grau);
}
.imk-lagerkopf-pfeil {
	flex: none;
	color: var(--imk-honig);
	transition: transform .2s ease;
}
.imk-lagerkopf[aria-expanded="true"] .imk-lagerkopf-pfeil { transform: rotate(90deg); }
.imk-lagerhistorie { padding: 0 .9em; }
.imk-lagerhistorie.ist-offen { padding-bottom: .9em; }
.imk-lager-einheit {
	font-size: .78em;
	color: var(--imk-grau);
}

/* ------------------------------------------------------------- Archivliste
   Statt einer Tabelle mit fuenf Spalten, die am Handy seitwaerts scrollt: je
   Volk eine Zeile mit dem, was man beim Nachschlagen braucht - Beuten-Nr,
   Grund, Datum. Gruppiert nach Jahren, neueste zuerst. */
.imk-archivsuche { margin: .3em 0 .5em; }
.imk-archiv-suchfeld {
	width: 100%;
	min-height: var(--imk-tippziel);
	padding: .5em .8em;
	border: 1px solid var(--imk-grau-hell);
	border-radius: var(--imk-radius-klein);
	background: var(--imk-papier);
	font: inherit;
	font-size: .95em;
	color: var(--imk-tinte);
}
.imk-archiv-suchfeld:focus {
	outline: 2px solid var(--imk-honig);
	outline-offset: 1px;
	border-color: var(--imk-honig);
}
.imk-archiv-treffer[hidden] { display: none !important; }

.imk-archivliste { display: flex; flex-direction: column; gap: 3px; }
.imk-archivjahr {
	margin: .9em 0 .2em;
	font-size: .78em;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--imk-grau);
}
.imk-archivjahr:first-child { margin-top: .2em; }
.imk-archivjahr[hidden] { display: none !important; }

.imk-archivzeile {
	display: flex;
	align-items: center;
	gap: .7em;
	min-height: var(--imk-tippziel);
	padding: .45em .7em;
	border: 1px solid var(--imk-grau-hell);
	border-radius: 9px;
	background: var(--imk-papier);
	text-decoration: none;
	color: var(--imk-tinte);
}
.imk-archivzeile[hidden] { display: none !important; }
@media (hover: hover) {
	.imk-archivzeile:hover {
		background: var(--imk-papier-warm);
		border-color: var(--imk-honig);
	}
}
.imk-archiv-nr {
	flex: none;
	min-width: 2.6em;
	font-weight: 700;
	font-size: 1.05em;
	font-variant-numeric: tabular-nums;
	color: var(--imk-grau);
}
.imk-archiv-mitte {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.imk-archiv-grund {
	font-size: .84em;
	line-height: 1.3;
	/* Lange Gruende kuerzen statt die Zeile aufblaehen. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.imk-archiv-datum {
	font-size: .72em;
	color: var(--imk-grau);
	/* Weissraum trennt die beiden Angaben - siehe Markup in imk-shortcode.php. */
	display: flex;
	gap: 1.1em;
	flex-wrap: wrap;
}
.imk-archiv-status {
	flex: none;
	font-size: .68em;
	font-weight: 600;
	padding: .15em .6em;
	border-radius: 999px;
	background: var(--imk-grau-hell);
	color: var(--imk-grau);
}
.imk-archiv-status-vereinigt {
	background: var(--imk-gruen-hell);
	color: var(--imk-gruen);
}

/* Staende verwalten: je Stand eine Zeile mit Name, Anzahl und einem Knopf. */
.imk-standverwaltung {
	display: flex;
	align-items: center;
	gap: .6em;
	padding: .5em 0;
	border-bottom: 1px solid var(--imk-grau-hell);
}
.imk-standverwaltung:last-child { border-bottom: 0; }
.imk-standverwaltung-name {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	font-weight: 600;
}
.imk-standverwaltung-anzahl {
	font-size: .74em;
	font-weight: 400;
	color: var(--imk-grau);
}
.imk-standverwaltung .imk-button {
	flex: none;
	min-height: 44px;
	padding: .45em .9em;
	font-size: .8em;
	box-shadow: none;
}
.imk-wrap .imk-standverwaltung .imk-button[disabled] {
	opacity: .4;
	cursor: not-allowed;
}

/* ------------------------------------------------ Kopf und Plus am Stand
   Die Ueberschrift sagt, wo man ist und wie viele hier stehen. Danach kommen
   direkt die Beuten - alles Weitere liegt hinter dem Plus. */
.imk-wrap h2.imk-standkopf {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .5em;
	margin: .2em 0 .4em;
	padding: 0;
	border: 0;
}
.imk-standkopf-anzahl {
	font-size: .62em;
	font-weight: 400;
	color: var(--imk-grau);
	letter-spacing: 0;
	text-transform: none;
}
.imk-standkopf-modus {
	font-size: .58em;
	font-weight: 600;
	color: var(--imk-honig-dunkel);
	background: var(--imk-honig-hell);
	border-radius: 999px;
	padding: .1em .7em;
	letter-spacing: .04em;
	text-transform: none;
}
.imk-standtun { margin: 0 0 .7em; }
.imk-standtun-zeile {
	display: flex;
	flex-wrap: wrap;
	gap: .4em;
	margin: .6em 0 0;
}
.imk-standtun-zeile .imk-button {
	flex: 1 1 9em;
	min-height: 46px;
	padding: .5em .7em;
	font-size: .82em;
	font-weight: 600;
	letter-spacing: 0;
	box-shadow: none;
}

/* ------------------------------------------------- Stift: bearbeiten im Fenster
   Zustand und Beuten-Nr aendert man oft, Zucht- und Koeniginnendaten einmal.
   Deshalb liegt beides hinter dem Stift, die Zuchtdaten darin nochmals
   zugeklappt. */
.imk-bf-ampel {
	margin-left: auto;
	width: 14px;
	height: 14px;
	flex: none;
}
.imk-bf-stift {
	display: flex;
	align-items: center;
	gap: .5em;
	width: 100%;
	min-height: var(--imk-tippziel);
	margin-top: .3em;
	padding: .4em .1em;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: .88em;
	font-weight: 600;
	color: var(--imk-honig-dunkel);
	cursor: pointer;
	text-align: left;
}
.imk-bf-stift > span:first-child { font-size: 1.25em; line-height: 1; }
.imk-bf-stift:hover { color: var(--imk-braun); }
.imk-bf-stift:focus-visible {
	outline: 2px solid var(--imk-honig);
	outline-offset: 2px;
	border-radius: var(--imk-radius-klein);
}

.imk-bf-bearbeiten {
	margin: 0 0 .4em;
	padding: .7em .8em .8em;
	border: 1px solid var(--imk-honig-hell);
	border-radius: var(--imk-radius-klein);
	background: var(--imk-papier);
}
.imk-bf-bearbeiten[hidden] { display: none !important; }
.imk-bf-bearbeiten form { display: flex; flex-direction: column; gap: .5em; }
.imk-bf-bearbeiten label {
	font-size: .72em;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--imk-grau);
	margin-bottom: -.35em;
}
.imk-bf-bearbeiten .imk-gruppe { margin: 0; padding: 0; border: 0; }
.imk-bf-bearbeiten .imk-gruppe-titel { padding: 0; }

/* Zuchtdaten: einmal eintragen, dann jahrelang nicht mehr anfassen. */
.imk-bf-zucht {
	margin-top: .3em;
	border-top: 1px solid var(--imk-grau-hell);
	padding-top: .5em;
}
.imk-bf-zucht > summary {
	list-style: none;
	cursor: pointer;
	min-height: 44px;
	display: flex;
	align-items: center;
	gap: .45em;
	font-size: .88em;
	font-weight: 600;
	color: var(--imk-grau);
}
.imk-bf-zucht > summary::-webkit-details-marker { display: none; }
.imk-bf-zucht > summary::marker { content: ""; }
.imk-bf-zucht > summary::before {
	content: "\25B8";
	color: var(--imk-honig);
	transition: transform .14s ease;
}
.imk-bf-zucht[open] > summary::before { transform: rotate(90deg); }
.imk-jahresfarbe-marke {
	display: inline-block;
	font-size: .82em;
	padding: .1em .6em;
	border-radius: 999px;
	background: var(--imk-honig-hell);
	color: var(--imk-honig-dunkel);
}
.imk-bf-jahresfarbe {
	margin: -.2em 0 .2em;
	font-size: .74em;
	color: var(--imk-honig-dunkel);
	min-height: 1em;
}

/* -------------------------------------------- "Was ist zu tun?" im Fenster
   Am Stand steht man vor der Kiste und will nicht erst ueber die Volk-Seite
   gehen. Die Knoepfe fuehren in die vorhandene Massnahmen-Maske und waehlen
   dort die Art schon aus. */
.imk-bf-tun {
	margin-top: 1em;
	padding-top: .9em;
	border-top: 1px solid var(--imk-grau-hell);
}
/* Das grosse runde Plus. Es ist der einzige Knopf, der dauerhaft dasteht - alles
   Weitere faehrt erst darunter aus, wenn man ihn antippt. */
.imk-bf-plus {
	display: flex;
	align-items: center;
	gap: .6em;
	width: 100%;
	min-height: var(--imk-tippziel);
	padding: .3em 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 1em;
	font-weight: 600;
	color: var(--imk-braun);
	cursor: pointer;
	text-align: left;
}
.imk-bf-plus-kreis {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--imk-braun);
	color: #fff;
	font-size: 30px;
	font-weight: 400;
	line-height: 1;
	/* Das Plus sitzt in der Rundung sonst minimal zu tief. */
	padding-bottom: 3px;
	box-shadow: 0 2px 5px rgba(78, 58, 30, .28);
	transition: transform .26s cubic-bezier(.34, 1.3, .64, 1), background .18s ease;
}
.imk-bf-plus:hover .imk-bf-plus-kreis { background: #3C2D17; }
.imk-bf-plus[aria-expanded="true"] .imk-bf-plus-kreis {
	/* Aus dem Plus wird beim Ausfahren ein x - dasselbe Zeichen, gedreht. */
	transform: rotate(135deg);
}
.imk-bf-plus:focus-visible {
	outline: 2px solid var(--imk-honig);
	outline-offset: 3px;
	border-radius: var(--imk-radius-klein);
}

/* Das ausfahrende Menue. max-height statt height, weil sich "auto" nicht animieren
   laesst; der Wert ist grosszuegig genug fuer den Katalog samt Aufloesen-Block. */
.imk-bf-menue {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height .3s ease, opacity .22s ease;
}
.imk-bf-menue.ist-offen {
	max-height: 1200px;
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.imk-bf-menue { transition: none; }
	.imk-bf-plus-kreis { transition: none; }
}

.imk-bf-aktionen {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .5em;
	padding-top: .5em;
}
@media (min-width: 430px) {
	.imk-bf-aktionen { grid-template-columns: repeat(3, 1fr); }
}
.imk-bf-aktion {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .25em;
	min-height: 82px;
	padding: .7em .4em;
	border: 1px solid var(--imk-grau-hell);
	border-radius: var(--imk-radius-klein);
	background: var(--imk-papier);
	color: var(--imk-tinte);
	text-decoration: none;
	text-align: center;
	font-size: .8em;
	line-height: 1.25;
}
.imk-bf-aktion:hover,
.imk-bf-aktion:focus {
	background: var(--imk-papier-warm);
	border-color: var(--imk-honig);
}
.imk-bf-aktion-symbol { font-size: 1.7em; line-height: 1; }

/* Aufloesen: abgesetzt und zugeklappt - die einzige Sache hier, die man nicht
   mal eben nebenbei macht. */
.imk-bf-aufloesen {
	margin-top: .8em;
	border-top: 1px solid var(--imk-grau-hell);
	padding-top: .7em;
}
.imk-bf-aufloesen > summary {
	list-style: none;
	cursor: pointer;
	min-height: var(--imk-tippziel);
	display: flex;
	align-items: center;
	gap: .45em;
	font-size: .92em;
	font-weight: 600;
	color: var(--imk-grau);
}
.imk-bf-aufloesen > summary::-webkit-details-marker { display: none; }
.imk-bf-aufloesen > summary::marker { content: ""; }
.imk-bf-aufloesen > summary::before {
	content: "\25B8";
	color: var(--imk-honig);
	transition: transform .14s ease;
}
.imk-bf-aufloesen[open] > summary::before { transform: rotate(90deg); }
.imk-bf-aufloesen > summary:hover { color: var(--imk-rot); }
.imk-bf-aufloesen form {
	display: flex;
	flex-direction: column;
	gap: .5em;
	padding-top: .3em;
}
.imk-bf-aufloesen label {
	font-size: .72em;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--imk-grau);
	margin-bottom: -.35em;
}
.imk-bf-aufloesen .imk-hinweis { margin: .2em 0 0; }

/* ============================ Zaehlgang und Voelkerauswahl: dieselbe Linienform
   Beide behalten ihr gewachsenes Markup (Abweichungsfeld je Volk, Suche,
   Zwischenspeicher im Browser) und ziehen allein hier auf die Linie um. Eine
   .imk-standplan-reihe ist genau ein Bock - sie muss ihre zwei Plaetze also nur
   untereinander statt nebeneinander stellen. */
.imk-standplan {
	display: flex;
	flex-direction: column;
	gap: .85em;
	margin: 1em 0;
	max-width: 460px;
}
.imk-standplan-reihe {
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.imk-standplan-platz {
	display: flex;
	align-items: center;
	gap: .5em;
	min-height: 44px;
	padding: .35em .7em;
	border: 1px solid var(--imk-grau-hell);
	border-radius: 8px;
	background: var(--imk-papier);
	box-shadow: 0 1px 2px rgba(35, 31, 32, .05);
	text-decoration: none;
	color: var(--imk-tinte);
	text-align: left;
}
.imk-standplan-platz:hover,
.imk-standplan-platz:focus { background: var(--imk-papier-warm); }
.imk-standplan-nr {
	font-weight: 700;
	font-size: 1.05em;
	line-height: 1.1;
}
.imk-standplan-leer {
	min-height: 22px;
	padding: 0 .7em;
	border-style: dashed;
	box-shadow: none;
	background: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 5px,
		rgba(35, 31, 32, .045) 5px,
		rgba(35, 31, 32, .045) 10px
	);
	color: var(--imk-linie-stark);
	font-size: .72em;
}
.imk-standplan-leer:hover {
	background: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 5px,
		rgba(35, 31, 32, .045) 5px,
		rgba(35, 31, 32, .045) 10px
	);
}
/* Zaehlgang: Zahlenfeld rechts, damit der Daumen es trifft, ohne die Nummer zu verdecken. */
.imk-zaehlplatz .imk-zaehlfeld-milben { margin-left: auto; max-width: 5.5em; }
.imk-zaehlplatz-ergebnis { font-size: .72em; }

/* --------------------------------------------------------- Zustandsampel */
.imk-ampel {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	flex: none;
	border: 2px solid rgba(35, 31, 32, .12);
	vertical-align: middle;
}
h2 .imk-ampel {
	width: 16px;
	height: 16px;
}
.imk-ampel-gruen { background: #4CAF50; }
.imk-ampel-gelb  { background: var(--imk-warn-gelb); }
.imk-ampel-rot   { background: var(--imk-rot); }
.imk-ampel-grau  { background: #BDBDBD; }

/* Ampelwahl im Durchsicht-Formular */
.imk-ampelwahl {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.imk-ampelwahl-option {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: var(--imk-tippziel);
	padding: 6px 12px;
	border: 2px solid var(--imk-grau-hell);
	border-radius: var(--imk-radius-klein);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.imk-ampelwahl-option input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.imk-ampelwahl-option:has(input:checked) {
	border-color: var(--imk-honig);
	background: var(--imk-honig-hell);
}
.imk-ampelwahl .imk-ampel {
	width: 20px;
	height: 20px;
}
.imk-ampelwahl-text {
	font-size: .9em;
	color: var(--imk-grau);
}

/* ------------------------------------------------------------------ Sterne */
.imk-sterne {
	color: var(--imk-honig);
	letter-spacing: -.04em;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ Tabellen
   Am Handy sind sechsspaltige Tabellen unbrauchbar. Unter 640px wird jede Zeile
   deshalb zu einer eigenen Karte, die Spaltenüberschrift steht per data-label
   vor dem Wert (siehe die data-label-Attribute in imk-shortcode.php). */
.imk-tabelle-scroll {
	margin: 1em 0;
}
.imk-tabelle {
	width: 100%;
	border-collapse: collapse;
	font-size: .95em;
}
.imk-tabelle th,
.imk-tabelle td {
	text-align: left;
}

@media (max-width: 639px) {
	.imk-tabelle thead {
		/* zugänglich verstecken statt display:none – Screenreader behalten die Struktur */
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.imk-tabelle,
	.imk-tabelle tbody,
	.imk-tabelle tr,
	.imk-tabelle td,
	.imk-tabelle th {
		display: block;
	}
	.imk-tabelle tr {
		border: 1px solid var(--imk-grau-hell);
		border-left: 5px solid var(--imk-honig);
		border-radius: var(--imk-radius);
		background: var(--imk-papier);
		box-shadow: var(--imk-schatten);
		margin-bottom: .7em;
		padding: .55em .9em;
	}
	.imk-tabelle td,
	.imk-tabelle th {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 1em;
		padding: .3em 0;
		border: 0;
		border-bottom: 1px solid var(--imk-grau-hell);
	}
	.imk-tabelle tr > *:last-child {
		border-bottom: 0;
	}
	.imk-tabelle td::before,
	.imk-tabelle th[data-label]::before {
		content: attr(data-label);
		flex: none;
		font-size: .78em;
		font-weight: 600;
		letter-spacing: .04em;
		text-transform: uppercase;
		color: var(--imk-grau);
	}
	/* Erste Zelle einer Karte ist die Kennzeichnung (Beuten-Nr) – die darf groß sein */
	.imk-tabelle tbody td:first-child {
		font-size: 1.15em;
		font-weight: 700;
		padding-top: .1em;
	}
	.imk-tabelle tbody td:first-child a {
		min-height: auto;
	}
	/* Detail-Tabellen (Volk-Stammdaten) haben Zeilenköpfe statt Spaltenköpfe */
	.imk-tabelle-detail tr {
		border-left-width: 1px;
		margin-bottom: 0;
		border-radius: 0;
		box-shadow: none;
		border-top: 0;
		border-left: 0;
		border-right: 0;
		padding: .1em 0;
	}
	.imk-tabelle-detail tr:first-child {
		border-top: 1px solid var(--imk-grau-hell);
	}
	.imk-tabelle-detail th {
		font-size: .78em;
		font-weight: 600;
		letter-spacing: .04em;
		text-transform: uppercase;
		color: var(--imk-grau);
		border-bottom: 0;
		padding-bottom: 0;
	}
	.imk-tabelle-detail td {
		border-bottom: 0;
		padding-top: 0;
	}
}

@media (min-width: 640px) {
	.imk-tabelle-scroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		border-radius: var(--imk-radius-klein);
	}
	.imk-tabelle th,
	.imk-tabelle td {
		padding: .6em .7em;
		border-bottom: 1px solid var(--imk-grau-hell);
		white-space: nowrap;
	}
	.imk-tabelle thead th {
		background: var(--imk-honig-hell);
		color: var(--imk-tinte);
		font-size: .8em;
		font-weight: 600;
		letter-spacing: .05em;
		text-transform: uppercase;
	}
	.imk-tabelle tbody tr:hover {
		background: var(--imk-papier-warm);
	}
	.imk-standort-kacheln {
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	}
	.imk-standort-tabs {
		flex-wrap: wrap;
	}
	.imk-kopf-biene {
		width: 72px;
	}
	.imk-kopf-titel {
		font-size: 1.5em;
	}
}

.imk-tabelle a {
	color: var(--imk-honig-dunkel);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(217, 126, 20, .35);
}
.imk-tabelle a:hover,
.imk-tabelle a:focus {
	border-bottom-color: var(--imk-honig-dunkel);
}

/* --------------------------------------------------------------- Formulare */
.imk-formular-box {
	border: 1px solid var(--imk-grau-hell);
	border-radius: var(--imk-radius);
	margin: .7em 0;
	background: var(--imk-papier);
	box-shadow: var(--imk-schatten);
	overflow: hidden;
}
.imk-formular-box > summary {
	display: flex;
	align-items: center;
	gap: .55em;
	min-height: var(--imk-tippziel);
	padding: .55em 1em;
	cursor: pointer;
	font-weight: 600;
	font-size: 1.02em;
	list-style: none;
	background: var(--imk-papier-warm);
	color: var(--imk-tinte);
}
.imk-formular-box > summary::-webkit-details-marker {
	display: none;
}
.imk-formular-box > summary::after {
	content: "+";
	margin-left: auto;
	font-size: 1.4em;
	font-weight: 300;
	color: var(--imk-honig-dunkel);
	line-height: 1;
}
.imk-formular-box[open] > summary {
	background: var(--imk-honig-hell);
	border-bottom: 1px solid var(--imk-grau-hell);
}
.imk-formular-box[open] > summary::after {
	content: "–";
}
.imk-formular-box form {
	display: flex;
	flex-direction: column;
	gap: 1em;
	padding: 1.1em 1em 1.2em;
}
.imk-formular-box label {
	display: flex;
	flex-direction: column;
	gap: .35em;
	font-weight: 600;
	font-size: .9em;
	color: var(--imk-grau);
	letter-spacing: .01em;
}
.imk-formular-box label.imk-radio {
	flex-direction: row;
	align-items: center;
	min-height: 44px;
	font-weight: 400;
	font-size: .98em;
	color: var(--imk-tinte);
	gap: .6em;
	margin: -.35em 0;
}
.imk-formular-box input[type="radio"],
.imk-formular-box input[type="checkbox"] {
	width: 22px;
	height: 22px;
	flex: none;
	accent-color: var(--imk-honig);
	margin: 0;
}
.imk-formular-box input[type="text"],
.imk-formular-box input[type="number"],
.imk-formular-box input[type="date"],
.imk-formular-box select,
.imk-formular-box textarea {
	font-size: 16px; /* alles darunter löst auf iOS den Zoom beim Antippen aus */
	font-family: inherit;
	color: var(--imk-tinte);
	min-height: var(--imk-tippziel);
	padding: .6em .7em;
	border: 1px solid var(--imk-linie);
	border-radius: var(--imk-radius-klein);
	background: #fff;
	width: 100%;
}
.imk-formular-box textarea {
	min-height: 4.5em;
	line-height: 1.5;
}
.imk-formular-box input:focus,
.imk-formular-box select:focus,
.imk-formular-box textarea:focus {
	outline: 2px solid var(--imk-honig);
	outline-offset: 1px;
	border-color: var(--imk-honig);
}
/* Das Nachschlage-Formular steht frei auf der Seite, nicht in einem <details> */
.imk-formular-offen {
	padding: 1em;
}
.imk-formular-offen form {
	display: flex;
	flex-direction: column;
	gap: .7em;
	padding: 0;
}

/* ----------------------------------------------------------------- Buttons */
.imk-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4em;
	min-height: var(--imk-tippziel);
	background: var(--imk-honig);
	color: #fff;
	border: none;
	padding: .7em 1.5em;
	border-radius: var(--imk-radius-klein);
	font-weight: 700;
	font-size: 1em;
	font-family: inherit;
	letter-spacing: .02em;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	box-shadow: 0 1px 2px rgba(35, 31, 32, .12);
}
.imk-button:hover,
.imk-button:focus {
	background: var(--imk-honig-dunkel);
	color: #fff;
}
.imk-button:active {
	transform: translateY(1px);
}
.imk-button-zweit {
	background: var(--imk-papier);
	color: var(--imk-honig-dunkel);
	border: 1px solid var(--imk-honig);
	box-shadow: none;
}
.imk-button-zweit:hover,
.imk-button-zweit:focus {
	background: var(--imk-honig-hell);
	color: var(--imk-honig-dunkel);
}
.imk-button-export {
	margin: 0 .5em .6em 0;
}

/* -------------------------------------------------------------- Fußbereich */
.imk-fuss {
	margin: 2.5em 0 1em;
	padding-top: 1.2em;
	border-top: 4px solid var(--imk-honig);
	font-size: .82em;
	color: var(--imk-grau);
	text-align: center;
}

/* Website-Menü auf dieser Seite ausblenden – am Stand nur Ablenkung. Best-Effort für die
   gängigsten WordPress-Theme-Klassennamen; benutzt das Theme andere Namen, greift das evtl.
   nicht vollständig – dann kurz Bescheid geben, dann kommt die passende Regel dazu.

   ❗ Das :not(.imk-appleiste) bei "nav" muss bleiben: ohne die Ausnahme blendet diese Regel
   die eigene App-Leiste am unteren Rand gleich mit aus – die ist ebenfalls ein <nav>. */
body header,
body nav:not(.imk-appleiste),
body .site-header,
body .main-navigation,
body #masthead,
body .navbar,
body #site-navigation,
body .menu-toggle,
body .skip-link {
	display: none !important;
}

/* ------------------------------------------------------- Kopfzeile beim Volk */
.imk-volk-kopfzeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em .9em;
	margin: -.3em 0 1.1em;
	font-size: 1.05em;
}
.imk-volk-kopfzeile .imk-sterne {
	font-size: 1.15em;
}
.imk-volk-standort {
	color: var(--imk-grau);
}
.imk-volk-status {
	padding: .15em .7em;
	border-radius: 999px;
	background: var(--imk-grau-hell);
	color: var(--imk-grau);
	font-size: .8em;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
}

/* --------------------------------------------------------- Schnellaktionen
   Die vier Arbeiten, die am Stand laufend anfallen. Zwei Spalten am Handy, damit die
   Knöpfe groß genug bleiben, um sie mit Handschuh sicher zu treffen. */
.imk-schnellaktionen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .6em;
	margin: 1em 0 1.4em;
}
.imk-schnellaktion {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .25em;
	min-height: 84px;
	padding: .8em .5em;
	border: 1px solid var(--imk-grau-hell);
	border-radius: var(--imk-radius);
	background: var(--imk-papier);
	box-shadow: var(--imk-schatten);
	text-decoration: none;
	color: var(--imk-tinte);
	text-align: center;
}
.imk-schnellaktion:hover,
.imk-schnellaktion:focus {
	border-color: var(--imk-honig);
	background: var(--imk-papier-warm);
	color: var(--imk-tinte);
}
.imk-schnellaktion.ist-aktiv {
	border-color: var(--imk-honig);
	border-width: 2px;
	background: var(--imk-honig-hell);
}
.imk-schnellaktion-symbol {
	font-size: 1.7em;
	line-height: 1;
}
.imk-schnellaktion-label {
	font-weight: 600;
	font-size: .93em;
	letter-spacing: .01em;
}

/* Kurzformular, das eine Schnellaktion aufmacht */
.imk-erfassen {
	border-color: var(--imk-honig);
	border-width: 2px;
	scroll-margin-top: 1em;
}
.imk-erfassen-titel {
	margin: 0;
	padding: .75em 1em;
	background: var(--imk-honig-hell);
	border-bottom: 1px solid var(--imk-grau-hell);
	font-weight: 700;
	font-size: 1.02em;
}

/* ---------------------------------------------------------------- Chronik
   Karten statt Tabelle: am Handy liest sich der Verlauf so deutlich leichter,
   und lange Bemerkungen brechen sauber um, statt die Tabelle zu sprengen. */
.imk-chronik {
	list-style: none;
	margin: 1em 0;
	padding: 0;
}
/* Klassenname folgt dem Markup (imk-chronik-karte); die Regel hiess frueher
   .imk-chronik-eintrag und griff deshalb nirgends. */
.imk-chronik-karte {
	padding: .85em 1em;
	margin-bottom: .6em;
	border: 1px solid var(--imk-grau-hell);
	border-left: 5px solid var(--imk-honig);
	border-radius: var(--imk-radius);
	background: var(--imk-papier);
	box-shadow: var(--imk-schatten);
}
.imk-chronik-kopf {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .1em .55em;
	margin: 0;
}
.imk-chronik-symbol {
	font-size: 1.05em;
}
.imk-chronik-art {
	font-weight: 700;
	font-size: .95em;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--imk-tinte);
}
.imk-chronik-datum {
	margin-left: auto;
	font-size: .88em;
	font-weight: 600;
	color: var(--imk-grau);
	white-space: nowrap;
}
.imk-chronik-wert {
	margin: .35em 0 0;
	font-size: 1.05em;
	font-weight: 700;
	color: var(--imk-honig-dunkel);
}
.imk-chronik-notiz {
	margin: .3em 0 0;
	color: var(--imk-tinte);
	line-height: 1.5;
}

/* ------------------------------------------------------- Plätze umsortieren
   Pfeile statt Drag&Drop: ohne JavaScript umsetzbar und am Stand mit klebrigen
   Fingern zuverlässiger zu treffen. */
.imk-standplan.ist-sortierend .imk-standplan-platz {
	min-height: 110px;
	justify-content: space-between;
	padding: .5em .35em;
}
.imk-platz-sortier {
	cursor: default;
}
.imk-pfeile {
	display: flex;
	gap: .2em;
	margin: 0;
	padding: 0;
}
.imk-pfeil {
	flex: 1 1 0;
	min-width: 36px;
	min-height: 40px;
	padding: 0;
	border: 1px solid var(--imk-grau-hell);
	border-radius: 8px;
	background: #fff;
	color: var(--imk-honig-dunkel);
	font-size: 1.1em;
	font-family: inherit;
	line-height: 1;
	cursor: pointer;
}
.imk-pfeil:hover:not(:disabled),
.imk-pfeil:focus:not(:disabled) {
	background: var(--imk-honig);
	border-color: var(--imk-honig);
	color: #fff;
}
.imk-pfeil:disabled {
	opacity: .3;
	cursor: default;
}

/* ==========================================================================
   Durchsicht-Formular – nachgebaut nach der gewohnten Imker-App.
   Sterne laufen per JS (halbe Schritte, Wisch-Geste), Schalter sind Checkboxen.
   ========================================================================== */

.imk-gruppe {
	border: 1px solid var(--imk-grau-hell);
	border-radius: var(--imk-radius-klein);
	margin: 0;
	padding: .3em 1em 1em;
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: .9em;
}
.imk-gruppe-titel {
	padding: 0 .4em;
	margin-left: -.4em;
	font-size: .78em;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--imk-honig-dunkel);
}

/* ---------------------------------------------------------- Sterne-Auswahl
   JS-gesteuerte Sterne mit halben Schritten, Wisch-Geste und Null-Option. */
.imk-sternwahl {
	border: 0;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .1em;
}
.imk-sternwahl legend {
	padding: 0;
	font-weight: 600;
	font-size: .9em;
	color: var(--imk-grau);
}
.imk-sternwahl-reihe {
	display: flex;
	align-items: center;
	gap: .1em;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}
.imk-stern {
	font-size: 2.05em;
	line-height: 1.1;
	color: var(--imk-linie);
	cursor: pointer;
	padding: 0 .04em;
	min-width: 44px;
	text-align: center;
	transition: color .1s ease;
}
.imk-stern-voll {
	color: var(--imk-honig);
}
.imk-stern-halb {
	background: linear-gradient(90deg, var(--imk-honig) 50%, var(--imk-linie) 50%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.imk-stern-loeschen {
	border: 0;
	background: none;
	font-size: 1.1em;
	color: var(--imk-grau);
	cursor: pointer;
	padding: .3em;
	margin-left: .3em;
	min-width: 36px;
	min-height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}
.imk-stern-loeschen:hover,
.imk-stern-loeschen:focus {
	background: var(--imk-rot-hell);
	color: var(--imk-rot);
}

/* ------------------------------------------------------------- Ja/Nein-Schalter */
.imk-formular-box .imk-schalter,
.imk-schalter {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	min-height: var(--imk-tippziel);
	cursor: pointer;
	font-weight: 500;
	font-size: 1em;
	color: var(--imk-tinte);
}
.imk-schalter input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}
.imk-schalter-knopf {
	position: relative;
	flex: none;
	width: 54px;
	height: 31px;
	border-radius: 999px;
	background: var(--imk-linie);
	transition: background .15s ease;
}
.imk-schalter-knopf::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(35, 31, 32, .3);
	transition: transform .15s ease;
}
.imk-schalter input:checked ~ .imk-schalter-knopf {
	background: var(--imk-honig);
}
.imk-schalter input:checked ~ .imk-schalter-knopf::after {
	transform: translateX(23px);
}
.imk-schalter input:focus-visible ~ .imk-schalter-knopf {
	outline: 2px solid var(--imk-honig-dunkel);
	outline-offset: 2px;
}

/* ------------------------------------------------------ Gegeben/genommen-Zeilen */
.imk-formular-box .imk-zaehlzeile,
.imk-zaehlzeile {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	min-height: var(--imk-tippziel);
	font-weight: 500;
	font-size: 1em;
	color: var(--imk-tinte);
}
.imk-zaehlzeile-text {
	min-width: 0;
}
.imk-zaehler {
	display: flex;
	align-items: center;
	gap: 0;
	flex: none;
}
.imk-zaehler input[type="number"] {
	width: 3.2em;
	text-align: center;
	font-weight: 600;
	font-size: 1.05em;
	border: 1px solid var(--imk-grau-hell);
	border-radius: 0;
	padding: .3em 0;
	-moz-appearance: textfield;
}
.imk-zaehler input[type="number"]::-webkit-inner-spin-button,
.imk-zaehler input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.imk-zaehler-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--imk-tippziel);
	height: var(--imk-tippziel);
	border: 1px solid var(--imk-grau-hell);
	background: var(--imk-papier);
	font-size: 1.3em;
	font-weight: 600;
	color: var(--imk-tinte);
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}
.imk-zaehler-minus { border-radius: var(--imk-radius-klein) 0 0 var(--imk-radius-klein); }
.imk-zaehler-plus  { border-radius: 0 var(--imk-radius-klein) var(--imk-radius-klein) 0; }
.imk-zaehler-btn:active {
	background: var(--imk-honig-hell);
	color: var(--imk-honig-dunkel);
}

/* --------------------------------------------------- Durchsicht in der Chronik */
.imk-chronik-details {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .1em .8em;
	margin: .45em 0 0;
	font-size: .93em;
}
.imk-chronik-details dt {
	font-size: .82em;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--imk-grau);
	padding-top: .18em;
}
.imk-chronik-details dd {
	margin: 0;
	color: var(--imk-tinte);
}

.imk-button-gross {
	width: 100%;
	min-height: 56px;
	font-size: 1.05em;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* nur für Screenreader, optisch verborgen (WordPress-Konvention) */
.imk-wrap .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Die Beute im Raster ist ein Link. Themes unterstreichen Links im Inhaltsbereich
   fast immer selbst und mit hoeherer Spezifitaet - dann steht unter jeder Beuten-Nr
   ein Strich, der sie wie einen Textlink aussehen laesst (gesehen 06.09.2026).
   Der Zustand steckt in der Farbe der Nummer; eine Unterstreichung stoert dort. */
.imk-wrap a.imk-beute,
.imk-wrap a.imk-beute:hover,
.imk-wrap a.imk-beute:focus,
.imk-wrap a.imk-beute .imk-beute-nr,
.imk-wrap a.imk-bf-chronik,
.imk-wrap a.imk-bf-chronik:hover {
	text-decoration: none;
	border-bottom: 0;
	box-shadow: none;
}

/* ==========================================================================
   Theme-Abwehr – MUSS am Ende der Datei stehen.
   WordPress-Themes stylen `button` und `input[type=submit]` fast immer selbst
   (meist in ihrem eigenen Blau) und tun das mit höherer Spezifität als eine
   einzelne Klasse. Deshalb hier gezielt und mit !important zurückgeholt; nur
   innerhalb von .imk-wrap, der Rest der Website bleibt unberührt.
   ========================================================================== */
.imk-wrap .imk-button,
.imk-wrap button.imk-button,
.imk-wrap a.imk-button,
.imk-wrap input[type="submit"] {
	background: var(--imk-honig) !important;
	background-image: none !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--imk-radius-klein) !important;
	text-shadow: none !important;
	text-decoration: none !important;
}
.imk-wrap .imk-button:hover,
.imk-wrap .imk-button:focus,
.imk-wrap button.imk-button:hover,
.imk-wrap a.imk-button:hover,
.imk-wrap input[type="submit"]:hover {
	background: var(--imk-honig-dunkel) !important;
	color: #fff !important;
}
.imk-wrap .imk-button-zweit,
.imk-wrap a.imk-button-zweit,
.imk-wrap button.imk-button-zweit {
	background: var(--imk-papier) !important;
	color: var(--imk-honig-dunkel) !important;
	border: 1px solid var(--imk-honig) !important;
}
.imk-wrap .imk-button-zweit:hover,
.imk-wrap .imk-button-zweit:focus {
	background: var(--imk-honig-hell) !important;
	color: var(--imk-honig-dunkel) !important;
}
/* Pfeile im Sortiermodus */
.imk-wrap button.imk-pfeil {
	background: #fff !important;
	background-image: none !important;
	color: var(--imk-honig-dunkel) !important;
	border: 1px solid var(--imk-grau-hell) !important;
	text-shadow: none !important;
}
.imk-wrap button.imk-pfeil:hover:not(:disabled),
.imk-wrap button.imk-pfeil:focus:not(:disabled) {
	background: var(--imk-honig) !important;
	border-color: var(--imk-honig) !important;
	color: #fff !important;
}
/* Zähler-Buttons und Sterne-Löschen: Theme darf sie nicht als normale Buttons stylen */
.imk-wrap .imk-zaehler-btn {
	background: var(--imk-papier) !important;
	color: var(--imk-tinte) !important;
	border: 1px solid var(--imk-grau-hell) !important;
	text-shadow: none !important;
	background-image: none !important;
}
.imk-wrap .imk-stern-loeschen {
	background: none !important;
	border: 0 !important;
	text-shadow: none !important;
	background-image: none !important;
}
/* Eingabefelder: manche Themes geben ihnen eigene Rahmen-/Fokusfarben */
.imk-wrap input[type="text"],
.imk-wrap input[type="number"],
.imk-wrap input[type="date"],
.imk-wrap select,
.imk-wrap textarea {
	background: #fff !important;
	color: var(--imk-tinte) !important;
	border: 1px solid var(--imk-linie) !important;
	border-radius: var(--imk-radius-klein) !important;
}
.imk-wrap input:focus,
.imk-wrap select:focus,
.imk-wrap textarea:focus {
	border-color: var(--imk-honig) !important;
	outline: 2px solid var(--imk-honig) !important;
	outline-offset: 1px;
}
/* Links im Inhalt: Themes setzen hier gern ihr Blau */
.imk-wrap a {
	color: var(--imk-honig-dunkel);
}
.imk-wrap .imk-standort-kachel,
.imk-wrap .imk-standplan-platz,
.imk-wrap .imk-schnellaktion {
	color: var(--imk-tinte);
}
.imk-wrap .imk-standort-tab.ist-aktiv {
	background: var(--imk-honig) !important;
	color: #fff !important;
	border-color: var(--imk-honig) !important;
}
/* Akzentfarbe für Häkchen/Radios, die das Theme nicht anfasst */
.imk-wrap input[type="checkbox"],
.imk-wrap input[type="radio"] {
	accent-color: var(--imk-honig);
}

/* ==========================================================================
   App-Navigation – jeder Bereich ist eine eigene Ansicht, nicht ein Abschnitt
   auf einer langen Seite. Zwei Ebenen:
     unten fest  = Hauptbereiche (Stände · Neu · Verlauf · Archiv · Export)
     oben Reiter = Untertabs innerhalb eines Bereichs (z. B. welches Formular)
   Beides sind gewöhnliche Links: ohne JavaScript, jede Ansicht hat ihre eigene
   Adresse und lässt sich als Lesezeichen ablegen.
   ========================================================================== */

.imk-appleiste {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	background: var(--imk-papier);
	border-top: 1px solid var(--imk-grau-hell);
	box-shadow: 0 -2px 12px rgba(35, 31, 32, .07);
	/* iPhone: unterhalb der Leiste liegt die Wischgeste-Zone */
	padding-bottom: env(safe-area-inset-bottom, 0);
}
.imk-appleiste-knopf {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .1em;
	min-height: 58px;
	padding: .4em .2em;
	text-decoration: none;
	color: var(--imk-grau);
	border-top: 3px solid transparent;
	min-width: 0;
}
.imk-appleiste-symbol {
	font-size: 1.32em;
	line-height: 1;
}
.imk-appleiste-bild {
	width: 28px;
	height: auto;
	display: block;
}
.imk-appleiste-label {
	font-size: .72em;
	font-weight: 600;
	letter-spacing: .01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}
.imk-appleiste-knopf.ist-aktiv {
	color: var(--imk-honig-dunkel);
	border-top-color: var(--imk-honig);
	background: var(--imk-papier-warm);
}
.imk-appleiste-knopf:hover,
.imk-appleiste-knopf:focus {
	color: var(--imk-honig-dunkel);
	background: var(--imk-papier-warm);
}

/* Platz, damit die feste Leiste nie den letzten Inhalt verdeckt */
.imk-wrap {
	padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
}

/* ------------------------------------------------------------- Untertabs
   Klassische Reiter wie im Gartenglück-Manager: unterstrichener aktiver Reiter
   auf einer durchgehenden Linie. */
.imk-untertabs {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	margin: 0 0 1.3em;
	padding: 0;
	border-bottom: 2px solid var(--imk-grau-hell);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.imk-untertabs::-webkit-scrollbar {
	display: none;
}
.imk-untertab {
	display: inline-flex;
	align-items: center;
	flex: none;
	min-height: 46px;
	/* knapp gehalten, damit die vier Reiter des Bereichs "Neu" auf ein 375px-Display passen,
	   ohne dass der letzte angeschnitten wird */
	padding: 0 .72em;
	margin-bottom: -2px;
	border-bottom: 3px solid transparent;
	color: var(--imk-grau);
	text-decoration: none;
	font-weight: 600;
	font-size: .95em;
	white-space: nowrap;
}
.imk-untertab:hover,
.imk-untertab:focus {
	color: var(--imk-tinte);
}
.imk-untertab.ist-aktiv {
	color: var(--imk-honig-dunkel);
	border-bottom-color: var(--imk-honig);
}

@media (min-width: 640px) {
	/* Am Desktop die Leiste mittig auf Inhaltsbreite halten statt randlos */
	.imk-appleiste {
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		width: min(720px, 100%);
		border-left: 1px solid var(--imk-grau-hell);
		border-right: 1px solid var(--imk-grau-hell);
		border-radius: var(--imk-radius) var(--imk-radius) 0 0;
	}
	.imk-appleiste-label {
		font-size: .8em;
	}
}

/* Theme-Abwehr auch für die Navigation (siehe Block weiter oben) */
.imk-wrap .imk-appleiste-knopf,
.imk-wrap .imk-untertab {
	background-image: none;
}
.imk-wrap .imk-untertab.ist-aktiv,
.imk-wrap .imk-appleiste-knopf.ist-aktiv {
	color: var(--imk-honig-dunkel);
}

/* Sicherheitsnetz: manche Themes blenden Navigationen über eigene Regeln aus. Die App-Leiste
   ist die einzige Navigation, die auf dieser Seite sichtbar bleiben MUSS. */
.imk-wrap .imk-appleiste {
	display: flex !important;
	visibility: visible !important;
}

/* ------------------------------------------------- Varroa-Zählung (Formular) */
.imk-varroa-ergebnis {
	margin: .8em 0 0;
	padding: .7em .9em;
	background: var(--imk-honig-hell);
	border-radius: var(--imk-radius-klein);
	font-size: .95em;
}
.imk-wrap .imk-varroa-ergebnis strong {
	font-size: 1.15em;
	color: var(--imk-honig-dunkel);
}

/* ------------------------------------------------------- Export: Auswahlfelder */
.imk-zeitraum {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.imk-zeitraum label {
	flex: 1 1 140px;
}
.imk-auswahl-kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 1em 0 .4em;
	font-weight: 600;
}
.imk-beutenwahl {
	max-height: 320px;
	overflow-y: auto;
	border: 2px solid var(--imk-grau-hell);
	border-radius: var(--imk-radius-klein);
	padding: 4px;
	background: var(--imk-papier);
}
/* Spezifischer als ".imk-formular-box label", das die Felder sonst untereinander
   stellt - hier gehören Kästchen und Beschriftung nebeneinander. */
.imk-formular-box .imk-beutenwahl-option,
.imk-beutenwahl-option {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	min-height: var(--imk-tippziel);
	padding: 4px 10px;
	border-radius: var(--imk-radius-klein);
	cursor: pointer;
	font-weight: 400;
	font-size: .98em;
	color: var(--imk-tinte);
}
.imk-beutenwahl-option:hover {
	background: var(--imk-honig-hell);
}
.imk-wrap .imk-beutenwahl-option input[type="checkbox"] {
	width: 22px;
	height: 22px;
	flex: none;
	accent-color: var(--imk-honig);
}

/* ------------------------------------------------------------ Ausdruck
   Auf dem Bildschirm eine schlichte, gut lesbare Tabelle; im Ausdruck ohne
   App-Rahmen, damit nur die Doku auf dem Papier landet. */
.imk-druck-leiste {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	margin: 0 0 1.2em;
}
.imk-druck {
	background: #fff;
	border: 1px solid var(--imk-grau-hell);
	border-radius: var(--imk-radius);
	padding: 1.4em 1.2em;
}
.imk-wrap .imk-druck-titel {
	margin: 0 0 .2em;
	font-size: 1.4em;
}
.imk-druck-zeitraum {
	margin: 0 0 1.4em;
	color: var(--imk-grau);
}
.imk-wrap .imk-druck-untertitel {
	margin: 1.8em 0 .5em;
	padding-top: .8em;
	border-top: 2px solid var(--imk-honig-hell);
	font-size: 1.15em;
}
.imk-druck-hinweis {
	margin: 0 0 .8em;
	color: var(--imk-grau);
	font-size: .9em;
}
.imk-druck-kopfdaten,
.imk-druck-tabelle {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.2em;
	font-size: .92em;
}
.imk-druck-kopfdaten th {
	width: 38%;
	text-align: left;
	vertical-align: top;
	padding: .35em .6em .35em 0;
	color: var(--imk-grau);
	font-weight: 600;
}
.imk-druck-kopfdaten td {
	padding: .35em 0;
	vertical-align: top;
}
.imk-druck-tabelle th,
.imk-druck-tabelle td {
	border: 1px solid #ccc;
	padding: .45em .6em;
	text-align: left;
	vertical-align: top;
}
.imk-druck-tabelle thead th {
	background: var(--imk-honig-hell);
	font-weight: 700;
}
.imk-druck-datum {
	white-space: nowrap;
	width: 1%;
}
/* Die Varroa-Tabelle ist sechs Spalten breit - am Handy wird sie seitlich
   gescrollt, statt die ganze Seite zu verschieben. */
.imk-druck-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.imk-druck-scroll .imk-druck-tabelle {
	min-width: 420px;
}

@media print {
	/* Alles ausblenden, was zur Bedienung gehört und nicht aufs Papier soll. */
	.imk-kopf,
	.imk-appleiste,
	.imk-untertabs,
	.imk-fuss,
	.imk-meldung,
	.imk-nur-bildschirm {
		display: none !important;
	}
	.imk-wrap {
		max-width: none;
		padding: 0;
		font-size: 11pt;
	}
	.imk-druck {
		border: 0;
		padding: 0;
	}
	/* Jede Beute beginnt auf einer eigenen Seite, die erste ohne Vorschub. */
	.imk-druck-block {
		break-before: page;
		page-break-before: always;
	}
	.imk-druck-block:first-of-type {
		break-before: auto;
		page-break-before: auto;
	}
	/* Eine Zeile soll nicht über den Seitenumbruch zerrissen werden. */
	.imk-druck-tabelle tr {
		break-inside: avoid;
		page-break-inside: avoid;
	}
	.imk-druck-tabelle thead {
		display: table-header-group;
	}
	/* Auf Papier ist genug Breite - kein Scroll-Rahmen, keine Mindestbreite. */
	.imk-druck-scroll {
		overflow-x: visible;
	}
	.imk-druck-scroll .imk-druck-tabelle {
		min-width: 0;
	}
}

/* Zwischenüberschrift und Summenzeile im Ausdruck */
.imk-wrap .imk-druck-zwischentitel {
	margin: 1.2em 0 .4em;
	font-size: 1em;
	font-weight: 600;
	color: var(--imk-grau);
}
.imk-druck-tabelle .imk-druck-summe td {
	background: var(--imk-honig-hell);
	font-weight: 600;
}

/* ------------------------------------------------------------ Lagerbestand */
.imk-wrap .imk-lager-gruppe {
	margin: 1.2em 0 .2em;
	font-weight: 700;
	font-size: .9em;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--imk-honig-dunkel);
}
.imk-tabelle .imk-lager-gruppenzeile td {
	background: var(--imk-honig-hell);
	font-weight: 700;
}

/* Chronik am Stand: dieselben Karten wie in der Volk-Chronik, zusätzlich der
   Stand-Name als Chip, wenn alle Stände zusammen gezeigt werden. */
.imk-chronik-stand {
	font-size: .8em;
	color: var(--imk-grau);
	background: var(--imk-grau-hell);
	border-radius: 999px;
	padding: .05em .6em;
	margin-left: .5em;
}
.imk-chronik-jahre {
	margin-bottom: .8em;
}

/* ------------------------------------------------------------ Rundgang
   Je Volk eine Zeile: Haken für "war dabei", daneben das Feld für die
   Besonderheit. Am Handy untereinander, ab 640px nebeneinander. */
.imk-rundgang {
	display: flex;
	flex-direction: column;
	gap: .5em;
	margin: .6em 0 1.2em;
}
.imk-rundgang-zeile {
	padding: .6em .8em;
	border: 1px solid var(--imk-grau-hell);
	border-radius: var(--imk-radius-klein);
	background: var(--imk-papier);
}
.imk-formular-box .imk-rundgang-volk,
.imk-rundgang-volk {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	min-height: 34px;
	cursor: pointer;
	font-weight: 600;
	font-size: .98em;
	color: var(--imk-tinte);
}
.imk-wrap .imk-rundgang-volk input[type="checkbox"] {
	width: 22px;
	height: 22px;
	flex: none;
	accent-color: var(--imk-honig);
}
.imk-wrap .imk-rundgang-abweichung {
	margin-top: .35em;
	width: 100%;
	font-size: .95em;
}
/* Einträge einzelner Völker in der Stand-Chronik: schmalerer Balken in Grün,
   damit sie sich auf einen Blick von den Stand-Maßnahmen unterscheiden. */
.imk-chronik-karte.imk-chronik-volk {
	border-left-width: 3px;
	border-left-color: var(--imk-gruen);
}

@media (min-width: 640px) {
	.imk-rundgang-zeile {
		display: flex;
		align-items: center;
		gap: 1em;
	}
	.imk-rundgang-volk {
		flex: 0 0 46%;
	}
	.imk-wrap .imk-rundgang-abweichung {
		margin-top: 0;
		flex: 1;
	}
}

/* ---------------------------------------------------------------- Karte
   Leaflet bringt eigene Stile mit; hier nur die Einbettung und der Marker
   in den Farben der App. Die Höhe ist in vh, damit auf dem Handy genug
   Karte sichtbar bleibt, ohne die Seite zu sprengen. */
.imk-karte {
	height: 62vh;
	min-height: 300px;
	max-height: 560px;
	margin: 0 0 .8em;
	border: 1px solid var(--imk-grau-hell);
	border-radius: var(--imk-radius);
	/* Leaflet zeichnet Kacheln bis in die Ecken - ohne das ragen sie über den Rand */
	overflow: hidden;
	z-index: 0;
}
.imk-radiuswahl {
	margin-bottom: .7em;
}
.imk-wrap .imk-radiuswahl .imk-standort-tab {
	cursor: pointer;
	font-family: inherit;
}
.imk-karte-punkt {
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--imk-honig);
	border: 3px solid #fff;
	box-shadow: 0 1px 4px rgba(35, 31, 32, .45);
}
/* Popup an die Schrift der App angleichen */
.imk-wrap + .leaflet-popup .leaflet-popup-content,
.leaflet-popup-content {
	font-size: .95em;
	line-height: 1.45;
}

/* Zugeklappte Völker-Liste am Ende der Stand-Ansicht. Der Inhalt braucht
   Innenabstand, den das Formular-Kästchen selbst nicht mitbringt. */
.imk-liste-aufklappbar {
	margin-top: 1.6em;
}
.imk-liste-aufklappbar[open] > summary {
	border-bottom: 1px solid var(--imk-grau-hell);
}
.imk-liste-aufklappbar > *:not(summary) {
	padding-left: 1em;
	padding-right: 1em;
}
.imk-liste-aufklappbar > form {
	padding-bottom: 1.1em;
}

/* Art-Auswahl je Volk – erscheint erst, wenn eine Besonderheit eingetragen ist */
.imk-wrap .imk-rundgang-art {
	margin-top: .35em;
	width: 100%;
	font-size: .95em;
}
.imk-wrap .imk-rundgang-art[hidden] {
	display: none !important;
}

/* Maßnahmen-Maske am Volk: die Blöcke je Maßnahme heben sich leicht ab,
   damit erkennbar ist, was zur gewählten Maßnahme gehört. */
.imk-massnahme-block[hidden] {
	display: none !important;
}
.imk-massnahme-block {
	margin: .2em 0 .4em;
	padding: .9em 1em;
	border-left: 3px solid var(--imk-honig-hell);
	background: var(--imk-papier-warm);
	border-radius: var(--imk-radius-klein);
}
.imk-massnahme-block .imk-gruppe:first-child {
	margin-top: 0;
}
.imk-massnahme-block .imk-freitextfeld[hidden] {
	display: none !important;
}

/* ------------------------------------------------------- Theme-Abwehr: hidden
   Das Ein- und Ausblenden der Maßnahmen-Blöcke hängt am hidden-Attribut. Etliche
   Themes setzen auf Elemente im Inhaltsbereich eine eigene display-Regel und
   heben hidden damit auf - dann stünden alle Blöcke gleichzeitig da und die
   Maske sähe aus, als würde sie nicht umschalten. Deshalb hier für den ganzen
   Plugin-Bereich unmissverständlich. */
.imk-wrap [hidden] {
	display: none !important;
}

/* Einordnung des Zählergebnisses: Farbe wie die Zustandsampel, damit "gelb"
   und "rot" hier dasselbe heißen wie am Volk. */
.imk-varroa-urteil {
	display: block;
	margin-top: .2em;
	font-size: .9em;
	font-weight: 600;
}
.imk-varroa-urteil[hidden] {
	display: none !important;
}
.imk-urteil-gruen { color: #2E7D32; }
.imk-urteil-gelb  { color: #8D6E00; }
.imk-urteil-rot   { color: var(--imk-rot); }

/* ------------------------------------------------------------- Zählgang
   Dasselbe Raster wie die Standansicht, nur mit einem Zahlenfeld je Beute.
   Das Feld ist bewusst gross: eingetippt wird mit klebrigen Fingern. */
.imk-standplan-zaehlen .imk-standplan-platz {
	gap: .35em;
	min-height: 96px;
}
.imk-wrap .imk-zaehlfeld-milben {
	width: 4.5em;
	text-align: center;
	font-size: 1.15em;
	font-weight: 700;
	padding: .3em .2em;
	min-height: 44px;
}
.imk-zaehlplatz-ergebnis {
	font-size: .8em;
	font-weight: 700;
	min-height: 1.2em;
}
.imk-zaehlgang-summe {
	margin: 1.2em 0 .6em;
	padding: .8em 1em;
	border-radius: var(--imk-radius-klein);
	background: var(--imk-honig-hell);
	font-weight: 600;
}
.imk-standplan-knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: .6em;
}

/* ------------------------------------------------- Völker-Auswahl, drei Sichten
   Dieselben Felder, nur anders angeordnet. Im Raster stehen die Beuten wie am
   Stand: zwei je Bock, deshalb ein enger Spalten- und ein weiter Zeilenabstand –
   dasselbe Mittel wie beim Standplan. */
/* Sicht "Wie sie stehen": dieselbe Linie wie im Stand-Raster. Die Beuten stehen
   untereinander, je zwei dicht zusammen ein Bock, dann eine groessere Luecke.
   Die Bock-Luecke macht nth-child: die Plaetze kommen luckenlos in der
   Reihenfolge der Aufstellung, leere Haelften eingeschlossen - jeder ungerade
   Platz beginnt also einen neuen Bock. */
.imk-rundgang.ist-raster {
	display: flex;
	flex-direction: column;
	gap: 3px;
	max-width: 460px;
}
.imk-rundgang.ist-raster > *:nth-child(odd):not(:first-child) {
	margin-top: .8em;
}
.imk-rundgang.ist-raster .imk-rundgang-zeile {
	display: flex;
	align-items: center;
	gap: .5em;
	text-align: left;
}
.imk-rundgang.ist-raster .imk-rundgang-volk {
	flex: 0 0 auto;
	gap: .4em;
}
.imk-rundgang.ist-raster .imk-rundgang-id {
	display: none;
}
/* Das Feld fuer die Besonderheit nimmt den Rest der Zeile. */
.imk-wrap .imk-rundgang.ist-raster .imk-rundgang-abweichung {
	flex: 1 1 auto;
	min-width: 0;
}
.imk-wrap .imk-rundgang-nr {
	font-weight: 700;
	font-size: 1.2em;
	line-height: 1.1;
}
.imk-rundgang-id {
	font-size: .78em;
	color: var(--imk-grau);
}
/* Leere Bockhälfte: nur im Raster sinnvoll, in Liste und Suche im Weg. */
.imk-rundgang-leer {
	background: repeating-linear-gradient(
		45deg, transparent, transparent 6px,
		rgba(35, 31, 32, .035) 6px, rgba(35, 31, 32, .035) 12px
	);
	color: #B5ADA2;
	font-size: .72em;
	min-height: 22px;
	padding: 0 .7em;
	border: 1px dashed var(--imk-grau-hell);
	border-radius: 8px;
	display: flex;
	align-items: center;
}
.imk-rundgang:not(.ist-raster) .imk-rundgang-leer {
	display: none;
}
.imk-wahlsichten {
	margin-bottom: .6em;
}
.imk-wrap .imk-wahlsichten .imk-standort-tab {
	cursor: pointer;
	font-family: inherit;
}
.imk-wahlsuche[hidden] {
	display: none !important;
}
.imk-rundgang-zeile[hidden] {
	display: none !important;
}
.imk-wahltreffer[hidden] {
	display: none !important;
}

/* --------------------------------------------------- Einträge zurücknehmen */
.imk-chronik-fuss {
	margin: .5em 0 0;
	text-align: right;
}
.imk-loeschen-link {
	font-size: .8em;
	color: var(--imk-grau);
	text-decoration: none;
	border-bottom: 1px dotted var(--imk-grau-hell);
}
.imk-loeschen-link:hover,
.imk-loeschen-link:focus {
	color: var(--imk-rot);
	border-bottom-color: var(--imk-rot);
}
.imk-loeschen {
	border-color: var(--imk-rot);
	border-left: 5px solid var(--imk-rot);
}
.imk-loeschen .imk-erfassen-titel {
	background: var(--imk-rot-hell);
	color: var(--imk-rot);
}
.imk-loeschen-knoepfe {
	display: flex;
	gap: .6em;
	flex-wrap: wrap;
	align-items: center;
}
.imk-wrap .imk-button-warnung,
.imk-wrap button.imk-button-warnung {
	background: var(--imk-rot) !important;
	border-color: var(--imk-rot) !important;
}