/**
 * 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;
	/*
	 * ❗ Diese beiden standen eine Weile als "var(--imk-rot)" auf sich selbst –
	 * eine Variable, die sich selbst benutzt, ist ungültig. Damit fiel JEDES Rot
	 * der App aus: Fehlermeldungen, die kritische Ampel, der Löschen-Knopf. Es
	 * fiel nicht auf, weil ungültige Farben nichts malen, statt zu schreien.
	 * Die Werte sind die der CI-Palette aus v1.9.0.
	 */
	--imk-rot:          #A32B23;
	--imk-rot-hell:     #FBE9E7;

	--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-schwarmmarke,
.imk-kreis-platz .imk-kachel-koenigin { 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: var(--imk-papier);
	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;
}
/* In der Formularbox stehen Labels sonst als Spalte (Text ueber Feld) - hier
   gehoert der Haken neben den Namen. */
.imk-formular-box .imk-kategoriewahl {
	flex-direction: row;
	font-weight: 600;
	font-size: 1em;
	color: var(--imk-tinte);
}
.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);
}

/* ------------------------------------------------------------ Honig-Kasten
   Honig ist im Lager eine Ernte (Jahr und Sorte), kein Posten mit freier
   Einheit. Der Kasten fragt in der Reihenfolge, in der man am Regal steht:
   welche Ernte, wo (Eimer oder Glas), wie viel. Die Schritte erscheinen
   nacheinander (imk-script.js), bleiben aber alle stehen - so laesst sich
   ein frueherer Schritt korrigieren, ohne von vorn anzufangen. */
.imk-honig { border-color: var(--imk-honig); }
.imk-honig .imk-lagerhistorie {
	display: flex;
	flex-direction: column;
	gap: .6em;
}
/* Der Kasten ist hoeher als eine Kategorie-Tabelle: Ernten, Zaehlen, Verlauf.
   1200px (Standard fuer .imk-bf-menue) wuerden ihn unten abschneiden. */
.imk-honig .imk-lagerhistorie.ist-offen { max-height: 4000px; }
.imk-honig .imk-lagerhistorie > .imk-info { margin: .2em 0 0; }

/* Bestand je Ernte, wie zuletzt gezaehlt. */
.imk-honig-ernten { display: flex; flex-direction: column; }
.imk-honig-ernte {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: .1em .8em;
	align-items: center;
	padding: .55em 0;
	border-top: 1px solid var(--imk-grau-hell);
}
.imk-honig-ernte:first-child { border-top: 0; }
.imk-honig-ernte-name { font-weight: 700; }
.imk-honig-ernte-menge { font-size: .88em; color: var(--imk-grau); grid-column: 1; }
.imk-honig-ernte-menge b { color: var(--imk-tinte); }
.imk-honig-ernte-summe { font-size: .88em; font-weight: 700; color: var(--imk-honig-dunkel); grid-column: 1; }
.imk-honig-ernte-summe small { font-weight: 400; color: var(--imk-grau); margin-left: .4em; }
.imk-honig-ernte.ist-leer .imk-honig-ernte-name { color: var(--imk-grau); font-weight: 600; }
.imk-wrap .imk-honig-zaehlknopf { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
.imk-honig-gesamt {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1em;
	margin: 0;
	padding: .6em .8em;
	background: var(--imk-honig-hell);
	border-radius: var(--imk-radius-klein);
	font-size: .92em;
}
.imk-honig-gesamt small { display: block; color: var(--imk-grau); font-size: .85em; }
.imk-honig-gesamt b { font-size: 1.2em; white-space: nowrap; }

/* Das Zaehlen: drei Schritte. */
/* Mit .imk-honig davor, sonst gewinnen die 1200px von .imk-bf-menue.ist-offen
   (steht weiter unten in der Datei) - und die Knoepfe unten waeren abgeschnitten. */
.imk-honig .imk-honig-zaehlen.ist-offen { max-height: 2500px; }
/* Der Strich ueber dem Zaehlen sitzt am Formular, nicht am ersten fieldset: Dort
   liefe er als Rahmen neben der legend weiter. Zugeklappt ist er unsichtbar (opacity 0). */
.imk-honig-zaehlen { border-top: 2px solid var(--imk-honig); }
.imk-honig-schritt {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: .55em;
}
.imk-honig-schritt + .imk-honig-schritt { margin-top: 1em; }
.imk-honig-schritt:first-of-type { padding-top: .9em; }
.imk-honig-schritt legend {
	display: flex;
	align-items: center;
	gap: .5em;
	padding: 0;
	margin: 0 0 .1em;
	font-weight: 700;
	font-size: .98em;
	color: var(--imk-tinte);
}
.imk-honig-nr {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	background: var(--imk-honig);
	color: #fff;
	font-size: .8em;
	flex: none;
}
.imk-honig-chips { display: flex; flex-wrap: wrap; gap: .5em; }
.imk-honig-chip { position: relative; display: inline-flex; }
.imk-wrap .imk-honig-chip input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}
.imk-honig-chip span {
	display: inline-flex;
	align-items: center;
	min-height: var(--imk-tippziel);
	padding: .5em 1em;
	border: 1.5px solid var(--imk-linie-stark);
	border-radius: var(--imk-radius-klein);
	background: var(--imk-papier);
	font-weight: 600;
	color: var(--imk-tinte);
	cursor: pointer;
}
.imk-honig-chip input:checked + span {
	background: var(--imk-honig);
	border-color: var(--imk-honig);
	color: #fff;
}
.imk-honig-chip input:focus-visible + span { outline: 2px solid var(--imk-honig); outline-offset: 2px; }
.imk-honig-chip.ist-neu span { border-style: dashed; color: var(--imk-honig-dunkel); }
.imk-honig-chip.ist-neu input:checked + span { border-style: solid; color: #fff; }

.imk-honig-wo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6em; }
.imk-honig-wo-option { position: relative; display: flex; }
.imk-wrap .imk-honig-wo-option input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}
.imk-honig-wo-option span {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .15em;
	min-height: 64px;
	padding: .5em .4em;
	border: 2px solid var(--imk-linie-stark);
	border-radius: var(--imk-radius);
	background: var(--imk-papier);
	font-weight: 700;
	color: var(--imk-tinte);
	text-align: center;
	cursor: pointer;
}
.imk-honig-wo-option span small { font-weight: 400; font-size: .78em; color: var(--imk-grau); }
.imk-honig-wo-option input:checked + span { border-color: var(--imk-honig); background: var(--imk-honig-hell); }
.imk-honig-wo-option input:checked + span::before { content: "\2713"; color: var(--imk-gruen); font-weight: 700; }
.imk-honig-wo-option input:focus-visible + span { outline: 2px solid var(--imk-honig); outline-offset: 2px; }

.imk-honig-block {
	display: flex;
	flex-direction: column;
	gap: .5em;
	padding: .7em .8em;
	border: 1px solid var(--imk-linie);
	border-radius: var(--imk-radius-klein);
	background: var(--imk-papier-warm);
}
.imk-honig-block-titel { margin: 0; font-weight: 700; font-size: .92em; }
.imk-honig-block .imk-hinweis { margin: 0; }
.imk-honig-zeile { display: flex; align-items: center; flex-wrap: wrap; gap: .5em .6em; }
.imk-honig-zeile label {
	display: flex;
	align-items: center;
	gap: .45em;
	font-size: .92em;
	font-weight: 600;
	color: var(--imk-grau);
}
.imk-wrap .imk-honig-zeile input[type="text"],
.imk-wrap .imk-honig-zeile input[type="date"],
.imk-wrap .imk-honig-zeile select {
	font-size: 18px;
	font-family: inherit;
	color: var(--imk-tinte);
	min-height: var(--imk-tippziel);
	padding: .4em .5em;
	border: 1px solid var(--imk-linie);
	border-radius: var(--imk-radius-klein);
	background: var(--imk-papier);
	font-weight: 700;
}
.imk-wrap .imk-honig-zeile input[type="text"] { width: 5.4em; text-align: center; }
.imk-wrap .imk-honig-zeile input[name="neu_sorte_text"] { width: 10em; text-align: left; font-weight: 600; }
.imk-wrap .imk-honig-zeile select { font-weight: 600; }
.imk-wrap .imk-honig-zeile input:focus,
.imk-wrap .imk-honig-zeile select:focus { outline: 2px solid var(--imk-honig); outline-offset: 1px; }
.imk-honig-plus { font-size: 1.2em; color: var(--imk-grau); }
.imk-honig-ergibt { margin: 0; font-size: .95em; }
.imk-honig-ergibt b { color: var(--imk-honig-dunkel); }
.imk-honig-zusammen {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1em;
	margin: 0;
	padding: .7em .8em;
	background: var(--imk-honig-hell);
	border-radius: var(--imk-radius-klein);
	font-weight: 700;
}
.imk-honig-zusammen small { display: block; font-weight: 400; color: var(--imk-grau); font-size: .8em; }
.imk-honig-zusammen b { font-size: 1.25em; color: var(--imk-honig-dunkel); white-space: nowrap; }
.imk-honig-stichtag label { font-size: .92em; }
.imk-honig-aktionen { display: flex; flex-wrap: wrap; gap: .6em; padding-top: .2em; }
.imk-honig-verlauf summary {
	cursor: pointer;
	font-weight: 700;
	font-size: .92em;
	color: var(--imk-grau);
	min-height: 44px;
	display: flex;
	align-items: center;
	gap: .4em;
	list-style: none;
}
.imk-honig-verlauf summary::-webkit-details-marker { display: none; }
.imk-honig-verlauf summary::before {
	content: "\25B8";
	color: var(--imk-honig);
	transition: transform .2s ease;
}
.imk-honig-verlauf[open] summary::before { transform: rotate(90deg); }
.imk-honig-verlauf .imk-lager-einheit { display: block; }

/* ------------------------------------------------------------- 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 input[type="email"],
.imk-formular-box input[type="search"],
.imk-formular-box input[type="datetime-local"],
.imk-formular-box input[type="password"],
.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: var(--imk-papier);
	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;
}

/* -------------------------------------------------------------- Einstellungen
   Der Weg hinein: am Handy das Zahnrad rechts im Kopf (nur der Stände-Bereich
   trägt den Kopf) und der Link neben "Abmelden" unter dem Inhalt; am Desktop
   der Eintrag unten in der Leiste. Ein sechster Reiter passte am Handy nicht. */
.imk-kopf-zahnrad {
	margin-left: auto;
	width: 44px;
	height: 44px;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--imk-linie-stark);
	background: var(--imk-papier);
	text-decoration: none;
}
.imk-wrap .imk-kopf-zahnrad-icon { width: 26px; height: 26px; display: block; }
.imk-fusslinks {
	text-align: center;
	margin: 2em 0 0;
	display: flex;
	justify-content: center;
	gap: 1.5em;
}
/* Zwei Formulare in einem Kasten: E-Mail und Passwort, getrennt durch eine Linie. */
.imk-formular-box.imk-zugang form + form {
	border-top: 1px solid var(--imk-linie);
	padding-top: 1em;
}
.imk-abo-unterkopf {
	margin: .2em 0 0;
	font-weight: 700;
	font-size: .92em;
}
.imk-abo-anleitung {
	margin: 0;
	padding-left: 1.3em;
	font-size: .9em;
	line-height: 1.5;
}
.imk-abo-anleitung li { margin: 0 0 .25em; }

/* -------------------------------------------------------------- Kalender-Abo
   Die Adresse ist ein Eingabefeld, das niemand tippt, nur kopiert: so lässt sie
   sich auch von Hand markieren, wo das Kopieren per Knopf nicht erlaubt ist. */
.imk-abo-innen {
	padding: .9em 1em 1.1em;
	display: flex;
	flex-direction: column;
	gap: .8em;
}
.imk-abo-innen > .imk-hinweis { margin-top: 0; }
.imk-abo {
	display: flex;
	gap: .5em;
	align-items: stretch;
}
.imk-wrap .imk-abo-adresse {
	flex: 1 1 auto;
	min-width: 0;
	min-height: var(--imk-tippziel);
	padding: .6em .7em;
	border: 1px solid var(--imk-linie);
	border-radius: var(--imk-radius-klein);
	background: var(--imk-papier);
	font-size: 15px;
	font-family: inherit;
	color: var(--imk-tinte);
	text-overflow: ellipsis;
}
.imk-abo .imk-button {
	flex: none;
	padding: .7em 1em;
}
.imk-abo-stand {
	font-size: .84em;
	color: var(--imk-grau);
	margin: 0;
}
.imk-abo-stand b { color: var(--imk-tinte); }
/* Spezifischer als ".imk-formular-box form", das jedes Formular in der Box
   senkrecht stapelt und einrückt – hier stehen zwei kleine Links nebeneinander. */
.imk-formular-box form.imk-abo-zeile {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: .1em 1em;
	flex-wrap: wrap;
	margin: 0;
	padding: .4em 0 0;
	border-top: 1px solid var(--imk-linie);
}
.imk-wrap .imk-abo-zeile .imk-untertab {
	background: none;
	border: 0;
	margin: 0;
	padding: 0 .2em;
	min-height: 44px;
	font: inherit;
	font-weight: 600;
	font-size: .9em;
	color: var(--imk-grau);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: .2em;
}
.imk-abo-innen code {
	font-size: .95em;
	background: var(--imk-grau-hell);
	padding: 0 .3em;
	border-radius: 4px;
}

/* -------------------------------------------------------------- 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: var(--imk-papier);
	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: var(--imk-papier);
	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: var(--imk-papier);
	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: var(--imk-papier) !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 input[type="email"],
.imk-wrap input[type="search"],
.imk-wrap input[type="datetime-local"],
.imk-wrap input[type="password"],
.imk-wrap select,
.imk-wrap textarea {
	background: var(--imk-papier) !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: var(--imk-papier);
	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.
	   Mit .imk-wrap davor: Die Theme-Abwehr weiter oben erzwingt für die Leiste
	   "display: flex !important" mit genau dieser Spezifität – ohne den Vorsatz
	   verlor die Druckregel und die Leiste stand unten auf jedem PDF
	   (Rückmeldung 11.09.2026). */
	.imk-kopf,
	.imk-appleiste,
	.imk-wrap .imk-appleiste,
	.imk-wrap .imk-kopf,
	.imk-untertabs,
	.imk-fuss,
	.imk-meldung,
	.imk-nur-bildschirm,
	.imk-wrap .imk-nur-bildschirm,
	.imk-standtun,
	.imk-bf-menue {
		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;
}
/* Lager-Ausdruck: Zaehldatum unter der Zahl, wenn nicht am Stichtag selbst gezaehlt wurde. */
.imk-druck-tabelle .imk-druck-gezaehlt {
	font-size: .8em;
	color: var(--imk-grau);
	white-space: nowrap;
}
.imk-wrap .imk-druck-fussnote {
	margin: .8em 0 0;
	font-size: .84em;
	color: var(--imk-grau);
	line-height: 1.45;
}

/* ------------------------------------------------------------ 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); }
.imk-urteil-kontrolle { color: #4A6B8A; }

/* ------------------------------------------------------------- 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;
}


/* ------------------------------------------------------------------
   v1.37.0: gezeichnete Zeichen, Schublade, Behandlungsbilanz
   ------------------------------------------------------------------ */

/* Die Zeichen aus imk-icons.php: gleich groß wie die Emoji davor. */
.imk-wrap .imk-bf-aktion-symbol svg,
.imk-wrap .imk-icon {
	width: 1.7em;
	height: 1.7em;
	display: block;
	flex: none;
}
.imk-wrap .imk-bf-aktion-klein {
	display: block;
	font-size: .78em;
	color: var(--imk-grau);
	margin-top: .15em;
	line-height: 1.25;
}
.imk-wrap .imk-bf-aktion.ist-schublade-drin { border-color: var(--imk-gruen); background: var(--imk-gruen-hell); }
.imk-wrap .imk-bf-aktion.ist-faellig { border-color: var(--imk-honig); background: var(--imk-honig-hell); }

/* Hinweis in einer Maske, was schon feststeht. */
.imk-wrap .imk-vorbelegt-hinweis {
	background: var(--imk-papier-warm);
	border-left: 3px solid var(--imk-honig);
	padding: .4em .7em;
	border-radius: 0 var(--imk-radius-klein) var(--imk-radius-klein) 0;
}

/* Urteil "Behandlungsfall / Erfolgskontrolle": eine ruhige Farbe, weder Alarm noch Entwarnung. */
.imk-wrap .imk-urteil-kontrolle {
	background: #E6EDF3;
	color: #4A6B8A;
}

/* Bilanz unter einer Behandlung: vorher – Behandlungsfall – nachher */
.imk-wrap .imk-bilanz {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .4em;
	margin: .5em 0 .2em;
}
.imk-wrap .imk-bilanz-kachel {
	background: var(--imk-papier);
	border: 1px solid var(--imk-linie);
	border-radius: var(--imk-radius-klein);
	padding: .4em .5em;
	text-align: center;
	line-height: 1.25;
}
.imk-wrap .imk-bilanz-kachel small { display: block; color: var(--imk-grau); font-size: .75em; }
.imk-wrap .imk-bilanz-kachel b { display: block; font-size: 1.25em; font-variant-numeric: tabular-nums; margin: .1em 0; }
.imk-wrap .imk-bilanz-kachel.ist-fall b { color: #4A6B8A; }
.imk-wrap .imk-bilanz-kachel.ist-offen b { color: var(--imk-linie-stark); }
.imk-wrap .imk-bilanz-fuss { color: var(--imk-grau); font-size: .85em; margin: 0 0 .3em; }

/* ------------------------------------------------------------------
   v1.38.0: Deckblatt für die Ökokontrolle, Standort-Verlauf im Ausdruck
   ------------------------------------------------------------------ */
.imk-wrap .imk-deckblatt {
	background: var(--imk-papier);
	border: 1px solid var(--imk-linie);
	border-radius: var(--imk-radius);
	padding: 1.4em 1.4em 1.2em;
	margin: 0 0 1.2em;
}
.imk-wrap .imk-deckblatt-marke {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	border-bottom: 2px solid var(--imk-tinte);
	padding-bottom: .4em;
	margin: 0 0 1.6em;
}
.imk-wrap .imk-deckblatt-marke strong { font-size: 1.15em; }
.imk-wrap .imk-deckblatt-marke span { color: var(--imk-grau); font-size: .9em; }
.imk-wrap .imk-deckblatt-ober {
	font-family: system-ui, sans-serif;
	font-size: .75em;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--imk-grau);
	margin: 0;
}
.imk-wrap .imk-deckblatt-titel {
	font-size: 1.9em;
	font-weight: normal;
	margin: .1em 0 .1em;
	line-height: 1.15;
}
.imk-wrap .imk-deckblatt-zeitraum { font-size: 1.1em; margin: 0; }
.imk-wrap .imk-deckblatt-unter { color: var(--imk-grau); margin: .2em 0 1.4em; }
.imk-wrap .imk-deckblatt-betrieb { margin-bottom: 1.2em; }
.imk-wrap .imk-deckblatt-inhalt { margin: .3em 0 1.6em; padding-left: 1.2em; }
.imk-wrap .imk-deckblatt-inhalt li { margin: .2em 0; }
.imk-wrap .imk-deckblatt-unterschrift {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2em;
	margin-top: 3em;
}
.imk-wrap .imk-deckblatt-unterschrift span {
	border-top: 1px solid var(--imk-tinte);
	padding-top: .3em;
	font-family: system-ui, sans-serif;
	font-size: .8em;
	color: var(--imk-grau);
}
.imk-wrap .imk-deckblatt-erzeugt {
	text-align: right;
	font-family: system-ui, sans-serif;
	font-size: .75em;
	color: var(--imk-grau);
	margin: 1em 0 0;
}
.imk-wrap .imk-druck-standortzeile { margin: 0 0 .25em; }
.imk-wrap .imk-druck-standortzeile:last-child { margin-bottom: 0; }

