@charset "UTF-8";

/* ==========================================================================
   Bavarian Kings – Comic-Redesign (Phase 3)
   Alle Werte 1:1 aus dem Claude-Design-Entwurf: design/export/Bavarian Kings Redesign.dc.html
   Mobile-first (Entwurf 390 px), Desktop-Raster ab 1024 px (Entwurf 1280 px).
   ========================================================================== */

/* Schriften Baloo 2 und Nunito (SIL OFL, lib/fonts/OFL.txt) – vom eigenen Server statt von Google Fonts (Datenschutz, 16.09.2026).
   Variable Schriftdateien, Untergruppen Latein und Latein erweitert. */
/* Baloo 2 – latin-ext */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/lib/fonts/baloo2-latin-ext-0d1ee7.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Baloo 2 – latin */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/lib/fonts/baloo2-latin-4a324d.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Baloo 2 – latin-ext */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/lib/fonts/baloo2-latin-ext-0d1ee7.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Baloo 2 – latin */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/lib/fonts/baloo2-latin-4a324d.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Baloo 2 – latin-ext */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/lib/fonts/baloo2-latin-ext-0d1ee7.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Baloo 2 – latin */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/lib/fonts/baloo2-latin-4a324d.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Baloo 2 – latin-ext */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/lib/fonts/baloo2-latin-ext-0d1ee7.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Baloo 2 – latin */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/lib/fonts/baloo2-latin-4a324d.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Nunito – latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/lib/fonts/nunito-latin-ext-012b61.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Nunito – latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/lib/fonts/nunito-latin-798ec6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Nunito – latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/lib/fonts/nunito-latin-ext-012b61.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Nunito – latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/lib/fonts/nunito-latin-798ec6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Nunito – latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/lib/fonts/nunito-latin-ext-012b61.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Nunito – latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/lib/fonts/nunito-latin-798ec6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Nunito – latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/lib/fonts/nunito-latin-ext-012b61.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Nunito – latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/lib/fonts/nunito-latin-798ec6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--bk-cream: #fdf6e4;
	--bk-cream-2: #f8f2e2;
	--bk-cream-3: #f5ecd6;
	--bk-canvas: #e9e2d2;
	--bk-brown: #4a2f16;
	--bk-brown-2: #8a5a2b;
	--bk-text: #6b5b40;
	--bk-muted: #7a6a4d;
	--bk-faint: #a89877;
	--bk-faint-2: #a1916f;
	--bk-border: #e3d2a8;
	--bk-border-soft: #f0e6cd;
	--bk-blue: #1b8dcd;
	--bk-blue-2: #1a6ea3;
	--bk-blue-dark: #1a4f74;
	--bk-blue-text: #2c5169;
	--bk-blue-light: #d8f0ff;
	--bk-blue-pale: #eaf7ff;
	--bk-link: #1b7fbd;
	--bk-link-hover: #12628f;
	--bk-green: #5aa02c;
	--bk-green-dark: #3f7a1c;
	--bk-green-bg: #e8f4dc;
	--bk-green-text: #3f6a1c;
	--bk-red: #c0392b;
	--bk-gold: #f2b63c;
	--bk-gold-dark: #c78f1f;
	--bk-news-bg: #fff8e6;
	--bk-news-border: #f2d79a;
	--bk-news-text: #5b4a2f;
	--bk-side-text: #d8c6a0;
	--bk-bar-bg: #eee4cc;

	--bk-res-holz: #8a5a2b;
	--bk-res-stein: #9aa0a6;
	--bk-res-brezen: #c98b32;
	--bk-res-bier: #e0a92b;
	--bk-res-leberkas: #c0392b;
	--bk-res-salz: #7fb3d5;

	--bk-display: 'Baloo 2', cursive;
	--bk-body: 'Nunito', system-ui, sans-serif;
}

/* ===== Basis ===== */

html.bk, body.bk { margin: 0; padding: 0; max-width: 100%; }
body.bk {
	background: var(--bk-cream);
	color: var(--bk-text);
	font-family: var(--bk-body);
	font-size: 14px;
	line-height: normal;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
}
.bk *, .bk *::before, .bk *::after { box-sizing: border-box; }
.bk a { color: var(--bk-link); text-decoration: none; }
.bk a:hover { color: var(--bk-link-hover); }
.bk button, .bk input, .bk select, .bk textarea { font-family: inherit; }
.bk img { max-width: 100%; }
.bk h1, .bk h2, .bk h3 { font-family: var(--bk-display); color: var(--bk-brown); margin: 0; font-weight: 700; }
.bk-h2 { margin: 0; font-family: var(--bk-display); font-size: 22px; color: var(--bk-brown); font-weight: 700; line-height: normal; }
.bk-h2-row { display: flex; align-items: center; justify-content: space-between; }
.bk-h2-link { font-size: 13px; font-weight: 800; color: var(--bk-link); }

/* Bayerisches Rautenwappen (Logo) */
.bk-raute {
	flex: none; overflow: hidden; position: relative;
	width: 30px; height: 30px; border-radius: 9px; box-shadow: 0 2px 0 rgba(0,0,0,.12);
	--r: 14px;
}
.bk-raute::before {
	content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
	transform: rotate(45deg); background-color: #fff;
	background-image: linear-gradient(45deg, var(--bk-blue) 25%, transparent 25% 75%, var(--bk-blue) 75%), linear-gradient(45deg, var(--bk-blue) 25%, transparent 25% 75%, var(--bk-blue) 75%);
	background-size: var(--r) var(--r); background-position: 0 0, calc(var(--r) / 2) calc(var(--r) / 2);
}
.bk-raute.s34 { width: 34px; height: 34px; border-radius: 11px; box-shadow: none; --r: 16px; }
.bk-raute.s36 { width: 40px; height: 40px; border-radius: 12px; box-shadow: none; border: 2px solid #fff; --r: 16px; }
.bk-raute.s40 { width: 40px; height: 40px; border-radius: 13px; box-shadow: none; --r: 18px; }
.bk-raute.s40l { width: 40px; height: 40px; border-radius: 12px; --r: 18px; }
.bk-raute.s46 { width: 50px; height: 50px; border-radius: 15px; box-shadow: none; border: 2px solid #fff; --r: 20px; }
.bk-raute.s48 { width: 52px; height: 52px; border-radius: 15px; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.18); --r: 20px; }

/* ===== Mobile Kopfleiste (BK Topbar) ===== */

/* z-index 2000/2010/2020: Leaflet arbeitet intern mit Werten bis 1000 (Steuerelemente, Popups),
   die Karten-Bedienelemente liegen bei 1000. Kopfleiste und Menü müssen
   darüber bleiben - nur Ladebalken (9999) und Overlay-Fenster (10000) gehen noch darüber. */
.bk-topbar {
	position: sticky; top: 0; z-index: 2000;
	background: var(--bk-cream); border-bottom: 1px solid var(--bk-border);
	display: flex; align-items: center; gap: 8px; padding: 0 8px 0 4px; height: 49px; /* 48 px + 1 px Linie wie im Entwurf */
}
.bk-topbar-menu {
	width: 44px; height: 44px; flex: none; border: 0; background: transparent; border-radius: 12px;
	display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
/* overflow: hidden – am schmalen Handy mit mehreren Symbolen (Online, Chat, Glocke) bleibt hier wenig Platz, dann werden die Punkte gekürzt statt unter die Symbole zu laufen */
.bk-topbar-user { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 7px; overflow: hidden; }
.bk-topbar-name { min-width: 0; font-family: var(--bk-display); font-weight: 700; font-size: 15px; color: var(--bk-brown); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-topbar-pkt { font-size: 12px; font-weight: 700; color: var(--bk-faint-2); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Gulden hervorgehoben wie am Desktop: goldene Pille */
.bk .bk-topbar-gold { display: flex; align-items: center; gap: 5px; flex: none; background: var(--bk-gold); color: var(--bk-brown); border-radius: 999px; padding: 6px 11px 6px 8px; font-family: var(--bk-display); font-weight: 800; font-size: 14px; line-height: 1; box-shadow: 0 2px 0 rgba(122,84,16,.25); }
.bk-topbar-logout { width: 40px; height: 40px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
/* Versuch: Kopfleiste im Braun des Menüs (zum Zurücknehmen diesen Block löschen) */
.bk-topbar { background: var(--bk-brown); border-bottom-color: #2e1d0d; }
.bk-topbar-menu svg { stroke: #f3e6cc; }
.bk-topbar-logout svg { stroke: #e8a79c; }
.bk-topbar-pkt { color: #cbb893; }
.bk a.bk-glocke.mobil { color: #e6d5b3; }
.bk-glocke.mobil .bk-glocke-zahl { border-color: var(--bk-brown); }

/* Ausgeloggt: Kopf mit Logo */
.bk-brand { display: flex; align-items: center; gap: 9px; }
.bk .bk-brand-name { font-family: var(--bk-display); font-weight: 800; font-size: 21px; color: var(--bk-blue-dark); }

/* ===== Menü (Drawer) ===== */

.bk-drawer-bg { position: fixed; inset: 0; z-index: 2010; background: rgba(40,25,10,.55); display: none; }
.bk-drawer {
	position: fixed; top: 0; left: 0; bottom: 0; z-index: 2020; width: 286px; background: var(--bk-brown);
	box-shadow: 6px 0 24px rgba(0,0,0,.35); display: none; flex-direction: column; padding: 10px 12px; gap: 2px; overflow-y: auto;
}
.bk-drawer-offen .bk-drawer { display: flex; }
.bk-drawer-offen .bk-drawer-bg { display: block; }
.bk .bk-drawer-head { display: flex; align-items: center; gap: 10px; padding: 4px 6px 8px; border-radius: 13px; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.bk .bk-drawer-head:hover, .bk .bk-drawer-head:focus-visible { background: rgba(255, 255, 255, .08); }
/* „Mein Profil ›“ am Spielernamen (Schublade und Seitenleiste) – dezent, ohne Rahmen */
.bk .bk-profil-link { white-space: nowrap; color: var(--bk-gold); }
.bk .bk-profil-link i { font-size: 10px; margin-left: 2px; }
.bk-drawer-title { font-family: var(--bk-display); font-weight: 800; font-size: 18px; color: #fff; line-height: 1.1; }
.bk-drawer-sub { font-size: 12px; font-weight: 700; color: var(--bk-side-text); }
.bk .bk-drawer-item {
	display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 13px;
	padding: 9px 14px; min-height: 42px; color: var(--bk-side-text);
	font-family: var(--bk-display); font-weight: 700; font-size: 16px; line-height: normal;
}
.bk .bk-drawer-item.aktiv { background: var(--bk-cream); color: var(--bk-brown); }
.bk-drawer-badge { font-size: 12px; font-weight: 800; color: var(--bk-red); }
.bk-drawer-sep { height: 1px; background: rgba(255,255,255,.15); margin: 6px 4px; flex: none; }
/* „Nix verpassen“ in der Schublade: App installieren / Meldungen erhalten – flach, ohne Rahmen, verschwindet von selbst */
.bk .bk-nix { padding: 2px 6px 7px; flex: none; }
.bk .bk-nix[hidden] { display: none; }
.bk .bk-nix-titel { font-family: var(--bk-body); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--bk-side-text); opacity: .75; margin-bottom: 5px; }
.bk .bk-nix-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.bk .bk-nix-knopf { display: inline-flex; align-items: center; gap: 7px; flex: 0 1 auto; min-width: 0; max-width: 100%;
	background: rgba(255,255,255,.1); color: #fff; border-radius: 999px; padding: 5px 11px;
	font-family: var(--bk-body); font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.bk .bk-nix-knopf[hidden] { display: none; }
/* „+10 Gulden“ am Knopf „Meldungen erhalten“ (nur solange das Konto sie noch holen kann, core/game/push_start.inc.php).
   Mit dem Anhängsel darf der Knopf umbrechen – am 320-px-Handy ist in der 286 px breiten Schublade sonst kein Platz,
   und white-space: nowrap wuerde ihn über den Rand schieben. */
.bk .bk-nix-knopf.hat-gulden { white-space: normal; flex-wrap: wrap; }
.bk .bk-nix-gulden { color: var(--bk-gold); font-weight: 800; }
.bk .bk-nix-knopf i { font-size: 12px; color: var(--bk-gold); flex: none; }
.bk .bk-nix-knopf:hover, .bk .bk-nix-knopf:focus-visible { background: rgba(255,255,255,.2); color: #fff; }
/* Gulden kaufen trennt Spiel-Punkte und zweite Gruppe (kein Trennstrich mehr) */
.bk .bk-drawer-item.gold { background: var(--bk-gold); color: var(--bk-brown); font-weight: 800; margin: 4px 0; }
.bk .bk-drawer-item.logout { color: #e8a79c; }
/* Zweite Navigationsgruppe (Forum, Hitliste, Konto, Logout): kleiner und ruhiger als die Spiel-Punkte */
.bk .bk-drawer-item.extra { font-family: var(--bk-body); font-size: 14px; font-weight: 700; min-height: 30px; padding: 4px 14px; }
.bk .bk-drawer-item.extra.logout { margin-bottom: 4px; }
/* Navigationspunkte mit Icon (Font Awesome), Icons in fester Breite, damit die Texte bündig stehen */
.bk .bk-nav-text { display: inline-flex; align-items: center; gap: 12px; }
/* Navigationspunkt mit dem Namen des gewählten Dorfs: lange Namen mit … kürzen */
.bk .bk-nav-text:has(.bk-nav-dorfname) { min-width: 0; max-width: 100%; }
.bk-nav-dorfname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk .bk-nav-icon { width: 20px; text-align: center; font-size: 16px; opacity: .9; flex: none; }
.bk .bk-drawer-item.extra .bk-nav-icon, .bk .bk-side-item.extra .bk-nav-icon { font-size: 14px; }
/* Navigationspunkt Premium: aktiv leuchtet gold, ohne Premium kleiner roter Knopf zum Aktivieren */
.bk .bk-drawer-item.premium-aktiv, .bk .bk-side-item.premium-aktiv { color: var(--bk-gold); text-shadow: 0 0 10px rgba(242,182,60,.55); }
.bk .premium-aktiv .bk-nav-icon { opacity: 1; filter: drop-shadow(0 0 5px rgba(242,182,60,.8)); }
.bk .bk-drawer-item.premium-aktiv.aktiv, .bk .bk-side-item.premium-aktiv.aktiv { color: var(--bk-gold-dark); text-shadow: none; }
.bk-nav-aktivieren { display: inline-block; background: var(--bk-red); color: #fff; border-radius: 999px; padding: 2px 8px; font-family: var(--bk-body); font-size: 11px; font-weight: 800; line-height: 1.4; letter-spacing: .02em; }
.bk svg.bk-nav-icon { height: 19px; display: block; }
/* Aufklappbare Gruppe in der Navigation (Premium: Übersicht, Farmübersicht, Kampfsimulator) */
.bk-nav-gruppe > summary { list-style: none; cursor: pointer; user-select: none; }
.bk-nav-gruppe > summary::-webkit-details-marker { display: none; }
.bk-nav-gruppe-rechts { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.bk .bk-nav-pfeil { font-size: 11px; opacity: .7; transition: transform .15s; }
.bk-nav-gruppe[open] .bk-nav-pfeil { transform: rotate(180deg); }
.bk-nav-unter { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px 18px; padding-left: 8px; border-left: 2px solid rgba(255,255,255,.15); }
.bk .bk-drawer-item.unter, .bk .bk-side-item.unter { font-size: 14px; min-height: 34px; padding-top: 5px; padding-bottom: 5px; }
.bk .bk-drawer-item.unter .bk-nav-icon, .bk .bk-side-item.unter .bk-nav-icon { font-size: 13px; }
/* Gruppe mit Link (Dorf): der Name führt zur Dorfansicht, der Pfeil rechts daneben ist ein eigener Knopf (summary) */
.bk-nav-mitpfeil { position: relative; }
.bk .bk-nav-mitpfeil > a { padding-right: 54px; }
.bk .bk-nav-mitpfeil > a.bk-side-item { min-height: 39px; }
.bk .bk-nav-pfeilknopf { position: absolute; top: 0; right: 0; width: 50px; height: 42px; display: flex; align-items: center; justify-content: center; color: var(--bk-side-text); border-radius: 12px; -webkit-tap-highlight-color: transparent; }
.bk-nav-mitpfeil > a.bk-side-item + .bk-nav-gruppe > .bk-nav-pfeilknopf { height: 39px; }
.bk .bk-nav-pfeilknopf .bk-nav-pfeil { width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 12px; opacity: 1; background: rgba(255,255,255,.1); }
.bk .bk-nav-pfeilknopf:hover .bk-nav-pfeil { background: rgba(255,255,255,.22); color: #fff; }
.bk .bk-nav-pfeilknopf:focus-visible { outline: 2px solid var(--bk-gold); outline-offset: -2px; }
.bk .bk-nav-pfeilknopf.aktiv { color: var(--bk-brown); }
.bk .bk-nav-pfeilknopf.aktiv .bk-nav-pfeil, .bk .bk-nav-pfeilknopf.aktiv:hover .bk-nav-pfeil { background: rgba(74,47,22,.1); color: var(--bk-brown); }

/* ===== Blaue Seitenköpfe (mobil) ===== */

.bk-pagehead { background: var(--bk-blue); padding: 12px 16px; color: #fff; position: sticky; top: 49px; z-index: 5; }
.bk-pagehead.gross { padding: 14px 16px 12px; }
.bk-pagehead.frei { position: static; padding: 14px 16px 16px; }
.bk-pagehead-row { display: flex; align-items: center; gap: 10px; }
.bk-pagehead.gross .bk-pagehead-row { gap: 12px; }
.bk-pagehead-text { flex: 1; min-width: 0; }
.bk-pagehead-title { font-family: var(--bk-display); font-size: 20px; font-weight: 800; line-height: 1.1; color: #fff; }
.bk-pagehead.gross .bk-pagehead-title { font-size: 23px; line-height: 1; }
.bk-pagehead.titel22 .bk-pagehead-title { font-size: 22px; }
.bk-pagehead-sub { font-size: 12px; font-weight: 700; color: var(--bk-blue-light); }
.bk-pagehead.gross .bk-pagehead-sub, .bk-pagehead.titel22 .bk-pagehead-sub { font-size: 13px; }
.bk-pagehead-text2 { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--bk-blue-pale); font-weight: 600; }
.bk .bk-back {
	width: 40px; height: 40px; flex: none; border: 0; border-radius: 13px; background: rgba(255,255,255,.9);
	display: flex; align-items: center; justify-content: center;
}
.bk .bk-headbtn {
	height: 40px; border: 0; border-radius: 13px; background: rgba(255,255,255,.9); padding: 0 13px;
	font-family: var(--bk-display); font-weight: 800; font-size: 14px; color: var(--bk-blue-dark);
	display: inline-flex; align-items: center; white-space: nowrap;
}

/* Rohstoff-Kacheln */
/* mobil stehen sie über der Titelzeile, daher der Abstand nach unten */
.bk-res { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.bk-pagehead.gross .bk-res { margin-bottom: 12px; }
.bk-res-item { background: rgba(255,255,255,.93); border-radius: 12px; padding: 5px 8px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bk a.bk-res-item { color: inherit; text-decoration: none; transition: transform .08s; }
.bk a.bk-res-item:hover { background: #fff; transform: translateY(-1px); }
.bk-pagehead.gross .bk-res-item { background: rgba(255,255,255,.92); padding: 6px 8px; }
.bk-res-name { display: flex; align-items: center; gap: 5px; min-width: 0; }
.bk-res-dot { width: 8px; height: 8px; flex: none; border-radius: 3px; }
/* Rohstoffleiste mit Icons (img/rohstoffe/*.png, 64 px): Icon links, Name und Menge daneben */
.bk .bk-res-item.mit-icon { flex-direction: row; align-items: center; gap: 9px; }
.bk .bk-res-icon { width: 26px; height: 26px; flex: none; display: block; }
.bk-res-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bk-res-label { font-size: 10px; font-weight: 800; color: var(--bk-muted); text-transform: uppercase; letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: normal; }
.bk-res-value { font-family: var(--bk-display); font-size: 15px; font-weight: 800; color: var(--bk-blue-text); line-height: 1.05; }
.bk-pagehead.gross .bk-res-value { font-size: 16px; }
/* volle Lager werden wie im Entwurf nicht farblich hervorgehoben */

/* ===== Inhalt ===== */

.bk-content { --bk-kartenabstand: 12px; padding: 16px 16px 24px; display: flex; flex-direction: column; gap: var(--bk-kartenabstand); }
.bk-content.eng { --bk-kartenabstand: 10px; padding: 8px 16px 24px; }
/* Ein Formular mit mehreren Karten ist für den Container EIN Element – der Abstand oben wirkt nur zwischen
   den Formularen. Karten (und die Knopfreihe) innerhalb eines Formulars bekommen deshalb denselben Abstand.
   ~ statt +: zwischen zwei Karten steht manchmal ein <style> oder ein verstecktes Feld. */
.bk-content form > :is(table.updateform, table.liste, table.liste2, table.buildings, table.loginfeld, table.tippliste, .box1, .box3, .box4, .box5, .box6, .bk-card)
	~ :is(table.updateform, table.liste, table.liste2, table.buildings, table.loginfeld, table.tippliste, .box1, .box3, .box4, .box5, .box6, .bk-card, .bk-btn-row) {
	margin-top: var(--bk-kartenabstand, 12px);
}
.bk-content > * { margin-top: 0; margin-bottom: 0; }

/* Karten */
.bk-card { background: #fff; border: 2px solid var(--bk-border); border-radius: 18px; padding: 12px; }
.bk-card.p14 { padding: 13px 14px; }
.bk-card-title { font-family: var(--bk-display); font-size: 17px; font-weight: 700; color: var(--bk-brown); line-height: 1.2; }
.bk-card-title.s18 { font-size: 18px; line-height: 1.15; }
.bk-card-title.s19 { font-size: 19px; }
.bk-card-meta { font-size: 13px; color: var(--bk-muted); font-weight: 600; }
.bk-card-meta.s12 { font-size: 12px; }

/* Listenzeilen */
.bk-row { display: flex; align-items: center; gap: 12px; background: #fff; border: 2px solid var(--bk-border); border-radius: 18px; padding: 11px 14px; color: inherit; }
.bk a.bk-row { color: inherit; }
.bk-row-main { flex: 1; min-width: 0; }
.bk-row-title { font-family: var(--bk-display); font-size: 17px; font-weight: 700; color: var(--bk-brown); line-height: normal; }
.bk-row-sub { font-size: 12px; color: var(--bk-muted); font-weight: 600; }
.bk-initial { width: 34px; height: 34px; flex: none; border-radius: 11px; background: var(--bk-cream-3); display: flex; align-items: center; justify-content: center; font-family: var(--bk-display); font-weight: 800; color: var(--bk-brown-2); font-size: 15px; }
.bk-tile { width: 46px; height: 46px; flex: none; border-radius: 14px; background: #fbeeda; display: flex; align-items: center; justify-content: center; font-family: var(--bk-display); font-weight: 800; font-size: 17px; color: var(--bk-brown); }
.bk-tile-bild { padding: 3px; }
.bk-tile-bild img, .bk .bk-blatt-icon img { max-width: 100%; max-height: 100%; display: block; }
.bk .bk-blatt-icon { padding: 4px; }

/* Knöpfe */
.bk .bk-btn {
	display: flex; align-items: center; justify-content: center; text-align: center;
	border: 0; background: var(--bk-green); color: #fff; font-family: var(--bk-display); font-weight: 800; font-size: 18px;
	padding: 15px; border-radius: 14px; box-shadow: 0 3px 0 var(--bk-green-dark); min-height: 52px; cursor: pointer; line-height: normal; width: 100%;
}
.bk .bk-btn:hover { color: #fff; filter: brightness(1.04); }
.bk .bk-btn, .bk .bk-btn2 { gap: 8px; }
.bk .bk-btn.klein { width: auto; font-size: 15px; padding: 11px 16px; min-height: 48px; }
.bk .bk-btn.gold { background: var(--bk-gold); color: var(--bk-brown); box-shadow: 0 3px 0 var(--bk-gold-dark); }
/* Gefahr-Knopf (z. B. Konto endgültig löschen) */
.bk .bk-btn.gefahr { background: var(--bk-red); box-shadow: 0 3px 0 #8e2a1f; }
.bk .bk-btn2 {
	display: flex; align-items: center; justify-content: center; text-align: center;
	border: 2px solid var(--bk-border); background: #fff; color: var(--bk-brown-2); font-family: var(--bk-display); font-weight: 700; font-size: 16px;
	padding: 12px; border-radius: 14px; min-height: 48px; cursor: pointer; line-height: normal; width: 100%;
}
.bk .bk-btn2:hover { color: var(--bk-brown); }
.bk-btn-row { display: flex; gap: 8px; }
.bk-btn-row > * { flex: 1; }

/* Chips (Kosten, Werte) */
.bk-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.bk-chip { background: var(--bk-cream-2); border-radius: 10px; padding: 5px 10px; font-size: 12px; font-weight: 800; color: var(--bk-text); line-height: normal; }
.bk-chip.rund { border-radius: 999px; padding: 4px 10px; }
.bk-badge-green { background: var(--bk-green-bg); color: var(--bk-green-dark); font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 8px; }

/* Reiter: überall dieselbe Reiterleiste mit Unterstrich wie die Unternavigation (.subnavi, weiter unten) */
.bk-tabs, .bk-desk-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 2px solid var(--bk-border); }
.bk-tabs { padding: 8px 16px 0; margin-bottom: 4px; }
.bk-tabs::-webkit-scrollbar, .bk-desk-tabs::-webkit-scrollbar { display: none; }
.bk .bk-tabs > a, .bk .bk-desk-tabs > a {
	flex: none; background: none; border: 0; border-bottom: 3px solid transparent; margin: 0 0 -2px; border-radius: 0; padding: 10px 14px 9px;
	font-family: var(--bk-display); font-size: 15px; font-weight: 700; line-height: normal; color: var(--bk-muted); white-space: nowrap;
}
.bk .bk-tabs > a:hover, .bk .bk-desk-tabs > a:hover { color: var(--bk-brown); }
.bk .bk-tabs > a.aktiv, .bk .bk-desk-tabs > a.aktiv { color: var(--bk-brown); border-bottom-color: var(--bk-blue); }
/* In den alten Seiten (.bk-legacy) bringt der Inhaltsrahmen den Seitenrand schon mit -
   die Leiste braucht ihn dann nicht noch einmal. */
.bk .bk-legacy .bk-tabs { padding: 8px 0 0; margin-bottom: 10px; }
.bk .bk-tabs > a i { margin-right: 5px; font-size: 13px; }
/* Kleiner Punkt am Reiter: dort gibt es etwas Neues (z. B. „Was ist neu“ in den Meldungen) */
.bk-reiter-punkt { display: inline-block; width: 8px; height: 8px; margin: 0 0 1px 6px; border-radius: 50%; background: var(--bk-red); vertical-align: middle; }

/* Hinweisboxen */
.bk-info { background: var(--bk-green-bg); border-radius: 16px; padding: 12px 14px; font-size: 14px; color: var(--bk-green-text); font-weight: 700; line-height: 1.4; }
.bk-info.fehler { background: #fbe3df; color: #8e2a1f; }
/* Warnender Ton für Hinweise, die nichts Gutes melden (z. B. ein Event, das die Produktion senkt) */
.bk-info.achtung { background: #fdf0d5; color: #8a5a10; }
.bk-online { display: flex; align-items: center; gap: 8px; }
.bk-online-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--bk-green); flex: none; }
.bk-news { background: var(--bk-news-bg); border: 2px solid var(--bk-news-border); border-radius: 18px; padding: 16px; }
.bk-news-title { font-family: var(--bk-display); font-size: 19px; color: var(--bk-brown); margin-bottom: 8px; line-height: normal; }
.bk-news-list { display: flex; flex-direction: column; gap: 10px; }
.bk-news-date { font-size: 12px; font-weight: 800; color: var(--bk-red); }
.bk-news-text { font-size: 14px; color: var(--bk-news-text); line-height: 1.4; font-weight: 600; }

/* Fortschrittsbalken */
.bk-bar { flex: 1; height: 9px; border-radius: 999px; background: var(--bk-bar-bg); overflow: hidden; }
.bk-bar > div { height: 100%; background: var(--bk-green); }
.bk-bar.mini { flex: none; width: 44px; height: 8px; }
.bk-bar.mini > div { background: var(--bk-gold); }

/* Bodenblatt (Bausheet) */
.bk-sheet { background: var(--bk-cream); border-radius: 26px 26px 0 0; box-shadow: 0 -8px 24px rgba(74,47,22,.22); padding: 10px 16px 18px; }
.bk-sheet-griff { width: 44px; height: 5px; border-radius: 999px; background: #ddcfae; margin: 0 auto 12px; }

/* ===== Seitenfuß ===== */

.bk-foot { background: var(--bk-brown); padding: 24px 18px 34px; color: #f3e3bd; }
.bk-foot-links { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; font-weight: 700; }
.bk .bk-foot-links a { color: #f3e3bd; }

/* ===== Desktop ===== */

.bk-desk-head, .bk-side, .bk-aside { display: none; }

@media (min-width: 1024px) {
	.bk-topbar, .bk-drawer, .bk-drawer-bg, .bk-mobil { display: none !important; }

	.bk-desk-head {
		display: flex; align-items: center; gap: 18px; background: var(--bk-blue); color: #fff; padding: 12px 24px;
		position: sticky; top: 0; z-index: 2000; /* über der Karte, siehe Kommentar bei .bk-topbar */
	}
	.bk-desk-brand { display: flex; align-items: center; gap: 10px; flex: none; }
	.bk .bk-desk-brand-name { font-family: var(--bk-display); font-weight: 800; font-size: 21px; color: #fff; }
	.bk-desk-head .bk-res { flex: 1; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0; }
	.bk-desk-head .bk-res-item { padding: 6px 10px; gap: 0; }
	.bk-desk-head .bk-res-value { font-size: 16px; }
	.bk-desk-user { display: flex; align-items: center; gap: 10px; flex: none; }
	.bk .bk-desk-gold { background: var(--bk-gold); color: var(--bk-brown); border-radius: 999px; padding: 7px 14px; font-family: var(--bk-display); font-weight: 800; font-size: 15px; }
	.bk .bk-side-servus { display: block; font-family: var(--bk-display); font-weight: 800; font-size: 18px; color: #fff; line-height: 1.2; margin: 2px 2px 12px; padding: 4px 6px; border-radius: 10px; overflow-wrap: anywhere; text-decoration: none; }
	.bk .bk-side-servus:hover, .bk .bk-side-servus:focus-visible { background: rgba(255, 255, 255, .08); color: #fff; }
	.bk .bk-side-servus .bk-profil-link { display: block; margin-top: 3px; font-family: var(--bk-body); font-size: 12.5px; font-weight: 700; }

	.bk-grid { display: grid; grid-template-columns: 210px minmax(0, 1fr) 300px; min-height: calc(100vh - 67px); }
	.bk-grid.ohne-aside { grid-template-columns: 210px minmax(0, 1fr); }
	.bk-grid.aside-breit { grid-template-columns: 210px minmax(0, 1fr) 380px; }
	.bk-side { display: flex; background: var(--bk-brown); padding: 12px 12px; flex-direction: column; gap: 6px; }
	.bk-side-inner { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 2px; }
	.bk .bk-side-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 12px; padding: 7px 14px; color: var(--bk-side-text); font-family: var(--bk-display); font-weight: 700; font-size: 16px; line-height: normal; }
	.bk .bk-side-item.aktiv { background: var(--bk-cream); color: var(--bk-brown); }
	.bk .bk-side-item:hover { color: #fff; }
	.bk .bk-side-item.aktiv:hover { color: var(--bk-brown); }
	.bk-side-sep { margin: 8px 4px 6px; }
	.bk .bk-side-item.extra { font-family: var(--bk-body); font-size: 14px; font-weight: 700; padding: 4px 14px; }
	.bk .bk-side-item.extra.logout { color: #e8a79c; }
	.bk-aside { display: flex; background: var(--bk-cream); border-left: 2px solid var(--bk-border); padding: 16px; flex-direction: column; gap: 12px; }
	.bk-aside .bk-news { padding: 14px; }
	.bk-aside .bk-news-title { font-size: 18px; }
	.bk-main { min-width: 0; }

	.bk-pagehead { position: static; }
	.bk-deskpad { padding: 20px 24px; }
	.bk-desk-h2 { margin: 0; font-family: var(--bk-display); font-size: 28px; color: var(--bk-brown); font-weight: 700; line-height: normal; }
	.bk-desk-tabs { margin: 10px 0 16px; }
	.bk-desk-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* ===== Ausgeloggt: Himmel-Kopf (Entwurf 1a / 2a) ===== */

.bk-gastkopf { background: linear-gradient(#bfe7fb, #e7f6fe); padding: 14px 18px; }
.bk-gastkopf-inner { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bk-gastkopf-links { display: flex; align-items: center; gap: 10px; }
.bk .bk-gastlink { display: none; font-size: 15px; font-weight: 700; color: var(--bk-blue-text); }
.bk .bk-anmelden {
	border: 2px solid #fff; background: rgba(255,255,255,.75); border-radius: 14px; padding: 8px 16px;
	font-family: var(--bk-display); font-weight: 700; font-size: 16px; color: var(--bk-blue-dark); min-height: 44px;
	display: inline-flex; align-items: center; line-height: normal;
}
.bk .bk-gast-cta { display: none; }
.bk-gastmain { min-height: 50vh; }
/* Gäste: Seite mindestens so hoch wie das Fenster, braune Fußleiste bleibt ganz unten */
body.bk-gast { min-height: 100vh; display: flex; flex-direction: column; }
body.bk-gast > .bk-gastmain { flex: 1 0 auto; }

@media (min-width: 1024px) {
	.bk-gastkopf { padding: 12px 48px; background: rgba(253,246,228,.96); border-bottom: 2px solid var(--bk-border); box-shadow: 0 4px 18px rgba(74,47,22,.12); position: relative; z-index: 3; }
	.bk-gastkopf-inner { gap: 20px; }
	.bk-gastkopf .bk-raute { width: 40px; height: 40px; border-radius: 12px; --r: 18px; }
	.bk .bk-gastkopf .bk-brand { gap: 12px; }
	.bk .bk-gastkopf .bk-brand-name { font-size: 26px; }
	.bk .bk-gastlink { display: inline; color: var(--bk-brown-2); margin-right: 6px; }
	.bk .bk-anmelden { display: none; }
	.bk .bk-btn.bk-gast-cta { display: inline-flex; font-size: 16px; padding: 12px 20px; min-height: 0; }
	.bk-gastmain .bk-content { max-width: 1280px; margin: 0 auto; padding: 34px 48px; }
}

/* ===== Seitenfuß ===== */

.bk-foot-inner { max-width: 1280px; margin: 0 auto; }
/* Eingeloggt: Inhalt füllt die Fensterhöhe (mobil unter der 49-px-Kopfleiste, am Desktop über das Raster), Fußzeile steht unten */
.bk-main { display: flex; flex-direction: column; min-height: calc(100vh - 49px); min-height: calc(100dvh - 49px); }
.bk-main-inhalt { flex: 1 0 auto; min-width: 0; }
@media (min-width: 1024px) { .bk-main { min-height: 0; } }
.bk-foot-spiel { flex: none; background: transparent; color: var(--bk-faint); padding: 8px 16px 24px; }
.bk .bk-foot-spiel .bk-foot-links a { color: var(--bk-faint); }
.bk-foot-zeit { font-size: 12px; font-weight: 600; margin-top: 6px; }

/* ===== Rechte Spalte ===== */

.bk-aside-title { font-family: var(--bk-display); font-size: 17px; color: var(--bk-brown); margin-bottom: 6px; line-height: normal; }
.bk-aside-text { font-size: 14px; font-weight: 700; color: var(--bk-text); line-height: 1.5; }
.bk-suche { background: var(--bk-blue); border-radius: 18px; padding: 14px; color: #fff; margin: 0; }
.bk-suche-title { font-family: var(--bk-display); font-size: 17px; margin-bottom: 8px; line-height: normal; }
.bk .bk-suche input { width: 100%; border: 0; background: #fff; border-radius: 12px; padding: 10px 12px; font-size: 14px; font-weight: 700; color: var(--bk-brown); outline: none; }
.bk .bk-suche input::placeholder { color: var(--bk-faint); }

/* ===== Karte (Vollbild) ===== */

.bk-map { width: 100%; height: calc(100vh - 49px); position: relative; }
@media (min-width: 1024px) { .bk-map { height: calc(100vh - 64px); } }
.bk-mapmain .bk-foot-spiel { display: none; }

/* ==========================================================================
   Bestehende Seiten (alte Bausteine) im neuen Look – bis sie einzeln umgebaut sind
   ========================================================================== */

.bk-legacy { color: var(--bk-text); font-size: 14px; }
.bk-legacy [style*="width:"], .bk-legacy [width] { max-width: 100%; }
.bk-legacy img { height: auto; }
.bk-legacy > br { display: none; }

.bk-h3 { margin: 4px 0 0; font-family: var(--bk-display); font-size: 19px; color: var(--bk-brown); font-weight: 700; line-height: 1.3; }

.bk-legacy .box3, .bk-legacy .box1, .bk-legacy .box4, .bk-legacy .start {
	background: #fff; border: 2px solid var(--bk-border); border-radius: 18px; padding: 13px 14px; margin: 0;
	font-size: 14px; line-height: 1.45; color: var(--bk-text); font-weight: 600; width: auto; float: none;
}
.bk-legacy .box3 b { color: var(--bk-brown); }
.bk-legacy .box4 { background: var(--bk-cream-2); border-color: transparent; }

.bk .meldung1, .bk .meldung2, .bk-legacy .warnung {
	display: block; width: auto; margin: 12px 16px 0; border-radius: 16px; padding: 12px 14px; font-size: 14px; font-weight: 700; line-height: 1.4; border: 0;
}
.bk .meldung1 { background: var(--bk-green-bg); color: var(--bk-green-text); }
.bk .meldung2, .bk-legacy .warnung { background: #fbe3df; color: #8e2a1f; }
.bk-legacy .warnung { margin: 0; }
@media (min-width: 1024px) { .bk .meldung1, .bk .meldung2 { margin: 16px 24px 0; } }

/* Unternavigation als Reiterleiste mit Unterstrich – bewusst anders als die weißen Info-Boxen */
.bk-legacy .subnavi { display: flex; gap: 2px; overflow-x: auto; margin: 0 0 2px; padding: 0; scrollbar-width: none; width: auto; background: none; border: 0; border-bottom: 2px solid var(--bk-border); }
.bk-legacy .subnavi::-webkit-scrollbar { display: none; }
.bk .bk-legacy .subnavi a {
	flex: none; background: none; border: 0; border-bottom: 3px solid transparent; margin: 0 0 -2px; border-radius: 0; padding: 10px 14px 9px;
	font-family: var(--bk-display); font-size: 15px; font-weight: 700; line-height: normal; color: var(--bk-muted); white-space: nowrap; display: inline-block;
}
.bk .bk-legacy .subnavi a:hover { color: var(--bk-brown); }
.bk .bk-legacy .subnavi a.aktiv { color: var(--bk-brown); border-bottom-color: var(--bk-blue); }
.bk-legacy .clear { clear: both; }

/* Tabellen */
.bk-legacy table { border-collapse: separate; border-spacing: 0; max-width: 100%; }
.bk-legacy table.buildings, .bk-legacy table.liste, .bk-legacy table.liste2, .bk-legacy table.updateform, .bk-legacy table.loginfeld {
	display: block; width: 100% !important; overflow-x: auto; background: #fff; border: 2px solid var(--bk-border); border-radius: 18px; padding: 0; margin: 0;
	scrollbar-width: thin; scrollbar-color: var(--bk-border) transparent;
}
/* Breite Tabellen (z.B. alle Stufen eines Gebaeudes) lassen sich am Handy waagrecht wischen.
   Damit man das sieht, liegt am Rand ein weicher Schatten - er erscheint von selbst nur an der
   Seite, an der es weitergeht, und verschwindet am Ende. Nur CSS, kein Skript. */
.bk-legacy table.buildings, .bk-legacy table.liste, .bk-legacy table.liste2 {
	background:
		linear-gradient(to right, #fff 40%, rgba(255,255,255,0)) left center,
		linear-gradient(to left, #fff 40%, rgba(255,255,255,0)) right center,
		radial-gradient(farthest-side at 0 50%, rgba(74,47,22,.20), rgba(74,47,22,0)) left center,
		radial-gradient(farthest-side at 100% 50%, rgba(74,47,22,.20), rgba(74,47,22,0)) right center;
	background-color: #fff;
	background-repeat: no-repeat;
	background-size: 44px 100%, 44px 100%, 15px 100%, 15px 100%;
	background-attachment: local, local, scroll, scroll;
}
/* min-width statt width: schmale Tabellen fuellen weiter den Container, breite duerfen
   darueber hinauswachsen und werden dann waagrecht scrollbar (overflow-x oben). */
.bk-legacy table.buildings > tbody, .bk-legacy table.liste > tbody, .bk-legacy table.liste2 > tbody, .bk-legacy table.updateform > tbody, .bk-legacy table.loginfeld > tbody { display: table; width: auto; min-width: 100%; }
.bk-legacy table.buildings th, .bk-legacy table.liste th, .bk-legacy table.liste2 th, .bk-legacy table.updateform th, .bk-legacy table.loginfeld th {
	background: none; color: var(--bk-brown); font-family: var(--bk-display); font-size: 17px; font-weight: 700; text-align: left; padding: 8px 14px 6px; border: 0; text-transform: none;
}
.bk-legacy table.buildings td, .bk-legacy table.liste td, .bk-legacy table.liste2 td, .bk-legacy table.updateform td, .bk-legacy table.loginfeld td {
	padding: 8px 14px; border: 0; border-top: 2px solid var(--bk-border-soft); font-size: 14px; font-weight: 600; color: var(--bk-text); vertical-align: middle; background: none;
}
.bk-legacy table.buildings tr:first-child td, .bk-legacy table.liste tr:first-child td, .bk-legacy table.updateform tr:first-child td { border-top: 0; }
.bk-legacy table.buildings td b, .bk-legacy table.liste td b { color: var(--bk-brown); }
/* Abstand oben/unten in der ersten und letzten Zeile statt im Rahmen – so bleibt unten kein Streifen, und eine farbig
   hinterlegte letzte Zeile (z. B. die gewählte in /admin/user) reicht bis an die runde Ecke */
.bk-legacy table.buildings tr:first-child > *, .bk-legacy table.liste tr:first-child > *, .bk-legacy table.liste2 tr:first-child > *, .bk-legacy table.updateform tr:first-child > *, .bk-legacy table.loginfeld tr:first-child > * { padding-top: 12px; }
.bk-legacy table.buildings tr:last-child > *, .bk-legacy table.liste tr:last-child > *, .bk-legacy table.liste2 tr:last-child > *, .bk-legacy table.updateform tr:last-child > *, .bk-legacy table.loginfeld tr:last-child > * { padding-bottom: 12px; }
/* Knöpfe und Links in Tabellenzeilen mittig; Ankreuzfeld mit Beschriftung als eine Zeile (label umschließt das Feld) */
.bk-legacy table td > .bk-btn, .bk-legacy table td > .bk-btn2 { vertical-align: middle; }
.bk-legacy label.bk-check-zeile { display: flex; align-items: flex-start; gap: 10px; font-weight: 700; color: var(--bk-text); line-height: 1.35; cursor: pointer; overflow-wrap: anywhere; }
.bk-legacy label.bk-check-zeile input[type=checkbox] { flex: none; margin: 0; }
.bk-legacy .bk-check-feld { margin: 8px 0 0 30px; }
/* Ueberschriften bleiben einzeilig - sie sind kurz und geben der Tabelle ihre Breite vor */
.bk-legacy table.buildings th, .bk-legacy table.liste th, .bk-legacy table.liste2 th { white-space: nowrap; }

/* Formulare */
.bk-legacy input[type=text], .bk-legacy input[type=password], .bk-legacy input[type=email], .bk-legacy input[type=number], .bk-legacy input:not([type]), .bk-legacy select, .bk-legacy textarea {
	width: 100% !important; max-width: 100%; min-height: 44px; border: 2px solid var(--bk-border); background: #fff; border-radius: 12px;
	padding: 9px 12px; font-family: var(--bk-body); font-size: 15px; font-weight: 700; color: var(--bk-brown); outline: none; box-shadow: none;
}
.bk-legacy table.buildings input[type=text], .bk-legacy table.buildings input:not([type]) { width: 90px !important; display: inline-block; }
.bk-legacy table.bk-begriffe input[type=text] { width: 170px !important; }
.bk-legacy table.bk-begriffe select { min-width: 100px; }
.bk-legacy textarea { min-height: 120px; line-height: 1.45; }
.bk-legacy input:focus, .bk-legacy select:focus, .bk-legacy textarea:focus { border-color: var(--bk-blue); }
.bk-legacy input[type=submit], .bk-legacy button[type=submit], .bk-legacy input[type=button] {
	width: auto !important; min-height: 48px; border: 0 !important; background: var(--bk-green) !important; color: #fff !important; font-family: var(--bk-display); font-weight: 800; font-size: 16px;
	padding: 11px 18px; border-radius: 14px; box-shadow: 0 3px 0 var(--bk-green-dark); cursor: pointer; margin: 2px 0;
}
.bk-legacy button[type=submit].gefahr, .bk-legacy input[type=submit].gefahr { background: var(--bk-red) !important; box-shadow: 0 3px 0 #8e2a1f; }
.bk-legacy input[type=checkbox], .bk-legacy input[type=radio] { width: 20px; height: 20px; accent-color: var(--bk-green); vertical-align: middle; }

/* Alte Elemente ohne Funktion im neuen Layout */
.bk-legacy .citymoti { display: none; }

/* Reiterleisten scrollen waagrecht (overflow-x: auto). Absolut gesetzte Kinder – etwa der Vorlesetext .bk-sr in der
   Premium-Krone – entkommen dem Abschneiden, solange die Leiste selbst nicht positioniert ist, und machten die Seite
   am 320-px-Handy breiter (Truppen-Leiste ohne Premium: 372 px, Prüfrunde Nr 53). Geringe Spezifität: sticky u. Ä. gewinnen. */
.bk-tabs, .bk-desk-tabs { position: relative; }

/* ===== Umschaltung mobil / Desktop ===== */
.bk-desk { display: none; }
@media (min-width: 1024px) {
	.bk-desk { display: block; }
	.bk-nach-desk { padding: 0 24px 20px; }
}

/* ===== Gebäude (Entwurf 1e / 2c) ===== */
.bk-bau-kopf { display: flex; gap: 12px; align-items: center; }
.bk .bk-bau-text { flex: 1; min-width: 0; color: inherit; display: block; }
.bk a.bk-tile { color: var(--bk-brown); }
.bk-chip.fehlt, .bk-card-meta .fehlt { color: var(--bk-red); }
.bk .bk-btn.aus { background: #d9cdb0; box-shadow: 0 3px 0 #b9ab8a; color: #fff; cursor: default; font-size: 13px; }
.bk .bk-info-link { color: inherit; text-decoration: underline; }
.bk-info-desk { border-radius: 14px; padding: 12px 16px; margin-bottom: 14px; }
.bk-abstand { margin-bottom: 14px; }
.bk-bau-desk { padding: 14px; display: flex; gap: 12px; align-items: center; }
.bk-bau-desk .bk-tile { width: 48px; height: 48px; font-size: 18px; }
.bk-bau-desk .bk-card-title.s18 { line-height: normal; }
.bk .bk-bau-desk .bk-btn.klein { font-size: 14px; padding: 10px 14px; border-radius: 12px; min-height: 0; }

/* ===== Dorfansicht (Entwurf 1c mobil / 2b Desktop) ===== */

/* Ausschnitt der 1020×700-Dorfgrafik wie im Entwurf: x 25–794, y 58–672 (769×614) */
/* Mobil: Ausschnitt x 25–794, y 58–655 (unten ohne den weißen Reißrand der Grafik) */
.bk-dorf-bild { position: relative; width: 100%; aspect-ratio: 769 / 597; overflow: hidden; }
.bk-dorf-karte { position: absolute; width: 132.64%; left: -3.251%; top: -9.715%; aspect-ratio: 1020 / 700; container-type: inline-size; }
/* Dorfgrafik (img/dorf/stufeN) deckt die Karte von y 49 bis 659 ab (49/700 = 7 %) */
.bk-dorf-grund { position: absolute; left: 0; top: 7%; display: block; width: 100%; height: auto; max-width: none !important; }
.bk .bk-dorf-geb, .bk .bk-dorf-platz, .bk-dorf-maibaum { position: absolute; display: block; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; line-height: 0; }
.bk .bk-dorf-geb img, .bk .bk-dorf-platz img, .bk-dorf-maibaum img { width: 100%; height: auto; display: block; max-width: none !important; }
.bk-dorf-maibaum { cursor: default; }
.bk-dorf-stufe {
	position: absolute; left: calc(90cqw / 10.2); top: calc(40cqw / 10.2); width: calc(25cqw / 10.2); height: calc(25cqw / 10.2);
	background: url(/img/city/stufe.png) center / 100% 100% no-repeat; font-family: Arial, sans-serif; font-weight: bold;
	font-size: calc(13cqw / 10.2); line-height: calc(25cqw / 10.2); text-align: center; color: #000; z-index: 2;
}
.bk-dorf-up { position: absolute; left: calc(60cqw / 10.2); top: calc(10cqw / 10.2); width: calc(30cqw / 10.2); height: calc(30cqw / 10.2); background: url(/img/city/up.png) center / 100% 100% no-repeat; z-index: 2; }
.bk .bk-dorf-geb.gewaehlt img { filter: drop-shadow(0 0 calc(6cqw / 10.2) #fff) drop-shadow(0 0 calc(3cqw / 10.2) #fff); }

/* Beschriftungen (Hotspots) */
.bk .bk-dorf-pille { position: absolute; transform: translate(calc(-50% + var(--dx, 0px)), -100%); display: flex; flex-direction: column; align-items: center; z-index: 5; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; }
.bk-dorf-pille > span { color: #fff; font-family: var(--bk-display); font-weight: 800; font-size: 13px; padding: 4px 10px; border-radius: 999px; border: 2px solid #fff; box-shadow: 0 3px 6px rgba(0,0,0,.3); white-space: nowrap; line-height: normal; }
.bk-dorf-pille > i { width: 2px; height: calc(10px + var(--dy, 0px)); background: #fff; display: block; transform: translateX(var(--sx, 0px)); }

/* Mobil */
.bk-dorfseite { background: linear-gradient(#bee4fb 0 251px, #74ba5a 251px 100%); min-height: calc(100vh - 49px); min-height: calc(100svh - 49px); display: flex; flex-direction: column; }
.bk-dorfkopf { padding: 12px 14px; background: linear-gradient(rgba(27,141,205,.96), rgba(27,141,205,.82) 78%, rgba(27,141,205,0)); position: relative; z-index: 6; }
.bk-dorfkopf .bk-pagehead-row { gap: 10px; }
.bk-dorfkopf .bk-pagehead-sub { font-size: 12px; }
.bk-dorfkopf .bk-res-item { background: rgba(255,255,255,.93); }
.bk-dorf-flaeche { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 240px; padding-bottom: 32px; } /* Entwurf: Dorffläche endet 32 px über dem Bau-Blatt */
.bk-dorfblatt { position: relative; z-index: 6; }
/* Karten zwischen Dorf und Bau-Blatt (Versetzen, Checkliste, Tagesaufgaben, Weltziel): Seiten- und Kartenabstand wie .bk-content */
.bk-dorfseite .bk-dorf-karten { --bk-kartenabstand: 12px; display: flex; flex-direction: column; gap: var(--bk-kartenabstand); padding: 0 16px 16px; position: relative; z-index: 6; }
.bk-dorfseite .bk-dorf-karten > * { margin-top: 0; margin-bottom: 0; }
/* Unten im Bau-Blatt: das Blatt hat schon 16 px Seitenrand */
.bk-dorfseite .bk-dorfblatt .bk-dorf-karten.unten { padding: 0; margin-top: 16px; }
.bk-dorf-desk .bk-dorf-karten.unten { display: flex; flex-direction: column; gap: 12px; padding: 0 24px; }
.bk-dorf-desk .bk-dorf-karten.unten > * { margin-top: 0; margin-bottom: 0; }
.bk-blatt-kopf { display: flex; gap: 12px; align-items: center; }
.bk .bk-blatt-icon { width: 54px; height: 54px; flex: none; border-radius: 16px; background: #fbeeda; display: flex; align-items: center; justify-content: center; font-family: var(--bk-display); font-weight: 800; font-size: 19px; color: var(--bk-brown); }
.bk-blatt-titel { font-family: var(--bk-display); font-size: 20px; font-weight: 800; color: var(--bk-brown); line-height: 1.1; }
.bk .bk-dorfblatt .bk-chips { margin: 12px 0 0; }
.bk .bk-dorfblatt .bk-blatt-knopf .bk-btn { margin-top: 12px; }
.bk .bk-dorfblatt .bk-btn-row { margin-top: 10px; }
.bk .bk-dorfblatt .bk-btn2 { padding: 11px; }
.bk-main:has(.bk-dorfseite) .bk-foot-spiel { display: none; }

/* Dorf wechseln */
.bk-dorfwechsel { position: relative; flex: none; }
.bk-dorfwechsel summary { list-style: none; cursor: pointer; }
.bk-dorfwechsel summary::-webkit-details-marker { display: none; }
.bk-dorfwechsel > div { position: absolute; right: 0; top: 46px; z-index: 20; background: #fff; border: 2px solid var(--bk-border); border-radius: 14px; padding: 6px; min-width: 190px; box-shadow: 0 8px 20px rgba(0,0,0,.18); display: flex; flex-direction: column; max-height: 50vh; overflow-y: auto; }
.bk .bk-dorfwechsel > div a { padding: 10px 12px; border-radius: 10px; font-family: var(--bk-display); font-weight: 700; font-size: 16px; color: var(--bk-brown); }
.bk .bk-dorfwechsel > div a.aktiv { background: var(--bk-cream); }

/* Angriffswarnung */
.bk .bk-dorf-angriff { display: block; margin: 0 14px; background: var(--bk-red); color: #fff; border-radius: 14px; padding: 10px 14px; font-family: var(--bk-display); font-weight: 800; font-size: 15px; position: relative; z-index: 6; }

@media (min-width: 1024px) {
	.bk-dorf-desk { position: relative; background: linear-gradient(#bee4fb 0 42%, #74ba5a 42% 100%); overflow: hidden; height: calc(100vh - 67px); min-height: 560px; display: flex; align-items: center; }
	/* Desktop: ganzes Dorf (ohne Reißrand unten) als gerahmtes Bild, höchstens wenig über Originalgröße – bleibt scharf */
	/* Ganzes Dorf in den freien Bereich eingepasst (Breite und Höhe), Details in der breiteren rechten Spalte */
	/* Randlos über die ganze Inhaltsbreite: sichtbar ist die ganze Dorfgrafik (Karte y 49–659 → top = -49/610) */
	.bk-dorf-desk { background: var(--bk-cream); height: auto; min-height: calc(100vh - 67px); overflow: visible; padding: 0 0 20px; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 16px; }
	.bk-dorf-desk .bk-dorf-bild { width: 100%; max-width: none; aspect-ratio: 4252 / 2543; }
	.bk-dorf-desk .bk-dorf-bild .bk-dorf-karte { width: 100%; left: 0; top: -8.032%; }
	.bk-dorf-desk .bk-dorf-pille > span { font-size: 14px; padding: 5px 12px; }
	.bk-dorf-desk .bk-dorf-pille > i { height: calc(12px + var(--dy, 0px)); }
	.bk-dorf-namepille { position: absolute; top: 16px; left: 20px; background: #fff; border: 2px solid var(--bk-border); border-radius: 999px; padding: 8px 16px; font-family: var(--bk-display); font-weight: 800; font-size: 15px; color: var(--bk-brown); box-shadow: 0 3px 8px rgba(0,0,0,.15); z-index: 7; }
	.bk-dorf-desk .bk-dorf-angriff { position: absolute; top: 16px; right: 20px; left: auto; margin: 0; z-index: 7; }
	.bk-main:has(.bk-dorf-desk) .bk-foot-spiel { display: none; }
	.bk .bk-dorfkarte { padding: 14px; }
	.bk .bk-dorfkarte .bk-card-title { display: block; line-height: normal; }
	.bk .bk-dorfkarte .bk-blatt-satz { margin-top: 2px; }
	.bk .bk-dorfkarte .bk-btn { margin-top: 12px; font-size: 16px; padding: 12px; min-height: 48px; }
}

/* ===== Hilfsklassen mobil/Desktop ===== */
.bk-block { display: block; }
.bk-mobil-flex { display: flex; }
.bk-desk-flex, .bk-desk-inline { display: none !important; }
@media (min-width: 1024px) {
	.bk-mobil-flex { display: none !important; }
	.bk-desk-flex { display: flex !important; }
	.bk-desk-inline { display: inline !important; }
}

/* ===== Startseite ausgeloggt (Entwurf 1a / 2a) ===== */
.bk-hero { position: relative; background: linear-gradient(#bfe7fb, #e7f6fe); padding: 14px 18px 0; }
.bk-hero-top { display: flex; align-items: center; justify-content: space-between; }
.bk-hero-badges { margin-top: 26px; display: flex; flex-direction: column; gap: 9px; align-items: center; }
.bk-hero-badges span { color: #fff; font-family: var(--bk-display); font-weight: 800; font-size: 25px; line-height: 1.15; padding: 5px 16px; border-radius: 8px; transform: rotate(-3deg); box-shadow: 0 3px 0 rgba(0,0,0,.15); }
.bk-hero-badges .b1 { background: #1b8dcd; }
.bk-hero-badges .b2 { background: #1a6ea3; }
.bk-hero-badges .b3 { background: #c0392b; }
.bk-hero-text { margin: 20px 0 0; font-size: 16px; line-height: 1.5; color: var(--bk-blue-text); font-weight: 600; text-align: center; text-wrap: pretty; }
.bk-hero-knoepfe { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 22px; }
.bk-hero-bild { margin: 0 -18px; position: relative; }
.bk-hero-bild img { width: 100%; display: block; }
.bk-hero-bild::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 44px; background: linear-gradient(transparent, #fdf6e4); }
.bk-hero-bild::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 28px; background: linear-gradient(#e7f6fe, rgba(231,246,254,0)); }
.bk-zahlen { justify-content: space-around; padding: 16px 12px; background: var(--bk-cream); border-bottom: 2px dashed var(--bk-border); }
.bk-zahlen > div { text-align: center; }
.bk-zahlen b { display: block; font-family: var(--bk-display); font-size: 22px; font-weight: 800; color: var(--bk-red); }
.bk-zahlen span { display: block; font-size: 12px; font-weight: 700; color: var(--bk-muted); }
.bk-features { padding: 22px 18px; display: flex; flex-direction: column; gap: 12px; }
.bk .bk-features h2 { margin: 0 0 2px; font-size: 24px; font-weight: 700; }
.bk-features-grid { display: flex; flex-direction: column; gap: 12px; }
.bk-feature { display: flex; gap: 12px; align-items: center; background: #fff; border: 2px solid var(--bk-border); border-radius: 18px; padding: 14px; }
.bk-feature-icon { width: 46px; height: 46px; flex: none; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.bk-feature-title { font-family: var(--bk-display); font-size: 18px; font-weight: 700; color: var(--bk-brown); }
.bk-feature-text { font-size: 14px; color: var(--bk-text); line-height: 1.4; }
.bk-cta { background: var(--bk-brown); padding: 24px 18px 34px; color: #f3e3bd; }
.bk-cta-title { font-family: var(--bk-display); font-size: 22px; margin-bottom: 12px; }
.bk-cta .bk-foot-links { margin-top: 18px; }

@media (min-width: 1024px) {
	/* Dorfansicht (Dorf.pdf) füllt den ganzen oberen Bereich, Verlauf links/oben für lesbaren Text */
	.bk-hero { padding: 20px 48px 0; display: flex; flex-direction: column; min-height: min(63.7vw, 100vh);
		--bk-hero-verlauf: linear-gradient(180deg, rgba(191,231,251,.9) 0, rgba(191,231,251,0) 110px), linear-gradient(0deg, #fdf6e4 0, rgba(253,246,228,0) 56px);
		background: var(--bk-hero-verlauf), url(/img/start/dorf_gross_1600.jpg) center 55% / cover no-repeat #8cc63f; }
	.bk-hero-inner { width: 100%; flex: 1; display: flex; flex-direction: column; }
	@media (min-width: 1600px) { .bk-hero { background-image: var(--bk-hero-verlauf), url(/img/start/dorf_gross_2400.jpg); } }
	.bk-hero .bk-raute { width: 40px; height: 40px; border-radius: 12px; --r: 18px; }
	.bk .bk-hero .bk-brand { gap: 12px; }
	.bk .bk-hero .bk-brand-name { font-size: 26px; }
	.bk-hero-inner, .bk-cta-inner, .bk-features-grid { max-width: 1184px; margin: 0 auto; }
	.bk-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; align-items: center; padding: 36px 0 72px; flex: 1; }
	.bk-hero-badges { margin-top: 0; gap: 10px; align-items: flex-start; }
	.bk-hero-badges span { font-size: 38px; padding: 6px 22px; border-radius: 10px; box-shadow: 0 4px 0 rgba(0,0,0,.15); }
	.bk-hero-badges .b2 { margin-left: 22px; }
	.bk-hero-badges .b3 { margin-left: 52px; }
	.bk-hero-text { margin: 26px 0 0; font-size: 19px; max-width: 460px; text-align: left; background: rgba(253,246,228,.95); border: 2px solid var(--bk-border); border-radius: 16px; padding: 12px 18px; box-shadow: 0 4px 0 rgba(0,0,0,.08); }
	.bk-hero .bk-gastkopf { margin: -20px -48px 0; }
	.bk-hero-knoepfe { flex-direction: row; gap: 12px; margin: 24px 0 0; }
	.bk .bk-hero-knoepfe .bk-btn { width: auto; padding: 15px 28px; min-height: 0; }
	.bk .bk-hero-knoepfe .bk-btn2 { width: auto; padding: 13px 24px; min-height: 0; }
	.bk-hero-bild { display: none; }
	.bk-features { padding: 34px 48px; }
	.bk-features-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; width: 100%; }
	.bk-feature { padding: 20px; display: block; }
	.bk-feature-icon { display: none; }
	.bk-feature-title { font-size: 21px; }
	.bk-feature-text { font-size: 15px; line-height: 1.5; margin-top: 6px; }
	.bk-cta { padding: 26px 48px; }
	.bk-cta-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
	.bk-cta-title { font-size: 24px; margin: 0; }
	.bk .bk-cta .bk-btn.gold { width: auto; padding: 15px 26px; min-height: 0; }
	.bk-cta .bk-foot-links { flex-basis: 100%; }
}

/* ===== Startseite eingeloggt (Entwurf 1b) ===== */
.bk-start { padding: 16px 16px 24px; display: flex; flex-direction: column; gap: 12px; }
.bk-pagehead.gross { top: 49px; }
.bk-dorfkarte-gross { background: #fff; border: 2px solid var(--bk-border); border-radius: 18px; overflow: hidden; }
.bk-dk-oben { display: flex; gap: 12px; padding: 12px; }
.bk .bk-dk-bild { width: 82px; height: 66px; flex: none; border-radius: 14px; overflow: hidden; background: #cfe9bb; display: block; }
.bk .bk-dk-bild img { width: 240%; max-width: none; margin-left: -70%; margin-top: -34%; display: block; }
.bk-dk-name { display: flex; align-items: center; gap: 7px; }
.bk .bk-dk-name a { font-family: var(--bk-display); font-size: 19px; font-weight: 700; color: var(--bk-brown); }
/* Große Dorfkarte: langer Name und Schild „Hauptdorf“ dürfen umbrechen – das Schild rutscht unter den Namen, nichts wird breiter */
.bk .bk-dorfkarte-gross .bk-dk-name { flex-wrap: wrap; row-gap: 3px; min-width: 0; }
.bk .bk-dorfkarte-gross .bk-dk-name a { min-width: 0; overflow-wrap: anywhere; }
.bk .bk-dorfkarte-gross .bk-dk-name .bk-badge-green { flex: none; white-space: nowrap; }
.bk-dk-laune { margin-top: 7px; display: flex; align-items: center; gap: 8px; }
.bk-dk-laune span { font-size: 12px; font-weight: 800; color: var(--bk-green); }
.bk-dk-knoepfe { display: flex; border-top: 2px solid var(--bk-border-soft); }
.bk .bk-dk-knoepfe a { flex: 1; background: #fff; padding: 13px; font-family: var(--bk-display); font-weight: 700; font-size: 16px; color: var(--bk-brown-2); min-height: 48px; text-align: center; display: flex; align-items: center; justify-content: center; }
.bk .bk-dk-knoepfe a + a { border-left: 2px solid var(--bk-border-soft); }
.bk .bk-start > .bk-btn2 { padding: 13px; }
.bk .bk-start-news { margin-top: 4px; color: inherit; }
.bk-start-desk-kopf .bk-card-meta { margin-top: 2px; }
@media (min-width: 1024px) {
	.bk-start { padding: 20px 24px; }
}

/* ===== Hitliste (Entwurf 1g) ===== */
.bk-hitkopf { padding: 14px 16px 14px; }
.bk-hitkopf .bk-pagehead-title { line-height: 1.1; }
.bk-hitliste { padding: 8px 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.bk-hit { display: flex; align-items: center; gap: 12px; background: #fff; border: 2px solid var(--bk-border); border-radius: 16px; padding: 10px 14px; color: inherit; }
.bk a.bk-hit { color: inherit; }
.bk-hit.eigen { background: var(--bk-news-bg); border-color: var(--bk-gold); border-radius: 18px; padding: 12px 14px; }
.bk-hit-platz { font-family: var(--bk-display); font-size: 16px; font-weight: 800; color: var(--bk-faint); width: 44px; flex: none; }
.bk-hit.eigen .bk-hit-platz { font-size: 18px; color: var(--bk-gold-dark); }
.bk-hit-name { font-family: var(--bk-display); font-size: 16px; font-weight: 700; color: var(--bk-brown); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-hit.eigen .bk-hit-name { font-size: 18px; }
.bk-hit-sub { font-size: 12px; font-weight: 700; color: var(--bk-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-hit-wert { font-family: var(--bk-display); font-size: 16px; font-weight: 800; color: var(--bk-blue-text); }
.bk-hit.eigen .bk-hit-wert { font-size: 18px; color: var(--bk-brown); }
/* POKALE ---------------------------------------------------------------------------------- */
/* Einheitlich ohne Grafiken: jeder Pokal hat ein Font-Awesome-Symbol (pokale.inc.php).
   Kopf der Karte: Symbol in der Farbe des Pokals. Stufenreihe: runde Medaillen,
   die mit der Stufe wertvoller werden (Bronze, Silber, Gold, Platin, Diamant). */
.bk-pokale { display: flex; flex-wrap: wrap; gap: 12px 10px; margin-top: 12px; counter-reset: pokalstufe; }
.bk-pokal { width: 96px; text-align: center; font-size: 12px; font-weight: 700; color: var(--bk-muted); line-height: 1.3; counter-increment: pokalstufe;
	--stufe: #b8733a; --stufe-hell: #f6e3d1; }
.bk-pokal:nth-child(2) { --stufe: #8c98a3; --stufe-hell: #e9eef2; }
.bk-pokal:nth-child(3) { --stufe: var(--bk-gold-dark); --stufe-hell: #fdf0c8; }
.bk-pokal:nth-child(4) { --stufe: #3f9bb8; --stufe-hell: #dcf1f7; }
.bk-pokal:nth-child(n+5) { --stufe: #7b5cc4; --stufe-hell: #ece6fa; }
.bk-pokal.erreicht { color: var(--bk-brown); }
.bk-pokal small { display: block; margin-top: 2px; font-size: 11px; font-weight: 700; color: var(--bk-faint); }
.bk-pokal.erreicht small { color: var(--bk-green-text); }

.bk-pokal-icon { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.bk-pokale .bk-pokal .bk-pokal-icon { width: 58px; height: 58px; margin: 0 auto 6px; border-radius: 999px; font-size: 22px;
	background: var(--stufe-hell); color: var(--stufe); border: 4px solid var(--stufe); box-shadow: 0 3px 0 rgba(74, 47, 22, .18); }
.bk-pokale .bk-pokal .bk-pokal-icon.leer { background: var(--bk-cream-2); color: var(--bk-faint); border: 3px dashed var(--bk-border); box-shadow: none; }
/* Stufennummer als kleines Abzeichen unten rechts */
.bk-pokale .bk-pokal .bk-pokal-icon::after { content: counter(pokalstufe); position: absolute; right: -6px; bottom: -4px; min-width: 20px; height: 20px; padding: 0 4px; box-sizing: border-box;
	border-radius: 999px; border: 2px solid #fff; background: var(--stufe); color: #fff; font-family: var(--bk-display); font-size: 11px; font-weight: 800; line-height: 16px; }
.bk-pokale .bk-pokal .bk-pokal-icon.leer::after { background: var(--bk-faint); }

/* Kopf einer Pokal-Karte: Symbol im Farbton des Pokals, grau solange keine Stufe erreicht ist */
/* Symbole ohne Umrandung (Vorgabe des Projektinhabers 17.09.2026): Farbe nur über Hintergrund und Symbol */
.bk-pokal-kopf .bk-pokal-icon { flex: none; width: 48px; height: 48px; border-radius: 14px; font-size: 20px; border: 0; box-shadow: none; }
.bk-pokal-icon.gold { background: #fdf0c8; color: var(--bk-gold-dark); border-color: #f1d98a; }
.bk-pokal-icon.rot { background: #fbe3df; color: var(--bk-red); border-color: #f2c2ba; }
.bk-pokal-icon.blau { background: var(--bk-blue-light); color: var(--bk-blue-dark); border-color: #b9dcf0; }
.bk-pokal-icon.gruen { background: var(--bk-green-bg); color: var(--bk-green-text); border-color: #c5e3b0; }
.bk-pokal-icon.braun { background: var(--bk-cream-3); color: var(--bk-brown-2); border-color: var(--bk-border); }
.bk-pokal-icon.grau { background: #eceae4; color: #6f6a5f; border-color: #d6d2c6; }
.bk-pokal-kopf .bk-pokal-icon.leer { background: var(--bk-cream-2); color: var(--bk-faint); border-color: var(--bk-border-soft); box-shadow: none; }

/* Eine Karte je Pokal: Kopf mit Symbol, Name und Zaehler, darunter die Stufen */
.bk-pokal-karte { margin-bottom: 12px; }
.bk-pokal-kopf { display: flex; align-items: center; gap: 12px; }
.bk-pokal-kopf .bk-row-main { min-width: 0; }
.bk-pokal-zaehler { flex: none; font-family: var(--bk-display); font-weight: 800; font-size: 17px; color: var(--bk-faint); }
.bk-pokal-karte.hat .bk-pokal-zaehler { color: var(--bk-gold-dark); }
.bk-pokal-ziel { margin-top: 10px; padding-top: 9px; border-top: 2px solid var(--bk-border-soft); font-size: 13px; font-weight: 700; color: var(--bk-muted); }
.bk-pokal-ziel i { color: var(--bk-blue); margin-right: 4px; }
.bk-pokal-ziel.voll { color: var(--bk-green-text); }
.bk-pokal-ziel.voll i { color: var(--bk-green); }

/* Stand oben auf der Seite */
.bk-pokal-stand { display: flex; gap: 10px; text-align: center; padding: 14px; margin-bottom: 12px; }
.bk-pokal-stand > div { flex: 1; }
.bk-pokal-stand b { display: block; font-family: var(--bk-display); font-size: 26px; color: var(--bk-brown); line-height: 1.1; }
.bk-pokal-stand span { display: block; font-size: 13px; font-weight: 700; color: var(--bk-muted); }
@media (max-width: 559px) {
	.bk-pokal { width: calc(50% - 5px); }
}
@media (min-width: 1024px) {
	.bk-hitkopf { position: static; }
}

/* ===== Stammtisch (Entwurf 1f) ===== */
.bk-allikopf .bk-pagehead-title { font-size: 21px; line-height: 1.1; }
.bk .bk-thema { display: block; color: inherit; }
.bk-thema-meta { margin-top: 3px; }
.bk-thema-fuss { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.bk-thema-zeit { font-size: 12px; font-weight: 700; color: var(--bk-faint); }
.bk-online { line-height: normal; }
.bk-online span:last-child { font-size: 14px; font-weight: 800; color: var(--bk-green-text); }
.bk .bk-austritt { margin-top: 8px; }
@media (min-width: 1024px) { .bk-allikopf { position: static; } }

/* ===== Karte (Entwurf 1d) ===== */
/* isolation: Die Karte bekommt einen eigenen Stapelkontext. Sonst wirken die z-index-Werte von
   Leaflet (bis 1000) und der Kartenknöpfe nach außen und legen sich über Kopfleiste und Menü. */
.bk-karte { position: relative; height: calc(100vh - 49px); height: calc(100svh - 49px); background: #e9efe2; overflow: hidden; isolation: isolate; }
/* Gilt auch für die kleineren Karten (Profil, Stammtisch, Dorfgründung) */
.leaflet-container { isolation: isolate; }
#bkKarte { position: absolute; inset: 0; background: #e9efe2; }
.bk-karte .leaflet-tile-pane { filter: saturate(.72) brightness(1.06); }
.bk-karte-oben { position: absolute; top: 0; left: 0; right: 0; padding: 12px 14px; display: flex; gap: 10px; z-index: 1000; }
.bk-karte-suche { flex: 1; background: #fff; border-radius: 15px; box-shadow: 0 4px 12px rgba(0,0,0,.18); padding: 11px 14px; display: flex; align-items: center; gap: 9px; margin: 0; }
.bk .bk-karte-suche input { flex: 1; min-width: 0; border: 0; outline: none; padding: 0; background: transparent; font-family: var(--bk-body); font-size: 15px; font-weight: 700; color: var(--bk-brown); line-height: normal; }
.bk .bk-karte-suche input::placeholder { color: var(--bk-faint); opacity: 1; }
.bk .bk-karte-filterknopf { width: 46px; height: 46px; flex: none; border: 0; border-radius: 15px; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.18); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.bk-karte-chips { position: absolute; left: 14px; right: 14px; bottom: 20px; display: flex; gap: 8px; overflow-x: auto; z-index: 1000; scrollbar-width: none; }
.bk-karte-chips::-webkit-scrollbar { display: none; }
.bk-karte.ohne-filter .bk-karte-chips { display: none; }
.bk .bk-karte-chip { flex: none; background: #fff; color: var(--bk-text); border-radius: 999px; padding: 9px 15px; font-size: 13px; font-weight: 800; box-shadow: 0 3px 8px rgba(0,0,0,.2); white-space: nowrap; line-height: normal; }
.bk .bk-karte-chip.aktiv { background: var(--bk-brown); color: #fff; }
.bk-karte-name { font-family: var(--bk-display); font-size: 19px; font-weight: 800; color: var(--bk-brown); line-height: 1.1; }
.bk-pin-huelle { background: none; border: 0; }
.bk-pin { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); border: 3px solid #fff; border-radius: 16px 16px 16px 4px; padding: 6px 10px; box-shadow: 0 4px 8px rgba(0,0,0,.28); color: #fff; font-family: var(--bk-display); font-weight: 800; font-size: 13px; white-space: nowrap; line-height: normal; cursor: pointer; }
.bk-pin-punkt { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 999px; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.3); cursor: pointer; }
/* Bauwongs der Stammtische auf der Karte: goldener Pin mit Stufe, weit weg nur das Symbol */
.bk-bw-pin { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); display: flex; align-items: center; gap: 6px; border: 3px solid var(--bk-brown); border-radius: 16px 16px 16px 4px; padding: 5px 5px 5px 10px; background: var(--bk-gold); box-shadow: 0 4px 8px rgba(0,0,0,.3); color: var(--bk-brown); font-family: var(--bk-display); font-weight: 800; font-size: 13px; white-space: nowrap; line-height: normal; cursor: pointer; }
.bk-bw-pin b { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 8px; background: var(--bk-brown); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.bk-bw-pin-punkt { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 999px; border: 2px solid var(--bk-brown); background: var(--bk-gold); color: var(--bk-brown); display: flex; align-items: center; justify-content: center; font-size: 13px; box-shadow: 0 2px 5px rgba(0,0,0,.3); cursor: pointer; }
.bk-karte-bauwong-info { position: absolute; top: 72px; left: 14px; right: 14px; z-index: 1000; pointer-events: none; }
.bk-karte-bauwong-info .bk-karte-titel { display: inline-block; max-width: 100%; }
.bk-karte .leaflet-control-attribution { font-size: 10px; }
/* Titelkarte über der Karte (Stammtisch-Karte) */
.bk-karte-titel { background: #fff; border-radius: 15px; box-shadow: 0 4px 12px rgba(0,0,0,.18); padding: 10px 14px; }
.bk-karte-titel .bk-karte-name { font-size: 18px; }
@media (min-width: 1024px) {
	.bk-karte { height: calc(100vh - 67px); }
	.bk-karte-oben { padding: 16px 20px; }
	.bk-karte-oben { max-width: 520px; }
	.bk-karte-bauwong-info { top: 80px; left: 20px; }
}

/* ===== Bild zum Teilen (Mein Konto) ===== */
.bk-teilen-hinweis { font-size: 13px; font-weight: 700; color: var(--bk-faint-2); margin: 8px 2px 12px; }
.bk-teilen-karte { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px; }
.bk-teilen-bild { display: block; width: 100%; max-width: 380px; height: auto; border-radius: 16px; border: 2px solid var(--bk-border); background: var(--bk-cream-2); }
.bk-teilen-bild.hoch { max-width: 300px; }
.bk-teilen-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.bk-teilen-link { display: flex; gap: 8px; width: 100%; max-width: 420px; }
.bk .bk-teilen-link input { flex: 1; min-width: 0; border: 2px solid var(--bk-border); border-radius: 12px; padding: 9px 12px; font-family: var(--bk-body); font-size: 14px; font-weight: 700; color: var(--bk-text); background: var(--bk-cream-2); }
.bk-teilen-meldung { min-height: 20px; font-size: 13px; font-weight: 700; color: var(--bk-green-text); }

/* ===== Zahleneingaben: Ziffernfeld mit Minus/Plus/Max ===== */
.bk .bk-zahl { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; vertical-align: middle; }
.bk .bk-zahl-knopf { width: 44px; height: 44px; flex: none; border: 0; background: var(--bk-cream-2); border-radius: 12px; font-family: var(--bk-display); font-weight: 800; font-size: 22px; color: var(--bk-brown-2); line-height: 1; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.bk .bk-zahl-knopf:active { background: var(--bk-cream-3); }
.bk .bk-legacy input.bk-zahl-feld, .bk input.bk-zahl-feld { width: 84px !important; min-height: 44px; text-align: center; padding: 8px 6px; -moz-appearance: textfield; display: inline-block; }
.bk input.bk-zahl-feld::-webkit-outer-spin-button, .bk input.bk-zahl-feld::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bk .bk-zahl-max { min-height: 44px; border: 0; background: var(--bk-cream-2); border-radius: 10px; padding: 10px 12px; font-family: var(--bk-body); font-size: 12px; font-weight: 800; color: var(--bk-text); cursor: pointer; white-space: nowrap; }

/* ===== Gebäude-Detail ===== */
@media (min-width: 1024px) { .bk-main-inhalt > .bk-content { padding: 20px 24px; } }
.bk .bk-desk-h2 .bk-card-meta { font-family: var(--bk-body); font-size: 15px; }
.bk-gd-oben { display: flex; gap: 14px; align-items: flex-start; }
.bk-gd-bild { width: 120px; flex: none; background: var(--bk-cream-2); border-radius: 14px; padding: 6px; display: flex; align-items: center; justify-content: center; }
.bk-gd-bild img { width: 100%; height: auto; display: block; }
.bk-gd-text { font-size: 14px; font-weight: 600; color: var(--bk-text); line-height: 1.45; margin-top: 4px; }
.bk .bk-gd-knopf .bk-btn { margin-top: 12px; }
.bk .bk-gd-daten { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 800; }

/* ===== Kaserne ===== */
.bk .bk-kaserne-gruppe { margin-top: 6px; }
.bk-einheit.gesperrt { opacity: .7; }
.bk .bk-einheit-bild { background: #f1e6d2; overflow: hidden; }
.bk .bk-einheit-bild img { width: 40px; height: 40px; object-fit: contain; }
.bk .bk-einheit-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.bk .bk-einheit-form .bk-btn { flex: 1; min-width: 130px; }
.bk-entlassen { margin-top: 10px; }
.bk-entlassen summary { cursor: pointer; font-size: 13px; font-weight: 800; color: var(--bk-link); list-style: none; }
.bk-entlassen summary::-webkit-details-marker { display: none; }
.bk .bk-entlassen .bk-btn2 { width: auto; flex: 1; min-width: 130px; }

/* ===== Truppen-Versand: Tabelle bricht mobil zeilenweise um ===== */
@media (max-width: 1023px) {
	.bk-legacy table.bk-formtabelle, .bk-legacy table.bk-formtabelle > tbody { display: block; overflow: visible; }
	.bk-legacy table.bk-formtabelle tr { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; border-top: 2px solid var(--bk-border-soft); padding: 8px 14px; }
	.bk-legacy table.bk-formtabelle tr:first-child { border-top: 0; }
	.bk-legacy table.bk-formtabelle th, .bk-legacy table.bk-formtabelle td { display: block; border: 0; padding: 2px 0; width: auto !important; }
	.bk-legacy table.bk-formtabelle th { flex-basis: 100%; }
	.bk-legacy table.bk-formtabelle td:empty { display: none; }
	.bk-legacy table.bk-formtabelle td[colspan] { flex-basis: 100%; }
	.bk-legacy table.bk-formtabelle td[data-label] { background: var(--bk-cream-2); border-radius: 10px; padding: 4px 10px; font-size: 12px; font-weight: 800; }
	.bk-legacy table.bk-formtabelle td[data-label]::before { content: attr(data-label) " "; color: var(--bk-muted); }
	.bk-legacy table.bk-formtabelle td[data-label="Dauer"]:not(:empty) { order: 5; }
}

/* Tabellen mit fester Breite aus alten Inhalten (z.B. CMS-Seiten) passen sich an */
.bk-legacy table[style*="width"], .bk-legacy table[width] { width: 100% !important; table-layout: auto; }
/* "anywhere" wuerde die kleinstmoegliche Inhaltsbreite auf ein Zeichen setzen - breite Tabellen
   werden dann in den Container gequetscht und die Ueberschriften buchstabenweise umgebrochen.
   "break-word" bricht nur ein Wort, das allein nicht in die Zeile passt. */
.bk-legacy td, .bk-legacy th { word-break: normal; overflow-wrap: break-word; }

/* Gast-Startseite Desktop: Pflicht-Links unter dem CTA-Balken (Entwurf 2a zeigt den Balken ohne Links) */
@media (min-width: 1024px) {
	.bk-cta .bk-foot-links { display: none; }
	.bk-foot-gast { background: var(--bk-brown); border-top: 1px solid rgba(255,255,255,.12); padding: 14px 48px 22px; }
	.bk-foot-gast .bk-foot-links { max-width: 1184px; margin: 0 auto; }
	.bk .bk-foot-gast .bk-foot-links a { color: var(--bk-side-text); }
}

/* ===== Konto: Login, Registrierung, Freischaltung, Dorfgründung ===== */
@media (max-width: 1023px) { .bk .bk-hero .bk-gastkopf { background: none; padding: 0; } }
.bk-login-leiste { display: none; }
.bk .bk-login-leiste input { width: 200px; min-height: 44px; border: 2px solid var(--bk-border); background: #fff; border-radius: 12px; padding: 8px 12px; font-family: var(--bk-body); font-size: 15px; font-weight: 700; color: var(--bk-brown); outline: none; }
.bk .bk-login-leiste input[type=password] { width: 150px; }
.bk .bk-login-leiste input:focus { border-color: var(--bk-blue); }
.bk .bk-login-leiste .bk-btn.klein { min-height: 44px; padding: 9px 16px; }
.bk .bk-btn.bk-btn-blau { background: var(--bk-blue); box-shadow: 0 3px 0 var(--bk-blue-2); }
.bk .bk-leiste-klein { font-size: 12px; line-height: 1.15; font-weight: 700; color: var(--bk-muted); }
.bk-login-mobil { padding: 18px 18px 6px; background: var(--bk-cream); }

.bk-auth { max-width: 480px; margin: 0 auto; padding: 20px 16px 32px; display: flex; flex-direction: column; gap: 14px; }
.bk-auth-titel { margin: 0; font-family: var(--bk-display); font-size: 28px; font-weight: 800; color: var(--bk-brown); line-height: 1.1; }
.bk-auth-text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--bk-text); font-weight: 600; }
.bk .bk-auth-fuss { text-align: center; font-size: 14px; font-weight: 700; color: var(--bk-muted); }
.bk-schritte { display: flex; gap: 6px; }
/* min-width/overflow-wrap: seit dem vierten Schritt (Meldungen) ist eine Spalte am 320-px-Handy nur noch
   gut 65 px breit – ohne das darf ein langes Wort wie „bestätigen“ die Spalte und damit die Seite aufziehen */
.bk-schritt { flex: 1; min-width: 0; overflow-wrap: anywhere; border-top: 4px solid var(--bk-border); padding-top: 6px; font-size: 12px; font-weight: 800; color: var(--bk-faint); line-height: 1.25; }
.bk-schritt.aktiv { border-color: var(--bk-blue); color: var(--bk-blue-dark); }
.bk-schritt.fertig { border-color: var(--bk-green); color: var(--bk-green-text); }

.bk-form { display: flex; flex-direction: column; gap: 14px; }
.bk-card.bk-form { padding: 16px; }
.bk-form-titel { font-family: var(--bk-display); font-size: 21px; font-weight: 700; color: var(--bk-brown); line-height: 1.15; }
.bk-form-text { margin: -6px 0 0; font-size: 14px; line-height: 1.45; color: var(--bk-text); font-weight: 600; }
.bk-feld label { display: block; font-family: var(--bk-display); font-size: 16px; font-weight: 700; color: var(--bk-brown); margin-bottom: 5px; line-height: normal; }
.bk-feld small { display: block; font-size: 12px; line-height: 1.35; color: var(--bk-muted); font-weight: 600; margin-top: 5px; }
.bk .bk-form input[type=text], .bk .bk-form input[type=email], .bk .bk-form input[type=password], .bk .bk-form input[type=search], .bk .bk-form select, .bk .bk-form textarea {
	width: 100%; min-height: 48px; border: 2px solid var(--bk-border); background: #fff; border-radius: 12px; padding: 10px 13px;
	font-family: var(--bk-body); font-size: 16px; font-weight: 700; color: var(--bk-brown); outline: none; box-shadow: none; -webkit-appearance: none; appearance: none;
}
.bk .bk-form textarea { min-height: 96px; line-height: 1.45; }
.bk .bk-form input:focus, .bk .bk-form select:focus, .bk .bk-form textarea:focus { border-color: var(--bk-blue); }
.bk .bk-form input.bk-feld-kurz { width: 110px; }
.bk-feld-reihe { display: flex; gap: 8px; }
.bk-feld-reihe input { flex: 1; min-width: 0; }
.bk .bk-feld-reihe .bk-btn2.klein { width: auto; flex: none; padding: 10px 14px; font-size: 15px; }
.bk-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; color: var(--bk-text); font-weight: 600; cursor: pointer; }
.bk .bk-feld .bk-check { font-family: var(--bk-body); font-size: 13px; font-weight: 700; color: var(--bk-muted); margin: 8px 0 0; align-items: center; }
.bk-check input[type=checkbox] { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--bk-green); }
.bk-feld .bk-check input[type=checkbox] { width: 18px; height: 18px; }
.bk-form-mehr summary { cursor: pointer; font-size: 14px; font-weight: 800; color: var(--bk-link); }
.bk-form-mehr[open] summary { margin-bottom: 8px; }
.bk-form-links { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14px; font-weight: 700; }
.bk .bk-form-links a { color: var(--bk-link); }
.bk .bk-standort { gap: 8px; }
.bk-gruenden-karte { height: 340px; border-radius: 14px; border: 2px solid var(--bk-border); overflow: hidden; z-index: 0; }
.bk-fehlt { color: var(--bk-red) !important; font-weight: 800; }
.bk-gruenden-seite { padding: 16px 16px 28px; max-width: 760px; }
.bk-willkommen-bild { padding: 0; overflow: hidden; }
.bk-willkommen-bild img { display: block; width: 100%; }

@media (min-width: 1024px) {
	.bk-login-mobil { display: none; }
	.bk-login-leiste { display: flex; align-items: center; gap: 8px; }
	.bk-auth { padding: 8px 0 20px; }
	.bk-gruenden-seite { padding: 20px 24px 32px; }
	.bk-gruenden-karte { height: 440px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
	.bk .bk-gastkopf .bk-brand-name { font-size: 22px; }
	.bk .bk-login-leiste input { width: 170px; }
	.bk .bk-login-leiste input[type=password] { width: 120px; }
	.bk .bk-gastlink, .bk .bk-leiste-klein { display: none; }
}

/* ===== Aktions-Icons (Font Awesome): Bearbeiten, Löschen … überall als kleine Knöpfe ===== */
.bk a.bk-icon {
	display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 1px 2px; vertical-align: middle;
	border: 0; border-radius: 10px; background: none; color: var(--bk-brown-2); font-size: 15px; line-height: 1; text-decoration: none;
}
.bk a.bk-icon:hover { background: var(--bk-cream-2); color: var(--bk-blue); }
.bk a.bk-icon.gefahr { color: var(--bk-red); }
.bk a.bk-icon.gefahr:hover { background: #fbe3df; color: var(--bk-red); }
.bk-legacy td a.bk-icon { white-space: nowrap; }

/* ===== Gulden kaufen ===== */
.bk-gold { display: flex; flex-direction: column; gap: 12px; }
.bk-gold-konto { display: flex; align-items: center; gap: 12px; padding: 14px; }
.bk-gold-muenze { width: 52px; height: 52px; flex: none; border-radius: 16px; background: #fbeeda; display: flex; align-items: center; justify-content: center; }
.bk-gold-stand { font-family: var(--bk-display); font-size: 24px; font-weight: 800; color: var(--bk-brown); line-height: 1.1; }
.bk .bk-gold-konto .bk-btn2.klein { width: auto; padding: 9px 14px; font-size: 15px; min-height: 44px; }
.bk-gold-text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--bk-text); font-weight: 600; }
.bk-gold-h2 { margin-top: 4px; }
.bk-gold-pakete { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bk-gold-paket {
	position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px 10px 12px; cursor: pointer;
	background: #fff; border: 2px solid var(--bk-border); border-radius: 18px; font-family: var(--bk-body); color: var(--bk-brown); text-align: center;
	box-shadow: 0 3px 0 var(--bk-border); transition: transform .08s;
}
.bk-gold-paket:hover { border-color: var(--bk-gold); }
.bk-gold-paket:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--bk-border); }
.bk-gold-paket.aktiv { border-color: var(--bk-green); box-shadow: 0 3px 0 var(--bk-green-dark); background: var(--bk-green-bg); }
.bk-gold-anz { font-family: var(--bk-display); font-size: 28px; font-weight: 800; line-height: 1; color: var(--bk-brown); }
.bk-gold-einheit { font-size: 13px; font-weight: 800; color: var(--bk-gold-dark); }
.bk-gold-preis { margin-top: 8px; background: var(--bk-green); color: #fff; font-family: var(--bk-display); font-weight: 800; font-size: 16px; border-radius: 10px; padding: 5px 14px; }
.bk-gold-chip { position: absolute; top: -9px; right: 10px; background: var(--bk-gold); color: var(--bk-brown); font-size: 12px; font-weight: 800; border-radius: 999px; padding: 3px 9px; box-shadow: 0 2px 0 var(--bk-gold-dark); }
.bk-gold-chip.angebot { background: var(--bk-red); color: #fff; box-shadow: 0 2px 0 #8e2a1f; }
.bk-gold-zahlung:empty { display: none; }
.bk .bk-paypal { background: #0070ba; box-shadow: 0 3px 0 #003087; gap: 10px; }
.bk .bk-paypal i { font-size: 20px; }
.bk-gold-hinweis { background: var(--bk-cream-2); border-radius: 16px; padding: 14px 16px; font-size: 13px; line-height: 1.5; color: var(--bk-muted); font-weight: 600; }
@media (min-width: 1024px) {
	/* volle Inhaltsbreite wie die anderen Seiten; 6 Pakete = 3 × 2, breit 6 × 1 (keine Karte allein in einer Zeile) */
	.bk-gold { padding: 20px 24px; }
	.bk-gold-pakete { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
@media (min-width: 1400px) {
	.bk-gold-pakete { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 1023px) { .bk-gold { padding: 16px; } }

/* ===== Platzhalter ohne Bild (Spieler, Stammtisch) ===== */
.bk-platzhalter { position: relative; width: 200px; max-width: 100%; aspect-ratio: 1; border-radius: 22px; overflow: hidden; box-shadow: 0 3px 0 var(--bk-border); }
.bk-platzhalter-rand { position: absolute; inset: 0; background-color: #fff;
	background-image: linear-gradient(45deg, #d8f0ff 25%, transparent 25% 75%, #d8f0ff 75%), linear-gradient(45deg, #d8f0ff 25%, transparent 25% 75%, #d8f0ff 75%);
	background-size: 28px 28px; background-position: 0 0, 14px 14px; }
.bk-platzhalter-innen { position: absolute; inset: 12px; border-radius: 16px; background: var(--bk-cream); border: 2px solid var(--bk-border);
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 10px; }
.bk-platzhalter-icon { width: 76px; height: 76px; border-radius: 50%; background: #fbeeda; border: 2px solid var(--bk-border); display: flex; align-items: center; justify-content: center; font-size: 36px; color: var(--bk-brown-2); }
.bk-platzhalter-text { font-family: var(--bk-display); font-size: 17px; font-weight: 700; color: var(--bk-brown); line-height: 1.1; }
.bk a.bk-platzhalter-link { font-size: 13px; font-weight: 800; color: var(--bk-link); }

/* ===== Bauplatz: neues Gebäude bauen ===== */
.bk-bauplatz { display: flex; flex-direction: column; gap: 12px; }
.bk-bauplatz-hinweis { margin: 0; font-size: 14px; line-height: 1.45; color: var(--bk-text); font-weight: 600; }
.bk-bauplatz-liste { display: flex; flex-direction: column; gap: 10px; }
.bk-bauplatz-karte { padding: 14px; }
.bk-tile.bk-tile-gross { width: 64px; height: 64px; border-radius: 16px; }
.bk-bauplatz-text { margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--bk-text); }
.bk-bauplatz-knopf { margin-top: 12px; }
.bk-bauplatz-zurueck { margin-top: 4px; }
@media (min-width: 1024px) {
	.bk-bauplatz { padding: 20px 24px; }
	.bk-bauplatz-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.bk-bauplatz-karte { display: flex; flex-direction: column; }
	.bk-bauplatz-knopf { margin-top: auto; padding-top: 12px; }
	.bk .bk-bauplatz-zurueck > * { flex: 0 0 auto; padding: 11px 20px; }
}
@media (max-width: 1023px) { .bk-bauplatz { padding: 14px 16px 20px; } }

/* ===== Textseiten (Impressum, Datenschutz, Nutzungsbedingungen) ===== */
/* Textseiten (Hilfe, Impressum, Datenschutz, Nutzungsbedingungen) über die ganze Inhaltsbreite */
.bk-cms { display: flex; flex-direction: column; gap: 12px; }
.bk-cms-text { background: #fff; border: 2px solid var(--bk-border); border-radius: 18px; padding: 18px 20px; font-size: 14px; line-height: 1.6; color: var(--bk-text); }
.bk-cms-text b { color: var(--bk-brown); }
/* Gegliederte Rechtstexte (HTML aus docs/recht, Migration 097): Inhalt, Abschnitte, Listen, Tabellen, Kästen */
.bk-cms-text > :first-child { margin-top: 0; }
.bk-cms-text:has(> .bk-cms-inhalt) > * { max-width: 860px; }
.bk-cms-text > :last-child { margin-bottom: 0; }
.bk-cms-text p { margin: 0 0 10px; }
.bk-cms-text h2 { font-family: var(--bk-display); font-size: 19px; font-weight: 800; color: var(--bk-brown); line-height: 1.25; margin: 26px 0 8px; padding-top: 14px; border-top: 2px solid var(--bk-border-soft); scroll-margin-top: 80px; }
.bk-cms-text h3 { font-family: var(--bk-display); font-size: 17px; font-weight: 800; color: var(--bk-brown); margin: 0 0 8px; }
.bk-cms-text ul { margin: 0 0 10px; padding-left: 22px; }
.bk-cms-text li { margin: 3px 0; }
.bk-cms-text li > ul { margin: 4px 0 0; }
.bk-cms-text a { overflow-wrap: anywhere; }
.bk-cms-text code { font-family: ui-monospace, Consolas, monospace; font-size: 13px; background: #f6efe3; border-radius: 6px; padding: 1px 5px; overflow-wrap: anywhere; }
.bk-cms-inhalt { background: #fbf6ec; border-radius: 12px; padding: 12px 16px; margin-bottom: 6px; }
.bk-cms-inhalt ol { margin: 6px 0 0; padding-left: 24px; columns: 2 260px; column-gap: 28px; }
.bk-cms-inhalt li { margin: 2px 0; break-inside: avoid; }
.bk-cms-tabelle { overflow-x: auto; margin: 4px 0 12px; }
.bk-cms-tabelle table { border-collapse: collapse; width: 100%; font-size: 13px; }
.bk-cms-tabelle th, .bk-cms-tabelle td { text-align: left; vertical-align: top; padding: 7px 10px; border-bottom: 1px solid var(--bk-border-soft); }
.bk-cms-tabelle th { background: #fbf6ec; color: var(--bk-brown); font-weight: 800; }
.bk-cms-tabelle code { overflow-wrap: normal; }
.bk-cms-kasten, .bk-cms-formular { border: 2px solid var(--bk-border-soft); border-radius: 14px; padding: 14px 16px; margin: 14px 0; background: #fffdf8; }
.bk-cms-formular { border-style: dashed; }
.bk-cms-ende { font-style: italic; color: var(--bk-faint); }
.bk-cms-stand { margin-top: 20px !important; color: var(--bk-faint); font-size: 13px; }
@media (max-width: 600px) {
	.bk-cms-text { padding: 14px 14px; }
	.bk-cms-text h2 { font-size: 17px; }
	.bk-cms-kasten, .bk-cms-formular { padding: 12px; }
	.bk-cms-tabelle th, .bk-cms-tabelle td { padding: 6px 6px; overflow-wrap: anywhere; hyphens: auto; }
	.bk-cms-tabelle code { font-size: 11px; padding: 1px 3px; }
}

/* Direkt aufeinanderfolgende Info-Boxen nicht aneinanderkleben */
.bk-legacy .box3 + .box3, .bk-legacy .box3 + .box4, .bk-legacy .box4 + .box3, .bk-legacy .subnavi + .box3, .bk-legacy .box3 + form, .bk-legacy .box3 + table { margin-top: 10px; }

/* ===== Dorfansicht: Detail-Panel (Gebäude / freier Bauplatz) ===== */
.bk-dorf-panel { transition: opacity .15s; }
.bk-dorf-panel.laedt { opacity: .45; pointer-events: none; }
.bk-panel { display: flex; flex-direction: column; gap: 10px; }
.bk-panel-kopf { display: flex; gap: 12px; align-items: center; }
.bk-panel-kopftext { min-width: 0; }
.bk-panel-titel { font-family: var(--bk-display); font-size: 20px; font-weight: 800; color: var(--bk-brown); line-height: 1.1; }
.bk-panel-hammer { background: #fbeeda; color: var(--bk-brown-2); font-size: 26px; }
.bk-panel-bau { background: #fff4d6; color: #7a5a12; border-radius: 12px; padding: 9px 12px; font-size: 13px; font-weight: 800; line-height: 1.35; }
.bk-panel-label { font-size: 12px; font-weight: 800; color: var(--bk-faint); text-transform: uppercase; letter-spacing: .04em; margin-bottom: -4px; }
.bk .bk-panel .bk-chips { margin-top: 0; }
.bk .bk-panel-knopf .bk-btn { font-size: 17px; padding: 12px; min-height: 50px; }
.bk .bk-panel-oeffnen { padding: 10px; min-height: 44px; font-size: 15px; }
.bk-panel-mehr summary { cursor: pointer; font-size: 13px; font-weight: 800; color: var(--bk-link); }
.bk-panel-mehr p { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--bk-text); }
.bk-panel-meldung { border-radius: 12px; padding: 9px 12px; margin-bottom: 10px; font-size: 13px; font-weight: 800; background: var(--bk-green-bg); color: var(--bk-green-text); }
.bk-panel-meldung.fehler { background: #fbe3df; color: #8e2a1f; }
.bk-panel-liste { display: flex; flex-direction: column; gap: 8px; }
.bk-panel-zeile { display: flex; gap: 10px; align-items: center; background: #fff; border: 2px solid var(--bk-border-soft); border-radius: 14px; padding: 8px 10px; }
.bk-panel-zeiletext { flex: 1; min-width: 0; }
.bk-panel-zeile .bk-chips { margin-top: 4px; gap: 4px; }
.bk-panel-zeile .bk-chip { font-size: 11px; padding: 3px 7px; }
.bk .bk-panel-zeile .bk-btn.klein { flex: none; min-height: 40px; padding: 8px 12px; font-size: 14px; }
/* Mobil: Blatt scrollt bei langen Listen in sich */
.bk-dorfblatt .bk-dorf-panel { max-height: 58svh; overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px; }
.bk .bk-dorfblatt .bk-btn-row { margin-top: 12px; }
@media (min-width: 1024px) {
	.bk .bk-dorfkarte { padding: 16px; }
}
@media (min-width: 1024px) { .bk-dorf-bild.desk .bk-dorf-namepille { top: 12px; left: 12px; z-index: 7; } }
/* Bauschleife unter dem Dorfbild (Desktop) */
.bk-dorf-schleife { width: 100%; padding: 0 20px; }
.bk-schleife-kopf { font-family: var(--bk-display); font-size: 17px; font-weight: 800; color: var(--bk-brown); margin-bottom: 8px; }
.bk-schleife-kopf span { font-family: var(--bk-body); font-size: 13px; font-weight: 700; color: var(--bk-muted); margin-left: 6px; }
.bk-schleife-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.bk .bk-schleife-item { display: flex; align-items: center; gap: 10px; text-align: left; background: #fff; border: 2px solid var(--bk-border); border-radius: 14px; padding: 7px 10px; cursor: pointer; font-family: var(--bk-body); }
.bk .bk-schleife-item:hover { border-color: var(--bk-blue); }
.bk-schleife-item .bk-tile { width: 40px; height: 40px; border-radius: 12px; }
.bk-schleife-text { display: flex; flex-direction: column; min-width: 0; }
.bk-schleife-text b { font-size: 14px; color: var(--bk-brown); font-weight: 800; }
.bk-schleife-text span { font-size: 12px; color: var(--bk-muted); font-weight: 700; }
/* Eintrag + Blitz (sofort fertigstellen) nebeneinander; Platzhalter hält die Kästen gleich breit */
.bk-schleife-zeile { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
.bk-schleife-zeile .bk-schleife-item { flex: 1; min-width: 0; }
.bk .bk-schleife-sofort { flex: none; width: 44px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--bk-gold); color: var(--bk-brown); box-shadow: 0 3px 0 var(--bk-gold-dark); font-size: 18px; text-decoration: none; }
.bk .bk-schleife-sofort:hover { color: var(--bk-brown); filter: brightness(1.05); }
.bk .bk-schleife-sofort.aus { background: #fff; box-shadow: none; border: 2px solid var(--bk-border); color: var(--bk-faint-2); }
.bk-schleife-sofort.platz { visibility: hidden; }
.bk-dorfseite .bk-schleife-zeile { flex: none; }
.bk-dorfseite .bk-schleife-sofort.platz { display: none; }
.bk-schleife-leer { font-size: 14px; color: var(--bk-muted); font-weight: 600; background: #fff; border: 2px solid var(--bk-border); border-radius: 18px; padding: 12px 14px; }

/* ===== Dorf-Panel: Truppen ausbilden ===== */
.bk-panel-abschnitt { display: flex; flex-direction: column; gap: 8px; border-top: 2px solid var(--bk-border-soft); padding-top: 10px; }
.bk-panel-abschnitt-titel { font-family: var(--bk-display); font-size: 17px; font-weight: 800; color: var(--bk-brown); }
.bk-panel-bau div { font-weight: 700; margin-top: 2px; }
.bk-trupp { background: #fff; border: 2px solid var(--bk-border-soft); border-radius: 14px; padding: 8px 10px; display: flex; flex-direction: column; gap: 7px; }
.bk-trupp-kopf { display: flex; gap: 10px; align-items: center; }
.bk-trupp-bild { width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--bk-cream-2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.bk-trupp-bild img { max-width: 100%; max-height: 100%; display: block; }
.bk-trupp-text { min-width: 0; }
.bk-trupp-meta { font-size: 12px; line-height: 1.35; color: var(--bk-muted); font-weight: 600; }
.bk-trupp-wahl { display: flex; gap: 8px; align-items: center; }
.bk-trupp-zahl { display: flex; align-items: stretch; flex: 1; min-width: 0; border: 2px solid var(--bk-border); border-radius: 12px; overflow: hidden; background: #fff; height: 40px; }
.bk .bk-trupp-zahl button { flex: none; width: 36px; border: 0; background: var(--bk-cream-2); color: var(--bk-brown); font-family: var(--bk-display); font-size: 20px; font-weight: 800; cursor: pointer; padding: 0; }
.bk .bk-trupp-zahl button.max { width: auto; padding: 0 9px; font-size: 13px; border-left: 2px solid var(--bk-border); }
.bk .bk-trupp-zahl input { flex: 1; min-width: 0; width: 100%; border: 0; text-align: center; font-family: var(--bk-body); font-size: 16px; font-weight: 800; color: var(--bk-brown); outline: none; -moz-appearance: textfield; }
.bk-trupp-zahl input::-webkit-outer-spin-button, .bk-trupp-zahl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bk .bk-trupp-wahl .bk-btn.klein { flex: none; min-height: 40px; padding: 8px 12px; font-size: 14px; }
.bk-trupp-kosten { font-size: 12px; font-weight: 800; color: var(--bk-green-text); }
.bk-trupp-kosten:empty { display: none; }
.bk-trupp-fehlt { font-size: 12px; font-weight: 700; color: var(--bk-faint); }

/* ===== Forum (öffentlich und Stammtisch): Bereiche, Themen, Beiträge als Karten ===== */
.bk-forum.eingebettet { display: flex; flex-direction: column; gap: 10px; }
.bk .bk-forum-bereich-kopf { display: flex; align-items: flex-start; gap: 10px; color: inherit; }
.bk-forum-bereich-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bk-forum-bereich-kopf .bk-chip { flex: none; margin-top: 2px; }
.bk-forum-zeilen { margin-top: 10px; border-top: 1px solid var(--bk-border-soft); }
.bk .bk-forum-zeile { display: flex; align-items: baseline; gap: 10px; padding: 9px 0 0; color: var(--bk-text); font-size: 14px; font-weight: 700; }
.bk .bk-forum-zeile:hover { color: var(--bk-link); }
.bk-forum-zeile-titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-forum-zeile .bk-thema-zeit { flex: none; }
.bk-forum-neu { display: inline-block; vertical-align: 2px; background: var(--bk-red); color: #fff; border-radius: 999px; padding: 1px 7px; font-family: var(--bk-body); font-size: 10px; font-weight: 800; letter-spacing: .03em; line-height: 1.5; }
.bk-forum-symbol { color: var(--bk-brown-2); font-size: .85em; }
.bk .bk-forum-gelesen { width: auto; align-self: center; font-size: 14px; min-height: 40px; padding: 8px 16px; }
/* Moderations-Drei-Punkte-Menü an der Themen-Karte (core/lib/dreipunkt.inc.php): oben rechts über der Karte,
   Titel/Fuß bekommen Platz dafür frei (bk-thema-karte steht nur bei Moderationsrecht, core/social/forum.inc.php) */
.bk .bk-thema-karte { position: relative; }
.bk .bk-thema-karte > .bk-thema { padding-right: 38px; }
.bk .bk-thema-karte > .bk-dreipunkt { position: absolute; top: 12px; right: 10px; }
.bk-forum-themezeile { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.bk .bk-forum-zurueck { font-weight: 800; font-size: 14px; }
.bk-forum-geschlossen { background: var(--bk-cream-3); color: var(--bk-text); }
/* Sprungziele im Thema (letzter Beitrag, Reaktionen, Erwähnungen) landen nicht unter der festen Kopfleiste */
.bk-forum-anker { display: block; scroll-margin-top: 90px; }
.bk-beitrag { scroll-margin-top: 90px; }
.bk-beitrag-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.bk .bk-beitrag-autor { font-family: var(--bk-display); font-size: 16px; font-weight: 700; }
.bk-beitrag-aktionen { margin-left: auto; display: flex; gap: 6px; }
.bk-beitrag-text { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--bk-text); overflow-wrap: anywhere; }
.bk-beitrag-text img { max-width: 100%; height: auto; vertical-align: middle; }
.bk-beitrag-text .contentbox, .bk-beitrag-text .contentbox2 { background: var(--bk-cream-2); border-radius: 12px; padding: 10px 12px; margin: 6px 0; }
.bk-forum-ubb { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.bk .bk-forum-ubb-knopf { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; border-radius: 10px; color: var(--bk-brown-2); font-size: 15px; cursor: pointer; padding: 0; }
.bk .bk-forum-ubb-knopf:hover { background: var(--bk-cream-2); color: var(--bk-blue); }
.bk .bk-forum-form textarea { min-height: 140px; resize: vertical; }
@media (min-width: 1024px) {
	.bk-main-inhalt > .bk-content.bk-forum { max-width: 880px; }
}

/* ===== Dorf-Panel: Fest feiern ===== */
.bk-fest-moti { background: #fff; border: 2px solid var(--bk-border-soft); border-radius: 14px; padding: 9px 11px; display: flex; flex-direction: column; gap: 6px; }
.bk-fest-moti-zeile { display: flex; justify-content: space-between; font-size: 13px; font-weight: 800; color: var(--bk-brown); }
.bk-fest-moti .bk-bar { flex: none; }
.bk-fest-plus { font-family: var(--bk-body); font-size: 12px; font-weight: 800; color: var(--bk-green-text); background: var(--bk-green-bg); border-radius: 999px; padding: 1px 7px; margin-left: 4px; vertical-align: middle; }
.bk-fest .bk-card-title { font-size: 15px; }

/* ===== Dorf-Panel: Handeln (Kaufmann) ===== */
.bk-handel-label { font-size: 12px; font-weight: 800; color: var(--bk-faint); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.bk-handel-ziel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.bk .bk-handel-wahl { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 40px; padding: 6px 4px; border: 2px solid var(--bk-border); background: #fff; border-radius: 12px; font-family: var(--bk-body); font-size: 13px; font-weight: 800; color: var(--bk-text); cursor: pointer; }
.bk .bk-handel-wahl.aktiv { border-color: var(--bk-green); background: var(--bk-green-bg); color: var(--bk-green-text); }
.bk-handel-geben { display: flex; flex-direction: column; gap: 4px; }
.bk-handel-geben[hidden] { display: none !important; }
.bk-handel-name { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--bk-brown); }
.bk-handel-name span:last-child { font-weight: 600; color: var(--bk-muted); }
.bk-handel-ergebnis { font-size: 14px; font-weight: 700; color: var(--bk-text); text-align: center; background: var(--bk-cream-2); border-radius: 12px; padding: 8px; }
.bk-handel-ergebnis b { color: var(--bk-green-text); }
.bk .bk-handel-knopf { font-size: 16px; padding: 11px; min-height: 48px; }

/* ===== Dorf-Panel: Expedition ===== */
.bk-expe-stand { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bk-expe-stand > div { background: #fff; border: 2px solid var(--bk-border-soft); border-radius: 12px; padding: 7px 10px; display: flex; flex-direction: column; }
.bk-expe-stand b { font-family: var(--bk-display); font-size: 18px; font-weight: 800; color: var(--bk-brown); line-height: 1.1; }
.bk-expe-stand span { font-size: 12px; font-weight: 700; color: var(--bk-muted); }
.bk-panel-hinweis { background: #fbe3df; color: #8e2a1f; border-radius: 12px; padding: 9px 12px; font-size: 13px; font-weight: 700; line-height: 1.4; }
.bk .bk-link-knopf { border: 0; background: none; padding: 0; font: inherit; font-weight: 800; color: var(--bk-link); text-decoration: underline; cursor: pointer; }

/* ===== Bauschleife mobil: Leiste unter dem Dorfbild (nur wenn etwas gebaut wird) ===== */
.bk-dorfseite .bk-dorf-schleife { padding: 0 14px 12px; position: relative; z-index: 6; margin-top: -20px; }
.bk-dorfseite .bk-dorf-schleife.leer { display: none; }
.bk-dorfseite .bk-schleife-kopf { font-size: 14px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.45); margin-bottom: 6px; }
.bk-dorfseite .bk-schleife-kopf span { color: #fff; opacity: .9; font-size: 11px; }
.bk-dorfseite .bk-schleife-liste { display: flex; overflow-x: auto; gap: 8px; scrollbar-width: none; }
.bk-dorfseite .bk-schleife-liste::-webkit-scrollbar { display: none; }
.bk .bk-dorfseite .bk-schleife-item { flex: none; min-width: 200px; padding: 6px 9px; box-shadow: 0 3px 8px rgba(0,0,0,.18); }
.bk-dorfseite .bk-schleife-item .bk-tile { width: 34px; height: 34px; border-radius: 10px; }
.bk-dorfseite .bk-schleife-text b { font-size: 13px; }
.bk-uhr { font-variant-numeric: tabular-nums; }

/* ===== Seitenwechsel ohne Reload: Ladebalken ===== */
html.bk-laedt::before { content: ""; position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 9999; background: linear-gradient(90deg, var(--bk-gold), var(--bk-green), var(--bk-gold)); background-size: 200% 100%; animation: bk-laden 1s linear infinite; }
html.bk-laedt body { cursor: progress; }
@keyframes bk-laden { from { background-position: 200% 0; } to { background-position: 0 0; } }

/* ===== Overlay-Modul (core/lib/bk_overlay.js): Desktop Fenster, mobil ganzer Bildschirm, X oben rechts ===== */
html.bk-ov-offen, html.bk-ov-offen body { overflow: hidden; }
.bk-ov { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; }
.bk-ov[hidden] { display: none; }
.bk-ov-hg { position: absolute; inset: 0; background: rgba(40, 26, 12, .55); }
.bk-ov-fenster { position: relative; display: flex; flex-direction: column; background: var(--bk-cream); overflow: hidden;
	width: 100%; height: 100%; height: 100dvh; }
.bk-ov-kopf { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; background: var(--bk-cream); border-bottom: 2px solid var(--bk-border); min-height: 56px; }
.bk-ov-titel { flex: 1; min-width: 0; font-family: var(--bk-display); font-size: 19px; font-weight: 800; color: var(--bk-brown); line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk .bk-ov-zu { flex: none; width: 44px; height: 44px; border: 0; background: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--bk-brown); cursor: pointer; padding: 0; }
.bk .bk-ov-zu:hover { background: #fbe3df; color: var(--bk-red); }
.bk-ov-inhalt { position: relative; flex: 1; min-height: 0; }
.bk-ov-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--bk-cream); }
.bk-ov-laden { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font-size: 30px; color: var(--bk-blue); }
.bk-ov.laedt .bk-ov-laden { display: flex; }
.bk-ov.laedt .bk-ov-frame { visibility: hidden; }
@media (min-width: 768px) {
	.bk-ov { padding: 24px; }
	.bk-ov-fenster { width: min(900px, 100%); height: min(86vh, 920px); border-radius: 22px; border: 3px solid #fff; box-shadow: 0 18px 50px rgba(40, 26, 12, .35); }
	.bk-ov-kopf { padding: 10px 10px 10px 20px; }
}
/* Seite im Overlay-Fenster: nur Inhalt */
body.bk-overlay-seite { background: var(--bk-cream); min-height: 0; }
.bk-overlay-main > .bk-content { padding: 16px 16px 28px; }
@media (min-width: 1024px) { .bk-overlay-main > .bk-content { padding: 20px 24px 28px; } }

/* ===== Suche: Spieler, Dörfer, Stammtische als Karten ===== */
.bk-suche-seite { display: flex; flex-direction: column; gap: 12px; }
.bk-suche-feld { display: flex; gap: 8px; }
.bk .bk-suche-feld input { flex: 1; min-width: 0; min-height: 48px; border: 2px solid var(--bk-border); background: #fff; border-radius: 14px; padding: 10px 14px; font-family: var(--bk-body); font-size: 16px; font-weight: 700; color: var(--bk-brown); outline: none; }
.bk .bk-suche-feld input:focus { border-color: var(--bk-blue); }
.bk .bk-suche-feld .bk-btn.klein { gap: 6px; }
.bk-suche-summe { font-size: 14px; font-weight: 600; color: var(--bk-muted); }
.bk-suche-summe b { color: var(--bk-brown); }
.bk-suche-sprung { padding: 0; }
.bk .bk-suche-sprung .bk-tab b { color: var(--bk-blue-text); margin-left: 3px; }
.bk-suche-abschnitt { display: flex; flex-direction: column; gap: 8px; scroll-margin-top: 70px; }
.bk-suche-titel { margin: 6px 0 0; font-family: var(--bk-display); font-size: 20px; font-weight: 700; color: var(--bk-brown); }
.bk-suche-leer { font-size: 14px; color: var(--bk-faint); font-weight: 600; background: var(--bk-cream-2); border-radius: 14px; padding: 10px 14px; }
.bk-treffer-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.bk-card.bk-treffer { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; }
.bk-treffer-kopf { display: flex; gap: 12px; align-items: flex-start; }
.bk .bk-treffer-bild { width: 52px; height: 52px; flex: none; border-radius: 16px; overflow: hidden; background: var(--bk-blue-light); display: flex; align-items: center; justify-content: center; font-family: var(--bk-display); font-size: 24px; font-weight: 800; color: var(--bk-blue-dark); }
.bk-treffer-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk .bk-treffer-bild.dorf { background: #fbeeda; padding: 5px; }
.bk-treffer-bild.dorf img { object-fit: contain; }
.bk .bk-treffer-bild.allianz { background: var(--bk-cream-3); color: var(--bk-brown-2); font-size: 24px; }
.bk-treffer-text { min-width: 0; flex: 1; }
.bk .bk-treffer-name { font-family: var(--bk-display); font-size: 18px; font-weight: 700; color: var(--bk-brown); margin-right: 6px; }
.bk-treffer-name mark { background: #ffe58a; color: inherit; border-radius: 4px; padding: 0 2px; }
.bk-treffer-meta { font-size: 13px; line-height: 1.45; font-weight: 600; color: var(--bk-muted); }
.bk .bk-treffer-meta a { color: var(--bk-link); font-weight: 700; }
.bk-abzeichen { display: inline-block; vertical-align: 2px; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 8px; margin-right: 4px; background: var(--bk-cream-3); color: var(--bk-brown-2); }
.bk-abzeichen.blau { background: var(--bk-blue-light); color: var(--bk-blue-dark); }
.bk-abzeichen.gruen { background: var(--bk-green-bg); color: var(--bk-green-text); }
.bk-abzeichen.gold { background: #fdf0c8; color: var(--bk-gold-dark); }
.bk-treffer-online { color: var(--bk-green-text); font-weight: 800; }
.bk-treffer-online::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bk-green); margin-right: 4px; vertical-align: 1px; }
.bk-treffer-aktionen { display: flex; gap: 6px; flex-wrap: wrap; }
.bk .bk-treffer-aktionen .bk-btn2.klein { width: auto; min-height: 38px; padding: 7px 12px; font-size: 14px; gap: 5px; }
.bk .bk-treffer-aktionen .bk-btn2.gefahr { color: var(--bk-red); }
/* Knöpfe, deren Text am Handy wegfällt (bk-nur-desk), zeigen dort nur ihr Symbol – und Symbole haben nie eine Umrandung */
@media (max-width: 1023px) {
	.bk .bk-btn2.symbol { border-color: transparent; background: none; box-shadow: none; padding-left: 9px; padding-right: 9px; }
	.bk .bk-btn2.symbol:hover { background: var(--bk-cream-2); }
}
/* Aktionsknöpfe im Dorfprofil (fremdes Dorf): Nachricht, Rohstoffe, Unterstützen, Spionieren, Angreifen */
/* Dorfprofil eines fremden Dorfs (/city/N, auch im Overlay von der Karte aus):
   am Handy untereinander, ab Tablet das Bild links neben den Angaben. */
.bk-dorfprofil { display: flex; flex-direction: column; gap: 14px; }
.bk-dorfprofil-bild { text-align: center; }
/* Ersatzbild ohne Wappen: bu8.png ist nur 154 × 117 px groß – nie breiter zeichnen, sonst wird es unscharf
   (vorher 62 % bzw. 180 px, also hochgezogen; Entscheidung 23.09.2026) */
.bk-dorfprofil-bild img { width: 62%; max-width: 154px; height: auto; }
/* Rechte Spalte als Stapel mit dem Kartenabstand der Seite (--bk-kartenabstand von .bk-content) – damit
   stehen Anfängerschutz, Angaben und Aktionen gleich weit auseinander (Anfängerschutz klebte vorher mit 0 px) */
.bk-dorfprofil-text { min-width: 0; display: flex; flex-direction: column; gap: var(--bk-kartenabstand, 12px); }
.bk-dorfprofil-text > * { margin-top: 0; margin-bottom: 0; }
@media (min-width: 700px) {
	.bk-dorfprofil { flex-direction: row; align-items: flex-start; gap: 22px; }
	.bk-dorfprofil-bild { flex: none; width: 180px; text-align: left; }
	.bk-dorfprofil-bild img { width: 100%; max-width: 154px; }
	.bk-dorfprofil-text { flex: 1; }
	/* Wappen 144 px statt der 120 px am Handy – !important, weil wappen_html() die Größe als --wg ins
	   style-Attribut schreibt und ein Stilblatt das sonst nicht überstimmt */
	.bk .bk-dorfprofil-wappen .bk-wappen { --wg: 144px !important; }
}

.bk-aktionsknoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
/* ===== Dorfprofil eines fremden Dorfs: Angaben und Chronik (Roadmap 23) ===== */
/* EIN Abstand für alle Blöcke des Dorfprofils – derselbe wie zwischen Wappen und Angaben (.bk-dorfprofil,
   gap 14px). Die Blöcke selbst tragen keinen Außenabstand, sonst addiert er sich (Wunsch „kein Abstand“, 23.09.2026). */
.bk .bk-dorf-angaben { display: flex; flex-direction: column; gap: 7px; margin: 0; }
.bk .bk-dorfprofil-aktionen { display: flex; flex-direction: column; gap: var(--bk-kartenabstand, 12px); min-width: 0; }
.bk .bk-dorfprofil-aktionen > * { margin-top: 0; margin-bottom: 0; }
/* Fest als EIN Block: „Feiert gerade …“, darunter der Knopf, darunter der Gefahren-Hinweis. Die Teile kommen
   aus gaudi.inc.php (gaudi_fest_hinweis, gaudi_knopf) – hier wird nur angeordnet, nichts am Text geändert. */
.bk .bk-dorfprofil-fest { background: var(--bk-green-bg); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bk .bk-dorfprofil-fest .bk-gaudi-fest { background: none; padding: 0; margin: 0; border-radius: 0; }
.bk .bk-dorfprofil-fest .bk-gaudi-aus { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.bk .bk-dorfprofil-fest .bk-btn.klein, .bk .bk-dorfprofil-fest .bk-btn2.klein { width: auto; min-height: 42px; padding: 8px 14px; font-size: 15px; gap: 6px; text-decoration: none; }
.bk .bk-dorfprofil-fest .bk-gaudi-grund, .bk .bk-dorfprofil-fest .bk-gaudi-warnung { margin: 0; }
.bk .bk-dorf-angabe { display: flex; align-items: flex-start; gap: 9px; min-width: 0; font-size: 14px; font-weight: 700; color: var(--bk-text); line-height: 1.35; }
.bk .bk-dorf-angabe > i { width: 17px; flex: none; margin-top: 2px; text-align: center; color: var(--bk-faint); font-size: 13px; }
.bk .bk-dorf-angabe span { min-width: 0; overflow-wrap: anywhere; }
.bk .bk-dorf-text { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--bk-border); font-size: 14px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
/* Karte im Dorfprofil. NICHT .bk-dorf-karte – so heißt der Rahmen um das Dorfbild (position:absolute,
   width:132 %), den erbte die Karte vorher und zog die Seite am 320-px-Handy auf 414 px. Die Karte selbst
   kommt aus map_mark() mit fester Breite (615 px) – hier auf die Kartenbreite begrenzt. */
/* width:100% ausdrücklich: Im Fenster ist der Rahmen ein Flex-Element, das sich ohne feste Breite auf seinen
   Inhalt zusammenzieht – und der Inhalt (.bk-kartenkasten mit width:100%) hat keine eigene Breite, beides wurde 0 px
   (Karte leer, 23.09.2026). Kein margin-top: den Abstand setzt der Kartenabstand von .bk-content. */
.bk .bk-dorfprofil-karte { width: 100%; box-sizing: border-box; margin-top: 0; overflow: hidden; }
.bk .bk-dorfprofil-karte .bk-kartenkasten, .bk .bk-dorfprofil-karte .leaflet-container { width: 100% !important; max-width: 100%; }
/* Chronik: eine Zeile je Ereignis, Symbol links – keine Kästchen, damit eine lange Liste ruhig bleibt */
.bk ul.bk-cchr { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bk .bk-cchr-zeile { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.bk .bk-cchr-icon { width: 20px; flex: none; margin-top: 2px; text-align: center; font-size: 14px; }
.bk .bk-cchr-icon.rot { color: var(--bk-red); }
.bk .bk-cchr-icon.gruen { color: var(--bk-green); }
.bk .bk-cchr-icon.gold { color: var(--bk-gold); }
.bk .bk-cchr-icon.blau { color: var(--bk-blue); }
.bk .bk-cchr-icon.braun, .bk .bk-cchr-icon.grau { color: var(--bk-faint); }
.bk .bk-cchr-text { display: block; font-size: 14px; font-weight: 700; color: var(--bk-text); line-height: 1.4; overflow-wrap: anywhere; }

/* Gaudibursch im fremden Dorfprofil: ausgegrauter Knopf und Begründung nebeneinander in EINER Zeile
   (Wunsch des Projektinhabers 23.09.2026), am schmalen Handy darf die Leiste umbrechen. */
.bk .bk-gaudi-aus { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.bk .bk-gaudi-grund { font-size: 13px; font-weight: 700; color: var(--bk-faint); line-height: 1.3; }
/* Der Kasten „Feiert gerade …“ klebte an der Box darüber */
.bk .bk-gaudi-fest { margin-top: 14px; }

/* ===== Feste in der Nähe (/feste, core/game/feste_naehe.inc.php) ===== */
.bk .bk-fest-karte { margin-bottom: 10px; }
.bk .bk-fest-kopf { display: flex; align-items: flex-start; gap: 10px; }
.bk .bk-fest-icon { color: var(--bk-gold); font-size: 18px; margin-top: 2px; flex: none; }
.bk .bk-fest-zahlen { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 4px; font-size: 13px; font-weight: 700; color: var(--bk-muted); }
.bk .bk-fest-zahlen i { color: var(--bk-faint); margin-right: 4px; }
.bk .bk-fest-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.bk .bk-fest-form .bk-btn.klein { width: auto; min-height: 40px; padding: 8px 14px; }
.bk .bk-fest-bulldog { flex: 1 1 100%; min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.35; }
.bk .bk-fest-aus { margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--bk-faint); line-height: 1.35; }
/* Gefahr einer Rauferei (Migration 187) – ein Nebenhinweis, kein Kasten. Die Schrift kommt seit 24.09.2026 aus
   .bk-card-meta.s12 (klein, gedämpft), hier steht nur noch der Abstand – sonst überstimmte diese Regel sie wieder */
.bk .bk-fest-warnung, .bk .bk-gaudi-warnung { margin-top: 8px; line-height: 1.35; }
.bk .bk-fest-warnung i, .bk .bk-gaudi-warnung i { color: var(--bk-gold); margin-right: 5px; }
.bk .bk-fest-mehr { margin: 10px 0; }
/* Kasten „Wo ist mein Gaudibursch?“ (gaudi_status_box): lange Dorfnamen ohne Leerzeichen brechen um,
   Zurückrufen als schlichter Textlink wie in der Liste „Unterwegs“ (randlos) */
.bk .bk-gaudi-box .bk-card-meta { overflow-wrap: anywhere; }
.bk .bk-gaudi-zurueck { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 800; }
.bk .bk-aktionsknoepfe .bk-btn2.klein, .bk .bk-aktionsknoepfe .bk-btn.klein { width: auto; min-height: 42px; padding: 8px 14px; font-size: 15px; gap: 6px; text-decoration: none; }
/* Am Handy jeder Knopf ueber die ganze Breite - vorher standen sie je nach Textlaenge
   unterschiedlich breit und treppenfoermig untereinander. */
@media (max-width: 559px) {
	.bk .bk-aktionsknoepfe .bk-btn2.klein, .bk .bk-aktionsknoepfe .bk-btn.klein { width: 100%; justify-content: center; }
	/* Dorfprofil: „Angreifen“ teilt sich die letzte Zeile mit dem Drei-Punkte-Menü – sonst stand das ⋮ allein
	   in einer Zeile (Politur, 23.09.2026). Nur hier, andere Knopfreihen bleiben wie sie sind. */
	.bk .bk-dorfprofil-aktionen .bk-aktionsknoepfe .bk-btn2.klein.gefahr { width: auto; flex: 1 1 0; min-width: 0; }
	.bk .bk-dorfprofil-aktionen .bk-aktionsknoepfe > .bk-dreipunkt { flex: none; align-self: center; }
}
.bk .bk-aktionsknoepfe .bk-btn2.gefahr { color: var(--bk-red); }
.bk .bk-aktionsknoepfe .bk-btn2.gefahr:hover { border-color: var(--bk-red); }
.bk-nur-desk { display: none; }
@media (min-width: 1024px) {
	.bk-suche-seite { padding: 20px 24px; }
	.bk-treffer-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.bk-nur-desk { display: inline; }
}
@media (max-width: 1023px) {
	.bk-suche-seite { padding: 14px 16px 20px; }
}

/* ===== Dorfbild: Markierungen im Comic-Stil (freier Bauplatz, Ausbau möglich, Stufe, im Bau) =====
   Größen in cqw der 1020er Karte (calc(Npx-auf-1020 / 10.2)), mit Mindestgröße fürs Handy. Umriss dunkelbraun wie die Rohstoff-Icons. */
.bk-dorf-karte { --bk-umriss: #4a2f16; }
.bk .bk-dorf-platz { aspect-ratio: 1; }
.bk-dorf-platz-knopf {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: max(26px, calc(40cqw / 10.2)); height: max(26px, calc(40cqw / 10.2));
	display: flex; align-items: center; justify-content: center; border-radius: 50%;
	background: var(--bk-blue-light); border: max(2px, calc(3cqw / 10.2)) solid var(--bk-blue); color: var(--bk-blue);
	font-size: max(12px, calc(17cqw / 10.2)); line-height: 1; box-shadow: 0 max(2px, calc(3cqw / 10.2)) 0 rgba(26, 79, 116, .35);
	transition: transform .12s, background-color .12s, color .12s;
}
.bk .bk-dorf-platz:hover .bk-dorf-platz-knopf, .bk .bk-dorf-platz:focus-visible .bk-dorf-platz-knopf { background: #fff; transform: translate(-50%, -50%) scale(1.12); }
.bk .bk-dorf-platz.gewaehlt .bk-dorf-platz-knopf { background: var(--bk-blue); color: #fff; transform: translate(-50%, -50%) scale(1.15); box-shadow: 0 0 0 max(3px, calc(5cqw / 10.2)) rgba(255, 255, 255, .85), 0 max(2px, calc(3cqw / 10.2)) 0 rgba(26, 79, 116, .35); }

.bk .bk-dorf-geb .bk-dorf-stufe {
	left: calc(88cqw / 10.2); top: calc(40cqw / 10.2); width: auto; height: max(16px, calc(24cqw / 10.2));
	min-width: max(16px, calc(24cqw / 10.2)); padding: 0 max(3px, calc(5cqw / 10.2));
	background: #fff; border: 0; border-radius: 999px;
	font-family: var(--bk-display); font-weight: 800; font-size: max(10px, calc(14cqw / 10.2));
	line-height: max(16px, calc(24cqw / 10.2)); color: var(--bk-umriss); box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.bk .bk-dorf-geb .bk-dorf-up, .bk-dorf-baut {
	position: absolute; left: calc(58cqw / 10.2); top: calc(6cqw / 10.2); z-index: 3;
	width: max(18px, calc(28cqw / 10.2)); height: max(18px, calc(28cqw / 10.2));
	display: flex; align-items: center; justify-content: center; border-radius: 50%;
	background: var(--bk-green); border: max(1.5px, calc(2.5cqw / 10.2)) solid var(--bk-umriss); color: #fff;
	font-size: max(10px, calc(14cqw / 10.2)); line-height: 1; box-shadow: 0 max(1px, calc(2cqw / 10.2)) 0 rgba(74, 47, 22, .3);
}
.bk .bk-dorf-geb .bk-dorf-up { border: 0; box-shadow: 0 max(1px, calc(2cqw / 10.2)) 0 var(--bk-green-dark); }
.bk-dorf-baut { background: var(--bk-blue-light); border-color: var(--bk-blue); color: var(--bk-blue); box-shadow: 0 max(1px, calc(2cqw / 10.2)) 0 rgba(26, 79, 116, .35); }
@media (prefers-reduced-motion: no-preference) {
	.bk .bk-dorf-geb .bk-dorf-up i { animation: bk-dorf-hoch 1.8s ease-in-out infinite; }
	.bk-dorf-baut i { transform-origin: 70% 80%; animation: bk-dorf-hammer 1s ease-in-out infinite; }
	@keyframes bk-dorf-hoch { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-2px); } }
	@keyframes bk-dorf-hammer { 0%, 100% { transform: rotate(-25deg); } 50% { transform: rotate(20deg); } }
}

/* ===== Rohstoffleiste: Zuwachs je Stunde; Premium-Dorfwechsel in Seitenleiste und Menü ===== */
.bk-res-rate { font-size: 10px; font-weight: 800; color: var(--bk-green-text); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-res-rate.voll { color: var(--bk-red); }
.bk-dorfwahl { display: flex; flex-direction: column; gap: 5px; margin: 0 2px 12px; }
.bk-dorfwahl-titel { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--bk-side-text); opacity: .85; }
.bk .bk-dorfwahl select { width: 100%; min-height: 42px; border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; border-radius: 12px; padding: 8px 10px; font-family: var(--bk-display); font-size: 15px; font-weight: 700; cursor: pointer; }
.bk .bk-dorfwahl select option { color: var(--bk-brown); background: #fff; }
.bk .bk-dorfwahl-kompakt { flex: 0 1 auto; min-width: 0; max-width: 100%; height: 32px; align-self: center; border: 2px solid var(--bk-border); background: #fff; border-radius: 10px; padding: 0 22px 0 8px; font-family: var(--bk-display); font-size: 13px; font-weight: 700; color: var(--bk-brown); text-overflow: ellipsis; cursor: pointer; }
.bk-topbar-user:has(.bk-dorfwahl-kompakt) { align-items: center; }
.bk-topbar-user:has(.bk-dorfwahl-kompakt) .bk-topbar-pkt { display: none; }
/* Dorfauswahl am schmalen Handy (Quirin 25.09.2026, Auftrag Chef): Bei 320 px blieb für den Namen nur „Q…“. Nur mit Auswahl
   (ab zwei Dörfern) rücken die Symbole enger zusammen und die Auswahl wird schlanker – so sind ~10 Zeichen lesbar,
   ohne dass die Kopfleiste breiter wird oder ein Symbol wegfällt. */
@media (max-width: 400px) {
	.bk-topbar:has(.bk-dorfwahl-kompakt) { gap: 4px; padding-right: 4px; }
	.bk-topbar:has(.bk-dorfwahl-kompakt) .bk-topbar-menu { width: 42px; }
	.bk-topbar:has(.bk-dorfwahl-kompakt) .bk-topbar-logout { width: 34px; }
	.bk .bk-topbar:has(.bk-dorfwahl-kompakt) .bk-topbar-gold { padding: 6px 7px 6px 5px; gap: 3px; font-size: 13px; }
	.bk .bk-topbar .bk-dorfwahl-kompakt { padding-left: 6px; padding-right: 16px !important; background-position: right 4px center; background-size: 10px; font-size: 12px; }
}

/* Namens-Box im Dorfbild: Dorfname → Rathaus, Motivation → Wirtshaus */
.bk .bk-namepille-link { color: inherit; text-decoration: none; border-bottom: 2px dotted rgba(74, 47, 22, .35); }
.bk .bk-namepille-link:hover, .bk .bk-namepille-link:focus-visible { color: var(--bk-blue); border-bottom-color: var(--bk-blue); }

/* Bauschleife in der rechten Spalte der Dorfansicht (Desktop): ganz oben, nur wenn etwas im Bau ist */
.bk-aside .bk-schleife-karte:has(.bk-dorf-schleife.leer) { display: none; }
.bk-aside .bk-schleife-karte { background: var(--bk-news-bg); border-color: var(--bk-news-border); }
.bk-aside .bk-schleife-karte .bk-dorf-schleife { padding: 0; }
.bk-aside .bk-schleife-karte .bk-schleife-kopf span { display: block; margin: 2px 0 0; }
.bk-aside .bk-schleife-karte .bk-schleife-liste { grid-template-columns: minmax(0, 1fr); }

/* ===== Pulldowns und Datums-/Zeitfelder im Stil der übrigen Eingabefelder ===== */
.bk-legacy input[type=date], .bk-legacy input[type=time], .bk-legacy input[type=datetime-local], .bk-legacy input[type=search], .bk-legacy input[type=url], .bk-legacy input[type=tel],
.bk .bk-form input[type=date], .bk .bk-form input[type=time], .bk .bk-form input[type=number] {
	width: 100% !important; max-width: 100%; min-height: 44px; border: 2px solid var(--bk-border); background: #fff; border-radius: 12px;
	padding: 9px 12px; font-family: var(--bk-body); font-size: 15px; font-weight: 700; color: var(--bk-brown); outline: none; box-shadow: none;
}
.bk-legacy input[type=date]:focus, .bk-legacy input[type=time]:focus, .bk-legacy input[type=datetime-local]:focus { border-color: var(--bk-blue); }
.bk input[type=date]::-webkit-calendar-picker-indicator, .bk input[type=time]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; }
/* Einheitlicher Pfeil statt Browser-Standard */
.bk-legacy select:not([multiple]), .bk .bk-form select:not([multiple]), .bk .bk-dorfwahl-kompakt {
	-webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 36px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a5a2b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
}
.bk .bk-dorfwahl-kompakt { padding-right: 26px !important; background-position: right 7px center; background-size: 12px; }
.bk .bk-dorfwahl select { -webkit-appearance: none; appearance: none; padding-right: 34px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; }
.bk-legacy select:disabled, .bk-legacy input:disabled { opacity: .55; cursor: not-allowed; }

/* Primär-Knopf in alten Inhaltsseiten (z. B. „Neue Welt anlegen“) */
.bk .bk-legacy a.bk-btn.klein { display: inline-flex; width: auto; gap: 8px; }
.bk .bk-legacy .bk-btn-neu { margin: 4px 0 8px; align-self: flex-start; }
.bk .bk-premium-knopf { display: flex; justify-content: center; margin: 14px 0 18px; }
.bk .bk-premium-knopf .bk-btn { flex-wrap: wrap; gap: 0 8px; }
.bk .bk-premium-preis { font-family: var(--bk-body); font-weight: 700; font-size: 13px; opacity: .85; }

/* ===== News-Glocke in der Kopfleiste: rot mit Zahl, wenn es Neues gibt ===== */
.bk a.bk-glocke { position: relative; flex: none; width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--bk-faint-2); font-size: 18px; text-decoration: none; }
.bk a.bk-glocke.desk { color: rgba(255,255,255,.85); background: rgba(255,255,255,.12); margin-right: 10px; }
.bk a.bk-glocke.neu { color: var(--bk-red); }
.bk-glocke-zahl { position: absolute; top: 1px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--bk-red); color: #fff; border: 2px solid #fff; font-family: var(--bk-body); font-size: 11px; font-weight: 800; line-height: 14px; text-align: center; }
.bk-glocke.desk .bk-glocke-zahl { background: var(--bk-gold); color: var(--bk-brown); top: -5px; right: -6px; border-color: var(--bk-blue); }
/* Lautsprecher neben der Glocke (Ton bei Ereignissen, core/lib/bk_ton.js) */
/* Ton-Schalter neben der Glocke: gleiche Größe und Klickfläche wie Glocke, Chat und Wer ist online (Handy 34 px, Rechner 38 px) */
.bk .bk-ton-schalter { flex: none; width: 38px; height: 38px; margin: 0; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--bk-faint-2); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.bk .bk-ton-schalter.mobil { width: 34px; }
.bk .bk-ton-schalter.aus { opacity: .6; }
.bk .bk-ton-schalter.desk { color: rgba(255,255,255,.85); background: rgba(255,255,255,.12); margin: 0 10px 0 0; }
.bk .bk-ton-schalter.mobil { color: #e6d5b3; }
.bk .bk-ton-schalter:hover { opacity: 1; }
/* Die Symbole der Kopfleiste (Chat, Wer ist online, Glocke) sehen gleich aus: Maße, Farben und Abstände wie .bk-glocke,
   Zahl wie .bk-glocke-zahl. Am Handy alle drei 34 px breit – bei 320 px passen sonst Gulden und Abmelden nicht mehr in die Leiste. */
.bk a.bk-wer-online, .bk a.bk-kopf-chat { position: relative; flex: none; width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--bk-faint-2); font-size: 18px; text-decoration: none; }
.bk a.bk-wer-online.mobil, .bk a.bk-kopf-chat.mobil, .bk a.bk-glocke.mobil { width: 34px; }
.bk a.bk-wer-online.mobil, .bk a.bk-kopf-chat.mobil { color: #e6d5b3; }
.bk a.bk-wer-online.desk, .bk a.bk-kopf-chat.desk { color: rgba(255,255,255,.85); background: rgba(255,255,255,.12); margin-right: 10px; }
/* Wer ist online: Zahl hell mit dunkler Schrift (.bk-online gibt es schon für „grad da“ im Stammtisch, daher eigene Klasse) */
.bk .bk-wer-online-zahl { position: absolute; top: 1px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #e3f4de; color: #1f5e24; border: 2px solid var(--bk-brown); font-family: var(--bk-body); font-size: 11px; font-weight: 800; line-height: 14px; text-align: center; }
.bk .bk-wer-online.desk .bk-wer-online-zahl { top: -5px; right: -6px; border-color: var(--bk-blue); }
/* Chat (core/social/chat.inc.php, chat_kopf_knopf): bei Neuem wie die Glocke – Zahl für Stammtisch und Privat, nur ein Punkt für „Alle“.
   bk_chat.js frischt beides auf; eigene Klasse, weil andere Skripte an .bk-glocke zählen */
.bk a.bk-kopf-chat.neu { color: var(--bk-red); }
/* Bei Neuem (Glocke und Chat, Handy und Rechner): flach rot gefüllt, Symbol weiß – kein Ring, kein Schatten, kein Verlauf
   (Wunsch des Projektinhabers 17.09.2026). Zahl und Punkt auf der roten Fläche am Handy weiß mit roter Schrift. */
.bk a.bk-glocke.neu.mobil, .bk a.bk-glocke.neu.desk, .bk a.bk-kopf-chat.neu.mobil, .bk a.bk-kopf-chat.neu.desk {
	color: #fff; background: #e74c3c; background-image: none; box-shadow: none; border: 0; text-shadow: none; filter: none; }
/* Helleres Rot auf Wunsch des Projektinhabers: Weiß darauf 3,8 : 1 (genug für ein Symbol). Die kleine Zahl darunter
   bleibt im dunkleren --bk-red (5,4 : 1 auf Weiß), sonst wäre sie für Text zu blass. */
.bk a.bk-glocke.neu.mobil .bk-glocke-zahl, .bk a.bk-kopf-chat.neu.mobil .bk-kopf-chat-zahl { background: #fff; color: var(--bk-red); }
.bk a.bk-kopf-chat.neu.mobil .bk-kopf-chat-punkt { background: #fff; }
.bk .bk-kopf-chat-zahl { position: absolute; top: 1px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--bk-red); color: #fff; border: 2px solid var(--bk-brown); font-family: var(--bk-body); font-size: 11px; font-weight: 800; line-height: 14px; text-align: center; }
.bk .bk-kopf-chat.desk .bk-kopf-chat-zahl { background: var(--bk-gold); color: var(--bk-brown); top: -5px; right: -6px; border-color: var(--bk-blue); }
.bk .bk-kopf-chat-punkt { position: absolute; top: 5px; right: 4px; width: 10px; height: 10px; border-radius: 999px; background: var(--bk-red); border: 2px solid var(--bk-brown); }
.bk .bk-kopf-chat.desk .bk-kopf-chat-punkt { top: -3px; right: -3px; background: var(--bk-gold); border-color: var(--bk-blue); }
.bk .bk-kopf-chat-zahl[hidden], .bk .bk-kopf-chat-punkt[hidden] { display: none; }
/* Marker an einem Menüpunkt als eigener Link (bk_nav_extra_zeile, z. B. offene Chat-Meldungen an „Administration“) */
.bk .bk-nav-marker { position: relative; }
.bk .bk-nav-marker > a:first-child { padding-right: 48px; }
.bk .bk-nav-marker > a.bk-nav-marker-link { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); text-decoration: none; }
.bk .bk-nav-marker > a.bk-nav-marker-link:hover { filter: brightness(1.1); }
/* Overlay auf: Scrollleiste bleibt als leere Rinne stehen, sonst rückt die Seite nach rechts (bk_overlay.js setzt bk-ov-rinne nur, wenn es eine Leiste gab) */
html.bk-ov-offen.bk-ov-rinne { scrollbar-gutter: stable; }
/* Sehr schmale Handys (bis 369 px): Mit Chat, Wer ist online, Glocke und Ton liefe die Kopfleiste sonst über –
   Symbole 30 px statt 34 px und engere Abstände (gemessen bei 320 px: Abmelden endet dann innerhalb der Leiste) */
@media (max-width: 369px) {
	.bk-topbar { gap: 4px; }
	.bk a.bk-kopf-chat.mobil, .bk a.bk-wer-online.mobil, .bk a.bk-glocke.mobil, .bk .bk-ton-schalter.mobil { width: 30px; }
}
/* Mit vier Symbolen (Admins: dazu Wer ist online) blieb links für Punkte bzw. Dorfauswahl kaum etwas (370 px: 8 px) –
   dann schon bis 430 px schmal, bis 380 px außerdem Gulden ohne Münze und Abmelden schmaler (gemessen: 320 px → 31 px, 370 px → 61 px) */
@media (max-width: 430px) {
	.bk .bk-topbar:has(.bk-wer-online.mobil) { gap: 4px; }
	.bk .bk-topbar:has(.bk-wer-online.mobil) a.bk-kopf-chat.mobil, .bk .bk-topbar:has(.bk-wer-online.mobil) a.bk-wer-online.mobil,
	.bk .bk-topbar:has(.bk-wer-online.mobil) a.bk-glocke.mobil, .bk .bk-topbar:has(.bk-wer-online.mobil) .bk-ton-schalter.mobil { width: 30px; }
}
@media (max-width: 380px) {
	.bk .bk-topbar:has(.bk-wer-online.mobil) .bk-topbar-gold { padding: 6px 9px; }
	.bk .bk-topbar:has(.bk-wer-online.mobil) .bk-topbar-gold svg { display: none; }
	.bk .bk-topbar:has(.bk-wer-online.mobil) .bk-topbar-logout { width: 32px; }
}
@media (prefers-reduced-motion: no-preference) {
	.bk-glocke.neu i { transform-origin: 50% 10%; animation: bk-glocke-laeuten 2.4s ease-in-out infinite; }
	@keyframes bk-glocke-laeuten { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(16deg); } 80% { transform: rotate(-14deg); } 85% { transform: rotate(10deg); } 90% { transform: rotate(-6deg); } 95% { transform: rotate(3deg); } }
}

/* ===== Eigene Namen für Brauerei und Wirtshaus ===== */
.bk-name-karte { margin-top: 12px; }
.bk-name-panel summary i { font-size: 11px; margin-right: 3px; }
.bk-name-form { margin-top: 8px; }
.bk .bk-name-form input { flex: 1; min-width: 0; min-height: 40px; border: 2px solid var(--bk-border); background: #fff; border-radius: 12px; padding: 8px 12px; font-family: var(--bk-body); font-size: 15px; font-weight: 700; color: var(--bk-brown); outline: none; }
.bk .bk-name-form input:focus { border-color: var(--bk-blue); }
.bk .bk-name-form .bk-btn.klein { flex: none; min-height: 40px; padding: 8px 14px; font-size: 14px; }
/* Lange eigene Namen: Schilder im Dorfbild mobil begrenzen (Ausweichen hält sie dann im Bild) */
.bk-dorfseite .bk-dorf-pille > span { max-width: 44vw; overflow: hidden; text-overflow: ellipsis; font-size: 12px; padding: 3px 9px; }
.bk-dorf-bild.desk .bk-dorf-pille > span { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
/* Schilder der übrigen Gebäude (Paket A: jedes Gebäude ist beschriftet) – kleiner und ohne Stufe, damit das Bild sichtbar bleibt */
.bk .bk-dorf-pille.neben > span { font-size: 11px; font-weight: 700; padding: 2px 7px; border-width: 1.5px; box-shadow: 0 2px 4px rgba(0,0,0,.25); opacity: .92; }
.bk-dorf-bild.desk .bk-dorf-pille.neben > span { font-size: 12px; padding: 3px 9px; }
.bk .bk-dorf-pille.neben > i { height: calc(6px + var(--dy, 0px)); }

/* ===== Spiel anschauen (/kostenloses-browserspiel) ===== */
.bk-vorstellung { display: flex; flex-direction: column; gap: 14px; max-width: 980px; margin: 0 auto; }
.bk-vorstellung-kopf { display: flex; flex-direction: column; gap: 10px; }
.bk .bk-vorstellung-knoepfe > * { flex: 1; }
.bk-vorstellung-bild { padding: 0; overflow: hidden; }
.bk-vorstellung-bild img { display: block; width: 100%; }
.bk-vorstellung-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.bk-vorstellung-karte { display: flex; gap: 14px; align-items: flex-start; padding: 16px; }
.bk-vorstellung-karte h2 { margin: 0 0 6px; }
.bk-vorstellung-karte .bk-form-text { margin: 0; }
.bk-vorstellung-icon { width: 48px; height: 48px; flex: none; border-radius: 14px; background: #fbeeda; color: var(--bk-brown-2); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.bk-vorstellung-cta { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: var(--bk-news-bg); border-color: var(--bk-news-border); }
@media (min-width: 1024px) {
	.bk-vorstellung { padding: 24px; }
	.bk-vorstellung-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.bk .bk-vorstellung-knoepfe > * { flex: 0 0 auto; width: auto; padding-left: 26px; padding-right: 26px; }
	.bk .bk-vorstellung-cta .bk-btn { width: auto; align-self: flex-start; padding: 13px 28px; }
}
@media (max-width: 1023px) { .bk-vorstellung { padding: 16px; } }
/* Rundgang mit Handy-Screenshots (/kostenloses-browserspiel) */
.bk-rundgang { display: flex; flex-direction: column; gap: 12px; padding: 16px; overflow: hidden; }
.bk-rundgang-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.bk-rundgang-kopf h2, .bk-rundgang-kopf p { margin: 0; }
.bk-rundgang-kopf h2 { margin-bottom: 4px; }
.bk-rundgang-pfeile { display: none; gap: 8px; flex: none; }
.bk-rundgang-spur { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 4px 16px 10px; scroll-padding-inline: 16px; overscroll-behavior-x: contain; scrollbar-width: thin; }
.bk-rundgang-bild { flex: 0 0 min(62vw, 230px); margin: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; }
.bk-rundgang-handy { border: 5px solid var(--bk-brown); border-radius: 26px; overflow: hidden; background: #fff; box-shadow: 0 6px 16px rgba(74, 46, 23, .18); }
.bk-rundgang-handy img { display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; }
.bk-rundgang-bild figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.35; color: var(--bk-muted); }
.bk-rundgang-bild figcaption b { font-size: 15px; color: var(--bk-brown-2); }
@media (min-width: 1024px) {
	.bk-rundgang { padding: 20px; }
	.bk-rundgang-pfeile { display: flex; }
	.bk-rundgang-spur { margin: 0 -20px; padding-inline: 20px; scroll-padding-inline: 20px; }
}

/* ===== Stammtisch-Profil (/stammtisch/N), Top-Stammtische, Einladen ===== */
.bk-stprofil { display: flex; flex-direction: column; gap: 12px; }
.bk-stprofil-kopf { display: flex; gap: 16px; align-items: flex-start; padding: 14px; }
.bk-stprofil-bild { width: 96px; flex: none; }
.bk-stprofil-bild img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; }
.bk-stprofil-bild .bk-platzhalter { width: 96px; border-radius: 16px; }
.bk-stprofil-bild .bk-platzhalter { box-shadow: none; }
.bk-stprofil-bild .bk-platzhalter-rand { display: none; }
.bk-stprofil-bild .bk-platzhalter-innen { inset: 0; border-radius: 16px; }
.bk-stprofil-bild .bk-platzhalter-icon { width: 44px; height: 44px; font-size: 20px; }
.bk-stprofil-bild .bk-platzhalter-text { display: none; }
.bk-stprofil-daten { flex: 1; min-width: 0; }
.bk .bk-stprofil-name { margin: 0 0 4px; font-family: var(--bk-display); font-size: 22px; font-weight: 800; color: var(--bk-brown); line-height: 1.15; overflow-wrap: anywhere; }
.bk-stprofil-knoepfe { margin-top: 12px; }
.bk .bk-stprofil-knoepfe > * { gap: 8px; }
.bk-stprofil-karte { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.bk-stprofil-text { font-size: 15px; font-weight: 600; color: var(--bk-text); line-height: 1.5; overflow-wrap: anywhere; }
.bk-stprofil-mitglieder { display: flex; flex-wrap: wrap; gap: 8px; }
.bk .bk-stprofil-mitglied { display: inline-flex; align-items: center; gap: 8px; background: var(--bk-cream-2); border-radius: 12px; padding: 7px 12px; color: var(--bk-brown); text-decoration: none; }
.bk .bk-stprofil-mitglied:hover { background: #fbeeda; color: var(--bk-brown); }
.bk-stprofil-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--bk-faint); flex: none; }
.bk-stprofil-punkt.an { background: var(--bk-green); }
.bk-stprofil-nick { font-family: var(--bk-display); font-weight: 700; font-size: 15px; }
.bk-stprofil-pkt { font-size: 12px; font-weight: 700; color: var(--bk-muted); }
.bk-stprofil-map { border-radius: 14px; overflow: hidden; }
.bk-stprofil-map .bk-kartenkasten { display: block; max-width: none !important; }
@media (max-width: 1023px) {
	.bk .bk-stprofil-knoepfe { flex-direction: column; }
	.bk-stprofil-map .bk-kartenkasten { height: 260px !important; }
}
@media (min-width: 1024px) {
	.bk-stprofil-kopf { padding: 18px; gap: 20px; }
	.bk-stprofil-bild, .bk-stprofil-bild .bk-platzhalter { width: 140px; }
	.bk-stprofil-bild .bk-platzhalter-icon { width: 60px; height: 60px; font-size: 28px; }
	.bk .bk-stprofil-name { font-size: 26px; }
	.bk .bk-stprofil-knoepfe > * { flex: 0 0 auto; width: auto; padding-left: 22px; padding-right: 22px; }
}
.bk-legacy form.bk-feld-knopf { display: flex; gap: 8px; align-items: stretch; max-width: 560px; }
.bk-legacy form.bk-feld-knopf input[type=text] { flex: 1; min-width: 0; width: auto !important; min-height: 48px; }
.bk-legacy form.bk-feld-knopf input[type=submit] { flex: none; margin: 0; }

/* ===== Spielerprofil (/user/N) und Diplomatie ===== */
.bk-abzeichen.rot { background: #fbe3df; color: var(--bk-red); }
.bk-spprofil-abzeichen { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.bk-spprofil-abzeichen .bk-abzeichen { margin: 0; }
.bk .bk-card-meta a { color: var(--bk-link); font-weight: 700; }
.bk-stprofil-abschnitt { display: flex; flex-direction: column; gap: 8px; }
.bk-stprofil-abschnitt .bk-h3 { margin: 4px 0 0; }
.bk-spprofil-admin { background: var(--bk-cream-2); border-style: dashed; }
.bk-spprofil-admin .bk-card-title i { color: var(--bk-muted); margin-right: 4px; }
.bk-diplo { display: flex; flex-direction: column; gap: 12px; }
.bk-legacy .bk-diplo .bk-h3 { margin: 6px 0 0; }
.bk-diplo-hinweis { margin: 0; font-size: 14px; font-weight: 600; color: var(--bk-muted); line-height: 1.5; }
.bk-diplo-hinweis i { color: var(--bk-blue); margin-right: 2px; }
.bk-diplo-form { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; }
.bk-diplo-wahlen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.bk-diplo-wahl { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 2px solid var(--bk-border); border-radius: 14px; background: #fff; cursor: pointer; }
.bk-legacy .bk-diplo-wahl input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.bk-diplo-wahl-icon, .bk-diplo-eintrag-icon { width: 40px; height: 40px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; background: var(--bk-cream-3); color: var(--bk-brown-2); }
.bk-diplo-wahl-text { display: flex; flex-direction: column; min-width: 0; }
.bk-diplo-wahl-text b { font-family: var(--bk-display); font-size: 16px; color: var(--bk-brown); }
.bk-diplo-wahl-text span { font-size: 13px; font-weight: 600; color: var(--bk-muted); }
.bk-diplo-wahl:has(input:checked) { border-color: var(--bk-blue); background: var(--bk-blue-light); }
.bk-diplo-wahl:has(input:focus-visible) { outline: 2px solid var(--bk-blue); outline-offset: 2px; }
.gruen > .bk-diplo-wahl-icon, .bk-diplo-eintrag-icon.gruen { background: var(--bk-green-bg); color: var(--bk-green-text); }
.blau > .bk-diplo-wahl-icon, .bk-diplo-eintrag-icon.blau { background: var(--bk-blue-light); color: var(--bk-blue-dark); }
.rot > .bk-diplo-wahl-icon, .bk-diplo-eintrag-icon.rot { background: #fbe3df; color: var(--bk-red); }
.bk-diplo-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.bk-card.bk-diplo-eintrag { display: flex; gap: 12px; align-items: center; padding: 10px 12px; }
.bk .bk-diplo-eintrag-name { font-family: var(--bk-display); font-size: 17px; font-weight: 700; color: var(--bk-brown); }
.bk-diplo-eintrag .bk-abzeichen { margin: 2px 0 0; }
.bk-diplo-eintrag-aktionen { display: flex; gap: 2px; flex: none; }
@media (min-width: 1024px) {
	.bk-diplo-wahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bk-diplo-wahl { flex-direction: column; text-align: center; padding: 14px 12px; }
	.bk-diplo-wahl-text { align-items: center; }
	.bk-diplo-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bk .bk-diplo-knoepfe > * { flex: 0 0 auto; width: auto; padding-left: 22px; padding-right: 22px; }
}

/* ===== Startseite: weitere Dörfer als kompakte Karten ===== */
.bk-dorfkarten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.bk-dorfkarte-klein { display: flex; gap: 12px; align-items: center; background: #fff; border: 2px solid var(--bk-border); border-radius: 18px; padding: 10px 12px; min-width: 0; }
.bk .bk-dorfkarte-klein .bk-dk-bild { width: 64px; height: 52px; border-radius: 12px; }
.bk .bk-dorfkarte-klein .bk-dk-name a { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-dorfkarte-klein .bk-dk-laune { margin-top: 5px; }
.bk-dk-icons { display: flex; gap: 6px; flex: none; }
.bk .bk-dk-icons a { width: 40px; height: 40px; border-radius: 12px; background: var(--bk-cream-2); color: var(--bk-brown-2); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.bk .bk-dk-icons a:hover { background: #fbeeda; color: var(--bk-brown); }
@media (min-width: 1024px) {
	.bk-dorfkarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.bk-dorfkarte-klein .bk-dk-laune .bk-bar { min-width: 48px; }
.bk-dorfkarte-klein .bk-dk-laune span { white-space: nowrap; }
@media (max-width: 479px) {
	.bk-dk-icons { flex-direction: column; }
	.bk .bk-dk-icons a { width: 36px; height: 34px; font-size: 15px; }
	.bk-dorfkarte-klein .bk-dk-laune { flex-wrap: wrap; row-gap: 2px; }
}

/* ===== Premium: Dorfzentrale (Startseite) und Ansicht-Umschalter ===== */
.bk-zentrale-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.bk-zentrale-kopf .bk-start-desk-kopf { margin: 0; }
.bk-umschalter { display: inline-flex; background: var(--bk-cream-3); border: 2px solid var(--bk-border); border-radius: 14px; padding: 3px; gap: 3px; }
.bk-umschalter > * { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; font-family: var(--bk-display); font-size: 14px; font-weight: 700; color: var(--bk-muted); text-decoration: none; white-space: nowrap; }
.bk .bk-umschalter > a { color: var(--bk-muted); }
.bk .bk-umschalter > a:hover { color: var(--bk-brown); background: rgba(255, 255, 255, .5); }
.bk-umschalter > .aktiv { background: #fff; color: var(--bk-brown); box-shadow: 0 2px 0 var(--bk-border); }
/* Bereiche ein-/ausblenden: Pulldown links neben dem Ansicht-Umschalter */
.bk-zkopf-rechts { display: flex; align-items: stretch; gap: 8px; }
.bk-zmenue { position: relative; }
.bk-zmenue > summary { list-style: none; height: 100%; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--bk-cream-3); border: 2px solid var(--bk-border); border-radius: 14px; font-family: var(--bk-display); font-size: 14px; font-weight: 700; color: var(--bk-brown); cursor: pointer; white-space: nowrap; user-select: none; }
.bk-zmenue > summary::-webkit-details-marker { display: none; }
.bk-zmenue > summary:hover, .bk-zmenue[open] > summary { background: #fff; }
.bk-zmenue-zahl { font-size: 12px; color: var(--bk-muted); }
.bk-zmenue-pfeil { font-size: 11px; color: var(--bk-muted); transition: transform .15s; }
.bk-zmenue[open] .bk-zmenue-pfeil { transform: rotate(180deg); }
.bk-zmodule { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 220px; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 2px; background: #fff; border: 2px solid var(--bk-border); border-radius: 14px; box-shadow: 0 6px 16px rgba(0, 0, 0, .15); }
.bk-zmenue-titel { padding: 4px 10px 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--bk-muted); }
.bk .bk-zmodul-knopf { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--bk-muted); font: inherit; font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; }
.bk .bk-zmodul-knopf i { font-size: 17px; color: var(--bk-faint); }
.bk .bk-zmodul-knopf.an { color: var(--bk-brown); }
.bk .bk-zmodul-knopf.an i { color: var(--bk-green); }
.bk .bk-zmodul-knopf:hover { background: var(--bk-cream-2); }
.bk-zmodul { display: flex; flex-direction: column; gap: 12px; }
/* Startseite ohne Ansicht-Umschalter: Pulldown steht allein rechts, die Auswahl klappt nach links auf (core/game/bereiche.inc.php) */
.bk-zkopf-rechts:has(> .bk-zmenue.allein) { margin-left: auto; }
.bk-zmenue.allein .bk-zmodule { left: auto; right: 0; }
.bk-zmenue-hinweis { max-width: 240px; padding: 4px 10px 2px; font-size: 12px; font-weight: 700; line-height: 1.35; color: var(--bk-red); }
.bk-zmodul[hidden], .bk-zmodule-leer[hidden] { display: none; }
.bk .bk-zteaser { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; border: 2px dashed var(--bk-gold); background: var(--bk-news-bg); color: var(--bk-text); font-size: 14px; font-weight: 600; line-height: 1.45; text-decoration: none; }
.bk-zteaser > i { font-size: 22px; color: var(--bk-gold-dark); flex: none; }
.bk-zteaser b { color: var(--bk-brown); }

/* Alarm */
.bk-zentrale-alarm { background: #fbe3df; border: 2px solid var(--bk-red); border-radius: 18px; padding: 12px 14px; color: var(--bk-text); }
.bk-alarm-kopf { font-family: var(--bk-display); font-size: 18px; font-weight: 800; color: var(--bk-red); display: flex; align-items: center; gap: 8px; }
.bk-zentrale-alarm ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bk-zentrale-alarm li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; background: #fff; border-radius: 12px; padding: 8px 10px; font-size: 14px; font-weight: 700; }
.bk-alarm-ziel { flex: 1 1 220px; min-width: 0; }
.bk-alarm-ziel i { color: var(--bk-red); font-size: 12px; margin: 0 2px; }
.bk-alarm-zeit { font-weight: 800; color: var(--bk-red); white-space: nowrap; }
.bk .bk-alarm-knopf { background: var(--bk-red); color: #fff; border-radius: 10px; padding: 6px 10px; font-size: 13px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.bk .bk-alarm-knopf:hover { color: #fff; filter: brightness(1.08); }
.bk-alarm-tipp { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--bk-muted); }

/* Kennzahlen */
.bk-zkacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bk-zkachel { background: #fff; border: 2px solid var(--bk-border); border-radius: 16px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bk-zkachel.breit { grid-column: 1 / -1; }
.bk-zkachel.alarm { border-color: var(--bk-red); background: #fdf1ef; }
.bk-zkachel-titel { font-size: 12px; font-weight: 800; color: var(--bk-muted); text-transform: uppercase; letter-spacing: .03em; }
.bk-zkachel > b { font-family: var(--bk-display); font-size: 22px; color: var(--bk-brown); line-height: 1.15; }
.bk-zkachel > b span { font-size: 13px; color: var(--bk-muted); }
.bk-zkachel > small { font-size: 12px; font-weight: 700; color: var(--bk-muted); }
.bk-zkachel-raten { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.bk-zkachel-raten span { display: inline-flex; align-items: center; gap: 5px; font-family: var(--bk-display); font-size: 17px; font-weight: 700; color: var(--bk-green-text); }
.bk-zkachel-raten img { width: 22px; height: 22px; }

/* Hinweise */
.bk-zhinweise { display: flex; flex-direction: column; gap: 8px; }
.bk-zhinweis { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: #fff; border: 2px solid var(--bk-border); border-left-width: 6px; border-radius: 14px; padding: 10px 12px; }
.bk-zhinweis.stufe1 { border-left-color: var(--bk-red); }
.bk-zhinweis.stufe2 { border-left-color: var(--bk-gold); }
.bk-zhinweis.stufe3, .bk-zhinweis.stufe4 { border-left-color: var(--bk-blue); }
.bk-zhinweis-icon { width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--bk-cream-3); color: var(--bk-brown-2); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.bk-zhinweis.stufe1 .bk-zhinweis-icon { background: #fbe3df; color: var(--bk-red); }
.bk-zhinweis .bk-row-main { flex: 1 1 200px; }
.bk-zhinweis-titel { font-size: 15px; font-weight: 700; color: var(--bk-text); }
.bk-zhinweis-titel b { color: var(--bk-brown); }
.bk-zhinweis-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; }
.bk .bk-zhinweis-knoepfe .bk-btn2.klein { width: auto; min-height: 36px; padding: 6px 12px; font-size: 14px; }
.bk-zhinweis-mehr { padding-left: 4px; }
/* dezenter Nachsatz unter den Hinweisen (Dörfer ohne Ausbau) */
.bk-zhinweis-dezent { margin-top: 10px; padding-left: 4px; }
.bk .bk-zhinweis-dezent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.bk-zhinweis-dezent i { margin-right: 4px; opacity: .7; }
.bk-zhinweis-dezent + .bk-zhinweis-dezent { margin-top: 4px; }
.bk-schleife-leer i { color: var(--bk-green); margin-right: 4px; }

/* Dörfer */
.bk-zdoerfer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.bk-card.bk-zdorf { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.bk-card.bk-zdorf.angriff { border-color: var(--bk-red); box-shadow: 0 0 0 2px #fbe3df; }
.bk-zdorf-kopf { display: flex; gap: 12px; align-items: center; min-width: 0; }
.bk .bk-zdorf .bk-dk-bild { width: 64px; height: 52px; border-radius: 12px; }
.bk .bk-zdorf .bk-dk-name { flex-wrap: wrap; }
.bk .bk-zdorf .bk-dk-name a { font-size: 18px; }
.bk-zdorf .bk-dk-name .bk-abzeichen { margin: 0; }
.bk-zdorf-res { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.bk .bk-zres { position: relative; display: flex; align-items: center; gap: 6px; background: var(--bk-cream-2); border-radius: 12px; padding: 6px 8px 9px; color: var(--bk-text); text-decoration: none; overflow: hidden; min-width: 0; }
.bk-zres img { width: 24px; height: 24px; flex: none; }
.bk-zres-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.bk-zres-text b { font-size: 15px; color: var(--bk-brown); }
.bk-zres-text small { font-size: 11px; font-weight: 700; color: var(--bk-green-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-zres.fast .bk-zres-text small { color: var(--bk-gold-dark); }
.bk-zres.voll .bk-zres-text small, .bk-zres.voll .bk-zres-text b { color: var(--bk-red); }
.bk-zres-bar { position: absolute; left: 8px; right: 8px; bottom: 4px; height: 3px; border-radius: 3px; background: var(--bk-bar-bg); overflow: hidden; }
.bk-zres-bar span { display: block; height: 100%; background: var(--bk-green); }
.bk-zres.fast .bk-zres-bar span { background: var(--bk-gold); }
.bk-zres.voll .bk-zres-bar span { background: var(--bk-red); }
.bk-zdorf-info { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.bk-zinfo { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bk-zinfo-icon { width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--bk-cream-3); color: var(--bk-brown-2); display: flex; align-items: center; justify-content: center; font-size: 13px; }
.bk-zinfo-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.bk-zinfo-text b { font-size: 14px; color: var(--bk-brown); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-zinfo-text b.leer { color: var(--bk-gold-dark); }
.bk-zinfo-text small { font-size: 12px; font-weight: 700; color: var(--bk-muted); }
.bk .bk-zinfo-text small a { color: var(--bk-link); }
.bk-zinfo-zahl { font-size: 12px; font-weight: 800; color: var(--bk-muted); background: var(--bk-cream-2); border-radius: 999px; padding: 2px 8px; flex: none; }
.bk-zdorf-aktiv { display: flex; flex-wrap: wrap; gap: 6px; }
.bk .bk-zakt { display: inline-flex; align-items: center; gap: 5px; background: var(--bk-green-bg); color: var(--bk-green-text); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 800; text-decoration: none; }

/* Bewegungen */
.bk-zbewegungen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.bk-card.bk-zmove-block { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bk-zmove-block .bk-card-title i { color: var(--bk-muted); margin-right: 4px; }
.bk-zzahl { display: inline-block; min-width: 22px; text-align: center; font-family: var(--bk-body); font-size: 12px; font-weight: 800; background: var(--bk-cream-3); color: var(--bk-brown-2); border-radius: 999px; padding: 1px 7px; vertical-align: 2px; }
.bk-zmove { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 2px solid var(--bk-border-soft); min-width: 0; }
.bk-zmove-block .bk-card-title + .bk-zmove { border-top: 0; padding-top: 2px; }
.bk-zmove-icon { width: 34px; height: 34px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 15px; background: var(--bk-cream-3); color: var(--bk-brown-2); }
.bk-zmove.rot .bk-zmove-icon { background: #fbe3df; color: var(--bk-red); }
.bk-zmove.blau .bk-zmove-icon { background: var(--bk-blue-light); color: var(--bk-blue-dark); }
.bk-zmove.gruen .bk-zmove-icon { background: var(--bk-green-bg); color: var(--bk-green-text); }
.bk-zmove.gold .bk-zmove-icon { background: #fdf0c8; color: var(--bk-gold-dark); }
.bk-zmove.zurueck .bk-zmove-icon { background: var(--bk-cream-2); color: var(--bk-muted); }
.bk-zmove-titel { font-size: 14px; font-weight: 700; color: var(--bk-text); overflow-wrap: anywhere; }
.bk-zmove-titel i { font-size: 11px; color: var(--bk-faint); margin: 0 2px; }
.bk-zmove-zeit { flex: none; font-size: 13px; font-weight: 800; color: var(--bk-brown); text-align: right; white-space: nowrap; }
.bk .bk-zmove-zeit .bk-btn2.klein { width: auto; min-height: 34px; padding: 5px 10px; font-size: 13px; }
.bk-zleer { font-size: 14px; font-weight: 600; color: var(--bk-muted); }

/* Truppen je Dorf */
.bk-card.bk-ztruppen { padding: 0; overflow: hidden; }
.bk-ztruppen-scroll { overflow-x: auto; }
.bk-ztruppen table { border-collapse: collapse; width: 100%; font-size: 14px; }
.bk-ztruppen th, .bk-ztruppen td { padding: 8px 10px; text-align: right; white-space: nowrap; border-top: 2px solid var(--bk-border-soft); }
.bk-ztruppen thead th { border-top: 0; font-size: 12px; font-weight: 800; color: var(--bk-muted); background: var(--bk-cream-2); }
.bk-ztruppen th:first-child { text-align: left; position: sticky; left: 0; background: #fff; z-index: 1; }
.bk-ztruppen thead th:first-child { background: var(--bk-cream-2); }
.bk-ztruppen tbody th { font-weight: 700; }
.bk-ztruppen td { font-weight: 700; color: var(--bk-brown); }
.bk-ztruppen td.null { color: var(--bk-faint); font-weight: 600; }
.bk-ztruppen tr.summe th, .bk-ztruppen tr.summe td { background: var(--bk-cream-3); font-weight: 800; }

@media (min-width: 600px) {
	.bk-zkacheln { grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); }
	.bk-zkachel.breit { grid-column: auto; }
	.bk-zdorf-res { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.bk-zdorf-info { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.bk-zbewegungen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bk-zmove-block.breit { grid-column: 1 / -1; }
}
@media (max-width: 479px) {
	.bk-umschalter { width: 100%; }
	.bk-umschalter > * { flex: 1; justify-content: center; padding: 7px 8px; }
	.bk-zkopf-rechts { width: 100%; }
	.bk-zkopf-rechts .bk-umschalter { width: auto; flex: 1; min-width: 0; }
	.bk-zmenue:not(.allein) .bk-zmenue-text, .bk-zmenue:not(.allein) .bk-zmenue-pfeil { display: none; }
	.bk-zkopf-rechts:has(> .bk-zmenue.allein) { justify-content: flex-end; }
	.bk-zmenue > summary { padding: 7px 10px; }
	.bk-zkopf-rechts .bk-umschalter > * { min-width: 0; gap: 0; padding: 7px 6px; }
	.bk-zkopf-rechts .bk-umschalter i { display: none; }
	.bk-zdorf-kopf .bk-dk-icons { flex-direction: row; flex-wrap: wrap; width: 80px; }
}
@media (max-width: 599px) { .bk-zkachel:last-child { grid-column: 1 / -1; } }
.bk-zlager { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12px; font-weight: 800; color: var(--bk-green-text); background: var(--bk-green-bg); border-radius: 999px; padding: 2px 9px; }
.bk-zlager.bald { color: var(--bk-gold-dark); background: #fdf0c8; }
.bk-zlager.voll { color: var(--bk-red); background: #fbe3df; }

/* ===== Premium: Angriffswarnung per WebPush (Geräteverwaltung) ===== */
.bk-card.bk-push { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; margin: 12px 0; scroll-margin-top: 80px; }
.bk-push-kopf { display: flex; gap: 12px; align-items: flex-start; }
.bk-push-icon { width: 44px; height: 44px; flex: none; border-radius: 13px; background: #fdf0c8; color: var(--bk-gold-dark); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.bk-push-liste { display: flex; flex-direction: column; gap: 6px; }
.bk-push-geraet { display: flex; align-items: center; gap: 10px; background: var(--bk-cream-2); border-radius: 12px; padding: 8px 10px; }
.bk-push-geraet.dieses { background: var(--bk-blue-light); }
.bk-push-geraet-icon { width: 32px; height: 32px; flex: none; border-radius: 9px; background: #fff; color: var(--bk-brown-2); display: flex; align-items: center; justify-content: center; }
.bk-push-geraet-name { font-weight: 800; color: var(--bk-brown); font-size: 15px; }
.bk-push-geraet-name .bk-abzeichen { margin-left: 4px; }
.bk .bk-push-geraet button.bk-icon { border: 0; background: none; cursor: pointer; width: 36px; height: 36px; border-radius: 10px; color: var(--bk-red); font-size: 15px; }
.bk .bk-push-geraet button.bk-icon:hover { background: #fbe3df; }
.bk-push-status { font-size: 14px; font-weight: 700; border-radius: 12px; padding: 8px 12px; background: var(--bk-cream-2); color: var(--bk-text); }
.bk-push-status.ok { background: var(--bk-green-bg); color: var(--bk-green-text); }
.bk-push-status.fehler { background: #fbe3df; color: var(--bk-red); }
.bk-push-status.info { background: var(--bk-blue-light); color: var(--bk-blue-dark); }
.bk .bk-push-knoepfe > * { gap: 8px; }
.bk .bk-push-knoepfe button:disabled { opacity: .65; cursor: default; }
.bk-push-hinweis i { margin-right: 4px; }
@media (min-width: 1024px) {
	.bk .bk-push-knoepfe > * { flex: 0 0 auto; width: auto; padding-left: 20px; padding-right: 20px; }
}

/* ===== Premium-Seite (/premium): Unternavigation, Status, Test, Funktionen, Fragen ===== */
.bk-premium { display: flex; flex-direction: column; gap: 14px; }
.bk-premium .bk-desk-h2 { margin: 0; }
.bk .bk-premium-tabs { position: sticky; top: 49px; z-index: 5; background: var(--bk-cream); margin: 0 -16px; padding: 8px 16px 0; }
.bk-premium-abschnitt { scroll-margin-top: 110px; }
.bk-card.bk-premium-abschnitt { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.bk-premium-abschnitt > .bk-h2 { margin: 6px 0 10px; }
.bk-premium-status-kopf { display: flex; gap: 14px; align-items: center; }
.bk-premium-krone { width: 54px; height: 54px; flex: none; border-radius: 16px; background: var(--bk-cream-3); color: var(--bk-faint); display: flex; align-items: center; justify-content: center; font-size: 24px; }
.bk-premium-krone.aktiv { background: #fdf0c8; color: var(--bk-gold-dark); box-shadow: 0 3px 0 var(--bk-gold); }
.bk-premium-krone.gratis { background: var(--bk-green-bg); color: var(--bk-green-text); }
.bk-premium-titel { font-family: var(--bk-display); font-size: 21px; font-weight: 800; color: var(--bk-brown); line-height: 1.2; }
.bk-card.bk-premium-status.aktiv { border-color: var(--bk-gold); background: linear-gradient(180deg, #fffaf0, #fff); }
.bk-card.bk-premium-test { border: 2px dashed var(--bk-green); background: #f7fbf2; }
.bk-premium-laufzeit { height: 10px; }
.bk-premium-laufzeit > div { background: var(--bk-gold); }
.bk .bk-premium .bk-premium-knopf { justify-content: flex-start; margin: 4px 0 0; }
.bk-premium-hinweis { background: #fdf0c8; border-radius: 12px; padding: 10px 12px; font-size: 14px; font-weight: 700; color: var(--bk-brown); }
.bk .bk-premium-hinweis a { color: var(--bk-link); }
/* Die Krone hat denselben goldenen Grund wie der Kasten – darin bräuchte sie sonst weiß, um sich abzuheben */
.bk .bk-premium-hinweis .bk-premium-marke { background: #fff; margin-right: 4px; }
.bk .bk-premium-hinweis a.bk-premium-marke:hover { background: #fffdf5; }
.bk-premium-klein { font-size: 13px; margin: 0; }
/* Premium-Marker an Premium-Funktionen (wie im Handel) */
.bk-premium-marke { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; background: #fdf0c8; color: var(--bk-gold-dark); border-radius: 10px; padding: 3px 9px; font-family: var(--bk-body); font-size: 12px; font-weight: 800; line-height: normal; white-space: nowrap; text-shadow: none; letter-spacing: 0; text-transform: none; }
.bk-premium-marke.nur-krone { padding: 3px 6px; font-size: 11px; }
.bk a.bk-premium-marke { text-decoration: none; color: var(--bk-gold-dark); }
.bk a.bk-premium-marke:hover { background: #fbe4a6; color: var(--bk-gold-dark); }
.bk-handel-kontingent .bk-premium-marke { font-size: 13px; padding: 6px 12px; gap: 6px; }
.bk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bk-premium-auto { display: flex; gap: 12px; align-items: center; margin-top: 14px; padding: 12px; border: 2px solid var(--bk-border); border-radius: 14px; background: #fff; flex-wrap: wrap; }
.bk-premium-auto.an { border-color: var(--bk-green); background: #f3f9ec; }
.bk-premium-auto-icon { flex: none; width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--bk-cream-2); color: var(--bk-brown); font-size: 16px; }
.bk-premium-auto.an .bk-premium-auto-icon { background: var(--bk-green); color: #fff; }
.bk .bk-premium-auto .bk-btn, .bk .bk-premium-auto .bk-btn2 { width: auto; flex: none; }
.bk .bk-premium-klein a { color: var(--bk-link); font-weight: 700; }
.bk-premium-funktionen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.bk-premium-funktion { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 2px solid var(--bk-border); border-radius: 16px; padding: 12px 14px; }
.bk-premium-funktion-icon { width: 40px; height: 40px; flex: none; border-radius: 12px; background: #fdf0c8; color: var(--bk-gold-dark); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.bk-premium-funktion-titel { font-family: var(--bk-display); font-size: 17px; font-weight: 700; color: var(--bk-brown); margin-bottom: 2px; }
.bk .bk-premium-funktion-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 13px; font-weight: 800; color: var(--bk-link); }
.bk-premium-funktion-link i { font-size: 11px; }
.bk-card.bk-premium-gesperrt { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--bk-cream-2); border-style: dashed; }
.bk-premium-gesperrt > i { font-size: 20px; color: var(--bk-faint); margin-top: 3px; }
.bk-premium .bk-card.bk-push { margin: 0; }
.bk-premium .bk-gold-konto { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.bk .bk-premium .bk-gold-konto .bk-btn.klein { width: auto; }
.bk-premium .bk-gold-konto .bk-row-main { flex: 1 1 220px; }
.bk-premium-gulden-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 1 auto; margin-left: auto; }
@media (max-width: 599px) {
	.bk-premium-gulden-knoepfe { flex: 1 1 100%; }
	.bk .bk-premium-gulden-knoepfe > * { flex: 1 1 0; }
}
.bk-card.bk-premium-fragen { padding: 4px 16px; }
.bk-premium-frage { border-top: 2px solid var(--bk-border-soft); }
.bk-premium-frage:first-child { border-top: 0; }
.bk-premium-frage summary { cursor: pointer; list-style: none; padding: 12px 0; font-weight: 800; color: var(--bk-brown); display: flex; justify-content: space-between; gap: 10px; }
.bk-premium-frage summary::-webkit-details-marker { display: none; }
.bk-premium-frage summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 12px; color: var(--bk-faint); transition: transform .2s; }
.bk-premium-frage[open] summary::after { transform: rotate(180deg); }
.bk-premium-frage > div { padding: 0 0 12px; font-size: 14px; line-height: 1.5; }
@media (min-width: 1024px) {
	.bk .bk-premium-tabs { margin: 0; padding: 8px 0 0; top: 79px; }
	.bk-premium-abschnitt { scroll-margin-top: 140px; }
	.bk-premium-funktionen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Dezenter Hinweis auf den einmaligen Premium-Test (Navigation, mobil im Menü): eine schlichte Zeile ohne Rahmen */
.bk .bk-premium-test-nav { display: flex; align-items: center; gap: 7px; margin: 0 2px 10px; padding: 3px 10px; color: var(--bk-side-text); font-size: 12px; font-weight: 700; line-height: 1.3; text-decoration: none; opacity: .75; }
.bk .bk-premium-test-nav:hover { opacity: 1; color: #fff; }
.bk-premium-test-nav > i { flex: none; color: var(--bk-gold); font-size: 11px; }
.bk-premium-test-nav span { min-width: 0; }
.bk .bk-premium-test-nav.drawer { margin: 2px 0 6px; }

/* ===== Handel (/handel): Reiter, Kontingent, Angebot einstellen, Marktplatz ===== */
.bk-handel-seite-wrap { display: flex; flex-direction: column; gap: 12px; }
.bk-handel-seite-wrap .bk-desk-h2 { margin: 0; }
.bk-handel { display: flex; flex-direction: column; gap: 12px; }
.bk-handel-kontingent { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bk-handel-kontingent .bk-chip { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 6px 12px; }
.bk-handel-kontingent .bk-chip.voll { background: #fbe3df; color: var(--bk-red); }
.bk-handel-kontingent .bk-chip.gold { background: #fdf0c8; color: var(--bk-gold-dark); }
.bk .bk-handel-premium { font-size: 13px; font-weight: 800; color: var(--bk-gold-dark); padding: 6px 4px; text-decoration: none; }

.bk-card.bk-handel-form { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 90px; }
.bk-handel-form .bk-card-title i, .bk-handel-block .bk-card-title i { color: var(--bk-muted); margin-right: 4px; }
.bk-handel-feld { display: flex; flex-direction: column; gap: 4px; max-width: 320px; }
.bk-handel-feld > span, .bk-handel-label, .bk-handel-filter label > span { font-size: 12px; font-weight: 800; color: var(--bk-muted); text-transform: uppercase; letter-spacing: .03em; }
.bk .bk-handel select, .bk .bk-handel input[type=number] { min-height: 44px; border: 2px solid var(--bk-border); background-color: #fff; border-radius: 12px; padding: 8px 10px; font-family: var(--bk-body); font-size: 15px; font-weight: 700; color: var(--bk-brown); min-width: 0; }
.bk .bk-handel input[type=number]:focus, .bk .bk-handel select:focus { border-color: var(--bk-blue); outline: none; }
.bk-handel-tausch { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: start; }
.bk-handel-seite { display: flex; flex-direction: column; gap: 4px; background: var(--bk-cream-2); border-radius: 14px; padding: 10px 12px; }
.bk-handel-seite.will { background: var(--bk-blue-light); }
.bk-handel-eingabe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.bk-handel-pfeil { justify-self: center; color: var(--bk-faint); font-size: 16px; transform: rotate(90deg); }
.bk-handel-bestand.fehler, .bk-handel-verhaeltnis.fehler { color: var(--bk-red); }
.bk .bk-handel-knoepfe .bk-btn:disabled { opacity: .6; cursor: default; }

.bk-handel-meins { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.bk-card.bk-handel-block { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.bk-handel-zeile { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 2px solid var(--bk-border-soft); }
.bk-handel-block .bk-card-title + .bk-handel-zeile { border-top: 0; }
.bk .bk-handel-zeile .bk-btn2.klein { width: auto; min-height: 36px; padding: 6px 12px; font-size: 13px; }
.bk-handel-richtung { width: 32px; height: 32px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--bk-cream-3); color: var(--bk-brown-2); }
.bk-handel-richtung.rein { background: var(--bk-green-bg); color: var(--bk-green-text); }
.bk-handel-zeit { flex: none; font-size: 13px; font-weight: 800; color: var(--bk-brown); white-space: nowrap; }
.bk-handel-paar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.bk-handel-paar > i { color: var(--bk-faint); font-size: 13px; }
.bk-handel-ware { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; color: var(--bk-text); white-space: nowrap; }
.bk-handel-ware img { width: 22px; height: 22px; }
.bk-handel-ware b { color: var(--bk-brown); }

.bk-handel-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-handel-filter label { display: flex; flex-direction: column; gap: 3px; flex: 1 1 140px; min-width: 0; }
.bk-handel-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.bk-card.bk-handel-angebot { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.bk-handel-angebot-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.bk .bk-handel-nick { font-family: var(--bk-display); font-size: 17px; font-weight: 700; color: var(--bk-brown); }
.bk .bk-handel-angebot-kopf .bk-card-meta a { color: var(--bk-link); font-weight: 700; }
.bk-handel-paar.gross { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; background: var(--bk-cream-2); border-radius: 12px; padding: 8px 12px; }
.bk-handel-paar.gross .bk-handel-ware { font-size: 16px; white-space: normal; }
.bk-handel-paar.gross .bk-handel-ware img { width: 26px; height: 26px; }
.bk-handel-angebot-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.bk-handel-angebot-fuss .bk-card-meta i { margin-right: 3px; }
.bk .bk-handel-angebot-fuss .bk-btn.klein { width: auto; min-height: 40px; padding: 8px 18px; }
.bk .bk-handel-angebot-fuss .bk-btn.klein:disabled { opacity: .5; cursor: not-allowed; }
.bk-handel-fehlt { font-size: 12px; font-weight: 700; color: var(--bk-red); margin-top: -4px; }

@media (min-width: 700px) {
	.bk-handel-tausch { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
	.bk-handel-pfeil { transform: none; }
	.bk-handel-meins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bk-handel-meins > :only-child { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
	.bk-handel-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bk-handel-filter label { flex: 0 1 200px; }
	.bk .bk-handel-knoepfe .bk-btn { width: auto; padding-left: 26px; padding-right: 26px; }
}
.bk-handel-fehlt.warnung { color: var(--bk-gold-dark); }

/* ===== Berichte: Werkzeugleiste (Filter, Aktionen), Typ-Symbole, Leerzustand ===== */
.bk-card.bk-post-werkzeuge { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; padding: 12px 14px; margin: 0 0 12px; }
.bk-post-filter { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 360px; min-width: 0; margin: 0; }
.bk-post-filter label { display: flex; flex-direction: column; gap: 3px; flex: 1 1 160px; min-width: 0; }
.bk-post-filter label > span { font-size: 12px; font-weight: 800; color: var(--bk-muted); text-transform: uppercase; letter-spacing: .03em; }
.bk-post-aktionen { display: flex; flex-wrap: wrap; gap: 6px; }
.bk .bk-post-aktionen .bk-btn2.klein, .bk .bk-post-unten .bk-btn2.klein { width: auto; min-height: 44px; padding: 8px 14px; font-size: 14px; gap: 6px; text-decoration: none; }
.bk .bk-post-aktionen .bk-btn2.gefahr, .bk .bk-post-unten .bk-btn2.gefahr { color: var(--bk-red); }
.bk .bk-post-aktionen .bk-btn2.gefahr:hover, .bk .bk-post-unten .bk-btn2.gefahr:hover { border-color: var(--bk-red); }
.bk-legacy .bk-post-unten button[type=submit].bk-btn2 { background: #fff !important; color: var(--bk-red) !important; border: 2px solid var(--bk-border) !important; box-shadow: 0 3px 0 var(--bk-border); font-family: var(--bk-display); }
.bk-post-unten { display: flex; justify-content: flex-start; margin: 10px 0 0; }
.bk-bericht-typ { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; margin-right: 8px; vertical-align: -6px; font-size: 11px; background: var(--bk-cream-3); color: var(--bk-brown-2); }
.bk-bericht-typ.rot { background: #fbe3df; color: var(--bk-red); }
.bk-bericht-typ.blau { background: var(--bk-blue-light); color: var(--bk-blue-dark); }
.bk-bericht-typ.gruen { background: var(--bk-green-bg); color: var(--bk-green-text); }
.bk-bericht-typ.gold { background: #fdf0c8; color: var(--bk-gold-dark); }
.bk-bericht-typ.grau { background: var(--bk-cream-2); color: var(--bk-muted); }
.bk-post-leer i { display: block; font-size: 28px; color: var(--bk-faint); margin-bottom: 8px; }
.bk-post-leer b { display: block; font-family: var(--bk-display); font-size: 17px; color: var(--bk-brown); }
.bk-post-leer span { display: block; margin-top: 2px; font-size: 14px; color: var(--bk-muted); }
.bk-post-hinweis { margin: 14px 0 0; font-size: 13px; font-weight: 600; color: var(--bk-muted); }
.bk-post-hinweis i { color: var(--bk-blue); margin-right: 3px; }
.bk .bk-post-hinweis a { color: var(--bk-link); font-weight: 700; }
@media (max-width: 699px) {
	.bk-post-aktionen { width: 100%; }
	.bk .bk-post-aktionen .bk-btn2.klein { flex: 1; justify-content: center; }
}


/* MELDUNGEN (Glocke) --------------------------------------------------------------------- */
/* Eine Zeile je Meldung: Typ-Symbol, Titel mit Unterzeile, Punkt fuer ungelesen. */
.bk-meldungen { padding: 4px 0; }
.bk .bk-meldung { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--bk-border-soft); color: inherit; text-decoration: none; }
.bk .bk-meldung:last-child { border-bottom: 0; }
.bk .bk-meldung:hover { background: var(--bk-cream-2); }
.bk-meldung .bk-bericht-typ { flex: none; margin: 1px 0 0; vertical-align: 0; }
.bk-meldung .bk-row-main { min-width: 0; }
.bk-meldung-titel { display: block; font-weight: 700; font-size: 15px; color: var(--bk-brown); overflow-wrap: anywhere; }
.bk-meldung.neu .bk-meldung-titel { color: var(--bk-blue-dark); }
.bk-meldung .bk-card-meta { display: block; margin-top: 1px; }
.bk-meldung-punkt { flex: none; width: 9px; height: 9px; margin-top: 8px; border-radius: 50%; background: var(--bk-red); }
.bk-meldungen .bk-zleer { display: block; padding: 26px 16px; text-align: center; }
.bk-meldungen .bk-zleer i { display: block; font-size: 28px; color: var(--bk-faint); margin-bottom: 8px; }
.bk-meldungen .bk-zleer b { display: block; font-family: var(--bk-display); font-size: 17px; color: var(--bk-brown); }
.bk-meldungen .bk-zleer span { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; color: var(--bk-muted); }

/* Mein Konto -> Meldungen (user_account_meldungen.php): Übersicht, Meldungen je Typ, Handy */
.bk-meldeseite { display: flex; flex-direction: column; gap: 6px; }
.bk-melde-tabs { margin: 0 0 4px; padding-left: 0; padding-right: 0; }
.bk-melde-abschnitt { scroll-margin-top: 70px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.bk-melde-abschnitt .bk-h2 { margin: 8px 0 0; }
.bk-melde-einleitung { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--bk-text); }
.bk-melde-kacheln { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.bk .bk-card.bk-melde-kachel { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; margin: 0; }
.bk-melde-kachel-icon { flex: none; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 16px; background: var(--bk-blue-light); color: var(--bk-blue-dark); }
.bk-melde-kachel.hinweis .bk-melde-kachel-icon { background: #fdf0c8; color: var(--bk-gold-dark); }
.bk-melde-kachel-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.bk-melde-kachel-titel { font-family: var(--bk-display); font-weight: 800; font-size: 16px; color: var(--bk-brown); }
.bk-melde-kachel-wert { flex: none; font-size: 13px; font-weight: 800; color: var(--bk-blue-dark); white-space: nowrap; }
.bk-melde-kachel.hinweis .bk-melde-kachel-wert { color: var(--bk-gold-dark); }
.bk-info.bk-melde-premium { display: flex; gap: 10px; align-items: flex-start; }
.bk-info.bk-melde-premium i { color: var(--bk-gold-dark); margin-top: 3px; }
@media (min-width: 700px) {
	.bk-melde-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Meldungen je Typ: am Rechner eine Tabelle (Symbol | Titel+Beschreibung | Kanäle), am Handy je Typ eine Karte */
.bk .bk-card.bk-kanaele-karte { padding: 0; margin: 0; overflow: hidden; }
.bk-kanaele { width: 100%; border-collapse: collapse; }
.bk-kanaele th, .bk-kanaele td { padding: 10px 6px; border-bottom: 1px solid var(--bk-border-soft); text-align: center; vertical-align: middle; }
.bk-kanaele thead th { font-size: 12px; font-weight: 700; color: var(--bk-muted); text-transform: uppercase; letter-spacing: .03em; background: var(--bk-cream-2); white-space: nowrap; }
.bk-kanaele th i { display: block; font-size: 14px; margin-bottom: 3px; color: var(--bk-faint); }
.bk-kanaele th.bk-kanal-typ, .bk-kanaele td.bk-kanal-typ { text-align: left; padding-left: 14px; }
.bk-kanaele tbody tr:last-child td { border-bottom: 0; }
.bk-kanal-kopf { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; align-items: start; }
.bk-kanal-kopf .bk-bericht-typ { margin: 0; vertical-align: 0; width: 28px; height: 28px; font-size: 12px; }
.bk-kanal-texte { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bk-kanal-name { font-weight: 800; font-size: 15px; color: var(--bk-brown); line-height: 1.3; }
.bk-kanal-info { font-size: 13px; color: var(--bk-muted); line-height: 1.35; }
.bk-kanal-haken { position: relative; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.bk-kanaele input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--bk-blue); cursor: pointer; }
.bk-kanal-fest { font-size: 13px; color: var(--bk-faint); }
.bk .bk-kanal-krone { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: #fdf0c8; color: var(--bk-gold-dark); font-size: 13px; }
.bk .bk-kanal-krone:hover { background: var(--bk-gold); color: #fff; }
@media (min-width: 700px) { .bk-kanaele th:not(.bk-kanal-typ), .bk-kanaele td:not(.bk-kanal-typ) { width: 58px; } }
.bk-kanal-premium { position: absolute; top: 50%; left: 100%; margin-left: 5px; transform: translateY(-50%); color: var(--bk-gold-dark); font-size: 11px; line-height: 1; }
.bk-kanaele-legende { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 10px 14px; font-size: 12px; font-weight: 700; color: var(--bk-muted); border-top: 1px solid var(--bk-border-soft); }
.bk-kanaele-legende i { color: var(--bk-gold-dark); margin-right: 3px; }
.bk-kanaele-legende span:first-child i { color: var(--bk-faint); }
.bk-kanaele-fuss { padding: 0 14px 14px; }
.bk .bk-kanaele-fuss .bk-btn { width: 100%; }
@media (min-width: 700px) {
	.bk .bk-kanaele-fuss .bk-btn { width: auto; padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 699px) {
	/* Je Typ eine Karte: oben Symbol, Titel und Beschreibung, darunter die Kanäle mit Beschriftung */
	.bk-kanaele thead { display: none; }
	.bk-kanaele, .bk-kanaele tbody, .bk-kanaele tr { display: block; }
	.bk-kanaele tr { padding: 12px 12px 10px; border-bottom: 1px solid var(--bk-border-soft); }
	.bk-kanaele td { border: 0; padding: 0; }
	.bk-kanaele td.bk-kanal-typ { display: block; padding: 0 0 10px; }
	.bk-kanaele td:not(.bk-kanal-typ) { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; width: calc(20% - 4px); vertical-align: top; }
	.bk-kanaele td:not(.bk-kanal-typ)::before { content: attr(data-label); font-size: 11px; font-weight: 700; color: var(--bk-muted); white-space: nowrap; }
	.bk-kanaele td.leer { opacity: .55; }
	.bk-kanal-kopf { grid-template-columns: 30px minmax(0, 1fr); }
}
/* Admin-Übersicht: Kennzahlen */
.bk-kpi-reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 8px 0 14px; }
.bk-kpi { display: flex; flex-direction: column; gap: 2px; }
.bk-kpi-name { font-size: 13px; font-weight: 700; color: var(--bk-muted); }
.bk-kpi-name i { color: var(--bk-brown-2); margin-right: 2px; }
.bk-kpi-wert { font-family: var(--bk-display); font-size: 28px; font-weight: 700; color: var(--bk-brown); line-height: 1.15; font-variant-numeric: tabular-nums; }
.bk-kpi-spalten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.bk-kpi-tabelle { overflow-x: auto; max-width: 100%; }
.bk-legacy table.liste td.rechts, .bk-legacy table.liste th.rechts { text-align: right; font-variant-numeric: tabular-nums; }
.bk-legacy table.liste tr.bk-kpi-leer td { color: var(--bk-faint); }
.bk-kpi-symbol { width: 20px; text-align: center; color: var(--bk-brown-2); }
tr.bk-kpi-leer .bk-kpi-symbol { color: var(--bk-faint); }
@media (min-width: 700px) {
	.bk-kpi-reihe { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
	.bk-kpi-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* FARMÜBERSICHT (Premium, core/game/farmen.inc.php) ---------------------------------------- */
.bk-farm-stand { display: flex; flex-wrap: wrap; gap: 10px; text-align: center; padding: 14px; }
.bk-farm-stand > div { flex: 1; min-width: 90px; }
.bk-farm-stand b { display: block; font-family: var(--bk-display); font-size: 24px; color: var(--bk-brown); line-height: 1.1; }
.bk-farm-stand span { display: block; font-size: 13px; font-weight: 700; color: var(--bk-muted); }
.bk-farm-stand .bk-farm-stand-rs { flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.bk .bk-farm-stand .bk-farm-rs, .bk .bk-farm-stand .bk-farm-leer { display: inline-flex; }
.bk-farm-filter { display: flex; flex-direction: column; gap: 0; }
.bk-farm-filter .bk-chips { margin-top: 0; margin-bottom: 6px; align-items: center; }
.bk .bk-farm-filter a.bk-chip { color: var(--bk-text); text-decoration: none; }
.bk .bk-farm-filter a.bk-chip.aktiv { background: var(--bk-blue); color: #fff; }
.bk-farm-filter-titel { font-size: 12px; font-weight: 800; color: var(--bk-muted); }
.bk-farm-karte { display: flex; flex-direction: column; gap: 10px; }
.bk-farm-karte.verloren { border-color: #efc5bd; }
.bk-farm-kopf { display: flex; gap: 12px; align-items: flex-start; }
.bk-farm-zaehler { flex: none; text-align: right; }
.bk-farm-zaehler b { display: block; font-family: var(--bk-display); font-size: 19px; color: var(--bk-gold-dark); line-height: 1.1; }
.bk-farm-zaehler span { font-size: 11px; font-weight: 700; color: var(--bk-faint); }
.bk-farm-letzter { background: var(--bk-cream-2); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; }
.bk-farm-zeile { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.bk-farm-status { font-size: 12px; font-weight: 800; border-radius: 999px; padding: 3px 10px; background: #fff; }
.bk-farm-status.gewonnen { color: var(--bk-green-text); background: var(--bk-green-bg); }
.bk-farm-status.zurueck, .bk-farm-status.unterwegs { color: var(--bk-blue-dark); background: var(--bk-blue-light); }
.bk-farm-status.verloren { color: var(--bk-red); background: #fbe3df; }
.bk-farm-beute { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-farm-rs { display: inline-flex; align-items: center; gap: 5px; background: #fff; border-radius: 10px; padding: 3px 9px 3px 5px; font-family: var(--bk-display); font-weight: 800; font-size: 15px; color: var(--bk-blue-text); }
.bk-farm-rs img { width: 18px; height: 18px; }
.bk-farm-leer { font-size: 13px; font-weight: 700; color: var(--bk-faint); }
.bk-farm-notiz { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; font-weight: 700; }
.bk-farm-notiz .warn { color: var(--bk-red); }
.bk-farm-notiz .gut { color: var(--bk-green-text); }
.bk-farm-truppen { font-size: 12px; }
.bk-farm-aktion { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.bk-farm-form { margin: 0; }
.bk .bk-farm-aktion .bk-btn.klein { min-height: 44px; padding: 9px 16px; }
.bk-farm-aktion > .bk-card-meta { flex: 1; min-width: 160px; }
.bk-farm-nacht { color: var(--bk-red); }
.bk a.bk-farm-anpassen { font-size: 13px; font-weight: 700; margin-left: auto; }
.bk-farm-frueher summary { cursor: pointer; font-size: 13px; font-weight: 800; color: var(--bk-link); }
.bk-farm-tabelle { overflow-x: auto; margin-top: 8px; }
.bk-farm-tabelle table { width: 100%; }
.bk-farm-klein { font-size: 12px; color: var(--bk-muted); }
.bk-farm-leerkarte { display: flex; gap: 14px; align-items: center; }
.bk-farm-leerkarte > i, .bk .bk-farm-link > i:first-child { font-size: 22px; color: var(--bk-gold-dark); }
.bk .bk-farm-link { text-decoration: none; }
.bk .bk-farm-link .bk-row-title, .bk .bk-farm-link .bk-row-sub { display: block; }
.bk .bk-farm-link > i:last-child { color: var(--bk-faint); }
.bk-farm-ausgeblendet { margin-top: 14px; }
.bk-farm-ausgeblendet summary { cursor: pointer; font-size: 13px; font-weight: 800; color: var(--bk-link); }
@media (max-width: 559px) {
	.bk a.bk-farm-anpassen { margin-left: 0; }
	.bk-farm-tabelle th:nth-child(4), .bk-farm-tabelle td:nth-child(4) { display: none; }
}

/* Startansicht des Dorfs (core/game/dorfstart.inc.php): Stecknadel im Seitenkopf, dezent */
.bk-dorfstart-form { display: inline-flex; flex: none; margin: 0; }
.bk .bk-dorfstart { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; margin: 0; padding: 0; border: 0; border-radius: 11px; background: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .75); font-size: 14px; cursor: pointer; }
.bk .bk-dorfstart:hover { background: rgba(255, 255, 255, .3); color: #fff; }
.bk .bk-dorfstart i { transform: rotate(35deg); }
.bk .bk-dorfstart.aktiv { background: transparent; color: var(--bk-gold); cursor: default; }
.bk .bk-dorfstart.aktiv i { transform: none; }
/* Desktop: klein hinter der Überschrift bzw. in der Namenspille */
.bk .desk .bk-dorfstart, .bk .bk-dorfstart.desk { width: 26px; height: 26px; margin-left: 8px; border-radius: 8px; background: transparent; color: var(--bk-faint); font-size: 13px; vertical-align: middle; }
.bk .desk .bk-dorfstart:hover { background: var(--bk-cream-3); color: var(--bk-brown); }
.bk .bk-dorfstart.desk.aktiv { color: var(--bk-gold); }
.bk-dorfstart-zeile { display: flex; align-items: center; }
.bk-dorf-namepille .bk-dorfstart-form, .bk-dorf-namepille .bk-dorfstart { vertical-align: middle; }

/* NOTIZBLOCK (Premium, core/social/notizen.inc.php) ------------------------------------------ */
.bk-notiz-karte, .bk-notiz-dorf { display: flex; flex-direction: column; gap: 8px; }
.bk-notiz-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.bk-notiz-kopf > i { color: var(--bk-gold-dark); }
.bk-notiz-zeit { margin-left: auto; font-size: 12px; }
.bk a.bk-notiz-alle { margin-left: auto; font-size: 13px; font-weight: 700; }
.bk-notiz-form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.bk .bk-notiz-form textarea { width: 100%; box-sizing: border-box; min-height: 0; resize: vertical; }
.bk-notiz-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.bk-notiz-fuss input[type=submit] { width: auto; margin: 0; }
.bk-notiz-text { white-space: normal; overflow-wrap: anywhere; font-size: 14px; line-height: 1.45; }
details.bk-notiz-karte > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
details.bk-notiz-karte > summary::-webkit-details-marker { display: none; }
details.bk-notiz-karte > summary .bk-notiz-kopf { flex: 1; min-width: 0; }
.bk-notiz-neu { font-size: 13px; font-weight: 800; color: var(--bk-link); }
details.bk-notiz-karte:not([open]) { gap: 0; }
.bk-notiz-dorf { margin-top: 14px; text-align: left; }
.bk-notiz-dorf.leer { background: var(--bk-cream-2); }

/* ===== Kampfsimulator (/kampfsimulator) ===== */
.bk-sim-form { display: flex; flex-direction: column; gap: 12px; }
.bk-sim-karte { display: flex; flex-direction: column; gap: 10px; }
.bk-sim-scroll { overflow-x: auto; max-width: 100%; }
.bk-sim-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.bk-sim-tabelle th, .bk-sim-tabelle td { padding: 6px 8px; border-top: 2px solid var(--bk-border-soft); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bk-sim-tabelle thead th { border-top: 0; font-size: 12px; font-weight: 800; color: var(--bk-muted); text-transform: uppercase; letter-spacing: .03em; }
.bk-sim-tabelle th:first-child { text-align: left; color: var(--bk-brown); font-weight: 700; }
.bk-sim-tabelle tbody th small { display: block; font-size: 11px; font-weight: 600; color: var(--bk-muted); }
.bk-sim-tabelle td.minus { color: var(--bk-red); font-weight: 800; }
.bk-sim-tabelle td.null { color: var(--bk-faint); }
.bk-sim-tabelle tr.summe th, .bk-sim-tabelle tr.summe td { background: var(--bk-cream-3); font-weight: 800; }
.bk .bk-legacy input.bk-sim-zahl, .bk input.bk-sim-zahl { max-width: 130px; min-height: 40px; padding: 6px 10px; text-align: right; -moz-appearance: textfield; }
.bk-sim-eingabe td { width: 38%; }
.bk-sim-laden th, .bk-sim-laden td { vertical-align: top; }
.bk-sim-laden td { white-space: normal; }
.bk .bk-legacy .bk-sim-laden select, .bk .bk-sim-laden select { max-width: 200px; min-height: 36px; padding-top: 4px; padding-bottom: 4px; font-size: 13px; }
.bk .bk-legacy .bk-sim-laden button[type=submit], .bk .bk-sim-laden button[type=submit] { display: inline-flex; min-height: 34px; margin: 6px 0 0; padding: 4px 12px; font-size: 14px; background: #fff !important; color: var(--bk-brown-2) !important; border: 2px solid var(--bk-border) !important; box-shadow: none; }
.bk-sim-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.bk-sim-optional > summary { cursor: pointer; list-style: none; }
.bk-sim-optional > summary::-webkit-details-marker { display: none; }
.bk-sim-optional > summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 12px; margin-left: 8px; color: var(--bk-muted); }
.bk-sim-optional[open] > summary::after { content: "\f077"; }
.bk-sim-optional summary small { font-family: var(--bk-body); font-size: 12px; color: var(--bk-muted); font-weight: 700; margin-left: 6px; }
.bk-sim-icon { width: 18px; height: 18px; vertical-align: -3px; }
.bk-sim-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.bk .bk-sim-knoepfe .bk-btn { width: auto; flex: 1 1 200px; }
.bk .bk-sim-knoepfe .bk-btn2 { flex: 0 1 auto; display: inline-flex; align-items: center; justify-content: center; }

.bk-sim-ergebnis { display: flex; flex-direction: column; gap: 12px; }
.bk-sim-banner { display: flex; align-items: center; gap: 12px; border-radius: 14px; padding: 12px 14px; }
.bk-sim-banner > i { font-size: 26px; flex: none; }
.bk-sim-banner b { display: block; font-family: var(--bk-display); font-size: 20px; line-height: 1.2; }
.bk-sim-banner small { display: block; font-size: 13px; font-weight: 600; margin-top: 2px; }
.sieg .bk-sim-banner { background: var(--bk-green-bg); color: var(--bk-green-text); }
.niederlage .bk-sim-banner { background: #fbe3df; color: var(--bk-red); }
.bk-sim-seiten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.bk-sim-seite-titel { font-family: var(--bk-display); font-size: 17px; font-weight: 700; color: var(--bk-brown); margin-bottom: 4px; }
.bk-sim-bedingungen { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--bk-text); }
.bk-sim-mehr summary { cursor: pointer; font-size: 14px; font-weight: 800; color: var(--bk-link); }
.bk-sim-mehr[open] summary { margin-bottom: 8px; }
.bk-sim-mehr .bk-card-meta { margin-top: 6px; }
.bk-sim-rohstoffe { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-top: 8px; }
.bk-sim-rohstoffe span { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; background: var(--bk-cream-2); border-radius: 12px; padding: 8px 10px; }
.bk-sim-rohstoffe img { width: 26px; height: 26px; grid-row: span 2; }
.bk-sim-rohstoffe b { font-size: 16px; color: var(--bk-brown); }
.bk-sim-rohstoffe small { font-size: 12px; color: var(--bk-muted); font-weight: 700; line-height: 1.2; }
.bk-sim-fuss { border-top: 2px solid var(--bk-border-soft); padding-top: 8px; }
@media (min-width: 700px) {
	.bk-sim-raster { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
@media (min-width: 1400px) {
	.bk-sim-seiten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
	.bk-sim-tabelle th, .bk-sim-tabelle td { padding: 6px 4px; }
	.bk .bk-legacy input.bk-sim-zahl, .bk input.bk-sim-zahl { max-width: 92px; }
	.bk .bk-legacy .bk-sim-laden select, .bk .bk-sim-laden select { max-width: 130px; }
}

/* Knopf im blauen Seitenkopf (z. B. „Alles gelesen“ unter /meldungen): nur so breit wie sein Text */
.bk .bk-pagehead-row .bk-btn2 { width: auto; flex: none; gap: 6px; }
.bk .bk-pagehead-row .bk-btn2.klein { min-height: 0; padding: 7px 12px; font-size: 14px; border-radius: 10px; border-width: 0; }
/* Symbol-Knopf im blauen Kopf: weiß statt braun, sonst auf Blau kaum sichtbar */
.bk .bk-pagehead-row a.bk-icon { flex: none; margin: 0; color: #fff; }
.bk .bk-pagehead-row a.bk-icon:hover { background: rgba(255,255,255,.18); color: #fff; }

/* Navigation der Administration (core/design/navi.inc.php): Handy = Burger-Menü, Rechner = Gruppen zum Aufklappen */
.bk-adminnav { margin: 4px 0 6px; }
.bk-adminnav summary { list-style: none; cursor: pointer; }
.bk-adminnav summary::-webkit-details-marker { display: none; }
/* Dunkelbraun wie die Seitennavigation, damit sie sich von den weißen Inhaltsboxen abhebt */
.bk .bk-adminnav-burger > summary { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--bk-brown); border-radius: 14px; font-family: var(--bk-display); font-weight: 800; font-size: 16px; color: #fff; box-shadow: 0 3px 0 rgba(74, 47, 22, .25); }
.bk-adminnav-burger > summary > i.fa-solid { color: var(--bk-gold); }
.bk-adminnav-burger > summary span { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: var(--bk-gold); font-family: var(--bk-body); font-size: 12px; font-weight: 800; color: var(--bk-brown); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bk-adminnav-burger[open] > summary { border-radius: 14px 14px 0 0; box-shadow: none; }
.bk-adminnav-burger-inhalt { background: #fff; border: 3px solid var(--bk-brown); border-top: 0; border-radius: 0 0 14px 14px; padding: 6px 10px 10px; }
.bk-adminnav-gruppe-liste { display: flex; flex-direction: column; padding: 6px 0; border-bottom: 1px solid var(--bk-border-soft); }
.bk-adminnav-gruppe-liste:last-child { border-bottom: 0; }
.bk-adminnav-gruppe-liste b { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--bk-faint); padding: 4px 6px; }
.bk .bk-adminnav-gruppe-liste a, .bk .bk-adminnav-menue a { display: block; padding: 8px 10px; border-radius: 10px; color: var(--bk-text); font-weight: 700; text-decoration: none; }
.bk .bk-adminnav-gruppe-liste a:hover, .bk .bk-adminnav-menue a:hover { background: var(--bk-cream-2); color: var(--bk-brown); }
.bk .bk-adminnav-gruppe-liste a.aktiv, .bk .bk-adminnav-menue a.aktiv { background: var(--bk-blue-pale); color: var(--bk-blue-dark); }
.bk-adminnav i.fa-solid { width: 16px; text-align: center; }
.bk-adminnav-leiste, .bk-adminnav-seiten { display: none; }
@media (min-width: 1024px) {
	.bk-adminnav-burger { display: none; }
	.bk-adminnav-leiste { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; padding: 6px; background: var(--bk-brown); border-radius: 16px; box-shadow: 0 3px 0 rgba(74, 47, 22, .25); }
	.bk-adminnav-seiten { display: block; margin: 6px 0 2px; }
	.bk-adminnav-gruppe { position: relative; }
	.bk .bk-adminnav-punkt { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 0; border-radius: 11px; background: transparent; font-family: var(--bk-display); font-weight: 700; font-size: 15px; color: var(--bk-side-text); text-decoration: none; white-space: nowrap; }
	.bk .bk-adminnav-punkt > i.fa-solid:first-child { color: var(--bk-gold); }
	.bk .bk-adminnav-punkt:hover, .bk .bk-adminnav-gruppe[open] > .bk-adminnav-punkt { background: rgba(255, 255, 255, .1); color: #fff; }
	.bk .bk-adminnav-punkt.aktiv, .bk .bk-adminnav-gruppe.aktiv > .bk-adminnav-punkt { background: var(--bk-gold); color: var(--bk-brown); }
	.bk .bk-adminnav-punkt.aktiv > i.fa-solid:first-child, .bk .bk-adminnav-gruppe.aktiv > .bk-adminnav-punkt > i.fa-solid:first-child { color: var(--bk-brown); }
	.bk-adminnav-pfeil { font-size: 10px; transition: transform .15s; }
	.bk-adminnav-gruppe[open] .bk-adminnav-pfeil { transform: rotate(180deg); }
	.bk-adminnav-menue { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 210px; padding: 6px; background: #fff; border: 2px solid var(--bk-border); border-radius: 14px; box-shadow: 0 8px 20px rgba(74, 47, 22, .15); }
}
/* Stufe 5: Administration (Zenzi) – Rahmen core/admin/rahmen.inc.php (admin_anfang/admin_ende), admin_*.php ohne .bk-legacy ====== */
/* Reiter der aktuellen Gruppe (navi_reiter() → .subnavi) als Pillen wie .bk-tabs; am Handy steht dort das Menü */
@media (min-width: 768px) {
	.bk .bk-adm .subnavi { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 6px 0; margin: 0; border: 0; background: none; }
}
.bk .bk-adm .subnavi::-webkit-scrollbar { display: none; }
.bk .bk-adm .subnavi a {
	flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; min-height: 38px; box-sizing: border-box; border: 2px solid transparent;
	border-radius: 999px; font-family: var(--bk-display); font-size: 15px; font-weight: 700; line-height: 1.1; color: var(--bk-muted); white-space: nowrap; text-decoration: none;
}
.bk .bk-adm .subnavi a:hover { color: var(--bk-brown); background: var(--bk-cream-2); }
.bk .bk-adm .subnavi a.aktiv { color: var(--bk-brown); background: #fff; border-color: var(--bk-border); box-shadow: 0 2px 0 var(--bk-border); }
/* Hinweise und Knopfreihen */
.bk-adm-info { font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--bk-text); overflow-wrap: anywhere; }
.bk-adm-info b, .bk-adm-info strong { color: var(--bk-brown); }
.bk-adm-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bk .bk-adm .bk-btn.klein, .bk .bk-adm .bk-btn2.klein { display: inline-flex; width: auto; }
.bk .bk-adm > .bk-btn, .bk .bk-adm > .bk-btn2 { align-self: flex-start; }
/* Werbeprämien (Gulden überweisen): Text, Hinweise und Knopf untereinander */
.bk-adm .bk-werben-eintrag { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.bk-adm .bk-werben-eintrag form { margin: 0; }
/* Userverwaltung: Trefferliste – E-Mail darf umbrechen, „Öffnen“ kompakt mit Luft zum Rand */
.bk-adm-treffer td:nth-child(2) { overflow-wrap: anywhere; min-width: 140px; }
.bk-adm-tabelle td.bk-adm-knopfzelle { text-align: right; white-space: nowrap; padding-right: 14px; }
.bk .bk-adm-tabelle td.bk-adm-knopfzelle .bk-btn2.klein { min-height: 38px; padding: 7px 12px; font-size: 14px; }
/* Aufklappbare Liste (Partner: geworbene Spieler) */
.bk-adm details.bk-adm-details > summary { cursor: pointer; font-weight: 800; color: var(--bk-brown); padding: 4px 0; }
.bk-adm details.bk-adm-details > .bk-adm-tabelle, .bk-adm details.bk-adm-details > p { margin-top: 8px; }
/* Zugangsdaten: Karten für Google und Testdatenbank (vorher <style> in admin_zugangsdaten.php) */
.bk-gz { margin: 0; scroll-margin-top: 90px; }
.bk .bk-gz .bk-feld input[type=text], .bk .bk-gz .bk-feld input[type=password] { margin-top: 5px; }
.bk .bk-gz input.bk-gz-verdeckt { -webkit-text-security: disc; text-security: disc; }
.bk-gz-status { display: flex; flex-wrap: wrap; gap: 6px; }
.bk .bk-gz-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 10px; background: var(--bk-cream-2); font-size: 13px; font-weight: 800; color: var(--bk-brown); }
.bk-gz-chip.an { background: var(--bk-green-bg, #e8f4dc); color: var(--bk-green-text, #3d7a1c); }
.bk-gz-chip.aus { background: #fbe3df; color: #8e2a1f; }
.bk-gz-kopie { display: flex; gap: 8px; }
.bk .bk-gz-kopie input { flex: 1; min-width: 0; }
.bk .bk-gz .bk-gz-kopie .bk-btn2 { width: auto; flex: none; margin: 5px 0 0; }
.bk-gz-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.bk .bk-gz-knoepfe .bk-btn, .bk .bk-gz-knoepfe .bk-btn2 { flex: 1 1 200px; width: auto; margin: 0; white-space: nowrap; }
/* Datentabellen: weiße Karte, am Handy waagrecht wischbar */
.bk-adm table.bk-adm-tabelle {
	display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: separate; border-spacing: 0; background: #fff;
	border: 2px solid var(--bk-border); border-radius: 18px; margin: 0; scrollbar-width: thin; scrollbar-color: var(--bk-border) transparent;
}
.bk-adm table.bk-adm-tabelle > tbody { display: table; width: auto; min-width: 100%; }
.bk-adm-tabelle th { color: var(--bk-brown); font-family: var(--bk-display); font-size: 16px; font-weight: 700; text-align: left; padding: 10px 14px 6px; white-space: nowrap; background: none; border: 0; }
.bk-adm-tabelle td { padding: 8px 14px; border: 0; border-top: 2px solid var(--bk-border-soft); font-size: 14px; font-weight: 600; color: var(--bk-text); vertical-align: middle; background: none; }
.bk-adm-tabelle tr:first-child > td { border-top: 0; }
.bk-adm-tabelle tr:first-child > * { padding-top: 12px; }
.bk-adm-tabelle tr:last-child > * { padding-bottom: 12px; }
.bk-adm-tabelle td b { color: var(--bk-brown); }
.bk-adm-tabelle tr.bk-adm-aktiv > td { background: var(--bk-blue-pale); }
.bk .bk-adm :is(input[type=text], input[type=number], input[type=email], input[type=password], input[type=date], input[type=datetime-local], input[type=url], input:not([type]), select, textarea) {
	max-width: 100%; box-sizing: border-box; min-height: 42px; border: 2px solid var(--bk-border); background: #fff; border-radius: 12px; padding: 8px 12px;
	font-family: var(--bk-body); font-size: 15px; font-weight: 700; color: var(--bk-brown); outline: none; box-shadow: none;
}
.bk .bk-adm-tabelle :is(input[type=text], input[type=email], input[type=password], input[type=url], input:not([type]), select, textarea) { width: 100%; }
.bk .bk-adm textarea { line-height: 1.45; min-height: 90px; }
.bk .bk-adm :is(input, select, textarea):focus { border-color: var(--bk-blue); }
.bk .bk-adm input[type=checkbox], .bk .bk-adm input[type=radio] { width: 20px; height: 20px; margin: 0; accent-color: var(--bk-green); vertical-align: middle; }
/* Einstellungen: Tabelle der Meldungskanäle (vorher <style> in admin_einstellungen.php), am Handy je Typ eine Karte */
.bk .bk-adm table.bk-kanaele select { min-width: 132px; }
@media (max-width: 700px) {
	.bk .bk-adm table.bk-kanaele, .bk .bk-adm table.bk-kanaele > tbody { display: block; min-width: 0; }
	.bk .bk-adm table.bk-kanaele tr.kopf { display: none; }
	.bk .bk-adm table.bk-kanaele tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 12px 14px; border-top: 2px solid var(--bk-border-soft); }
	.bk .bk-adm table.bk-kanaele tr:nth-child(2) { border-top: 0; }
	.bk .bk-adm table.bk-kanaele td { display: block; padding: 0; border: 0; width: auto; min-width: 0; }
	.bk .bk-adm table.bk-kanaele td:first-child, .bk .bk-adm table.bk-kanaele td[colspan] { grid-column: 1 / -1; font-weight: 800; }
	.bk .bk-adm table.bk-kanaele td[data-kanal]::before { content: attr(data-kanal); display: block; font-size: 12px; font-weight: 800; color: var(--bk-muted); margin-bottom: 3px; }
	.bk .bk-adm table.bk-kanaele select { min-width: 0; width: 100%; }
}
.bk-adm-vorschau { width: 100%; height: 650px; border: 2px solid var(--bk-border); border-radius: 18px; background: #fff; }
/* Ankreuzfeld mit Beschriftung als eine Zeile, Feld darunter; Suchfeld mit Knopf daneben (User, …) */
.bk-adm label.bk-check-zeile { display: flex; align-items: flex-start; gap: 10px; font-weight: 700; color: var(--bk-text); line-height: 1.35; cursor: pointer; overflow-wrap: anywhere; }
.bk-adm label.bk-check-zeile input[type=checkbox] { flex: none; }
.bk-adm .bk-check-feld { margin: 8px 0 0 30px; }
.bk-adm form.bk-feld-knopf { display: flex; gap: 8px; align-items: stretch; max-width: 560px; }
.bk .bk-adm form.bk-feld-knopf input[type=text] { flex: 1; min-width: 0; width: auto; min-height: 48px; }
.bk .bk-adm form.bk-feld-knopf .bk-btn { flex: none; }
/* Kennzahlen (Übersicht, Statistik): Zahlen rechtsbündig, leere Zeilen blass */
.bk-adm-tabelle td.rechts, .bk-adm-tabelle th.rechts { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-adm-tabelle tr.bk-kpi-leer td { color: var(--bk-faint); }
/* Unterüberschrift über einer Tabelle („nach Tag“, „nach Woche“ – Wer bleibt?) */
.bk .bk-adm .bk-adm-unter { margin: 0; font-family: var(--bk-display); font-size: 16px; font-weight: 700; color: var(--bk-brown-2); }
/* Weltziele: Formular mit schmalen Zahlenfeldern und Einheit (vorher <style> in admin_weltziele.php) – am Handy zeilenweise */
.bk-adm table.bk-wz-form .bk-wz-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.bk-adm table.bk-wz-form .bk-wz-an { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.bk-adm table.bk-wz-form .bk-wz-an + .bk-wz-reihe { padding-left: 28px; }
.bk-adm table.bk-wz-form .bk-wz-feld { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 700; }
.bk .bk-adm table.bk-wz-form input.bk-wz-zahl { width: 6.5em; max-width: 6.5em; text-align: right; padding: 8px 10px; }
.bk .bk-adm table.bk-wz-form input.bk-wz-zahl.breit { width: 8.5em; max-width: 8.5em; }
.bk .bk-adm table.bk-wz-form input.bk-wz-kurz { width: 14em; max-width: 100%; }
.bk .bk-adm table.bk-wz-form input.bk-wz-zeit { width: auto; max-width: 100%; }
.bk .bk-adm table.bk-wz-form select.bk-wz-auswahl { width: auto; max-width: 100%; }
.bk-adm table.bk-wz-form .bk-wz-einheit { color: var(--bk-muted); }
.bk-adm table.bk-wz-form .bk-wz-reihe + .bk-card-meta { margin-top: 4px; }
@media (max-width: 1023px) {
	.bk-adm table.bk-wz-form, .bk-adm table.bk-wz-form > tbody { display: block; overflow: visible; }
	.bk-adm table.bk-wz-form tr { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; border-top: 2px solid var(--bk-border-soft); padding: 8px 14px; }
	.bk-adm table.bk-wz-form tr:first-child { border-top: 0; }
	.bk-adm table.bk-wz-form th, .bk-adm table.bk-wz-form td { display: block; border: 0; padding: 2px 0; width: auto; }
	.bk-adm table.bk-wz-form th, .bk-adm table.bk-wz-form td:has(input, select, textarea, .bk-wz-reihe, .bk-wz-an, button) { flex-basis: 100%; }
	.bk-adm table.bk-wz-form td:empty { display: none; }
	.bk-adm table.bk-wz-form td[colspan] { flex-basis: 100%; }
	.bk-adm table.bk-wz-form .bk-wz-reihe { gap: 6px 12px; }
	.bk-adm table.bk-wz-form .bk-wz-an + .bk-wz-reihe { padding-left: 0; }
	.bk-adm table.bk-wz-form .bk-wz-feld { white-space: normal; }
	.bk .bk-adm table.bk-wz-form select.bk-wz-auswahl { min-width: 0; }
	.bk-adm table.bk-wz-form th { white-space: normal; }
}
/* Reiter im Inhalt (bk_reiter(), z. B. Zeitraum der Statistik): der Inhaltsrahmen bringt den Seitenrand schon mit */
.bk .bk-adm .bk-tabs { padding: 6px 0; margin: 0; }
/* Löschknopf in Weiß mit roter Schrift; Protokoll-Ausgaben (Fehlerprotokoll, Cronjobs) */
.bk .bk-adm .bk-btn2.gefahr { color: var(--bk-red); }
.bk .bk-adm .bk-btn2.gefahr:hover { border-color: var(--bk-red); }
.bk-adm pre.bk-adm-log { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 12px; line-height: 1.45; background: #fff; border: 2px solid var(--bk-border); border-radius: 18px; padding: 12px 14px; max-height: 600px; overflow: auto; color: var(--bk-text); }
.bk-adm pre.bk-adm-log b.schwer { color: var(--bk-red); }
/* Zustände in Tabellen (statt <font color>): gut, schlecht, blass */
.bk .bk-adm .bk-adm-gut { color: var(--bk-green-text); }
.bk .bk-adm .bk-adm-schlecht { color: var(--bk-red); }
.bk .bk-adm .bk-adm-blass { color: var(--bk-faint); }
/* Knöpfe untereinander in einer Tabellenzelle (Chat-Meldungen); Meldungen im Inhalt ohne eigenen Seitenrand */
.bk-adm-stapel { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.bk .bk-adm .meldung1, .bk .bk-adm .meldung2 { margin: 0; }
/* Abzeichen: Auswahl von Symbol und Farbe, Liste mit „von Hand“ (vorher <style> in admin_abzeichen.php) */
.bk .bk-abz-wahl { display: flex; flex-wrap: wrap; gap: 4px; }
.bk .bk-abz-wahl label { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.bk .bk-abz-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bk .bk-abz-wahl label > span:not(.bk-abz) { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: var(--bk-brown-2); font-size: 15px; }
.bk .bk-abz-wahl input:checked + span { background: var(--bk-blue-light); color: var(--bk-blue-dark); }
.bk .bk-abz-wahl.farben label > span { box-shadow: none; }
.bk .bk-abz-wahl.farben input:checked + span { outline: 3px solid var(--bk-blue); outline-offset: 1px; }
.bk .bk-abz-wahl em { font-style: normal; font-size: 11px; color: var(--bk-muted); }
.bk .bk-abz-wahl input:focus-visible + span { outline: 2px solid var(--bk-blue); outline-offset: 2px; }
.bk .bk-guts-titel .bk-abz { flex: none; }
.bk .bk-guts-aktionen form { display: inline; margin: 0; }
.bk .bk-abz-leer { display: inline-block; width: 30px; }
.bk .bk-abz-handzeile { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-top: 6px; }
.bk .bk-abz-hand { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; }
.bk .bk-abz-hand form, .bk .bk-abz-handform { display: inline-flex; gap: 6px; margin: 0; }
.bk .bk-adm .bk-abz-handform input[type=text] { width: 150px; max-width: 100%; min-height: 40px; }
/* Die Abzeichen-Liste nutzt die Zeilen der Gutscheine, hat aber nur Name, Bedingung, Zahl, Knöpfe und darunter „von Hand“ */
.bk-abz-liste .bk-guts-wert { white-space: normal; }
@container (min-width: 700px) {
	.bk-abz-liste .bk-guts-zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 120px auto; }
	.bk-abz-liste .bk-abz-handzeile { grid-column: 1 / -1; }
}
/* Formular mit mehreren Abschnitten (Titel, Text, Tabelle) – Abstände wie im Inhaltsrahmen */
.bk-adm-block { display: flex; flex-direction: column; gap: var(--bk-kartenabstand, 12px); margin: 0; }
.bk-adm-block > * { margin-top: 0; margin-bottom: 0; }
/* Begriffe: Eingabefelder mit fester Breite, die Tabelle wischt am Handy seitlich */
.bk .bk-adm table.bk-begriffe input[type=text] { width: 170px; }
.bk .bk-adm table.bk-begriffe select { width: auto; min-width: 100px; }
/* === ENDE Stufe 5: Administration (Zenzi) === */

/* Stufe 5: premium_alles.php (Zenzi) – „+1 %“ am Fest nicht zwischen Zahl und Prozentzeichen umbrechen (Quirin-Befund) */
.bk-sammel-zeile .bk-fest-plus { white-space: nowrap; }

/* Stufe F (Nr 36): Konto-Seiten ohne .bk-legacy (Zenzi) – konto_info() in core/account/konto.inc.php, Pokale, Teilen, Urlaub, Werben */
.bk-konto-info { font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--bk-text); overflow-wrap: anywhere; }
.bk-konto-info b, .bk-konto-info strong { color: var(--bk-brown); }
.bk-konto-info.hell { background: var(--bk-cream-2); border-color: transparent; }
.bk .bk-konto-inhalt > .bk-tabs { padding: 6px 0; margin: 0; }
.bk .bk-konto-inhalt > .bk-btn, .bk .bk-konto-inhalt > .bk-btn2 { align-self: flex-start; }
/* Gulden verdienen (vorher <style> in user_account_werben.php) */
.bk-werben { display: flex; flex-direction: column; gap: 14px; }
.bk .bk-werben-titel { margin: 0 0 6px; font-family: var(--bk-display); font-size: 21px; font-weight: 800; line-height: 1.25; color: var(--bk-brown); }
.bk-werben-schritte { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.bk-werben-schritte li { display: flex; gap: 12px; align-items: flex-start; }
.bk-werben-nr { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--bk-gold); color: var(--bk-brown); font-family: var(--bk-display); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.bk-werben-schritte b { color: var(--bk-brown); }
.bk-werben-praemie { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 6px 12px; border-radius: 999px; background: #fdf0c8; color: var(--bk-gold-dark); font-weight: 800; }
.bk-werben-teilen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bk .bk-werben-teilen a, .bk .bk-werben-teilen button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 12px; border: 2px solid var(--bk-border); background: #fff; color: var(--bk-brown-2); font-family: var(--bk-display); font-weight: 700; font-size: 15px; cursor: pointer; text-decoration: none; }
.bk .bk-werben-teilen a:hover, .bk .bk-werben-teilen button:hover { color: var(--bk-brown); border-color: var(--bk-gold); }
/* „Teilen“ erscheint nur, wo das Gerät teilen kann (das Skript nimmt hidden weg) – .bk-btn/display:inline-flex überschrieb hidden */
.bk .bk-werben-teilen [hidden], .bk .bk-teilen-knoepfe [hidden] { display: none; }
.bk-werben-bild { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.bk-werben-bild img { width: 120px; height: 120px; border-radius: 12px; border: 2px solid var(--bk-border); background: var(--bk-cream-2); flex: none; }
.bk-werben-bild > div { flex: 1; min-width: 200px; }
.bk-werben-wege { margin: 8px 0 0; padding-left: 20px; }
.bk-werben-wege li { margin: 4px 0; }
.bk-werben-zeile { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--bk-border); }
.bk-werben-zeile:first-child { border-top: 0; }
.bk-werben-stand { font-weight: 700; color: var(--bk-muted); }
.bk-werben-stand.fertig { color: var(--bk-green-text); }
.bk-werben-bannerliste { display: flex; flex-direction: column; gap: 18px; margin-top: 12px; }
.bk-werben-banner { border-top: 2px solid var(--bk-border-soft); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.bk-werben-banner-bild { overflow-x: auto; max-width: 100%; }
.bk-werben-banner-bild img { display: block; max-width: 100%; height: auto; }
.bk .bk-werben-banner textarea { width: 100%; box-sizing: border-box; font-family: monospace; font-size: 12px; resize: vertical; border: 2px solid var(--bk-border); border-radius: 12px; padding: 8px 10px; background: #fff; color: var(--bk-text); }
.bk-werben-banner-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.bk .bk-werben-banner-knoepfe .bk-btn, .bk .bk-werben-banner-knoepfe .bk-btn2 { width: auto; }
.bk .bk-werben .bk-teilen-link .bk-btn { width: auto; flex: none; }

/* GEBÄUDE: ZUM NÄCHSTEN DORF (core/game/bk_gebaeude.inc.php, bk_gebaeude_dorfwechsel) ------------ */
.bk-dorfpfeile { display: flex; align-items: center; gap: 10px; padding: 10px 16px 0; }
.bk .bk-dorfpfeil { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: none; border: 0; color: var(--bk-brown); font-size: 17px; text-decoration: none; }
.bk .bk-dorfpfeil:hover { background: var(--bk-cream-3); color: var(--bk-brown); }
.bk .bk-dorfpfeil:active { transform: translateY(1px); }
.bk-dorfpfeile-mitte { flex: 1; min-width: 0; text-align: center; line-height: 1.2; }
.bk-dorfpfeile-mitte b { display: block; font-family: var(--bk-display); font-size: 17px; color: var(--bk-brown); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-dorfpfeile-mitte span { font-size: 12px; font-weight: 700; color: var(--bk-muted); }
.bk-dorfpfeile + .bk-tabs { padding-top: 6px; }

/* Karte (/map): Anfängerschutz als Schild am Pin, Tooltip beim Überfahren (karte.php) */
.bk-pin-schild { margin-right: 5px; font-size: 11px; color: #fff; }
.bk-pin-punkt.geschuetzt { left: -9px; top: -9px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }
.bk-pin-punkt.geschuetzt .bk-pin-schild { margin: 0; font-size: 9px; }
.leaflet-tooltip.bk-karte-tipp { display: flex; flex-direction: column; gap: 1px; padding: 7px 11px; border: 2px solid var(--bk-border); border-radius: 12px; background: #fff; box-shadow: 0 4px 12px rgba(74, 47, 22, .2); font-family: var(--bk-body); font-size: 12px; font-weight: 600; color: var(--bk-muted); white-space: nowrap; }
.leaflet-tooltip.bk-karte-tipp b { font-family: var(--bk-display); font-size: 14px; color: var(--bk-brown); }
.bk-karte-tipp-schutz { margin-top: 3px; padding: 2px 8px; border-radius: 999px; background: var(--bk-blue-pale); color: var(--bk-blue-dark); font-weight: 800; }
.bk-karte-tipp-schutz i { margin-right: 3px; }
/* Laufendes Fest am Pin und im Tooltip (Gaudibursch) */
.bk-pin-fest { position: absolute; top: -9px; right: -9px; width: 18px; height: 18px; border-radius: 999px; border: 2px solid #fff; background: #e0a92b; color: #fff; font-size: 9px; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.bk-karte-tipp-fest { margin-top: 3px; padding: 2px 8px; border-radius: 999px; background: #fff4d6; color: #7a5a12; font-weight: 800; }
.bk-karte-tipp-fest i { margin-right: 3px; }
/* Anfängerschutz/Urlaub als kleine Kennzeichen oben links, wenn der Pin ein Wappen statt eines Punktes zeigt (Karte: ausführliche Filter) */
.bk-pin-kennzeichen { position: absolute; top: -6px; left: -6px; display: flex; gap: 2px; }
.bk-pin-kennzeichen span { width: 16px; height: 16px; border-radius: 999px; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 8px; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.bk-pin-kennzeichen .schutz { background: #1b8dcd; }
.bk-pin-kennzeichen .urlaub { background: #777; }

/* Reiter-Navigation (navi_reiter, z. B. Mein Konto): am Handy aufklappbares Menü statt der langen Leiste */
.bk .bk-reiter-burger { display: none; }
@media (max-width: 767px) {
	.bk .bk-reiter-burger { display: block; }
	.bk .subnavi.bk-reiter-leiste, .bk .bk-legacy .subnavi.bk-reiter-leiste { display: none; }
}

/* KARTE: TRUPPENBEWEGUNGEN (karte.php, karte_bewegungen.php) --------------------------------------- */
button.bk-karte-chip { border: 0; font-family: inherit; cursor: pointer; }
.bk .bk-karte-chip-bewegung i { margin-right: 4px; }
.bk .bk-karte-chip-bewegung.alarm:not(.aktiv) { box-shadow: 0 0 0 2px var(--bk-red), 0 3px 8px rgba(0,0,0,.2); }
.bk-karte-chip-zahl { font-variant-numeric: tabular-nums; }
.bk-bew-zeit { position: absolute; left: 0; top: 0; transform: translate(-50%, 10px); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; background: #fff; border: 2px solid; border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 800; color: var(--bk-brown); box-shadow: 0 2px 5px rgba(0,0,0,.2); line-height: 1.4; }
.bk-bew-zeit.rein { background: #fbe3df; color: var(--bk-red); }
.bk-bew-zeit i { font-size: 10px; }

/* Alles losschicken (Premium, /premium/alles, core/game/sammelstart.inc.php) */
.bk .bk-sammelstart-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 800; color: var(--bk-link); text-decoration: none; }
.bk .bk-sammelstart-link:hover { color: var(--bk-link-hover); }
.bk-sammel-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 12px 0; }
.bk-sammel-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.bk .bk-sammel-kopf a { font-family: var(--bk-display); font-size: 17px; font-weight: 800; color: var(--bk-brown); text-decoration: none; }
.bk-sammel-zeile { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--bk-border-soft); cursor: pointer; }
.bk-sammel-zeile.aus { cursor: default; }
.bk-sammel-zeile input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--bk-green); }
.bk-sammel-leer { flex: none; width: 20px; }
.bk-sammel-symbol { flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--bk-cream-3); color: var(--bk-brown-2); }
.bk-sammel-zeile.aus .bk-sammel-symbol { color: var(--bk-faint); background: var(--bk-cream-2); }
.bk-sammel-zeile .bk-row-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bk-sammel-zeile:has(input:not(:checked)) .bk-row-main { opacity: .5; }
.bk-sammel-fuss { position: sticky; bottom: 10px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; box-shadow: 0 6px 18px rgba(74, 47, 22, .18); }
.bk .bk-sammel-fuss .bk-btn { width: auto; flex: none; }
.bk-zalles { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.bk .bk-zalles .bk-btn2 { width: auto; flex: none; }
@media (min-width: 1024px) {
	.bk-sammel-liste { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
}

/* Hochgeladenes Spieler-/Stammtischbild im blauen Kopf (bk_kopfbild) statt der Raute */
.bk-raute.bk-kopfbild::before { display: none; }
.bk-raute.bk-kopfbild img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Zwei Knöpfe in der letzten Tabellenzeile alter Formulare (z. B. Einladung, Weltstart): nebeneinander, gleich hoch,
   am Handy umbrechend. Die allgemeine Regel für Absende-Knöpfe färbt sonst auch den hellen Zweitknopf grün. */
.bk .bk-legacy td > .bk-btn.klein, .bk .bk-legacy td > .bk-btn2.klein { display: inline-flex; vertical-align: top; width: auto !important; min-height: 48px; margin: 2px 6px 4px 0; padding: 11px 18px; font-size: 16px; }
.bk .bk-legacy button[type=submit].bk-btn2 { background: #fff !important; color: var(--bk-brown-2) !important; border: 2px solid var(--bk-border) !important; box-shadow: none; font-weight: 700; padding-top: 9px; padding-bottom: 9px; }
.bk .bk-legacy button[type=submit].bk-btn2:hover { color: var(--bk-brown) !important; }

/* Gutschein-Link zum Verteilen (admin_gutscheine.php) */
.bk-guts-link { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.bk-guts-link code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--bk-muted); background: var(--bk-cream-2); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.bk .bk-icon-knopf { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--bk-brown-2); font-size: 14px; line-height: 1; cursor: pointer; }
.bk .bk-icon-knopf:hover { background: var(--bk-cream-2); color: var(--bk-blue); }
.bk .bk-icon-knopf.an { color: var(--bk-green); font-size: 18px; }
.bk .bk-icon-knopf .fa-check, .bk .bk-icon-knopf.kopiert .fa-copy { display: none; }
.bk .bk-icon-knopf.kopiert .fa-check { display: inline; color: var(--bk-green); }
.bk .bk-icon-knopf.gefahr { color: var(--bk-red); }
.bk .bk-icon-knopf.gefahr:hover { background: #fbe3df; }
/* Sprechblase „Privat schreiben“ neben Spielernamen (chat_privat_knopf) */
.bk .bk-chat-privat { vertical-align: middle; flex: none; text-decoration: none; }
/* Zeile, die als Ganzes zum Profil führt, mit Knöpfen darin (Hitlisten, Stammtisch-Mitglieder): Der Namenslink wird
   über die ganze Zeile gezogen, die Knöpfe liegen darüber – ein Knopf im Link wäre nicht erlaubt */
.bk .bk-zeile-mit-link { position: relative; }
.bk .bk-zeile-mit-link .bk-zeilen-link { color: inherit; text-decoration: none; }
.bk .bk-zeile-mit-link .bk-zeilen-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.bk .bk-zeile-mit-link .bk-icon-knopf { position: relative; z-index: 1; }
/* Liste: am Handy Karten, am Rechner eine Zeile je Code */
.bk-guts-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.bk-guts-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 12px; background: #fff; border: 2px solid var(--bk-border); border-radius: 14px; }
.bk-guts-zeile.aus { opacity: .65; }
.bk-guts-zeile.kopf { display: none; }
.bk-guts-code { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bk-guts-titel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.bk-guts-titel b { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; color: var(--bk-brown); margin-right: 2px; }
.bk-guts-titel .bk-abzeichen { margin: 0; }
.bk-guts-wert { font-size: 13px; color: var(--bk-text); white-space: nowrap; }
.bk-guts-wert::before { content: attr(data-titel) ": "; color: var(--bk-muted); font-weight: 600; }
.bk-guts-status .bk-abzeichen { margin: 0; }
.bk-guts-aktionen { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.bk-guts-aktionen form { display: inline-flex; margin: 0; }
.bk .bk-guts-aktionen a.bk-icon { width: 30px; height: 30px; margin: 0; font-size: 14px; }
/* Raster erst, wenn die Liste selbst breit genug ist (neben der rechten Spalte ist der Inhalt am Rechner oft schmal) */
.bk-guts-liste { container-type: inline-size; }
.bk-guts-raster { display: contents; }
@container (min-width: 700px) {
	.bk-guts-raster { display: flex; flex-direction: column; border: 2px solid var(--bk-border); border-radius: 14px; background: #fff; overflow: hidden; }
	.bk-guts-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 64px 140px 76px 104px 100px; gap: 12px; border: 0; border-top: 1px solid var(--bk-border-soft); border-radius: 0; padding: 8px 12px; }
	.bk-guts-zeile.kopf { display: grid; border-top: 0; background: var(--bk-cream-2); font-size: 12px; font-weight: 800; color: var(--bk-muted); padding: 6px 12px; }
	.bk-guts-wert::before { content: none; }
	.bk-guts-aktionen { justify-content: flex-end; }
}

/* ===== Gast-Startseite: Abschnitte Warum / Schritte / Alt-Spieler (bk-2d) ===== */
.bk h1.bk-hero-badges { margin: 26px 0 0; font-size: inherit; line-height: normal; }
.bk-gast-zahlen { display: flex; flex-wrap: wrap; gap: 10px 4px; }
.bk-gast-zahlen > div { flex: 1 1 40%; }
.bk .bk-features > h2 { width: 100%; }
.bk-gast-abschnitt + .bk-features { padding-top: 6px; }
.bk-gast-warum, .bk-gast-schritte { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.bk .bk-gast-icon i { font-size: 22px; }
.bk-gast-nr { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--bk-green); color: #fff; font-family: var(--bk-display); font-weight: 800; font-size: 21px; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 0 rgba(0,0,0,.15); }
.bk-card.bk-gast-alt { display: flex; gap: 14px; align-items: flex-start; margin-top: 4px; background: #eaf5fc; border-color: #b9dcf0; padding: 16px; }
.bk-gast-alt > i { font-size: 28px; color: #1b8dcd; margin-top: 3px; }
.bk-gast-alt .bk-feature-text { margin: 4px 0 12px; }
.bk .bk-gast-alt .bk-btn2.klein { width: auto; display: inline-flex; }
.bk-gast-cta-knoepfe { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.bk .bk-gast-einloggen { color: #f3e3bd; font-weight: 700; text-align: center; text-decoration: underline; }
@media (min-width: 1024px) {
	.bk h1.bk-hero-badges { margin-top: 0; }
	.bk-gast-zahlen { flex-wrap: nowrap; justify-content: center; gap: 0; padding: 22px 48px; }
	.bk-gast-zahlen > div { flex: 0 1 260px; }
	.bk-gast-zahlen b { font-size: 30px; }
	.bk-gast-zahlen span { font-size: 14px; }
	.bk .bk-features > h2 { max-width: 1184px; margin: 0 auto 6px; font-size: 30px; }
	.bk-gast-warum, .bk-gast-schritte, .bk-card.bk-gast-alt { max-width: 1184px; width: 100%; margin-left: auto; margin-right: auto; }
	.bk-gast-warum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
	.bk-gast-schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
	.bk .bk-gast-warum .bk-feature-icon { display: flex; margin-bottom: 12px; }
	.bk-gast-schritte .bk-feature { display: flex; align-items: flex-start; gap: 14px; }
	.bk-card.bk-gast-alt { margin-top: 12px; padding: 20px 24px; }
	.bk-gast-cta-knoepfe { flex-direction: row; align-items: center; gap: 22px; }
}

/* ===== Einfache Startseite: was in jedem Dorf läuft (bk-2d, Paket G) ===== */
.bk-laeuft { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; min-width: 0; }
.bk-dorfkarte-gross > .bk-laeuft { margin: 0; padding: 0 12px 12px; }
.bk .bk-laeuft-zeile { display: flex; align-items: baseline; gap: 7px; font-size: 13px; line-height: 1.35; color: var(--bk-text); font-weight: 600; text-decoration: none; min-width: 0; }
.bk .bk-laeuft-zeile i { width: 15px; flex: none; text-align: center; color: var(--bk-muted); font-size: 12px; }
.bk .bk-laeuft-zeile span { min-width: 0; overflow-wrap: break-word; }
.bk .bk-laeuft-zeile:hover span { text-decoration: underline; }
.bk .bk-laeuft-zeile.frei, .bk .bk-laeuft-zeile.frei i { color: var(--bk-green); }
.bk .bk-laeuft-zeile.alarm, .bk .bk-laeuft-zeile.alarm i { color: var(--bk-red); }
.bk-dorfkarte-klein { flex-wrap: wrap; }
.bk-dorfkarte-klein > .bk-laeuft { flex-basis: 100%; margin-top: 0; padding-top: 8px; border-top: 1px dashed var(--bk-border); }

/* ===== Karte „An ein eigenes Dorf schicken“ (bk-2d) ===== */
.bk-form.bk-eigene-doerfer { margin: 12px 0; gap: 12px; scroll-margin-top: 90px; }
.bk .bk-eigene-doerfer .bk-form-titel { font-size: 19px; }
.bk .bk-eigene-doerfer .bk-form-titel i { color: var(--bk-blue); margin-right: 4px; font-size: 17px; }
.bk .bk-eigene-doerfer .bk-card-meta { margin-top: 3px; }
.bk .bk-eigene-doerfer .bk-feld label { margin: 0; }
.bk .bk-eigene-doerfer .bk-feld select { display: block; margin-top: 5px; }
.bk-eigene-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.bk .bk-eigene-knoepfe .bk-btn, .bk .bk-eigene-knoepfe .bk-btn2 { flex: 1 1 130px; width: auto; margin: 0; white-space: nowrap; min-height: 48px; }

/* ===== Paket A: Einstieg (core/game/einstieg.inc.php) ===== */
/* Was fehlt für Fest/Expedition – unter den Kosten-Chips */
.bk .bk-fehlt { margin: 6px 0 0; padding-left: 16px; font-size: 12.5px; line-height: 1.4; color: var(--bk-brown); }
.bk .bk-fehlt li { margin: 3px 0; }
.bk .bk-fehlt a { font-weight: 700; }
/* „Was als Nächstes?“ – Startseite, Dorfansicht (mobil oben, am Rechner in der rechten Spalte) */
.bk .bk-naechstes .bk-card-title { font-size: 16px; display: flex; align-items: center; gap: 8px; }
.bk .bk-naechstes .bk-card-title i { color: var(--bk-gold-dark, #b8860b); }
.bk .bk-naechstes-zahl { flex: 1; min-width: 0; text-align: right; font-family: var(--bk-body); font-size: 13px; font-weight: 700; color: var(--bk-muted); white-space: nowrap; }
.bk .bk-naechstes .bk-card-title .bk-klapp-pfeil { color: var(--bk-faint); }
.bk .bk-naechstes ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bk .bk-naechstes li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; color: var(--bk-brown); }
.bk .bk-naechstes li > i { flex: none; width: 20px; text-align: center; margin-top: 3px; color: var(--bk-muted); }
.bk .bk-naechstes li > div { flex: 1; min-width: 0; }
.bk .bk-naechstes li > div > span { display: block; }
.bk .bk-naechstes .bk-btn2.klein { display: inline-flex; width: auto; min-height: 34px; padding: 5px 12px; font-size: 14px; margin-top: 5px; }
.bk .bk-dorf-naechstes { margin: 0 14px 10px; }
/* Rohstoff-Kacheln: Lagergrenze und „bald voll“ (bk_resources) */
.bk .bk-res-max { font-family: var(--bk-body); font-size: 10px; font-weight: 700; color: var(--bk-muted); margin-left: 1px; }
.bk .bk-res-fuell { display: block; height: 3px; margin-top: 3px; border-radius: 2px; background: rgba(26,79,116,.12); overflow: hidden; width: 100%; }
.bk .bk-res-fuell i { display: block; height: 100%; background: var(--bk-green-text); border-radius: 2px; }
.bk .bk-res-item.bald .bk-res-fuell i { background: #d98a1c; }
.bk .bk-res-value.voll ~ .bk-res-fuell i { background: var(--bk-red); }
.bk .bk-res-rate.bald { color: #b86b00; }
.bk .bk-res-item.bald { box-shadow: inset 0 0 0 2px rgba(217,138,28,.55); }
@media (max-width: 400px) { .bk .bk-res-max { display: none; } }
/* Einsteigerpreis der ersten Umtreiba (Kaserne, Dorf-Panel) */
.bk .bk-panel-hinweis.bk-einsteiger { background: #fdf0c8; color: #6b4a0e; margin: 8px 0; }
.bk .bk-panel-hinweis.bk-einsteiger i { color: var(--bk-gold-dark); margin-right: 4px; }
/* Gulden-Kauf: Pflicht-Häkchen „sofortiger Beginn / Widerrufsrecht erlischt“ (apicontent.php act=pay, gold_kaufen.php) */
.bk .bk-gold-zustimmung { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 12px; font-size: 13px; line-height: 1.45; color: var(--bk-brown); cursor: pointer; }
.bk .bk-gold-zustimmung input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--bk-green-dark, #3d7a1f); }

/* ===== Logo (Bild statt Raute + Schriftzug): blau auf hellem Grund, weiß in der blauen Leiste ===== */
.bk .bk-logo { display: block; height: 44px; width: auto; max-width: 100%; }
.bk .bk-brand.mit-logo, .bk .bk-desk-brand.mit-logo { gap: 0; min-width: 0; }
.bk .bk-desk-brand .bk-logo { height: 56px; }
@media (min-width: 1024px) {
	.bk .bk-gastkopf .bk-logo, .bk .bk-hero .bk-logo { height: 58px; }
}
.bk .bk-wartung-kopf .bk-logo { height: 60px; }

/* === REITER ALS PILLEN (bk-c4) ============================================================================
   Alle Unterseiten-Reiter (bk_reiter(), .bk-tabs, .bk-desk-tabs, alte .subnavi): aktiver Punkt als weiße Pille mit
   Rahmen wie die Karten, die anderen ruhig, keine Linie darunter. Am Handy waagrecht wischbar. Überschreibt die
   Unterstrich-Regeln weiter oben. */
.bk .bk-tabs, .bk .bk-desk-tabs, .bk .bk-legacy .subnavi {
	display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; border-bottom: 0; background: none;
	padding: 10px 16px 6px; margin: 0 0 6px; scroll-padding-inline: 16px; -webkit-overflow-scrolling: touch;
}
.bk .bk-legacy .bk-tabs, .bk .bk-legacy .subnavi { padding: 6px 0 6px; margin: 0 0 10px; }
.bk .bk-tabs > a, .bk .bk-desk-tabs > a, .bk .bk-legacy .subnavi a {
	flex: none; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 7px 14px; min-height: 38px; box-sizing: border-box;
	border: 2px solid transparent; border-radius: 999px; background: none; box-shadow: none;
	font-family: var(--bk-display); font-size: 15px; font-weight: 700; line-height: 1.1; color: var(--bk-muted); white-space: nowrap; text-decoration: none;
}
.bk .bk-tabs > a:hover, .bk .bk-desk-tabs > a:hover, .bk .bk-legacy .subnavi a:hover { color: var(--bk-brown); background: var(--bk-cream-2); }
.bk .bk-tabs > a.aktiv, .bk .bk-desk-tabs > a.aktiv, .bk .bk-legacy .subnavi a.aktiv {
	color: var(--bk-brown); background: #fff; border-color: var(--bk-border); box-shadow: 0 2px 0 var(--bk-border);
}
.bk .bk-tabs > a i { margin: 0; font-size: 13px; }
.bk .bk-tabs > a.aktiv i { color: var(--bk-blue); }
.bk-dorfpfeile + .bk-tabs { padding-top: 6px; }
/* Leisten mit vielen Reitern (Meldungen): am Handy ohne Symbole und enger, damit alle ohne Wischen passen */
@media (max-width: 767px) {
	.bk .bk-tabs.bk-reiter-eng { gap: 4px; }
	.bk .bk-tabs.bk-reiter-eng > a { padding-left: 9px; padding-right: 9px; }
	.bk .bk-tabs.bk-reiter-eng > a i { display: none; }
}
/* Sehr schmale Handys (320 px): mit rotem Punkt und zweistelliger Zahl sonst ein Stück zu breit */
@media (max-width: 359px) {
	.bk .bk-tabs.bk-reiter-eng { gap: 2px; }
	.bk .bk-tabs.bk-reiter-eng > a { padding-left: 6px; padding-right: 6px; }
	.bk .bk-tabs.bk-reiter-eng .bk-reiter-punkt { margin-left: 4px; }
	/* „Alles gelesen“ im Kopf der Meldungen nur als Symbol, damit die Überschrift ganz bleibt */
	.bk .bk-lesen-text { display: none; }
	.bk .bk-pagehead-row .bk-btn2.klein:has(> .bk-lesen-text) { background: none; box-shadow: none; padding: 7px 8px; color: #fff; }
}
/* === ENDE REITER ALS PILLEN === */

/* === MENUE-ZAEHLER (bk-c4) ================================================================================
   Zahlen im Seitenmenü (Rechner) und im Burger-Menü (Handy), z. B. ungelesene Nachrichten bei „Post“: rundes rotes
   Abzeichen mit weißer Zahl wie an der Glocke – auf dem dunklen Menü und auf dem hellen aktiven Punkt gleich gut lesbar.
   Die Chat-Zahl am Stammtisch (core/social/chat.inc.php) hat dieselbe Form. */
.bk .bk-drawer-badge:empty { display: none; }
.bk .bk-drawer-badge { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box;
	border-radius: 999px; background: var(--bk-red); color: #fff; font-family: var(--bk-body); font-size: 12px; font-weight: 800; line-height: 1; letter-spacing: 0;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); text-shadow: none; }
.bk .bk-side-item:not(.aktiv) .bk-drawer-badge, .bk .bk-drawer-item:not(.aktiv) .bk-drawer-badge { box-shadow: 0 0 0 2px var(--bk-brown); }
/* === ENDE MENUE-ZAEHLER === */

/* === LISTEN-HOVER (bk-c4) =================================================================================
   Meldungen (/meldungen): Zeilen mit Innenabstand und runden Ecken, damit die Hover-Fläche nicht über die Rundung des
   Kastens ragt; Hover nur mit Maus. Die Tabellen (Berichte, Post) schneiden ihren Inhalt am runden Rand ab. */
.bk .bk-meldungen { padding: 6px; overflow: hidden; }
.bk .bk-meldung { border-radius: 12px; border-bottom: 0; position: relative; }
.bk .bk-meldung + .bk-meldung::before { content: ""; position: absolute; left: 8px; right: 8px; top: 0; border-top: 1px solid var(--bk-border-soft); }
.bk .bk-meldung:hover { background: none; }
.bk .bk-meldung:hover + .bk-meldung::before, .bk .bk-meldung:hover::before { border-color: transparent; }
@media (hover: hover) {
	.bk .bk-meldung:hover { background: var(--bk-cream-2); }
}
/* === ENDE LISTEN-HOVER === */

/* === UEBERSCHRIFTEN (bk-c4) ===============================================================================
   Seitenüberschriften überall gleich groß: am Handy im blauen Seitenkopf 22 px, am Rechner 26 px – egal ob die Seite
   den blauen Kopf (Post, Meldungen, Hitliste, Stammtisch …) oder die Überschrift .bk-desk-h2 (Dorf, Gebäude, Truppen,
   Handel, Mein Konto …) nutzt. Die Dorf-Leiste (city_navi_liste) steht auf der Dorfansicht direkt unter dem Kopf. */
.bk .bk-pagehead .bk-pagehead-title, .bk .bk-dorfkopf .bk-pagehead-title { font-size: 22px; line-height: 1.15; }
/* Dorfansicht: Leiste auf eigenem cremefarbenem Streifen zwischen Kopf und Dorfbild, gleich hoch wie auf den anderen Reiterseiten (6 + 4 = 10 px unten) */
.bk .bk-dorfseite .bk-dorfkopf-unter .bk-tabs { background: var(--bk-cream); margin-bottom: 0; padding-bottom: 10px; position: relative; z-index: 6; }
@media (min-width: 1024px) {
	.bk .bk-desk-h2 { font-size: 26px; line-height: 1.2; }
	.bk .bk-pagehead .bk-pagehead-title { font-size: 26px; }
	.bk .bk-desk-h2 .bk-hilfe-rund { vertical-align: top; margin-top: 4px; }   /* „?“ ändert die Zeilenhöhe nicht */
	.bk .bk-dorf-desk .bk-dorf-reiter { padding: 12px 20px 6px; margin: 0 0 -16px; background: var(--bk-cream); position: relative; z-index: 8; }
	/* Dorfbild mit demselben Abstand zur Leiste wie die Karten der anderen Dorf-Seiten (20 px) */
	.bk .bk-dorf-desk { padding-top: 20px; }
}
/* Handy: blauer Kopf überall gleich aufgebaut und gleich hoch – Rohstoffe (falls da), Titelzeile (mind. 52 px, Titel einzeilig),
   eine Unterzeile (einzeilig, sonst gleich hoher Platzhalter). Die Beschreibung im Stammtisch-Kopf entfällt am Handy. */
@media (max-width: 1023px) {
	.bk .bk-pagehead, .bk .bk-pagehead.gross, .bk .bk-pagehead.frei, .bk .bk-pagehead.bk-hitkopf { padding: 12px 16px; }
	.bk .bk-pagehead .bk-res, .bk .bk-pagehead.gross .bk-res { margin-bottom: 10px; }
	.bk .bk-pagehead-row, .bk .bk-pagehead.gross .bk-pagehead-row { min-height: 52px; gap: 10px; }
	.bk .bk-pagehead .bk-pagehead-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 22px; line-height: 26px; }
	.bk .bk-pagehead .bk-pagehead-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; line-height: 16px; height: 16px; }
	.bk .bk-pagehead .bk-pagehead-text:not(:has(.bk-pagehead-sub))::after { content: ""; display: block; height: 16px; }
	.bk .bk-pagehead .bk-pagehead-text2 { display: none; }
	.bk .bk-pagehead .bk-pagehead-row > .bk-raute { width: 40px; height: 40px; flex: none; }
	/* Köpfe ohne Titelzeilen-Rahmen (z. B. Hitliste): gleiche Höhe wie mit */
	.bk .bk-pagehead:not(:has(.bk-pagehead-row)) .bk-pagehead-title { padding-top: 5px; }
	.bk .bk-pagehead:not(:has(.bk-pagehead-row)) .bk-pagehead-sub { padding-bottom: 5px; height: auto; }
	/* Startseite/Dorfzentrale (Kopf „gross“): Rohstoff-Kacheln wie überall, sonst 6 px höher */
	.bk .bk-pagehead.gross .bk-res-item { padding: 5px 8px; }
	.bk .bk-pagehead.gross .bk-res-value { font-size: 15px; }
	/* „?“ im Titel ändert die Zeilenhöhe nicht */
	.bk .bk-pagehead .bk-pagehead-title .bk-hilfe-rund { vertical-align: top; margin-top: 1px; }
}
/* Automatische Rohstoffleiste (bk_kopf_rohstoffe) nur am Handy – am Rechner stehen die Rohstoffe in der Kopfleiste */
@media (min-width: 1024px) { .bk .bk-res.bk-res-auto { display: none; } }
/* === ENDE UEBERSCHRIFTEN === */

/* „maximal“ neben einem Zahlenfeld (Quirin 25.09.2026): echter Knopf statt href="javascript:setwert(…)". Mit Skript macht
   bk_zahl.js daraus −/+/Max und entfernt ihn; ohne Skript sieht er aus wie der frühere Link und setzt den Wert selbst. */
.bk .bk-max-link { display: inline; width: auto; min-height: 0; margin: 0 0 0 6px; padding: 0; border: 0; background: none; box-shadow: none;
	font: inherit; font-weight: 700; color: var(--bk-link, var(--bk-blue)); text-decoration: underline; cursor: pointer; }


/* Stufe F: hilfe.php ohne .bk-legacy (Quirin) – Rahmen .bk-hilfe; vorher Inline-Stile und ein <style> im Abschnittsfenster */
.bk-hilfe-gastleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 16px; margin: 0 0 12px; background: #fff; border-bottom: 2px solid var(--bk-border); }
.bk-hilfe-zurueck { font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }
.bk-hilfe-gastknoepfe { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.bk .bk-hilfe-gastknoepfe > a { width: auto; }
/* Am Handy beide Knöpfe gleich: je eine volle Zeile, wenn sie nicht nebeneinander passen */
@media (max-width: 480px) {
	.bk-hilfe-gastknoepfe { flex: 1 1 100%; margin-left: 0; }
	.bk .bk-hilfe-gastknoepfe > a { flex: 1 1 auto; justify-content: center; }
}
.bk-hilfe-abschnitt { scroll-margin-top: 90px; }
.bk .bk-hilfe-titel { font-size: 30px; }
.bk .bk-hilfe .bk-hilfe-reiter { padding: 8px 0 0; margin-bottom: 10px; }
.bk .bk-hilfe-ganz { margin: 18px 0 0; }
.bk .bk-hilfe-ganz .bk-btn2 { width: auto; display: inline-flex; }
/* Einheitentabelle: kompakt, am Handy waagrecht wischbar */
.bk-hilfe-tabelle { overflow-x: auto; margin: 0 -6px; }
.bk-hilfe-tabelle table { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.bk-hilfe-tabelle tr:first-child { color: var(--bk-brown); }
.bk-hilfe-tabelle th, .bk-hilfe-tabelle td { padding: 6px 10px; border-bottom: 1px solid var(--bk-border-soft); white-space: nowrap; text-align: left; vertical-align: top; }
.bk-hilfe-tabelle td.gruppe { padding-top: 12px; }

/* Stufe F: sys_plan.php ohne .bk-legacy (Quirin) – Administration → Roadmap im Admin-Rahmen; vorher <style> in der Seite */
.bk .bk-plan { display: flex; flex-direction: column; gap: 18px; }
.bk .bk-plan-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.bk .bk-plan-stand { color: var(--bk-muted); font-size: 14px; }
.bk .bk-plan-sprung { display: flex; flex-wrap: wrap; gap: 8px; }
.bk .bk-plan-sprung a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; text-decoration: none;
	font-weight: 700; font-size: 14px; background: var(--bk-cream-2, #f6efe0); color: var(--bk-brown-2); }
.bk .bk-plan-sprung a b { font-variant-numeric: tabular-nums; }
.bk .bk-plan-sprung a.leer { opacity: .55; }
.bk .bk-plan-abschnitt { scroll-margin-top: 80px; }
.bk .bk-plan-titel { display: flex; align-items: center; gap: 10px; margin: 0 0 2px; font-family: var(--bk-display); font-size: 21px; color: var(--bk-brown); }
.bk .bk-plan-titel > i { color: var(--plan-farbe); }
.bk .bk-plan-titel .zahl { font-family: var(--bk-body); font-size: 13px; font-weight: 800; padding: 2px 9px; border-radius: 999px; }
.bk .bk-plan-satz { margin: 0 0 10px; color: var(--bk-muted); font-size: 14px; }
.bk .bk-plan-liste { display: grid; gap: 10px; }
.bk .bk-plan-punkt { position: relative; padding: 14px 16px 14px 20px; border-radius: 14px; background: #fff; border: 1px solid var(--bk-border-soft, #eadfca); overflow: hidden; }
.bk .bk-plan-punkt::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--plan-farbe); }
.bk .bk-plan-punkt h3 { margin: 0 0 6px; font-size: 16.5px; line-height: 1.3; color: var(--bk-text, #2b2118); }
.bk .bk-plan-nr { display: inline-block; min-width: 26px; margin-right: 8px; padding: 1px 7px; border-radius: 999px; text-align: center;
	font-family: var(--bk-body); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; vertical-align: 1px;
	background: var(--bk-cream-2, #f6efe0); color: var(--bk-brown-2); }
.bk .bk-plan-punkt p { margin: 0 0 6px; line-height: 1.5; color: var(--bk-brown-2); font-size: 15px; }
.bk .bk-plan-punkt p:last-child { margin-bottom: 0; }
.bk .bk-plan-punkt code { font-size: 13px; padding: 1px 5px; border-radius: 5px; background: var(--bk-cream, #fbf6ea); overflow-wrap: anywhere; }
.bk .bk-plan-angaben { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.bk .bk-plan-angaben .bk-abzeichen { margin: 0; }
.bk .bk-plan-leer { padding: 12px 16px; border-radius: 14px; border: 1px dashed var(--bk-border-soft, #eadfca); color: var(--bk-muted); font-size: 14px; }
.bk .bk-plan .blau { --plan-farbe: var(--bk-blue); }
.bk .bk-plan .rot { --plan-farbe: var(--bk-red); }
.bk .bk-plan .gold { --plan-farbe: var(--bk-gold); }
.bk .bk-plan .gruen { --plan-farbe: var(--bk-green); }
.bk .bk-plan .lila { --plan-farbe: #7350a3; }
.bk .bk-plan .grau { --plan-farbe: #9a8f80; }
.bk .bk-plan .zahl.blau, .bk .bk-plan .bk-plan-nr.blau { background: var(--bk-blue-light); color: var(--bk-blue-dark); }
.bk .bk-plan .zahl.rot, .bk .bk-plan .bk-plan-nr.rot { background: #fbe3df; color: var(--bk-red); }
.bk .bk-plan .zahl.gold, .bk .bk-plan .bk-plan-nr.gold { background: #fdf0c8; color: var(--bk-gold-dark); }
.bk .bk-plan .zahl.gruen, .bk .bk-plan .bk-plan-nr.gruen { background: var(--bk-green-bg); color: var(--bk-green-text); }
.bk .bk-plan .zahl.lila, .bk .bk-plan .bk-plan-nr.lila { background: #ece4f6; color: #5b3d86; }
.bk .bk-plan .zahl.grau, .bk .bk-plan .bk-plan-nr.grau { background: #efebe4; color: #6b6154; }
.bk .bk-plan-sprung i { color: var(--plan-farbe); }
@media (max-width: 480px) {
	.bk .bk-plan-punkt { padding: 12px 13px 12px 17px; }
	.bk .bk-plan-titel { font-size: 19px; }
}
/* Stufe 5: city_move.php (Ignaz) – Versandformular move_list() und Kampfvorschau fight_vorschau(), ohne .bk-legacy */
.bk-vs { display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: var(--bk-text); }
.bk .bk-vs-kopf { display: flex; align-items: center; gap: 12px; }
.bk-vs-kopf-icon { width: 46px; height: 46px; flex: none; border-radius: 14px; background: #fbeeda; color: var(--bk-brown); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.bk .bk-vs-titel { margin: 0; font-family: var(--bk-display); font-size: 21px; font-weight: 800; color: var(--bk-brown); line-height: 1.2; }
.bk-vs-von { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; font-size: 14px; }
.bk .bk-vs select, .bk .bk-vs input[type=number] {
	max-width: 100%; border: 2px solid var(--bk-border); background-color: #fff; border-radius: 12px; font-family: var(--bk-body); font-size: 15px;
	font-weight: 700; color: var(--bk-brown); outline: none; box-shadow: none;
}
.bk .bk-vs select:focus, .bk .bk-vs input[type=number]:focus { border-color: var(--bk-blue); }
.bk .bk-vs-von select { width: auto; min-width: 160px; min-height: 38px; padding: 5px 10px; }
.bk .bk-vs input[type=checkbox] { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--bk-green); }
.bk-vs-einheit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 10px 0; border-top: 2px solid var(--bk-border-soft); }
.bk-vs-einheit:first-of-type { border-top: 0; }
.bk-vs-name { font-weight: 800; color: var(--bk-brown); overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.bk-vs-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; }
.bk-vs-chips span { background: var(--bk-cream-2); border-radius: 8px; padding: 2px 8px; font-size: 12px; font-weight: 700; color: var(--bk-muted); }
.bk-vs-eingabe { display: flex; align-items: center; gap: 6px; }
.bk .bk-vs-eingabe input[type=number] { width: 84px; min-height: 40px; text-align: center; padding: 6px; }
.bk .bk-vs-max { min-height: 40px; padding: 6px 10px; border-radius: 10px; border: 2px solid var(--bk-border); background: #fff; font-family: var(--bk-body); font-size: 14px; font-weight: 800; color: var(--bk-brown-2); cursor: pointer; }
.bk-vs-summe { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; font-size: 14px; margin: 8px 0 0; }
.bk-vs-summe dt { font-weight: 700; color: var(--bk-muted); }
.bk-vs-summe dd { margin: 0; font-weight: 800; color: var(--bk-brown); }
.bk-vs-summe .warn { color: var(--bk-red); }
.bk-vs-hinweis { font-size: 13px; font-weight: 700; color: var(--bk-muted); }
.bk-vs details summary { cursor: pointer; font-weight: 800; color: var(--bk-brown); }
.bk-vs-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.bk .bk-vs-knoepfe .bk-btn, .bk .bk-vs-knoepfe .bk-btn2 { width: auto; }
.bk-vs-text { font-weight: 600; line-height: 1.45; }
.bk-vs-text b { color: var(--bk-brown); }
.bk-vs-vorschau { background: var(--bk-cream-2); border-radius: 14px; padding: 11px 13px; font-size: 14px; line-height: 1.45; font-weight: 600; }
.bk-vs-vorschau b { color: var(--bk-brown); }
.bk-vs-vorschau .bk-vs-gut { color: var(--bk-green); }
.bk-vs-vorschau .bk-vs-knapp { color: #b8860b; }
.bk-vs-vorschau .bk-vs-schlecht { color: var(--bk-red); }
.bk-vs-werbung { display: flex; justify-content: center; max-width: 100%; overflow: hidden; }
/* vorher als style="…" im Formular (Prüfrunde Quirin) */
.bk .bk-vs-links { align-self: flex-start; }
.bk-vs-oben6 { margin-top: 6px; }
.bk-vs-oben8 { margin-top: 8px; }
.bk-vs-oben10 { margin-top: 10px; }
.bk .bk-vs-ohnelinie { border: 0; }
.bk-vs-hinweis.bk-vs-fehlt { color: var(--bk-red); }
.bk-vs-extras { display: flex; flex-direction: column; gap: 8px; }
.bk-vs-extra { display: flex; gap: 10px; align-items: center; }

/* Roadmap Nr 30: letzte eigene Spionage im Dorf-Fenster (Ignaz) – core/game/spion_karte.inc.php */
.bk-spk { display: flex; flex-direction: column; gap: 8px; }
.bk-spk-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.bk-spk-kopf > i { color: var(--bk-blue); }
.bk-spk-kopf b { font-family: var(--bk-display); font-size: 16px; color: var(--bk-brown); }
.bk-spk-teil { border-top: 2px solid var(--bk-border-soft); padding-top: 7px; }
.bk-spk-titel { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--bk-faint); margin-bottom: 4px; }
.bk-spk-einheiten { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; font-weight: 600; color: var(--bk-text); }
.bk-spk-einheit { white-space: nowrap; }
.bk-spk-einheit b, .bk-spk-zeile b { color: var(--bk-brown); }
.bk-spk-zeile { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 13px; font-weight: 600; color: var(--bk-text); }
.bk-spk-zeile > span { white-space: nowrap; }
.bk-spk-geb { margin-top: 6px; }
.bk-spk-geb > summary { cursor: pointer; font-size: 13px; font-weight: 800; color: var(--bk-link); }
.bk-spk-geb[open] > summary { margin-bottom: 4px; }
.bk-spk-satz { font-size: 13px; font-weight: 700; color: var(--bk-text); }
.bk-spk-satz.schlecht { color: #8e2a1f; }
.bk .bk-spk-link { align-self: flex-start; font-size: 14px; font-weight: 800; color: var(--bk-link); }

/* Stufe 5: city_truppen.php (Ignaz) – Bewegungskarten aus move.inc.php (Unterwegs, Kommt zu dir, stationierte
   Truppen, Im Dorf), vorher als <style> aus bewegung_css(); auch in Dorfansicht und Gebäuden */
.bk-tb { display: flex; flex-direction: column; gap: 8px; }
.bk .bk-tb-titel { margin: 0; font-family: var(--bk-display); font-size: 18px; font-weight: 800; color: var(--bk-brown); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bk .bk-tb-titel a { font-size: 13px; font-weight: 800; }
.bk-tb-zeile { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; }
.bk-tb-icon { width: 38px; height: 38px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 16px; background: #fbeeda; color: var(--bk-brown); }
.bk-tb-icon.t2 { background: #fbe3df; color: var(--bk-red); }
.bk-tb-icon.t3 { background: var(--bk-blue-light); color: var(--bk-blue-dark); }
.bk-tb-icon.t4 { background: var(--bk-green-bg); color: var(--bk-green-text); }
.bk-tb-icon.t6 { background: #fff4d6; color: #9a6a00; }
.bk-tb-icon.heim { background: var(--bk-cream-2); color: var(--bk-muted); }
.bk-tb-text { flex: 1; min-width: 0; }
/* Lange Wörter („Unterstützung“, „Wirtshausraufer“) mit Silbentrennung statt in die Uhrzeit zu laufen */
.bk-tb-was { font-weight: 800; color: var(--bk-brown); overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.bk-tb-info { font-size: 13px; font-weight: 600; color: var(--bk-muted); margin-top: 2px; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.bk-tb-zeit { flex: none; text-align: right; font-size: 13px; font-weight: 700; color: var(--bk-muted); }
.bk-tb-zeit b { display: block; font-family: var(--bk-display); font-size: 16px; color: var(--bk-brown); }
.bk-tb-alarm { border-color: var(--bk-red) !important; }
.bk-tb-alarm .bk-tb-zeit b { color: var(--bk-red); }
.bk-tb-zurueck { display: inline-block; margin-top: 4px; font-size: 13px; font-weight: 800; }
.bk-tb-wer { font-weight: 600; color: var(--bk-muted); }
.bk .bk-tb-chips { margin-top: 6px; }
.bk-tb-chips .bk-chip { display: inline-flex; align-items: center; }
.bk-tb-dorf { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.bk .bk-tb-dorf .bk-tb-chips { margin-top: 0; }
.bk .bk-tb-knoepfe:empty { display: none; }
.bk .bk-tb-knoepfe .bk-btn, .bk .bk-tb-knoepfe .bk-btn2 { min-height: 44px; padding: 9px 12px; font-size: 14px; }
.bk-tb-seite { display: flex; flex-direction: column; gap: 16px; }
.bk-tb-wechsel { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 13px; font-weight: 700; color: var(--bk-muted); }
.bk-tb-wechsel .bk-chip.aktiv { background: var(--bk-brown); color: #fff; }
/* Am schmalen Handy wandert die Zeit unter den Text, damit beides Platz hat */
@media (max-width: 380px) {
	.bk-tb-zeile { flex-wrap: wrap; }
	.bk-tb-zeile .bk-tb-zeit { flex-basis: 100%; display: flex; align-items: baseline; gap: 8px; text-align: left; padding-left: 50px; }
	.bk-tb-zeile .bk-tb-zeit b { display: inline; }
}

/* Stufe 5: kampfsimulator.php (Ignaz) – Grundform der Felder, die vorher .bk-legacy lieferte
   (die übrigen bk-sim-Regeln stehen weiter oben und gelten mit und ohne alten Rahmen) */
.bk input.bk-sim-zahl, .bk .bk-sim-laden select {
	width: 100%; border: 2px solid var(--bk-border); background-color: #fff; border-radius: 12px; font-family: var(--bk-body);
	font-weight: 700; color: var(--bk-brown); outline: none; box-shadow: none;
}
.bk input.bk-sim-zahl { font-size: 15px; }
.bk input.bk-sim-zahl:focus, .bk .bk-sim-laden select:focus { border-color: var(--bk-blue); }
.bk .bk-sim-laden button[type=submit] { border-radius: 12px; font-family: var(--bk-display); font-weight: 800; cursor: pointer; }
.bk-sim-erklaerung { margin-top: 10px; }
.bk-sim-info { font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--bk-text); }
/* 320-px-Handy: die Spalte „Verteidiger“ lag bisher hinter dem Rand (nur seitlich scrollbar) – Namen dürfen umbrechen, Felder schmaler */
@media (max-width: 400px) {
	.bk-sim-tabelle th:first-child { white-space: normal; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
	.bk .bk-sim-eingabe input.bk-sim-zahl { max-width: 58px; padding: 6px 4px; font-size: 14px; }
	.bk .bk-sim-eingabe .bk-sim-laden select { max-width: 58px; }
	.bk-sim-eingabe td { width: auto; }
	.bk-sim-eingabe tbody th { font-size: 13px; }
	.bk-sim-tabelle .bk-einheit-symbol.klein { display: none; }
	.bk-sim-tabelle { font-size: 13px; }
	.bk-sim-tabelle thead th { font-size: 10px; letter-spacing: 0; }
	.bk-sim-laden td { font-size: 0; }
	.bk .bk-sim-eingabe .bk-sim-laden button[type=submit] { white-space: normal; max-width: 58px; line-height: 1.15; }
	.bk .bk-sim-eingabe .bk-sim-laden button[type=submit] { padding: 4px 6px; font-size: 12px; }
	.bk-sim-tabelle th, .bk-sim-tabelle td { padding: 6px 3px; }
}

/* Stufe 5: aktion.php und aktion_maibaumstehlen.php (Ignaz) – Sonderaktion (aktion_info_html in aktionen.inc.php) */
.bk-akt-text { font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--bk-text); }
.bk-akt-daten { display: flex; flex-direction: column; gap: 10px; }
.bk-akt-zeile { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--bk-text); }
.bk-akt-zeile > i { width: 20px; flex: none; margin-top: 3px; text-align: center; color: var(--bk-gold-dark); }
.bk-akt-zeile b { color: var(--bk-brown); }
.bk-akt-zeile > div > b:first-child { display: block; font-family: var(--bk-display); font-size: 15px; }
.bk-akt-zeile span { display: block; font-weight: 600; }
.bk-akt-karte { display: flex; flex-direction: column; gap: 10px; }
.bk-akt-hinweis { line-height: 1.45; }
/* kein .bk-form: dessen Zahlenfelder sind 100 % breit – bk_zahl.js baut hier −/+/Max an das Feld */
.bk-akt-form { display: flex; flex-direction: column; gap: 10px; }
.bk-akt-anzahl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: var(--bk-muted); }
.bk .bk-akt-anzahl input[type=number] { min-height: 44px; border: 2px solid var(--bk-border); background: #fff; border-radius: 12px; padding: 8px 10px;
	font-family: var(--bk-body); font-size: 16px; font-weight: 700; color: var(--bk-brown); text-align: center; outline: none; }
.bk .bk-akt-anzahl input[type=number]:focus { border-color: var(--bk-blue); }
.bk .bk-akt-knopf { align-self: flex-start; }
.bk-akt-zuege, .bk-akt-rang { list-style: none; margin: 0; padding: 0; }
.bk-akt-zuege li { display: flex; flex-wrap: wrap; gap: 2px 12px; padding: 8px 0; border-top: 2px solid var(--bk-border-soft); font-size: 14px; }
.bk-akt-zuege li:first-child { border-top: 0; padding-top: 0; }
.bk-akt-zuege li a { font-weight: 800; flex: 1 1 100%; }
.bk-akt-zuege li span { font-size: 13px; font-weight: 600; color: var(--bk-muted); }
.bk-akt-kopfzeile, .bk-akt-rang li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.bk-akt-kopfzeile { font-size: 12px; font-weight: 800; color: var(--bk-muted); text-transform: uppercase; letter-spacing: .02em; }
.bk-akt-kopfzeile span:last-child { text-align: right; }
.bk-akt-rang li { padding: 7px 0; border-top: 2px solid var(--bk-border-soft); font-size: 14px; }
.bk-akt-rang li a { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-akt-rang li b { color: var(--bk-brown); text-align: right; }
.bk-akt-rang li.ich { background: var(--bk-cream-2); border-radius: 10px; font-weight: 800; }
.bk-akt-rang li.ich .bk-akt-platz { padding-left: 6px; }
.bk-akt-platz { font-weight: 800; color: var(--bk-muted); }
.bk .bk-akt-bild { display: block; width: 100%; height: auto; border-radius: 18px; }
.bk-akt-dorf { display: flex; flex-direction: column; min-width: 0; }
.bk-akt-dorf > a { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-akt-dorf > span { font-size: 13px; font-weight: 600; color: var(--bk-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-akt-rang li:first-child { border-top: 0; }
/* map_marker() (core/lib/mapping.inc.php): Hinweis ohne gesetzte Position, vorher <font color=red> */
.bk-karte-keinepos { color: var(--bk-red); font-weight: 800; }
/* Roadmap Nr 34: Haberfeldtreiber auf der Karte – dunkler Pin mit rotem Ring und Flamme (karte.php) */
.bk .bk-pin.bk-pin-hf { color: #f3e3c3; box-shadow: 0 0 0 2px #b3261e, 0 2px 6px rgba(0,0,0,.45); }
.bk .bk-pin-punkt.bk-pin-hf { box-shadow: 0 0 0 2px #b3261e, 0 1px 3px rgba(0,0,0,.4); }
.bk-pin-hf-i { margin-right: 5px; color: #e8572f; }
/* Kaserne (bk_kaserne.inc.php): Einheitenbild als Knopf statt javascript:-Link – sieht aus wie vorher, randlos */
.bk button.bk-einheit-info { border: 0; padding: 0; cursor: pointer; font: inherit; }
.bk button.bk-einheit-info:focus-visible { outline: 2px solid var(--bk-blue); outline-offset: 2px; }
/* kampfsimulator.php (Prüfrunde Quirin): „Übernehmen“ über der Tabelle – je Seite Auswahl und Knopf untereinander in
   voller Breite; vorher als Tabellenzeile am Handy 54 px schmale Auswahlen und überlaufender Knopftext */
.bk-sim-uebernehmen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 10px; }
.bk-sim-uebernehmen-titel { grid-column: 1 / -1; font-size: 12px; font-weight: 800; color: var(--bk-muted); text-transform: uppercase; letter-spacing: .03em; }
.bk-sim-uebernehmen-teil { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bk-sim-uebernehmen-teil > span:first-child { font-size: 13px; font-weight: 800; color: var(--bk-brown); }
.bk .bk-sim-uebernehmen select { width: 100%; min-height: 38px; padding: 4px 8px; border: 2px solid var(--bk-border); background-color: #fff; border-radius: 12px;
	font-family: var(--bk-body); font-size: 13px; font-weight: 700; color: var(--bk-brown); outline: none; }
.bk .bk-sim-uebernehmen .bk-sim-laden-knopf { width: 100%; min-height: 36px; padding: 4px 8px; border: 2px solid var(--bk-border); background: #fff;
	border-radius: 12px; font-family: var(--bk-display); font-size: 13px; font-weight: 800; color: var(--bk-brown-2); cursor: pointer; line-height: 1.15; }

/* Truppenvorlagen (Premium, Nr 55 – core/game/truppen_vorlagen.inc.php): Knöpfe im Losschick-Formular, Karte auf der Truppenseite */
.bk .bk-tv-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 10px; }
.bk .bk-tv-titel { font-size: 12px; font-weight: 800; color: var(--bk-faint); margin-right: 2px; }
.bk .bk-tv-knopf { min-height: 34px; max-width: 100%; padding: 4px 12px; border-radius: 999px; border: 2px solid var(--bk-border); background: #fff;
	font-family: var(--bk-display); font-size: 13px; font-weight: 800; color: var(--bk-brown-2); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk .bk-tv-knopf.aktiv { border-color: var(--bk-blue); color: var(--bk-blue); }
.bk .bk-tv-gekuerzt:empty { display: none; }
.bk .bk-tv-speichern { margin-top: 10px; }
.bk .bk-tv-speichern summary, .bk .bk-tv-eintrag summary { cursor: pointer; font-weight: 800; color: var(--bk-brown-2); min-height: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bk .bk-tv-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.bk .bk-tv-zeile input[type="text"] { flex: 1 1 160px; min-width: 0; min-height: 40px; padding: 6px 10px; border: 2px solid var(--bk-border); border-radius: 10px; font-size: 15px; }
.bk .bk-tv-eintrag { border-top: 1px solid var(--bk-border); padding: 8px 0; }
.bk .bk-tv-eintrag summary .bk-card-meta { font-weight: 600; overflow-wrap: anywhere; }
.bk .bk-tv-felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 6px 12px; margin-top: 8px; }
.bk .bk-tv-feld { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; font-size: 13px; font-weight: 700; }
.bk .bk-tv-feld span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk .bk-tv-feld input { width: 84px; flex: none; min-height: 36px; padding: 4px 8px; border: 2px solid var(--bk-border); border-radius: 10px; font-size: 15px; }
.bk .bk-tv-feld.bk-tv-name { margin-top: 8px; }
.bk .bk-tv-feld.bk-tv-name input { flex: 1 1 auto; width: auto; min-width: 0; }
/* Nr 59: Aufenthalt am Ziel in der Liste „Unterwegs“ (Abladen bis … · zurück um …) */
.bk-tb-rast { font-size: 12px; font-weight: 600; color: var(--bk-muted); margin-top: 1px; overflow-wrap: break-word; }
/* Nr 61: Kampfwerte in der Ausbildungskarte der Kaserne (kaserne_werte_html in bk_kaserne.inc.php) */
.bk-kw { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--bk-brown); }
.bk-kw-reihe { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.bk-kw-was { display: inline-flex; align-items: center; gap: 5px; color: var(--bk-muted); }
.bk-kw-wert { display: inline-flex; align-items: center; gap: 4px; }
.bk-kw i { font-size: 11px; color: var(--bk-muted); }
@media (max-width: 400px) {
	.bk-kw-wort { display: none; }
	.bk-kw-reihe { gap: 9px; }
}
/* Nr 64: Laufende Ausbildung in der Kaserne als Zeilen statt Tabelle (truppen_bau in truppen.inc.php) */
.bk .bk-ab { padding: 12px 14px; margin-bottom: 14px; }
.bk-ab-titel { font-family: var(--bk-display); font-size: 18px; font-weight: 800; color: var(--bk-brown); margin-bottom: 4px; }
.bk-ab-zeile { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--bk-border); }
.bk-ab-titel + .bk-ab-zeile { border-top: 0; }
.bk-ab-text { flex: 1; min-width: 0; }
.bk-ab-was { font-weight: 800; color: var(--bk-brown); overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.bk-ab-zeit { font-size: 13px; font-weight: 600; color: var(--bk-muted); }
.bk .bk-ab-sofort { flex: none; width: 40px; height: 40px; font-size: 18px; color: var(--bk-gold-dark); }
.bk-ab-fuss { padding-top: 10px; border-top: 1px solid var(--bk-border); font-size: 13px; font-weight: 600; color: var(--bk-muted); }
.bk-ab-fuss .bk-btn { max-width: 100%; white-space: normal; }
/* Nr 74: Kampfwerte auch im Fenster „Truppen ausbilden“ der Dorfansicht – schmal, deshalb immer ohne die Wörter */
.bk-trupp .bk-kw { margin-top: 0; gap: 2px 12px; font-size: 12px; }
.bk-trupp .bk-kw-wort { display: none; }
.bk-trupp .bk-kw-reihe { gap: 8px; }
/* Roadmap Nr 80: Karte bei Rot-Grün-Schwäche – nicht nur die Farbe unterscheidet (karte.php, formKlasse()).
   Preußen eckig statt rund (kleiner Punkt und großer Pin), Stammtisch mit Leute-Zeichen (fa-user-group) vor dem Namen im großen Pin. */
.bk-pin-punkt.bk-pin-pr { border-radius: 3px; }
.bk-pin.bk-pin-pr { border-radius: 4px; }
.bk-pin-al-i { margin-right: 5px; font-size: 12px; }
/* Roadmap Nr 80: Urlaubs-Koffer im kleinen Punkt (Zoom < 12, karte.php) – vorher ragte er aus dem 14-px-Punkt.
   Wie beim Anfängerschutz (.geschuetzt) etwas größer und zentriert; mit Schild UND Koffer ein kurzes Oval. */
.bk-pin-punkt.urlaub { left: -9px; top: -9px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }
.bk-pin-punkt .bk-pin-urlaub { margin: 0; font-size: 9px; color: #fff; }
.bk-pin-punkt.geschuetzt.urlaub { left: -14px; width: 28px; gap: 2px; border-radius: 9px; }
.bk-pin-punkt.geschuetzt.urlaub .bk-pin-schild, .bk-pin-punkt.geschuetzt.urlaub .bk-pin-urlaub { font-size: 8px; }
/* Roadmap Nr 91: laufender eigener Angriff – Schwert (fa-khanda) im großen Pin wie das Leute-Zeichen (.bk-pin-al-i),
   im kleinen Punkt (Zoom < 12) wie der Urlaubs-Koffer etwas größer und zentriert. Farbe bleibt gold (karte.php, fi). */
.bk-pin-punkt.angriff { left: -9px; top: -9px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }
.bk-pin-punkt .bk-pin-fi-i { margin: 0; font-size: 9px; color: #fff; }
/* Roadmap Nr 94: Verlegen (Typ 7) in der Liste „Unterwegs“ – blaugrün, eigenes Symbol fa-people-arrows */
.bk-tb-icon.t7 { background: #dff1ec; color: #2e7d6b; }
/* „Dauerhaft hierlassen“ (move_station): Knopf sieht aus wie der Link „Zurückholen“ daneben, randlos */
.bk-tb-bleiben { display: inline-block; margin: 0 0 0 14px; }
.bk button.bk-tb-zurueck { border: 0; background: none; padding: 0; color: var(--bk-blue-dark, #13679a); cursor: pointer; font-family: inherit; }
/* Versandformular: „Truppen verlegen“ gesperrt, solange im Zieldorf zu wenig Platz ist (Skript in move_list) */
.bk .bk-vs-knoepfe button:disabled { opacity: .45; cursor: not-allowed; }
/* Karte, Tooltip: Stammtisch des Besitzers, beim eigenen Stammtisch blaugrün wie der Pin (Roadmap Nr 103) */
.bk-karte-tipp-stamm i { margin-right: 3px; }
.bk-karte-tipp-stamm.eigen { margin-top: 3px; padding: 2px 8px; border-radius: 999px; background: #e3f4f1; color: #1f6f64; font-weight: 800; }
/* Dorfzentrale, Truppen je Dorf: Schalter „Da“ / „Insgesamt“ neben der Überschrift (Nr 105) – klein, am Handy nicht
   volle Breite (sonst greift .bk-umschalter { width: 100% } aus seiten.css); passt es nicht daneben, rutscht er darunter */
.bk .bk-ztruppen-kopf { flex-wrap: wrap; gap: 6px 10px; }
.bk .bk-ztruppen-schalter { width: auto; flex: none; padding: 2px; gap: 2px; border-radius: 12px; }
.bk .bk-ztruppen-schalter > * { flex: none; gap: 0; padding: 4px 10px; font-size: 13px; border-radius: 9px; }
.bk .bk-ztruppen-hinweis { margin: -2px 0 8px; }
/* Truppenvorlagen im Losschick-Formular: „+“ neben dem Namen zählt die Vorlage dazu (Nr 106) – randlos, Name und „+“ bleiben beisammen */
.bk .bk-tv-paar { display: inline-flex; align-items: center; gap: 0; max-width: 100%; min-width: 0; }
.bk .bk-tv-paar .bk-tv-knopf { min-width: 0; }
.bk .bk-tv-dazu { flex: none; width: 30px; height: 34px; }
/* Stufe 5: nachrichten.php (Hildegard) – Post ohne alten Rahmen. Formular und Brief (vorher <style> aus
   post_stil(), das Formular nutzt auch das Gästebuch im Spielerprofil) und die Liste Eingang/Gesendet (.bk-nach-liste). */
.bk-post-form { display: flex; flex-direction: column; gap: 12px; padding: 16px; margin: 0 0 14px; }
.bk-post-form .bk-card-title { margin: 0; }
.bk-post-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 800; color: var(--bk-muted); }
.bk .bk-post-form input[type=text], .bk .bk-post-form textarea { width: 100%; box-sizing: border-box; border: 2px solid var(--bk-border); border-radius: 12px; padding: 10px 12px; font-family: var(--bk-body); font-size: 16px; font-weight: 600; color: var(--bk-text); background: #fff; }
.bk .bk-post-form textarea { min-height: 150px; resize: vertical; line-height: 1.4; }
.bk .bk-post-form .bk-btn { align-self: flex-start; width: auto; }
.bk-post-form-knoepfe { display: flex; align-items: center; gap: 10px; }
.bk .bk-post-form-knoepfe .bk-btn { align-self: center; }
.bk .bk-post-emoji { border: 0; background: none; border-radius: 12px; width: 42px; height: 42px; color: var(--bk-brown); font-size: 20px; }   /* Symbole ohne Rahmen */
.bk .bk-post-emoji:hover { background: var(--bk-cream-2); }
.bk-post-brief { padding: 16px; margin: 0 0 14px; }
.bk-post-brief h2 { margin: 0 0 4px; font-family: var(--bk-display); font-size: 21px; font-weight: 800; color: var(--bk-brown); overflow-wrap: anywhere; }
.bk-post-brief-text { margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--bk-border-soft); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.bk-post-brief-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bk .bk-post-brief-knoepfe > a { width: auto; }
.bk-post-zurueck { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; font-weight: 800; font-size: 14px; }
.bk-post-verlauf { padding: 12px 16px; margin: 0 0 14px; }
.bk-post-verlauf a { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--bk-border-soft); font-size: 14px; }
.bk-post-verlauf a:first-of-type { border-top: 0; }
.bk-post-verlauf a span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-post-verlauf a span:last-child { flex: none; color: var(--bk-muted); font-weight: 600; font-size: 12px; }
table.bk-nach-liste { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; background: #fff; border: 2px solid var(--bk-border); border-radius: 18px; overflow: hidden; }
.bk-nach-liste th { color: var(--bk-brown); font-family: var(--bk-display); font-size: 17px; font-weight: 700; text-align: left; padding: 12px 14px 6px; white-space: nowrap; }
.bk-nach-liste td { padding: 8px 14px; border-top: 2px solid var(--bk-border-soft); font-size: 14px; font-weight: 600; color: var(--bk-text); vertical-align: middle; }
.bk-nach-liste .c-wahl { width: 46px; padding-right: 0; }
.bk-nach-liste input[type=checkbox] { width: 20px; height: 20px; margin: 0; accent-color: var(--bk-green); vertical-align: middle; cursor: pointer; }
.bk-nach-liste .c-wer { width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-nach-liste .c-betreff { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-nach-liste .c-datum { width: 140px; white-space: nowrap; text-align: right; color: var(--bk-muted); }
.bk-nach-liste .c-weg { width: 56px; text-align: right; padding-left: 0; }
.bk-nach-liste tr.neu .c-betreff a { color: var(--bk-brown); }
.bk-nach-liste tr.neu .c-wahl { box-shadow: inset 4px 0 0 var(--bk-blue); }
.bk-nach-liste td.bk-post-leer { text-align: center; padding: 26px 16px; white-space: normal; }
.bk-nach-liste td.bk-post-werbung { text-align: center; }
.bk-nach-liste tr.bk-nach-fuss > td { padding: 10px 14px 12px; }
.bk .bk-nach-liste .bk-btn2.klein { width: auto; min-height: 44px; padding: 8px 14px; font-size: 14px; gap: 6px; }
.bk .bk-nach-liste .bk-btn2.gefahr { color: var(--bk-red); }
.bk .bk-nach-liste .bk-btn2.gefahr:hover { border-color: var(--bk-red); }
@media (max-width: 699px) {
	table.bk-nach-liste, .bk-nach-liste > tbody { display: block; }
	.bk-nach-liste tr.kopf { display: flex; align-items: center; padding: 8px 12px 4px; }
	.bk-nach-liste tr.kopf th { padding: 0; }
	.bk-nach-liste tr.kopf th:not(.c-wahl) { display: none; }
	.bk-nach-liste tr:not(.kopf) { display: grid; grid-template-columns: 34px minmax(0, auto) minmax(0, 1fr) 44px; grid-template-areas: "wahl betreff betreff weg" "wahl wer datum weg"; column-gap: 8px; row-gap: 2px; align-items: center; padding: 9px 12px; border-top: 2px solid var(--bk-border-soft); }
	.bk-nach-liste tr:not(.kopf) > td { display: block; width: auto; border: 0; padding: 0; }
	.bk-nach-liste td.c-wahl { grid-area: wahl; }
	.bk-nach-liste td.c-betreff { grid-area: betreff; font-size: 15px; }
	.bk-nach-liste td.c-wer { grid-area: wer; font-size: 12px; }
	.bk-nach-liste td.c-datum { grid-area: datum; font-size: 12px; text-align: left; }
	.bk-nach-liste td.c-datum::before { content: "· "; }
	.bk-nach-liste td.c-weg { grid-area: weg; }
	.bk-nach-liste tr.neu .c-wahl { box-shadow: none; }
	.bk-nach-liste tr.neu { box-shadow: inset 4px 0 0 var(--bk-blue); }
	.bk-nach-liste tr:not(.kopf) > td[colspan] { grid-column: 1 / -1; }
	.bk-nach-liste tr:not(.kopf) > td.bk-post-leer { padding: 18px 4px; }
}

/* Stufe 5: stammtische.php (Hildegard) – Suche ohne Stammtisch, Einladungen, Mitgliederverwaltung (.bk-mv-…),
   Gründen/Einstellungen (.bk-stammtischform), Rundschreiben, Chronik; vorher <style> in stammtische.php/allianz.inc.php */
.bk-stsuche { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.bk-stsuche-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.bk .bk-stsuche-knoepfe > a { flex: 1 1 200px; width: auto; }
.bk .bk-stsuche-titel { margin: 8px 0 0; font-family: var(--bk-display); font-size: 19px; font-weight: 800; color: var(--bk-brown); }
.bk .bk-stsuche-alle { text-align: center; }
.bk .bk-einladung.neu { border-color: var(--bk-gold); box-shadow: 0 3px 0 var(--bk-gold); }
.bk .bk-tab .bk-tab-zahl { display: inline-block; min-width: 18px; margin-left: 4px; padding: 1px 5px; border-radius: 999px; background: var(--bk-red, #c0392b); color: #fff; font-size: 11px; line-height: 16px; text-align: center; }
.bk-st-werbung { display: flex; justify-content: center; max-width: 100%; overflow: hidden; }
.bk-st-gegruendet .bk-card-meta { margin-top: 4px; }
.bk-st-chronik { padding: 4px 14px; }
.bk-st-chronik-zeile { padding: 10px 0; border-top: 2px solid var(--bk-border-soft); }
.bk-st-chronik-zeile:first-child { border-top: 0; }
.bk-st-chronik-text { font-size: 14px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.bk .bk-st-knopf { align-self: flex-start; width: auto; }
.bk-st-rund-text { margin: 0; }
.bk-mv { display: flex; flex-direction: column; gap: 10px; }
.bk .bk-mv-titel { margin: 8px 0 0; font-family: var(--bk-display); font-size: 19px; font-weight: 800; color: var(--bk-brown); display: flex; align-items: center; gap: 8px; }
.bk .bk-mv-zeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bk .bk-mv-bild { flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--bk-cream-2); display: flex; align-items: center; justify-content: center; overflow: hidden; font-family: var(--bk-display); font-weight: 800; font-size: 20px; color: var(--bk-brown-2); }
.bk-mv-bild img { width: 100%; height: 100%; object-fit: cover; }
.bk-mv-text { flex: 1; min-width: 180px; }
.bk-mv-kopf { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bk .bk-mv-name { font-family: var(--bk-display); font-weight: 800; font-size: 17px; color: var(--bk-brown); }
.bk-mv-rolle { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; background: var(--bk-cream-2); color: var(--bk-muted); }
.bk-mv-rolle.gruender { background: var(--bk-gold); color: var(--bk-brown); }
.bk-mv-rolle.leitung { background: var(--bk-blue-light); color: var(--bk-blue-2); }
.bk-mv-rolle.bewerbung { background: var(--bk-green-bg); color: var(--bk-green-text); }
.bk-mv-rolle.urlaub { background: #fbe3df; color: #8e2a1f; }
.bk-mv-online { color: var(--bk-green-text); font-weight: 800; }
.bk-mv-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.bk .bk-mv-knoepfe .bk-btn, .bk .bk-mv-knoepfe .bk-btn2 { width: auto; min-height: 40px; padding: 8px 14px; font-size: 14px; }
.bk .bk-mv-knoepfe .bk-mv-weg { color: var(--bk-red); }
.bk .bk-mv-knoepfe .bk-amt-form select { border: 2px solid var(--bk-border); border-radius: 12px; background-color: #fff; font-family: var(--bk-body); font-weight: 700; color: var(--bk-brown); }
.bk .bk-mv-einladen form.bk-form { flex-direction: row; gap: 8px; margin: 0 0 8px; }
.bk .bk-mv-einladen .bk-btn.klein { width: auto; flex: none; }
@media (max-width: 599px) { .bk-mv-knoepfe { width: 100%; justify-content: flex-start; } }
.bk .bk-stammtischform .bk-st-abschnitt { font-family: var(--bk-display); font-size: 16px; font-weight: 700; color: var(--bk-brown); margin-bottom: 5px; }
.bk .bk-stammtischform .bk-st-karte-text { margin-bottom: 8px; }
.bk .bk-stammtischform textarea.bk-st-beschreibung { min-height: 220px; }
.bk .bk-stammtischform label.bk-sucht { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-family: var(--bk-body); font-size: 15px; font-weight: 600; color: var(--bk-text); cursor: pointer; }
.bk .bk-stammtischform label.bk-sucht input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--bk-green); }
.bk-content.bk-chat-seite .bk-chat { height: calc(100vh - 330px); height: calc(100dvh - 330px); min-height: 300px; }
.bk-content.bk-chat-seite .bk-chat-titel { display: none; }

/* Stufe 5: city.php (Hildegard) – Dorfprofil fremder Dörfer ohne .bk-legacy. Notiz-Formular (notiz_formular(),
   auch auf /premium/notizblock): Textfeld wie .bk-form, Knopf ist jetzt ein echter .bk-btn klein */
.bk .bk-notiz-form textarea {
	border: 2px solid var(--bk-border); background: #fff; border-radius: 12px; padding: 10px 13px; line-height: 1.45;
	font-family: var(--bk-body); font-size: 16px; font-weight: 700; color: var(--bk-brown); outline: none; box-shadow: none; -webkit-appearance: none; appearance: none;
}
.bk .bk-notiz-form textarea:focus { border-color: var(--bk-blue); }

/* Stufe 5: online.php (Hildegard) – Wer ist online, vorher <style> in online.php */
.bk .bk-online-liste { padding: 6px 16px; }
.bk .bk-online-zeile { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.bk .bk-online-zeile + .bk-online-zeile { border-top: 1px dashed var(--bk-border); }
.bk .bk-online-punkt { flex: none; width: 10px; height: 10px; border-radius: 999px; background: #3d9a3f; box-shadow: 0 0 0 3px rgba(61,154,63,.18); }
.bk .bk-online-wer { flex: 1; min-width: 0; }
.bk .bk-online-nick { font-family: var(--bk-display); font-weight: 800; font-size: 16px; overflow-wrap: anywhere; }
.bk .bk-online-info { font-size: 12.5px; color: var(--bk-muted); overflow-wrap: anywhere; }
.bk .bk-online-wann { flex: none; font-size: 12.5px; font-weight: 700; color: var(--bk-muted); white-space: nowrap; }
.bk .bk-online-zeit { margin: 0; }
.bk .bk-online-anzahl { margin: 0 2px; }
.bk .bk-online-blaettern { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0; }

/* Stufe 5: smilies.php (Hildegard) – Emoticons, vorher <style> in smilies.php und design_box3() */
.bk-sm-text { font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--bk-text); }
.bk-sm-text p { margin: 0; }
.bk-sm-text p + p { margin-top: 10px; }
.bk-sm-text b { color: var(--bk-brown); }
.bk-emoticons { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px 10px; }
.bk-emoticons-zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #fff; border: 2px solid var(--bk-border); border-radius: 12px; padding: 6px 10px; }
.bk-emoticons-code { font-family: monospace; font-size: 14px; font-weight: 700; color: var(--bk-muted); }
.bk-emoticons-emoji { font-size: 22px; line-height: 1; }
/* Breite alte Bilder (z. B. :imogdi:, 82 px) machten die Seite am 320-px-Handy 9 px zu breit – dort rutscht das Bild unter den Code */
.bk-emoticons-zeile { min-width: 0; flex-wrap: wrap; }
.bk-emoticons-zeile img { max-width: 100%; height: auto; }
.bk-emoticons-katalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 2px; }
.bk-emoticons-katalog span { font-size: 22px; line-height: 1.3; text-align: center; }

/* Stufe 5: Bauwong (Hildegard) – Einzahlen, Standort und Party ansagen ohne .bk-legacy (Formulare mit .bk-form);
   „maximal“ ist ein Knopf statt javascript:-Link. Übriges Aussehen weiter in bk_bauwong_css(). */
.bk-bw-eingabe { display: flex; align-items: center; gap: 8px; }
.bk .bk-bw-eingabe input[type=text] { flex: 1; min-width: 0; width: auto; }
.bk .bk-bw-max { flex: none; border: 0; background: none; padding: 6px 2px; font-family: var(--bk-body); font-size: 13px; font-weight: 800; color: var(--bk-link); cursor: pointer; }
.bk .bk-bw-max:hover { text-decoration: underline; }
/* Pfeil kommt aus .bk-form select:not([multiple]); schmaler, damit „20:00 Uhr“ auch am 320-px-Handy ganz zu sehen ist */
.bk .bk-bw-planen select:not([multiple]) { padding-left: 10px; padding-right: 26px !important; font-size: 15px; background-position: right 8px center; }

/* Haberfeldtreiber (Hildegard, Roadmap Nr 34) – dunkles Dorfprofil (core/game/haberer_dorfprofil.inc.php) und düsteres
   Wappen (haberer_wappen_html() in wappen.inc.php). Farben wie das Kartensymbol: fast schwarz, roter Ring, Flamme.
   Nur eigene Variablen (--bk-hab-…), nichts Globales. */
.bk-hab-seite, .bk-wappen-haberer, .bk-ov.bk-ov-dunkel, .bk-main-inhalt:has(> .bk-hab-seite), body.bk-overlay-seite:has(.bk-hab-seite) {
	--bk-hab-grund: #1c1816; --bk-hab-grund-tief: #0f0c0b; --bk-hab-karte: #26201d; --bk-hab-rand: #b3261e; --bk-hab-rand-tief: #5e140f;
	--bk-hab-schild: #1a1614; --bk-hab-flamme: #e8572f; --bk-hab-glut: #f6b73c; --bk-hab-text: #efe3cc; --bk-hab-leise: #b9a88c;
}
.bk .bk-content.bk-hab-seite { background: linear-gradient(180deg, var(--bk-hab-grund) 0%, var(--bk-hab-grund-tief) 100%); }
.bk .bk-hab { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 18px; color: var(--bk-hab-text);
	background: radial-gradient(120% 80% at 50% 0%, #3a1512 0%, var(--bk-hab-karte) 55%, var(--bk-hab-grund-tief) 100%);
	border: 2px solid var(--bk-hab-rand); box-shadow: 0 3px 0 var(--bk-hab-rand-tief), 0 10px 30px rgba(0,0,0,.45); }
.bk .bk-hab-kopf { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.bk .bk-hab-wappen { line-height: 0; filter: drop-shadow(0 0 10px rgba(232,87,47,.35)) drop-shadow(0 3px 2px rgba(0,0,0,.6)); }
.bk .bk-hab-titel { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.bk .bk-hab-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--bk-hab-flamme); }
.bk .bk-hab-name { margin: 0; font-family: var(--bk-display); font-size: 26px; font-weight: 800; line-height: 1.15; color: var(--bk-hab-text); overflow-wrap: anywhere; }
.bk .bk-hab-seit { font-size: 14px; font-weight: 700; color: var(--bk-hab-leise); }
.bk .bk-hab-seit i { margin-right: 4px; }
.bk .bk-hab-text { margin: 0; font-size: 15px; line-height: 1.5; font-weight: 600; font-style: italic; color: var(--bk-hab-text); overflow-wrap: anywhere; }
.bk .bk-hab-hinweis { padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 800; line-height: 1.4; color: #ffcf9e;
	background: rgba(0,0,0,.35); border-left: 4px solid var(--bk-hab-rand); }
.bk .bk-hab-hinweis i { color: var(--bk-hab-glut); margin-right: 4px; }
.bk .bk-hab-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.bk .bk-hab-knoepfe > a { flex: 1 1 140px; justify-content: center; }
.bk .bk-hab-knoepfe .bk-btn2.bk-hab-spion { background: #2f2825; color: var(--bk-hab-text); border-color: #5a4a40; box-shadow: 0 3px 0 #0b0908; }
.bk .bk-hab-knoepfe .bk-btn2.bk-hab-spion:hover { border-color: var(--bk-hab-flamme); color: #fff; }
@media (min-width: 700px) {
	.bk .bk-hab-kopf { flex-direction: row; align-items: center; text-align: left; gap: 20px; }
	.bk .bk-hab-titel { align-items: flex-start; }
}
/* Alles drumherum dunkel (Wunsch des Meisters: „den rahmen bitte auch schwarz einfärben“):
   Karte „Auf der Karte“ mit dunklem Pin, als Seite Hintergrund und blauer Kopf, im Fenster Hintergrund, Titelleiste
   und Rahmen. Das Fenster (bk_overlay.js) setzt bk-ov-dunkel, wenn der Inhalt data-bk-rahmen="dunkel" trägt. */
.bk .bk-hab-seite .bk-dorfprofil-karte { background: var(--bk-hab-karte); border-color: #4a3d35; box-shadow: 0 3px 0 #0b0908; }
.bk .bk-hab-seite .bk-dorfprofil-karte .bk-card-title { color: var(--bk-hab-text); }
.bk .bk-hab-seite .bk-kbauwong { background: #2a2320; border-color: var(--bk-hab-rand); color: var(--bk-hab-flamme); }
.bk .bk-main-inhalt:has(> .bk-hab-seite) { background: var(--bk-hab-grund-tief); }
.bk .bk-main-inhalt:has(> .bk-hab-seite) .bk-pagehead { background: var(--bk-hab-grund); border-bottom: 2px solid var(--bk-hab-rand); }
.bk .bk-main:has(.bk-hab-seite) .bk-foot-spiel { background: var(--bk-hab-grund-tief, #0f0c0b); border-top: 1px solid #3a2f29; }
body.bk-overlay-seite:has(.bk-hab-seite) { background: var(--bk-hab-grund-tief); }
.bk-ov.bk-ov-dunkel .bk-ov-fenster, .bk-ov.bk-ov-dunkel .bk-ov-frame { background: var(--bk-hab-grund-tief); }
.bk-ov.bk-ov-dunkel .bk-ov-kopf { background: var(--bk-hab-grund); border-bottom-color: var(--bk-hab-rand); }
.bk-ov.bk-ov-dunkel .bk-ov-titel { color: var(--bk-hab-text); }
.bk .bk-ov.bk-ov-dunkel .bk-ov-zu { color: var(--bk-hab-text); }
.bk .bk-ov.bk-ov-dunkel .bk-ov-zu:hover { background: rgba(179,38,30,.35); color: #fff; }
@media (min-width: 768px) {
	.bk-ov.bk-ov-dunkel .bk-ov-fenster { border-color: var(--bk-hab-rand); box-shadow: 0 18px 50px rgba(0,0,0,.6); }
}

/* Bauwong einzahlen (Hildegard): bk_zahl.js baut aus „maximal“ −/Zahl/+ und Max (gut 180 px breit) – dafür am Handy
   eine Spalte, sonst zwei (vorher bis vier, aber mit dem Ziffernfeld passen am Rechner keine vier nebeneinander) */
.bk .bk-bw-einzahlen .bk-bw-felder { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .bk .bk-bw-einzahlen .bk-bw-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* .bk-form macht Zahlenfelder sonst 100 % breit (!important) – dann stünden −, Zahl und + untereinander */
.bk .bk-bw-einzahlen input.bk-zahl-feld { width: 84px !important; flex: none; }

/* ===== Stufe F: Eine Maß ausgeben (Knopf 🍺, Karte „Spendiert bekommen“, core/game/mass.inc.php) ===== */
.bk-mass { position: relative; display: inline-block; vertical-align: middle; }
.bk .bk-mass > summary { list-style: none; font-size: 17px; }
.bk-mass > summary::-webkit-details-marker { display: none; }
.bk-mass-menue { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; width: max-content; max-width: calc(100vw - 32px); padding: 6px; background: #fff;
	font-family: var(--bk-body); font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: normal; text-transform: none;
	border: 2px solid var(--bk-border); border-radius: 14px; box-shadow: 0 8px 22px rgba(0, 0, 0, .16); }
.bk-mass.rechts .bk-mass-menue { left: auto; right: 0; }
.bk-mass-menue form, .bk-mass-prost-form { margin: 0; }
.bk .bk-mass-menue button { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; padding: 8px 10px; border: 0; border-radius: 10px; white-space: nowrap;
	background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--bk-brown); text-align: left; cursor: pointer; }
.bk .bk-mass-menue button:hover { background: var(--bk-cream-2); }
/* Am Handy unten am Bildschirm wie die Emoji-Tafel – so ragt die Auswahl nirgends über den Rand */
@media (max-width: 560px) {
	.bk-mass-menue, .bk-mass.rechts .bk-mass-menue { position: fixed; top: auto; left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; z-index: 1200; }
}
.bk .bk-mass-menue button.bk-mass-fehlt, .bk .bk-mass-menue button.bk-mass-fehlt:hover { background: none; opacity: .5; cursor: default; }
.bk-mass-grund { max-width: 260px; margin: -2px 0 4px; padding: 0 10px; font-size: 12px; font-weight: 400; color: var(--bk-muted); white-space: normal; }
@media (max-width: 560px) { .bk-mass-grund { max-width: none; } }
.bk-mass-menue small { margin-left: auto; padding-left: 12px; font-size: 13px; font-weight: 400; color: var(--bk-muted); }
.bk-mass-karte-zahlen { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0 8px; font-weight: 700; color: var(--bk-brown); }
.bk-mass-liste { display: flex; flex-direction: column; gap: 4px; }
.bk-mass-zeile { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; }
.bk-mass-zeile .bk-card-meta { margin-left: auto; white-space: nowrap; }
.bk-mass-prost-ok { font-size: 15px; }
/* Schließen: am Handy steht die Auswahl unten fest – der Knopf 🍺 ist nach dem Rollen oft nicht mehr zu sehen */
.bk .bk-mass-menue button.bk-mass-zu { justify-content: center; margin-top: 2px; color: var(--bk-muted); font-weight: 700; }
@media (min-width: 561px) { .bk .bk-mass-menue button.bk-mass-zu { display: none; } }


/* ===== Forum-Suche (core/social/forum_suche.inc.php, Nr 62) ===== */
.bk .bk-forum-suche { display: flex; align-items: center; gap: 4px; margin: 0 0 10px; }
.bk .bk-forum-suche input[type=search] { flex: 1; min-width: 0; width: 100%; box-sizing: border-box; height: 42px; border: 2px solid var(--bk-border); border-radius: 12px; padding: 0 12px; font-family: var(--bk-body); font-size: 16px; font-weight: 600; color: var(--bk-text); background: #fff; }
.bk .bk-forum-suche .bk-icon-knopf { flex: none; width: 42px; height: 42px; font-size: 17px; }
.bk .bk-suche-zahl { font-size: 13px; font-weight: 700; color: var(--bk-muted); margin: 2px 2px 8px; }
.bk .bk-suche-treffer { display: block; margin-bottom: 8px; color: inherit; overflow-wrap: anywhere; }
.bk .bk-suche-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-weight: 800; font-size: 15px; }
.bk .bk-suche-bereich { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--bk-brown-2); }
.bk .bk-suche-auszug { margin: 4px 0 6px; font-size: 14px; line-height: 1.4; color: var(--bk-text); }
.bk .bk-suche-treffer mark { background: rgba(242, 182, 60, .45); color: inherit; border-radius: 3px; padding: 0 1px; }
.bk .bk-suche-seiten { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.bk .bk-suche-seiten .bk-btn2.klein { width: auto; flex: none; }
.bk .bk-suche-seite { font-size: 13px; font-weight: 700; color: var(--bk-muted); text-align: center; }

/* Forenübersicht (Nr 93): lange Bereichsnamen (Verbesserungsvorschläge) brechen um statt unter dem Themen-Chip abgeschnitten zu werden */
.bk .bk-forum-bereich-text .bk-card-title { overflow-wrap: anywhere; }

/* Spielerprofil, Reiter „Forum“ (Nr 108): lange Titel brechen um, der Reiter verbreitert die Seite nicht; fünf Reiter am schmalen Handy */
.bk .bk-pf-forum { display: flex; flex-direction: column; gap: 8px; }
.bk .bk-pf-forum-thema .bk-card-title, .bk .bk-pf-forum-thema .bk-card-meta { overflow-wrap: anywhere; min-width: 0; }
.bk .bk-pf-forum-blaettern { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.bk .bk-pf-forum-blaettern .bk-btn2 { width: auto; }
@container bkpf (max-width: 400px) {
	.bk .bk-pf .bk-pf-register > .bk-tabs.bk-pf-reiter { padding: 0 4px; gap: 2px; }
	.bk .bk-pf .bk-pf-register > .bk-tabs.bk-pf-reiter > a { font-size: 12.5px; padding: 8px 2px; }
}
/* Stufe 5: berichte.php (Ferdl) ===========================================================================
   Berichte ohne .bk-legacy (Rahmen .bk-berichte): Werkzeugleiste, Liste mit Aufklappen (core/lib/bk_berichte.js),
   einzelner Bericht (berichte_view() in core/game/berichte.inc.php). Gleicher Aufbau wie die Post (.bk-nach-liste). */
.bk-berichte { font-size: 14px; color: var(--bk-text); }
.bk .bk-berichte .bk-post-filter select {
	width: 100%; max-width: 100%; min-height: 44px; border: 2px solid var(--bk-border); border-radius: 12px; padding: 9px 36px 9px 12px;
	font-family: var(--bk-body); font-size: 15px; font-weight: 700; color: var(--bk-brown); outline: none; box-shadow: none; cursor: pointer;
	-webkit-appearance: none; appearance: none; background: #fff no-repeat right 12px center / 14px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a5a2b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.bk .bk-berichte .bk-post-filter select:focus { border-color: var(--bk-blue); }
/* Liste: feste Spalten, Datum einzeilig, am Handy zweizeilig */
.bk-bericht-liste { display: block; width: 100%; margin: 0; background: #fff; border: 2px solid var(--bk-border); border-radius: 18px; overflow: hidden; border-collapse: separate; border-spacing: 0; }
.bk-bericht-liste > tbody { display: table; width: 100%; table-layout: fixed; }
.bk-bericht-liste th { padding: 12px 14px 6px; border: 0; background: none; font-family: var(--bk-display); font-size: 17px; font-weight: 700; color: var(--bk-brown); text-align: left; white-space: nowrap; }
.bk-bericht-liste td { padding: 8px 14px; border: 0; border-top: 2px solid var(--bk-border-soft); font-size: 14px; font-weight: 600; color: var(--bk-text); vertical-align: middle; overflow-wrap: break-word; }
.bk-bericht-liste tr:last-child > td { padding-bottom: 12px; }
.bk-bericht-liste .c-wahl { width: 46px; padding-right: 0; }
.bk-bericht-liste .c-wahl input { width: 20px; height: 20px; margin: 0; accent-color: var(--bk-green); vertical-align: middle; }
.bk-bericht-liste .c-wer { width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-bericht-liste .c-betreff { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-bericht-liste .c-datum { width: 140px; white-space: nowrap; text-align: right; color: var(--bk-muted); }
.bk-bericht-liste .c-weg { width: 56px; text-align: right; padding-left: 0; white-space: nowrap; }
.bk-bericht-liste tr.neu .c-betreff a { color: var(--bk-brown); }
.bk-bericht-liste tr.neu .c-wahl { box-shadow: inset 4px 0 0 var(--bk-blue); }
.bk-bericht-liste td.bk-post-leer { text-align: center; padding: 26px 16px; white-space: normal; }
.bk-bericht-liste td.bk-post-werbung { text-align: center; }
.bk-bericht-liste tr.bk-bericht-fuss > td { padding-top: 10px; }
.bk-bericht-liste tr.bk-bericht-fuss .bk-post-unten { margin: 0; }
.bk-bericht-liste tr.bk-bericht-zeile { cursor: pointer; }
@media (hover: hover) { .bk-bericht-liste tr.bk-bericht-zeile:not(.offen):hover { background: var(--bk-cream-2); } }
.bk-bericht-liste tr.bk-bericht-zeile.offen, .bk-bericht-liste tr.bk-bericht-auf { background: var(--bk-cream-2); }
.bk-bericht-liste tr.bk-bericht-auf > td { white-space: normal; padding: 4px 14px 14px; border-top: 0; overflow: hidden; }
.bk .bk-bericht-auf .bk-bericht-text { margin: 0; background: #fff; }
.bk .bk-bericht-auf .bk-bericht-text table table { max-width: 100%; }
.bk-bericht-laedt { padding: 10px 2px; font-weight: 700; color: var(--bk-muted); }
.bk-bericht-auf-fuss { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; font-weight: 800; }
.bk .bk-bericht-auf-fuss .bk-bericht-weg { color: var(--bk-red); }
.bk .bk-bericht-auf-fuss button { background: none; border: 0; padding: 6px 0; font: inherit; color: var(--bk-link); cursor: pointer; }
@media (max-width: 699px) {
	.bk-bericht-liste > tbody { display: block; }
	.bk-bericht-liste tr.kopf { display: flex; align-items: center; padding: 4px 12px; }
	.bk-bericht-liste tr.kopf th { padding: 8px 0 4px; }
	.bk-bericht-liste tr.kopf th:not(.c-wahl) { display: none; }
	.bk-bericht-liste tr:not(.kopf) { display: grid; grid-template-columns: 34px minmax(0, auto) minmax(0, 1fr) 44px; grid-template-areas: "wahl betreff betreff weg" "wahl wer datum weg"; column-gap: 8px; row-gap: 2px; align-items: center; padding: 9px 12px; border-top: 2px solid var(--bk-border-soft); }
	.bk-bericht-liste tr:not(.kopf) > td { display: block; width: auto; border: 0; padding: 0; }
	.bk-bericht-liste td.c-wahl { grid-area: wahl; }
	.bk-bericht-liste td.c-betreff { grid-area: betreff; font-size: 15px; }
	.bk-bericht-liste td.c-wer { grid-area: wer; font-size: 12px; }
	.bk-bericht-liste td.c-datum { grid-area: datum; font-size: 12px; text-align: left; }
	.bk-bericht-liste td.c-datum::before { content: "· "; }
	.bk-bericht-liste td.c-weg { grid-area: weg; }
	.bk-bericht-liste tr.neu .c-wahl { box-shadow: none; }
	.bk-bericht-liste tr.neu { box-shadow: inset 4px 0 0 var(--bk-blue); }
	.bk-bericht-liste tr:not(.kopf) > td[colspan] { grid-column: 1 / -1; }
	.bk-bericht-liste tr:not(.kopf) > td.bk-post-leer { padding: 18px 4px; }
	/* Titel bis zu zwei Zeilen, kein Mülleimer je Zeile (Löschen über die Häkchen oder im aufgeklappten Bericht) */
	.bk-bericht-liste tr.bk-bericht-zeile { grid-template-columns: 34px minmax(0, auto) minmax(0, 1fr); grid-template-areas: "wahl betreff betreff" "wahl wer datum"; }
	.bk-bericht-liste tr.bk-bericht-zeile td.c-weg { display: none; }
	.bk-bericht-liste tr.bk-bericht-zeile td.c-betreff { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; }
	.bk-bericht-liste tr.bk-bericht-auf { padding: 4px 12px 12px; }
}
/* Einzelner Bericht: Zurück, Kopf mit Typ-Symbol und Löschen, Text */
.bk .bk-bericht-zurueck { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: 0; font-weight: 800; font-size: 14px; }
.bk-bericht-kopf { display: flex; align-items: flex-start; gap: 12px; }
.bk-card.bk-bericht-kopf { padding: 14px 16px; }
.bk-bericht-kopf .bk-bericht-typ { width: 36px; height: 36px; margin: 0; font-size: 15px; flex: none; }
.bk-bericht-kopf h2 { margin: 0 0 2px; font-family: var(--bk-display); font-size: 20px; font-weight: 800; color: var(--bk-brown); overflow-wrap: anywhere; }
.bk-bericht-kopf .bk-row-main { flex: 1; min-width: 0; }
.bk-bericht-text { min-width: 0; max-width: 100%; font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--bk-text); overflow-wrap: anywhere; }
.bk-bericht-text b { color: var(--bk-brown); }
.bk .bk-bericht-text table { max-width: 100%; }
.bk .bk-bericht-text table table { display: block; overflow-x: auto; max-width: calc(100vw - 96px); }
/* Gespeicherte alte Berichtstexte (Tabellen mit fester Breite, auch „Bericht wie früher“ im Kampfbericht) */
.bk-berichte :is(.bk-bericht-text, .bk-kb-alt) table { border-collapse: separate; border-spacing: 0; }
.bk-berichte :is(.bk-bericht-text, .bk-kb-alt) :is([style*="width:"], [width]) { max-width: 100%; }
.bk-berichte :is(.bk-bericht-text, .bk-kb-alt) img { height: auto; }
.bk-berichte :is(.bk-bericht-text, .bk-kb-alt) :is(td, th) { word-break: normal; overflow-wrap: break-word; }
.bk-berichte :is(.bk-bericht-text, .bk-kb-alt) table.liste { display: block; width: 100% !important; overflow-x: auto; margin: 0; padding: 0; background: #fff; border: 2px solid var(--bk-border); border-radius: 18px; }
.bk-berichte :is(.bk-bericht-text, .bk-kb-alt) table.liste > tbody { display: table; width: auto; min-width: 100%; }
.bk-berichte :is(.bk-bericht-text, .bk-kb-alt) table.liste th { padding: 8px 14px 6px; border: 0; background: none; font-family: var(--bk-display); font-size: 17px; font-weight: 700; color: var(--bk-brown); text-align: left; white-space: nowrap; text-transform: none; }
.bk-berichte :is(.bk-bericht-text, .bk-kb-alt) table.liste td { padding: 8px 14px; border: 0; border-top: 2px solid var(--bk-border-soft); font-size: 14px; font-weight: 600; color: var(--bk-text); vertical-align: middle; background: none; }
.bk-berichte :is(.bk-bericht-text, .bk-kb-alt) table.liste tr:first-child > * { padding-top: 12px; }
.bk-berichte :is(.bk-bericht-text, .bk-kb-alt) table.liste tr:first-child td { border-top: 0; }
.bk-berichte :is(.bk-bericht-text, .bk-kb-alt) table.liste tr:last-child > * { padding-bottom: 12px; }
.bk-berichte :is(.bk-bericht-text, .bk-kb-alt) table.liste td b { color: var(--bk-brown); }
/* === ENDE Stufe 5: berichte.php === */

/* Stufe 5: meldungen.php (Ferdl) ==========================================================================
   Glocke ohne .bk-legacy (Rahmen .bk-meldungen-seite, auch /meldungen/reaktionen); vorher <style> in meldungen.php. */
.bk-meldungen-seite { font-size: 14px; color: var(--bk-text); }
.bk .bk-meldungen-seite .bk-meldung-anfrage { cursor: default; align-items: flex-start; }
.bk .bk-meldungen-seite .bk-meldung-anfrage .bk-meldung-titel { display: block; }
.bk-meldungen-seite .bk-anfrage-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin: 9px 0 2px; }
.bk .bk-meldungen-seite .bk-anfrage-knoepfe .bk-btn.klein, .bk .bk-meldungen-seite .bk-anfrage-knoepfe .bk-btn2.klein { width: auto; min-height: 44px; padding: 9px 16px; font-size: 15px; }
.bk .bk-meldungen-seite .bk-meldung .bk-row-main { flex: 1; }
.bk .bk-meldungen-seite .bk-meldung-ziel { text-decoration: none; }
.bk .bk-meldungen-seite .bk-meldung-ziel::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.bk .bk-meldungen-seite .bk-meldung-ziel:focus-visible { outline: none; }
.bk .bk-meldungen-seite .bk-meldung-ziel:focus-visible::after { box-shadow: 0 0 0 2px var(--bk-blue) inset; }
.bk .bk-meldungen-seite .bk-meldung.info { cursor: default; }
.bk .bk-meldungen-seite .bk-meldung.info:hover { background: none; }
.bk .bk-meldungen-seite .bk-meldung-text { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--bk-text); overflow-wrap: anywhere; }
.bk .bk-meldungen-seite .bk-meldung-text a { position: relative; z-index: 1; }
.bk .bk-meldungen-seite .bk-meldung-gelesen { position: relative; z-index: 1; flex: none; margin: -4px -6px 0 0; }
.bk .bk-meldungen-seite .bk-meldung-gelesen button.bk-icon-knopf { width: 32px; height: 32px; color: var(--bk-muted); font-size: 17px; }
.bk .bk-meldungen-seite .bk-meldung-gelesen button.bk-icon-knopf:hover, .bk .bk-meldungen-seite .bk-meldung-gelesen button.bk-icon-knopf:focus-visible { background: var(--bk-cream-2); color: var(--bk-green, #3d6b1f); }
/* Reaktionen (core/social/reaktionen.inc.php, reaktion_meldung()): ein Beitrag je Zeile, Symbol vor den Namen */
.bk .bk-meldungen-seite .bk-reak-m-zeile { display: block; margin: 5px 0 0; }
.bk .bk-meldungen-seite .bk-reak-m-zeile:first-child { margin-top: 0; }
.bk .bk-meldungen-seite .bk-reak-m-wer .bk-reak-i { margin-right: 2px; }
/* === ENDE Stufe 5: meldungen.php === */

/* Stufe 5: meldungen_reaktionen.php (Ferdl) – Reaktionen auf eigene Beiträge, Rahmen wie die Meldungen */
.bk .bk-meldungen-seite .bk-post-zurueck { align-self: flex-start; margin: 0; }
.bk-meldungen-seite .bk-reak-liste-sym { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; }
/* === ENDE Stufe 5: meldungen_reaktionen.php === */

/* Stufe 5: tipps.php (Ferdl) – „Was als Nächstes?“ als ganze Seite bzw. im Fenster: Karte ohne eigenen Rahmen und Kopf */
.bk .bk-tipps-seite .bk-tipps-karte { border: 0; box-shadow: none; padding: 4px 2px; background: transparent; }
.bk .bk-tipps-seite .bk-tipps-karte .bk-card-title { display: none; }
/* === ENDE Stufe 5: tipps.php === */

/* Stufe 5: app.php (Ferdl) – „Bavarian Kings als App“: Karten gestapelt, Vorteile als Liste mit Symbol */
.bk-app-stapel { display: flex; flex-direction: column; gap: var(--bk-kartenabstand, 12px); }
.bk-app-stapel[hidden] { display: none; }
.bk-app-text { font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--bk-text); }
.bk-app-text b { color: var(--bk-brown); }
.bk-app-vorteile { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bk-app-vorteile li { display: flex; gap: 10px; align-items: flex-start; }
.bk-app-vorteile li > i { flex: none; width: 18px; margin-top: 3px; text-align: center; color: var(--bk-blue); }
.bk .bk-app-anleitung .bk-chk-anleitung { margin-top: 0; gap: 8px; }
/* === ENDE Stufe 5: app.php === */

/* Stufe 5: user_nickname.php (Ferdl) – erster Spielername, Formular wie die übrigen (.bk-form) */
.bk-nick-form { max-width: 560px; }
/* === ENDE Stufe 5: user_nickname.php === */

/* Stufe 5: user_welt_wahl.php (Ferdl) – Weltauswahl beim Anmelden (nur bei mehreren Welten), Rahmen .bk-auth */
.bk-card.bk-weltwahl { padding: 4px 14px; }
.bk-weltwahl-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; }
.bk-weltwahl-zeile + .bk-weltwahl-zeile { border-top: 2px solid var(--bk-border-soft); }
.bk-weltwahl-name { min-width: 0; overflow-wrap: anywhere; font-family: var(--bk-display); font-size: 18px; font-weight: 700; color: var(--bk-brown); }
.bk-weltwahl-name b { font-family: var(--bk-body); font-size: 13px; font-weight: 800; color: var(--bk-muted); }
.bk .bk-weltwahl-zeile .bk-btn.klein { flex: none; }
/* === ENDE Stufe 5: user_welt_wahl.php === */

/* Countdown mitten im Satz (countdown_feld() mit Ersatztext, Ferdl 25.09.2026): Die Hülle zählt fürs Layout nicht mit,
   Countdown und Uhrzeit stehen wie vorher direkt im Elternteil (z. B. .bk-tb-zeit, am Handy Flex mit Abstand).
   Nach Ablauf steht nur noch der Ersatztext darin – in Unterwegs-Karten so auffällig wie vorher der Countdown. */
.bk-countdown-satz { display: contents; }
.bk-tb-zeit .bk-countdown-satz:not(:has(*)) { font-family: var(--bk-display); font-size: 16px; color: var(--bk-brown); }
.bk-tb-alarm .bk-tb-zeit .bk-countdown-satz:not(:has(*)) { color: var(--bk-red); }
/* === ENDE Countdown mitten im Satz === */


/* Stufe F: /charts/pokale und /charts/stammtische (Ferdl) – ohne .bk-legacy, Rand wie die übrigen Reiter (.bk-hitliste) */
.bk-sttop .bk-hit-wert { white-space: nowrap; }
.bk-hitliste .bk-sttop-hinweis { margin: 4px 0 0; text-align: center; font-size: 13px; font-weight: 600; color: var(--bk-muted); }
/* === ENDE Stufe F: Hitlisten === */

/* Nr 56: Bereiche sortieren (core/game/bereiche.inc.php) – je Zeile Schalter + randlose Pfeile hoch/runter.
   Das Menü bleibt am 320-px-Handy innerhalb der Seite (16 px Rand je Seite). */
.bk-zmodule { max-width: calc(100vw - 32px); box-sizing: border-box; }
.bk-zmodul-zeile { display: flex; align-items: center; gap: 2px; }
.bk .bk-zmodul-zeile .bk-zmodul-knopf { flex: 1; min-width: 0; }
.bk .bk-zmodul-pfeil { flex: none; width: 34px; height: 34px; font-size: 14px; color: var(--bk-muted); }
.bk .bk-zmodul-pfeil:disabled { opacity: .3; cursor: default; background: none; color: var(--bk-muted); }
/* === ENDE Nr 56 === */
/* Roadmap Nr 94: Verlegung (Typ 7) in „Truppenbewegungen“ der Dorfzentrale – blaugrün wie auf der Karte und in „Unterwegs“ */
.bk-zmove.blaugruen .bk-zmove-icon { background: #dff1ec; color: #2e7d6b; }

/* Roadmap Nr 95: Dorfkarte der Dorfzentrale zeigt sechs Rohstoff-Kacheln (Holz, Stein, Brezen, Bier, Leberkas, Salz).
   Am Handy bleiben es 2 Spalten (3 Reihen); ab 600 px 3 Spalten (2 Reihen), damit Texte wie „voll morgen 14:00“ Platz haben. */
@media (min-width: 600px) {
	.bk-zdorf-res.sechs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* === ENDE Nr 95 === */

/* Roadmap Nr 115: Fortschritt zur nächsten Pokalstufe in „Meine Pokale“ (user_account_pokale.php).
   Balken von 0 bis zum Ziel, darunter eine Textzeile mit denselben Zahlen; bricht am 320-px-Handy um statt breiter zu werden. */
.bk-pokal-balken { height: 8px; margin-top: 8px; border-radius: 999px; background: var(--bk-border-soft); overflow: hidden; max-width: 100%; }
.bk-pokal-balken > span { display: block; height: 100%; border-radius: 999px; background: var(--bk-blue); }
.bk-pokal-fehlt { margin-top: 5px; font-size: 12px; font-weight: 600; color: var(--bk-muted); overflow-wrap: anywhere; }
.bk-pokal-fehlt b { color: var(--bk-text); }
.bk-pokal-fehlt small { font-size: 12px; font-weight: 600; color: var(--bk-faint); }
/* === ENDE Nr 115 === */
/* Stufe 5: city_building.php (Walburga) – Gebäudeseite ohne .bk-legacy: Hinweiskarten (Produktion, Kirche, Wall), Abriss-Knopf */
.bk .bk-gi-info { font-size: 14px; line-height: 1.45; color: var(--bk-text); }
.bk .bk-gi-info b { color: var(--bk-brown); }
.bk .bk-gi-abriss { width: auto; }
/* === ENDE Stufe 5: city_building.php === */

/* Stufe 5: Gebäudeteile (Walburga) – vorher als <style> aus gb_stil() (core/game/gebaeude_teile.inc.php) in die Seite geschrieben,
   benutzt von Lager, Kaufmann, Salzlager, Rathaus, Umtreiba-Hüttn, Handelsrouten */
.bk-gb-karte { gap: 12px; }
.bk-gb-karte.warnung { border-color: #e7b1a8; }
.bk-gb-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.bk-gb-zahl { display: flex; align-items: center; gap: 10px; background: var(--bk-cream-2); border-radius: 12px; padding: 8px 10px; min-width: 0; }
.bk-gb-zahl > i { width: 20px; text-align: center; color: var(--bk-brown-2); font-size: 16px; }
.bk-gb-zahl b { display: block; font-family: var(--bk-display); font-size: 17px; color: var(--bk-brown); line-height: 1.15; }
.bk-gb-zahl span { display: block; font-size: 12px; font-weight: 700; color: var(--bk-muted); line-height: 1.25; }
.bk-gb-menge { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--bk-border-soft); }
.bk-gb-menge label { min-width: 110px; }
.bk-gb-menge label b { display: block; font-family: var(--bk-display); font-size: 16px; color: var(--bk-brown); }
.bk-gb-menge label small { display: block; font-size: 12px; font-weight: 700; color: var(--bk-muted); }
.bk-gb-feld { display: inline-flex; flex: none; }
.bk .bk-gb-karte .bk-gb-feld input.bk-zahl-feld { width: 84px !important; }
.bk-gb-wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 600px) { .bk-gb-wahl { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bk-gb-wahl label { cursor: pointer; }
.bk-gb-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bk-gb-wahl span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 8px; border: 2px solid var(--bk-border); border-radius: 12px; background: #fff; font-weight: 800; color: var(--bk-text); }
.bk-gb-wahl input:checked + span { border-color: var(--bk-blue); background: var(--bk-blue-pale); color: var(--bk-blue-dark); }
.bk-gb-wahl input:focus-visible + span { outline: 2px solid var(--bk-blue); }
.bk-gb-hinweis { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--bk-blue-pale); color: var(--bk-blue-dark); font-size: 14px; font-weight: 700; line-height: 1.4; }
.bk-gb-hinweis > i { margin-top: 2px; }
.bk-gb-hinweis.ok { background: #e8f5dc; color: #3d6b1c; }
.bk-gb-hinweis.warnung { background: #fdf0d5; color: #8a5a10; }
.bk-gb-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-gb-knoepfe > .bk-btn, .bk-gb-knoepfe > .bk-btn2 { flex: 1 1 180px; }
.bk .bk-legacy .bk-btn.rot, .bk .bk-btn.rot { background: var(--bk-red) !important; box-shadow: 0 3px 0 #8f2a1e; color: #fff !important; }
.bk .bk-legacy .bk-btn.gold { background: var(--bk-gold) !important; color: var(--bk-brown) !important; box-shadow: 0 3px 0 var(--bk-gold-dark); }
.bk .bk-legacy .bk-btn.hell, .bk .bk-btn.hell { background: #fff !important; color: var(--bk-brown) !important; border: 2px solid var(--bk-border) !important; box-shadow: none; }
.bk-gb-liste { display: flex; flex-direction: column; gap: 8px; }
.bk-gb-zeile { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: #fff; border: 2px solid var(--bk-border-soft); border-radius: 14px; padding: 10px 12px; }
.bk-gb-zeile.aus { opacity: .65; }
.bk-gb-zeiletext { flex: 1 1 200px; min-width: 0; }
.bk-gb-zeiletext .bk-card-title { font-size: 16px; }
.bk-gb-zeile .bk-chips { margin-top: 4px; gap: 4px; }
.bk-gb-zeile .bk-chip { font-size: 11px; padding: 3px 7px; }
.bk .bk-gb-zeile .bk-btn.klein { flex: none; min-height: 40px; padding: 8px 14px; font-size: 14px; width: auto; max-width: 100%; }
.bk-gb-zeile form { margin: 0; }
.bk-gb-balken { height: 10px; border-radius: 999px; background: var(--bk-cream-2); overflow: hidden; }
.bk-gb-balken > div { height: 100%; background: var(--bk-green); border-radius: 999px; }
.bk-gb-balken.voll > div { background: var(--bk-red); }
.bk-gb-ergebnis { font-family: var(--bk-display); font-size: 17px; color: var(--bk-brown); }
/* === ENDE Stufe 5: Gebäudeteile === */

/* Stufe 5: city_building_data.php (Walburga) – alle Stufen eines Gebäudes; am Handy scrollt nur die Tabelle, die Stufe bleibt links */
.bk-gdaten { padding: 6px 0; overflow: hidden; }
.bk-gdaten-scroll { overflow-x: auto; max-width: 100%; }
.bk-gdaten-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.bk-gdaten-tabelle th, .bk-gdaten-tabelle td { padding: 7px 10px; border-top: 2px solid var(--bk-border-soft); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bk-gdaten-tabelle thead th { border-top: 0; font-size: 12px; font-weight: 800; color: var(--bk-muted); }
.bk-gdaten-tabelle th:first-child { position: sticky; left: 0; z-index: 1; background: #fff; text-align: left; color: var(--bk-brown); font-weight: 700; }
.bk-gdaten-tabelle tbody tr:nth-child(even) > * { background: var(--bk-cream-3); }
/* === ENDE Stufe 5: city_building_data.php === */

/* Stufe 5: handelsrouten.php (Walburga) – Fahrplan einer Route, vorher als <style> aus handelsroute_plan_stil() */
.bk .bk-hr-plan { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.bk .bk-hr-plan .bk-feld { flex: 1 1 140px; min-width: 0; margin: 0; }
.bk .bk-hr-plan select { width: 100%; }
.bk .bk-hr-planform { margin-top: 8px; }
.bk .bk-hr-planform .bk-btn { margin-top: 8px; }
/* === ENDE Stufe 5: handelsrouten.php === */

/* Stufe 5: sights.php / sight.php (Walburga) – Sammelsets, Funde je Bezirk, eine Sehenswürdigkeit mit Karte */
.bk-sw-karte { display: flex; flex-direction: column; gap: 8px; }
.bk-sw-karte > p { margin: 0; }
.bk-sw-bezirk { font-size: 14px; line-height: 1.5; }
.bk-sw-bezirk b { color: var(--bk-brown); }
.bk-sw-fertig { color: var(--bk-green-dark, #3d6b1c); font-weight: 800; }
.bk-sw-tabelle td { text-align: center; }
/* Nur vier schmale Spalten – passt auch am 320er ohne Wischen */
.bk-sw-tabelle th, .bk-sw-tabelle td { padding: 7px 6px; white-space: normal; }
.bk-sw-tabelle th:first-child { position: static; }
.bk-sw-tabelle td:last-child { white-space: nowrap; }
.bk-sw-karte [style*="width"] { max-width: 100%; }
/* === ENDE Stufe 5: sights.php / sight.php === */

/* Stufe 5: premium_farmen.php (Walburga) – Einleitung als Karte, Tabellen (frühere Angriffe, ausgeblendete Dörfer) im neuen Stil */
.bk-farm-einleitung { font-size: 14px; line-height: 1.45; color: var(--bk-text); }
.bk-farm-einleitung b { color: var(--bk-brown); }
.bk-farm-tab th, .bk-farm-tab td { text-align: left; }
.bk-farm-tab th:first-child { position: static; background: none; }
.bk-farm-tab .bk-icon-knopf { margin: -6px 0; }
.bk-farm-allezeigen { margin-top: 10px; }
/* === ENDE Stufe 5: premium_farmen.php === */


/* Haberfeldtreiber: Nachtlärm (Roadmap Nr 35, Walburga) – kleiner Hinweis in Dorf und Gebäude */
.bk .bk-haberer-laerm { margin-top: 6px; color: #8e2a1f; font-weight: 700; }
.bk .bk-haberer-laerm i { margin-right: 4px; }
/* === ENDE Haberfeldtreiber: Nachtlärm === */

/* Haberfeldtreiber: Nachtlärm in der Rohstoffleiste (Roadmap Nr 35, Walburga) – Mond in der Ecke der Kachel, macht sie nicht breiter */
.bk .bk-res-item.laerm { position: relative; }
.bk .bk-res-laerm { position: absolute; top: 3px; right: 4px; font-size: 10px; line-height: 1; color: #8e2a1f; }
/* === ENDE Haberfeldtreiber: Nachtlärm in der Rohstoffleiste === */

/* Handel: Schalter „Nur Angebote, die zu mir liefern“ und Hinweis auf Ausgeblendete (Roadmap Nr 39, Walburga) */
.bk-handel-filter .bk-handel-schalter { flex: 1 1 100%; flex-direction: row; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--bk-brown); cursor: pointer; }
.bk-handel-filter .bk-handel-schalter input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--bk-green); cursor: pointer; }
.bk-handel-ausgeblendet { margin: 8px 0 4px; }
.bk-handel-ausgeblendet a { font-weight: 800; white-space: nowrap; }
/* === ENDE Handel: Schalter Nur lieferbare === */

/* Farmübersicht: „schon unterwegs aus Dorf X“ unter dem letzten Angriff (Roadmap Nr 40, Walburga) */
.bk-farm-letzter .bk-farm-status.bk-farm-auch { align-self: flex-start; max-width: 100%; border-radius: 12px; overflow-wrap: anywhere; }
/* === ENDE Farmübersicht: schon unterwegs === */

/* Farmübersicht: Hinweis „erst spionieren“ bei Preußen mit altem Stand (Roadmap Nr 40, Walburga) */
.bk-farm-aufgefuellt { color: var(--bk-brown); }
.bk-farm-aufgefuellt a { font-weight: 800; white-space: nowrap; }
/* === ENDE Farmübersicht: aufgefüllt === */

/* Eigene Farmlisten (Roadmap Nr 52, Walburga) – core/game/farmlisten.inc.php */
.bk .bk-farmliste-neu input[type="text"], .bk .bk-farmliste-verwalten input[type="text"], .bk .bk-farmliste-einheit input {
	width: 100%; min-width: 0; min-height: 40px; box-sizing: border-box; padding: 7px 10px; border: 2px solid var(--bk-border); border-radius: 12px;
	background: #fff; font-family: var(--bk-body); font-size: 15px; font-weight: 700; color: var(--bk-brown); outline: none; box-shadow: none;
}
.bk .bk-farmliste-neu input:focus, .bk .bk-farmliste-verwalten input:focus { border-color: var(--bk-blue); }
.bk-farmliste-neu { display: flex; flex-direction: column; gap: 8px; }
.bk-farmliste-neu label .bk-card-meta { display: block; font-weight: 400; }
.bk-farmliste-zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bk-farmliste-zeile input { flex: 1 1 150px; }
/* .bk-btn2 ist sonst 100 % breit – hier nur so breit wie der Text */
.bk .bk-farmliste-zeile .bk-btn2, .bk .bk-farmliste-wahl .bk-btn2, .bk .bk-farmliste-teil .bk-btn2 { flex: none; width: auto; min-height: 40px; padding: 8px 14px; }
.bk-farmliste-wahl { flex-basis: 100%; }
.bk-farmliste-wahl > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--bk-blue); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.bk-farmliste-wahl > summary::-webkit-details-marker { display: none; }
.bk-farmliste-wahl > summary::after { content: "▾"; font-size: 11px; }
.bk-farmliste-wahl[open] > summary::after { content: "▴"; }
.bk-farmliste-zahl { display: inline-block; min-width: 18px; padding: 1px 6px; border-radius: 999px; background: var(--bk-blue-light); color: var(--bk-blue-dark); font-size: 11px; text-align: center; }
.bk-farmliste-wahl form { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--bk-cream-2); }
.bk-farmliste-wahl label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--bk-brown); overflow-wrap: anywhere; cursor: pointer; }
.bk-farmliste-wahl input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--bk-green); }
.bk-farmliste-wahl .bk-btn2 { align-self: flex-start; margin-top: 4px; }
.bk-farmliste-verwalten > summary { cursor: pointer; font-weight: 800; color: var(--bk-brown); }
.bk-farmliste-teil { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.bk-farmliste-einheiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.bk-farmliste-einheit { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 800; color: var(--bk-muted); min-width: 0; }
.bk-farmliste-einheit span { overflow-wrap: anywhere; }
.bk-farmliste-teil .bk-btn2.gefahr { align-self: flex-start; }
.bk-farmliste-karte .bk-card-title a { overflow-wrap: anywhere; }
/* === ENDE Eigene Farmlisten === */

/* Farmlisten: Auswahl der gemeinsamen Truppenvorlage (Roadmap Nr 55, Walburga) */
.bk .bk-farmliste-zeile select.bk-farmliste-auswahl {
	flex: 1 1 150px; min-width: 0; max-width: 100%; min-height: 40px; box-sizing: border-box; padding: 7px 10px; border: 2px solid var(--bk-border);
	border-radius: 12px; background: #fff; font-family: var(--bk-body); font-size: 15px; font-weight: 700; color: var(--bk-brown);
}
/* === ENDE Farmlisten: Vorlagen-Auswahl === */

/* Farmlisten im dunklen Haberer-Dorfprofil (Nr 58, Prüfrunde Quirin): Karte wie „Auf der Karte“ (gemeinschaft.css, --bk-hab-*) */
.bk .bk-hab-seite .bk-farmliste-dorf { background: var(--bk-hab-karte); border-color: #4a3d35; box-shadow: 0 3px 0 #0b0908; color: var(--bk-hab-leise); }
.bk .bk-hab-seite .bk-farmliste-dorf a, .bk .bk-hab-seite .bk-farmliste-wahl > summary { color: var(--bk-hab-glut); }
.bk .bk-hab-seite .bk-farmliste-zahl { background: #3a2f29; color: var(--bk-hab-glut); }
.bk .bk-hab-seite .bk-farmliste-wahl form { background: #1f1a17; }
.bk .bk-hab-seite .bk-farmliste-wahl label { color: var(--bk-hab-text); }
.bk .bk-hab-seite .bk-farmliste-dorf .bk-btn2 { background: #2a2320; border-color: #4a3d35; color: var(--bk-hab-text); box-shadow: none; }
/* === ENDE Farmlisten: Haberer-Profil === */

/* Zunftbaum der Handwerksgilde (Roadmap Nr 66, Walburga, core/game/zunft.inc.php) – am Handy einspaltig, am Rechner Zünfte nebeneinander */
.bk .bk-zk { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.bk .bk-zk-kopf { display: flex; flex-direction: column; gap: 10px; }
.bk .bk-zk-zahlen { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 700px) { .bk .bk-zk-zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bk .bk-zk-zahlen > div { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; align-items: start; background: var(--bk-cream-2); border-radius: 12px; padding: 8px 10px; min-width: 0; }
.bk .bk-zk-zahlen > div > i { grid-row: span 2; margin-top: 3px; text-align: center; color: var(--bk-brown-2); font-size: 16px; }
.bk .bk-zk-zahlen b { font-family: var(--bk-display); font-size: 17px; color: var(--bk-brown); line-height: 1.2; }
.bk .bk-zk-zahlen span { font-size: 12px; font-weight: 700; color: var(--bk-muted); line-height: 1.35; overflow-wrap: anywhere; }
.bk .bk-zk-zahlen span b { font-family: var(--bk-body); font-size: 12px; }
.bk .bk-zk-summe { margin-top: 0; }
.bk .bk-zk-wurzel, .bk .bk-zk-krone { width: 100%; max-width: 560px; margin: 0 auto; }
.bk .bk-zk-zuenfte { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; align-items: start; }
.bk .bk-zk-zunft { padding: 0; min-width: 0; }
.bk .bk-zk-zunft > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; }
.bk .bk-zk-zunft > summary::-webkit-details-marker { display: none; }
.bk .bk-zk-zunft-icon { flex: none; width: 26px; text-align: center; font-size: 22px; color: var(--bk-brown-2); }
.bk .bk-zk-zunft.farbe-gold .bk-zk-zunft-icon { color: var(--bk-gold-dark); }
.bk .bk-zk-zunft.farbe-gruen .bk-zk-zunft-icon { color: var(--bk-green-dark); }
.bk .bk-zk-zunft.farbe-grau .bk-zk-zunft-icon { color: var(--bk-muted); }
.bk .bk-zk-zunft.farbe-rot .bk-zk-zunft-icon { color: var(--bk-red); }
.bk .bk-zk-zunft.farbe-blau .bk-zk-zunft-icon { color: var(--bk-blue); }
.bk .bk-zk-zunft-name { flex: 1; min-width: 0; }
.bk .bk-zk-zunft-name b { display: block; font-family: var(--bk-display); font-size: 18px; color: var(--bk-brown); }
.bk .bk-zk-zunft-name small { display: block; font-size: 12px; font-weight: 700; color: var(--bk-muted); overflow-wrap: anywhere; }
.bk .bk-zk-zunft-zahl { flex: none; font-weight: 800; font-size: 13px; color: var(--bk-brown); background: var(--bk-cream-2); border-radius: 999px; padding: 3px 10px; }
.bk .bk-zk-zunft-zahl::after { content: " ▾"; color: var(--bk-muted); }
.bk .bk-zk-zunft[open] .bk-zk-zunft-zahl::after { content: " ▴"; }
.bk .bk-zk-ast { container-type: inline-size; display: flex; flex-direction: column; gap: 14px; padding: 0 12px 14px; }
.bk .bk-zk-ast > * { position: relative; }
.bk .bk-zk-ast > * + *::before { content: ""; position: absolute; top: -14px; left: 50%; width: 2px; height: 14px; background: var(--bk-border); }
.bk .bk-zk-gabel { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 14px; background: var(--bk-cream); }
.bk .bk-zk-gabel-text { font-size: 12px; font-weight: 800; color: var(--bk-muted); text-align: center; }
.bk .bk-zk-paar { display: grid; grid-template-columns: 1fr; gap: 8px; }
@container (min-width: 520px) { .bk-zk-paar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bk .bk-zk-knoten { display: flex; flex-direction: column; gap: 6px; min-width: 0; background: #fff; border: 2px solid var(--bk-border-soft); border-radius: 14px; padding: 10px 12px; }
.bk .bk-zk-knoten.offen { border-color: var(--bk-blue); }
.bk .bk-zk-knoten.lernt, .bk .bk-zk-knoten.wartet { border-color: var(--bk-gold); background: #fffaf0; }
.bk .bk-zk-knoten.fertig { border-color: var(--bk-green); background: var(--bk-green-bg); }
.bk .bk-zk-knoten.gesperrt, .bk .bk-zk-knoten.bald { background: var(--bk-cream); }
.bk .bk-zk-knoten.gesperrt .bk-zk-name, .bk .bk-zk-knoten.bald .bk-zk-name { color: var(--bk-muted); }
.bk .bk-zk-knoten.rang-hof { border-width: 3px; border-color: var(--bk-gold); }
.bk .bk-zk-knoten.rang-hof.fertig { background: #fff5d6; }
.bk .bk-zk-knoten-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.bk .bk-zk-rang { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--bk-muted); }
.bk .bk-zk-status { font-size: 12px; font-weight: 800; color: var(--bk-brown-2); }
.bk .bk-zk-knoten.fertig .bk-zk-status { color: var(--bk-green-dark); }
.bk .bk-zk-knoten.offen .bk-zk-status { color: var(--bk-blue-dark); }
.bk .bk-zk-name { font-family: var(--bk-display); font-size: 17px; color: var(--bk-brown); line-height: 1.2; overflow-wrap: anywhere; }
.bk .bk-zk-satz { font-size: 13px; font-style: italic; color: var(--bk-muted); line-height: 1.35; }
.bk .bk-zk-knoten .bk-chips { margin-top: 0; }
.bk .bk-zk-quer, .bk .bk-zk-grund, .bk .bk-zk-kosten, .bk .bk-zk-lernt { font-size: 12px; font-weight: 700; color: var(--bk-muted); line-height: 1.4; overflow-wrap: anywhere; }
.bk .bk-zk-lernt { color: var(--bk-brown); font-size: 13px; }
.bk .bk-zk-grund { color: var(--bk-brown-2); }
.bk .bk-zk-fortschritt { display: flex; flex-direction: column; gap: 4px; }
.bk .bk-zk-roh { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 8px; align-items: center; font-size: 12px; font-weight: 700; color: var(--bk-text); }
.bk .bk-zk-roh > small { grid-column: 2; font-size: 11px; color: var(--bk-muted); }
.bk .bk-zk-einzahlen > summary { cursor: pointer; font-weight: 800; font-size: 14px; color: var(--bk-blue-dark); padding: 4px 0; }
.bk .bk-zk-form { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 0; }
.bk .bk-zk-form .bk-btn { align-self: flex-start; width: auto; }
.bk .bk-zk-form .bk-gb-feld { flex: 1 1 auto; min-width: 0; max-width: 100%; }
.bk .bk-zk-form .bk-zahl { max-width: 100%; }
.bk .bk-zk-form input.bk-zahl-feld, .bk .bk-zk-form .bk-gb-feld input { width: 64px !important; }
@media (max-width: 400px) {
	.bk .bk-zk-ast { padding: 0 6px 12px; }
	.bk .bk-zk-knoten { padding: 10px 8px; }
	.bk .bk-zk-gabel { padding: 6px 4px; }
}
.bk .bk-zk-form .bk-card-meta { margin: 0; }
.bk .bk-zk-buch > summary { cursor: pointer; font-weight: 800; color: var(--bk-brown); }
.bk .bk-zk-buch ul { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.bk .bk-zk-buch li { overflow-wrap: anywhere; }
.bk .bk-zk-buch li > span { font-weight: 800; color: var(--bk-muted); }
/* === ENDE Zunftbaum === */

/* Zunftbaum: Sperrgrund deutlich (Roadmap Nr 67, Walburga) – im Knoten, im Kopf der Zunftkarte und oben als Hinweis */
.bk .bk-zk-grund { font-size: 13px; font-weight: 800; color: #8a5a10; }
.bk .bk-zk-grund > i { margin-right: 3px; }
.bk .bk-zk-zunft-name small.bk-zk-sperre { margin-top: 2px; color: #8a5a10; font-weight: 800; }
.bk .bk-zk-sperre-knopf { margin-top: 8px; }
.bk .bk-zk-sperre-knopf .bk-btn { width: auto; display: inline-flex; align-items: center; gap: 6px; }
/* === ENDE Zunftbaum: Sperrgrund === */

/* Zunftbaum: „mit Gilde: N“ unter dem Einzahlfeld (Roadmap Nr 69, Walburga) – füllt das Skript in zunft_skript() */
.bk .bk-zk-form .bk-zk-mitgilde { display: block; margin: -6px 0 0; font-size: 12px; font-weight: 700; color: var(--bk-muted); text-align: right; overflow-wrap: anywhere; }
.bk .bk-zk-form .bk-zk-mitgilde[hidden] { display: none; }
/* === ENDE Zunftbaum: mit Gilde === */

/* Farmübersicht und Farmlisten: Link auf den letzten eigenen Spionagebericht (Roadmap Nr 73, Walburga) */
.bk-farm-spion { font-size: 12px; overflow-wrap: anywhere; }
.bk-farm-spion a { font-weight: 800; white-space: nowrap; }
/* === ENDE Farm: Spionagebericht === */

/* Gebäude im Fenster (Roadmap Nr 83, Walburga): am Handy Schuber von unten – nur mit der Klasse bk-ov-schuber, die
   bk_geb_fenster.js allein dem Gebäude-Fenster gibt; Profil, Chat & Co. bleiben, wie sie sind */
.bk-ov-griff { display: none; }
@media (max-width: 767px) {
	.bk-ov.bk-ov-schuber { align-items: flex-end; }
	.bk-ov.bk-ov-schuber .bk-ov-fenster { height: 90vh; height: 90dvh; border-radius: 20px 20px 0 0; box-shadow: 0 -8px 28px rgba(40, 26, 12, .32);
		animation: bk-schuber-auf .26s ease-out; transition: transform .18s ease-out; }
	.bk-ov.bk-ov-schuber .bk-ov-kopf { position: relative; padding-top: 16px; border-radius: 20px 20px 0 0; touch-action: none; }
	.bk-ov.bk-ov-schuber .bk-ov-griff { display: block; position: absolute; top: 6px; left: 50%; width: 44px; height: 5px; margin-left: -22px;
		border-radius: 3px; background: var(--bk-border); }
}
@keyframes bk-schuber-auf { from { transform: translateY(100%); } to { transform: none; } }
/* Gebäudeseite im Fenster: Überschrift auch am Handy (der blaue Kopf fällt dort weg) */
.bk-overlay-seite .bk-geb-fenster-h2 { margin: 0 0 12px; }
/* === ENDE Gebäude im Fenster === */

/* Gebäude im Fenster am Rechner (Nr 83, Wunsch des Meisters 08.10.2026): keine Gebäudeinfos mehr in der rechten Leiste – die
   Karte erscheint nur noch für einen freien Bauplatz bzw. mit einer Meldung (z. B. nach „Hier bauen“) */
.bk-aside .bk-dorfkarte.bk-geb-fenster-leiste:has(.bk-panel[data-cibu]):not(:has(.bk-panel-meldung)) { display: none; }
/* dasselbe ohne :has() (Firefox vor 121) – die Klasse setzt bk_geb_fenster.js (Prüfrunde Quirin) */
.bk-aside .bk-dorfkarte.bk-geb-fenster-leiste.bk-geb-leiste-aus { display: none; }
/* === ENDE Gebäude im Fenster am Rechner === */

/* Gebäude-Fenster: Pfeile zum selben Gebäude im vorigen/nächsten Dorf links und rechts der Überschrift (Roadmap Nr 85, Walburga) */
.bk .bk-gf-kopf { display: flex; align-items: center; gap: 4px; margin: 0 0 12px; min-width: 0; }
.bk .bk-gf-kopf .bk-geb-fenster-h2 { flex: 1; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.bk .bk-gf-kopf .bk-gf-pfeil { flex: none; width: 36px; height: 36px; font-size: 17px; }
/* === ENDE Gebäude-Fenster: Pfeile === */

/* Gebäudeseite bleibt nach dem Absenden stehen (Roadmap Nr 87, Walburga): die Meldung von oben kurz in Sichtweite */
.bk-geb-hinweis-oben { position: fixed; top: 10px; left: 0; right: 0; margin: 0 auto; width: max-content; z-index: 9000; max-width: calc(100% - 32px); box-sizing: border-box;
	padding: 10px 16px; border-radius: 12px; background: var(--bk-green-bg, #e8f4dc); color: var(--bk-green-dark, #2f5d16); font-weight: 800; font-size: 14px;
	line-height: 1.35; box-shadow: 0 6px 18px rgba(40, 26, 12, .22); cursor: pointer; overflow-wrap: anywhere; animation: bk-hinweis-oben 6s ease forwards; }
.bk-geb-hinweis-oben.fehler { background: #fbe3df; color: var(--bk-red, #b3261e); }
@keyframes bk-hinweis-oben { 0% { opacity: 0; } 6% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
/* === ENDE Gebäudeseite: Hinweis oben === */

/* Dörfer sortieren (Roadmap Nr 114, Walburga): Fenster /doerfer/reihenfolge und Symbol an „Deine Dörfer“ */
.bk .bk-h2-link a.bk-icon { width: 30px; height: 30px; margin: -6px 0 -6px 4px; font-size: 14px; }
.bk .bk-reihe-satz { margin: 0 0 10px; }
.bk .bk-reihe-satz .fa-grip-lines { color: var(--bk-muted); }
.bk .bk-reihe-schnell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--bk-muted); }
.bk .bk-reihe-schnell[hidden] { display: none; }
.bk .bk-reihe-schnell .bk-btn2.klein { width: auto; min-height: 34px; padding: 4px 10px; font-size: 13px; border-radius: 10px; }
@media (max-width: 420px) { .bk .bk-reihe-schnell > span { flex-basis: 100%; } }
.bk .bk-reihe-liste { list-style: none; margin: 0; padding: 0; }
.bk .bk-reihe-zeile { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 6px 2px; border-bottom: 1px solid var(--bk-border); background: #fff; }
.bk .bk-reihe-zeile:last-child { border-bottom: 0; }
.bk .bk-reihe-zeile.zieht { position: relative; z-index: 1; border-radius: 10px; background: var(--bk-cream-2); box-shadow: 0 4px 14px rgba(40, 26, 12, .18); }
.bk .bk-reihe-griff { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 36px; color: var(--bk-muted); font-size: 15px;
	cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.bk .bk-reihe-zeile.zieht .bk-reihe-griff { cursor: grabbing; color: var(--bk-blue); }
.bk .bk-reihe-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.bk .bk-reihe-name { font-weight: 800; color: var(--bk-brown); overflow-wrap: anywhere; }
.bk .bk-reihe-info { font-size: 12px; font-weight: 600; color: var(--bk-muted); }
.bk .bk-reihe-zeile .bk-icon-knopf { flex: none; width: 36px; height: 36px; font-size: 15px; }
.bk .bk-reihe-zeile:first-child .bk-reihe-hoch, .bk .bk-reihe-zeile:last-child .bk-reihe-runter { visibility: hidden; }
.bk .bk-reihe-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.bk .bk-reihe-fuss .bk-btn { width: auto; padding-left: 28px; padding-right: 28px; }
.bk .bk-reihe-offen { font-size: 13px; font-weight: 700; color: var(--bk-muted); }
.bk .bk-reihe-offen[hidden] { display: none; }
/* === ENDE Dörfer sortieren === */