/* =========================================================
   STOCKBUCH – style.css
   Themes: light (neutral hell), dark (neutral dunkel),
           elegant (Waldtracht, edel/zeitlos),
           funny (Honigwabe, verspielt/kinderfreundlich)
========================================================= */

/* =========================================================
   THEME TOKENS
========================================================= */
:root,
[data-theme="light"] {
    --bg: #f6f3ec;
    --bg-2: #efe9db;
    --surface: #ffffff;
    --surface-2: #f7f4ee;
    --text: #2b2b28;
    --text-soft: #45443e;
    --text-muted: #6b6a5f;
    --line: rgba(43, 43, 40, 0.12);
    --line-strong: rgba(43, 43, 40, 0.20);

    --accent: #c17a12;
    --accent-strong: #a3660d;
    --accent-soft: rgba(193, 122, 18, 0.14);
    --accent-2: #4c7a5e;
    --accent-2-soft: rgba(76, 122, 94, 0.14);
    --danger: #b23a3a;
    --danger-soft: rgba(178, 58, 58, 0.12);
    --warn: #b9840a;
    --warn-soft: rgba(185, 132, 10, 0.14);

    --font-display: "Cormorant Garamond", Georgia, serif;
    --font-body: "Segoe UI", Verdana, sans-serif;
    --radius-md: 14px;
    --radius-lg: 20px;
    --shadow-sm: 0 6px 16px rgba(43, 43, 40, 0.08);
    --shadow-md: 0 14px 32px rgba(43, 43, 40, 0.10);
    --hex-opacity: 0.05;
}

[data-theme="dark"] {
    --bg: #14161a;
    --bg-2: #191c21;
    --surface: #1c1f24;
    --surface-2: #22262c;
    --text: #e8e6e0;
    --text-soft: #cfccc4;
    --text-muted: #9a9da2;
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.14);

    --accent: #e0a437;
    --accent-strong: #f0b750;
    --accent-soft: rgba(224, 164, 55, 0.16);
    --accent-2: #6ba382;
    --accent-2-soft: rgba(107, 163, 130, 0.16);
    --danger: #e07474;
    --danger-soft: rgba(224, 116, 116, 0.14);
    --warn: #e0b84a;
    --warn-soft: rgba(224, 184, 74, 0.14);

    --font-display: "Cormorant Garamond", Georgia, serif;
    --font-body: "Segoe UI", Verdana, sans-serif;
    --radius-md: 14px;
    --radius-lg: 20px;
    --shadow-sm: 0 6px 16px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 16px 36px rgba(0, 0, 0, 0.34);
    --hex-opacity: 0.05;
}

[data-theme="elegant"] {
    --bg: #161d18;
    --bg-2: #1c241e;
    --surface: #212b24;
    --surface-2: #263127;
    --text: #f1ece0;
    --text-soft: #ddd6c4;
    --text-muted: #b0b8a6;
    --line: rgba(241, 236, 224, 0.10);
    --line-strong: rgba(241, 236, 224, 0.18);

    --accent: #c9a227;
    --accent-strong: #e3bc44;
    --accent-soft: rgba(201, 162, 39, 0.16);
    --accent-2: #7c8a6c;
    --accent-2-soft: rgba(124, 138, 108, 0.18);
    --danger: #d98a7f;
    --danger-soft: rgba(217, 138, 127, 0.14);
    --warn: #d9b95c;
    --warn-soft: rgba(217, 185, 92, 0.16);

    --font-display: "Cormorant Garamond", Georgia, serif;
    --font-body: "Optima", "Segoe UI", sans-serif;
    --radius-md: 10px;
    --radius-lg: 14px;
    --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 20px 42px rgba(0, 0, 0, 0.36);
    --hex-opacity: 0.06;
}

[data-theme="funny"] {
    --bg: #fff6d8;
    --bg-2: #ffedb0;
    --surface: #fffdf3;
    --surface-2: #fff3c4;
    --text: #3b2b12;
    --text-soft: #55401a;
    --text-muted: #7a5c26;
    --line: rgba(59, 43, 18, 0.14);
    --line-strong: rgba(59, 43, 18, 0.22);

    --accent: #ff9d00;
    --accent-strong: #e88600;
    --accent-soft: rgba(255, 157, 0, 0.20);
    --accent-2: #2b6e50;
    --accent-2-soft: rgba(43, 110, 80, 0.16);
    --danger: #e2543f;
    --danger-soft: rgba(226, 84, 63, 0.16);
    --warn: #e2a300;
    --warn-soft: rgba(226, 163, 0, 0.20);

    --font-display: "Baloo 2", "Comic Sans MS", cursive;
    --font-body: "Baloo 2", "Segoe UI", sans-serif;
    --radius-md: 20px;
    --radius-lg: 26px;
    --shadow-sm: 0 8px 0 rgba(59, 43, 18, 0.10);
    --shadow-md: 0 10px 0 rgba(59, 43, 18, 0.12);
    --hex-opacity: 0.10;
}

[data-theme="comic"] {
    --bg: #fffef4;
    --bg-2: #fff2b0;
    --surface: #ffffff;
    --surface-2: #fff7d9;
    --text: #1a1a1a;
    --text-soft: #2b2b2b;
    --text-muted: #5a5a5a;
    --line: rgba(26, 26, 26, 0.55);
    --line-strong: #1a1a1a;

    --accent: #ff3b30;
    --accent-strong: #d81f1f;
    --accent-soft: rgba(255, 59, 48, 0.16);
    --accent-2: #f2b705;
    --accent-2-soft: rgba(242, 183, 5, 0.24);
    --danger: #c1121f;
    --danger-soft: rgba(193, 18, 31, 0.14);
    --warn: #ff8c00;
    --warn-soft: rgba(255, 140, 0, 0.18);

    --font-display: "Bangers", "Comic Sans MS", cursive;
    --font-body: "Comic Neue", "Comic Sans MS", sans-serif;
    --radius-md: 8px;
    --radius-lg: 10px;
    --comic-ink: #1a1a1a;
    --shadow-sm: 4px 4px 0 var(--comic-ink);
    --shadow-md: 6px 6px 0 var(--comic-ink);
    --hex-opacity: 0;
}

/* =========================================================
   RESET / BASE
========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    color: var(--text);
    background: var(--bg);
    transition: background 240ms ease, color 240ms ease;
    position: relative;
}

img { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

button { cursor: pointer; }

h1, h2, h3 { font-family: var(--font-display); margin: 0; }

::selection { background: var(--accent-soft); }

/* honeycomb signature background, subtle, theme-aware */
.honeycomb-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 0 0, transparent 9px, var(--line) 9.6px, transparent 10.4px),
        radial-gradient(circle at 40px 0, transparent 9px, var(--line) 9.6px, transparent 10.4px);
    background-size: 80px 70px;
    opacity: var(--hex-opacity);
}

/* =========================================================
   LAYOUT
========================================================= */
.app-shell {
    max-width: 1440px;
    margin: 0 auto;
    padding: 18px 20px 40px;
}

/* =========================================================
   HEADER / NAV
========================================================= */
.app-header {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 14px 20px;
    margin-bottom: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.brand { display: flex; align-items: center; gap: 12px; }

.hex-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    font-size: 22px;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    background: linear-gradient(150deg, var(--accent-soft), var(--accent-2-soft));
    border: 1px solid var(--line-strong);
}

.brand-text h1 {
    font-size: 1.6rem;
    letter-spacing: -0.01em;
    color: var(--text);
}

.brand-text p {
    margin: 2px 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    letter-spacing: 0.03em;
}

.main-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}

.nav-btn {
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    padding: 9px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.88rem;
    white-space: nowrap;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.nav-btn:hover {
    background: var(--accent-soft);
    color: var(--text);
}

.nav-btn.active {
    background: var(--accent);
    color: var(--surface);
    border-color: var(--accent);
}

[data-theme="funny"] .nav-btn.active,
[data-theme="elegant"] .nav-btn.active {
    color: #ffffff;
}

.theme-btn {
    border: 1px solid var(--line-strong);
    background: var(--surface-2);
    color: var(--text);
    padding: 9px 16px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
    box-shadow: var(--shadow-sm);
}

.theme-btn:hover { border-color: var(--accent); }

/* =========================================================
   VIEWS
========================================================= */
.view { display: none; }
.view.active { display: block; animation: fadeIn 220ms ease; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.section-header h2 { font-size: 1.5rem; }

.hint-text {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 12px;
}

/* =========================================================
   BUTTONS
========================================================= */
.btn-primary, .btn-secondary {
    border-radius: var(--radius-md);
    padding: 11px 18px;
    font-weight: 800;
    font-size: 0.88rem;
    border: 1px solid transparent;
    box-shadow: var(--shadow-sm);
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #ffffff;
}
[data-theme="light"] .btn-primary,
[data-theme="funny"] .btn-primary { color: #2b1c00; }

.btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); }

.btn-secondary {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--line-strong);
}
.btn-secondary:hover { border-color: var(--accent); }

.btn-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--line-strong);
    background: var(--surface-2);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-icon:hover { border-color: var(--accent); }
.btn-icon.danger:hover { border-color: var(--danger); color: var(--danger); }

/* =========================================================
   CARDS / STAT GRID
========================================================= */
.card {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: 20px;
    margin-bottom: 18px;
    box-shadow: var(--shadow-sm);
}

.card h2 { font-size: 1.25rem; margin-bottom: 12px; }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.stat-card {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: 16px 16px 14px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.stat-hex {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 1.6rem;
    color: var(--accent-soft);
}

.stat-card h3 {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-weight: 800;
    margin-bottom: 8px;
}

.stat-value {
    display: block;
    font-size: 2.1rem;
    font-weight: 800;
    font-family: var(--font-display);
    color: var(--text);
}

.stat-sub { font-size: 0.8rem; color: var(--text-muted); }

.stat-hives .stat-value { color: var(--accent-2); }
.stat-due .stat-value { color: var(--warn); }
.stat-honey .stat-value { color: var(--accent); }
.stat-varroa .stat-value { color: var(--danger); }

.dash-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.list-simple { display: flex; flex-direction: column; gap: 8px; }

.list-simple .list-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    font-size: 0.88rem;
}

.list-simple .list-row .tag { font-weight: 700; color: var(--text-muted); font-size: 0.78rem; }

.list-empty { color: var(--text-muted); font-size: 0.88rem; padding: 6px 2px; }