@media print {
	.imk-wrap .imk-deckblatt {
		border: 0;
		border-radius: 0;
		padding: 2cm 0 0;
		min-height: 24cm;
		break-after: page;
		page-break-after: always;
	}
}

/* ------------------------------------------------------------------
   v1.39.0: Kalender
   ------------------------------------------------------------------ */
.imk-wrap .imk-kal-monat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 .5em;
}
.imk-wrap .imk-kal-monat strong { font-size: 1.15em; }
.imk-wrap .imk-kal-pfeil {
	display: inline-grid;
	place-items: center;
	width: var(--imk-tippziel);
	height: var(--imk-tippziel);
	border: 1px solid var(--imk-linie-stark);
	border-radius: 50%;
	background: var(--imk-papier);
	color: var(--imk-tinte);
	text-decoration: none;
	font-size: 1.4em;
}
.imk-wrap .imk-kal-wochentage,
.imk-wrap .imk-kal-tage {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: .25em;
}
.imk-wrap .imk-kal-wochentage span {
	text-align: center;
	font-family: system-ui, sans-serif;
	font-size: .72em;
	color: var(--imk-grau);
	text-transform: uppercase;
	letter-spacing: .04em;
}
.imk-wrap .imk-kal-tag {
	min-height: 54px;
	border: 1px solid var(--imk-linie);
	border-radius: 8px;
	background: var(--imk-papier);
	padding: .2em .25em;
	text-decoration: none;
	color: var(--imk-tinte);
	display: flex;
	flex-direction: column;
	gap: .15em;
	font-size: .85em;
}
.imk-wrap .imk-kal-tag.ist-leer { border: 0; background: transparent; }
.imk-wrap .imk-kal-tag.ist-heute { border: 2px solid var(--imk-tinte); }
.imk-wrap .imk-kal-tag.ist-gewaehlt { background: var(--imk-honig-hell); border-color: var(--imk-honig); }
.imk-wrap .imk-kal-nr { font-weight: bold; font-variant-numeric: tabular-nums; }
.imk-wrap .imk-kal-tag.ist-heute .imk-kal-nr { color: var(--imk-honig-dunkel); }
.imk-wrap .imk-kal-punkte { display: flex; flex-wrap: wrap; gap: 2px; }
.imk-wrap .imk-kal-punkt {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--imk-honig);
	flex: none;
}
.imk-wrap .imk-kal-punkt.ist-chronik { background: var(--imk-gruen); }
.imk-wrap .imk-kal-heute {
	font-family: system-ui, sans-serif;
	font-size: .7em;
	color: var(--imk-grau);
	font-weight: normal;
	margin-left: .4em;
}
.imk-wrap .imk-kal-eintrag {
	display: flex;
	gap: .55em;
	align-items: flex-start;
	padding: .5em 0;
	border-top: 1px solid var(--imk-linie);
}
.imk-wrap .imk-kal-eintrag:first-of-type { border-top: 0; }
.imk-wrap .imk-kal-eintrag > .imk-kal-punkt { width: 9px; height: 9px; margin-top: .45em; }
.imk-wrap .imk-kal-eintrag-text { flex: 1 1 auto; min-width: 0; }
.imk-wrap .imk-kal-eintrag b { display: block; }
.imk-wrap .imk-kal-eintrag small { display: block; color: var(--imk-grau); font-size: .82em; }
.imk-wrap .imk-kal-knoepfe {
	display: flex;
	flex-direction: column;
	gap: .3em;
	flex: none;
	margin: 0;
}
.imk-wrap .imk-kal-knoepfe .imk-untertab { min-height: 40px; white-space: nowrap; }
.imk-wrap .imk-kal-serie {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .5em;
}
.imk-wrap .imk-kal-serie[hidden] { display: none; }
.imk-wrap .imk-kal-ueberfaellig { border-left: 4px solid var(--imk-warn-gelb); }
@media print {
	.imk-wrap .imk-kalender, .imk-wrap .imk-kal-knoepfe { display: none !important; }
}

.imk-wrap .imk-kal-eintragen {
	display: inline-block;
	margin-top: .3em;
	color: var(--imk-honig-dunkel);
	font-size: .9em;
}
.imk-wrap [data-termin-fuer][hidden] { display: none !important; }

/* Gezeichnetes Zeichen in der Leiste, gleich groß wie das Bienen-Bild. */
.imk-wrap .imk-appleiste-icon {
	width: 28px !important;
	height: 28px !important;
	display: block;
	margin: 0 auto;
}

.imk-wrap .imk-kal-art {
	font-family: system-ui, sans-serif;
	font-size: .85em;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--imk-gruen);
}
.imk-wrap .imk-kal-art.ist-termin { color: var(--imk-honig-dunkel); }
.imk-wrap .imk-kal-eintrag .imk-chronik-fuss { margin: .4em 0 0; }

.imk-wrap .imk-bearbeiten-link {
	color: var(--imk-honig-dunkel);
	margin-right: .6em;
}
.imk-wrap .imk-bearbeiten { border-left: 4px solid var(--imk-honig); }

/* Stift an der Stand-Kachel */
.imk-wrap .imk-standort-kachel-rahmen { position: relative; }
.imk-wrap .imk-standort-kachel-rahmen .imk-standort-kachel { padding-right: 3.2em; }
.imk-wrap .imk-standort-stift {
	position: absolute;
	top: .55em;
	right: .55em;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--imk-papier-warm);
	border: 1px solid var(--imk-linie);
	color: var(--imk-honig-dunkel);
	text-decoration: none;
	font-size: 1.15em;
}
.imk-wrap .imk-standort-stift:hover,
.imk-wrap .imk-standort-stift:focus { background: var(--imk-honig-hell); border-color: var(--imk-honig); }


/* ==================================================================
   v1.41.0: Desktop
   Dieselbe Seite, anders angeordnet: ab 1000 px Breite steht die Leiste
   links, am Stand das Raster links und die Chronik rechts, im Kalender der
   Monat links und der Tag rechts. Am Handy ändert dieser Block nichts –
   alles darin steht in der Medienabfrage.
   ================================================================== */
.imk-nur-desktop { display: none !important; }
.imk-kal-text { display: none; }

@media (min-width: 900px) {
	body { padding: 0; }

	.imk-nur-desktop { display: block !important; }
	.imk-nur-handy { display: none !important; }
	.imk-kal-text { display: block; }

	.imk-wrap {
		max-width: 1320px;
		font-size: 17px;
		display: grid;
		grid-template-columns: 232px minmax(0, 1fr);
		column-gap: 2.2em;
		align-items: start;
		padding: 0 1.6em 3em 0;
	}
	.imk-wrap > * { grid-column: 2; min-width: 0; }

	/*
	 * Die linke Spalte ist EIN Element: die Leiste, die den Kopf (Biene, Name)
	 * als ::before mitbringt. Vorher war der Kopf ein eigenes Grid-Element in
	 * Zeile 1 und die Leiste begann in Zeile 2 – aber Zeile 1 wird so hoch wie
	 * das erste Inhaltselement daneben, und im Kalender ist das das ganze Jahr:
	 * Die Leiste stand dann erst 5000 Pixel weiter unten und war "verschwunden"
	 * (Rückmeldung 13.09.2026).
	 */
	.imk-wrap > .imk-kopf { display: none; }
	.imk-wrap > .imk-appleiste,
	.imk-wrap .imk-appleiste {
		grid-column: 1;
		grid-row: 1 / span 1000;
		align-self: start;
		/*
		 * Fest am linken Fensterrand, volle Höhe (v1.74.1). Klebend (sticky) endete
		 * sie über dem unteren Rand, stand 13 px vom linken Rand ab und rutschte am
		 * Seitenende mit dem Inhalt hoch (Rückmeldung 06.10.2026). Die erste
		 * Grid-Spalte bleibt als Platzhalter stehen, der Inhalt rückt also nicht nach.
		 */
		position: fixed;
		top: 0;
		/* Am breiten Bildschirm steht der Inhalt mittig (max. 1320 px) – die Leiste bleibt an seiner linken Kante. */
		left: max(0px, calc((100% - 1320px) / 2));
		right: auto;
		bottom: 0;
		transform: none;
		width: 245px;
		height: 100vh;
		min-height: 0;
		box-sizing: border-box;
		overflow-y: auto;
		display: flex !important;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		gap: .2em;
		padding: .8em .6em 1em;
		background: var(--imk-papier);
		border: 0;
		border-right: 1px solid var(--imk-linie);
		box-shadow: none;
		z-index: 10;
	}
	.imk-wrap .imk-appleiste::before {
		content: "Imkerei-Doku";
		display: block;
		padding: 1em .6em .8em 64px;
		margin: 0 .2em .6em;
		min-height: 60px;
		font-family: Georgia, "Times New Roman", serif;
		font-size: 1.25em;
		color: var(--imk-honig-dunkel);
		background: url(biene.png) no-repeat left center / 52px auto;
		border-bottom: 3px solid var(--imk-honig);
	}
	.imk-wrap .imk-appleiste-knopf {
		flex: none;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		gap: .7em;
		padding: .55em .8em;
		border-radius: var(--imk-radius-klein);
		border-top: 0 !important;
		font-size: 1em;
		min-height: 48px;
	}
	.imk-wrap .imk-appleiste-knopf.ist-aktiv {
		background: var(--imk-honig-hell);
		border-top: 0 !important;
	}
	.imk-wrap .imk-appleiste-symbol { font-size: 1.2em; width: 30px; display: grid; place-items: center; }
	.imk-wrap .imk-appleiste-bild { width: 30px; height: auto; }
	.imk-wrap .imk-appleiste-icon { width: 30px; height: 30px; }
	.imk-wrap .imk-appleiste-label { font-size: 1em; }
	/* Einstellungen und Abmelden sitzen zusammen unten in der Leiste, das Zahnrad über dem Ausgang. */
	.imk-wrap .imk-appleiste-einstellungen { margin-top: auto; }
	/* Nur-Desktop-Knöpfe (Auswertung, Einstellungen, Abmelden): .imk-nur-desktop setzt display:block –
	   damit stand die Beschriftung unter dem Zeichen statt daneben (v1.74.1). */
	.imk-wrap .imk-appleiste-knopf.imk-nur-desktop { display: flex !important; }
	.imk-wrap .imk-appleiste-abmelden { margin-top: 0; color: var(--imk-grau); }

	/* Der Inhalt braucht unten keinen Platz mehr für die Leiste. */
	.imk-wrap { padding-bottom: 3em; }   /* statt der 74px für die Leiste am Handy */

	/* Formulare bleiben einspaltig, aber nicht 1000 px breit. */
	.imk-wrap .imk-formular-box form,
	.imk-wrap .imk-anmeldung { max-width: 760px; }

	/* Startbildschirm: Kacheln nebeneinander, Demnächst und Karte in zwei Spalten. */
	.imk-wrap .imk-standort-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.imk-wrap .imk-start-spalten {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
		gap: 1em;
		align-items: start;
		margin-top: 1em;
	}
	.imk-wrap .imk-startkarte .imk-erfassen-titel { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
	.imk-wrap .imk-radiuswahl-klein { margin: 0; }
	.imk-wrap .imk-radiuswahl-klein .imk-standort-tab { min-height: 36px; padding: 0 .7em; font-size: .85em; }
	.imk-wrap .imk-karte-klein { height: 360px; min-height: 0; max-height: none; margin: 0; }

	/* Stand: Raster links, Chronik rechts, jede Spalte scrollt für sich. */
	.imk-wrap .imk-stand-spalten {
		display: grid;
		grid-template-columns: minmax(400px, 1fr) minmax(380px, 1.05fr);
		gap: 1.4em;
		align-items: start;
	}
	.imk-wrap .imk-stand-rechts {
		position: sticky;
		top: 0;
		max-height: 100vh;
		overflow: auto;
		padding-right: .2em;
	}
	.imk-wrap .imk-stand-rechts > h2:first-child { margin-top: 0; }
	/* "Was ist zu tun?" steht offen – Platz ist da, das Plus wäre ein Klick zu viel. */
	.imk-wrap .imk-standtun .imk-bf-plus { display: none; }
	.imk-wrap .imk-standtun .imk-bf-menue { max-height: none; opacity: 1; overflow: visible; }
	.imk-wrap .imk-standtun .imk-bf-aktionen { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	/* Kalender: Monat links, Tag und Termin rechts; Text im Tag. */
	.imk-wrap .imk-kal-spalten {
		display: grid;
		grid-template-columns: minmax(0, 1.35fr) minmax(340px, 1fr);
		gap: 1.4em;
		align-items: start;
	}
	.imk-wrap .imk-kal-tag { min-height: 84px; }
	.imk-wrap .imk-kal-punkte { display: none; }
	.imk-wrap .imk-kal-text {
		font-size: .72em;
		line-height: 1.25;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: var(--imk-gruen);
	}
	.imk-wrap .imk-kal-text.ist-termin { color: var(--imk-honig-dunkel); }
	.imk-wrap .imk-kal-text.ist-mehr { color: var(--imk-grau); }
	.imk-wrap .imk-kal-knoepfe { flex-direction: row; flex-wrap: wrap; }

	/* Tabellen dürfen breit sein. */
	.imk-wrap .imk-tabelle-scroll, .imk-wrap .imk-druck-scroll { overflow-x: visible; }

	/* Die Anmeldeseite hat keine Leiste – sie bleibt ein schmaler Kasten in der Mitte. */
	.imk-wrap.imk-anmeldung { display: block; max-width: 24em; padding: 0; margin: 3em auto; }
	.imk-wrap.imk-anmeldung > .imk-kopf {
		flex-direction: row;
		align-items: center;
		gap: .55em;
		padding: .25em 0 .35em;
		margin-bottom: .8em;
		background: transparent;
	}
	.imk-wrap.imk-anmeldung > .imk-kopf .imk-kopf-biene { width: 36px; }
}


/* ------------------------------------------------------------------
   v1.41.1: kleine Knöpfe, Kalender-Tagesfenster, Lager auf/zu
   ------------------------------------------------------------------ */
.imk-wrap .imk-button.imk-button-klein {
	display: inline-flex;
	width: auto;
	min-height: 42px;
	padding: 0 1em;
	font-size: .92em;
	font-weight: normal;
}
.imk-wrap .imk-start-knoepfe { display: flex; flex-wrap: wrap; gap: .5em; margin: .6em 0; }
.imk-wrap .imk-lager-aufzu { display: flex; gap: .5em; margin: .4em 0 .6em; }
.imk-wrap .imk-verwalten-klein { margin: 0 0 1em; }
.imk-wrap .imk-verwalten-klein > summary { font-size: .95em; padding: .55em .9em; }
.imk-wrap .imk-kal-fensterkopf { display: none; }

@media (min-width: 900px) {
	.imk-wrap .imk-verwalten-klein { max-width: 760px; }
	.imk-wrap .imk-verwalten-klein:not([open]) { display: inline-block; }

	/* Kalender: der Monat bekommt die ganze Breite; das Tagesfenster liegt darüber. */
	.imk-wrap .imk-kal-spalten { display: block; }
	.imk-wrap .imk-kal-links { max-width: 1100px; }
	.imk-wrap .imk-kal-tag { min-height: 96px; }
	.imk-wrap .imk-kal-rechts { display: none; }
	.imk-wrap .imk-kal-rechts.ist-offen {
		display: block;
		position: fixed;
		top: 1.5em;
		right: 1.5em;
		width: min(560px, 46vw);
		max-height: calc(100vh - 3em);
		overflow: auto;
		z-index: 900;
		background: var(--imk-grund);
		border: 1px solid var(--imk-linie-stark);
		border-radius: var(--imk-radius);
		box-shadow: 0 6px 18px rgba(35, 31, 32, .18), 0 24px 60px rgba(35, 31, 32, .22);
		padding: 0 .8em .8em;
	}
	.imk-wrap .imk-kal-fensterkopf {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: .6em;
		position: sticky;
		top: 0;
		z-index: 2;
		margin: 0 -.8em .6em;
		padding: .5em .9em;
		background: var(--imk-papier);
		border-bottom: 1px solid var(--imk-linie);
		border-radius: var(--imk-radius) var(--imk-radius) 0 0;
	}
	.imk-wrap .imk-kal-griff {
		cursor: grab;
		user-select: none;
		font-weight: bold;
		flex: 1 1 auto;
		touch-action: none;
	}
	.imk-wrap .imk-kal-griff:active { cursor: grabbing; }
	.imk-wrap .imk-kal-schliessen {
		display: grid;
		place-items: center;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		border: 1px solid var(--imk-linie);
		background: var(--imk-papier-warm);
		color: var(--imk-tinte);
		text-decoration: none;
		font-size: 1.3em;
		line-height: 1;
	}
}

/* ------------------------------------------------------------------
   v1.41.2: Knöpfe als letzte Kachel, "Termin anlegen" hinter kleinem Knopf
   ------------------------------------------------------------------ */
/* Die beiden kleinen Knöpfe stehen in der Kachel-Reihe, gestapelt. */
.imk-wrap .imk-standort-knoepfe {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	gap: .5em;
	padding: .6em .2em;
}
.imk-wrap .imk-standort-knoepfe .imk-button { justify-content: center; }

/* "Termin anlegen": zu ist es nur ein kleiner Knopf, offen ein Formularkasten. */
.imk-wrap .imk-termin-anlegen:not([open]) {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 0 0 .8em;
}
.imk-wrap .imk-termin-anlegen > summary {
	display: inline-flex;
	background: transparent;
	color: var(--imk-honig-dunkel);
	border: 1px solid var(--imk-honig);
	border-radius: var(--imk-radius-klein);
	padding: 0 1em;
	min-height: 42px;
	font-weight: normal;
	font-size: .92em;
	list-style: none;
}
.imk-wrap .imk-termin-anlegen > summary::after { content: none; }
.imk-wrap .imk-termin-anlegen[open] > summary {
	background: var(--imk-honig-hell);
	border-radius: var(--imk-radius-klein);
	border-bottom: 1px solid var(--imk-honig);
	margin: .6em .8em 0;
}
.imk-wrap .imk-termin-anlegen[open] > summary::after { content: "–"; margin-left: .6em; }
@media (min-width: 900px) {
	.imk-wrap .imk-standort-knoepfe { padding: .4em 0; }
}


/* ------------------------------------------------------------------
   v1.41.3: Kalender am Desktop – volle Breite, gleich große Tage, lesbare Schrift
   Abgestimmt auf ein 14-Zoll-Notebook (Dell Latitude 7490): der Monat nutzt
   die ganze Breite neben der Leiste, die Tage sind alle gleich groß und der
   ganze Monat passt ohne Scrollen auf den Schirm.
   ------------------------------------------------------------------ */
@media (min-width: 900px) {
	.imk-wrap.ist-kalender { max-width: none; column-gap: 1.6em; padding-right: 1.2em; }
	.imk-wrap.ist-kalender .imk-kal-links { max-width: none; }
	.imk-wrap.ist-kalender .imk-kalender { padding: .8em 1em 1em; }
	.imk-wrap.ist-kalender .imk-kal-wochentage,
	.imk-wrap.ist-kalender .imk-kal-tage {
		grid-template-columns: repeat(7, minmax(0, 1fr));
		gap: .35em;
	}
	.imk-wrap.ist-kalender .imk-kal-wochentage span { font-size: .85em; }
	/* Alle Tage gleich groß: Höhe aus der Bildschirmhöhe, sechs Reihen passen. */
	.imk-wrap.ist-kalender .imk-kal-tag {
		min-width: 0;
		height: clamp(96px, calc((100vh - 290px) / 6), 170px);
		min-height: 0;
		overflow: hidden;
		padding: .3em .45em;
		font-size: 1em;
		gap: .1em;
	}
	.imk-wrap.ist-kalender .imk-kal-nr { font-size: 1em; }
	.imk-wrap.ist-kalender .imk-kal-text {
		font-size: .86em;
		line-height: 1.3;
	}
	.imk-wrap.ist-kalender .imk-kal-text.ist-mehr { font-size: .78em; }
	/* Das Tagesfenster darf die rechte Hälfte nehmen, mehr Platz ist ja da. */
	.imk-wrap.ist-kalender .imk-kal-rechts.ist-offen { width: min(600px, 44vw); }
}


/* ------------------------------------------------------------------
   v1.41.4: Startseite ohne Quetschung, Kalender weiter oben
   ------------------------------------------------------------------ */
@media (min-width: 900px) {
	/* Fehlt die Karte (keine GPS-Angaben), nimmt "Anstehende Aufgaben" die volle Breite. */
	.imk-wrap .imk-start-spalten { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
	.imk-wrap .imk-demnaechst { min-width: 0; }

	/* Kalender: die Überschrift sagt nur, was die Leiste schon zeigt – weg damit,
	   der Monat rückt nach oben. Die Erklärung (i) bleibt, klein, rechts. */
	.imk-wrap.ist-kalender .imk-kal-titel { display: none; }
	.imk-wrap.ist-kalender .imk-kal-titel + .imk-info { margin: 0 0 .3em; }
	.imk-wrap.ist-kalender .imk-kalender { margin-top: 0; }
	.imk-wrap.ist-kalender { padding-top: .6em; }
	.imk-wrap.ist-kalender .imk-kal-tag { height: clamp(96px, calc((100vh - 220px) / 6), 190px); }
}
.imk-wrap .imk-lager-aufzu { flex-wrap: wrap; }

/* ------------------------------------------------------------------
   v1.41.6: Listen in einer Formularbox bekommen denselben Rand wie Formulare
   Die Box hat keinen eigenen Innenabstand – den bringen sonst die Formulare
   mit. Einträge und Hinweise, die direkt in der Box stehen (Aufgaben,
   Tagesliste, Überfällig), klebten deshalb am Rand.
   ------------------------------------------------------------------ */
.imk-wrap .imk-formular-box > .imk-kal-eintrag,
.imk-wrap .imk-formular-box > .imk-hinweis,
.imk-wrap .imk-formular-box > .imk-leer,
.imk-wrap .imk-formular-box > .imk-chronik-karte,
.imk-wrap .imk-formular-box > p:not(.imk-erfassen-titel):not(.imk-kal-monat):not(.imk-kal-fensterkopf) {
	margin-left: 1em;
	margin-right: 1em;
}
.imk-wrap .imk-formular-box > .imk-kal-eintrag:last-of-type { margin-bottom: .4em; }
.imk-wrap .imk-formular-box > .imk-hinweis:last-child,
.imk-wrap .imk-formular-box > .imk-leer:last-child { margin-bottom: 1em; }
.imk-wrap .imk-formular-box > .imk-leer { margin-top: .8em; }


/* ------------------------------------------------------------------
   v1.42.0: Vorjahr neben dem Monat
   ------------------------------------------------------------------ */
.imk-wrap .imk-kal-vorjahrwahl { margin: 0 0 .5em; }
.imk-wrap .imk-kalender.ist-vorjahr { opacity: .78; }
.imk-wrap .imk-kalender.ist-vorjahr .imk-kal-tag { background: var(--imk-papier-warm); cursor: default; }
.imk-wrap .imk-kalender.ist-vorjahr .imk-kal-monat strong { color: var(--imk-grau); }
.imk-wrap .imk-kalender.ist-vorjahr .imk-kal-text { color: var(--imk-grau); }
@media (min-width: 900px) {
	.imk-wrap .imk-kal-monate.mit-vorjahr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 1em;
		align-items: start;
	}
	.imk-wrap .imk-kal-monate.mit-vorjahr .imk-kal-tag { height: clamp(84px, calc((100vh - 240px) / 6), 150px); }
	.imk-wrap .imk-kal-monate.mit-vorjahr .imk-kal-text { font-size: .78em; }
	.imk-wrap.ist-kalender .imk-kal-vorjahrwahl { position: absolute; top: .9em; right: 1.4em; margin: 0; z-index: 3; }
	.imk-wrap.ist-kalender .imk-kal-links { position: relative; }
}


/* ==================================================================
   v1.43.0: Jahresansicht – das Jahr am Stück, Vorjahre daneben (Desktop)
   v1.43.1: auch am Handy, schmal mit Punkten, ohne Vergleich
   ================================================================== */
@media (min-width: 900px) {

	.imk-wrap .imk-jahr-kopf {
		position: sticky;
		top: 0;
		z-index: 5;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: .5em;
		padding: .6em .9em;
		margin: 0 0 .6em;
		background: var(--imk-papier);
		border: 1px solid var(--imk-linie);
		border-radius: var(--imk-radius);
		box-shadow: var(--imk-schatten);
	}
	.imk-wrap .imk-jahr-zahl { font-size: 1.25em; margin: 0 .3em; }
	.imk-wrap .imk-jahr-monate { display: flex; flex-wrap: wrap; gap: .25em; margin-left: .6em; }
	.imk-wrap .imk-jahr-chip {
		font-family: system-ui, sans-serif;
		font-size: .8em;
		padding: .25em .65em;
		border: 1px solid var(--imk-linie-stark);
		border-radius: 999px;
		color: var(--imk-tinte);
		text-decoration: none;
	}
	.imk-wrap .imk-jahr-chip:hover { background: var(--imk-honig-hell); }
	.imk-wrap .imk-jahr-vergleichswahl {
		margin-left: auto;
		display: inline-flex;
		align-items: center;
		gap: .4em;
		font-size: .92em;
		color: var(--imk-grau);
	}
	.imk-wrap .imk-jahr-vergleichswahl strong { color: var(--imk-tinte); }
	.imk-wrap .imk-jahr-vergleichswahl .imk-button-klein { min-height: 36px; padding: 0 .7em; }

	.imk-wrap .imk-jahr-woche {
		display: grid;
		grid-template-columns: 3.2em repeat(7, minmax(0, 1fr));
		gap: .3em;
		margin: 0 0 .3em;
		align-items: stretch;
	}
	.imk-wrap .imk-jahr-wochen.mit-vergleich .imk-jahr-woche { grid-template-columns: 3.2em repeat(7, minmax(0, 1fr)) minmax(260px, 320px); }
	.imk-wrap .imk-jahr-kw {
		font-family: system-ui, sans-serif;
		font-size: .7em;
		color: var(--imk-grau);
		text-align: right;
		padding: .5em .3em 0 0;
	}
	.imk-wrap .imk-jahr-kw b { display: block; font-size: 1.35em; color: var(--imk-tinte); }
	.imk-wrap .imk-jahr-marke {
		font-family: system-ui, sans-serif;
		font-size: .78em;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: var(--imk-honig-dunkel);
		padding: .8em 0 .2em 3.6em;
		border-top: 2px solid var(--imk-honig);
		margin: .5em 0 .2em;
		scroll-margin-top: 80px;
	}
	.imk-wrap .imk-jahr-tag {
		min-width: 0;
		min-height: 86px;
		border: 1px solid var(--imk-linie);
		border-radius: 8px;
		background: var(--imk-papier);
		padding: .3em .45em;
		text-decoration: none;
		color: var(--imk-tinte);
		display: flex;
		flex-direction: column;
		gap: .1em;
		overflow: hidden;
		font-size: 1em;
	}
	.imk-wrap .imk-jahr-tag.ist-ungerade { background: var(--imk-papier-warm); }
	.imk-wrap .imk-jahr-tag.ist-anderes-jahr { opacity: .45; }
	.imk-wrap .imk-jahr-tag.ist-heute { border: 2px solid var(--imk-tinte); scroll-margin-top: 90px; }
	.imk-wrap .imk-jahr-tag.ist-gewaehlt { background: var(--imk-honig-hell); border-color: var(--imk-honig); }
	.imk-wrap .imk-jahr-tag .imk-kal-nr small { font-weight: normal; color: var(--imk-grau); margin-left: .3em; font-size: .75em; }
	.imk-wrap .imk-jahr-tag .imk-kal-text { display: block; font-size: .86em; line-height: 1.3; }

	.imk-wrap .imk-jahr-woche > .imk-jahr-vergleich {
		margin: 0;
		display: block;
		background: var(--imk-papier-warm);
		border: 1px dashed var(--imk-linie-stark);
		border-radius: 8px;
		padding: .35em .6em;
		font-size: .84em;
		color: var(--imk-grau);
		overflow: hidden;
		min-width: 0;
	}
	.imk-wrap .imk-jahr-woche > .imk-jahr-vergleich b {
		display: block;
		font-family: system-ui, sans-serif;
		font-size: .74em;
		letter-spacing: .06em;
		text-transform: uppercase;
		margin-bottom: .2em;
	}
	.imk-wrap .imk-jahr-woche > .imk-jahr-vergleich div { line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.imk-wrap .imk-jahr-woche > .imk-jahr-vergleich div i { font-style: normal; color: var(--imk-tinte); font-variant-numeric: tabular-nums; margin-right: .35em; }
	.imk-wrap .imk-jahr-woche > .imk-jahr-vergleich div small { color: var(--imk-linie-stark); font-size: .85em; }
	.imk-wrap .imk-jahr-woche > .imk-jahr-vergleich.ist-leer div { color: var(--imk-linie-stark); font-style: italic; }

	/* Die Monatsansicht ist am Desktop nur noch Handy-Sache. */
	.imk-wrap .imk-monatsansicht { display: none !important; }
}


/* ------------------------------------------------------------------
   v1.43.1: Jahresansicht am Handy – Woche unter Woche, Punkte statt Text
   ------------------------------------------------------------------ */
@media (max-width: 899px) {
	.imk-wrap .imk-jahr-kopf {
		position: sticky;
		top: 0;
		z-index: 5;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: .4em;
		padding: .5em .6em;
		margin: 0 0 .5em;
		background: var(--imk-papier);
		border: 1px solid var(--imk-linie);
		border-radius: var(--imk-radius-klein);
	}
	.imk-wrap .imk-jahr-zahl { font-size: 1.15em; margin: 0 .2em; }
	.imk-wrap .imk-jahr-monate {
		flex: 1 0 100%;
		display: flex;
		gap: .3em;
		overflow-x: auto;
		padding-bottom: .2em;
		-webkit-overflow-scrolling: touch;
	}
	.imk-wrap .imk-jahr-chip {
		flex: none;
		font-family: system-ui, sans-serif;
		font-size: .8em;
		padding: .3em .7em;
		border: 1px solid var(--imk-linie-stark);
		border-radius: 999px;
		color: var(--imk-tinte);
		text-decoration: none;
	}
	.imk-wrap .imk-jahr-vergleichswahl { display: none; }   /* Vergleich ist Desktop-Sache */
	.imk-wrap .imk-jahr-woche {
		display: grid;
		grid-template-columns: 2.1em repeat(7, minmax(0, 1fr));
		gap: .2em;
		margin: 0 0 .2em;
	}
	.imk-wrap .imk-jahr-woche > .imk-jahr-vergleich { display: none; }
	.imk-wrap .imk-jahr-kw { font-family: system-ui, sans-serif; font-size: .6em; color: var(--imk-grau); text-align: right; padding: .5em .2em 0 0; }
	.imk-wrap .imk-jahr-kw b { display: block; font-size: 1.3em; color: var(--imk-tinte); }
	.imk-wrap .imk-jahr-marke {
		font-family: system-ui, sans-serif;
		font-size: .75em;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--imk-honig-dunkel);
		padding: .7em 0 .15em 2.4em;
		border-top: 2px solid var(--imk-honig);
		margin: .4em 0 .15em;
		scroll-margin-top: 110px;
	}
	.imk-wrap .imk-jahr-tag {
		min-width: 0;
		min-height: 50px;
		border: 1px solid var(--imk-linie);
		border-radius: 7px;
		background: var(--imk-papier);
		padding: .2em .2em .25em;
		text-decoration: none;
		color: var(--imk-tinte);
		display: flex;
		flex-direction: column;
		gap: .15em;
		font-size: .85em;
	}
	.imk-wrap .imk-jahr-tag.ist-ungerade { background: var(--imk-papier-warm); }
	.imk-wrap .imk-jahr-tag.ist-anderes-jahr { opacity: .45; }
	.imk-wrap .imk-jahr-tag.ist-heute { border: 2px solid var(--imk-tinte); scroll-margin-top: 120px; }
	.imk-wrap .imk-jahr-tag.ist-gewaehlt { background: var(--imk-honig-hell); border-color: var(--imk-honig); }
	.imk-wrap .imk-jahr-tag .imk-kal-nr { font-weight: bold; font-variant-numeric: tabular-nums; line-height: 1.1; }
	.imk-wrap .imk-jahr-tag .imk-kal-nr small { display: block; font-weight: normal; color: var(--imk-grau); font-size: .65em; }
	.imk-wrap .imk-jahr-tag .imk-kal-text { display: none; }
	.imk-wrap .imk-jahr-tag .imk-kal-punkte { display: flex; flex-wrap: wrap; gap: 2px; }
	.imk-wrap .imk-jahr-tag .imk-kal-punkt { width: 6px; height: 6px; }
}

/* Kartenschirm: ein × zum Schließen – am Desktop liegt er über der Leiste. */
.imk-wrap .imk-kartenkopf { position: relative; }
.imk-wrap .imk-karte-zu {
	position: absolute;
	top: .4em;
	right: .6em;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--imk-papier);
	border: 1px solid var(--imk-linie-stark);
	color: var(--imk-tinte);
	text-decoration: none;
	font-size: 1.5em;
	line-height: 1;
	z-index: 2;
}
@media (min-width: 900px) {
	.imk-wrap .imk-kartenschirm { bottom: 0; }
}


/* ------------------------------------------------------------------
   v1.43.2: Handy – das Jahr in einem Fenster mit eigenem Scrollen
   Das Jahr bleibt am Stück, aber in einem Kasten von gut einem Monat Höhe;
   darin wischt man von oben nach unten. Was darunter steht (Tagesliste,
   Termin anlegen, .ics), bleibt erreichbar (Rückmeldung 13.09.2026).
   ------------------------------------------------------------------ */
@media (max-width: 899px) {
	.imk-wrap .imk-jahresansicht {
		background: var(--imk-papier);
		border: 1px solid var(--imk-linie);
		border-radius: var(--imk-radius);
		padding: .4em .4em .5em;
		margin: 0 0 .8em;
	}
	.imk-wrap .imk-jahr-kopf { position: static; margin: 0 0 .4em; border: 0; padding: .3em .2em .4em; }
	.imk-wrap .imk-jahr-wochen {
		position: relative;   /* Bezug für offsetTop beim Scrollen im Kasten */
		max-height: 58vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		padding-right: .2em;
	}
	.imk-wrap .imk-jahr-marke { scroll-margin-top: 0; }
	.imk-wrap .imk-jahr-tag.ist-heute { scroll-margin-top: 0; }
}


/* ------------------------------------------------------------------
   v1.43.5: Kalender ohne Überschrift, (i) klein im Kopf, Leiste opak
   ------------------------------------------------------------------ */
.imk-wrap .imk-appleiste { background: var(--imk-papier); }   /* sicherheitshalber, egal wo die Leiste im Markup landet */
.imk-wrap .imk-jahr-info { margin: 0 0 0 auto; }
.imk-wrap .imk-jahr-info > summary { padding: 0; min-height: 0; }
.imk-wrap .imk-jahr-info[open] { flex: 1 0 100%; }
.imk-wrap .imk-jahr-info[open] > summary { margin-bottom: .3em; }
.imk-wrap .imk-jahr-info .imk-hinweis { margin: 0; font-size: .85em; }
@media (min-width: 900px) {
	.imk-wrap .imk-jahr-info { margin-left: .6em; }
	.imk-wrap .imk-jahr-info[open] { flex: 1 0 100%; margin-left: 0; }
}
@media (max-width: 899px) {
	/* Kopf am Handy: Jahr und Pfeile links, das (i) rechts, die Chips darunter. */
	.imk-wrap .imk-jahr-kopf { padding-top: .2em; }
	.imk-wrap .imk-jahr-monate { order: 10; }
}
/* Am Handy trägt nur der Stände-Bereich den Kopf "Imkerei-Doku"; überall sonst
   gehört der Platz der Sache (Rückmeldung 13.09.2026). */
.imk-wrap:not(.ist-tab-stand) > .imk-kopf { display: none; }


/* ------------------------------------------------------------------
   v1.43.6: Handy – Tag gewählt: Fenster geteilt, 40 % Kalender, 60 % Tag
   Der Kalender klebt oben, darunter scrollt der Tag (Chronik, Termin
   anlegen) in seinem eigenen Kasten. Ein anderer Tag tauscht nur den
   unteren Teil.
   ------------------------------------------------------------------ */
@media (max-width: 899px) {
	.imk-wrap.ist-tag-offen .imk-jahresansicht {
		position: sticky;
		top: 0;
		z-index: 4;
		margin-bottom: .5em;
	}
	.imk-wrap.ist-tag-offen .imk-jahr-wochen { max-height: calc(40vh - 118px); min-height: 150px; }
	.imk-wrap.ist-tag-offen .imk-kal-rechts {
		max-height: calc(60vh - 96px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		padding-bottom: .5em;
	}
	.imk-wrap.ist-tag-offen .imk-kal-rechts > .imk-formular-box:first-of-type { margin-top: 0; }
}
/* Der Vollbild-Knopf an der kleinen Karte: so hoch wie die km-Reiter daneben, damit
   der Kopf des Kastens einzeilig bleibt (Rückmeldung 13.09.2026). */
.imk-wrap .imk-karte-vollbild { margin-right: .4em; min-height: 36px; padding: 0 .7em; font-size: .85em; }
@media (min-width: 900px) {
	.imk-wrap .imk-startkarte .imk-erfassen-titel { padding-top: .5em; padding-bottom: .5em; }
	.imk-wrap .imk-startkarte .imk-radiuswahl-klein { flex-wrap: nowrap; }
	.imk-wrap .imk-startkarte .imk-radiuswahl-klein .imk-standort-tab { min-height: 36px; padding: 0 .6em; font-size: .85em; white-space: nowrap; }
}
@media (min-width: 900px) {
	/* Der Kartenschirm liegt über allem, auch über der Leiste – und nimmt den ganzen Bildschirm. */
	.imk-wrap .imk-kartenschirm { left: 0; right: 0; top: 0; bottom: 0; z-index: 1000; }
	.imk-wrap.ist-kartenschirm .imk-karte { height: calc(100vh - 110px); max-height: none; }
}


/* ------------------------------------------------------------------
   v1.44.0: Desktop – im Kalender ist die Leiste nur noch Zeichen
   Schmale Spalte, damit Jahr und Vergleich die Breite bekommen
   (Rückmeldung 13.09.2026). Die Beschriftung bleibt als Titel beim
   Überfahren erhalten; die Leiste selbst zeigt die Biene ohne Namen.
   ------------------------------------------------------------------ */
@media (min-width: 900px) {
	.imk-wrap.ist-kalender { grid-template-columns: 84px minmax(0, 1fr); column-gap: 1.2em; }
	.imk-wrap.ist-kalender .imk-appleiste { padding: .6em .4em 1em; width: 97px; left: 0; }   /* der Kalender nutzt die volle Breite */
	.imk-wrap.ist-kalender .imk-appleiste::before {
		content: "";
		padding: 0;
		margin: 0 .3em .6em;
		min-height: 52px;
		background-position: center;
		background-size: 46px auto;
	}
	.imk-wrap.ist-kalender .imk-appleiste-knopf {
		flex-direction: column;
		justify-content: center;
		gap: .15em;
		padding: .5em .2em;
	}
	.imk-wrap.ist-kalender .imk-appleiste-label { display: none; }
	.imk-wrap.ist-kalender .imk-appleiste-symbol { width: auto; }
	.imk-wrap.ist-kalender .imk-appleiste-bild,
	.imk-wrap.ist-kalender .imk-appleiste-icon { width: 32px !important; height: 32px !important; }
	.imk-wrap.ist-kalender .imk-appleiste-abmelden .imk-appleiste-symbol { font-size: 1.3em; }
}

/* ==================================================================
   v1.45.0: Auswertung (Desktop), Mindestbestand im Lager
   ================================================================== */
.imk-wrap .imk-mindest { margin-top: -.3em; margin-bottom: .9em; align-items: flex-end; }
.imk-wrap .imk-mindest-feld { flex: 1 1 auto; font-size: .85em; color: var(--imk-grau); }
.imk-wrap .imk-mindest-feld input { max-width: 12em; }

.imk-wrap .imk-aw-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: .4em; margin: 0 0 .9em; }
.imk-wrap .imk-aw-kopf h2 { margin: 0 .8em 0 0; font-size: 1.4em; }
.imk-wrap .imk-aw-kopf .imk-jahr-chip.ist-aktiv { background: var(--imk-tinte); color: #fff; border-color: var(--imk-tinte); }
.imk-wrap .imk-aw-druck { margin-left: auto; }
.imk-wrap .imk-aw-kacheln { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6em; margin: 0 0 1em; }
.imk-wrap .imk-aw-kachel {
	background: var(--imk-papier);
	border-radius: var(--imk-radius-klein);
	padding: .7em .8em .6em;
	box-shadow: var(--imk-schatten);
	min-width: 0;
}
.imk-wrap .imk-aw-kachel small { display: block; font-family: system-ui, sans-serif; font-size: .7em; letter-spacing: .05em; text-transform: uppercase; color: var(--imk-grau); }
.imk-wrap .imk-aw-kachel b { display: block; font-size: 1.45em; font-variant-numeric: tabular-nums; line-height: 1.2; margin: .15em 0 .05em; }
.imk-wrap .imk-aw-kachel span { font-size: .8em; color: var(--imk-grau); display: block; line-height: 1.35; }
.imk-wrap .imk-aw-kachel .ist-warn { color: var(--imk-rot); }
.imk-wrap .imk-aw-kachel .ist-fehlt { color: var(--imk-linie-stark); font-style: italic; font-size: 1.1em; }
.imk-wrap .imk-aw-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8em; }
.imk-wrap .imk-aw-karte { margin: 0; padding-bottom: .8em; }
.imk-wrap .imk-aw-breit { grid-column: 1 / -1; }
.imk-wrap .imk-aw-unter { font-family: system-ui, sans-serif; font-size: .8em; color: var(--imk-grau); margin: .5em 1em .4em; }
.imk-wrap .imk-aw-svg { display: block; width: calc(100% - 2em); height: auto; margin: 0 1em; overflow: visible; }
.imk-wrap .imk-aw-svg text { font-family: system-ui, sans-serif; fill: var(--imk-grau); }
.imk-wrap .imk-aw-legende { display: flex; flex-wrap: wrap; gap: .3em 1em; font-family: system-ui, sans-serif; font-size: .78em; color: var(--imk-grau); margin: .5em 1em 0; }
.imk-wrap .imk-aw-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35em; vertical-align: -1px; }
.imk-wrap .imk-aw-filter { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: .6em; padding: .6em 1em 0; }
.imk-wrap .imk-aw-filter label { flex: 0 1 220px; font-size: .9em; }
.imk-wrap .imk-aw-filter select { min-height: 42px; }
.imk-wrap .imk-aw-tabelle { font-size: .9em; }
.imk-wrap .imk-aw-tabelle small { color: var(--imk-kontrolle, #4A6B8A); font-family: system-ui, sans-serif; font-size: .75em; margin-left: .3em; }
@media print {
	.imk-wrap .imk-aw-kopf .imk-jahr-chip, .imk-wrap .imk-aw-druck, .imk-wrap .imk-aw-filter { display: none !important; }
}


/* ======================================================================
   v1.49.0 – Reihe, Speichern-Rückmeldung, Kärtchen, Steckbrief,
   Erledigt-Dialog, Kalender-Tastatur
   ====================================================================== */

/* Die Reihe: eine schmale Zeile über der Maske – Richtung, Stand, Punkte. */
.imk-wrap .imk-reihe {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .3em .5em;
	margin: 0 0 .6em;
	font-size: .88em;
	color: var(--imk-grau);
}
.imk-wrap .imk-reihe b { color: var(--imk-tinte); font-weight: normal; }
.imk-wrap .imk-reihe-pfeil {
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--imk-honig-hell);
	color: var(--imk-honig-dunkel);
	font-weight: 700;
}
.imk-wrap .imk-reihe-punkte { display: flex; flex-wrap: wrap; gap: 3px; flex-basis: 100%; padding-left: 32px; }
.imk-wrap .imk-reihe-punkte i { width: 7px; height: 7px; border-radius: 50%; background: var(--imk-linie); }
.imk-wrap .imk-reihe-punkte i.ist-fertig { background: var(--imk-gruen); }
.imk-wrap .imk-reihe-punkte i.ist-jetzt { background: var(--imk-honig); }

/* Zwei Knöpfe untereinander; die Rückmeldung am Knopf selbst. */
.imk-wrap .imk-speichern-zeile { display: flex; flex-direction: column; gap: .5em; }
.imk-wrap .imk-speichern-zeile .imk-button { width: 100%; }
.imk-wrap .imk-button.ist-gespeichert,
.imk-wrap button.imk-button-zweit.ist-gespeichert {
	background: var(--imk-gruen) !important;
	border-color: var(--imk-gruen) !important;
	color: #fff !important;
}
.imk-wrap .imk-speicher-hinweis { font-size: .85em; color: var(--imk-grau); margin: .2em 0 0; min-height: 1.2em; }
.imk-wrap .imk-speicher-hinweis:empty { display: none; }
.imk-wrap .imk-speicher-hinweis.ist-fehler { color: var(--imk-rot); font-weight: 600; }
.imk-wrap .imk-ueberspringen { text-align: center; font-size: .9em; margin: .2em 0 0; }
.imk-wrap .imk-ueberspringen a { color: var(--imk-honig-dunkel); }
.imk-wrap .imk-gruppe-vermerk { font-weight: normal; color: var(--imk-grau); font-size: .85em; margin-left: .4em; text-transform: none; letter-spacing: 0; }

/* Das Kärtchen neben der Beute – und die Notiz, die sich darüberlegt. */
.imk-wrap .imk-stapel {
	position: relative;
	min-height: 60px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.imk-wrap .imk-kaertchen {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .35em .45em .35em .7em;
	background: var(--imk-papier-warm);
	border: 1px solid #e8d9b8;
	border-radius: var(--imk-radius-klein);
	box-shadow: 0 1px 2px rgba(35, 31, 32, .06);
	color: var(--imk-tinte);
	transition: transform .16s ease, box-shadow .16s ease;
}
.imk-wrap .imk-kaertchen-text { display: flex; flex-direction: column; line-height: 1.15; }
.imk-wrap .imk-kaertchen-wort { font-family: system-ui, sans-serif; font-size: .62em; letter-spacing: .05em; text-transform: uppercase; color: var(--imk-grau); }
.imk-wrap .imk-kaertchen-sterne { font-size: .95em; color: var(--imk-honig-dunkel); letter-spacing: .04em; white-space: nowrap; }
.imk-wrap .imk-kaertchen-sterne.ist-leer { color: var(--imk-linie-stark); }
.imk-wrap .imk-i-knopf {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	flex: none;
	text-decoration: none;
}
.imk-wrap .imk-i-knopf-icon { width: 30px !important; height: 30px !important; display: block; }
.imk-wrap .imk-i-knopf:hover .imk-i-knopf-icon, .imk-wrap .imk-i-knopf:focus .imk-i-knopf-icon { transform: scale(1.08); }
/* Mit Notiz: das Kärtchen liegt darunter, rechts lugt ein Rand hervor (20 px). */
.imk-wrap .imk-stapel.hat-notiz .imk-kaertchen {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	cursor: pointer;
}
.imk-wrap .imk-stapel.hat-notiz .imk-beute-notiz {
	position: relative;
	z-index: 2;
	max-width: calc(100% - 20px);
	margin-right: 20px;
	background: var(--imk-grund);
	padding: .25em .4em;
	border-radius: 6px;
	cursor: pointer;
}
.imk-wrap .imk-stapel.hat-notiz.ist-vorn .imk-kaertchen {
	z-index: 3;
	transform: translateY(-50%) translateX(-4px);
	box-shadow: 0 3px 10px rgba(35, 31, 32, .2);
}
.imk-wrap .imk-stapel.hat-notiz.ist-vorn .imk-beute-notiz { opacity: .5; }

/* Steckbrief-Link im Beuten-Fenster */
.imk-wrap .imk-bf-steckbrief { display: flex; align-items: center; gap: .4em; margin-top: .4em; }
.imk-wrap .imk-bf-steckbrief-icon { width: 24px !important; height: 24px !important; }

/* Der Steckbrief oben auf der Volk-Seite */
.imk-wrap .imk-steckbrief-titel { font-weight: 700; }
.imk-wrap .imk-steckbrief-kurz { display: inline-flex; align-items: center; gap: .5em; margin-left: .3em; font-weight: normal; font-size: .85em; color: var(--imk-grau); }
.imk-wrap .imk-steckbrief-kurz .imk-sterne { font-size: 1em; }
.imk-wrap .imk-steckbrief-spalten { display: grid; gap: 1em; padding: .8em 1em .2em; }
.imk-wrap .imk-steckbrief-u { font-family: system-ui, sans-serif; font-size: .74em; letter-spacing: .06em; text-transform: uppercase; color: var(--imk-honig-dunkel); font-weight: 700; margin: 0 0 .4em; }
.imk-wrap .imk-steckbrief-liste { display: grid; grid-template-columns: auto 1fr; gap: .3em .8em; margin: 0; font-size: .93em; align-items: baseline; }
.imk-wrap .imk-steckbrief-liste dt { color: var(--imk-grau); }
.imk-wrap .imk-steckbrief-liste dd { margin: 0; }
.imk-wrap .imk-steckbrief-liste dd small { color: var(--imk-grau); font-size: .8em; margin-left: .4em; white-space: nowrap; }
.imk-wrap .imk-steckbrief-liste dd .imk-ampel { vertical-align: -2px; }
.imk-wrap .imk-steckbrief-leer { color: var(--imk-linie-stark); font-style: italic; }
.imk-wrap .imk-steckbrief-zuchtlink { margin: .6em 0 0; }
.imk-wrap .imk-steckbrief-zuchtlink a { color: var(--imk-honig-dunkel); }
.imk-wrap .imk-steckbrief-aendern { margin: .4em 1em 1em; }
.imk-wrap .imk-steckbrief-aendern > summary { display: inline-flex; list-style: none; cursor: pointer; }
.imk-wrap .imk-steckbrief-aendern > summary::-webkit-details-marker { display: none; }
.imk-wrap .imk-steckbrief-aendern[open] > summary { background: var(--imk-honig-hell); }
.imk-wrap .imk-steckbrief-aendern form { display: flex; flex-direction: column; gap: .8em; margin-top: .8em; }
@media (min-width: 900px) {
	.imk-wrap .imk-steckbrief-spalten { grid-template-columns: 1fr 1fr; gap: 1.5em; }
}

/* Termine: offen blass, erledigt kräftig mit Uhrzeit. */
.imk-wrap .imk-kal-eintrag.ist-termin.ist-offen b { color: var(--imk-grau); font-weight: normal; }
.imk-wrap .imk-kal-eintrag.ist-termin.ist-offen > .imk-kal-punkt { opacity: .45; }
.imk-wrap .imk-kal-eintrag.ist-termin.ist-erledigt b { color: var(--imk-honig-dunkel); }
.imk-wrap .imk-kal-zeit { color: var(--imk-tinte); font-weight: 700; }
.imk-wrap .imk-kal-text.ist-termin.ist-offen { color: var(--imk-honig); opacity: .6; }
.imk-wrap .imk-kal-text.ist-termin.ist-erledigt { color: var(--imk-honig-dunkel); font-weight: 700; opacity: 1; }
@media (min-width: 900px) {
	.imk-wrap .imk-kal-text.ist-termin.ist-offen { color: var(--imk-honig); opacity: .6; }
	.imk-wrap .imk-kal-text.ist-termin.ist-erledigt { color: var(--imk-honig-dunkel); font-weight: 700; opacity: 1; }
}

/* Der Erledigt-Dialog */
.imk-erledigt-dialog {
	border: 1px solid var(--imk-linie-stark);
	border-radius: var(--imk-radius);
	padding: 1em 1.1em 1.1em;
	width: min(460px, 92vw);
	background: var(--imk-papier);
	color: var(--imk-tinte);
	font-family: inherit;
	box-shadow: 0 10px 40px rgba(35, 31, 32, .3);
}
.imk-erledigt-dialog::backdrop { background: rgba(35, 31, 32, .35); }
.imk-erledigt-dialog .imk-erledigt-titel { margin: 0 0 .2em; font-weight: 700; font-size: 1.05em; }
/* Zwei Datumsfelder brauchen je gut 12 em – passt es nicht, stehen sie untereinander statt seitlich zu rollen (v1.62.2). */
.imk-erledigt-dialog .imk-kal-serie { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5em, 1fr)); gap: .6em; margin: .7em 0 .9em; }
.imk-erledigt-dialog label { display: block; font-size: .9em; }
.imk-erledigt-dialog input { display: block; box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; margin-top: .2em; font: inherit; border: 1px solid var(--imk-linie-stark); border-radius: var(--imk-radius-klein); padding: .4em .5em; }
.imk-erledigt-dialog .imk-loeschen-knoepfe { display: flex; gap: .5em; margin: 0; }
.imk-erledigt-dialog .imk-loeschen-knoepfe .imk-button { flex: 1 1 auto; }