/* weather */
.weather-form { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.weather-form input {
    flex: 1 1 260px;
    min-width: 200px;
}
.weather-result {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}
.weather-result .weather-chip {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 0.9rem;
}
.weather-result .weather-chip strong { display: block; font-size: 1.1rem; }

/* =========================================================
   FORM ELEMENTS
========================================================= */
input, select, textarea {
    width: 100%;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--text);
    padding: 11px 12px;
    outline: none;
}

input::placeholder, textarea::placeholder { color: var(--text-muted); }

input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

textarea { min-height: 90px; resize: vertical; line-height: 1.5; }

.filter-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.filter-bar input { flex: 1 1 260px; }
.filter-bar select { flex: 0 1 220px; }

/* =========================================================
   HIVE GRID (Stockkarten)
========================================================= */
.hive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.hive-card {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: 18px;
    box-shadow: var(--shadow-sm);
}

.hive-card::before {
    content: "⬡";
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 1.4rem;
    color: var(--accent-soft);
}

.hive-card h3 {
    font-size: 1.25rem;
    margin-bottom: 4px;
    padding-right: 30px;
}

.hive-status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    margin-bottom: 10px;
    background: var(--accent-2-soft);
    color: var(--accent-2);
}
.hive-status-badge.status-winter { background: var(--accent-soft); color: var(--accent); }
.hive-status-badge.status-schwarm { background: var(--warn-soft); color: var(--warn); }
.hive-status-badge.status-aufgeloest { background: var(--danger-soft); color: var(--danger); }

.hive-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.86rem;
    color: var(--text-soft);
    margin-bottom: 12px;
}
.hive-meta span b { color: var(--text-muted); font-weight: 700; }

.hive-counts {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.hive-counts span {
    background: var(--surface-2);
    border-radius: 8px;
    padding: 4px 8px;
}

.hive-card-actions { display: flex; gap: 8px; }

.empty-state {
    text-align: center;
    padding: 40px 18px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
}
.empty-state .empty-icon { font-size: 2rem; margin-bottom: 8px; }
.empty-state h3 { color: var(--text); margin-bottom: 6px; }

/* =========================================================
   TABLES
========================================================= */
.table-wrapper {
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

table { width: 100%; min-width: 760px; border-collapse: collapse; }

th, td {
    text-align: left;
    padding: 12px 12px;
    border-bottom: 1px solid var(--line);
    font-size: 0.88rem;
    vertical-align: top;
}

th {
    background: var(--surface-2);
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    font-weight: 800;
    white-space: nowrap;
}

tbody tr:hover { background: var(--surface-2); }

.badge-pill {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    background: var(--surface-2);
    color: var(--text-soft);
    white-space: nowrap;
}
.badge-pill.warn { background: var(--warn-soft); color: var(--warn); }
.badge-pill.danger { background: var(--danger-soft); color: var(--danger); }
.badge-pill.ok { background: var(--accent-2-soft); color: var(--accent-2); }

.row-actions { display: flex; gap: 6px; }

/* =========================================================
   CARE TABS (Ernte / Behandlung)
========================================================= */
.care-tabs, .wiki-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.care-tab-btn, .wiki-tab-btn {
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--text-muted);
    padding: 9px 16px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.86rem;
}

.care-tab-btn.active, .wiki-tab-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
[data-theme="light"] .care-tab-btn.active,
[data-theme="funny"] .care-tab-btn.active,
[data-theme="light"] .wiki-tab-btn.active,
[data-theme="funny"] .wiki-tab-btn.active { color: #2b1c00; }

.care-panel { display: none; }
.care-panel.active { display: block; }

/* =========================================================
   WIKI
========================================================= */
.wiki-search { margin-bottom: 14px; }

.wiki-content { display: flex; flex-direction: column; gap: 12px; }

.wiki-entry {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
}

.wiki-entry h3 {
    font-size: 1.15rem;
    margin-bottom: 6px;
    color: var(--accent);
}

.wiki-entry .wiki-tagline {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 10px;
    font-style: italic;
}

.wiki-entry dl { margin: 0; }
.wiki-entry dt { font-weight: 800; color: var(--text-soft); margin-top: 8px; font-size: 0.85rem; }
.wiki-entry dd { margin: 2px 0 0; color: var(--text); line-height: 1.55; font-size: 0.92rem; }

.wiki-month-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.wiki-month-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
}
.wiki-month-card h3 { font-size: 1.05rem; margin-bottom: 8px; color: var(--accent-2); }
.wiki-month-card ul { margin: 0; padding-left: 18px; font-size: 0.86rem; line-height: 1.6; color: var(--text-soft); }

.wiki-no-results { color: var(--text-muted); text-align: center; padding: 30px; }

/* =========================================================
   DIALOGS
========================================================= */
.app-dialog {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    padding: 0;
    max-width: 640px;
    width: min(94vw, 640px);
    box-shadow: var(--shadow-md);
}

.app-dialog::backdrop {
    background: rgba(10, 12, 10, 0.55);
    backdrop-filter: blur(2px);
}

.dialog-form { padding: 22px 24px 20px; }
.dialog-form h3 { margin-bottom: 14px; font-size: 1.4rem; }

.dialog-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.dialog-grid label,
.full-width {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}

/* Theme dialog */
.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 8px;
}

.theme-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border: 2px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    padding: 14px;
    font-weight: 700;
    font-size: 0.86rem;
    color: var(--text);
}

.theme-option:hover { border-color: var(--accent); }
.theme-option.selected { border-color: var(--accent); background: var(--accent-soft); }

.theme-swatch {
    width: 100%;
    height: 46px;
    border-radius: 10px;
    border: 1px solid var(--line);
}