/* Kalender-Tastatur: die Markierung, die die Pfeile bewegen. */
.imk-wrap .imk-jahr-tag.ist-cursor { outline: 2px dashed var(--imk-tinte); outline-offset: -2px; }


/* ------------------------------------------------------------------
   v1.49.1: Kalenderkopf in einer Zeile, Monat läuft mit; Punkte nach Zustand
   ------------------------------------------------------------------ */
/* Termin-Punkte: erledigt voll, offen hohl – am Handy der einzige Unterschied. */
.imk-wrap .imk-kal-punkt.ist-termin.ist-offen {
	background: transparent;
	box-shadow: inset 0 0 0 1.5px var(--imk-honig);
}
.imk-wrap .imk-kal-punkt.ist-termin.ist-erledigt { background: var(--imk-honig-dunkel); }
.imk-wrap .imk-jahr-chip.ist-aktiv {
	background: var(--imk-grau-hell);
	border-color: var(--imk-linie-stark);
	font-weight: 700;
}
.imk-wrap .imk-jahr-kopf .imk-jahr-zahl { font-family: system-ui, sans-serif; font-weight: 700; }
@media (max-width: 899px) {
	/* Jahr und Pfeile klein, die Monate daneben in derselben Zeile (Rückmeldung 17.09.2026:
	   "2026 nimmt super viel Platz weg"). Die Chips scrollen quer; das (i) bleibt rechts. */
	.imk-wrap .imk-jahr-kopf { gap: .25em; padding: .2em .3em .25em; }
	.imk-wrap .imk-jahr-kopf .imk-kal-pfeil { width: 30px; height: 30px; font-size: 1.05em; }
	.imk-wrap .imk-jahr-zahl { font-size: .82em; margin: 0 .05em; }
	.imk-wrap .imk-jahr-monate {
		order: 0;
		flex: 1 1 0;
		min-width: 110px;
		padding-bottom: 0;
		margin-left: .15em;
		scrollbar-width: none;
	}
	.imk-wrap .imk-jahr-monate::-webkit-scrollbar { display: none; }
	.imk-wrap .imk-jahr-chip { font-size: .74em; padding: .3em .55em; }
	.imk-wrap .imk-jahr-info { margin-left: .15em; }
}
@media (min-width: 900px) {
	.imk-wrap .imk-jahr-zahl { font-size: 1em; }
	.imk-wrap .imk-jahr-monate { margin-left: .3em; }
}

/* v1.49.2: leerer Stand – der Weg zum ersten Volk, Völker ohne Platz in die Linie */
.imk-wrap .imk-leer-stand > .imk-standtun-zeile,
.imk-wrap .imk-leer-stand > form { padding: 0 1em 1em; }
.imk-wrap .imk-leer-stand > form .imk-button { align-self: flex-start; }


/* ======================================================================
   v1.50.0 – Streuung, Ertrag je Volk, Schwarmzellen, Zuchtauswahl
   ====================================================================== */

/* Sterne mit Wort daneben (Ertrag: sehr wenig … sehr viel). */
.imk-wrap .imk-sternwort {
	font-family: system-ui, sans-serif;
	font-size: .82em;
	color: var(--imk-grau);
	min-width: 5.5em;
	margin-left: .2em;
}

/* Beim Schleudern am Stand: die Sternreihe je Beute unter der Zeile im Raster. */
.imk-wrap .imk-rundgang-zeile { flex-wrap: wrap; }
.imk-wrap .imk-rundgang-ertrag { flex-basis: 100%; order: 3; margin-top: .15em; }
.imk-wrap .imk-rundgang-ertrag[hidden] { display: none; }
.imk-wrap .imk-rundgang-ertrag .imk-sternwahl { flex-direction: row; align-items: center; flex-wrap: wrap; gap: .3em .6em; }
.imk-wrap .imk-rundgang-ertrag .imk-stern { font-size: 1.6em; min-width: 36px; }
.imk-wrap .imk-rundgang-ertrag .imk-stern-loeschen { min-width: 32px; min-height: 32px; }

/* Auswertung: Blättern durch die Völker, die Karte beim Nachladen. */
.imk-wrap .imk-aw-blaettern {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .5em;
	margin: .5em 1em .3em;
	font-family: system-ui, sans-serif;
}
.imk-wrap .imk-aw-blaettern .imk-button { margin: 0; }
.imk-wrap .imk-aw-blaettern .ist-aus { opacity: .35; pointer-events: none; }
.imk-wrap .imk-aw-wo { margin-left: auto; font-size: .85em; color: var(--imk-grau); }
.imk-wrap .imk-aw-wo kbd {
	font: inherit;
	font-size: 1em;
	line-height: 1.3;
	display: inline-block;
	background: var(--imk-papier);
	border: 1px solid var(--imk-linie-stark);
	border-bottom-width: 2px;
	border-radius: 4px;
	padding: 0 .35em;
	margin-right: .15em;
}
.imk-wrap .imk-aw-milben.ist-laedt { opacity: .6; transition: opacity .15s ease; }
.imk-wrap .imk-aw-unter .ist-hoch { color: var(--imk-rot); font-weight: 600; }
.imk-wrap .imk-aw-unter .ist-niedrig { color: var(--imk-gruen); font-weight: 600; }
.imk-wrap .imk-aw-zwischentitel { font-weight: 700; font-size: 1em; margin: 1.3em 1em .1em; }
/* Die breiten Tabellen dürfen in der Karte scrollen – die Karte schneidet sonst ab (overflow hidden). */
.imk-wrap .imk-aw-milben .imk-tabelle-scroll, .imk-wrap .imk-aw-zucht .imk-tabelle-scroll { overflow-x: auto; margin: .6em 1em; width: auto; }
.imk-wrap .imk-zucht-tabelle { font-size: .86em; }
.imk-wrap .imk-aw-legende i { vertical-align: -1px; }