.theme-swatch-light { background: linear-gradient(135deg, #f6f3ec, #d98f2b); }
.theme-swatch-dark { background: linear-gradient(135deg, #14161a, #e0a437); }
.theme-swatch-elegant { background: linear-gradient(135deg, #161d18, #c9a227); }
.theme-swatch-funny { background: linear-gradient(135deg, #fff6d8, #ff9d00); }
.theme-swatch-comic { background: repeating-linear-gradient(135deg, #fffef4 0 10px, #ffe14d 10px 20px); border: 2px solid #1a1a1a; }

/* =========================================================
   FOOTER
========================================================= */
.app-footer {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.78rem;
    padding: 20px 10px 6px;
    line-height: 1.5;
}

/* =========================================================
   COMIC THEME – BOLD OUTLINES, HALFTONE, HARD SHADOWS
========================================================= */
[data-theme="comic"] .honeycomb-bg {
    background-image: radial-gradient(circle, var(--comic-ink) 1.6px, transparent 1.8px);
    background-size: 16px 16px;
    opacity: 0.05;
}

[data-theme="comic"] h1,
[data-theme="comic"] h2,
[data-theme="comic"] h3 {
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

[data-theme="comic"] .brand-text h1 {
    font-size: 1.9rem;
    -webkit-text-stroke: 0.5px var(--comic-ink);
}

[data-theme="comic"] .hex-badge {
    clip-path: none;
    border-radius: 999px;
    border: 3px solid var(--comic-ink);
    background: var(--accent-2-soft);
}

[data-theme="comic"] .app-header,
[data-theme="comic"] .card,
[data-theme="comic"] .stat-card,
[data-theme="comic"] .hive-card,
[data-theme="comic"] .table-wrapper,
[data-theme="comic"] .app-dialog,
[data-theme="comic"] .wiki-entry,
[data-theme="comic"] .wiki-month-card,
[data-theme="comic"] .empty-state,
[data-theme="comic"] .list-simple .list-row,
[data-theme="comic"] .weather-result .weather-chip {
    border: 3px solid var(--comic-ink);
    box-shadow: var(--shadow-sm);
}

[data-theme="comic"] .empty-state { border-style: dashed; box-shadow: none; }

[data-theme="comic"] .btn-primary,
[data-theme="comic"] .btn-secondary,
[data-theme="comic"] .btn-icon,
[data-theme="comic"] .nav-btn.active,
[data-theme="comic"] .care-tab-btn.active,
[data-theme="comic"] .wiki-tab-btn.active,
[data-theme="comic"] .theme-btn,
[data-theme="comic"] .theme-option {
    border: 2px solid var(--comic-ink);
    box-shadow: 3px 3px 0 var(--comic-ink);
}

[data-theme="comic"] .btn-primary:hover,
[data-theme="comic"] .btn-secondary:hover,
[data-theme="comic"] .btn-icon:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--comic-ink);
    filter: none;
}

[data-theme="comic"] .btn-primary:active,
[data-theme="comic"] .btn-secondary:active,
[data-theme="comic"] .btn-icon:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--comic-ink);
}

[data-theme="comic"] .stat-hex { color: var(--accent-2); opacity: 0.6; }
[data-theme="comic"] .hive-card::before { color: var(--accent-2); opacity: 0.7; }

[data-theme="comic"] input,
[data-theme="comic"] select,
[data-theme="comic"] textarea {
    border: 2px solid var(--comic-ink);
    border-radius: 8px;
}

[data-theme="comic"] input:focus,
[data-theme="comic"] select:focus,
[data-theme="comic"] textarea:focus {
    box-shadow: 3px 3px 0 var(--comic-ink);
}

[data-theme="comic"] .badge-pill {
    border: 2px solid var(--comic-ink);
    font-weight: 800;
}

[data-theme="comic"] .hive-status-badge {
    border: 2px solid var(--comic-ink);
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 980px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .dash-columns { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .app-header { flex-direction: column; align-items: stretch; }
    .main-nav { margin-left: 0; }
    .dialog-grid { grid-template-columns: 1fr; }
    .theme-grid { grid-template-columns: 1fr; }
    table { min-width: 640px; }
}

@media (max-width: 480px) {
    .app-shell { padding: 12px 10px 30px; }
    .stat-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =========================================================
   HEADER-AKTIONEN (Sicherung + Theme)
========================================================= */
.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.backup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 4px;
}

.backup-actions button {
    flex: 1 1 180px;
}

/* =========================================================
   TASTATURFOKUS
   Bisher gab es keine einzige :focus-visible-Regel – wer per Tab
   navigiert, sieht in den dunklen Themes praktisch nichts.
========================================================= */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.view:focus-visible {
    outline: none;
}

/* =========================================================
   DRUCK / STOCKBUCH-AUSDRUCK
   Behandlungen sollten sich für Ordner und Kontrollen ausdrucken
   lassen. Gedruckt wird immer die gerade sichtbare Ansicht.
========================================================= */
@media print {
    :root,
    [data-theme] {
        --bg: #ffffff;
        --bg-2: #ffffff;
        --surface: #ffffff;
        --surface-2: #ffffff;
        --text: #000000;
        --text-soft: #1a1a1a;
        --text-muted: #444444;
        --line: #999999;
        --line-strong: #333333;
        --shadow-sm: none;
        --shadow-md: none;
        --hex-opacity: 0;
    }

    body {
        background: #ffffff;
        color: #000000;
        font-family: Georgia, "Times New Roman", serif;
    }

    .honeycomb-bg,
    .main-nav,
    .header-actions,
    .filter-bar,
    .section-header button,
    .care-tabs,
    .wiki-tabs,
    .wiki-search,
    .row-actions,
    .hive-card-actions,
    .weather-form,
    .app-dialog,
    .empty-state {
        display: none !important;
    }

    .app-shell {
        padding: 0;
        max-width: none;
    }

    .app-header {
        border: none;
        box-shadow: none;
        padding: 0 0 12px;
        margin-bottom: 16px;
        border-bottom: 2px solid #000000;
    }

    .card,
    .stat-card,
    .hive-card,
    .table-wrapper,
    .wiki-entry,
    .wiki-month-card {
        border: 1px solid #999999;
        box-shadow: none;
        break-inside: avoid;
    }

    .stat-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .table-wrapper {
        overflow: visible;
    }

    table {
        min-width: 0;
        width: 100%;
        font-size: 10pt;
    }

    thead {
        display: table-header-group;
    }

    tr {
        break-inside: avoid;
    }

    .app-footer {
        margin-top: 16px;
        border-top: 1px solid #999999;
        font-size: 8pt;
    }

    @page {
        margin: 14mm;
    }
}

/* =========================================================
   KÖNIGIN – ZEICHENFARBE & PLAKETTE
========================================================= */
.queen-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--line-strong);
    font-size: 10px;
    font-weight: 700;
    vertical-align: -4px;
    line-height: 1;
}

.queen-plakette { pointer-events: none; }

.queen-hint {
    margin: 4px 0 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    min-height: 1.2em;
}
.queen-hint.ok { color: var(--accent-2); }
.queen-hint.warn { color: var(--danger); font-weight: 700; }

.hive-warn {
    color: var(--danger);
    font-weight: 700;
    font-size: 0.88rem;
}

.warn-tag {
    background: var(--warn-soft);
    color: var(--warn);
    font-weight: 700;
}

/* =========================================================
   BEWERTUNGSSKALA −− bis ++
   Große Flächen: bedienbar mit Handschuh oder klebrigem Finger.
========================================================= */
.scale-block {
    margin: 14px 0 4px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-2);
}

.scale-block legend {
    padding: 0 6px;
    font-weight: 700;
    color: var(--text-soft);
}

.scale-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 0;
}

.scale-row + .scale-row { border-top: 1px solid var(--line); }

.scale-label {
    display: flex;
    flex-direction: column;
    font-weight: 700;
}

.scale-label small {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.scale-options { display: flex; gap: 6px; }

.scale-btn {
    min-width: 52px;
    min-height: 48px;
    border: 2px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text-soft);
    font-weight: 700;
    font-size: 1.05rem;
}

.scale-btn:hover { border-color: var(--accent); }

.scale-btn.selected {
    background: var(--accent);
    border-color: var(--accent-strong);
    color: #ffffff;
}

.scale-chip {
    display: inline-block;
    min-width: 34px;
    padding: 2px 8px;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-weight: 700;
}

/* =========================================================
   FOLGEMASSNAHMEN
========================================================= */
.followup-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }

.followup-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    cursor: pointer;
}

.followup-item input { width: 22px; height: 22px; margin-top: 2px; flex: none; }
.followup-item span { display: flex; flex-direction: column; gap: 2px; }
.followup-item small { color: var(--text-muted); }

.list-row.overdue { border-left: 4px solid var(--danger); }
.row-reason { display: block; color: var(--text-muted); font-size: 0.82rem; }
.row-right { display: inline-flex; align-items: center; gap: 8px; flex: none; }

/* =========================================================
   IMKERWETTER
========================================================= */
.bee-forecast { margin-top: 14px; overflow-x: auto; }

.forecast-table {
    width: 100%;
    min-width: 460px;
    border-collapse: collapse;
}

.forecast-table caption {
    text-align: left;
    padding-bottom: 8px;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.forecast-table th,
.forecast-table td {
    padding: 8px 6px;
    border-bottom: 1px solid var(--line);
    text-align: center;
}

.forecast-table th[scope="row"] {
    text-align: left;
    white-space: nowrap;
    font-weight: 700;
}

.fc-day { display: block; font-weight: 700; }
.fc-temp { display: block; color: var(--text-muted); font-size: 0.82rem; }

.fc-dot { font-size: 1.25rem; line-height: 1; }
.fc-gut { color: var(--accent-2); }
.fc-bedingt { color: var(--warn); }
.fc-schlecht { color: var(--text-muted); opacity: 0.55; }
.fc-aus-saison { color: var(--text-muted); opacity: 0.3; }

.fc-legend {
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.disclaimer {
    margin-top: 10px;
    padding: 10px 12px;
    border-left: 3px solid var(--warn);
    background: var(--warn-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* =========================================================
   SPRACHEINGABE
========================================================= */
.voice-btn {
    min-width: 48px;
    min-height: 48px;
    border: 2px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    font-size: 1.15rem;
    flex: none;
}

.voice-btn:hover { border-color: var(--accent); }

.voice-btn.listening {
    background: var(--danger);
    border-color: var(--danger);
    animation: voicePulse 1.1s ease-in-out infinite;
}

@keyframes voicePulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--danger-soft); }
    50% { box-shadow: 0 0 0 8px var(--danger-soft); }
}

.label-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: -40px;
    position: relative;
    z-index: 1;
    padding-right: 6px;
    pointer-events: none;
}

.label-row .voice-btn { pointer-events: auto; }

.label-row + textarea { padding-top: 54px; }

.filter-bar .voice-btn { flex: none; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 720px) {
    .scale-row { flex-direction: column; align-items: stretch; }
    .scale-options { justify-content: space-between; }
    .scale-btn { flex: 1; }
}

/* =========================================================
   SYNC
========================================================= */
.sync-badge { font-size: 1.05rem; line-height: 1; }
.sync-badge.sync-ok { color: var(--accent-2); }
.sync-badge.sync-fehler { color: var(--danger); }
.sync-badge.sync-laeuft { color: var(--accent); animation: syncSpin 1.2s linear infinite; display: inline-block; }

@keyframes syncSpin { to { transform: rotate(360deg); } }

.sync-status {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    font-size: 0.9rem;
    min-height: 1.2em;
}
.sync-status.sync-ok { border-left: 3px solid var(--accent-2); }
.sync-status.sync-fehler { border-left: 3px solid var(--danger); }
.sync-status.sync-laeuft { border-left: 3px solid var(--accent); }

.switch-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin: 12px 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    cursor: pointer;
    font-weight: 700;
}
.switch-row input { width: 24px; height: 24px; }

/* =========================================================
   DOKUMENTE
========================================================= */
.doc-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }

.doc-section {
    margin: 8px 0 0;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--line);
    font-size: 1.15rem;
}