/* Tabellen der Auswertung: Zahlen rechts, Ausreißer eingefärbt. */
.imk-wrap .imk-aw-vergleich th:not(.ist-links), .imk-wrap .imk-aw-vergleich td:not(.ist-links),
.imk-wrap .imk-zucht-tabelle th:not(.ist-links), .imk-wrap .imk-zucht-tabelle td:not(.ist-links) {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.imk-wrap .imk-aw-tabelle th { font-weight: normal; color: var(--imk-grau); font-family: system-ui, sans-serif; font-size: .82em; vertical-align: bottom; }
.imk-wrap .imk-aw-tabelle td.ist-hoch { background: var(--imk-rot-hell); color: var(--imk-rot); font-weight: 600; }
.imk-wrap .imk-aw-tabelle td.ist-niedrig { background: var(--imk-gruen-hell); color: var(--imk-gruen); font-weight: 600; }
.imk-wrap .imk-aw-tabelle .ist-fehlt { color: var(--imk-linie-stark); }
.imk-wrap .imk-aw-tabelle tr.ist-gewaehlt td { background: var(--imk-honig-hell); font-weight: 600; }
.imk-wrap .imk-aw-vergleich td a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--imk-linie-stark); }
.imk-wrap .imk-aw-zaehltage { margin: .8em 1em 0; }
.imk-wrap .imk-aw-zaehltage summary { cursor: pointer; color: var(--imk-grau); font-family: system-ui, sans-serif; font-size: .82em; }
.imk-wrap .imk-aw-zaehltage .imk-tabelle-scroll { margin: .5em 0 0; }