.doc-card {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.doc-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.doc-head h3 { font-size: 1.1rem; }

.doc-when { margin: 0 0 8px; font-weight: 700; color: var(--accent-strong); }
.doc-law { margin: 8px 0 0; color: var(--text-muted); font-size: 0.85rem; font-style: italic; }

.doc-stand {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
    color: var(--text-muted);
    font-size: 0.82rem;
}

.doc-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.doc-actions a { text-decoration: none; display: inline-flex; align-items: center; }

.doc-prefill {
    flex: 1 1 100%;
    padding: 12px;
    border-left: 3px solid var(--accent-2);
    background: var(--accent-2-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.doc-prefill small { display: block; margin-top: 6px; color: var(--text-muted); }

.doc-warn {
    padding: 12px 14px;
    margin: 12px 0;
    border-left: 3px solid var(--warn);
    background: var(--warn-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.doc-warn ul { margin: 8px 0 0; padding-left: 20px; }
.doc-warn li { margin-bottom: 4px; }

.doc-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.bestandsbuch { font-size: 0.9rem; }
.bestandsbuch caption {
    text-align: left;
    padding-bottom: 8px;
    font-weight: 700;
}

/* Beim Drucken des Bestandsbuchs alles andere ausblenden */
@media print {
    body.print-bestandsbuch .view:not(#view-dokumente),
    body.print-bestandsbuch .doc-list,
    body.print-bestandsbuch .doc-toolbar,
    body.print-bestandsbuch .disclaimer {
        display: none !important;
    }
    body.print-bestandsbuch #view-dokumente { display: block !important; }
    .bestandsbuch { font-size: 9pt; }
    .bestandsbuch th, .bestandsbuch td { border: 1px solid #999999; padding: 4px 5px; }
}

/* =========================================================
   DOKUMENTENAUSWAHL UND EXPORT
========================================================= */
.doc-export-bar {
    position: sticky;
    top: 8px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-md);
    font-weight: 700;
}

.doc-export-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.doc-export-bar button:disabled { opacity: 0.45; cursor: not-allowed; }

.doc-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.doc-body { flex: 1; min-width: 0; }

.doc-select { flex: none; padding-top: 2px; cursor: pointer; }
.doc-select input { width: 24px; height: 24px; cursor: pointer; }

.doc-badges { display: inline-flex; gap: 6px; flex-wrap: wrap; }

.badge-pill.ok { background: var(--accent-2-soft); color: var(--accent-2); }
.badge-pill.warn { background: var(--warn-soft); color: var(--warn); }

.doc-beitrag { margin: 6px 0; font-weight: 700; }

.doc-unsicher { border-left: 4px solid var(--warn); }

@media (max-width: 720px) {
    .doc-export-bar { position: static; }
    .doc-export-actions { width: 100%; }
    .doc-export-actions button { flex: 1 1 140px; }
}

@media print {
    .doc-export-bar, .doc-select { display: none !important; }
}

/* =========================================================
   FÖRDERCHECK
========================================================= */
.foerder-check { padding: 18px; margin-bottom: 18px; }

.check-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
    margin: 14px 0;
}

.check-summary div {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    text-align: center;
}

.check-summary b { display: block; font-size: 1.5rem; line-height: 1.2; }
.check-summary span { color: var(--text-muted); font-size: 0.82rem; }

.check-zeile { color: var(--text-muted); margin: 0 0 14px; font-weight: 700; }

.check-card {
    padding: 14px 16px;
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-left-width: 4px;
    border-radius: var(--radius-md);
    background: var(--surface-2);
}

.check-pflicht { border-left-color: var(--danger); }
.check-foerderung { border-left-color: var(--accent-2); }
.check-hinweis { border-left-color: var(--warn); }

.check-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.check-head h4 { margin: 0; font-size: 1.02rem; }

.check-grund { margin: 0 0 8px; }

.check-schritt {
    margin: 8px 0 0;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    background: var(--surface);
    font-size: 0.92rem;
}

.check-unsicher {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-style: italic;
}

.check-card a { margin-top: 10px; display: inline-flex; text-decoration: none; }

@media print { .foerder-check { display: none !important; } }

/* =========================================================
   START-HINWEIS
   Erscheint nur, wenn etwas wirklich nicht stimmt.
========================================================= */
.start-hinweis {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    line-height: 1.5;
    border-bottom: 3px solid;
}

.start-hinweis-text { flex: 1; }
.start-hinweis code {
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.12);
    font-size: 0.92em;
}

.start-hinweis-close {
    flex: none;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.10);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: inherit;
}

.start-fehler {
    background: #b3121f;
    border-color: #7d0c16;
    color: #fff;
}

.start-warn {
    background: #f0c419;
    border-color: #c19a0d;
    color: #3a2c00;
}

@media print { .start-hinweis { display: none !important; } }

/* =========================================================
   NEUE THEMES – Next2Bee
   Vier Stimmungen mit eigenen Hintergrundebenen.
   Alle Effekte respektieren prefers-reduced-motion (siehe unten).
========================================================= */

/* ---------------------------------------------------------
   BAYERN – Rautenflagge, Weißblau, Wiesn
--------------------------------------------------------- */
[data-theme="bayern"] {
    --bg: #eef4fb;
    --bg-2: #dce9f7;
    --surface: #ffffff;
    --surface-2: #f2f7fd;
    --text: #12233a;
    --text-soft: #26405f;
    --text-muted: #5b7796;
    --line: rgba(18, 35, 58, 0.14);
    --line-strong: rgba(18, 35, 58, 0.24);

    --accent: #0f5fa8;
    --accent-strong: #0a4a85;
    --accent-soft: rgba(15, 95, 168, 0.14);
    --accent-2: #1c7a4a;
    --accent-2-soft: rgba(28, 122, 74, 0.14);
    --danger: #b3121f;
    --danger-soft: rgba(179, 18, 31, 0.12);
    --warn: #c08a00;
    --warn-soft: rgba(192, 138, 0, 0.16);

    --font-display: "Cormorant Garamond", Georgia, serif;
    --font-body: "Segoe UI", Verdana, sans-serif;
    --radius-md: 12px;
    --radius-lg: 18px;
    --shadow-sm: 0 6px 16px rgba(15, 60, 110, 0.10);
    --shadow-md: 0 16px 36px rgba(15, 60, 110, 0.16);
    --hex-opacity: 0.04;

    --bayern-blau: #4a90d9;
}

/* Wei-blaue Rauten, diagonal gekachelt */
[data-theme="bayern"] body,
body[data-theme="bayern"] {
    background:
        linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 100%);
}

[data-theme="bayern"] .honeycomb-bg {
    opacity: 1;
    /* Wittelsbacher Rauten: Fusili im Verhaeltnis 132:92, also
       deutlich breiter als hoch. Vollflaechig abwechselnd statt
       gekreuzter Streifen - das war der Karo-Eindruck.
       Darunter eine Alpenkette als ruhiger unterer Abschluss. */
    background-image:
        url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22132%22 height=%2292%22 viewBox=%220 0 132 92%22%3E %3Crect width=%22132%22 height=%2292%22 fill=%22%230f5fa8%22 fill-opacity=%220.16%22/%3E %3Cpolygon points=%220.0,-46.0 66.0,0.0 0.0,46.0 -66.0,0.0%22 fill=%22%23ffffff%22 fill-opacity=%220.55%22/%3E%3Cpolygon points=%22132.0,-46.0 198.0,0.0 132.0,46.0 66.0,0.0%22 fill=%22%23ffffff%22 fill-opacity=%220.55%22/%3E%3Cpolygon points=%220.0,46.0 66.0,92.0 0.0,138.0 -66.0,92.0%22 fill=%22%23ffffff%22 fill-opacity=%220.55%22/%3E%3Cpolygon points=%22132.0,46.0 198.0,92.0 132.0,138.0 66.0,92.0%22 fill=%22%23ffffff%22 fill-opacity=%220.55%22/%3E%3Cpolygon points=%2266.0,0.0 132.0,46.0 66.0,92.0 0.0,46.0%22 fill=%22none%22 stroke=%22%230f5fa8%22 stroke-opacity=%220.20%22 stroke-width=%221%22/%3E%3C/svg%3E'),
        url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%221600%22 height=%22340%22 viewBox=%220 0 1600 340%22 preserveAspectRatio=%22none%22%3E %3Cpath d=%22M0,340 L0,230 L90,210 L180,96 L250,150 L330,54 L430,138 L520,92 L610,168 L700,70 L800,148 L900,88 L1010,160 L1100,100 L1200,176 L1300,110 L1420,182 L1520,128 L1600,230 L1600,340 Z%22 fill=%22%230f5fa8%22 fill-opacity=%220.13%22/%3E %3Cpath d=%22M0,340 L0,280 L120,268 L230,196 L340,244 L470,172 L580,236 L700,190 L830,250 L950,186 L1080,244 L1210,198 L1340,254 L1480,206 L1600,280 L1600,340 Z%22 fill=%22%230a4a85%22 fill-opacity=%220.16%22/%3E%3C/svg%3E'),
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255,255,255,0.55), transparent 62%);
    background-size: 132px 92px, 100% 42vh, 100% 100%;
    background-position: 0 0, bottom center, top center;
    background-repeat: repeat, no-repeat, no-repeat;
}

/* Bandschleife oben am Kopfbereich */
[data-theme="bayern"] .app-header {
    position: relative;
    overflow: hidden;
    border-top: 5px solid transparent;
    border-image: repeating-linear-gradient(
        90deg,
        #ffffff 0 22px,
        var(--bayern-blau) 22px 44px
    ) 5;
}

[data-theme="bayern"] .app-header::after {
    content: "";
    position: absolute;
    right: -60px;
    top: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(74, 144, 217, 0.18), transparent 66%);
    pointer-events: none;
}