/* Rangliste "Beste Zuchtvölker". */
.imk-wrap .imk-zucht-tabelle th[data-sort] { cursor: pointer; -webkit-user-select: none; user-select: none; }
.imk-wrap .imk-zucht-tabelle th[data-sort]:hover { color: var(--imk-tinte); }
.imk-wrap .imk-zucht-tabelle th[data-sort].ist-aktiv { color: var(--imk-tinte); font-weight: 700; }
.imk-wrap .imk-zucht-tabelle th[data-sort].ist-aktiv::after { content: " ▾"; }
.imk-wrap .imk-zucht-tabelle th.ist-inaktiv { color: var(--imk-linie-stark); }
.imk-wrap .imk-zucht-tabelle th small { display: block; font-weight: normal; font-size: .8em; color: var(--imk-grau); margin: 0; }
.imk-wrap .imk-zucht-tabelle th, .imk-wrap .imk-zucht-tabelle td { padding: .45em .55em; vertical-align: top; }
.imk-wrap .imk-zucht-tabelle th { white-space: normal; max-width: 6.5em; }
.imk-wrap .imk-zucht-tabelle td small.imk-zucht-unter { display: block; margin: .1em 0 0; color: var(--imk-grau); font-family: system-ui, sans-serif; font-size: .72em; line-height: 1.2; font-weight: normal; }
.imk-wrap .imk-zucht-tabelle tr.ist-unvollstaendig td { color: var(--imk-grau); }
.imk-wrap .imk-zucht-tabelle tr.ist-spitze td:nth-child(2) { font-weight: 700; }
.imk-wrap .imk-zucht-tabelle td a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--imk-linie-stark); }
.imk-wrap .imk-zucht-linie { color: var(--imk-grau); font-size: .82em; }
.imk-wrap .imk-zucht-platz {
	display: inline-grid;
	place-items: center;
	min-width: 1.7em;
	height: 1.7em;
	border-radius: 50%;
	font-family: system-ui, sans-serif;
	font-weight: 700;
	font-size: .85em;
}
.imk-wrap .imk-zucht-platz.ist-1 { background: var(--imk-honig); color: #fff; }
.imk-wrap .imk-zucht-platz.ist-2 { background: var(--imk-linie-stark); color: #fff; }
.imk-wrap .imk-zucht-platz.ist-3 { background: #b08968; color: #fff; }
@media print {
	.imk-wrap .imk-aw-blaettern { display: none !important; }
}


/* ======================================================================
   v1.51.0 – Aufgaben am Stand, Abhaken trägt ein, Heute im Kalender
   ====================================================================== */

/* Der Kasten "Zu tun" – ganz oben am Stand, vor dem Raster. */
.imk-wrap .imk-zutun { border-left: 4px solid var(--imk-honig); }
.imk-wrap .imk-zutun-kopf {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .3em .6em;
	margin: 0;
}
.imk-wrap .imk-zutun-kopf .imk-erfassen-titel { margin: 0; padding: 0; }
.imk-wrap .imk-zutun-wann { font-family: system-ui, sans-serif; font-size: .8em; color: var(--imk-grau); }
.imk-wrap .imk-zutun > .imk-hinweis { margin: .6em 0 0; }

/* Eine Aufgabenzeile – dieselbe am Stand und auf der Startseite. */
.imk-wrap .imk-aufgaben { display: block; margin: .5em 0 0; }
.imk-wrap .imk-aufgabe {
	display: grid;
	grid-template-columns: 14px 1fr;
	gap: .1em .6em;
	padding: .7em 0;
	border-bottom: 1px solid var(--imk-grau-hell);
}
.imk-wrap .imk-aufgabe:last-child { border-bottom: 0; padding-bottom: .1em; }
.imk-wrap .imk-aufgabe-punkt {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 2px solid var(--imk-honig);
	margin-top: .45em;
}
.imk-wrap .imk-aufgabe.ist-ueberfaellig .imk-aufgabe-punkt { background: var(--imk-rot); border-color: var(--imk-rot); }
.imk-wrap .imk-aufgabe-text { grid-column: 2; }
.imk-wrap .imk-aufgabe-text b { display: block; font-size: 1em; line-height: 1.3; }
.imk-wrap .imk-aufgabe-text small {
	display: block;
	font-family: system-ui, sans-serif;
	font-size: .78em;
	line-height: 1.4;
	color: var(--imk-grau);
}
.imk-wrap .imk-aufgabe-spaet { color: var(--imk-rot); font-weight: 600; }
.imk-wrap .imk-aufgabe-notiz { margin-top: .15em; }
/* Spezifischer als ".imk-formular-box form", das sonst alles untereinander
   und mittig stellt – hier sollen die zwei Knöpfe nebeneinander links stehen. */
.imk-wrap .imk-formular-box form.imk-aufgabe-knoepfe,
.imk-wrap .imk-aufgabe-knoepfe {
	grid-column: 2;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: .4em;
	margin: .5em 0 0;
	padding: 0;
	max-width: none;
}
/* Der Weg in die Maske ist der häufigere Griff – deshalb der kräftige Knopf. */
.imk-wrap .imk-aufgabe-eintragen {
	display: inline-flex;
	align-items: center;
	gap: .3em;
	min-height: 42px;
	padding: 0 .9em;
	border-radius: 999px;
	background: var(--imk-honig);
	color: #fff;
	font-family: system-ui, sans-serif;
	font-size: .88em;
	text-decoration: none;
}
.imk-wrap .imk-aufgabe-eintragen:hover,
.imk-wrap .imk-aufgabe-eintragen:focus { background: var(--imk-honig-dunkel); color: #fff; }
/* Der zweite Knopf als heller Ring – nicht der graue Standardknopf des Browsers. */
.imk-wrap .imk-aufgabe-knoepfe .imk-untertab {
	min-height: 42px;
	padding: 0 .9em;
	border: 1px solid var(--imk-linie-stark);
	border-radius: 999px;
	background: var(--imk-papier);
	color: var(--imk-tinte);
	font-family: system-ui, sans-serif;
	font-size: .85em;
	font-weight: 600;
	margin: 0;
	cursor: pointer;
}
.imk-wrap .imk-aufgabe-knoepfe .imk-untertab:hover,
.imk-wrap .imk-aufgabe-knoepfe .imk-untertab:focus { border-color: var(--imk-gruen); color: var(--imk-gruen); }

/* Der grüne Kasten im Erledigt-Dialog: was außer dem Häkchen geschrieben wird. */
.imk-wrap .imk-erledigt-eintrag,
.imk-erledigt-dialog .imk-erledigt-eintrag {
	background: var(--imk-gruen-hell);
	border-left: 3px solid var(--imk-gruen);
	border-radius: 0 var(--imk-radius-klein) var(--imk-radius-klein) 0;
	padding: .5em .7em;
	margin: .2em 0 .8em;
	font-size: .92em;
	line-height: 1.4;
}

/* "Heute" im Kalenderkopf. */
.imk-wrap .imk-jahr-heute {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	min-height: 38px;
	padding: 0 .75em;
	border-radius: 999px;
	background: var(--imk-honig-hell);
	border: 1px solid var(--imk-honig);
	color: var(--imk-honig-dunkel);
	font-family: system-ui, sans-serif;
	font-size: .84em;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.imk-wrap .imk-jahr-heute i { width: 7px; height: 7px; border-radius: 50%; background: var(--imk-honig); flex: none; }
.imk-wrap .imk-jahr-heute:hover,
.imk-wrap .imk-jahr-heute:focus { background: var(--imk-honig); color: #fff; }
.imk-wrap .imk-jahr-heute:hover i,
.imk-wrap .imk-jahr-heute:focus i { background: var(--imk-papier); }
/* Am Handy nur das Datum – "Heute" sagt der Knopf schon durch seine Farbe. */
.imk-wrap .imk-jahr-heute-wort { display: none; }
@media (min-width: 900px) {
	.imk-wrap .imk-jahr-heute-wort { display: inline; }
}
/* Kurz hervorheben, wenn man hergesprungen ist. */
.imk-wrap .imk-jahr-tag.ist-gefunden {
	animation: imk-gefunden 1.6s ease-out;
}
@keyframes imk-gefunden {
	0%, 60% { box-shadow: 0 0 0 3px var(--imk-honig); }
	100% { box-shadow: 0 0 0 3px rgba(181, 140, 66, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.imk-wrap .imk-jahr-tag.ist-gefunden { animation: none; box-shadow: 0 0 0 3px var(--imk-honig); }
}

/* ------------------------------------------------------------------ v1.54.0
   Besetzte Wabengassen neben der Milbenzahl im Zählgang. Gestrichelt und
   leiser als das Milbenfeld: die Milben sind die Pflicht, die Gassen die
   Kür - aber ohne sie ist der Fall zwischen Völkern nicht vergleichbar.
   Die Kachel darf umbrechen, damit auf schmalen Handys nichts herausläuft. */
.imk-zaehlplatz { flex-wrap: wrap; }
.imk-zaehlfeld-gassen {
	flex: none;
	max-width: 5.5em;
	padding: .3em .4em;
	font-size: .85em;
	text-align: center;
	color: var(--imk-grau);
	border: 1px dashed var(--imk-linie-stark);
	border-radius: 4px;
	background: transparent;
}
.imk-zaehlfeld-gassen::placeholder { font-size: .9em; }
.imk-zaehlfeld-gassen:focus {
	color: inherit;
	border-style: solid;
	border-color: var(--imk-gruen);
}

/* ------------------------------------------------------------------ v1.55.0
   Jahresaufgaben: die wiederkehrenden Termine einer Saison auf einen Druck.
   Die Liste zeigt vor dem Drücken, was entsteht - ein Knopf, dessen Wirkung
   man erst hinterher sieht, wird nicht gedrückt. */
.imk-jahresplan-liste {
	list-style: none;
	margin: .6em 0 1em;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .3em;
}
.imk-jahresplan-liste li {
	display: flex;
	gap: .7em;
	align-items: baseline;
	padding: .3em 0;
	border-bottom: 1px solid var(--imk-linie);
	font-size: .95em;
}
.imk-jahresplan-liste li:last-child { border-bottom: 0; }
.imk-jahresplan-tag {
	flex: none;
	min-width: 3.6em;
	font-weight: 700;
	text-align: right;
	color: var(--imk-honig-dunkel);
}
.imk-jahresplan-liste li.ist-vergangen { color: var(--imk-grau); }
.imk-jahresplan-liste li.ist-vergangen .imk-jahresplan-tag {
	color: var(--imk-grau);
	text-decoration: line-through;
}
/* Spezifischer als ".imk-formular-box form", das jedes Formular in der Box
   senkrecht stapelt - hier sollen Saison, Stand und Knopf nebeneinander
   stehen und linksbündig beginnen. */
.imk-formular-box form.imk-jahresplan-form {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: flex-start;
	gap: .7em;
	padding: .2em 0 0;
}
.imk-jahresplan-form label { flex: 0 1 auto; }

/* ------------------------------------------------------------------ v1.56.0
   Wetter am Stand. Keine Wetteranzeige, sondern eine Entscheidungshilfe: Der
   Streifen sagt je Tag, ob das Fenster fuer Ameisensaeure offen ist. Er
   scrollt waagerecht, damit zwei Wochen auch auf ein Handy passen. */
.imk-wetter-kopf {
	display: flex;
	align-items: baseline;
	gap: .6em;
	flex-wrap: wrap;
	margin-bottom: .2em;
}
.imk-wetter-jetzt { font-size: 2.1em; font-weight: 700; line-height: 1; }
.imk-wetter-ort { color: var(--imk-grau); font-size: .9em; }
.imk-wetter-fenster {
	margin: .8em 0 1em;
	padding: .6em .8em;
	border-left: 4px solid var(--imk-gruen);
	background: var(--imk-gruen-hell);
	border-radius: 0 6px 6px 0;
}
.imk-wetter-leiste {
	display: flex;
	gap: .3em;
	overflow-x: auto;
	padding-bottom: .4em;
}
.imk-wetter-tag {
	flex: 1 0 5.4em;
	display: flex;
	flex-direction: column;
	gap: .15em;
	padding: .5em .4em;
	border: 1px solid var(--imk-linie);
	border-radius: 6px;
	text-align: center;
	background: var(--imk-papier);
}
.imk-wetter-wt { font-size: .78em; color: var(--imk-grau); }
.imk-wetter-max { font-size: 1.25em; font-weight: 700; line-height: 1.1; }
.imk-wetter-min { font-size: .8em; color: var(--imk-grau); }
.imk-wetter-regen { font-size: .72em; color: var(--imk-grau); }
.imk-formular-box form.imk-wetter-grenzen-form { flex-direction: column; }
.imk-wetter-grenzen {
	display: flex;
	flex-wrap: wrap;
	gap: .7em;
	align-items: flex-end;
}
.imk-wetter-grenzen label { flex: 0 1 12em; }

/* ------------------------------------------------------------------ v1.57.0
   Das Wetter des Tages im Kalender-Tagesbereich: Hoechst- und Tiefstwert
   und der Niederschlag. Ein Urteil je Tag stand hier bis v1.57.1 auch an
   Tagen, an denen nichts zu entscheiden war - das ist gestrichen. */
.imk-kal-wetter {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .1em .5em;
	margin: 0 0 .5em;
	padding: .35em .6em;
	border-radius: 6px;
	background: var(--imk-grau-hell);
	font-size: .9em;
}
.imk-kal-wetter-ort {
	font-weight: 700;
	color: var(--imk-honig-dunkel);
}
.imk-kal-wetter-min,
.imk-kal-wetter-regen { color: var(--imk-grau); font-size: .9em; }

/* ------------------------------------------------------------------ v1.57.2
   Der Titel einer offenen Aufgabe fuehrt selbst in die Maske. Am Stand, mit
   Handschuh, ist der kleine Link darunter das falsche Ziel - die ganze
   Ueberschrift ist die Flaeche, die man trifft. */
.imk-kal-titel-link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--imk-linie-stark);
}
.imk-kal-titel-link:hover,
.imk-kal-titel-link:focus {
	color: var(--imk-honig-dunkel);
	border-bottom-color: var(--imk-honig);
}

/* ------------------------------------------------------------------ v1.57.3
   Die Wabengassen sind nur an den vier Monitoring-Terminen dran. Ohne den
   Schalter bleibt im Zaehlgang genau ein Feld je Beute: die Milbenzahl. */
.imk-standplan-zaehlen:not(.zeigt-gassen) .imk-zaehlfeld-gassen { display: none; }
.imk-gassen-schalter { margin: .2em 0 .1em; }

/* ------------------------------------------------------------------ v1.59.0
   Sammelblatt: zwanzig Voelker in einem Rutsch. Feste Zeichenbreite, damit
   die Spalten beim Tippen und beim Einfuegen untereinander stehen. */
.imk-sammelblatt textarea {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .95em;
	line-height: 1.5;
	white-space: pre;
	overflow-x: auto;
}


/* ------------------------------------------------------------------
   v1.61.0: Mehrere Völker, ein Eintrag im Kalender
   Eine Durchsicht über 20 Völker steht als eine Zeile im Tag; die Völker
   klappen darunter auf, jedes mit Notiz und eigenen Links (Rückmeldung
   26.09.2026). Die Notiz rutscht unter die Beute auf volle Breite – in einer
   Mittelspalte würde sie am Handy Wort für Wort umbrechen.
   ------------------------------------------------------------------ */
.imk-wrap .imk-kal-gruppe-auf { margin-top: .35em; }
.imk-wrap .imk-kal-gruppe-auf > summary {
	cursor: pointer;
	color: var(--imk-honig-dunkel);
	font-size: .9em;
	min-height: 36px;
	display: flex;
	align-items: center;
	list-style: none;
}
.imk-wrap .imk-kal-gruppe-auf > summary::-webkit-details-marker { display: none; }
.imk-wrap .imk-kal-gruppe-auf > summary::before { content: "▸"; margin-right: .4em; transition: transform .15s; }
.imk-wrap .imk-kal-gruppe-auf[open] > summary::before { transform: rotate(90deg); }
.imk-wrap .imk-kal-gruppe-liste { list-style: none; margin: .2em 0 0; padding: 0; }
.imk-wrap .imk-kal-gruppe-liste li {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: .1em .5em;
	align-items: baseline;
	padding: .4em 0;
	border-top: 1px solid var(--imk-linie);
	font-size: .92em;
}
.imk-wrap .imk-kal-gruppe-liste li b { display: inline; font-weight: 600; }
.imk-wrap .imk-kal-gruppe-notiz { color: var(--imk-tinte); grid-column: 1 / -1; grid-row: 2; }
.imk-wrap .imk-kal-gruppe-links { font-size: .8em; white-space: nowrap; }
.imk-wrap .imk-kal-gruppe-links .imk-bearbeiten-link { margin-right: .4em; }
@media (prefers-reduced-motion: reduce) {
	.imk-wrap .imk-kal-gruppe-auf > summary::before { transition: none; }
}


/* ------------------------------------------------------------------
   v1.61.1: Erledigt grün, geplant braun
   Was erledigt ist, steht in der Farbe der Chronik – beides ist getan, die
   Vergangenheit ist damit einfarbig. Was ansteht, ist braun und voll
   deckend: Das milchige Blass machte die Planung schwer lesbar
   (Rückmeldung 29.09.2026). Ein brauner Termin in der Vergangenheit heißt
   damit: liegengeblieben. Überschreibt die Regeln aus v1.49.0/v1.49.1.
   ------------------------------------------------------------------ */
.imk-wrap .imk-kal-text.ist-termin.ist-erledigt,
.imk-wrap .imk-kal-text.ist-termin.ist-offen { opacity: 1; font-weight: normal; }
.imk-wrap .imk-kal-text.ist-termin.ist-erledigt { color: var(--imk-gruen); }
.imk-wrap .imk-kal-text.ist-termin.ist-offen { color: var(--imk-honig-dunkel); }

.imk-wrap .imk-kal-eintrag.ist-termin.ist-erledigt b { color: var(--imk-gruen); }
.imk-wrap .imk-kal-eintrag.ist-termin.ist-offen b { color: var(--imk-honig-dunkel); font-weight: 700; }
.imk-wrap .imk-kal-eintrag.ist-termin.ist-erledigt > .imk-kal-punkt { background: var(--imk-gruen); }
.imk-wrap .imk-kal-eintrag.ist-termin.ist-offen > .imk-kal-punkt { background: var(--imk-honig-dunkel); opacity: 1; }

/* Am Handy dieselben zwei Farben als Punkte: grün getan, braun geplant. */
.imk-wrap .imk-kal-punkt.ist-termin.ist-erledigt { background: var(--imk-gruen); }
.imk-wrap .imk-kal-punkt.ist-termin.ist-offen { background: var(--imk-honig-dunkel); box-shadow: none; }


/* ------------------------------------------------------------------
   v1.62.0: Zuchtauswahl – Ergebnis oben, darunter eine Kachel je Kriterium
   Die Farbe einer Kachel (--kf) ist die ihres Stücks im Balken der
   Rangliste. Gruppen in den Kacheln: grün gut, rot schlecht, grau Mitte.
   ------------------------------------------------------------------ */
.imk-wrap .imk-zuchtauswahl .imk-aw-unter { margin-bottom: .8em; }
.imk-wrap .imk-za-ergebnis { background: var(--imk-papier); border: 1px solid var(--imk-linie); border-radius: var(--imk-radius); padding: .9em 1em; margin: 0 0 1em; }
.imk-wrap .imk-za-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: .8em; flex-wrap: wrap; margin-bottom: .5em; }
.imk-wrap .imk-za-klein { font-family: system-ui, sans-serif; font-size: .8em; color: var(--imk-grau); }
.imk-wrap .imk-za-regel { font-family: system-ui, sans-serif; font-size: .82em; color: var(--imk-grau); line-height: 1.45; margin: 0 0 .8em; }
.imk-wrap .imk-za-regel b { color: var(--imk-tinte); }
.imk-wrap .imk-za-liste { display: grid; gap: 2px; }
.imk-wrap .imk-za-zeile {
	display: grid;
	grid-template-columns: 2.2em 6.5em 1fr 3.2em 12em;
	align-items: center;
	gap: .6em;
	padding: .35em .5em;
	border-radius: 8px;
	border: 1px solid transparent;
	cursor: pointer;
}
.imk-wrap .imk-za-zeile:hover { background: var(--imk-papier-warm); }
.imk-wrap .imk-za-zeile.ist-gewaehlt { background: var(--imk-honig-hell); border-color: var(--imk-honig); }
.imk-wrap .imk-za-zeile.ist-schwelle { border-top: 2px dashed var(--imk-honig); border-radius: 0 0 8px 8px; margin-top: .3em; padding-top: .55em; }
.imk-wrap .imk-za-zeile:focus-visible, .imk-wrap .imk-za-chip:focus-visible { outline: 3px solid var(--imk-honig-dunkel); outline-offset: 1px; }
.imk-wrap .imk-za-platz { font-family: system-ui, sans-serif; font-weight: 700; color: var(--imk-grau); text-align: right; }
.imk-wrap .imk-za-beute { font-weight: 700; white-space: nowrap; }
.imk-wrap .imk-za-balken { display: flex; height: 16px; background: var(--imk-grau-hell); border-radius: 4px; overflow: hidden; }
.imk-wrap .imk-za-balken span { display: block; height: 100%; }
.imk-wrap .imk-za-summe { font-family: system-ui, sans-serif; font-weight: 700; text-align: right; }
.imk-wrap .imk-za-status { font-family: system-ui, sans-serif; font-size: .78em; font-weight: 700; padding: .15em .6em; border-radius: 999px; justify-self: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.imk-wrap .imk-za-status.ist-rennen { background: var(--imk-gruen-hell); color: var(--imk-gruen); }
.imk-wrap .imk-za-status.ist-vorbehalt { background: var(--imk-papier-warm); color: var(--imk-warn-gelb); }
.imk-wrap .imk-za-status.ist-feld { background: var(--imk-grau-hell); color: var(--imk-grau); font-weight: 600; }
.imk-wrap .imk-za-status.ist-aus { background: var(--imk-rot-hell); color: var(--imk-rot); }
.imk-wrap .imk-za-rechnung {
	font-family: system-ui, sans-serif;
	font-size: .82em;
	line-height: 1.6;
	background: var(--imk-papier);
	border: 1px solid var(--imk-linie);
	border-radius: 8px;
	padding: .6em .8em;
	margin: .2em 0 .4em;
}
.imk-wrap .imk-za-teil { display: inline-flex; align-items: center; gap: .35em; margin-right: 1em; }
.imk-wrap .imk-za-teil.ist-ohne { color: var(--imk-linie-stark); }
.imk-wrap .imk-za-punkt { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex: none; }
.imk-wrap .imk-za-legende { display: flex; flex-wrap: wrap; gap: .4em 1em; margin: .8em 0 0; font-family: system-ui, sans-serif; font-size: .78em; color: var(--imk-grau); }
.imk-wrap .imk-za-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .35em; vertical-align: -1px; }

.imk-wrap .imk-za-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1em; }
.imk-wrap .imk-za-kachel {
	background: var(--imk-papier);
	border: 1px solid var(--imk-linie);
	border-top: 5px solid var(--kf, var(--imk-linie));
	border-radius: var(--imk-radius);
	padding: .9em 1em;
	display: flex;
	flex-direction: column;
	gap: .6em;
	min-width: 0;
}
.imk-wrap .imk-za-kachel.ist-aus { background: var(--imk-papier-warm); }
.imk-wrap .imk-za-kachel.ist-aus .imk-za-gruppen { opacity: .55; }
.imk-wrap .imk-za-kachel-kopf { display: flex; justify-content: space-between; gap: .6em; align-items: flex-start; }
.imk-wrap .imk-za-kachel h3 { margin: 0; font-size: 1.05em; }
.imk-wrap .imk-za-was { font-family: system-ui, sans-serif; font-size: .78em; color: var(--imk-grau); margin: .15em 0 0; line-height: 1.35; }
.imk-wrap .imk-za-zustand { font-family: system-ui, sans-serif; font-size: .75em; font-weight: 700; padding: .15em .6em; border-radius: 999px; white-space: nowrap; background: var(--imk-grau-hell); color: var(--imk-grau); }
.imk-wrap .imk-za-zustand.ist-aktiv { background: var(--imk-gruen-hell); color: var(--imk-gruen); }
.imk-wrap .imk-za-gewicht { display: grid; grid-template-columns: auto 1fr auto; gap: .6em; align-items: center; font-family: system-ui, sans-serif; font-size: .82em; margin: 0; }
.imk-wrap .imk-za-gewicht input[type=range] { width: 100%; min-height: 0; padding: 0; border: 0; accent-color: var(--kf, var(--imk-honig)); background: transparent; }
.imk-wrap .imk-za-gewicht output { font-weight: 700; min-width: 7.5em; text-align: right; }
.imk-wrap .imk-za-gewicht output small { font-weight: normal; color: var(--imk-grau); display: block; font-size: .9em; }
.imk-wrap .imk-za-gruppen { display: flex; gap: .5em; overflow-x: auto; padding-bottom: .2em; }
.imk-wrap .imk-za-gruppe { flex: 1 1 0; min-width: 70px; background: var(--imk-papier-warm); border-radius: 8px; padding: .4em; }
.imk-wrap .imk-za-gruppe-kopf { font-family: system-ui, sans-serif; font-size: .75em; font-weight: 700; color: var(--imk-grau); text-align: center; margin-bottom: .35em; white-space: nowrap; }
.imk-wrap .imk-za-gruppe.ist-gut .imk-za-gruppe-kopf { color: var(--imk-gruen); }
.imk-wrap .imk-za-gruppe.ist-schlecht .imk-za-gruppe-kopf { color: var(--imk-rot); }
.imk-wrap .imk-za-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.imk-wrap .imk-za-chip {
	font: 700 .78em/1 system-ui, sans-serif;
	padding: .4em .5em;
	min-height: 0;
	min-width: 2.6em;
	border-radius: 6px;
	background: var(--imk-papier);
	border: 1px solid var(--imk-linie);
	color: var(--imk-tinte);
	cursor: pointer;
	text-align: center;
}
.imk-wrap .imk-za-gruppe.ist-gut .imk-za-chip { background: var(--imk-gruen-hell); border-color: #b9dcc3; }
.imk-wrap .imk-za-gruppe.ist-schlecht .imk-za-chip { background: var(--imk-rot-hell); border-color: #ecc3be; }
.imk-wrap .imk-za-chip.ist-schwach::after { content: "schwach"; display: block; font-weight: 600; font-size: .7em; color: var(--imk-warn-gelb); margin-top: .2em; }
.imk-wrap .imk-za-chip.ist-gewaehlt { outline: 3px solid var(--imk-honig); outline-offset: 1px; }
.imk-wrap .imk-za-fehlt { font-family: system-ui, sans-serif; font-size: .85em; color: var(--imk-grau); background: var(--imk-papier-warm); border-radius: 8px; padding: .7em .8em; line-height: 1.45; margin: 0; }
.imk-wrap .imk-za-beleg { font-family: system-ui, sans-serif; font-size: .78em; color: var(--imk-grau); line-height: 1.45; margin: 0; }
.imk-wrap .imk-zucht-gewichte { display: flex; flex-wrap: wrap; gap: .6em; align-items: center; margin: 1em 0 0; }
.imk-wrap .imk-zucht-gewichte .imk-hinweis { margin: 0; flex: 1 1 16em; }
@media (max-width: 700px) {
	.imk-wrap .imk-za-zeile { grid-template-columns: 2em 1fr auto; row-gap: .3em; }
	.imk-wrap .imk-za-zeile .imk-za-balken { grid-column: 1 / -1; order: 5; }
	.imk-wrap .imk-za-zeile .imk-za-summe { order: 3; }
	.imk-wrap .imk-za-zeile .imk-za-status { grid-column: 2 / 4; order: 4; }
	.imk-wrap .imk-za-kacheln { grid-template-columns: 1fr; }
	.imk-wrap .imk-za-teil { display: flex; margin: .15em 0; }
}
@media (prefers-reduced-motion: no-preference) {
	.imk-wrap .imk-za-balken span { transition: width .25s ease; }
}

/* ------------------------------------------------------------------ v1.63.0
   Abgehakte Aufgabe und ihre Maßnahme als ein Eintrag: der Haken darunter,
   und der gelbe Hinweis, wenn zur abgehakten Aufgabe nichts eingetragen ist. */
.imk-wrap .imk-kal-aus-aufgabe { display: block; color: var(--imk-grau); font-size: .85em; margin-top: .15em; }
.imk-wrap .imk-kal-aus-aufgabe::before { content: "✓ "; color: var(--imk-gruen); font-weight: 700; }
.imk-wrap .imk-kal-fehlt { display: block; margin-top: .45em; padding: .45em .6em; border-left: 3px solid var(--imk-warn-gelb); background: var(--imk-honig-hell); border-radius: 0 8px 8px 0; font-size: .9em; color: var(--imk-tinte); line-height: 1.4; }
.imk-wrap .imk-kal-fehlt a { color: var(--imk-honig-dunkel); font-weight: 700; }


/* ------------------------------------- Königin und Schwarmstimmung auf der Kachel
 * v1.65.0, Entwurf vom 04.10.2026. Unten die Königin: Punkt in der Jahresfarbe,
 * wenn sie gezeichnet ist, sonst ein gestrichelter Ring. Oben rechts die
 * Schwarmstimmung der letzten Durchsicht: ++ kräftig rot, + hell mit Rand.
 */
/* Jahr zweistellig, größer und fett (v1.72.0) – am Stand mit einem Blick lesbar. */
.imk-kachel-koenigin {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: .95rem;
	font-weight: 700;
	line-height: 1;
	color: var(--imk-tinte, #231F20);
	font-variant-numeric: tabular-nums;
}
.imk-kpunkt {
	flex: none;
	width: 13px;
	height: 13px;
	box-sizing: border-box;
	border-radius: 50%;
	border: 1.5px solid rgba(35, 31, 32, .55);
}
.imk-kpunkt-weiss { background: var(--imk-papier); }
.imk-kpunkt-gelb  { background: #F2C200; }
.imk-kpunkt-rot   { background: #D7261E; }
.imk-kpunkt-gruen { background: #2E9B46; }
.imk-kpunkt-blau  { background: #1E6FD0; }
.imk-kpunkt-ohne  { background: transparent; border: 1.5px dashed var(--imk-grau); }

.imk-schwarmmarke {
	position: absolute;
	top: 4px;
	right: 12px;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 700;
	font-size: .72rem;
	line-height: 1;
	letter-spacing: .02em;
	padding: 3px 5px;
	border-radius: 6px;
}
.imk-schwarm-2 { background: #B3261E; color: #FFFFFF; }
.imk-schwarm-1 { background: #FCF0D9; color: #A86A0C; border: 1px solid #A86A0C; padding: 2px 4px; }
.imk-flug-l ~ .imk-schwarmmarke,
.imk-schwarmmarke:has(~ .imk-flug-l) { right: 6px; }
/* Zwei Linien: kleinere Kacheln, das Jahr bleibt, nur etwas enger. */
.imk-stand-raster.ist-zwei .imk-kachel-koenigin { font-size: .8rem; gap: 3px; }
.imk-stand-raster.ist-zwei .imk-kpunkt { width: 11px; height: 11px; }
.imk-stand-raster.ist-zwei .imk-schwarmmarke { top: 3px; right: 9px; font-size: .62rem; padding: 2px 3px; }

/* Auswahl in der Durchsicht */
.imk-schwarmwahl {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .4em;
	margin: .5em 0 .2em;
}
.imk-schwarmwahl-titel { grid-column: 1 / -1; font-size: .95em; }
.imk-schwarmwahl-option {
	position: relative;
	display: grid;
	gap: .1em;
	justify-items: center;
	padding: .5em .3em;
	border: 1px solid var(--imk-linie);
	border-radius: 9px;
	background: var(--imk-papier);
	font-size: .78em;
	color: var(--imk-grau);
	text-align: center;
	cursor: pointer;
}
.imk-schwarmwahl-option b { font-size: 1.3em; color: var(--imk-tinte); }
.imk-schwarmwahl-option input { position: absolute; opacity: 0; pointer-events: none; }
.imk-schwarmwahl-option:has(input:checked) {
	border-color: var(--imk-honig);
	background: var(--imk-honig-hell);
	outline: 2px solid var(--imk-honig);
	outline-offset: -1px;
}
.imk-schwarmwahl-option:has(input:focus-visible) { outline: 3px solid var(--imk-honig); }


/* ------------------------------------------- Neues Volk und freie Plätze (v1.66.0) */
a.imk-beute-leer-link {
	gap: 5px;
	flex-direction: row;
	text-decoration: none;
	cursor: pointer;
}
.imk-wrap a.imk-beute-leer-link { color: #9C9186; text-decoration: none; }
@media (hover: hover) {
	a.imk-beute-leer-link:hover { border-color: var(--imk-honig); color: var(--imk-honig-dunkel); }
}
.imk-leer-plus {
	display: inline-grid;
	place-items: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--imk-honig);
	color: #FFFFFF;
	font-weight: 700;
	font-size: .95em;
	line-height: 1;
}
.imk-beute-leer-sortier {
	flex-direction: row;
	justify-content: flex-start;
	width: 100%;
	height: auto;
	min-height: 52px;
	padding: .3em .8em .3em .6em;
	font-size: .85em;
}
.imk-beute-leer-sortier .imk-pfeile { display: flex; gap: 4px; margin-left: auto; }
.imk-pfeil-text {
	min-width: auto;
	padding: 0 .55em;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: .74rem;
}
.imk-pfeil-weg { color: #B3261E; }
.imk-raster-knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	margin-top: 1em;
}
.imk-raster-knoepfe .imk-inline-form { margin: 0; }


/* ---------------------------------------------------- Jahresnote (v1.67.0) */
.imk-jahresnote { margin-top: 1em; }
.imk-jn-zeile {
	display: grid;
	grid-template-columns: 3em 1fr;
	gap: .4em .6em;
	align-items: center;
	padding: .6em 0;
	border-bottom: 1px solid var(--imk-grau-hell);
}
.imk-jn-nr { font-weight: 700; font-size: 1.25em; text-align: center; }
.imk-jn-rechts { display: grid; gap: .35em; min-width: 0; }
.imk-jn-merk { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .74rem; color: var(--imk-grau); }
.imk-jn-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.imk-jn-label { width: 5.2em; font-size: .85em; color: var(--imk-grau); }
.imk-jn-option { position: relative; cursor: pointer; }
.imk-jn-option input { position: absolute; opacity: 0; pointer-events: none; }
.imk-jn-option span {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	min-height: 40px;
	border: 1px solid var(--imk-linie);
	border-radius: 7px;
	background: var(--imk-papier);
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 600;
	color: var(--imk-grau);
}
.imk-jn-option.ist-mitte span { border-style: dashed; }
.imk-jn-option input:checked + span { background: var(--imk-honig); border-color: var(--imk-honig); border-style: solid; color: #FFFFFF; }
.imk-jn-option input:focus-visible + span { outline: 3px solid var(--imk-honig); outline-offset: 1px; }
.imk-jahresnote .imk-button { margin-top: 1em; }
.imk-nur-abweichung { margin: 0 0 .4em; }


/* ------------------------------------------------ Weitere Nutzer (v1.68.0) */
.imk-weitere-nutzer { display: grid; gap: .8em; }
.imk-nutzer-zeile { border: 1px solid var(--imk-linie); border-radius: 10px; padding: .6em .8em; background: var(--imk-papier); }
.imk-nutzer-zeile summary { cursor: pointer; }
.imk-nutzer-zeile form { margin-top: .7em; }
.imk-nutzer-neu { border-top: 1px solid var(--imk-linie); padding-top: .8em; }

/* ------------------------------------------------------------------ v1.69.0
   Wetter in jeder Tageszelle, wie in der Voranzucht: oben die Nacht, darunter
   der Tag, darunter der Regen ab 1 mm. Kursiv = Vorhersage. Orange nur, wenn
   der Tag über der Obergrenze für die Ameisensäure liegt (Einstellungen). */
.imk-wrap .imk-jahr-tag .imk-kz-wetter {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .05em;
	font-family: system-ui, sans-serif;
	font-variant-numeric: tabular-nums;
	line-height: 1.15;
}
.imk-wrap .imk-kz-wetter span { white-space: nowrap; }
.imk-wrap .imk-kz-nacht { color: var(--imk-grau); }
.imk-wrap .imk-kz-tag   { color: var(--imk-tinte); }
.imk-wrap .imk-kz-regen { color: #2F6A9E; font-size: .76em; }
.imk-wrap .imk-kz-wetter.ist-vorhersage .imk-kz-nacht,
.imk-wrap .imk-kz-wetter.ist-vorhersage .imk-kz-tag,
.imk-wrap .imk-kz-wetter.ist-vorhersage .imk-kz-regen { font-style: italic; }
.imk-wrap .imk-kz-tag.ist-heiss {
	background: #B4511A;
	color: #FFFFFF;
	font-weight: 700;
	font-style: normal !important;
	border-radius: 4px;
	padding: 0 .25em;
}
@media (max-width: 899px) {
	.imk-wrap .imk-jahr-tag .imk-kz-wetter { font-size: .9em; }
}
@media (min-width: 900px) {
	/* Am PC eine Zeile unten in der Zelle: „12° · 21° · 2 mm“. */
	.imk-wrap .imk-jahr-tag .imk-kz-wetter { flex-direction: row; align-items: baseline; gap: .45em; font-size: .82em; padding-top: .2em; }
}

/* ------------------------------------------------------------------
   v1.70.0: Ableger bilden – eigene Maske mit Gebervölkern
   Dezent statt bunt (Rückmeldung 05.10.2026): Fragen als schlichte
   Ja/Nein-Auswahl, Knöpfe hell, Warnungen nur als Text.
   ------------------------------------------------------------------ */
.imk-volk-art { display: flex; flex-wrap: wrap; gap: .4em; margin: 0 0 .8em; }
.imk-volk-art a {
	padding: .45em .9em; border-radius: 999px; border: 1px solid var(--imk-linie);
	color: var(--imk-tinte); text-decoration: none; font-size: .92em; background: var(--imk-papier);
}
.imk-volk-art a.ist-aktiv { border-color: var(--imk-honig); background: var(--imk-honig-hell); font-weight: 600; }

.imk-ableger fieldset.imk-ableger-schritt {
	border: 0; border-top: 1px solid var(--imk-linie); margin: 0; padding: .9em 0 0;
	display: flex; flex-direction: column; gap: .8em; min-width: 0;
}
.imk-ableger fieldset.imk-ableger-schritt:first-of-type { border-top: 0; padding-top: 0; }
.imk-ableger .imk-ableger-schritt > legend {
	padding: 0; margin-bottom: .2em; font-size: .78em; font-weight: 600;
	letter-spacing: .06em; text-transform: uppercase; color: var(--imk-grau);
}
.imk-ableger .imk-ableger-schritt > legend + * { margin-top: .4em; }
.imk-ableger-frage { display: flex; flex-direction: column; gap: .2em; }
.imk-ableger-frage > span:first-child { font-size: .95em; }
.imk-ableger-frage small { color: var(--imk-grau); font-size: .82em; }
.imk-ableger-jn { display: flex; flex-wrap: wrap; gap: .1em 1.2em; }
.imk-formular-box .imk-ableger-jn label,
.imk-ersatz-dialog .imk-ableger-jn label {
	flex-direction: row; align-items: center; gap: .45em; min-height: 40px;
	font-weight: 400; font-size: .98em; color: var(--imk-tinte);
}
.imk-ersatz-dialog .imk-ableger-jn input { width: 20px; height: 20px; min-height: 0; margin: 0; display: inline-block; }
.imk-ableger-frage.ist-offen > span:first-child,
.imk-ersatz-frage.ist-offen { color: var(--imk-rot); }
.imk-ableger-frage.ist-offen .imk-ableger-jn { background: var(--imk-rot-hell); border-radius: var(--imk-radius-klein); padding: 0 .5em; }
.imk-ableger-einger { padding-left: .9em; border-left: 2px solid var(--imk-linie); display: flex; flex-direction: column; gap: .7em; }

.imk-ableger-material { display: flex; flex-direction: column; gap: 1em; }
.imk-ableger-posten-kopf { margin: 0 0 .3em; }
.imk-ableger-posten-kopf small { color: var(--imk-grau); font-size: .82em; }
.imk-ableger-zeile + .imk-ableger-zeile { margin-top: .5em; }
.imk-ableger-zeile-felder { display: grid; grid-template-columns: minmax(0, 1fr) 4.5em 2.2em; gap: .5em; align-items: center; }
.imk-ableger-zeile-felder select,
.imk-ableger-zeile-felder input { min-width: 0; width: 100%; box-sizing: border-box; }
.imk-ableger-weg { border: 0; background: none; color: var(--imk-grau); font-size: 1.3em; min-height: 40px; cursor: pointer; }
.imk-ableger-info { margin: .25em 0 0; font-size: .84em; color: var(--imk-grau); line-height: 1.45; }
.imk-ableger-info:empty { display: none; }
.imk-link-knopf {
	border: 0; background: none; padding: .2em 0; font: inherit; font-size: .9em;
	color: var(--imk-honig-dunkel); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.imk-link-knopf.ist-offen { color: var(--imk-rot); }
.imk-ableger-warn { margin: 0; color: var(--imk-rot); font-size: .88em; }
.imk-ableger-warn:empty { display: none; }
.imk-ableger-knoepfe { display: flex; flex-direction: column; gap: .5em; }
/* Gegen die !important-Regel für .imk-wrap .imk-button weiter oben. */
.imk-wrap .imk-button.imk-button-dezent,
.imk-wrap button.imk-button.imk-button-dezent {
	background: var(--imk-honig-hell) !important; color: var(--imk-tinte) !important;
	border: 1px solid var(--imk-honig) !important; box-shadow: none;
}
.imk-wrap .imk-button.imk-button-dezent:hover,
.imk-wrap .imk-button.imk-button-dezent:focus { background: var(--imk-honig-hell) !important; color: var(--imk-tinte) !important; border-color: var(--imk-honig-dunkel) !important; }
.imk-ersatz-dialog .imk-ersatz-frage { margin: .6em 0 .2em; font-weight: 600; }
.imk-ersatz-dialog .imk-ersatz-anzahl { margin: .3em 0 .8em; }
.imk-ersatz-dialog .imk-ersatz-anzahl input { max-width: 6em; }

/* ------------------------------------------------------------------
   v1.71.0: Mehrfachboden – ein Platz, Abteile L/M/R von hinten gesehen.
   Im Grundriss liegen sie übereinander (siehe imk_standplan_inhalt).
   ------------------------------------------------------------------ */
.imk-mehrfach {
	display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); grid-template-columns: minmax(0, 1fr); gap: 2px;
	width: var(--imk-beute-gross, 92px); height: var(--imk-beute-gross, 92px); box-sizing: border-box;
	border: 2px solid var(--imk-honig); border-radius: 9px; padding: 2px;
}
.imk-mehrfach-abteil { min-width: 0; min-height: 0; display: flex; }
.imk-mehrfach-abteil > .imk-beute,
.imk-mehrfach-abteil > * { flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; box-sizing: border-box; }
.imk-mehrfach-abteil .imk-beute { flex-direction: row; gap: 4px; padding: 0 .3em; border-radius: 5px; }
.imk-mehrfach-abteil .imk-beute-nr { font-size: .78em; line-height: 1; }
.imk-mehrfach-abteil .imk-kachel-koenigin,
.imk-mehrfach-abteil .imk-notizmarke,
.imk-mehrfach-abteil .imk-brett { display: none; }
.imk-mehrfach-abteil .imk-schwarmmarke { position: static; font-size: .7em; }
.imk-mehrfach-abteil.ist-frei {
	align-items: center; justify-content: center;
	border: 1px dashed var(--imk-linie-stark); border-radius: 5px;
	color: var(--imk-grau); font-size: .7em;
}

/* ---------------------------------------------------------------------
 * Königin zeichnen (v1.72.0): am Stand eine Zeile je Beute, Jahr groß,
 * zwei Knöpfe; am Volk die Farbe zum gewählten Jahr.
 * ------------------------------------------------------------------- */
.imk-zeichnen-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.imk-zeichnen-zeile { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--imk-linie); border-radius: 10px; }
.imk-zeichnen-zeile.ist-fertig { opacity: .6; }
.imk-zeichnen-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.imk-zeichnen-rechts { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.imk-zeichnen-rechts .imk-krone, .imk-zeichnen-farbe .imk-krone { width: 22px; height: 18px; }
.imk-wrap select.imk-zeichnen-jahr, select.imk-zeichnen-jahr { width: auto; min-width: 4.2em; min-height: 40px; padding: 4px 8px; font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.imk-zeichnen-jahrtext { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.imk-zeichnen-seg { display: flex; border: 1px solid var(--imk-linie); border-radius: 10px; overflow: hidden; }
.imk-zeichnen-seg label { flex: 1; position: relative; margin: 0; cursor: pointer; }
.imk-zeichnen-seg label + label { border-left: 1px solid var(--imk-linie); }
.imk-zeichnen-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.imk-zeichnen-seg span { display: flex; align-items: center; justify-content: center; min-height: 42px; font-size: .9rem; }
.imk-zeichnen-seg input:checked + span { background: var(--imk-honig-hell); font-weight: 600; }
.imk-zeichnen-seg .ist-nf input:checked + span { background: var(--imk-rot-hell); color: var(--imk-rot); }
.imk-zeichnen-seg input:focus-visible + span { outline: 3px solid var(--imk-honig-dunkel); outline-offset: -3px; }
.imk-zeichnen-farbe { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--imk-grau-hell); margin: 0; }

/* Krone der Königin (v1.72.2): ohne Zeichen nur der Umriss, gezeichnet
 * Krone und Jahreszahl in der Jahresfarbe. Weiß und Gelb bekommen eine dunkle
 * Kontur, sonst verschwänden sie auf der weißen Kachel. */
.imk-krone { flex: none; display: block; overflow: visible; }
.imk-krone .imk-krone-form { fill: none; stroke: var(--imk-tinte); }
.imk-krone.imk-kpunkt-weiss .imk-krone-form { fill: #FFFFFF; }
.imk-krone.imk-kpunkt-gelb  .imk-krone-form { fill: #F2C200; }
.imk-krone.imk-kpunkt-rot   .imk-krone-form { fill: #D7261E; stroke: #7A1410; }
.imk-krone.imk-kpunkt-gruen .imk-krone-form { fill: #2E9B46; stroke: #17502A; }
.imk-krone.imk-kpunkt-blau  .imk-krone-form { fill: #1E6FD0; stroke: #10407A; }
.imk-krone.imk-kpunkt-weiss, .imk-krone.imk-kpunkt-gelb, .imk-krone.imk-kpunkt-rot,
.imk-krone.imk-kpunkt-gruen, .imk-krone.imk-kpunkt-blau { background: none; border: 0; }
.imk-kachel-koenigin { font-size: 1.1rem; gap: 3px; }
.imk-kachel-koenigin .imk-krone { width: 15px; height: 12px; }
.imk-kjahr.imk-kpunkt-weiss, .imk-kjahr.imk-kpunkt-gelb { -webkit-text-stroke: .6px #231F20; paint-order: stroke fill; }
.imk-kjahr.imk-kpunkt-weiss { color: #FFFFFF; }
.imk-kjahr.imk-kpunkt-gelb  { color: #F2C200; }
.imk-kjahr.imk-kpunkt-rot   { color: #D7261E; }
.imk-kjahr.imk-kpunkt-gruen { color: #2E9B46; }
.imk-kjahr.imk-kpunkt-blau  { color: #1E6FD0; }
.imk-kjahr { background: none !important; border: 0 !important; width: auto !important; height: auto !important; border-radius: 0 !important; }
.imk-stand-raster.ist-zwei .imk-kachel-koenigin { font-size: .9rem; }
.imk-stand-raster.ist-zwei .imk-kachel-koenigin .imk-krone { width: 12px; height: 10px; }

/* Wetter am Tag, genauer (v1.73.0): oben Ort, Temperaturen und Himmel mit
 * Zeichen, darunter klein Wind, Regen mit Uhrzeit und Sonnenstunden. */
.imk-kal-wetter { flex-direction: column; align-items: stretch; gap: .2em; }
.imk-kal-wetter-oben { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em .5em; }
.imk-kal-wetter-oben .imk-kal-wetter-regen { color: var(--imk-tinte); }
.imk-wetter-symbol { width: 1.1em; height: 1.1em; vertical-align: -.2em; margin-right: .2em; }
.imk-kal-wetter-details { display: flex; flex-wrap: wrap; gap: .1em 1em; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .8em; color: var(--imk-grau); }
.imk-kal-wetter-details b { color: var(--imk-tinte); font-weight: 600; }
.imk-kal-wetter-mm b { color: #2D6CC9; }

/* Regenwahrscheinlichkeit (v1.74.0): nur heute und künftig. Tageswert ab 20 %,
 * Tageszeiten ab 30 %, ab 60 % blau und fett. */
.imk-wetter-p { font-size: .68em; color: var(--imk-grau); min-height: 1.1em; font-variant-numeric: tabular-nums; }
.imk-wetter-p.ist-hoch { color: #2D6CC9; font-weight: 700; }
.imk-wetter-trocken { display: block; font-weight: 400; color: var(--imk-grau); margin-top: .2em; font-size: .9em; }
.imk-kal-wetter-p { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .78em; padding: 1px 7px; border-radius: 999px; background: #E6EEF9; color: #2D6CC9; font-weight: 700; }
.imk-kal-wetter-risiko b { font-weight: 600; }
.imk-kal-wetter-risiko b.ist-hoch { color: #2D6CC9; font-weight: 700; }

/* Schriftgröße aus den Einstellungen (v1.75.0): Faktor je Gerät, gesetzt als
 * Variable am .imk-wrap. Alles, was in em gesetzt ist, wächst mit. */
.imk-wrap { font-size: calc(19px * var(--imk-schrift-handy, 1)); }
@media (min-width: 900px) {
	.imk-wrap { font-size: calc(17px * var(--imk-schrift-desktop, 1)); }
}

/* Wetter am Termin (v1.75.0): grün passt, gelb beobachten, rot passt nicht. */
.imk-wrap .imk-termin-wetter { display: grid; gap: .3em; margin: .5em 0 .2em; padding: .55em .75em; border-radius: 10px; border-left: 4px solid var(--imk-linie); background: var(--imk-grau-hell); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .82em; line-height: 1.4; color: var(--imk-tinte); }
.imk-wrap .imk-termin-wetter small { display: block; font-size: .92em; color: var(--imk-grau); }
.imk-wrap .imk-termin-wetter.ist-passt { background: var(--imk-gruen-hell); border-left-color: var(--imk-gruen); }
.imk-wrap .imk-termin-wetter.ist-passt b { color: var(--imk-gruen); }
.imk-wrap .imk-termin-wetter.ist-beob { background: #FCF0D9; border-left-color: #A86A0C; }
.imk-wrap .imk-termin-wetter.ist-beob b { color: #A86A0C; }
.imk-wrap .imk-termin-wetter.ist-nicht { background: var(--imk-rot-hell); border-left-color: var(--imk-rot); }
.imk-wrap .imk-termin-wetter.ist-nicht b { color: var(--imk-rot); }
.imk-wrap .imk-termin-wetter-vorschlag { display: grid; gap: .35em; justify-items: start; padding-top: .45em; border-top: 1px dashed currentColor; margin: 0; }

/* ==================================================================
   Farbschemata (v1.76.0, Mockup "Farbschema" vom 06.10.2026)

   Honig ist das bisherige Aussehen. Wiese und Schiefer tauschen Grund,
   Linien und die Hauptfarbe (die Variablen heißen aus Gewohnheit weiter
   "honig"), Dunkel dreht alles um. Georgia bleibt überall. Die Klasse
   steht an <html> (eigenständige App) und am .imk-wrap (unter WordPress).
   Signalfarben (Fenster grün, Warnungen gelb/rot, Regen blau, Jahresfarben
   der Königin) bleiben in allen Schemata gleich.
   ================================================================== */
html.thema-wiese, .imk-wrap.thema-wiese {
	--imk-grund: #EDF2EC; --imk-papier: #FFFFFF; --imk-papier-warm: #F5F9F4;
	--imk-tinte: #1E2A22; --imk-grau: #5E6B62; --imk-grau-hell: #EEF3EE;
	--imk-linie: #D3DED5; --imk-linie-stark: #9DB0A2;
	--imk-honig: #2F7A4A; --imk-honig-dunkel: #1F5A35; --imk-honig-hell: #E2F0E6; --imk-braun: #1F3A2A;
}
html.thema-schiefer, .imk-wrap.thema-schiefer {
	--imk-grund: #F1F3F6; --imk-papier: #FFFFFF; --imk-papier-warm: #F6F8FA;
	--imk-tinte: #1E2430; --imk-grau: #5D6676; --imk-grau-hell: #EEF1F5;
	--imk-linie: #D5DCE5; --imk-linie-stark: #98A3B3;
	--imk-honig: #34597E; --imk-honig-dunkel: #22405F; --imk-honig-hell: #E5ECF5; --imk-braun: #1E2F45;
}
html.thema-dunkel, .imk-wrap.thema-dunkel {
	--imk-grund: #1B1916; --imk-papier: #27231F; --imk-papier-warm: #2F2A25;
	--imk-tinte: #F1EBE2; --imk-grau: #B3AA9F; --imk-grau-hell: #34302B;
	--imk-linie: #4A433B; --imk-linie-stark: #6E655A;
	--imk-honig: #C99A4A; --imk-honig-dunkel: #E3BD72; --imk-honig-hell: #3B3122; --imk-braun: #E6D3B3;
	--imk-gruen: #5BBD7C; --imk-gruen-hell: #1F3426; --imk-rot: #F08A80; --imk-rot-hell: #3A2220;
	color-scheme: dark;
}
html.thema-dunkel body { background: var(--imk-grund); color: var(--imk-tinte); }
html.thema-dunkel .imk-wrap input, html.thema-dunkel .imk-wrap select, html.thema-dunkel .imk-wrap textarea {
	background: var(--imk-papier-warm); color: var(--imk-tinte); border-color: var(--imk-linie);
}
html.thema-dunkel .imk-wrap .imk-kpunkt-weiss, html.thema-dunkel .imk-krone .imk-krone-form { stroke: #F1EBE2; }

/* Signalfarben, deutlich von jeder Hauptfarbe abgesetzt (v1.76.0): vorher war
   "beobachten" in Honigbraun und ging im Honig-Schema unter (Rückmeldung 06.10.2026). */
.imk-wrap { --imk-sig-gruen: #1F8A44; --imk-sig-gruen-hell: #E1F4E7; --imk-sig-gelb: #E0A800; --imk-sig-gelb-hell: #FFF5CC;
	--imk-sig-rot: #C62828; --imk-sig-rot-hell: #FDE3E0; }
html.thema-dunkel .imk-wrap, .imk-wrap.thema-dunkel { --imk-sig-gruen-hell: #173322; --imk-sig-gelb-hell: #3A3112; --imk-sig-rot-hell: #3D1B1A; --imk-sig-gruen: #5BCB82; --imk-sig-gelb: #F2C94C; --imk-sig-rot: #F28B82; }
.imk-wrap .imk-termin-wetter b::before { content: ""; display: inline-block; width: .8em; height: .8em; border-radius: 50%; margin-right: .4em; vertical-align: -.05em; background: currentColor; }
.imk-wrap .imk-termin-wetter.ist-passt { background: var(--imk-sig-gruen-hell); border-left-color: var(--imk-sig-gruen); }
.imk-wrap .imk-termin-wetter.ist-passt b { color: var(--imk-sig-gruen); }
.imk-wrap .imk-termin-wetter.ist-beob { background: var(--imk-sig-gelb-hell); border-left-color: var(--imk-sig-gelb); }
.imk-wrap .imk-termin-wetter.ist-beob b { color: var(--imk-tinte); }
.imk-wrap .imk-termin-wetter.ist-beob b::before { background: var(--imk-sig-gelb); box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.imk-wrap .imk-termin-wetter.ist-nicht { background: var(--imk-sig-rot-hell); border-left-color: var(--imk-sig-rot); }
.imk-wrap .imk-termin-wetter.ist-nicht b { color: var(--imk-sig-rot); }
.imk-wrap .imk-termin-wetter { border-left-width: 6px; }

/* Tageskarte mit Verlauf (v1.77.0) – Farben aus dem Schema, Kurve orange,
 * Regen blau, Nacht grau hinterlegt, Ameisensäure-Fenster blassgrün. */
.imk-wrap .imk-tageskarte { background: var(--imk-papier-warm); border: 1px solid var(--imk-linie); border-radius: var(--imk-radius); padding: .8em; display: grid; gap: .7em; margin: 0 0 .7em; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.imk-wrap .imk-tk-kopf { display: grid; grid-template-columns: auto 1fr; gap: .8em; align-items: start; }
.imk-wrap .imk-tk-temps { border-right: 1px solid var(--imk-linie); padding-right: .8em; text-align: center; line-height: 1.1; }
.imk-wrap .imk-tk-temps b { display: block; font: 700 2.1em/1 Georgia, "Times New Roman", serif; color: var(--imk-tinte); }
.imk-wrap .imk-tk-temps span { color: var(--imk-grau); }
.imk-wrap .imk-tk-himmel { display: grid; gap: .1em; min-width: 0; }
.imk-wrap .imk-tk-zeile { display: flex; align-items: center; gap: .45em; }
.imk-wrap .imk-tk-zeile strong { flex: 1; font: 700 1.05em Georgia, "Times New Roman", serif; color: var(--imk-tinte); }
.imk-wrap .imk-tk-zeile .imk-wetter-symbol { width: 1.3em; height: 1.3em; }
.imk-wrap .imk-tk-p { color: var(--imk-grau); font-variant-numeric: tabular-nums; }
.imk-wrap .imk-tk-himmel small { color: var(--imk-grau); font-size: .85em; }
.imk-wrap .imk-tk-verlauf { width: 100%; height: auto; display: block; }
.imk-tk-verlauf .imk-tk-nacht { fill: var(--imk-grau-hell); }
.imk-tk-verlauf .imk-tk-fenster { fill: #2E9B46; fill-opacity: .08; }
.imk-tk-verlauf .imk-tk-regen { fill: #3D7DD8; }
.imk-tk-verlauf .imk-tk-kurve { fill: none; stroke: #E5671B; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.imk-tk-verlauf .imk-tk-wert { fill: #E5671B; font: 700 12px system-ui, sans-serif; paint-order: stroke; stroke: var(--imk-papier-warm); stroke-width: 3px; }
.imk-tk-verlauf .imk-tk-skala { fill: #C9D8EE; }
.imk-tk-verlauf .imk-tk-uhr { fill: var(--imk-grau); font: 11px ui-monospace, Menlo, monospace; }
.imk-wrap .imk-tk-feld, .imk-wrap .imk-tk-kachel { background: var(--imk-papier); border-radius: var(--imk-radius-klein); padding: .55em .7em; }
.imk-wrap .imk-tk-feld { display: grid; gap: .35em; }
.imk-wrap .imk-tk-titel { font-size: .72em; letter-spacing: .06em; text-transform: uppercase; color: var(--imk-grau); font-weight: 700; }
.imk-wrap .imk-tk-risiko { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6em; font-size: .85em; color: var(--imk-tinte); }
.imk-wrap .imk-tk-risiko > div { display: grid; gap: .2em; }
.imk-wrap .imk-tk-balken { display: flex; align-items: center; gap: .4em; font-variant-numeric: tabular-nums; color: var(--imk-grau); }
.imk-wrap .imk-tk-balken i { flex: 1; height: 7px; border-radius: 4px; background: var(--imk-grau-hell); position: relative; overflow: hidden; }
.imk-wrap .imk-tk-balken i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: #3D7DD8; opacity: .65; border-radius: 4px; }
.imk-wrap .imk-tk-balken.ist-hoch i::after { opacity: 1; }
.imk-wrap .imk-tk-balken.ist-hoch span { color: #2D6CC9; font-weight: 700; }
.imk-wrap .imk-tk-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; }
.imk-wrap .imk-tk-kachel { display: grid; gap: .1em; align-content: start; }
.imk-wrap .imk-tk-kachel b { font: 700 1.2em Georgia, "Times New Roman", serif; color: var(--imk-tinte); white-space: nowrap; }
.imk-wrap .imk-tk-kachel small { color: var(--imk-grau); font-size: .78em; line-height: 1.3; }
.imk-wrap .imk-tk-pfeil { display: inline-block; color: #3D7DD8; }
.imk-wrap .imk-wetter .imk-tageskarte { margin-bottom: .6em; }
/* Am Handy eng: Beschriftungen kleiner, damit "Nachmittag" und "14 km/h" passen. */
.imk-wrap .imk-tk-risiko { font-size: .76em; gap: .9em; }
.imk-wrap .imk-tk-kachel b { font-size: 1.02em; }
.imk-wrap .imk-tk-kachel small { font-size: .72em; }
.imk-wrap .imk-tk-zeile strong { font-size: .95em; line-height: 1.25; }
.imk-wrap .imk-tk-temps b { font-size: 1.9em; }

/* Wetter am Termin im Kalender (v1.77.1): eigene Zeile unter dem Termin; die
   Signalfarben gehen vor der Kalender-Regel, die fette Schrift offener Termine braun färbt. */
.imk-wrap .imk-kal-eintrag + .imk-termin-wetter { margin: -.2em 0 .6em calc(9px + .55em); }
.imk-wrap .imk-termin-wetter b { display: inline; }
.imk-wrap .imk-termin-wetter.ist-passt b { color: var(--imk-sig-gruen) !important; }
.imk-wrap .imk-termin-wetter.ist-beob b { color: var(--imk-tinte) !important; }
.imk-wrap .imk-termin-wetter.ist-nicht b { color: var(--imk-sig-rot) !important; }

/* Kalender-Tag am Handy (v1.77.2): Knöpfe unter den Text statt als breite
   Spalte daneben – vorher blieb für den Text ein schmaler Streifen
   (Rückmeldung 06.10.2026: "viel Platz verschenkt"). Knöpfe als Pillen wie in "Zu tun". */
@media (max-width: 899px) {
	.imk-wrap .imk-kal-eintrag { flex-wrap: wrap; }
	.imk-wrap .imk-kal-eintrag-text { flex: 1 1 calc(100% - 9px - .55em); }
	.imk-wrap .imk-kal-eintrag .imk-kal-knoepfe {
		flex: 1 1 100%;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: .45em;
		margin-left: calc(9px + .55em);
	}
	.imk-wrap .imk-kal-knoepfe .imk-untertab,
	.imk-wrap .imk-kal-knoepfe button.imk-untertab {
		min-height: 40px;
		padding: 0 .9em;
		border: 1px solid var(--imk-linie-stark);
		border-radius: 999px;
		background: var(--imk-papier);
		color: var(--imk-tinte);
		font: inherit;
		font-size: .85em;
		display: inline-flex;
		align-items: center;
		box-shadow: none;
	}
	.imk-wrap .imk-kal-knoepfe span.imk-untertab a { color: inherit; text-decoration: none; }
}
@media (max-width: 899px) {
	.imk-wrap .imk-kal-eintrag .imk-kal-knoepfe { margin: .1em 0 .3em calc(9px + .55em); }
	.imk-wrap .imk-kal-knoepfe .imk-untertab,
	.imk-wrap .imk-kal-knoepfe button.imk-untertab { font-family: system-ui, sans-serif; font-weight: 600; margin: 0; }
	.imk-wrap .imk-kal-eintrag .imk-kal-eintragen { margin-bottom: 0; }
}
@media (max-width: 899px) {
	.imk-wrap .imk-kal-eintrag form.imk-kal-knoepfe { padding: 0; background: none; border: 0; box-shadow: none; }
	.imk-wrap .imk-kal-knoepfe .imk-untertab,
	.imk-wrap .imk-kal-knoepfe button.imk-untertab { font-size: .8em; padding: 0 .85em; }
}

/* ------------------------------------------------------------------ v1.78.0
   Neues Volk: die Königin als Knöpfe (wie die Schwarmstimmung), mehrere Völker
   auf einmal, das Kürzel der Königin auf der Kachel. Mockup vom 15.10.2026. */
.imk-schwarmwahl.ist-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.imk-nv-koenigin .imk-schwarmwahl-option b {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .3em;
}
.imk-schwarmwahl.ist-text .imk-schwarmwahl-option b { font-size: 1.05em; }
.imk-wrap [data-nur-herkunft][hidden] { display: none !important; }
.imk-nv-modus { margin-bottom: .6em; }
.imk-nv-liste { margin: .8em 0; }
.imk-nv-liste summary { cursor: pointer; }
.imk-nv-tabelle { width: 100%; border-collapse: collapse; font-size: .92em; margin: .4em 0; }
.imk-nv-tabelle th,
.imk-nv-tabelle td { text-align: left; padding: .3em; border-bottom: 1px solid var(--imk-linie); }
.imk-nv-tabelle th:first-child,
.imk-nv-tabelle td:first-child { width: 3.6em; white-space: nowrap; }
.imk-nv-tabelle th:nth-child(2),
.imk-nv-tabelle td:nth-child(2) { width: 6.4em; }
.imk-nv-tabelle select,
.imk-nv-tabelle input { width: 100%; min-height: 40px; box-sizing: border-box; }
.imk-nv-tabelle input {
	border: 1px solid var(--imk-linie-stark);
	border-radius: 8px;
	padding: 0 .5em;
	font: inherit;
	background: var(--imk-papier);
}
.imk-kachel-kuerzel {
	display: inline-block;
	max-width: 6ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}

/* ---------- v1.79.0: Reihenfolge erfassen ---------- */
.imk-reihenfolge { display: grid; gap: .7em; max-width: 520px; }
.imk-rf-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .3em 1em; }
.imk-rf-kopf b { font: 700 1.15rem var(--imk-kopf, Georgia, serif); }
.imk-rf-kopf span { color: var(--imk-grau); font-size: .9rem; }
.imk-rf-datum { background: var(--imk-honig-hell); border-radius: var(--imk-radius-klein); padding: .6em .8em; display: grid; gap: .4em; font-size: .92rem; }
.imk-rf-wahl { display: flex; flex-wrap: wrap; gap: .4em 1.2em; align-items: center; }
.imk-rf-wahl label { display: inline-flex; align-items: center; gap: .35em; min-height: 40px; }
.imk-rf-wahl input[type="date"] { min-height: 38px; }
.imk-rf-reihenkopf { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; }
.imk-rf-reihenkopf > b { font: 700 1.3rem var(--imk-kopf, Georgia, serif); background: var(--imk-honig); color: #fff; border-radius: 8px; padding: .1em .5em; }
.imk-rf-reihenkopf > span:not(.imk-rf-seg) { color: var(--imk-grau); }
.imk-rf-seg { display: inline-flex; border: 1px solid var(--imk-linie-stark); border-radius: 999px; overflow: hidden; }
.imk-rf-seg button { min-height: 42px; padding: 0 1em; border: 0; background: var(--imk-papier); color: var(--imk-tinte); font: inherit; cursor: pointer; }
.imk-rf-seg button + button { border-left: 1px solid var(--imk-linie-stark); }
.imk-rf-seg button[aria-pressed="true"] { background: var(--imk-honig); color: #fff; font-weight: 700; }
.imk-rf-eingabe { display: grid; grid-template-columns: auto 1fr; gap: .8em; align-items: center; background: var(--imk-papier); border: 2px solid var(--imk-honig); border-radius: var(--imk-radius); padding: .5em .9em; }
.imk-rf-platz { display: grid; color: var(--imk-grau); font-size: .8rem; line-height: 1.2; }
.imk-rf-platz b { color: var(--imk-tinte); font-size: 1.1rem; white-space: nowrap; }
.imk-rf-nr { font: 700 2.4rem/1.1 var(--imk-kopf, Georgia, serif); text-align: right; min-height: 1.1em; font-variant-numeric: tabular-nums; }
.imk-rf-meldung { margin: 0; padding: .5em .8em; border-radius: var(--imk-radius-klein); background: var(--imk-grau-hell); font-size: .92rem; }
.imk-rf-meldung.ist-gelb { background: var(--imk-sig-gelb-hell); border-left: 4px solid var(--imk-sig-gelb); }
.imk-rf-meldung.ist-rot { background: var(--imk-sig-rot-hell); border-left: 4px solid var(--imk-sig-rot); }
.imk-rf-meldung.ist-ok { background: var(--imk-sig-gruen-hell); border-left: 4px solid var(--imk-sig-gruen); }
.imk-rf-tasten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.imk-rf-tasten button { min-height: 58px; border-radius: 12px; border: 1px solid var(--imk-linie); background: var(--imk-papier); color: var(--imk-tinte); font: 700 1.5rem var(--imk-kopf, Georgia, serif); cursor: pointer; touch-action: manipulation; }
.imk-rf-tasten button:active { background: var(--imk-honig-hell); }
.imk-rf-tasten button.ist-ok { background: var(--imk-honig); border-color: var(--imk-honig); color: #fff; font-size: 1.15rem; }
.imk-rf-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.imk-reihenfolge > .imk-button, .imk-rf-zeile .imk-button { width: 100%; justify-content: center; }
.imk-rf-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 15em; overflow: auto; }
.imk-rf-liste li { display: grid; grid-template-columns: 5.5em 1fr auto; gap: .6em; align-items: center; padding: .35em .6em; background: var(--imk-papier); border-radius: 8px; }
.imk-rf-liste li > span:first-child { color: var(--imk-grau); font-size: .85rem; font-variant-numeric: tabular-nums; }
.imk-rf-liste li b { font-size: 1.1rem; }
.imk-rf-liste li.ist-frei { background: transparent; border: 1px dashed var(--imk-linie-stark); color: var(--imk-grau); }
.imk-rf-liste li.ist-trenner { display: block; background: transparent; font-weight: 700; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--imk-grau); padding-top: .6em; }
.imk-rf-tag { font-size: .78rem; font-weight: 700; padding: .15em .55em; border-radius: 999px; }
.imk-rf-tag.ist-umzug { background: var(--imk-sig-gelb-hell); color: var(--imk-tinte); border: 1px solid var(--imk-sig-gelb); }
.imk-rf-tag.ist-neu { background: var(--imk-sig-rot-hell); color: var(--imk-sig-rot); }
.imk-rf-plan { display: flex; gap: 8px; overflow-x: auto; align-items: flex-start; padding-bottom: 4px; }
.imk-rf-spalte { display: grid; gap: 4px; min-width: 76px; }
.imk-rf-titel { font-size: .75rem; font-weight: 700; color: var(--imk-grau); text-align: center; line-height: 1.25; }
.imk-rf-b { position: relative; background: var(--imk-papier); border: 1px solid var(--imk-linie-stark); border-radius: 6px; text-align: center; font-weight: 700; padding: .3em 0; }
.imk-rf-b.ist-l { border-left: 5px solid var(--imk-honig); }
.imk-rf-b.ist-r { border-right: 5px solid var(--imk-honig); }
.imk-rf-b.ist-frei { background: transparent; border-style: dashed; color: var(--imk-grau); font-weight: 400; font-size: .8rem; }
.imk-rf-gasse { align-self: stretch; writing-mode: vertical-rl; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(0deg, var(--imk-grau-hell) 0 10px, transparent 10px 20px); border-radius: 6px; padding: 0 6px; color: var(--imk-grau); font-size: .75rem; letter-spacing: .1em; }
.imk-rf-dialog { border: 0; border-radius: var(--imk-radius); padding: 1.1em; max-width: 26rem; background: var(--imk-papier); color: var(--imk-tinte); box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.imk-rf-dialog::backdrop { background: rgba(0,0,0,.45); }

/* Stand-Raster in mehreren Reihen: Spalten nebeneinander, Gasse dazwischen */
.imk-stand-raster.ist-reihen { flex-direction: row; align-items: flex-start; gap: 10px; max-width: none; overflow-x: auto; padding: 0 13px 6px; }
.imk-reihe-spalte { display: flex; flex-direction: column; gap: .5em; flex: none; }
.imk-reihe-kopf { margin: 0; font-size: .82rem; color: var(--imk-grau); text-align: center; white-space: nowrap; }
.imk-reihe-kopf b { color: var(--imk-tinte); font-size: 1rem; }
.imk-reihen-platz { display: grid; gap: 2px; position: relative; }
.imk-reihen-nr { font-size: .72rem; font-weight: 700; color: var(--imk-grau); font-variant-numeric: tabular-nums; }
.imk-reihen-gasse { align-self: stretch; flex: none; width: 26px; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(0deg, var(--imk-grau-hell) 0 12px, transparent 12px 24px); border-radius: 6px; }
.imk-reihen-gasse span { writing-mode: vertical-rl; font-size: .72rem; letter-spacing: .12em; color: var(--imk-grau); }
.imk-wrap .imk-rf-wahl label { display: inline-flex; flex-direction: row; align-items: center; gap: .4em; margin: 0; font-weight: 400; color: var(--imk-tinte); }
.imk-wrap .imk-rf-wahl input[type="radio"] { width: 22px; height: 22px; margin: 0; flex: none; }
.imk-wrap .imk-rf-wahl input[type="date"] { width: auto; margin: 0; }

/* ---------- v1.80.0: NFC-Aufkleber ---------- */
.imk-wrap .imk-nur-nfc[hidden] { display: none !important; }
.imk-wrap .imk-nur-nfc svg { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.imk-wrap .imk-button.imk-nur-nfc.ist-an, .imk-wrap .imk-button.imk-nur-nfc.ist-an:hover { border-color: var(--imk-sig-gruen); color: var(--imk-sig-gruen); background: var(--imk-sig-gruen-hell); }
.imk-reihenfolge [data-rf-scan] { width: 100%; justify-content: center; gap: .4em; }
.imk-nfc { display: grid; gap: .7em; max-width: 520px; }
.imk-nfc-balken { height: 8px; border-radius: 4px; background: var(--imk-grau-hell); overflow: hidden; }
.imk-nfc-balken i { display: block; height: 100%; width: 0; background: var(--imk-sig-gruen); transition: width .3s; }
.imk-nfc-halten { display: grid; justify-items: center; gap: .35em; text-align: center; background: var(--imk-honig-hell); border-radius: var(--imk-radius); padding: 1.1em .8em; }
.imk-nfc-halten[hidden] { display: none; }
.imk-nfc-halten.ist-ok { background: var(--imk-sig-gruen-hell); }
.imk-nfc-welle { width: 60px; height: 60px; border-radius: 50%; border: 3px solid var(--imk-honig); color: var(--imk-honig); display: grid; place-items: center; position: relative; }
.imk-nfc-welle svg { width: 28px; height: 28px; }
.imk-nfc-welle::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid var(--imk-honig); animation: imk-nfc-puls 1.6s ease-out infinite; }
.imk-nfc-halten.ist-ok .imk-nfc-welle, .imk-nfc-halten.ist-ok .imk-nfc-welle::after { border-color: var(--imk-sig-gruen); color: var(--imk-sig-gruen); }
@keyframes imk-nfc-puls { from { transform: scale(1); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .imk-nfc-welle::after { animation: none; } }
.imk-nfc-gross { font: 700 2.2rem/1.1 var(--imk-kopf, Georgia, serif); }
.imk-nfc-klein { color: var(--imk-grau); font-size: .9rem; }
.imk-nfc-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; max-height: 22em; overflow: auto; }
.imk-wrap .imk-nfc-liste button { width: 100%; display: grid; grid-template-columns: 5em 1fr auto; gap: .6em; align-items: center; padding: .45em .7em; border: 1px solid transparent; border-radius: 8px; background: var(--imk-papier); color: var(--imk-tinte); font: inherit; text-align: left; cursor: pointer; min-height: 44px; }
.imk-wrap .imk-nfc-liste button.ist-jetzt { border-color: var(--imk-honig); background: var(--imk-honig-hell); }
.imk-nfc-platz { color: var(--imk-grau); font-size: .85rem; font-variant-numeric: tabular-nums; }
.imk-nfc-stand { font-size: .78rem; padding: .15em .6em; border-radius: 999px; border: 1px solid var(--imk-linie); color: var(--imk-grau); white-space: nowrap; }
.imk-wrap .imk-nfc-liste button.ist-fertig .imk-nfc-stand { background: var(--imk-sig-gruen-hell); color: var(--imk-sig-gruen); border-color: transparent; font-weight: 700; }

/* ---------- v1.80.1: alles wächst mit der Schriftgröße ----------
   Die Spaltenzahl hängt an der Schrift (em), nicht am Bildschirm: Bei großer
   Schrift werden es weniger Kacheln nebeneinander statt abgeschnittener Ränder
   (Rückmeldung 15.10.2026, Pixel 8 Pro). Lange Wörter trennen statt überstehen. */
.imk-wrap .imk-bf-aktionen { grid-template-columns: repeat(auto-fill, minmax(min(100%, 5.9em), 1fr)); }
.imk-wrap .imk-bf-aktion { min-width: 0; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.imk-wrap .imk-standtun-zeile .imk-button,
.imk-wrap .imk-rf-zeile .imk-button { min-width: 0; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
/* Raster: Die Notizspalte darf schrumpfen, lange Wörter (Dateinamen) brechen um –
   sonst schob eine Notiz bei großer Schrift die Beute aus dem Bild. */
.imk-wrap .imk-platz-zeile { grid-template-columns: minmax(0, 1fr) var(--imk-beute-gross, 92px); }
.imk-wrap .imk-stapel, .imk-wrap .imk-beute-notiz { min-width: 0; }
.imk-wrap .imk-beute-notiz { overflow-wrap: anywhere; }
/* Leiste unten: Beschriftung wächst mit, aber nur so weit, dass „Kalender“ ganz passt. */
.imk-wrap .imk-appleiste-label { font-size: min(.72em, 15px); }