[data-theme="bayern"] .brand-text h1 {
    background: linear-gradient(135deg, #0f5fa8 0%, #4a90d9 50%, #0f5fa8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: 0.01em;
}

[data-theme="bayern"] .stat-card,
[data-theme="bayern"] .hive-card {
    border-top: 3px solid var(--bayern-blau);
}

[data-theme="bayern"] .btn-primary {
    background: linear-gradient(160deg, #1a6fbd, #0a4a85);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(10, 74, 133, 0.28);
}

[data-theme="bayern"] .nav-btn.active {
    background: linear-gradient(160deg, #1a6fbd, #0f5fa8);
    color: #ffffff;
}

/* ---------------------------------------------------------
   NOBEL HELL – Papier, Gold, feine Linien
--------------------------------------------------------- */
[data-theme="nobelhell"] {
    --bg: #f7f4ee;
    --bg-2: #efe9df;
    --surface: #fffdf9;
    --surface-2: #f6f1e8;
    --text: #241f18;
    --text-soft: #3d3529;
    --text-muted: #7a6f5f;
    --line: rgba(36, 31, 24, 0.10);
    --line-strong: rgba(36, 31, 24, 0.18);

    --accent: #9a7521;
    --accent-strong: #7d5d14;
    --accent-soft: rgba(154, 117, 33, 0.12);
    --accent-2: #4a6350;
    --accent-2-soft: rgba(74, 99, 80, 0.12);
    --danger: #8f2f2f;
    --danger-soft: rgba(143, 47, 47, 0.10);
    --warn: #9c7508;
    --warn-soft: rgba(156, 117, 8, 0.12);

    --font-display: "Cormorant Garamond", Georgia, serif;
    --font-body: "Segoe UI", Verdana, sans-serif;
    --radius-md: 4px;
    --radius-lg: 6px;
    --shadow-sm: 0 2px 10px rgba(36, 31, 24, 0.06);
    --shadow-md: 0 10px 34px rgba(36, 31, 24, 0.10);
    --hex-opacity: 0.03;

    --gold: linear-gradient(135deg, #c9a961 0%, #f0dfa8 30%, #a8863c 60%, #e5cf90 100%);
}

[data-theme="nobelhell"] .honeycomb-bg {
    opacity: 1;
    /* Guilloche-Rosette wie die Ornamente auf Wertpapieren und
       Zifferblaettern: 44 gegeneinander verdrehte Ellipsen. */
    background-image:
        url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22900%22 height=%22900%22 viewBox=%220 0 900 900%22%3E %3Cdefs%3E %3Cellipse id=%22a%22 cx=%22450%22 cy=%22450%22 rx=%22414%22 ry=%22180%22/%3E %3Cellipse id=%22b%22 cx=%22450%22 cy=%22450%22 rx=%22215%22 ry=%2275%22/%3E %3C/defs%3E %3Cg fill=%22none%22 stroke=%22%23b0945a%22 stroke-opacity=%220.16%22 stroke-width=%221%22%3E%3Cuse href=%22%23a%22 transform=%22rotate(0.0 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(8.2 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(16.4 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(24.5 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(32.7 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(40.9 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(49.1 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(57.3 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(65.5 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(73.6 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(81.8 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(90.0 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(98.2 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(106.4 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(114.5 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(122.7 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(130.9 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(139.1 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(147.3 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(155.5 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(163.6 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(171.8 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(180.0 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(188.2 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(196.4 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(204.5 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(212.7 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(220.9 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(229.1 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(237.3 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(245.5 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(253.6 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(261.8 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(270.0 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(278.2 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(286.4 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(294.5 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(302.7 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(310.9 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(319.1 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(327.3 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(335.5 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(343.6 450 450)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(351.8 450 450)%22/%3E%3C/g%3E %3Cg fill=%22none%22 stroke=%22%23b0945a%22 stroke-opacity=%220.22%22 stroke-width=%220.8%22%3E%3Cuse href=%22%23b%22 transform=%22rotate(4.0 450 450)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(20.4 450 450)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(36.7 450 450)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(53.1 450 450)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(69.5 450 450)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(85.8 450 450)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(102.2 450 450)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(118.5 450 450)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(134.9 450 450)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(151.3 450 450)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(167.6 450 450)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(184.0 450 450)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(200.4 450 450)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(216.7 450 450)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(233.1 450 450)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(249.5 450 450)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(265.8 450 450)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(282.2 450 450)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(298.5 450 450)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(314.9 450 450)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(331.3 450 450)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(347.6 450 450)%22/%3E%3C/g%3E %3C/svg%3E'),
        repeating-linear-gradient(0deg, rgba(36,31,24,0.022) 0 1px, transparent 1px 6px),
        radial-gradient(ellipse 80% 70% at 50% 30%, rgba(255,255,255,0.75), transparent 70%);
    background-size: min(78vmin, 720px) min(78vmin, 720px), 100% 6px, 100% 100%;
    background-position: center 42%, 0 0, center;
    background-repeat: no-repeat, repeat, no-repeat;
}

[data-theme="nobelhell"] .app-header {
    position: relative;
    border: 1px solid rgba(154, 117, 33, 0.28);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), var(--shadow-sm);
}

/* Goldene Haarlinie unter dem Kopf */
[data-theme="nobelhell"] .app-header::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 0;
    height: 2px;
    background: var(--gold);
    opacity: 0.75;
}

[data-theme="nobelhell"] .brand-text h1 {
    background: var(--gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 500;
    letter-spacing: 0.06em;
}

[data-theme="nobelhell"] .card,
[data-theme="nobelhell"] .stat-card,
[data-theme="nobelhell"] .hive-card {
    border: 1px solid rgba(154, 117, 33, 0.18);
    background-image: linear-gradient(170deg, rgba(255, 255, 255, 0.65), transparent 40%);
}

[data-theme="nobelhell"] .stat-card::before,
[data-theme="nobelhell"] .hive-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: var(--gold);
    opacity: 0.6;
}

[data-theme="nobelhell"] .stat-card,
[data-theme="nobelhell"] .hive-card { position: relative; }

[data-theme="nobelhell"] .btn-primary {
    background: var(--gold);
    color: #2b2109;
    border: 1px solid rgba(125, 93, 20, 0.35);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.88rem;
}

[data-theme="nobelhell"] h2,
[data-theme="nobelhell"] h3 { letter-spacing: 0.02em; font-weight: 500; }

/* ---------------------------------------------------------
   NOBEL DUNKEL – Anthrazit, Messing, Tiefe
--------------------------------------------------------- */
[data-theme="nobeldunkel"] {
    --bg: #0e0f12;
    --bg-2: #141619;
    --surface: #16181c;
    --surface-2: #1c1f24;
    --text: #ece8df;
    --text-soft: #cdc7ba;
    --text-muted: #8d8779;
    --line: rgba(201, 169, 97, 0.14);
    --line-strong: rgba(201, 169, 97, 0.26);

    --accent: #c9a961;
    --accent-strong: #e0c485;
    --accent-soft: rgba(201, 169, 97, 0.14);
    --accent-2: #7fa890;
    --accent-2-soft: rgba(127, 168, 144, 0.14);
    --danger: #cc6b6b;
    --danger-soft: rgba(204, 107, 107, 0.14);
    --warn: #d4ab52;
    --warn-soft: rgba(212, 171, 82, 0.14);

    --font-display: "Cormorant Garamond", Georgia, serif;
    --font-body: "Segoe UI", Verdana, sans-serif;
    --radius-md: 4px;
    --radius-lg: 6px;
    --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 18px 48px rgba(0, 0, 0, 0.6);
    --hex-opacity: 0.04;

    --gold: linear-gradient(135deg, #a8863c 0%, #f0dfa8 28%, #c9a961 55%, #8a6c2c 100%);
}

[data-theme="nobeldunkel"] .honeycomb-bg {
    opacity: 1;
    /* Art-deco-Faecher aus dem unteren Rand, darueber eine feinere
       Rosette in Messing auf Anthrazit. */
    background-image:
        url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%221000%22 height=%221000%22 viewBox=%220 0 1000 1000%22%3E %3Cdefs%3E %3Cellipse id=%22a%22 cx=%22500%22 cy=%22500%22 rx=%22440%22 ry=%22170%22/%3E %3Cellipse id=%22b%22 cx=%22500%22 cy=%22500%22 rx=%22228%22 ry=%2271%22/%3E %3C/defs%3E %3Cg fill=%22none%22 stroke=%22%23c9a961%22 stroke-opacity=%220.1%22 stroke-width=%221%22%3E%3Cuse href=%22%23a%22 transform=%22rotate(0.0 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(6.9 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(13.8 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(20.8 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(27.7 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(34.6 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(41.5 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(48.5 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(55.4 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(62.3 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(69.2 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(76.2 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(83.1 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(90.0 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(96.9 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(103.8 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(110.8 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(117.7 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(124.6 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(131.5 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(138.5 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(145.4 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(152.3 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(159.2 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(166.2 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(173.1 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(180.0 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(186.9 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(193.8 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(200.8 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(207.7 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(214.6 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(221.5 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(228.5 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(235.4 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(242.3 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(249.2 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(256.2 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(263.1 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(270.0 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(276.9 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(283.8 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(290.8 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(297.7 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(304.6 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(311.5 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(318.5 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(325.4 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(332.3 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(339.2 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(346.2 500 500)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(353.1 500 500)%22/%3E%3C/g%3E %3Cg fill=%22none%22 stroke=%22%23c9a961%22 stroke-opacity=%220.14%22 stroke-width=%220.8%22%3E%3Cuse href=%22%23b%22 transform=%22rotate(4.0 500 500)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(17.8 500 500)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(31.7 500 500)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(45.5 500 500)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(59.4 500 500)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(73.2 500 500)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(87.1 500 500)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(100.9 500 500)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(114.8 500 500)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(128.6 500 500)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(142.5 500 500)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(156.3 500 500)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(170.2 500 500)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(184.0 500 500)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(197.8 500 500)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(211.7 500 500)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(225.5 500 500)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(239.4 500 500)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(253.2 500 500)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(267.1 500 500)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(280.9 500 500)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(294.8 500 500)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(308.6 500 500)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(322.5 500 500)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(336.3 500 500)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(350.2 500 500)%22/%3E%3C/g%3E %3C/svg%3E'),
        url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%221400%22 height=%22760%22 viewBox=%220 0 1400 760%22 preserveAspectRatio=%22xMidYMax slice%22%3E %3Cg fill=%22none%22 stroke=%22%23c9a961%22 stroke-width=%221%22 stroke-opacity=%220.13%22%3E %3Cline x1=%22700%22 y1=%22790%22 x2=%22-438%22 y2=%22729%22/%3E%3Cline x1=%22700%22 y1=%22790%22 x2=%22-425%22 y2=%22606%22/%3E%3Cline x1=%22700%22 y1=%22790%22 x2=%22-398%22 y2=%22485%22/%3E%3Cline x1=%22700%22 y1=%22790%22 x2=%22-359%22 y2=%22368%22/%3E%3Cline x1=%22700%22 y1=%22790%22 x2=%22-307%22 y2=%22256%22/%3E%3Cline x1=%22700%22 y1=%22790%22 x2=%22-244%22 y2=%22151%22/%3E%3Cline x1=%22700%22 y1=%22790%22 x2=%22-169%22 y2=%2252%22/%3E%3Cline x1=%22700%22 y1=%22790%22 x2=%22-84%22 y2=%22-37%22/%3E%3Cline x1=%22700%22 y1=%22790%22 x2=%2210%22 y2=%22-117%22/%3E%3Cline x1=%22700%22 y1=%22790%22 x2=%22112%22 y2=%22-186%22/%3E%3Cline x1=%22700%22 y1=%22790%22 x2=%22221%22 y2=%22-244%22/%3E%3Cline x1=%22700%22 y1=%22790%22 x2=%22336%22 y2=%22-290%22/%3E%3Cline x1=%22700%22 y1=%22790%22 x2=%22455%22 y2=%22-323%22/%3E%3Cline x1=%22700%22 y1=%22790%22 x2=%22577%22 y2=%22-343%22/%3E%3Cline x1=%22700%22 y1=%22790%22 x2=%22700%22 y2=%22-350%22/%3E%3Cline x1=%22700%22 y1=%22790%22 x2=%22823%22 y2=%22-343%22/%3E%3Cline x1=%22700%22 y1=%22790%22 x2=%22945%22 y2=%22-323%22/%3E%3Cline x1=%22700%22 y1=%22790%22 x2=%221064%22 y2=%22-290%22/%3E%3Cline x1=%22700%22 y1=%22790%22 x2=%221179%22 y2=%22-244%22/%3E%3Cline x1=%22700%22 y1=%22790%22 x2=%221288%22 y2=%22-186%22/%3E%3Cline x1=%22700%22 y1=%22790%22 x2=%221390%22 y2=%22-117%22/%3E%3Cline x1=%22700%22 y1=%22790%22 x2=%221484%22 y2=%22-37%22/%3E%3Cline x1=%22700%22 y1=%22790%22 x2=%221569%22 y2=%2252%22/%3E%3Cline x1=%22700%22 y1=%22790%22 x2=%221644%22 y2=%22151%22/%3E%3Cline x1=%22700%22 y1=%22790%22 x2=%221707%22 y2=%22256%22/%3E%3Cline x1=%22700%22 y1=%22790%22 x2=%221759%22 y2=%22368%22/%3E%3Cline x1=%22700%22 y1=%22790%22 x2=%221798%22 y2=%22485%22/%3E%3Cline x1=%22700%22 y1=%22790%22 x2=%221825%22 y2=%22606%22/%3E%3Cline x1=%22700%22 y1=%22790%22 x2=%221838%22 y2=%22729%22/%3E%3C/g%3E %3Cg fill=%22none%22 stroke=%22%23c9a961%22 stroke-width=%221%22%3E %3Ccircle cx=%22700%22 cy=%22790%22 r=%22142%22 stroke-opacity=%220.202%22/%3E%3Ccircle cx=%22700%22 cy=%22790%22 r=%22285%22 stroke-opacity=%220.184%22/%3E%3Ccircle cx=%22700%22 cy=%22790%22 r=%22428%22 stroke-opacity=%220.166%22/%3E%3Ccircle cx=%22700%22 cy=%22790%22 r=%22570%22 stroke-opacity=%220.148%22/%3E%3Ccircle cx=%22700%22 cy=%22790%22 r=%22712%22 stroke-opacity=%220.130%22/%3E%3Ccircle cx=%22700%22 cy=%22790%22 r=%22855%22 stroke-opacity=%220.112%22/%3E%3Ccircle cx=%22700%22 cy=%22790%22 r=%22998%22 stroke-opacity=%220.094%22/%3E%3C/g%3E%3C/svg%3E'),
        radial-gradient(ellipse at 20% 0%, rgba(201,169,97,0.10), transparent 48%),
        radial-gradient(ellipse at 80% 100%, rgba(96,122,148,0.10), transparent 52%);
    background-size: min(70vmin, 640px) min(70vmin, 640px), 100% 62vh, 100% 100%, 100% 100%;
    background-position: center 34%, bottom center, top left, bottom right;
    background-repeat: no-repeat;
}

[data-theme="nobeldunkel"] .app-header {
    position: relative;
    border: 1px solid rgba(201, 169, 97, 0.22);
    background-image: linear-gradient(160deg, rgba(201, 169, 97, 0.07), transparent 55%);
}

[data-theme="nobeldunkel"] .app-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--gold);
    opacity: 0.55;
}

[data-theme="nobeldunkel"] .brand-text h1 {
    background: var(--gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 500;
    letter-spacing: 0.07em;
    filter: drop-shadow(0 2px 10px rgba(201, 169, 97, 0.22));
}

[data-theme="nobeldunkel"] .card,
[data-theme="nobeldunkel"] .stat-card,
[data-theme="nobeldunkel"] .hive-card {
    background-image: linear-gradient(165deg, rgba(255, 255, 255, 0.035), transparent 42%);
    border: 1px solid rgba(201, 169, 97, 0.16);
}

[data-theme="nobeldunkel"] .stat-card:hover,
[data-theme="nobeldunkel"] .hive-card:hover {
    border-color: rgba(201, 169, 97, 0.38);
    box-shadow: 0 0 0 1px rgba(201, 169, 97, 0.16), var(--shadow-md);
}

[data-theme="nobeldunkel"] .btn-primary {
    background: var(--gold);
    color: #171308;
    border: 1px solid rgba(201, 169, 97, 0.45);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.88rem;
}

[data-theme="nobeldunkel"] .nav-btn.active {
    background: rgba(201, 169, 97, 0.16);
    color: var(--accent-strong);
    box-shadow: inset 0 -2px 0 var(--accent);
}

/* ---------------------------------------------------------
   BIENE – Waben, Honig, Nektar
--------------------------------------------------------- */
[data-theme="biene"] {
    --bg: #fdf6e3;
    --bg-2: #f8ead0;
    --surface: #fffdf6;
    --surface-2: #fdf4e0;
    --text: #33240a;
    --text-soft: #4d3a14;
    --text-muted: #85703f;
    --line: rgba(51, 36, 10, 0.14);
    --line-strong: rgba(51, 36, 10, 0.24);

    --accent: #d99411;
    --accent-strong: #b3760a;
    --accent-soft: rgba(217, 148, 17, 0.16);
    --accent-2: #5d7c34;
    --accent-2-soft: rgba(93, 124, 52, 0.16);
    --danger: #ad3520;
    --danger-soft: rgba(173, 53, 32, 0.12);
    --warn: #c08606;
    --warn-soft: rgba(192, 134, 6, 0.18);

    --font-display: "Cormorant Garamond", Georgia, serif;
    --font-body: "Segoe UI", Verdana, sans-serif;
    --radius-md: 16px;
    --radius-lg: 24px;
    --shadow-sm: 0 6px 18px rgba(120, 82, 10, 0.12);
    --shadow-md: 0 16px 40px rgba(120, 82, 10, 0.18);
    --hex-opacity: 1;

    --wabe: rgba(217, 148, 17, 0.16);
}

/* Echtes Wabenmuster aus zwei versetzten Rasterlagen */
[data-theme="biene"] .honeycomb-bg {
    opacity: 1;
    /* Geometrisch korrekte Sechsecke im versetzten Raster
       (Breite = Wurzel3 mal Seite, Zeilenabstand = 1,5 mal Seite),
       darunter einzelne gefuellte Zellen fuer Tiefe. */
    background-image:
        url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2258.9%22 height=%22102.0%22 viewBox=%220 0 58.9 102.0%22%3E %3Cg fill=%22%23d99411%22 fill-opacity=%220.05%22 stroke=%22%23d99411%22 stroke-opacity=%220.26%22 stroke-width=%221.4%22%3E %3Cpolygon points=%2229.44,-17.00 29.44,17.00 0.00,34.00 -29.44,17.00 -29.44,-17.00 -0.00,-34.00%22/%3E%3Cpolygon points=%2288.33,-17.00 88.33,17.00 58.89,34.00 29.44,17.00 29.44,-17.00 58.89,-34.00%22/%3E%3Cpolygon points=%2229.44,85.00 29.44,119.00 0.00,136.00 -29.44,119.00 -29.44,85.00 -0.00,68.00%22/%3E%3Cpolygon points=%2288.33,85.00 88.33,119.00 58.89,136.00 29.44,119.00 29.44,85.00 58.89,68.00%22/%3E%3Cpolygon points=%2258.89,34.00 58.89,68.00 29.44,85.00 -0.00,68.00 0.00,34.00 29.44,17.00%22/%3E%3Cpolygon points=%220.00,34.00 0.00,68.00 -29.44,85.00 -58.89,68.00 -58.89,34.00 -29.44,17.00%22/%3E%3Cpolygon points=%22117.78,34.00 117.78,68.00 88.33,85.00 58.89,68.00 58.89,34.00 88.33,17.00%22/%3E%3C/g%3E%3C/svg%3E'),
        url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22176.7%22 height=%22204.0%22 viewBox=%220 0 176.7 204.0%22%3E%3Cpolygon points=%2254.77,36.38 54.77,65.62 29.44,80.24 4.12,65.62 4.12,36.38 29.44,21.76%22 fill=%22%23f0bb3f%22 fill-opacity=%220.3%22/%3E%3Cpolygon points=%22143.10,-14.62 143.10,14.62 117.78,29.24 92.46,14.62 92.46,-14.62 117.78,-29.24%22 fill=%22%23f0bb3f%22 fill-opacity=%220.2%22/%3E%3Cpolygon points=%22113.66,138.38 113.66,167.62 88.33,182.24 63.01,167.62 63.01,138.38 88.33,123.76%22 fill=%22%23f0bb3f%22 fill-opacity=%220.26%22/%3E%3Cpolygon points=%22172.55,87.38 172.55,116.62 147.22,131.24 121.90,116.62 121.90,87.38 147.22,72.76%22 fill=%22%23f0bb3f%22 fill-opacity=%220.16%22/%3E%3Cpolygon points=%2225.32,87.38 25.32,116.62 0.00,131.24 -25.32,116.62 -25.32,87.38 -0.00,72.76%22 fill=%22%23f0bb3f%22 fill-opacity=%220.22%22/%3E%3Cpolygon points=%2284.21,189.38 84.21,218.62 58.89,233.24 33.57,218.62 33.57,189.38 58.89,174.76%22 fill=%22%23f0bb3f%22 fill-opacity=%220.18%22/%3E%3C/svg%3E'),
        radial-gradient(ellipse 70% 60% at 50% 15%, rgba(255,246,220,0.72), transparent 68%);
    background-size: 58.9px 102px, 176.8px 204px, 100% 100%;
    background-position: 0 0, 0 0, center;
    background-repeat: repeat, repeat, no-repeat;
}

[data-theme="biene"] .app-header {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(150deg, rgba(255, 214, 120, 0.32), transparent 58%);
    border: 1px solid rgba(217, 148, 17, 0.28);
}

/* Honigtropfen-Kante unten am Kopfbereich */
[data-theme="biene"] .app-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 14px;
    background:
        radial-gradient(circle at 12px 0, var(--accent) 7px, transparent 7.5px) repeat-x,
        linear-gradient(var(--accent), var(--accent));
    background-size: 30px 14px, 100% 4px;
    background-position: 0 0, 0 0;
    opacity: 0.65;
    pointer-events: none;
}

[data-theme="biene"] .brand-text h1 {
    background: linear-gradient(135deg, #b3760a 0%, #f0bb3f 45%, #d99411 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 6px rgba(179, 118, 10, 0.22));
}

/* Wabenförmige Statuskacheln */
[data-theme="biene"] .stat-card {
    border: 2px solid rgba(217, 148, 17, 0.26);
    background-image: linear-gradient(160deg, rgba(255, 226, 160, 0.42), transparent 52%);
}

[data-theme="biene"] .stat-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
}

[data-theme="biene"] .hive-card {
    border: 2px solid rgba(217, 148, 17, 0.22);
    background-image: linear-gradient(165deg, rgba(255, 232, 178, 0.34), transparent 48%);
}

[data-theme="biene"] .btn-primary {
    background: linear-gradient(160deg, #f0bb3f, #d99411 55%, #b3760a);
    color: #33240a;
    box-shadow: 0 6px 18px rgba(179, 118, 10, 0.30);
}

[data-theme="biene"] .nav-btn.active {
    background: linear-gradient(160deg, #f0bb3f, #d99411);
    color: #33240a;
}

/* Sanft treibende Pollenpunkte */
[data-theme="biene"] .honeycomb-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(217, 148, 17, 0.30) 2px, transparent 2.5px),
        radial-gradient(circle, rgba(240, 187, 63, 0.22) 1.5px, transparent 2px);
    background-size: 190px 150px, 130px 210px;
    animation: pollenflug 46s linear infinite;
}

@keyframes pollenflug {
    from { background-position: 0 0, 60px 30px; }
    to   { background-position: 190px 150px, 190px 240px; }
}

/* Bewegte Hintergründe abschalten, wenn der Nutzer das wünscht */
@media (prefers-reduced-motion: reduce) {
    [data-theme="biene"] .honeycomb-bg::after {
        animation: none;
    }
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* =========================================================
   STOCKWAAGE – Diagramm und Tabelle
========================================================= */
.chart-wrap {
    margin: 14px 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-2);
}

.waage-chart { width: 100%; height: auto; display: block; }

.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-label { fill: var(--text-muted); font-size: 11px; font-family: var(--font-body); }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-fill-top { stop-color: var(--accent); stop-opacity: 0.28; }
.chart-fill-bottom { stop-color: var(--accent); stop-opacity: 0.02; }

.chart-signal { stroke: var(--surface); stroke-width: 2; }
.chart-schwarm { fill: var(--danger); }
.chart-tracht { fill: var(--accent-2); }
.chart-zehrung { fill: var(--warn); }

.waage-kennzahlen,
.waage-uebersicht {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin: 14px 0;
}

.waage-kennzahlen div,
.waage-kachel {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    text-align: center;
}

.waage-kennzahlen b { display: block; font-size: 1.5rem; line-height: 1.2; }
.waage-kennzahlen span { color: var(--text-muted); font-size: 0.82rem; }

.waage-kachel { display: flex; flex-direction: column; gap: 3px; }
.waage-kachel h4 { margin: 0 0 4px; font-size: 0.95rem; }
.waage-kachel b { font-size: 1.35rem; }
.waage-kachel span { font-size: 0.82rem; color: var(--text-muted); }

.trend-plus { color: var(--accent-2); font-weight: 700; }
.trend-minus { color: var(--warn); font-weight: 700; }
.trend-warn { color: var(--danger); font-weight: 700; }

.zeile-schwarm { background: var(--danger-soft); }
.zeile-tracht { background: var(--accent-2-soft); }
.zeile-zehrung { background: var(--warn-soft); }

.waage-abruf {
    margin: 12px 0;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-2);
}
.waage-abruf summary { cursor: pointer; font-weight: 700; }
.waage-abruf[open] summary { margin-bottom: 8px; }

@media print { .chart-wrap { break-inside: avoid; } }

/* Farbproben der neuen Themes im Auswahldialog */
.theme-swatch-bayern { background: linear-gradient(135deg, #ffffff 0 40%, #4a90d9 40% 100%); }
.theme-swatch-nobelhell { background: linear-gradient(135deg, #f7f4ee, #c9a961); }
.theme-swatch-nobeldunkel { background: linear-gradient(135deg, #0e0f12, #c9a961); }
.theme-swatch-biene { background: linear-gradient(135deg, #fdf6e3 0 45%, #d99411 45% 100%); }

/* =========================================================
   EFFEKTSCHICHT FÜR DIE VIER GESTALTUNGSTHEMES
   Next2Bee · MSolutions 2026

   Grundsatz: Jedes Theme bekommt EINE Bewegung, die zu seinem
   Motiv gehört – nicht überall dieselbe Animation.
   Bayern atmet wie Alpenlicht, Nobel Dunkel bewegt Messingglanz,
   Nobel Hell bleibt fast still (das ist dort die Aussage),
   Biene lässt Pollen treiben.

   Alles Ambiente liegt hinter pointer-events: none und wird
   unter prefers-reduced-motion vollständig stillgelegt.
========================================================= */

/* ---------------------------------------------------------
   Gemeinsame Grundlagen
--------------------------------------------------------- */
@keyframes n2bDrift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(-2%, -1.5%, 0) scale(1.06); }
}

@keyframes n2bSheen {
    0%   { transform: translateX(-120%) skewX(-18deg); }
    100% { transform: translateX(260%) skewX(-18deg); }
}

@keyframes n2bGlanz {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

@keyframes n2bAufblenden {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* Ambiente-Ebene über dem Wabenhintergrund */
[data-theme="bayern"] .honeycomb-bg::before,
[data-theme="nobelhell"] .honeycomb-bg::before,
[data-theme="nobeldunkel"] .honeycomb-bg::before,
[data-theme="biene"] .honeycomb-bg::before {
    content: "";
    position: absolute;
    inset: -12%;
    pointer-events: none;
    will-change: transform;
}

/* Karten heben sich beim Zeigen – dezent, aber spürbar */
[data-theme="bayern"] .card,
[data-theme="nobelhell"] .card,
[data-theme="nobeldunkel"] .card,
[data-theme="biene"] .card,
[data-theme="bayern"] .hive-card,
[data-theme="nobelhell"] .hive-card,
[data-theme="nobeldunkel"] .hive-card,
[data-theme="biene"] .hive-card,
[data-theme="bayern"] .stat-card,
[data-theme="nobelhell"] .stat-card,
[data-theme="nobeldunkel"] .stat-card,
[data-theme="biene"] .stat-card {
    transition:
        transform 260ms cubic-bezier(.2, .7, .3, 1),
        box-shadow 260ms cubic-bezier(.2, .7, .3, 1),
        border-color 260ms ease;
}

[data-theme="bayern"] .hive-card:hover,
[data-theme="nobelhell"] .hive-card:hover,
[data-theme="nobeldunkel"] .hive-card:hover,
[data-theme="biene"] .hive-card:hover,
[data-theme="bayern"] .stat-card:hover,
[data-theme="nobelhell"] .stat-card:hover,
[data-theme="nobeldunkel"] .stat-card:hover,
[data-theme="biene"] .stat-card:hover {
    transform: translateY(-4px);
}

/* Ansichtswechsel bekommt eine ruhige Staffelung */
[data-theme="bayern"] .view.active > *,
[data-theme="nobelhell"] .view.active > *,
[data-theme="nobeldunkel"] .view.active > *,
[data-theme="biene"] .view.active > * {
    animation: n2bAufblenden 420ms cubic-bezier(.2, .7, .3, 1) backwards;
}

[data-theme="bayern"] .view.active > *:nth-child(2),
[data-theme="nobelhell"] .view.active > *:nth-child(2),
[data-theme="nobeldunkel"] .view.active > *:nth-child(2),
[data-theme="biene"] .view.active > *:nth-child(2) { animation-delay: 60ms; }

[data-theme="bayern"] .view.active > *:nth-child(3),
[data-theme="nobelhell"] .view.active > *:nth-child(3),
[data-theme="nobeldunkel"] .view.active > *:nth-child(3),
[data-theme="biene"] .view.active > *:nth-child(3) { animation-delay: 120ms; }

/* ---------------------------------------------------------
   BAYERN – Alpenlicht über der Raute
   Die Raute steht still, das Licht darüber wandert.
--------------------------------------------------------- */
[data-theme="bayern"] .honeycomb-bg::before {
    background:
        radial-gradient(ellipse 60% 40% at 15% 0%, rgba(255, 255, 255, 0.28), transparent 60%),
        radial-gradient(ellipse 50% 45% at 85% 10%, rgba(120, 178, 235, 0.30), transparent 62%),
        radial-gradient(ellipse 70% 30% at 50% 100%, rgba(28, 122, 74, 0.14), transparent 65%);
    animation: n2bDrift 34s ease-in-out infinite;
}

/* Enzianblauer Schimmer über der aktiven Navigation */
[data-theme="bayern"] .nav-btn.active {
    position: relative;
    overflow: hidden;
}

[data-theme="bayern"] .nav-btn.active::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    animation: n2bSheen 3.6s ease-in-out infinite;
    pointer-events: none;
}

[data-theme="bayern"] .hive-card:hover,
[data-theme="bayern"] .stat-card:hover {
    box-shadow: 0 20px 44px rgba(15, 60, 110, 0.24);
    border-color: rgba(15, 95, 168, 0.42);
}

/* Weiß-blaue Kante an der Kopfzeile – die Flagge, nur angedeutet */
[data-theme="bayern"] .app-header {
    position: relative;
    overflow: hidden;
}

[data-theme="bayern"] .app-header::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: repeating-linear-gradient(
        90deg,
        #0f5fa8 0 22px,
        #ffffff 22px 44px
    );
    opacity: 0.65;
}

/* ---------------------------------------------------------
   NOBEL HELL – Porzellan
   Hier ist Zurückhaltung die Aussage. Nur ein sehr langsames
   Wandern des Lichts und eine Haarlinie in Champagner.
--------------------------------------------------------- */
[data-theme="nobelhell"] .honeycomb-bg::before {
    background:
        radial-gradient(ellipse 55% 50% at 25% 15%, rgba(255, 255, 255, 0.30), transparent 65%),
        radial-gradient(ellipse 45% 40% at 80% 75%, rgba(198, 178, 138, 0.16), transparent 68%);
    animation: n2bDrift 52s ease-in-out infinite;
}

[data-theme="nobelhell"] .card,
[data-theme="nobelhell"] .hive-card,
[data-theme="nobelhell"] .stat-card {
    position: relative;
}

/* Champagnerfarbene Oberkante, nur bei Berührung sichtbar */
[data-theme="nobelhell"] .card::after,
[data-theme="nobelhell"] .hive-card::after,
[data-theme="nobelhell"] .stat-card::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(176, 148, 90, 0.75), transparent);
    opacity: 0;
    transition: opacity 320ms ease;
    pointer-events: none;
}

[data-theme="nobelhell"] .card:hover::after,
[data-theme="nobelhell"] .hive-card:hover::after,
[data-theme="nobelhell"] .stat-card:hover::after {
    opacity: 1;
}

[data-theme="nobelhell"] .hive-card:hover,
[data-theme="nobelhell"] .stat-card:hover {
    box-shadow: 0 18px 40px rgba(60, 50, 32, 0.14);
}

/* ---------------------------------------------------------
   NOBEL DUNKEL – Messing auf Nussbaum
   Das Signaturelement: fließender Goldglanz auf Titel und
   Hauptknopf. Alles andere bleibt ruhig und tief.
--------------------------------------------------------- */
[data-theme="nobeldunkel"] .honeycomb-bg::before {
    background:
        radial-gradient(ellipse 55% 45% at 18% 8%, rgba(201, 169, 97, 0.14), transparent 62%),
        radial-gradient(ellipse 50% 40% at 82% 88%, rgba(96, 122, 148, 0.12), transparent 65%),
        radial-gradient(ellipse 40% 30% at 60% 40%, rgba(201, 169, 97, 0.06), transparent 70%);
    animation: n2bDrift 44s ease-in-out infinite;
}

[data-theme="nobeldunkel"] .brand-text h1 {
    background: linear-gradient(
        100deg,
        #8a6d33 0%,
        #d9bd77 22%,
        #fff3d0 38%,
        #d9bd77 55%,
        #8a6d33 78%,
        #d9bd77 100%
    );
    background-size: 260% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: n2bGlanz 9s ease-in-out infinite;
}

[data-theme="nobeldunkel"] .btn-primary {
    position: relative;
    overflow: hidden;
}

[data-theme="nobeldunkel"] .btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 243, 208, 0.32), transparent);
    transform: translateX(-120%) skewX(-18deg);
    pointer-events: none;
}

[data-theme="nobeldunkel"] .btn-primary:hover::after {
    animation: n2bSheen 900ms ease-out;
}

[data-theme="nobeldunkel"] .hive-card:hover,
[data-theme="nobeldunkel"] .stat-card:hover {
    box-shadow:
        0 22px 50px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(201, 169, 97, 0.30);
    border-color: rgba(201, 169, 97, 0.42);
}

/* Messingne Haarlinie unter der aktiven Navigation */
[data-theme="nobeldunkel"] .nav-btn.active::after {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 4px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #d9bd77, transparent);
}

/* ---------------------------------------------------------
   BIENE – Wabe und Pollen
   Die Wabe pulst kaum merklich, darüber treiben Pollenkörner.
--------------------------------------------------------- */
[data-theme="biene"] .honeycomb-bg::before {
    background:
        radial-gradient(circle 18% at 20% 20%, rgba(255, 214, 102, 0.28), transparent 60%),
        radial-gradient(circle 20% at 78% 30%, rgba(255, 176, 46, 0.20), transparent 62%),
        radial-gradient(circle 24% at 50% 92%, rgba(146, 104, 22, 0.14), transparent 66%);
    animation: n2bDrift 28s ease-in-out infinite;
}

[data-theme="biene"] .hive-card:hover,
[data-theme="biene"] .stat-card:hover {
    box-shadow: 0 20px 44px rgba(146, 104, 22, 0.28);
    border-color: rgba(214, 158, 46, 0.55);
}

/* Honigtropfen-Glanz auf dem Hauptknopf */
[data-theme="biene"] .btn-primary {
    position: relative;
    overflow: hidden;
}

[data-theme="biene"] .btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
    transform: translateX(-120%) skewX(-18deg);
    pointer-events: none;
}

[data-theme="biene"] .btn-primary:hover::after {
    animation: n2bSheen 820ms ease-out;
}

/* Das Wappentier bewegt sich beim Zeigen */
[data-theme="biene"] .hex-badge {
    transition: transform 300ms cubic-bezier(.2, .7, .3, 1);
}

[data-theme="biene"] .brand:hover .hex-badge {
    transform: rotate(-12deg) scale(1.12);
}

/* ---------------------------------------------------------
   BEWEGUNG ABSCHALTBAR
   Wer im Betriebssystem reduzierte Bewegung eingestellt hat,
   bekommt dieselbe Gestaltung ohne jede Animation.
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    [data-theme="bayern"] .honeycomb-bg::before,
    [data-theme="nobelhell"] .honeycomb-bg::before,
    [data-theme="nobeldunkel"] .honeycomb-bg::before,
    [data-theme="biene"] .honeycomb-bg::before,
    [data-theme="bayern"] .nav-btn.active::after,
    [data-theme="nobeldunkel"] .brand-text h1,
    [data-theme="nobeldunkel"] .btn-primary:hover::after,
    [data-theme="biene"] .btn-primary:hover::after,
    [data-theme="bayern"] .view.active > *,
    [data-theme="nobelhell"] .view.active > *,
    [data-theme="nobeldunkel"] .view.active > *,
    [data-theme="biene"] .view.active > * {
        animation: none !important;
    }

    [data-theme="nobeldunkel"] .brand-text h1 {
        background-position: 30% 50%;
    }

    [data-theme="bayern"] .hive-card:hover,
    [data-theme="nobelhell"] .hive-card:hover,
    [data-theme="nobeldunkel"] .hive-card:hover,
    [data-theme="biene"] .hive-card:hover,
    [data-theme="bayern"] .stat-card:hover,
    [data-theme="nobelhell"] .stat-card:hover,
    [data-theme="nobeldunkel"] .stat-card:hover,
    [data-theme="biene"] .stat-card:hover {
        transform: none;
    }
}

/* Beim Drucken bleibt nichts davon übrig */
@media print {
    .honeycomb-bg::before { display: none !important; }
}


/* =========================================================
   MUSTER-ATMEN
   Die Rosetten drehen sich unmerklich langsam, die Raute steht.
   Ein stehendes Wappenmuster ist richtig, ein stehendes Ornament
   waere tot.
========================================================= */
@keyframes n2bRosette {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

[data-theme="nobelhell"] .honeycomb-bg,
[data-theme="nobeldunkel"] .honeycomb-bg {
    animation: n2bRosette 900s linear infinite;
    transform-origin: center 40%;
}

@media (prefers-reduced-motion: reduce) {
    [data-theme="nobelhell"] .honeycomb-bg,
    [data-theme="nobeldunkel"] .honeycomb-bg {
        animation: none;
    }
}

/* =========================================================
   MEHRFACHERFASSUNG
   Auswahl mehrerer Völker für denselben Vorgang.
========================================================= */
.mehrfach-box {
    margin-top: 4px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    overflow: hidden;
}

.mehrfach-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
}

.mehrfach-schalter {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 700;
    margin: 0;
}

.mehrfach-schalter input { width: 22px; height: 22px; flex: none; }

.mehrfach-zahl {
    font-size: 0.88rem;
    color: var(--accent-2);
    font-weight: 700;
}
.mehrfach-zahl.leer { color: var(--danger); }

.mehrfach-body {
    padding: 0 12px 12px;
    border-top: 1px solid var(--line);
}

.mehrfach-schnell {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 10px 0;
}

.btn-mini {
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-soft);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.btn-mini:hover {
    border-color: var(--accent);
    color: var(--text);
}

.mehrfach-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 4px;
    max-height: 210px;
    overflow-y: auto;
    padding: 2px;
}

.mehrfach-volk {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    margin: 0;
    font-weight: 400;
}

.mehrfach-volk:hover { background: var(--surface); }

.mehrfach-volk input { width: 20px; height: 20px; flex: none; }

.mehrfach-volk small {
    display: block;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.mehrfach-warnung {
    margin: 10px 0 0;
    padding: 9px 11px;
    border-left: 3px solid var(--warn);
    background: var(--warn-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: 0.86rem;
}

/* Gesperrtes Einzelfeld sichtbar zurücknehmen */
select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* =========================================================
   KURZE RÜCKMELDUNG
========================================================= */
.toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    z-index: 900;
    max-width: min(90vw, 460px);
    padding: 13px 20px;
    border-radius: 999px;
    background: var(--text);
    color: var(--bg);
    font-weight: 700;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.32);
    animation: toastRein 240ms cubic-bezier(.2, .7, .3, 1);
}

.toast.weg {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
    transition: opacity 460ms ease, transform 460ms ease;
}

@keyframes toastRein {
    from { opacity: 0; transform: translateX(-50%) translateY(14px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .toast { animation: none; }
    .toast.weg { transition: none; }
}

@media (max-width: 720px) {
    .mehrfach-liste { grid-template-columns: 1fr; max-height: 260px; }
}

@media print {
    .mehrfach-box, .toast { display: none !important; }
}

/* =========================================================
   MSOLUTIONS – MARKE
   Das M entsteht aus verbundenen Netzwerkknoten. Gezeichnet
   mit currentColor, damit es jedes Theme mitnimmt, statt in
   neun Fassungen gepflegt zu werden.
========================================================= */
/* Das Logo behält seine Originalfarben.
   Bewusst KEIN color: inherit und keine Theme-Anpassung: Ein
   Markenzeichen wechselt nicht die Farbe, nur weil der Nutzer auf
   Nacht umschaltet. Die Farben stehen im SVG selbst; das CSS legt
   hier ausschließlich die Größe fest. */
.ms-logo {
    width: 1em;
    height: 1em;
    display: block;
    overflow: visible;
}

.ms-logo-klein {
    display: inline-flex;
    align-items: center;
    font-size: 26px;
    margin-left: 2px;
}

.ms-marke {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-soft);
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    transition:
        border-color 200ms ease,
        color 200ms ease,
        transform 200ms cubic-bezier(.2, .7, .3, 1);
}

.ms-marke .ms-logo {
    font-size: 30px;
}

.ms-marke:hover {
    border-color: var(--accent);
    color: var(--text);
    transform: translateY(-2px);
}

.ms-marke:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.ms-marke-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    text-align: left;
}

.ms-marke-text b { font-size: 0.98rem; letter-spacing: 0.2px; }
.ms-marke-text small { color: var(--text-muted); font-size: 0.76rem; }

/* =========================================================
   FUSSZEILE
   Aufbau wie in der D'App: Marke, Produktangabe mit Build,
   Rückmeldung. Damit sieht das Portfolio zusammengehörig aus.
========================================================= */
.app-footer {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 18px 24px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
}

.app-footer-text {
    min-width: 0;
    line-height: 1.6;
}

.app-footer-text p { margin: 0; }

.app-footer-text .produkt {
    font-weight: 700;
    color: var(--text-soft);
}

.app-footer-text .build,
.app-footer-text .recht {
    color: var(--text-muted);
    font-size: 0.88rem;
}

.app-footer-text .build {
    font-variant-numeric: tabular-nums;
}

.app-footer-feedback {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    max-width: 320px;
}

.feedback-hinweis {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.app-footer-recht {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .app-footer {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .app-footer-feedback { max-width: none; }
}

@media (max-width: 720px) {
    .ms-logo-klein { display: none; }
}

@media print {
    .ms-marke {
        border: none;
        background: none;
        padding: 0;
    }
    .ms-logo-klein { display: none; }
}


/* =========================================================
   MEHRERE VÖLKER ANLEGEN
   Anzahl und Namensschema statt Auswahlliste – hier entstehen
   neue Völker, keine Zuordnung zu bestehenden.
========================================================= */
.hive-mehrfach-felder {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 10px;
    margin: 12px 0;
}

.hive-mehrfach-felder label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.86rem;
    font-weight: 700;
    margin: 0;
}

.hive-mehrfach-felder input { min-height: 44px; }

.vorschau-zeile {
    margin: 10px 0 4px;
    padding: 10px 12px;
    border-left: 3px solid var(--accent-2);
    background: var(--accent-2-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    overflow-wrap: anywhere;
}

.vorschau-hinweis {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 0.84rem;
}

@media (max-width: 720px) {
    .hive-mehrfach-felder { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   KURZWAHL AUS BEREITS ERFASSTEN WERTEN
   Die häufigsten Einträge als anklickbare Felder unter dem
   Eingabefeld – mit klebrigen Fingern schneller als tippen.
========================================================= */
.kurzwahl {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.kurzwahl:empty { display: none; }

.kurzwahl .btn-mini {
    font-weight: 400;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kurzwahl .btn-mini:hover {
    background: var(--accent-2-soft);
    border-color: var(--accent-2);
    color: var(--text);
}

@media print { .kurzwahl { display: none !important; } }


/* =========================================================
   HINWEIS AUF EINE NEUE FASSUNG
========================================================= */
.update-balken {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 18px;
    background: var(--accent);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}

.update-balken button {
    min-height: 40px;
    padding: 0 16px;
}

.update-balken .btn-secondary {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.55);
    color: #ffffff;
}

@media print {
    .app-footer-feedback,
    .update-balken { display: none !important; }
}